377 lines
8.5 KiB
Vue
377 lines
8.5 KiB
Vue
<script lang="ts" setup>
|
||
import { useMerchantStore } from '@/store/merchant'
|
||
import { getWithdrawRecords, applyWithdraw } from '@/pagesMerchant/api'
|
||
import { WithdrawStatus, WITHDRAW_STATUS_CONFIG } from '@/typings/merchant'
|
||
import type { WithdrawRecord } from '@/typings/merchant'
|
||
|
||
definePage({
|
||
style: {
|
||
navigationBarTitleText: '申请提现',
|
||
},
|
||
})
|
||
|
||
const merchantStore = useMerchantStore()
|
||
|
||
// 提现金额
|
||
const withdrawAmount = ref('')
|
||
|
||
// 银行卡列表
|
||
const bankCards = [
|
||
{ id: '1', name: '中国工商银行', account: '**** **** **** 1234' },
|
||
{ id: '2', name: '中国建设银行', account: '**** **** **** 5678' },
|
||
]
|
||
const selectedCardIndex = ref(0)
|
||
|
||
// 提现记录
|
||
const withdrawRecords = ref<WithdrawRecord[]>([])
|
||
|
||
// 快捷金额
|
||
const quickAmounts = [1000, 5000, 10000]
|
||
|
||
// 选择快捷金额
|
||
function selectQuickAmount(amount: number) {
|
||
withdrawAmount.value = amount.toString()
|
||
}
|
||
|
||
// 全部提现
|
||
function withdrawAll() {
|
||
if (merchantStore.financeOverview) {
|
||
withdrawAmount.value = merchantStore.financeOverview.balance.toString()
|
||
}
|
||
}
|
||
|
||
// 选择银行卡
|
||
function handleCardChange(e: any) {
|
||
selectedCardIndex.value = e.detail.value
|
||
}
|
||
|
||
// 申请提现
|
||
async function handleWithdraw() {
|
||
if (!withdrawAmount.value || parseFloat(withdrawAmount.value) <= 0) {
|
||
uni.showToast({ title: '请输入提现金额', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
const amount = parseFloat(withdrawAmount.value)
|
||
if (merchantStore.financeOverview && amount > merchantStore.financeOverview.balance) {
|
||
uni.showToast({ title: '提现金额不能超过可用余额', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
uni.showModal({
|
||
title: '确认提现',
|
||
content: `确定要提现 ¥${amount.toFixed(2)} 到 ${bankCards[selectedCardIndex.value].name} 吗？`,
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
uni.showLoading({ title: '提交中...' })
|
||
try {
|
||
await applyWithdraw({
|
||
amount,
|
||
bankAccount: bankCards[selectedCardIndex.value].account,
|
||
})
|
||
uni.hideLoading()
|
||
uni.showToast({ title: '申请已提交', icon: 'success' })
|
||
withdrawAmount.value = ''
|
||
loadData()
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
uni.showToast({ title: '申请失败', icon: 'none' })
|
||
}
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
// 加载数据
|
||
async function loadData() {
|
||
await merchantStore.fetchFinanceOverview()
|
||
const res = await getWithdrawRecords()
|
||
withdrawRecords.value = res.list
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadData()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="withdraw-page">
|
||
<!-- 可用余额 -->
|
||
<view class="balance-info" v-if="merchantStore.financeOverview">
|
||
<text class="label">可用余额（元）</text>
|
||
<text class="amount">{{ merchantStore.financeOverview.balance.toFixed(2) }}</text>
|
||
</view>
|
||
|
||
<!-- 提现表单 -->
|
||
<view class="withdraw-form">
|
||
<view class="form-item">
|
||
<text class="label">提现金额</text>
|
||
<view class="amount-input">
|
||
<text class="unit">¥</text>
|
||
<input
|
||
v-model="withdrawAmount"
|
||
type="digit"
|
||
placeholder="请输入提现金额"
|
||
class="input"
|
||
/>
|
||
<text class="all-btn" @click="withdrawAll">全部提现</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="quick-amounts">
|
||
<view
|
||
v-for="amount in quickAmounts"
|
||
:key="amount"
|
||
class="quick-item"
|
||
:class="{ active: withdrawAmount === amount.toString() }"
|
||
@click="selectQuickAmount(amount)"
|
||
>
|
||
¥{{ amount }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="label">到账银行卡</text>
|
||
<picker :range="bankCards" range-key="name" @change="handleCardChange">
|
||
<view class="bank-card">
|
||
<text class="bank-name">{{ bankCards[selectedCardIndex].name }}</text>
|
||
<text class="bank-account">{{ bankCards[selectedCardIndex].account }}</text>
|
||
<text class="i-carbon-chevron-right"></text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="tips">
|
||
<text class="i-carbon-information"></text>
|
||
<text>提现申请提交后，预计1-3个工作日内到账，请耐心等待审核</text>
|
||
</view>
|
||
|
||
<view class="submit-btn" @click="handleWithdraw">立即提现</view>
|
||
</view>
|
||
|
||
<!-- 提现记录 -->
|
||
<view class="section">
|
||
<view class="section-title">提现记录</view>
|
||
|
||
<view v-if="withdrawRecords.length === 0" class="empty">
|
||
<text>暂无提现记录</text>
|
||
</view>
|
||
|
||
<view v-for="item in withdrawRecords" :key="item.id" class="record-item">
|
||
<view class="info">
|
||
<text class="amount">¥{{ item.amount.toFixed(2) }}</text>
|
||
<text class="bank">{{ item.bankName }} {{ item.bankAccount }}</text>
|
||
<text class="time">{{ item.applyTime }}</text>
|
||
</view>
|
||
<view class="status" :style="{ color: WITHDRAW_STATUS_CONFIG[item.status].color }">
|
||
{{ WITHDRAW_STATUS_CONFIG[item.status].label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.withdraw-page {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
width: 100%;
|
||
max-width: 540px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.balance-info {
|
||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||
padding: 40rpx;
|
||
color: #fff;
|
||
|
||
.label {
|
||
font-size: 26rpx;
|
||
opacity: 0.9;
|
||
display: block;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 56rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.withdraw-form {
|
||
background: #fff;
|
||
margin: 20rpx;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
|
||
.form-item {
|
||
padding: 24rpx 0;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
|
||
.label {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
display: block;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.amount-input {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.unit {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.input {
|
||
flex: 1;
|
||
font-size: 48rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.all-btn {
|
||
font-size: 26rpx;
|
||
color: #ff8f0d;
|
||
}
|
||
}
|
||
|
||
.bank-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
.bank-name {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.bank-account {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.quick-amounts {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
padding: 24rpx 0;
|
||
|
||
.quick-item {
|
||
flex: 1;
|
||
height: 64rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
|
||
&.active {
|
||
border-color: #ff8f0d;
|
||
background: rgba(255, 143, 13, 0.1);
|
||
color: #ff8f0d;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8rpx;
|
||
padding: 24rpx 0;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
line-height: 1.5;
|
||
|
||
&:first-child {
|
||
color: #ff8f0d;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||
border-radius: 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.section {
|
||
background: #fff;
|
||
margin: 20rpx;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.empty {
|
||
text-align: center;
|
||
padding: 40rpx 0;
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.record-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info {
|
||
.amount {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.bank {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
display: block;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.time {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.status {
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
</style>
|