From 5a51987c9c8312728a2ae86e4fe32226bb5113d0 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 28 Oct 2025 15:31:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=94=B6=E7=9B=8A=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                    |   6 +
 src/utils/permissionManager.js         |   1 +
 src/views/BDCenter/availableIncome.vue | 693 +++++++++++++++++++++++++
 src/views/BDCenterView.vue             |   5 +
 4 files changed, 705 insertions(+)
 create mode 100644 src/views/BDCenter/availableIncome.vue

diff --git a/src/router/index.js b/src/router/index.js
index 5fecd4a..8424298 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -269,6 +269,12 @@ const router = createRouter({
       component: () => import('../views/Wallet/CashOut/KYC.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/available-income',
+      name: 'available-income',
+      component: () => import('../views/BDCenter/availableIncome.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 0cce32b..b312f5e 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -74,6 +74,7 @@ export const ROLE_PERMISSIONS = {
     '/team-member',
     '/history-salary',
     '/platform-salary',
+    '/available-income', //操作收益页
   ],
 
   // Anchor (主播)
diff --git a/src/views/BDCenter/availableIncome.vue b/src/views/BDCenter/availableIncome.vue
new file mode 100644
index 0000000..3af02d2
--- /dev/null
+++ b/src/views/BDCenter/availableIncome.vue
@@ -0,0 +1,693 @@
+<template>
+  <div class="transfer gradient-background-circles">
+    <MobileHeader title="Available income" />
+
+    <div class="content">
+      <!-- 信息部分 -->
+      <div>
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+          "
+        >
+          <div style="font-weight: 600">Available income</div>
+          <div style="display: flex; align-items: center" @click="showDetails">
+            <div style="color: rgba(0, 0, 0, 0.4)">Details</div>
+            <img src="../../assets/icon/arrow.png" alt="" width="16px" />
+          </div>
+        </div>
+        <div
+          style="
+            background-color: white;
+            padding: 16px;
+            border-radius: 12px;
+            margin-bottom: 12px;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+          "
+        >
+          <span v-if="loading" class="loading-text">Loading...</span>
+          <span v-else style="font-weight: 700; color: #333; font-size: 1.1em">{{
+            availableIncome
+          }}</span>
+        </div>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div
+        style="
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          margin-bottom: 12px;
+        "
+      >
+        <button
+          v-for="action in actions"
+          :key="action.name"
+          @click="handleAction(action.name)"
+          :style="{
+            padding: '8px 12px',
+            borderRadius: '8px',
+            background:
+              activeAction === action.name
+                ? 'linear-gradient(135deg, #BB92FF 2.82%, #8B45FF 99.15%)'
+                : 'linear-gradient(135deg, #A2A2A2 2.82%, #646464 99.15%)',
+            border: 'none',
+            color: 'white',
+            fontWeight: '600',
+            cursor: 'pointer',
+            transition: 'all 0.2s',
+            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+          }"
+        >
+          {{ action.name }}
+        </button>
+      </div>
+
+      <!-- 转账对象 -->
+      <div v-if="activeAction === 'Transfer'">
+        <div style="font-weight: 600; margin-bottom: 10px">Transfer to others</div>
+        <div
+          style="
+            background-color: white;
+            padding: 16px;
+            border-radius: 12px;
+            margin-bottom: 12px;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+          "
+        >
+          <!-- 用户信息 -->
+          <div v-if="selectedPayee.id" style="width: 100%">
+            <!-- 头像信息 -->
+            <div style="display: flex; align-items: center; margin-bottom: 12px">
+              <!-- 头像 -->
+              <div
+                style="
+                  position: relative;
+                  width: 50px;
+                  height: 50px;
+                  border-radius: 25px;
+                  background-color: #8b5cf6;
+                  color: white;
+                  margin-right: 12px;
+                  overflow: hidden;
+                  font-size: 20px;
+                  font-weight: 600;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                "
+              >
+                <img
+                  v-if="selectedPayee.avatar"
+                  :src="selectedPayee.avatar"
+                  :alt="selectedPayee.name"
+                  style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%"
+                />
+                <span v-else>{{ selectedPayee.name.charAt(0) }}</span>
+              </div>
+              <!-- 个人信息 -->
+              <div style="flex: 1">
+                <div style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #333">
+                  {{ selectedPayee.name }}
+                </div>
+                <div style="margin: 0; font-size: 14px; color: #666">
+                  ID: {{ selectedPayee.account || selectedPayee.id }}
+                </div>
+              </div>
+              <!-- 换人按钮 -->
+              <button
+                style="
+                  border-radius: 12px;
+                  border: 1px solid #e6e6e6;
+                  color: rgba(0, 0, 0, 0.4);
+                  font-weight: 500;
+                  padding: 2px 8px;
+                  background: none;
+                "
+                @click="searchPayee"
+              >
+                Change
+              </button>
+            </div>
+            <!-- 身份 -->
+            <div style="margin-left: 62px; height: 20px; display: flex; gap: 5px">
+              <img
+                v-if="selectedPayee.isHost"
+                src="../../assets/icon/host.png"
+                alt=""
+                height="100%"
+              />
+              <img
+                v-if="selectedPayee.isAgency"
+                src="../../assets/icon/agency.png"
+                alt=""
+                height="100%"
+              />
+              <img
+                v-if="selectedPayee.hasSalary"
+                src="../../assets/icon/RA.png"
+                alt=""
+                height="100%"
+              />
+            </div>
+          </div>
+
+          <!-- 空状态 - 默认显示 -->
+          <div v-else style="display: flex; justify-content: center; align-items: center">
+            <div
+              style="
+                font-weight: 590;
+                color: rgba(0, 0, 0, 0.4);
+                padding: 16px;
+                border-radius: 12px;
+                box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+              "
+              @click="searchPayee"
+            >
+              Search
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 转账部分 -->
+      <div v-if="activeAction === 'Transfer'">
+        <div
+          style="
+            background-color: white;
+            padding: 16px;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          "
+        >
+          <!-- 转账金额选择 -->
+          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px">
+            <div
+              v-for="coin in coinOptions"
+              :key="coin.id"
+              @click="selectCoin(coin)"
+              :style="{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                border: selectedCoin === coin.id ? '2px solid #8b5cf6' : '2px solid #e5e7eb',
+                borderRadius: '12px',
+                cursor: 'pointer',
+                transition: 'all 0.2s',
+                backgroundColor: selectedCoin === coin.id ? '#f3f4f6' : 'white',
+                aspectRatio: '1/1',
+              }"
+            >
+              <img src="../../assets/icon/coin.png" alt="" style="width: 40%" />
+              <div style="font-weight: 500; color: #373232">
+                {{ coin.amount }}
+              </div>
+              <div style="font-weight: 500; color: #131111">${{ coin.price }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 转账按钮 -->
+        <div style="display: flex; justify-content: center; margin-top: 10px">
+          <button
+            style="
+              width: 70%;
+              padding: 12px;
+              background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
+              color: white;
+              border: none;
+              border-radius: 32px;
+              font-weight: 600;
+              cursor: pointer;
+              transition: all 0.2s;
+            "
+            @click="transfer"
+            :disabled="!selectedCoin || !selectedPayee.id"
+            :style="{
+              background:
+                !selectedCoin || !selectedPayee.id
+                  ? '#ccc'
+                  : 'linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%)',
+              opacity: !selectedCoin || !selectedPayee.id ? 0.6 : 1,
+            }"
+          >
+            Transfer
+          </button>
+        </div>
+      </div>
+
+      <!-- Exchange 页面内容 -->
+      <div v-if="activeAction === 'Exchange'">
+        <div
+          style="
+            background-color: white;
+            padding: 16px;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+          "
+        >
+          <!-- 兑换金额选择 -->
+          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
+            <div
+              v-for="option in exchangeOptions"
+              :key="option.id"
+              @click="selectExchangeOption(option)"
+              :style="{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                border:
+                  selectedExchangeOption === option.id ? '2px solid #8b5cf6' : '2px solid #e5e7eb',
+                borderRadius: '12px',
+                cursor: 'pointer',
+                transition: 'all 0.2s',
+                backgroundColor: selectedExchangeOption === option.id ? '#f3f4f6' : 'white',
+                aspectRatio: '1/1',
+              }"
+            >
+              <img src="../../assets/icon/coin.png" alt="" style="width: 40%" />
+              <div style="font-weight: 500; color: #373232">
+                {{ option.coins }}
+              </div>
+              <div style="font-weight: 500; color: #131111">
+                {{ option.cash }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 兑换按钮 -->
+        <div style="display: flex; justify-content: center; margin-top: 10px">
+          <button
+            style="
+              width: 70%;
+              padding: 12px;
+              background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
+              color: white;
+              border: none;
+              border-radius: 32px;
+              font-weight: 600;
+              cursor: pointer;
+              transition: all 0.2s;
+            "
+            @click="handleExchange"
+            :disabled="!selectedExchangeOption"
+            :style="{
+              background: !selectedExchangeOption
+                ? '#ccc'
+                : 'linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%)',
+              opacity: !selectedExchangeOption ? 0.6 : 1,
+            }"
+          >
+            Exchange
+          </button>
+        </div>
+      </div>
+
+      <!-- Cash out 页面内容 -->
+      <div v-if="activeAction === 'Cash out'">
+        <!-- 提现资料 -->
+        <!-- 银行帐号信息 -->
+        <div>
+          <!-- 标题 -->
+          <div style="display: flex; align-items: center; margin-bottom: 10px">
+            <div style="font-weight: 600">KYC</div>
+          </div>
+          <!-- 银行卡信息 -->
+          <div
+            style="
+              background-color: white;
+              padding: 16px;
+              border-radius: 12px;
+              margin-bottom: 12px;
+              box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            "
+          >
+            <!-- 未上传银行卡信息 -->
+            <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:({{ bankCardInfo.cardImages.length }}/3)</span
+                >
+                <img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" @click="gotoKYC" />
+              </div>
+              <div style="display: flex; align-items: center; gap: 4px">
+                <img
+                  :src="imgUrl"
+                  alt=""
+                  v-for="imgUrl in bankCardInfo.cardImages"
+                  style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px"
+                />
+              </div>
+
+              <!-- 卡号 -->
+              <div style="font-weight: 500">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">Other description:</div>
+              <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
+                {{ bankCardInfo.description }}
+              </div>
+            </div>
+          </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="{
+              background: hasBankCard
+                ? '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="CashOut"
+          >
+            Cash out
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import MobileHeader from '@/components/MobileHeader.vue'
+import { getBankBalance, userBankTransfer } from '@/api/wallet.js'
+import { getSelectedPayee, clearSelectedPayee } from '@/utils/payeeStore.js'
+import { showError, showSuccess } from '@/utils/toast.js'
+import { setApplyInfo, getApplyInfo } from '@/utils/applyStore.js'
+
+const router = useRouter()
+
+const availableIncome = ref('$23456')
+const selectedCoin = ref(null)
+const selectedExchangeOption = ref(null)
+const selectedCashOutOption = ref(null)
+const activeAction = ref('Transfer')
+const loading = ref(false)
+
+// 操作按钮
+const actions = ref([{ name: 'Exchange' }, { name: 'Transfer' }, { name: 'Cash out' }])
+
+// 查看历史提现信息
+const gotoKYC = () => {
+  router.push('/KYC')
+}
+
+// 提现按钮
+const CashOut = () => {
+  if (hasBankCard.value) {
+    try {
+      const resApply = withdrawApply({ ...getApplyInfo(), activityId: activityId })
+      if (resApply.status) {
+        setApplyInfo()
+        router.go(-1)
+      }
+    } catch (error) {
+      showError(error.errorMsg)
+    }
+  } else {
+    maskLayerShow.value = true
+  }
+}
+
+// 选中的收款人
+const selectedPayee = reactive({
+  id: null,
+  account: '',
+  name: '',
+  avatar: '',
+  type: '',
+  isHost: false,
+  isAgency: false,
+  hasSalary: false,
+})
+
+// 转账金币选项
+const coinOptions = reactive([
+  { id: 1, amount: 10500, price: 1 },
+  { id: 2, amount: 52500, price: 5 },
+  { id: 3, amount: 105000, price: 10 },
+  { id: 4, amount: 525000, price: 50 },
+  { id: 5, amount: 1050000, price: 100 },
+  { id: 6, amount: 2100000, price: 200 },
+])
+
+// 兑换选项
+const exchangeOptions = reactive([
+  { id: 1, coins: '10000', cash: '$1' },
+  { id: 2, coins: '10000', cash: '$1' },
+  { id: 3, coins: '10000', cash: '$1' },
+  { id: 4, coins: '10000', cash: '$1' },
+  { id: 5, coins: '10000', cash: '$1' },
+  { id: 6, coins: '10000', cash: '$1' },
+])
+
+const bankCardInfo = ref({})
+const hasBankCard = computed(() => {
+  return Object.keys(bankCardInfo.value).length > 0
+})
+
+// 初始化收款人信息
+const initializePayee = () => {
+  const savedPayee = getSelectedPayee()
+  if (savedPayee) {
+    Object.assign(selectedPayee, savedPayee)
+  }
+}
+
+// 获取银行余额
+const fetchBankBalance = async () => {
+  loading.value = true
+
+  try {
+    const response = await getBankBalance()
+
+    if (response.status && typeof response.body === 'number') {
+      availableIncome.value = `$${response.body.toFixed(2)}`
+    } else {
+      availableIncome.value = '$0.00'
+    }
+  } catch (error) {
+    console.error('Failed to fetch bank balance:', error)
+    availableIncome.value = '$0.00'
+    showError('Failed to load balance. Please try again.')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 方法
+const showDetails = () => {
+  router.push('/information-details')
+}
+
+const searchPayee = () => {
+  router.push('/search-payee')
+}
+
+// 处理操作按钮点击
+const handleAction = (actionName) => {
+  activeAction.value = actionName
+  // 重置所有选择
+  selectedCoin.value = null
+  selectedExchangeOption.value = null
+  selectedCashOutOption.value = null
+}
+
+// 清除当前选中的收款人
+const clearPayee = () => {
+  Object.assign(selectedPayee, {
+    id: null,
+    account: '',
+    name: '',
+    avatar: '',
+    type: '',
+    isHost: false,
+    isAgency: false,
+    hasSalary: false,
+  })
+  clearSelectedPayee()
+}
+
+const selectCoin = (coin) => {
+  if (selectedCoin.value === coin.id) {
+    selectedCoin.value = null
+  } else {
+    selectedCoin.value = coin.id
+  }
+}
+
+const selectExchangeOption = (option) => {
+  if (selectedExchangeOption.value === option.id) {
+    selectedExchangeOption.value = null
+  } else {
+    selectedExchangeOption.value = option.id
+  }
+}
+
+const selectCashOutOption = (option) => {
+  if (selectedCashOutOption.value === option.id) {
+    selectedCashOutOption.value = null
+  } else {
+    selectedCashOutOption.value = option.id
+  }
+}
+
+const transfer = async () => {
+  if (!selectedCoin.value) {
+    showError('Please select an amount first')
+    return
+  }
+
+  if (!selectedPayee.id) {
+    showError('Please select a payee first')
+    return
+  }
+
+  const selectedCoinData = coinOptions.find((coin) => coin.id === selectedCoin.value)
+
+  const transferData = {
+    amount: selectedCoinData.price,
+    acceptUserId: selectedPayee.id,
+    acceptMethod: 'BANK_TRANSFER',
+  }
+
+  try {
+    const response = await userBankTransfer(transferData)
+    if (response.status) {
+      showSuccess(`Successfully transferred $${selectedCoinData.price} to ${selectedPayee.name}`)
+    } else {
+      showError(`Failed to transfer $${selectedCoinData.price}`)
+    }
+
+    selectedCoin.value = null
+    await fetchBankBalance()
+  } catch (error) {
+    console.error('Transfer failed:', error)
+    if (error.errorCode === 5000) {
+      showError('Insufficient balance')
+    } else if (error.errorCode === 5010 || error.errorCode === 5009) {
+      showError('Payment password error')
+    } else {
+      showError('Transfer failed, please try again later')
+    }
+  }
+}
+
+const handleExchange = () => {
+  if (!selectedExchangeOption.value) {
+    showError('Please select an amount first')
+    return
+  }
+
+  const selectedOption = exchangeOptions.find(
+    (option) => option.id === selectedExchangeOption.value
+  )
+  showSuccess(`Exchanging ${selectedOption.coins} coins for ${selectedOption.cash}`)
+  selectedExchangeOption.value = null
+}
+
+const handleCashOut = () => {
+  if (!selectedCashOutOption.value) {
+    showError('Please select an amount first')
+    return
+  }
+
+  const selectedOption = cashOutOptions.find((option) => option.id === selectedCashOutOption.value)
+  showSuccess(`Cashing out ${selectedOption.coins} coins for ${selectedOption.cash}`)
+  selectedCashOutOption.value = null
+}
+
+// 页面加载时获取银行余额和初始化收款人
+onMounted(() => {
+  fetchBankBalance()
+  initializePayee()
+  if (getApplyInfo()) {
+    bankCardInfo.value =
+      { ...getApplyInfo(), cardImages: JSON.parse(getApplyInfo().cardImages) } || {}
+  }
+})
+
+onUnmounted(() => {
+  clearPayee()
+  setApplyInfo()
+})
+</script>
+
+<style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
+.transfer {
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.content {
+  padding: 16px;
+  position: relative;
+  z-index: 2;
+}
+
+.loading-text {
+  font-weight: 500;
+  color: #8b5cf6;
+  font-style: italic;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/src/views/BDCenterView.vue b/src/views/BDCenterView.vue
index 17193ff..cf8060e 100644
--- a/src/views/BDCenterView.vue
+++ b/src/views/BDCenterView.vue
@@ -81,6 +81,7 @@
             align-items: center;
             margin-top: 10px;
           "
+          @click="gotoIncome"
         >
           <span style="font-weight: 600; color: #1f2937"> Available income:$0 </span>
           <img src="../assets/icon/arrow.png" alt="" style="display: block; width: 20px" />
@@ -423,6 +424,10 @@ const goToTeamMember = () => {
   })
 }
 
+const gotoIncome = () => {
+  router.push('/available-income')
+}
+
 // 前往邀请代理
 const goToInviteAgency = () => {
   router.push('/invite-agency')