feat(主播设置中心): 新增“提现”按钮和“资料不足”提醒弹窗
This commit is contained in:
hzj
parent
bcd075457e
commit
5604077c81
@ -127,6 +127,8 @@
|
||||
"host_setting": "إعدادات المضيف",
|
||||
"my_agency": "وكيلي",
|
||||
"tips": "نصائح",
|
||||
"prompt": "موجه",
|
||||
"to_improve": "إكمال المعلومات",
|
||||
"leave_agent_tips": "يمكن للمضيف مغادرة الوكيل الحالي فقط في اليوم الأول والـ16 من كل شهر",
|
||||
|
||||
"loading": "جار التحميل",
|
||||
|
||||
@ -127,6 +127,8 @@
|
||||
"host_setting": "হোস্ট সেটিং",
|
||||
"my_agency": "আমার এজেন্সি",
|
||||
"tips": "টিপস",
|
||||
"prompt": "প্রম্পট",
|
||||
"to_improve": "সম্পূর্ণ করুন",
|
||||
"leave_agent_tips": "হোস্ট শুধুমাত্র প্রতি মাসের ১ এবং ১৬ তারিখে বর্তমান এজেন্ট ছাড়তে পারে",
|
||||
|
||||
"loading": "লোড হচ্ছে",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -127,6 +127,8 @@
|
||||
"host_setting": "主播设置",
|
||||
"my_agency": "我的代理",
|
||||
"tips": "提示",
|
||||
"prompt": "提示",
|
||||
"to_improve": "去完善",
|
||||
"leave_agent_tips": "主播只能在每月1日和16日离开当前代理",
|
||||
|
||||
"loading": "加载中",
|
||||
|
||||
@ -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) => {
|
||||
if (!value || value === '0' || value === 0) return '0.00'
|
||||
const numValue = parseFloat(value)
|
||||
return numValue.toFixed(2)
|
||||
// 获取银行卡列表
|
||||
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 showDatePicker = () => {
|
||||
router.push('/history-salary')
|
||||
}
|
||||
|
||||
const goToPlatformPolicy = () => {
|
||||
router.push('/platform-policy?from=hostcenter')
|
||||
}
|
||||
|
||||
const goToNotification = () => {
|
||||
router.push('/host-setting')
|
||||
}
|
||||
|
||||
const goToHelp = () => {
|
||||
// 可以添加帮助页面的路由
|
||||
console.log('Help clicked')
|
||||
}
|
||||
|
||||
const exchangeGoldCoins = () => {
|
||||
router.push('/exchange-gold-coins')
|
||||
}
|
||||
|
||||
// 前往转账
|
||||
const transfer = () => {
|
||||
router.push('/transfer')
|
||||
}
|
||||
|
||||
// 前往提现
|
||||
const withdraw = () => {
|
||||
router.push('/cash-withdraw')
|
||||
// 获取提现信息列表
|
||||
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 { appConnected, userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder } =
|
||||
@ -360,6 +485,8 @@ const { appConnected, userInfo, salaryInfo, taskInfo, handleImageError, getAvata
|
||||
|
||||
onMounted(() => {
|
||||
clearSelectedPayee() //清除选中的收款人
|
||||
getBankCards() // 获取正在使用的银行卡
|
||||
getWithdrawInfoListData() // 获取提现信息列表
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user