1

components/cwg-confirm-popup.vue

@@ -1,36 +1,36 @@
 <template>
-    <uni-popup ref="popup" type="center" :is-mask-click="false" @change="onChange">
-        <view class="confirm-popup">
+    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :show-footers="true">
+        <view class="popup-content">
             <view class="confirm-title">{{ title }}</view>
             <view class="confirm-content">{{ content }}</view>
-            <view class="confirm-buttons">
-                <button class="confirm-btn cancel" @click="cancel">{{ cancelText }}</button>
-                <button class="confirm-btn confirm" @click="confirm">{{ confirmText }}</button>
-            </view>
         </view>
-    </uni-popup>
+        <template #footer>
+            <button @click="cancel">{{ cancelText }}</button>
+            <button type="primary" @click="confirm">{{ confirmText }}</button>
+        </template>
+    </cwg-popup>
 </template>
-
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-const popup = ref(null)
-const title = ref('提示')
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+const title = ref(t('Msg.SystemPrompt'))
 const content = ref('')
-const confirmText = ref('确定')
-const cancelText = ref('取消')
+const confirmText = ref(t('Btn.Confirm'))
+const cancelText = ref(t('Btn.Cancel'))
 let currentEventId = null
 
 const handleShowConfirm = (options) => {
-    title.value = options.title || '提示'
+    title.value = options.title || title.value
     content.value = options.content || ''
-    confirmText.value = options.confirmText || '确定'
-    cancelText.value = options.cancelText || '取消'
+    confirmText.value = options.confirmText || t('Btn.Confirm')
+    cancelText.value = options.cancelText || t('Btn.Cancel')
     currentEventId = options.eventId
-    popup.value?.open()
+    visible.value = true
 }
 
 const closeAndResult = (result) => {
-    popup.value?.close()
+    visible.value = false
     if (currentEventId) {
         uni.$emit(`confirmResult_${currentEventId}`, result)
         currentEventId = null
@@ -39,9 +39,6 @@ const closeAndResult = (result) => {
 
 const confirm = () => closeAndResult(true)
 const cancel = () => closeAndResult(false)
-const onChange = (e) => {
-    if (e.type === 'close') closeAndResult(false)
-}
 
 onMounted(() => {
     uni.$on('showConfirm', handleShowConfirm)
@@ -49,6 +46,10 @@ onMounted(() => {
 onUnmounted(() => {
     uni.$off('showConfirm', handleShowConfirm)
 })
+const visible = ref(false)
+watch(visible, (value) => {
+    if (!value) closeAndResult(false)
+})
 </script>
 
 <style scoped lang="scss">
@@ -81,12 +82,15 @@ onUnmounted(() => {
 
 .confirm-buttons {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     gap: px2rpx(24);
 }
 
 .confirm-btn {
-    flex: 1;
+    // flex: 1;
+    min-width: px2rpx(120);
+    padding: 0 px2rpx(20);
+    margin: 0;
     height: px2rpx(40);
     line-height: px2rpx(40);
     border-radius: px2rpx(20);
@@ -155,7 +159,158 @@ onUnmounted(() => {
     .confirm-btn {
         height: px2rpx(48);
         line-height: px2rpx(48);
-        font-size: px2rpx(24);
+        font-size: px2rpx(20);
+    }
+}
+</style>
+
+
+
+
+
+<style lang="scss" scoped>
+.clause-popup {
+    width: 90%;
+    max-width: 800px;
+    max-height: 80vh;
+    overflow: hidden;
+
+    .clause-content {
+        padding: 20px;
+
+        scroll-view {
+            width: 100%;
+
+            h4 {
+                font-size: 16px;
+                font-weight: 600;
+                color: #303133;
+                margin-bottom: 12px;
+            }
+
+            ul {
+                margin-bottom: 20px;
+
+                li {
+                    margin-bottom: 8px;
+                    line-height: 1.5;
+                    color: #606266;
+                }
+            }
+
+            table {
+                margin: 16px 0;
+                width: 100%;
+                border-collapse: collapse;
+
+                th,
+                td {
+                    padding: 10px;
+                    text-align: center;
+                    border: 1px solid #dcdfe6;
+                    font-size: 14px;
+                }
+
+                th {
+                    background: #f5f7fa;
+                    font-weight: 600;
+                    color: #303133;
+                }
+
+                td {
+                    color: #606266;
+                }
+            }
+
+            // Handle v-html content
+            div {
+                line-height: 1.6;
+                color: #606266;
+
+                p {
+                    margin-bottom: 12px;
+                }
+
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                    margin: 16px 0 8px 0;
+                    color: #303133;
+                }
+
+                ul,
+                ol {
+                    margin-left: 20px;
+                    margin-bottom: 12px;
+                }
+
+                li {
+                    margin-bottom: 4px;
+                }
+            }
+        }
+    }
+
+    .clause-footer {
+        padding: 16px 20px;
+        border-top: 1px solid #e4e7ed;
+        display: flex;
+        justify-content: center;
+
+        button {
+            min-width: 120px;
+            padding: 10px 20px;
+            border-radius: 4px;
+        }
+    }
+}
+
+// Responsive styles
+@media (max-width: 768px) {
+    .clause-popup {
+        width: 95%;
+        max-height: 85vh;
+
+        .clause-header {
+            padding: 12px 16px;
+
+            .clause-title {
+                font-size: 16px;
+            }
+        }
+
+        .clause-content {
+            padding: 16px;
+
+            scroll-view {
+                height: 50vh;
+
+                h4 {
+                    font-size: 14px;
+                }
+
+                table {
+
+                    th,
+                    td {
+                        padding: 8px;
+                        font-size: 12px;
+                    }
+                }
+            }
+        }
+
+        .clause-footer {
+            padding: 12px 16px;
+
+            button {
+                min-width: 100px;
+                padding: 8px 16px;
+            }
+        }
     }
 }
 </style>