feat(新页面): 提现资料提交页

src/router/index.js

@@ -263,6 +263,12 @@ const router = createRouter({
       component: () => import('../views/Wallet/CashOut/Details.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/KYC',
+      name: 'KYC',
+      component: () => import('../views/Wallet/CashOut/KYC.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 

src/utils/permissionManager.js

@@ -122,6 +122,7 @@ export const ROLE_PERMISSIONS = {
     '/lottery', // 抽奖活动页面
     '/cash-out', // 提现页面
     '/cash-out-details', //提现详情页面
+    '/KYC', //提现资料提交
   ],
 
   // 加载页面

src/utils/routeGuard.js

@@ -413,6 +413,7 @@ class RouteGuard {
       '/lottery', // 抽奖活动页面
       '/cash-out', // 提现页面
       '/cash-out-details', //提现详情页面
+      '/KYC', //提现资料提交
     ]
     return publicPages.includes(path)
   }

src/views/Wallet/CashOut/CashOut.vue

@@ -40,9 +40,11 @@
 
       <!-- 银行帐号信息 -->
       <div>
+        <!-- 标题 -->
         <div style="display: flex; align-items: center; margin-bottom: 10px">
           <div style="font-weight: 600">KYC</div>
         </div>
+        <!-- 银行卡信息 -->
         <div
           style="
             background-color: white;
@@ -56,16 +58,23 @@
           <div
             v-if="!hasBankCard"
             style="display: flex; justify-content: space-between; align-items: center"
+            @click="gotoKYC"
           >
             <span style="font-weight: 510; font-size: 1em">Complete information</span>
             <img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
           </div>
+
           <!-- 获取到银行卡信息 -->
           <div v-else style="width: 100%; display: flex; flex-direction: column; gap: 8px">
             <!-- 图片 -->
             <div style="display: flex; justify-content: space-between; align-items: center">
               <span style="font-weight: 510; font-size: 1em">Passport/ID card:(3/3)</span>
-              <img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
+              <img
+                src="../../../assets/icon/arrow.png"
+                alt=""
+                style="width: 6vw"
+                @click="gotoKYC"
+              />
             </div>
             <div style="display: flex; align-items: center; gap: 4px">
               <div
@@ -99,9 +108,9 @@
       <div style="display: flex; justify-content: center; align-items: center">
         <div
           style="
+            margin-top: 10px;
             width: 80%;
             border-radius: 32px;
-            background: linear-gradient(135deg, #d1ced6 2.82%, #7c7882 99.15%);
             padding: 12px;
             color: #fff;
             font-weight: 590;
@@ -186,16 +195,22 @@ const router = useRouter()
 const maskLayerShow = ref(false)
 
 const bankCardInfo = ref({
-  id: '',
+  // id: '',
 })
 const hasBankCard = computed(() => {
   return Object.keys(bankCardInfo.value).length > 0
 })
 
+// 查看历史提现信息
 const lookDetails = () => {
   router.push('/cash-out-details')
 }
 
+// 查看历史提现信息
+const gotoKYC = () => {
+  router.push('/KYC')
+}
+
 // 提现按钮
 const CashOut = () => {
   if (hasBankCard.value) {

src/views/Wallet/CashOut/KYC.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="fullPage">
+    <GeneralHeader
+      style="width: 100%"
+      title="KYC"
+      color="color: rgba(0, 0, 0, 0.80)"
+      backImg="/src/assets/icon/arrowBackBlack.png"
+    />
+
+    <div style="padding: 16px; display: flex; flex-direction: column; gap: 8px">
+      <!-- 银行卡号 -->
+      <div style="font-weight: 600">Contact number</div>
+      <div
+        style="
+          border-radius: 8px;
+          background: #fff;
+          padding: 12px;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+        "
+      >
+        <input
+          type="text"
+          v-model="cardNum"
+          placeholder="Please enter your bank card number"
+          style="width: 100%; border: none; outline: none"
+        />
+      </div>
+
+      <!-- 申请信息 -->
+      <div style="font-weight: 600">Other description</div>
+      <div
+        style="
+          padding: 12px 12px 20px;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+          border-radius: 8px;
+          position: relative;
+        "
+      >
+        <textarea
+          v-model="description"
+          rows="5"
+          maxlength="100"
+          placeholder="Please enter other description"
+          @input="updateCount"
+          style="width: 100%; border: none; outline: none; resize: none"
+        ></textarea>
+        <span
+          style="
+            position: absolute;
+            bottom: 4px;
+            right: 4px;
+            color: rgba(0, 0, 0, 0.4);
+            font-size: 0.8em;
+          "
+          class="word-count"
+          >{{ count }}/100</span
+        >
+      </div>
+
+      <!-- 上传图片 -->
+      <div style="font-weight: 600">Passport/lD card:</div>
+      <div style="display: flex; align-items: center">
+        <img
+          src="/src/assets/icon/addImg.png"
+          alt=""
+          style="display: block; width: 15vw; aspect-ratio: 1/1; object-fit: cover"
+        />
+        <img
+          src="/src/assets/icon/direction.png"
+          alt=""
+          style="display: block; width: 5vw; aspect-ratio: 1/1; object-fit: cover"
+        />
+        <div style="position: relative">
+          <img
+            src="/src/assets/icon/addImg.png"
+            alt=""
+            style="display: block; width: 15vw; aspect-ratio: 1/1; object-fit: cover"
+          />
+          <img
+            src="/src/assets/icon/cancelGray.png"
+            alt=""
+            style="
+              position: absolute;
+              top: 6%;
+              right: 6%;
+              display: block;
+              width: 3vw;
+              aspect-ratio: 1/1;
+              object-fit: cover;
+            "
+          />
+        </div>
+      </div>
+
+      <!-- 提现按钮 -->
+      <div style="display: flex; justify-content: center; align-items: center">
+        <div
+          style="
+            margin-top: 10px;
+            width: 80%;
+            border-radius: 32px;
+            background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%),
+              linear-gradient(135deg, #d1ced6 2.82%, #7c7882 99.15%);
+            padding: 12px;
+            color: #fff;
+            font-weight: 590;
+            text-align: center;
+          "
+          @click="Submit"
+        >
+          Submit
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import GeneralHeader from '@/components/GeneralHeader.vue'
+import { ref, onMounted, computed } from 'vue'
+
+const cardNum = ref('')
+const description = ref('')
+const count = computed(() => description.value.length)
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
+.fullPage {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #fff;
+  background-image: url(/src/assets/images/secondBg.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+input::placeholder {
+  font-weight: 510;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+textarea::placeholder {
+  font-weight: 510;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+textarea::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>