flat: 注入全局弹窗

components/GlobalPopup/GlobalPopup.vue

@@ -0,0 +1,115 @@
+<template>
+    <uni-popup ref="popup" type="dialog" mask-background-color="rgba(0,0,0,0.5)" @change="onPopupChange">
+        <view class="global-confirm-wrapper">
+            <uni-popup-dialog
+                mode="base"
+                :type="state.type"
+                :title="state.title"
+                :content="state.content"
+                :before-close="true"
+                @confirm="onConfirm"
+                @close="onClose"
+            ></uni-popup-dialog>
+        </view>
+    </uni-popup>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+
+const popup = ref(null);
+const state = reactive({
+    title: '',
+    content: '',
+    type: 'info',
+    resolve: null,
+});
+
+onMounted(() => {
+    uni.$on('show-global-popup', (options) => {
+        state.title = options.title || '提示';
+        state.content = options.content || '';
+        state.type = options.type || 'info';
+        state.resolve = options.resolve;
+        popup.value.open();
+    });
+});
+
+onUnmounted(() => {
+    uni.$off('show-global-popup');
+});
+
+const onConfirm = () => {
+    if (state.resolve) state.resolve(true);
+    popup.value.close();
+};
+
+const onClose = () => {
+    if (state.resolve) state.resolve(false);
+    popup.value.close();
+};
+
+const onPopupChange = (e) => {
+    if (!e.show && state.resolve) {
+        state.resolve(false);
+        state.resolve = null;
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.global-confirm-wrapper {
+    /* 整个弹窗容器宽度自适应 */
+    width: 600rpx;
+
+    /* 深度覆盖 uni-popup-dialog 内置样式 */
+    :deep(.uni-popup-dialog) {
+        width: 600rpx !important;
+        background-color: #fff;
+        border-radius: 24rpx;
+
+        /* 标题部分 */
+        .uni-dialog-title {
+            padding: 40rpx 0 20rpx;
+            .uni-dialog-title-text {
+                font-size: 36rpx;
+                font-weight: bold;
+            }
+        }
+
+        /* 内容部分 */
+        .uni-dialog-content {
+            padding: 20rpx 40rpx 40rpx;
+            .uni-dialog-content-text {
+                font-size: 30rpx;
+                color: #666;
+                line-height: 1.5;
+            }
+        }
+
+        /* 底部按钮组 */
+        .uni-dialog-button-group {
+            height: 100rpx;
+            border-top: 1rpx solid #f0f0f0;
+
+            .uni-dialog-button {
+                height: 100%;
+                /* 每个按钮的样式 */
+                .uni-dialog-button-text {
+                    font-size: 32rpx;
+                }
+
+                /* 确定按钮颜色（通常是蓝色或主题色） */
+                .uni-button-color {
+                    color: #007aff;
+                }
+            }
+
+            /* 按钮中间的分割线 */
+            .uni-border-left {
+                border-left: 1rpx solid #f0f0f0;
+            }
+        }
+    }
+}
+</style>