From 4c1294a1ddd2092d1b989763e66c136f6a779bed Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 12 Mar 2026 21:17:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(KYC=E9=A1=B5=E9=9D=A2=E3=80=81=E7=BF=BB?=
 =?UTF-8?q?=E8=AF=91=E6=96=87=E4=BB=B6):=20=E4=BF=AE=E6=94=B9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BF=AE=E6=94=B9=E7=BF=BB?=
 =?UTF-8?q?=E8=AF=91=E6=96=87=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/ar.json              |   2 +
 src/locales/bn.json              |   2 +
 src/locales/en.json              |   2 +
 src/locales/tr.json              |   2 +
 src/locales/zh.json              |   2 +
 src/views/Wallet/CashOut/KYC.vue | 129 +++++++++++++++++++++++++------
 6 files changed, 117 insertions(+), 22 deletions(-)

diff --git a/src/locales/ar.json b/src/locales/ar.json
index 5114255..a384366 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -271,6 +271,8 @@
   "enter_card_name": "أدخل اسم البطاقة",
   "enter_card_number": "أدخل رقم البطاقة",
   "enter_payee": "أدخل اسم المستفيد",
+  "change_kyc": "تغيير KYC",
+  "confirm_modify_kyc": "هل أنت متأكد من أنك تريد تعديل المعلومات الحالية؟",
 
   "admin_policy": "سياسة المشرف",
 
diff --git a/src/locales/bn.json b/src/locales/bn.json
index ca7ff66..8ef0269 100644
--- a/src/locales/bn.json
+++ b/src/locales/bn.json
@@ -271,6 +271,8 @@
   "enter_card_name": "কার্ড নাম লিখুন",
   "enter_card_number": "কার্ড নম্বর লিখুন",
   "enter_payee": "প্রাপক লিখুন",
+  "change_kyc": "KYC পরিবর্তন",
+  "confirm_modify_kyc": "আপনি কি বর্তমান তথ্য পরিবর্তন করতে চান?",
 
   "admin_policy": "অ্যাডমিন নীতি",
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 6c855fa..9bd6e11 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -271,6 +271,8 @@
   "enter_card_name": "Enter the Card Name",
   "enter_card_number": "Enter the Card Number",
   "enter_payee": "Enter the payee",
+  "change_kyc": "Change KYC",
+  "confirm_modify_kyc": "Are you sure you want to modify the current information?",
 
   "admin_policy": "Admin Policy",
 
diff --git a/src/locales/tr.json b/src/locales/tr.json
index 9f53a28..b126f94 100644
--- a/src/locales/tr.json
+++ b/src/locales/tr.json
@@ -271,6 +271,8 @@
   "enter_card_name": "Kart Adını Girin",
   "enter_card_number": "Kart Numarasını Girin",
   "enter_payee": "Alıcıyı girin",
+  "change_kyc": "KYC Değiştir",
+  "confirm_modify_kyc": "Mevcut bilgileri değiştirmek istediğinizden emin misiniz?",
 
   "admin_policy": "Yönetici Politikası",
 
diff --git a/src/locales/zh.json b/src/locales/zh.json
index b59f198..ed5bcfc 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -271,6 +271,8 @@
   "enter_card_name": "请输入卡名",
   "enter_card_number": "请输入卡号",
   "enter_payee": "请输入收款人",
+  "change_kyc": "更改 KYC",
+  "confirm_modify_kyc": "您确定要修改当前信息吗？",
 
   "admin_policy": "管理员政策",
 
diff --git a/src/views/Wallet/CashOut/KYC.vue b/src/views/Wallet/CashOut/KYC.vue
index 9ccb4af..5f3dddb 100644
--- a/src/views/Wallet/CashOut/KYC.vue
+++ b/src/views/Wallet/CashOut/KYC.vue
@@ -167,45 +167,86 @@
         </div>
       </div>
 
-      <!-- 提现按钮 -->
+      <!-- 提交按钮 -->
       <div style="display: flex; justify-content: center; align-items: center">
         <div
-          style="
-            margin-top: 10px;
-            width: 80%;
-            border-radius: 32px;
-            padding: 12px;
-            color: #fff;
-            font-weight: 590;
-            text-align: center;
-          "
+          style="margin-top: 10px; width: 80%; border-radius: 32px; padding: 12px"
           :style="{
             background: checkStatus
               ? 'linear-gradient(135deg, #BB92FF 2.82%, #8B45FF 99.15%), linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)'
               : 'linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)',
           }"
-          @click="Submit"
+          @click="maskLayerShow = true"
         >
-          {{ t('submit') }}
+          <div v-if="updateStatus" style="color: #fff; font-weight: 590; text-align: center">
+            {{ t('change_kyc') }}
+          </div>
+          <div v-else style="color: #fff; font-weight: 590; text-align: center">
+            {{ t('submit') }}
+          </div>
         </div>
       </div>
     </div>
+
+    <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
+      <div style="min-height: 100vh; display: flex; justify-content: center; align-items: center">
+        <div
+          style="position: relative; margin: 20% 5%; background-color: white; border-radius: 12px"
+          @click.stop
+        >
+          <div style="padding: 20px 20px 0 20px">
+            <div
+              style="
+                margin: 0;
+                font-size: 1.5em;
+                font-weight: 700;
+                color: rgba(0, 0, 0, 0.8);
+                text-align: center;
+              "
+            >
+              {{ t('tips') }}
+            </div>
+          </div>
+
+          <div style="padding: 8px 20px">
+            <div
+              style="
+                font-size: 1.2em;
+                font-weight: 600;
+                color: rgba(0, 0, 0, 0.4);
+                line-height: 1.5;
+              "
+            >
+              {{ t('confirm_modify_kyc') }}
+            </div>
+          </div>
+
+          <div style="display: flex; gap: 12px; padding: 0 20px 20px 20px">
+            <button class="cancel-btn" @click="maskLayerShow = false">{{ t('cancel') }}</button>
+            <button class="confirm-btn" @click="Submit">{{ t('confirm') }}</button>
+          </div>
+        </div>
+      </div>
+    </maskLayer>
   </div>
 </template>
 
 <script setup>
-import { isInApp } from '@/utils/appBridge.js'
-import { useI18n } from 'vue-i18n'
-import GeneralHeader from '@/components/GeneralHeader.vue'
 import { ref, onMounted, computed, nextTick } from 'vue'
-import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
 import { useRoute, useRouter } from 'vue-router'
-import { uploadImg } from '@/api/upload.js'
+import { useI18n } from 'vue-i18n'
+import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
 import { setDocumentDirection } from '@/locales/i18n'
-import { getWithdrawInfoList, addWithdrawInfo, updateWithdrawInfo } from '@/api/wallet'
-import { uploadImgFile, parseAccessOrigin } from '@/utils/uploadFiles.js'
 import { useLastImgStore } from '@/stores/lastImg'
 import { storeToRefs } from 'pinia'
+import { isInApp } from '@/utils/appBridge.js'
+import { uploadImgFile, parseAccessOrigin } from '@/utils/uploadFiles.js'
+
+import { uploadImg } from '@/api/upload.js'
+import { getWithdrawInfoList, addWithdrawInfo, updateWithdrawInfo } from '@/api/wallet'
+
+import GeneralHeader from '@/components/GeneralHeader.vue'
+import maskLayer from '@/components/MaskLayer.vue'
 
 const { t, locale } = useI18n()
 const router = useRouter()
@@ -219,10 +260,10 @@ const { imgUrl: lastImgUrl } = storeToRefs(lastImgStore) //获取图片缓存
 // 监听语言变化并设置文档方向
 locale.value && setDocumentDirection(locale.value)
 
+const maskLayerShow = ref(false)
 const count = computed(() => applyInfo.value.otherDescription.length) //字数
 
 const tempFiles = ref([]) //用于提交的临时图片文件列表
-// const previewUrls = ref([]) //预览图片数组
 const resImgUrls = ref([]) //用于提交申请的图片数组
 
 const updateStatus = ref(false) //是否为修改
@@ -324,7 +365,7 @@ const callNativeImagePicker = async () => {
             reject(error)
           }
         },
-        filterDuplicateImages // 传递过滤函数
+        filterDuplicateImages, // 传递过滤函数
       )
     } catch (error) {
       console.error('调用原生图片选择器失败:', error)
@@ -367,6 +408,7 @@ const Submit = async () => {
       console.log('添加信息：', applyInfo.value)
       await addWithdrawInfoData()
     }
+    maskLayerShow.value = false
     // 先返回到 availableIncome (原始状态)
     router.go(-1)
 
@@ -468,6 +510,49 @@ textarea::-webkit-scrollbar {
   height: 0;
 }
 
+.cancel-btn,
+.confirm-btn {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  border-radius: 112px;
+  color: #fff;
+  font-size: 1.2em;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.cancel-btn {
+  background:
+    linear-gradient(180deg, #e5e2e6 0%, rgba(197, 196, 199, 0) 58.38%),
+    linear-gradient(135deg, #a2a2a2 2.82%, #646464 99.15%), #d587ff;
+
+  box-shadow:
+    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
+    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
+  backdrop-filter: blur(5000px);
+}
+
+.confirm-btn {
+  background:
+    linear-gradient(180deg, #d3acff 0%, rgba(222, 172, 255, 0) 58.38%),
+    linear-gradient(152deg, #c670ff 7.01%, #7726ff 92.99%), #ff4768;
+
+  box-shadow:
+    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
+    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
+}
+
+.cancel-btn:active,
+.confirm-btn:active {
+  transform: scale(0.98);
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
@@ -476,7 +561,7 @@ textarea::-webkit-scrollbar {
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 16px;
+    font-size: 12px;
   }
 }