feat(主播设置中心): 新增“提现”按钮和“资料不足”提醒弹窗

src/locales/ar.json

@@ -127,6 +127,8 @@
   "host_setting": "إعدادات المضيف",
   "my_agency": "وكيلي",
   "tips": "نصائح",
+  "prompt": "موجه",
+  "to_improve": "إكمال المعلومات",
   "leave_agent_tips": "يمكن للمضيف مغادرة الوكيل الحالي فقط في اليوم الأول والـ16 من كل شهر",
 
   "loading": "جار التحميل",

src/locales/bn.json

@@ -127,6 +127,8 @@
   "host_setting": "হোস্ট সেটিং",
   "my_agency": "আমার এজেন্সি",
   "tips": "টিপস",
+  "prompt": "প্রম্পট",
+  "to_improve": "সম্পূর্ণ করুন",
   "leave_agent_tips": "হোস্ট শুধুমাত্র প্রতি মাসের ১ এবং ১৬ তারিখে বর্তমান এজেন্ট ছাড়তে পারে",
 
   "loading": "লোড হচ্ছে",

src/locales/en.json

@@ -127,6 +127,8 @@
   "host_setting": "Host Setting",
   "my_agency": "My Agency",
   "tips": "Tips",
+  "prompt": "Prompt",
+  "to_improve": "To improve",
   "leave_agent_tips": "The host can only leave the current agent on the 1st and 16th of each month",
 
   "loading": "Loading",

src/locales/tr.json

@@ -127,6 +127,8 @@
   "host_setting": "Host Ayarı",
   "my_agency": "Acentem",
   "tips": "İpuçları",
+  "prompt": "İstem",
+  "to_improve": "Bilgileri Tamamla",
   "leave_agent_tips": "Host sadece her ayın 1'i ve 16'sında mevcut acenteden ayrılabilir",
 
   "loading": "Yükleniyor",

src/locales/zh.json

@@ -127,6 +127,8 @@
   "host_setting": "主播设置",
   "my_agency": "我的代理",
   "tips": "提示",
+  "prompt": "提示",
+  "to_improve": "去完善",
   "leave_agent_tips": "主播只能在每月1日和16日离开当前代理",
 
   "loading": "加载中",

src/views/HostCenter/index.vue

@@ -7,7 +7,6 @@
       :title="t('host_center')"
       color="black"
       style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
-      @help="goToHelp"
     />
 
     <!-- 主要内容 -->
@@ -191,24 +190,85 @@
         <button
           class="action-btn"
           style="background: linear-gradient(135deg, #a6aaf1 2.82%, #592fff 99.15%), #fff"
-          @click="transfer"
+          @click="goToTransfer"
         >
           {{ t('transfer') }}
         </button>
         <button
           class="action-btn"
           style="background: linear-gradient(135deg, #a6f1b2 2.82%, #2fff3d 99.15%), #fff"
-          @click="withdraw"
+          @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: 4px;
+          "
+          @click.stop
+        >
+          <div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">{{ t('prompt') }}</div>
+          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
+            {{ t('fill_info_tips') }}
+          </div>
+          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.6em">
+            {{ 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>
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { setDocumentDirection } from '@/locales/i18n'
@@ -217,10 +277,18 @@ import { getUserId } from '@/utils/userStore.js'
 import { clearSelectedPayee } from '@/utils/payeeStore.js'
 
 import { getTeamMemberWork } from '@/api/teamBill.js'
-import { getUserIdentity } from '@/api/wallet.js'
+import {
+  getUserIdentity, // 获取用户身份
+  getBankBalance, // 获取余额
+  getBankCardList, // 获取正在使用的银行卡
+  getWithdrawInfoList, // 获取申请提现信息
+  useBankCard, // 设置默认银行卡
+  withdrawApply, //提现
+} 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()
@@ -239,10 +307,67 @@ const progressInfo = reactive({
   agentSalary: '–',
   total: '–',
 })
+
 const loadingProgressInfo = reactive({ value: false })
 
 const historySalary = ref(0)
 
+const bankCardList = ref([]) // 银行卡列表
+const usedBankCard = ref(null) //正在使用的银行卡
+
+const bankCardInfo = ref(null)
+const checkStatus = computed(() => {
+  return bankCardInfo.value == null || usedBankCard.value == null
+})
+
+const maskLayerShow = ref(false) // 弹窗遮罩层显示状态
+
+// 格式化薪资数值（与 TeamBillView 保持一致）
+const formatSalaryValue = (value) => {
+  if (!value || value === '0' || value === 0) return '0.00'
+  const numValue = parseFloat(value)
+  return numValue.toFixed(2)
+}
+
+// 前往历史薪资
+const showDatePicker = () => {
+  router.push('/history-salary')
+}
+
+// 前往政策
+const goToPlatformPolicy = () => {
+  router.push('/platform-policy?from=hostcenter')
+}
+
+// 前往主播设置
+const goToNotification = () => {
+  router.push('/host-setting')
+}
+
+// 前往金币兑换
+const exchangeGoldCoins = () => {
+  router.push('/exchange-gold-coins')
+}
+
+// 前往转账
+const goToTransfer = () => {
+  router.push('/transfer')
+}
+
+// 前往提现
+const goToWithdraw = () => {
+  if (checkStatus.value) {
+    maskLayerShow.value = true
+    return
+  }
+  router.push('/cash-withdraw')
+}
+
+// 前往完善信息
+const goToImprove = () => {
+  router.push('/host-setting')
+}
+
 // 获取成员工作数据
 const fetchMemberWorkData = async () => {
   try {
@@ -311,42 +436,42 @@ const fetchMemberWorkData = async () => {
   }
 }
 
-// 格式化薪资数值（与 TeamBillView 保持一致）
+// 获取银行卡列表
-const formatSalaryValue = (value) => {
+const getBankCards = async () => {
-  if (!value || value === '0' || value === 0) return '0.00'
+  try {
-  const numValue = parseFloat(value)
+    const resBankCards = await getBankCardList()
-  return numValue.toFixed(2)
+    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 showDatePicker = () => {
+// 获取提现信息列表
-  router.push('/history-salary')
+const getWithdrawInfoListData = async () => {
-}
+  try {
-
+    const resWithdrawInfoList = await getWithdrawInfoList()
-const goToPlatformPolicy = () => {
+    console.log('提现信息列表:', resWithdrawInfoList)
-  router.push('/platform-policy?from=hostcenter')
+    if (resWithdrawInfoList.status && resWithdrawInfoList.body?.length > 0) {
-}
+      let imgList = JSON.parse(resWithdrawInfoList.body[0].passportFrontUrl)
-
+      let previewUrls = imgList.map((item) => item)
-const goToNotification = () => {
+      bankCardInfo.value = { previewUrls, ...resWithdrawInfoList.body[0] }
-  router.push('/host-setting')
+    }
-}
+  } catch (error) {
-
+    console.error('获取提现信息列表失败:', error)
-const goToHelp = () => {
+    showError(error.response?.errorMsg)
-  // 可以添加帮助页面的路由
+  }
-  console.log('Help clicked')
-}
-
-const exchangeGoldCoins = () => {
-  router.push('/exchange-gold-coins')
-}
-
-// 前往转账
-const transfer = () => {
-  router.push('/transfer')
-}
-
-// 前往提现
-const withdraw = () => {
-  router.push('/cash-withdraw')
 }
 
 const { appConnected, userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder } =
@@ -360,6 +485,8 @@ const { appConnected, userInfo, salaryInfo, taskInfo, handleImageError, getAvata
 
 onMounted(() => {
   clearSelectedPayee() //清除选中的收款人
+  getBankCards() // 获取正在使用的银行卡
+  getWithdrawInfoListData() // 获取提现信息列表
 })
 </script>