feat(主播设置页面): 新增银行卡和KYC设置

src/views/HostCenter/HostSetting.vue

@@ -9,11 +9,14 @@
       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"
             alt=""
@@ -22,6 +25,7 @@
           />
         </div>
 
+        <!-- 我的代理信息 -->
         <div
           style="
             background-color: white;
@@ -33,16 +37,19 @@
             gap: 4px;
           "
         >
-          <!-- 用户信息 -->
+          <!-- 代理人信息 -->
           <div style="display: flex; align-items: center; min-width: 0">
+            <!-- 头像 -->
             <img
               :src="userInfo.userAvatar || ''"
               alt=""
-              width="50px"
-              style="aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
+              style="width: 3.5em; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
               @error="handleAvatarImageError"
             />
+
+            <!-- 信息 -->
             <div style="flex: 1; min-width: 0; margin-left: 12px">
+              <!-- 用户名 -->
               <div
                 style="
                   margin-bottom: 4px;
@@ -54,20 +61,266 @@
               >
                 {{ userInfo.userNickname || '' }}
               </div>
+
+              <!-- ID -->
               <div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4)">
                 {{ t('user_id_prefix') }} {{ userInfo.account }}
               </div>
             </div>
           </div>
+
           <!-- 按钮 -->
           <div style="display: flex; align-items: center">
             <div class="leave-btn" @click="maskLayerShow = true">{{ t('leave') }}</div>
           </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">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)">More</div>
+            <!-- 跳转按钮 -->
+            <img
+              v-smart-img
+              src="/src/assets/icon/arrow.png"
+              alt=""
+              style="width: 6vw"
+              class="flipImg"
+            />
+          </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)">Add Your 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)">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)">Card Number:</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-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', { current: bankCardInfo.previewUrls.length }) }}:</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">
+              {{ 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">
+              {{ bankCardInfo.otherDescription }}
+            </div>
+          </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"
@@ -98,26 +351,51 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, onMounted, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { setDocumentDirection } from '@/locales/i18n'
 import { getTeamId } from '@/utils/userStore.js'
 import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
 
 import { getMyAgency, leaveAgency } from '@/api/host'
+import {
+  getBankBalance, // 获取余额
+  getBankCardList, // 获取正在使用的银行卡
+  getWithdrawInfoList, // 获取申请提现信息
+  useBankCard, // 设置默认银行卡
+  withdrawApply, //提现
+} from '@/api/wallet.js'
 
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 
 const { t, locale } = useI18n()
+const router = useRouter()
+const route = useRoute()
+
 const maskLayerShow = ref(false)
 
 // 监听语言变化并设置文档方向
 locale.value && setDocumentDirection(locale.value)
 
-// 用户信息
-const userInfo = ref({})
+const userInfo = ref({}) // 用户信息
+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 confirmLeave = async () => {
@@ -129,6 +407,7 @@ const confirmLeave = async () => {
   maskLayerShow.value = false
 }
 
+// 获取代理信息
 const getMyAgencyInfo = async () => {
   const resAgencyInfo = await getMyAgency()
   if (resAgencyInfo.status && resAgencyInfo.body) {
@@ -136,8 +415,45 @@ const getMyAgencyInfo = async () => {
   }
 }
 
+// 获取银行卡列表
+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)
+  }
+}
+
 onMounted(() => {
-  getMyAgencyInfo()
+  getMyAgencyInfo() // 获取代理信息
+  getBankCards() // 获取银行卡列表
+  getWithdrawInfoListData() // 获取提现信息列表
 })
 </script>