feat(代理中心页面): 新增“提现”按钮，资料不全弹窗，对接相关接口

src/views/AgencyCenter/AgencySetting.vue

@@ -8,10 +8,11 @@
       style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
     />
 
-    <div style="padding: 16px; position: relative; z-index: 2">
-      <!-- My Agency 部分 -->
-      <div style="margin-bottom: 20px">
-        <div style="display: flex; align-items: center; margin-bottom: 12px">
+    <div style="padding: 16px; position: relative; display: flex; flex-direction: column; gap: 2vw">
+      <!-- My Agency -->
+      <div style="display: flex; flex-direction: column; gap: 2vw">
+        <!-- 标题 -->
+        <div style="display: flex; align-items: center">
           <div style="font-size: 1.4em; font-weight: 600">{{ t('my_agency') }}</div>
           <img
             src="/src/assets/icon/identity/agency.png"
@@ -21,6 +22,7 @@
           />
         </div>
 
+        <!-- 代理信息 -->
         <div
           style="
             background-color: white;
@@ -51,25 +53,342 @@
           </div>
         </div>
       </div>
+
+      <!-- Bank Card -->
+      <div style="display: flex; flex-direction: column; gap: 2vw">
+        <!-- 标题 -->
+        <div style="display: flex; justify-content: space-between">
+          <div style="font-size: 1.4em; font-weight: 600">{{ t('bank_card') }}</div>
+
+          <!-- 跳转按钮 -->
+          <div
+            v-if="usedBankCard"
+            style="display: flex; align-items: center"
+            @click="gotoselectBank"
+          >
+            <div style="font-weight: 400; color: rgba(0, 0, 0, 0.4)">{{ t('more') }}</div>
+          </div>
+        </div>
+
+        <!-- 银行卡信息 -->
+        <div
+          style="
+            border-radius: 8px;
+            background: #fff;
+            padding: 12px;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+          "
+          :style="
+            usedBankCard
+              ? `border-radius: 11.75px;border: 0.5px solid rgba(255, 255, 255, 0.08);`
+              : ''
+          "
+          @click="cashOutTypeShow = true"
+        >
+          <!-- 无使用银行卡 -->
+          <div
+            v-if="!usedBankCard"
+            style="display: flex; justify-content: space-between; align-items: center"
+            @click="gotoselectBank"
+          >
+            <div style="font-weight: 510; color: rgba(0, 0, 0, 0.8)">
+              {{ t('add_payment_method') }}
+            </div>
+
+            <!-- 跳转按钮 -->
+            <img
+              v-smart-img
+              src="/src/assets/icon/arrow.png"
+              alt=""
+              style="width: 6vw"
+              class="flipImg"
+            />
+          </div>
+
+          <!-- 银行卡信息 -->
+          <div v-else style="display: flex; flex-direction: column; gap: 2vw">
+            <!-- Category -->
+            <div style="font-weight: 500; color: rgba(0, 0, 0, 0.8)">{{ t('category') }}</div>
+            <div
+              style="
+                font-weight: 510;
+                color: rgba(0, 0, 0, 0.4);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              "
+            >
+              {{ usedBankCard?.cardType }}
+            </div>
+
+            <!-- Card Number -->
+            <div style="font-weight: 500; color: rgba(0, 0, 0, 0.8)">
+              {{ t('card_number_label') }}
+            </div>
+            <div
+              style="
+                font-weight: 510;
+                color: rgba(0, 0, 0, 0.4);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              "
+            >
+              {{ usedBankCard?.cardNo }}
+            </div>
+
+            <!-- Payee -->
+            <div style="font-weight: 500; color: rgba(0, 0, 0, 0.8)">{{ t('payee') }}:</div>
+            <div
+              style="
+                font-weight: 510;
+                color: rgba(0, 0, 0, 0.4);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              "
+            >
+              {{ usedBankCard?.payee }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- KYC -->
+      <div style="display: flex; flex-direction: column; gap: 2vw">
+        <!-- 标题 -->
+        <div style="display: flex; justify-content: space-between; align-items: center">
+          <div style="display: flex; align-items: center">
+            <div style="font-size: 1.4em; font-weight: 600">{{ t('kyc') }}</div>
+
+            <!-- 申请状态 -->
+            <div v-if="hasKYC" style="font-size: 1.4em; font-weight: 600; margin: 0 4px">:</div>
+
+            <!-- 通过 -->
+            <div
+              v-if="bankCardInfo?.status === 'PASS'"
+              style="
+                font-weight: 510;
+                font-size: 0.9em;
+                background: linear-gradient(248deg, #75ff98 5.66%, #3dff54 42.49%);
+                background-clip: text;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+              "
+            >
+              {{ t('review_passed') }}
+            </div>
+
+            <!-- 未通过 -->
+            <div
+              v-if="bankCardInfo?.status === 'NOT_PASS'"
+              style="
+                font-weight: 510;
+                font-size: 0.9em;
+                background: linear-gradient(248deg, #ff7578 5.66%, #ff3d40 42.49%);
+                background-clip: text;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+              "
+            >
+              {{ t('review_failed') }}
+            </div>
+
+            <!-- 审核中 -->
+            <div
+              v-if="bankCardInfo?.status === 'PENDING'"
+              style="
+                font-weight: 510;
+                font-size: 0.9em;
+                background: linear-gradient(248deg, #ffe675 5.66%, #ffc53d 42.49%);
+                background-clip: text;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+              "
+            >
+              {{ t('awaiting_review') }}
+            </div>
+          </div>
+
+          <!-- 跳转按钮 -->
+          <img
+            v-if="hasKYC"
+            v-smart-img
+            src="/src/assets/icon/arrow.png"
+            alt=""
+            style="width: 6vw"
+            class="flipImg"
+            @click="gotoKYC"
+          />
+        </div>
+
+        <!-- 资料内容 -->
+        <div
+          style="
+            background-color: white;
+            padding: 16px;
+            border-radius: 12px;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+          "
+        >
+          <!-- 未上传 -->
+          <div
+            v-if="!hasKYC"
+            style="display: flex; justify-content: space-between; align-items: center"
+            @click="gotoKYC"
+          >
+            <span style="font-weight: 510; font-size: 1em">{{ t('complete_information') }}</span>
+            <img
+              v-smart-img
+              src="/src/assets/icon/arrow.png"
+              alt=""
+              style="width: 6vw"
+              class="flipImg"
+            />
+          </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"
+                >{{ t('passport_id_card_title') }}:</span
+              >
+
+              <!-- 跳转按钮 -->
+              <!-- <img
+                v-smart-img
+                src="/src/assets/icon/arrow.png"
+                alt=""
+                style="width: 6vw"
+                @click="gotoKYC"
+                class="flipImg"
+              /> -->
+            </div>
+
+            <!-- 资料图片列表 -->
+            <div style="display: flex; align-items: center; gap: 4px">
+              <img
+                :src="imgUrl"
+                alt=""
+                v-for="imgUrl in bankCardInfo.previewUrls"
+                style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px"
+              />
+            </div>
+
+            <!-- 联系方式 -->
+            <div style="font-weight: 500">{{ t('contact_number') }}:</div>
+            <div
+              style="
+                color: rgba(0, 0, 0, 0.4);
+                font-weight: 600;
+                font-size: 0.8em;
+                overflow-wrap: break-word;
+              "
+            >
+              {{ bankCardInfo.contactNumber }}
+            </div>
+
+            <!-- 备注信息 -->
+            <div style="font-weight: 500">{{ t('other_description') }}:</div>
+            <div
+              style="
+                color: rgba(0, 0, 0, 0.4);
+                font-weight: 600;
+                font-size: 0.8em;
+                overflow-wrap: break-word;
+              "
+            >
+              {{ bankCardInfo.otherDescription }}
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { setDocumentDirection } from '@/locales/i18n'
 import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
 import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
 
+import {
+  getBankCardList, // 获取正在使用的银行卡
+  getWithdrawInfoList, // 获取申请提现信息
+} from '@/api/wallet.js'
+
 import GeneralHeader from '@/components/GeneralHeader.vue'
 
 const { t, locale } = useI18n()
+const router = useRouter()
+const route = useRoute()
 
 // 监听语言变化并设置文档方向
 locale.value && setDocumentDirection(locale.value)
 
+const usedBankCard = ref(null) //正在使用的银行卡
+
+const bankCardInfo = ref(null)
+const hasKYC = computed(() => {
+  return bankCardInfo.value != null
+})
+
+// 前往选择银行卡
+const gotoselectBank = () => {
+  router.push('/bank-card')
+}
+
+// 查看历史提现信息
+const gotoKYC = () => {
+  router.push('/KYC')
+}
+
+// 获取银行卡列表
+const getBankCards = async () => {
+  try {
+    const resBankCards = await getBankCardList()
+    console.log('银行卡列表:', resBankCards)
+    if (resBankCards.status && resBankCards.body) {
+      const usedCard = resBankCards.body.find((card) => card.use)
+      if (usedCard) {
+        usedBankCard.value = usedCard
+      } else {
+        // 没有使用中的银行卡
+        usedBankCard.value = null
+      }
+    }
+  } catch (error) {
+    console.error('获取银行卡列表失败:', error)
+  }
+}
+
+// 获取提现信息列表
+const getWithdrawInfoListData = async () => {
+  try {
+    const resWithdrawInfoList = await getWithdrawInfoList()
+    console.log('提现信息列表:', resWithdrawInfoList)
+    if (resWithdrawInfoList.status && resWithdrawInfoList.body?.length > 0) {
+      let imgList = JSON.parse(resWithdrawInfoList.body[0].passportFrontUrl)
+      let previewUrls = imgList.map((item) => item)
+      bankCardInfo.value = { previewUrls, ...resWithdrawInfoList.body[0] }
+    }
+  } catch (error) {
+    console.error('获取提现信息列表失败:', error)
+    showError(error.response?.errorMsg)
+  }
+}
+
 const { userInfo } = usePageInitializationWithConfig('AGENCY_CENTER')
+
+onMounted(() => {
+  getBankCards() // 获取银行卡列表
+  getWithdrawInfoListData() // 获取提现信息列表
+})
 </script>
 
 <style scoped>

src/views/AgencyCenter/index.vue

@@ -84,12 +84,25 @@
             </div>
           </div>
           <button
-            style="width: 32px; height: 32px; border: none; background: none; font-size: 16px"
+            style="
+              width: 1.5em;
+              border: none;
+              background: none;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
             @click="gotoEdit"
           >
-            <img src="../../assets/icon/edit.png" alt="" width="70%" />
+            <img
+              v-smart-img
+              src="../../assets/icon/edit.png"
+              alt=""
+              style="display: block; width: 70%; object-fit: contain"
+            />
           </button>
         </div>
+
         <!-- 我的薪资 -->
         <div>
           <div style="display: flex; justify-content: space-between; margin-bottom: 5px">
@@ -319,15 +332,110 @@
       </div>
 
       <!-- 操作按钮 -->
-      <div class="action-buttons">
-        <button class="action-btn exchange-btn" @click="exchangeGoldCoins">
+      <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2vw; margin: 0 1%">
+        <!-- 兑换按钮 -->
+        <button
+          class="action-btn"
+          style="
+            background: linear-gradient(135deg, #f1eca6 2.82%, #ffd22f 99.15%), #fff;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            color: white;
+          "
+          @click="exchangeGoldCoins"
+        >
           {{ t('exchange') }}
         </button>
-        <button class="action-btn transfer-btn" @click="transfer">
+
+        <!-- 转账按钮 -->
+        <button
+          class="action-btn"
+          style="
+            background: linear-gradient(135deg, #a6aaf1 2.82%, #592fff 99.15%), #fff;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            color: white;
+          "
+          @click="transfer"
+        >
           {{ t('transfer') }}
         </button>
+
+        <!-- 提现按钮 -->
+        <button
+          class="action-btn"
+          style="
+            background: linear-gradient(135deg, #a6f1b2 2.82%, #2fff3d 99.15%), #fff;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            color: white;
+          "
+          @click="goToWithdraw"
+        >
+          {{ t('withdraw') }}
+        </button>
       </div>
     </div>
+
+    <!-- 弹窗遮罩层 -->
+    <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
+      <!-- 资料不足提示弹窗 -->
+      <div
+        style="
+          width: 100vw;
+          height: 100vh;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+        @click="maskLayerShow = false"
+      >
+        <div
+          style="
+            width: 80%;
+            border-radius: 12px;
+            background: #fff;
+            padding: 12px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 2vw;
+          "
+          @click.stop
+        >
+          <div style="color: rgba(0, 0, 0, 0.8); font-weight: 700; font-size: 1.2em">
+            {{ t('prompt') }}
+          </div>
+          <div style="color: rgba(0, 0, 0, 0.8); font-weight: 600">
+            {{ t('fill_info_tips') }}
+          </div>
+          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
+            {{ t('card_issue_tips') }}
+          </div>
+          <div
+            style="
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              border-radius: 999999px;
+              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;
+
+              color: #fff;
+              font-weight: 800;
+              padding: 8px 12px;
+              width: 50%;
+            "
+            @click="goToImprove"
+          >
+            {{ t('to_improve') }}
+          </div>
+        </div>
+      </div>
+    </maskLayer>
   </div>
 </template>
 
@@ -342,10 +450,15 @@ import { clearSelectedPayee } from '@/utils/payeeStore.js'
 import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
 
 import { getTeamMemberCount, getTeamBill, getTeamMemberWork } from '@/api/teamBill.js'
-import { getUserIdentity } from '@/api/wallet.js'
+import {
+  getUserIdentity,
+  getBankCardList, // 获取正在使用的银行卡
+  getWithdrawInfoList, // 获取申请提现信息
+} from '@/api/wallet.js'
 
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import workReportBox from '@/components/workReportBox.vue'
+import maskLayer from '@/components/MaskLayer.vue'
 
 const { t, locale } = useI18n()
 const router = useRouter()
@@ -353,6 +466,8 @@ const router = useRouter()
 // 监听语言变化并设置文档方向
 locale.value && setDocumentDirection(locale.value)
 
+const maskLayerShow = ref(false) // 弹窗遮罩层显示状态
+
 const totalSalary = ref('0') //历史收入
 
 // 任务标签
@@ -400,6 +515,15 @@ const underlineStyle = computed(() => {
   }
 })
 
+const bankCardList = ref([]) // 银行卡列表
+const usedBankCard = ref(null) //正在使用的银行卡
+
+const bankCardInfo = ref(null)
+const checkStatus = computed(() => {
+  return bankCardInfo.value == null || usedBankCard.value == null
+  // return true
+})
+
 // 获取最新成员工作数据和账单数据
 const fetchMemberWorkData = async () => {
   try {
@@ -538,6 +662,20 @@ const transfer = () => {
   router.push('/transfer')
 }
 
+// 前往提现
+const goToWithdraw = () => {
+  if (checkStatus.value) {
+    maskLayerShow.value = true
+    return
+  }
+  router.push('/cash-withdraw')
+}
+
+// 前往完善信息
+const goToImprove = () => {
+  router.push('/agency-setting')
+}
+
 const goToPersonalSalary = () => {
   router.push('/history-salary')
 }
@@ -619,6 +757,44 @@ const fetchTeamBillData = async () => {
   }
 }
 
+// 获取银行卡列表
+const getBankCards = async () => {
+  try {
+    const resBankCards = await getBankCardList()
+    console.log('银行卡列表:', resBankCards)
+    if (resBankCards.status && resBankCards.body) {
+      // 处理银行卡列表数据
+      bankCardList.value = resBankCards.body
+
+      const usedCard = bankCardList.value.find((card) => card.use)
+      if (usedCard) {
+        usedBankCard.value = usedCard
+      } else {
+        // 没有使用中的银行卡
+        usedBankCard.value = null
+      }
+    }
+  } catch (error) {
+    console.error('获取银行卡列表失败:', error)
+  }
+}
+
+// 获取提现信息列表
+const getWithdrawInfoListData = async () => {
+  try {
+    const resWithdrawInfoList = await getWithdrawInfoList()
+    console.log('提现信息列表:', resWithdrawInfoList)
+    if (resWithdrawInfoList.status && resWithdrawInfoList.body?.length > 0) {
+      let imgList = JSON.parse(resWithdrawInfoList.body[0].passportFrontUrl)
+      let previewUrls = imgList.map((item) => item)
+      bankCardInfo.value = { previewUrls, ...resWithdrawInfoList.body[0] }
+    }
+  } catch (error) {
+    console.error('获取提现信息列表失败:', error)
+    showError(error.response?.errorMsg)
+  }
+}
+
 const { userInfo, salaryInfo, taskInfo } = usePageInitializationWithConfig('AGENCY_CENTER', {
   needsTeamInfo: true,
   forceRefresh: true, // 强制刷新
@@ -630,7 +806,11 @@ const { userInfo, salaryInfo, taskInfo } = usePageInitializationWithConfig('AGEN
 })
 
 onMounted(() => {
+  getBankCards() // 获取正在使用的银行卡
+  getWithdrawInfoListData() // 获取提现信息列表
+
   underlineStyle.value // 触发计算属性更新
+
   clearSelectedPayee() //清除选中的收款人
 })
 </script>
@@ -732,11 +912,6 @@ onMounted(() => {
 }
 
 /* 操作按钮 */
-.action-buttons {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
 
 .action-btn {
   padding: 14px 12px;
@@ -754,18 +929,6 @@ onMounted(() => {
   transform: scale(0.98);
 }
 
-.exchange-btn {
-  background: linear-gradient(135deg, #f1eca6 2.82%, #ffd22f 99.15%), #fff;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
-  color: white;
-}
-
-.transfer-btn {
-  background: linear-gradient(135deg, #a6aaf1 2.82%, #592fff 99.15%), #fff;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
-  color: white;
-}
-
 /* 通用箭头样式 */
 .arrow {
   font-weight: bold;