334 lines
11 KiB
Vue
334 lines
11 KiB
Vue
<template>
|
|
<div class="page-content">
|
|
<!-- 统计卡片 -->
|
|
<ElRow :gutter="20" style="margin-bottom: 20px">
|
|
<ElCol :xs="24" :sm="12" :lg="6">
|
|
<ElCard shadow="hover">
|
|
<div class="stat-card">
|
|
<div
|
|
class="stat-icon"
|
|
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
|
|
>
|
|
<i class="iconfont-sys"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-label">佣金总额</div>
|
|
<div class="stat-value">¥{{ accountInfo.totalCommission.toFixed(2) }}</div>
|
|
</div>
|
|
</div>
|
|
</ElCard>
|
|
</ElCol>
|
|
<ElCol :xs="24" :sm="12" :lg="6">
|
|
<ElCard shadow="hover">
|
|
<div class="stat-card">
|
|
<div
|
|
class="stat-icon"
|
|
style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
|
|
>
|
|
<i class="iconfont-sys"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-label">可提现金额</div>
|
|
<div class="stat-value">¥{{ accountInfo.availableAmount.toFixed(2) }}</div>
|
|
</div>
|
|
</div>
|
|
</ElCard>
|
|
</ElCol>
|
|
<ElCol :xs="24" :sm="12" :lg="6">
|
|
<ElCard shadow="hover">
|
|
<div class="stat-card">
|
|
<div
|
|
class="stat-icon"
|
|
style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
|
|
>
|
|
<i class="iconfont-sys"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-label">待入账金额</div>
|
|
<div class="stat-value">¥{{ accountInfo.pendingAmount.toFixed(2) }}</div>
|
|
</div>
|
|
</div>
|
|
</ElCard>
|
|
</ElCol>
|
|
<ElCol :xs="24" :sm="12" :lg="6">
|
|
<ElCard shadow="hover">
|
|
<div class="stat-card">
|
|
<div
|
|
class="stat-icon"
|
|
style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
|
|
>
|
|
<i class="iconfont-sys"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-label">已提现金额</div>
|
|
<div class="stat-value">¥{{ accountInfo.withdrawnAmount.toFixed(2) }}</div>
|
|
</div>
|
|
</div>
|
|
</ElCard>
|
|
</ElCol>
|
|
</ElRow>
|
|
|
|
<!-- 操作按钮 -->
|
|
<ElRow style="margin-bottom: 20px">
|
|
<ElButton type="primary" @click="showWithdrawDialog">申请提现</ElButton>
|
|
<ElButton @click="viewWithdrawHistory">提现记录</ElButton>
|
|
</ElRow>
|
|
|
|
<!-- 收支流水 -->
|
|
<ElCard shadow="never">
|
|
<template #header>
|
|
<div style="display: flex; align-items: center; justify-content: space-between">
|
|
<span style="font-weight: 500">收支流水</span>
|
|
<ElRadioGroup v-model="flowType" size="small">
|
|
<ElRadioButton value="all">全部</ElRadioButton>
|
|
<ElRadioButton value="income">收入</ElRadioButton>
|
|
<ElRadioButton value="withdraw">提现</ElRadioButton>
|
|
</ElRadioGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<ArtTable :data="filteredFlowData" index max-height="500">
|
|
<template #default>
|
|
<ElTableColumn label="流水号" prop="flowNo" min-width="180" />
|
|
<ElTableColumn label="类型" prop="type">
|
|
<template #default="scope">
|
|
<ElTag :type="scope.row.type === 'income' ? 'success' : 'warning'">
|
|
{{ scope.row.type === 'income' ? '收入' : '提现' }}
|
|
</ElTag>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="金额" prop="amount">
|
|
<template #default="scope">
|
|
<span
|
|
:style="{
|
|
color:
|
|
scope.row.type === 'income'
|
|
? 'var(--el-color-success)'
|
|
: 'var(--el-color-danger)'
|
|
}"
|
|
>
|
|
{{ scope.row.type === 'income' ? '+' : '-' }}¥{{ scope.row.amount.toFixed(2) }}
|
|
</span>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="余额" prop="balance">
|
|
<template #default="scope"> ¥{{ scope.row.balance.toFixed(2) }} </template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="说明" prop="description" show-overflow-tooltip />
|
|
<ElTableColumn label="时间" prop="createTime" width="180" />
|
|
</template>
|
|
</ArtTable>
|
|
</ElCard>
|
|
|
|
<!-- 提现申请对话框 -->
|
|
<ElDialog v-model="withdrawDialogVisible" title="申请提现" width="600px" align-center>
|
|
<ElForm
|
|
ref="withdrawFormRef"
|
|
:model="withdrawForm"
|
|
:rules="withdrawRules"
|
|
label-width="120px"
|
|
>
|
|
<ElFormItem label="可提现金额">
|
|
<span style="font-size: 20px; font-weight: 500; color: var(--el-color-success)">
|
|
¥{{ accountInfo.availableAmount.toFixed(2) }}
|
|
</span>
|
|
</ElFormItem>
|
|
<ElFormItem label="提现金额" prop="amount">
|
|
<ElInputNumber
|
|
v-model="withdrawForm.amount"
|
|
:min="1"
|
|
:max="accountInfo.availableAmount"
|
|
:precision="2"
|
|
style="width: 100%"
|
|
/>
|
|
</ElFormItem>
|
|
<ElFormItem label="手续费">
|
|
<span>¥{{ calculatedFee.toFixed(2) }}</span>
|
|
<span style="margin-left: 8px; color: var(--el-text-color-secondary)">
|
|
(费率: {{ feeRate * 100 }}%)
|
|
</span>
|
|
</ElFormItem>
|
|
<ElFormItem label="实际到账">
|
|
<span style="font-size: 18px; font-weight: 500; color: var(--el-color-success)">
|
|
¥{{ actualAmount.toFixed(2) }}
|
|
</span>
|
|
</ElFormItem>
|
|
<ElFormItem label="收款银行" prop="bankName">
|
|
<ElSelect
|
|
v-model="withdrawForm.bankName"
|
|
placeholder="请选择收款银行"
|
|
style="width: 100%"
|
|
>
|
|
<ElOption label="中国工商银行" value="工商银行" />
|
|
<ElOption label="中国建设银行" value="建设银行" />
|
|
<ElOption label="中国农业银行" value="农业银行" />
|
|
<ElOption label="中国银行" value="中国银行" />
|
|
<ElOption label="招商银行" value="招商银行" />
|
|
</ElSelect>
|
|
</ElFormItem>
|
|
<ElFormItem label="银行账户" prop="bankAccount">
|
|
<ElInput v-model="withdrawForm.bankAccount" placeholder="请输入银行账户" />
|
|
</ElFormItem>
|
|
<ElFormItem label="开户姓名" prop="accountName">
|
|
<ElInput v-model="withdrawForm.accountName" placeholder="请输入开户姓名" />
|
|
</ElFormItem>
|
|
</ElForm>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<ElButton @click="withdrawDialogVisible = false">取消</ElButton>
|
|
<ElButton type="primary" @click="submitWithdraw">提交申请</ElButton>
|
|
</div>
|
|
</template>
|
|
</ElDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ElMessage } from 'element-plus'
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
|
|
defineOptions({ name: 'MyAccount' })
|
|
|
|
const accountInfo = reactive({
|
|
totalCommission: 158900.5,
|
|
availableAmount: 58900.5,
|
|
pendingAmount: 50000.0,
|
|
withdrawnAmount: 50000.0
|
|
})
|
|
|
|
const flowType = ref('all')
|
|
const withdrawDialogVisible = ref(false)
|
|
const withdrawFormRef = ref<FormInstance>()
|
|
const feeRate = 0.002 // 手续费率 0.2%
|
|
|
|
const withdrawForm = reactive({
|
|
amount: 0,
|
|
bankName: '',
|
|
bankAccount: '',
|
|
accountName: ''
|
|
})
|
|
|
|
const withdrawRules = reactive<FormRules>({
|
|
amount: [
|
|
{ required: true, message: '请输入提现金额', trigger: 'blur' },
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
if (value > accountInfo.availableAmount) {
|
|
callback(new Error('提现金额不能大于可提现金额'))
|
|
} else if (value < 1) {
|
|
callback(new Error('提现金额不能小于1元'))
|
|
} else {
|
|
callback()
|
|
}
|
|
},
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
bankName: [{ required: true, message: '请选择收款银行', trigger: 'change' }],
|
|
bankAccount: [{ required: true, message: '请输入银行账户', trigger: 'blur' }],
|
|
accountName: [{ required: true, message: '请输入开户姓名', trigger: 'blur' }]
|
|
})
|
|
|
|
const flowData = ref([
|
|
{
|
|
id: '1',
|
|
flowNo: 'FL202601090001',
|
|
type: 'income',
|
|
amount: 1580.0,
|
|
balance: 58900.5,
|
|
description: '套餐销售佣金',
|
|
createTime: '2026-01-09 10:30:00'
|
|
},
|
|
{
|
|
id: '2',
|
|
flowNo: 'FL202601080001',
|
|
type: 'withdraw',
|
|
amount: 5000.0,
|
|
balance: 57320.5,
|
|
description: '提现到账',
|
|
createTime: '2026-01-08 15:00:00'
|
|
},
|
|
{
|
|
id: '3',
|
|
flowNo: 'FL202601070001',
|
|
type: 'income',
|
|
amount: 2360.0,
|
|
balance: 62320.5,
|
|
description: '号卡分配佣金',
|
|
createTime: '2026-01-07 14:20:00'
|
|
}
|
|
])
|
|
|
|
const calculatedFee = computed(() => {
|
|
return withdrawForm.amount * feeRate
|
|
})
|
|
|
|
const actualAmount = computed(() => {
|
|
return withdrawForm.amount - calculatedFee.value
|
|
})
|
|
|
|
const filteredFlowData = computed(() => {
|
|
if (flowType.value === 'all') return flowData.value
|
|
return flowData.value.filter((item) => item.type === flowType.value)
|
|
})
|
|
|
|
const showWithdrawDialog = () => {
|
|
withdrawForm.amount = 0
|
|
withdrawForm.bankName = ''
|
|
withdrawForm.bankAccount = ''
|
|
withdrawForm.accountName = ''
|
|
withdrawDialogVisible.value = true
|
|
}
|
|
|
|
const submitWithdraw = async () => {
|
|
if (!withdrawFormRef.value) return
|
|
await withdrawFormRef.value.validate((valid) => {
|
|
if (valid) {
|
|
ElMessage.success('提现申请提交成功，请等待审核')
|
|
withdrawDialogVisible.value = false
|
|
}
|
|
})
|
|
}
|
|
|
|
const viewWithdrawHistory = () => {
|
|
ElMessage.info('查看提现记录')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-content {
|
|
.stat-card {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
|
|
.stat-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 60px;
|
|
height: 60px;
|
|
font-size: 28px;
|
|
color: white;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.stat-content {
|
|
flex: 1;
|
|
|
|
.stat-label {
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|