1

components/cwg-account-limit-popup.vue

@@ -0,0 +1,200 @@
+<template>
+    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :show-footers="true">
+        <view class="popup-content">
+            <view class="icon">
+                <cwg-icon name="verified" :size="80" color="#009933" />
+            </view>
+            <view class="des1">{{ t('accountLimit.title') }}</view>
+            <view class="content">
+                <view class="des1">
+                    <view>{{ t('accountLimit.mt4Message') }}</view>
+                    <view>
+                        <view>{{ t('accountLimit.mt4Condition1') }}</view>
+                    </view>
+                    <view>{{ t('accountLimit.mt4Action') }}</view>
+                </view>
+            </view>
+        </view>
+        <template #footer>
+            <button @click="closeDia">{{ t('Btn.Cancel') }}</button>
+            <button type="primary" @click="closeDia">{{ t('Btn.Confirm') }}</button>
+        </template>
+    </cwg-popup>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false
+    },
+    type: {
+        type: String,
+        default: ''
+    }
+});
+
+const emit = defineEmits(['update:visible', 'confirm']);
+
+const { t } = useI18n();
+
+// Watch for changes in visible prop and emit update event
+const visible = computed({
+    get: () => props.visible,
+    set: (value) => emit('update:visible', value)
+});
+const closeDia = () => {
+    visible.value = false;
+    emit('confirm');
+}
+</script>
+
+<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>

components/cwg-success-popup.vue

@@ -5,6 +5,7 @@
                 <cwg-icon name="verified" :size="80" color="#009933" />
             </view>
             <view class="des1">{{ t('ApplicationDialog.Des1') }}</view>
+            <view class="des2" v-if="type === 'create'">{{ t('ApplicationDialog.Des12') }}</view>
         </view>
         <template #footer>
             <button @click="closeDia">{{ t('Btn.Cancel') }}</button>
@@ -22,6 +23,10 @@ const props = defineProps({
         type: Boolean,
         default: false
     },
+    type: {
+        type: String,
+        default: ''
+    }
 });
 
 const emit = defineEmits(['update:visible', 'confirm']);

pages/customer/create-account.vue

@@ -147,29 +147,10 @@
             </view>
         </uni-popup>
 
+        <cwg-error-popup v-model:visible="dialogError" :responseMessage="RES" />
+        <cwg-success-popup v-model:visible="dialogSuccess" @confirm="closeDia" type="create" />
         <!-- 账户开立上限提示弹框 -->
-        <uni-popup :show="dialogAccountLimit" mode="center" round="16" @close="closeAccountLimitDialog">
-            <view class="account-limit-content">
-                <view class="icon">
-                    <text class="iconfont icon-warning"></text>
-                </view>
-                <view class="title">{{ t('accountLimit.title') }}</view>
-                <view class="content">
-                    <view class="limit-text">
-                        <view>{{ t('accountLimit.mt4Message') }}</view>
-                        <view>
-                            <view>{{ t('accountLimit.mt4Condition1') }}</view>
-                        </view>
-                        <view>{{ t('accountLimit.mt4Action') }}</view>
-                    </view>
-                </view>
-                <view class="dialog-footer">
-                    <uv-button type="primary" class="confirm-btn" @click="closeAccountLimitDialog">
-                        {{ t('accountLimit.button') }}
-                    </uv-button>
-                </view>
-            </view>
-        </uni-popup>
+        <cwg-account-limit-popup v-model:visible="dialogAccountLimit" @confirm="closeAccountLimitDialog" />
     </cwg-page-wrapper>
 
 </template>
@@ -226,6 +207,8 @@ const tabs = computed(() => ([
     { value: 'demo', text: t('vu.item2') }
 ]))
 
+const dialogError = ref(false)
+const dialogSuccess = ref(false)
 const currentAccount = computed(() => {
     // 从账户列表中查找匹配的账户
     const matched = standardAccounts.value.find(account => account.id == isOpenAccount.value);
@@ -488,8 +471,7 @@ const newAccount = async () => {
                 }
                 router.push('/pages/customer/index')
                 isOpenAccount.value = 0;
-                dialogCheck.value = true;
-                dialogVisible.value = true;
+                dialogSuccess.value = true;
                 if (formRef.value) {
                     formRef.value.resetFields();
                 }
@@ -499,8 +481,7 @@ const newAccount = async () => {
                 flag.value = false;
             } else {
                 RES.value = res.msg;
-                dialogCheck.value = true;
-                dialogVisible.value = false;
+                dialogError.value = true;
                 flag.value = false;
                 resetForm()
             }
@@ -512,7 +493,11 @@ const newAccount = async () => {
             // showToast(error[0].errorMessage);
             return
         } else {
+            console.log(error)
+            dialogError.value = true;
             RES.value = error.msg;
+            console.log(dialogError.value);
+            resetForm()
         }
     }
 };