feat: 弹窗

components/AddBankDialog.vue

@@ -1,12 +1,13 @@
 <template>
-  <uni-popup ref="popupRef" type="center" style="z-index: 999;">
-    <view class="dialog-container">
-      <view class="dialog-header">
-        <text class="dialog-title" v-t="typeMap[form.type]"></text>
-        <view class="dialog-close" @click="close">
-          <text>×</text>
-        </view>
-      </view>
+  <cwg-popup :title="title" :visible="visible" @close="onPopupClose" @confirm="submit">
+<!--  <uni-popup ref="popupRef" type="center" style="z-index: 999;">-->
+<!--    <view class="dialog-container">-->
+<!--      <view class="dialog-header">-->
+<!--        <text class="dialog-title" v-t="typeMap[form.type]"></text>-->
+<!--        <view class="dialog-close" @click="close">-->
+<!--          <text>×</text>-->
+<!--        </view>-->
+<!--      </view>-->
       <uni-forms ref="formRef" :rules="rules" :model="form" labelWidth="200" label-position="top"
         validate-trigger="submit" class="crm-form">
         <uni-row class="form-row uni-row1">
@@ -151,12 +152,13 @@
           </uni-col>
         </uni-row>
       </uni-forms>
-      <view class="dialog-footer">
-        <view class="btn btn-cancel" @click="close">{{ t('Btn.Cancel') }}</view>
-        <view class="btn btn-confirm" @click="submit">{{ t('Btn.Confirm') }}</view>
-      </view>
-    </view>
-  </uni-popup>
+<!--      <view class="dialog-footer">-->
+<!--        <view class="btn btn-cancel" @click="close">{{ t('Btn.Cancel') }}</view>-->
+<!--        <view class="btn btn-confirm" @click="submit">{{ t('Btn.Confirm') }}</view>-->
+<!--      </view>-->
+<!--    </view>-->
+<!--  </uni-popup>-->
+  </cwg-popup>
 </template>
 
 <script setup lang="ts">
@@ -175,6 +177,10 @@ const typeMap = {
   2: 'PersonalManagement.Title.BankWireTransfer',
   3: 'PersonalManagement.Label.CreditCard',
 }
+
+const title = computed(()=>{
+  return form.value.type?t(typeMap[form.value.type]):''
+})
 const username = computed(() => {
   let first = userStore?.userInfo?.customInfo.firstName
   let middle = userStore?.userInfo?.customInfo.middle
@@ -221,8 +227,8 @@ const hobbys = computed(() => {
 })
 const emit = defineEmits(['success'])
 
-const popupRef = ref<any>(null)
 const formRef = ref<any>(null)
+const visible =ref(false)
 
 const form = ref({
   bankFront: ''
@@ -330,15 +336,20 @@ const open = async (type: number) => {
   if (type === 1) {
     getMobileInfo()
   }
-  popupRef.value?.open()
+  visible.value = true
 }
 
 // 关闭弹窗
 const close = () => {
-  popupRef.value?.close()
-  resetForm()
+  visible.value = false
+
 }
 
+// 弹窗真正关闭后清空表单
+const onPopupClose = () => {
+  resetForm();
+};
+
 // 重置表单
 const resetForm = () => {
   form.value = {}

components/cwg-popup.vue

@@ -163,7 +163,9 @@ watch(() => props.visible, (val) => {
 // 弹窗状态变化
 const handlePopupChange = (e) => {
     if (!e.show) {
-        emit('close')
+        setTimeout(() => {
+            emit('close')
+        }, 300)
     }
 }
 

pages/mine/components/AddFileDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <cwg-popup :title="form.title" :visible="visible" @close="close" @confirm="submit" >
+  <cwg-popup :title="form.title" :visible="visible" @close="onPopupClose" @confirm="submit" >
 <!--        <view class="dialog-container">-->
 <!--            <view class="dialog-header">-->
 <!--                <text class="dialog-title">{{ form.title }}</text>-->
@@ -117,8 +117,11 @@ const open = async (item) => {
 
 // 关闭弹窗
 const close = () => {
-    // fileRef.value?.close();
     visible.value = false
+};
+
+// 弹窗真正关闭后清空表单
+const onPopupClose = () => {
     resetForm();
 };
 

pages/mine/components/FileManagementTab.vue

@@ -1,56 +1,58 @@
 <template>
     <view>
 <!--        <view class="content-title" v-t="'PersonalManagement.Title.FileManagement'"></view>-->
-        <view class="content-title">
-            <view/>
-            <view class="content-title-btns">
-<!--              -->
-              <button v-if="!isSHowBtn.isSHowIdentity" type="button" class="btn btn-danger btn-shadow waves-effect" @click="openAddFileDialog(1)" >
-                <view class="d-flex align-items-center">
-                  <cwg-icon name="crm-plus" :size="14" color="#fff" />
-                  <text v-t="'PersonalManagement.Title.ProofOfIdentity'" />
-                </view>
-              </button>
-              <button v-if="!isSHowBtn.isSHowAddress" type="button" class="btn btn-danger btn-shadow waves-effect" @click="openAddFileDialog(2)" >
-                <view class="d-flex align-items-center">
-                  <cwg-icon name="crm-plus" :size="14" color="#fff" />
-                  <text v-t="'PersonalManagement.Title.ProofOfAddress'" />
-                </view>
-              </button>
-              <button  type="button" class="btn btn-danger btn-shadow waves-effect" @click="openAddFileDialog(3)" >
-                <view class="d-flex align-items-center">
-                  <cwg-icon name="crm-plus" :size="14" color="#fff" />
-                  <text v-t="'PersonalManagement.Title.AttachedFile'" />
-                </view>
-              </button>
-<!--              -->
-            </view>
+        <view v-show="!loading" class="content-title">
+          <view/>
+          <view v-if="isShowBtn" class="content-title-btns">
+
+
+            <button v-if="!isShowBtn.isSHowIdentity" type="button" class="btn btn-danger btn-shadow waves-effect" @click="openAddFileDialog(1)" >
+              <view class="d-flex align-items-center">
+                <cwg-icon name="crm-plus" :size="14" color="#fff" />
+                <text v-t="'PersonalManagement.Title.ProofOfIdentity'" />
+              </view>
+            </button>
+            <button v-if="!isShowBtn.isSHowAddress" type="button" class="btn btn-danger btn-shadow waves-effect" @click="openAddFileDialog(2)" >
+              <view class="d-flex align-items-center">
+                <cwg-icon name="crm-plus" :size="14" color="#fff" />
+                <text v-t="'PersonalManagement.Title.ProofOfAddress'" />
+              </view>
+            </button>
+            <button  type="button" class="btn btn-danger btn-shadow waves-effect" @click="openAddFileDialog(3)" >
+              <view class="d-flex align-items-center">
+                <cwg-icon name="crm-plus" :size="14" color="#fff" />
+                <text v-t="'PersonalManagement.Title.AttachedFile'" />
+              </view>
+            </button>
+
+          </view>
         </view>
         <cwg-tabel ref="tableRef" :columns="columns" :api="customFileApi" :show-operation="false"
-            :showPagination="false">
-            <template #type="{ row }">
-                <view :class="['status-badge', row.status]">{{ typeMap[row.type] }}</view>
-            </template>
-            <template #status="{ row }">
-                <view class="table-cell-center">
-                    <view :class="['status-badge', row.status]">{{ stateMap[row.status] }}</view>
-                </view>
-            </template>
-            <template #btn="{ row }">
-                <view class="table-cell-center">
-                    <button class="btn-submit" :class="['operation-btn', row.status !== 4 ? 'disabled' : '']" :disabled="row.status !== 4" @click.stop="openAddFile(row)">
-                        <cwg-icon name="crm-image" :size="16" color="#1d293d" />
-                        <text v-t="'State.Again'" />
-                    </button>
-                </view>
-            </template>
+                   :showPagination="false">
+          <template #type="{ row }">
+            <view :class="['status-badge', row.status]">{{ typeMap[row.type] }}</view>
+          </template>
+          <template #status="{ row }">
+            <view class="table-cell-center">
+              <view :class="['status-badge', row.status]">{{ stateMap[row.status] }}</view>
+            </view>
+          </template>
+          <template #btn="{ row }">
+            <view class="table-cell-center">
+              <button class="btn-submit" :class="['operation-btn', row.status !== 4 ? 'disabled' : '']" :disabled="row.status !== 4" @click.stop="openAddFile(row)">
+                <cwg-icon name="crm-image" :size="16" color="#1d293d" />
+                <text v-t="'State.Again'" />
+              </button>
+            </view>
+          </template>
         </cwg-tabel>
+
         <add-file-dialog ref="addFileDialog" @file-added="customFileList" @success="addSuccess" />
     </view>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import AddFileDialog from './AddFileDialog.vue';
 const { t } = useI18n();
@@ -84,7 +86,8 @@ const tableData = computed(() => {
     return tableRef.value ? tableRef.value.tableData : [];
 });
 const loading = ref(false)
-const isSHowBtn = computed(() => {
+const isShowBtn = ref()
+const setShowBtn = () => {
     const a = tableData.value
     let tableIdentity = [];
     const tableAddress = [];
@@ -100,8 +103,8 @@ const isSHowBtn = computed(() => {
     });
     const isSHowIdentity = tableIdentity.length > 1;
     const isSHowAddress = tableAddress.length > 0;
-    return { isSHowIdentity, isSHowAddress };
-});
+  isShowBtn.value = { isSHowIdentity, isSHowAddress };
+}
 
 // 表格列配置
 const columns = computed(() => [
@@ -171,6 +174,18 @@ const openAddFile = (row) => {
 const addSuccess = () => {
     tableRef.value.refreshTable()
 }
+
+watch(tableData, (newVal) => {
+    if (newVal && newVal.length > 0) {
+      loading.value = true
+      setShowBtn()
+      setTimeout(()=>{
+        loading.value = false
+
+      },300)
+    }
+}, { immediate: true })
+
 defineProps<Props>();
 </script>