feat: 商家端代码
This commit is contained in:
FlowerWater
376
src/pagesMerchant/finance/withdraw.vue
Normal file
376
src/pagesMerchant/finance/withdraw.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user