feat(creator): 添加提现功能和账户设置，优化管理概览视图
This commit is contained in:
@@ -1,71 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h1 class="text-2xl font-bold text-slate-900">管理概览</h1>
|
||||
<div class="flex gap-4">
|
||||
<router-link to="/creator/contents/new"
|
||||
class="px-6 py-2.5 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 transition-colors shadow-sm shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
|
||||
<i class="pi pi-plus"></i> 发布新内容
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h1 class="text-2xl font-bold text-slate-900">管理概览</h1>
|
||||
<div class="flex gap-4">
|
||||
<router-link to="/creator/contents/new" class="px-6 py-2.5 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 transition-colors shadow-sm shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
|
||||
<i class="pi pi-plus"></i> 发布新内容
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Metrics -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
<div v-for="metric in metrics" :key="metric.label"
|
||||
class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
|
||||
<div class="text-sm text-slate-500 mb-2">{{ metric.label }}</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-3xl font-bold text-slate-900">{{ metric.value }}</span>
|
||||
<span class="text-xs font-bold" :class="metric.trend > 0 ? 'text-green-600' : 'text-red-600'">
|
||||
<i class="pi" :class="metric.trend > 0 ? 'pi-arrow-up' : 'pi-arrow-down'"
|
||||
style="font-size: 0.7rem"></i>
|
||||
{{ Math.abs(metric.trend) }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-xs text-slate-400 mt-2">{{ metric.subtext }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Key Metrics -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
<div v-for="metric in metrics" :key="metric.label" class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow relative">
|
||||
<div class="text-sm text-slate-500 mb-2">{{ metric.label }}</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-3xl font-bold text-slate-900">{{ metric.value }}</span>
|
||||
<span class="text-xs font-bold" :class="metric.trend > 0 ? 'text-green-600' : 'text-red-600'">
|
||||
<i class="pi" :class="metric.trend > 0 ? 'pi-arrow-up' : 'pi-arrow-down'" style="font-size: 0.7rem"></i>
|
||||
{{ Math.abs(metric.trend) }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-xs text-slate-400 mt-2">{{ metric.subtext }}</div>
|
||||
|
||||
<!-- Withdraw Button for Revenue Card -->
|
||||
<button v-if="metric.label === '累计总收益'" @click="showWithdraw = true" class="absolute top-6 right-6 px-3 py-1.5 bg-green-50 text-green-700 text-xs font-bold rounded-lg hover:bg-green-100 transition-colors">
|
||||
提现
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pending Orders (Quick Access) -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
|
||||
<h3 class="font-bold text-slate-900 mb-4">待处理事项</h3>
|
||||
<div class="flex gap-4">
|
||||
<div
|
||||
class="flex-1 p-4 bg-orange-50 border border-orange-100 rounded-xl flex items-center justify-between cursor-pointer hover:bg-orange-100 transition-colors"
|
||||
@click="$router.push('/creator/orders')">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-orange-200 text-orange-700 flex items-center justify-center"><i
|
||||
class="pi pi-refresh"></i></div>
|
||||
<div>
|
||||
<div class="font-bold text-slate-900">退款申请</div>
|
||||
<div class="text-xs text-orange-600">需要处理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-orange-700">2</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 p-4 bg-blue-50 border border-blue-100 rounded-xl flex items-center justify-between cursor-pointer hover:bg-blue-100 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-200 text-blue-700 flex items-center justify-center"><i
|
||||
class="pi pi-comments"></i></div>
|
||||
<div>
|
||||
<div class="font-bold text-slate-900">新私信</div>
|
||||
<div class="text-xs text-blue-600">粉丝互动</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-blue-700">5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pending Orders (Quick Access) -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
|
||||
<h3 class="font-bold text-slate-900 mb-4">待处理事项</h3>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1 p-4 bg-orange-50 border border-orange-100 rounded-xl flex items-center justify-between cursor-pointer hover:bg-orange-100 transition-colors" @click="$router.push('/creator/orders')">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-orange-200 text-orange-700 flex items-center justify-center"><i class="pi pi-refresh"></i></div>
|
||||
<div>
|
||||
<div class="font-bold text-slate-900">退款申请</div>
|
||||
<div class="text-xs text-orange-600">需要处理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-orange-700">2</div>
|
||||
</div>
|
||||
<div class="flex-1 p-4 bg-blue-50 border border-blue-100 rounded-xl flex items-center justify-between cursor-pointer hover:bg-blue-100 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-200 text-blue-700 flex items-center justify-center"><i class="pi pi-comments"></i></div>
|
||||
<div>
|
||||
<div class="font-bold text-slate-900">新私信</div>
|
||||
<div class="text-xs text-blue-600">粉丝互动</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-blue-700">5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Withdraw Dialog -->
|
||||
<Dialog v-model:visible="showWithdraw" modal header="收益提现" :style="{ width: '35rem' }">
|
||||
<div class="space-y-6 pt-2">
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-3">提现方式</label>
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
<label class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer hover:border-primary-500 hover:bg-slate-50 transition-all" :class="withdrawMethod === 'external' ? 'border-primary-500 bg-primary-50 ring-1 ring-primary-500' : 'border-slate-200'">
|
||||
<input type="radio" v-model="withdrawMethod" value="external" class="hidden">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"><i class="pi pi-credit-card text-xl"></i></div>
|
||||
<div class="flex-1">
|
||||
<div class="font-bold text-slate-900">提现至银行卡/支付宝</div>
|
||||
<div class="text-xs text-slate-500" v-if="hasPayoutAccount">已绑定：招商银行 (8888)</div>
|
||||
<div class="text-xs text-orange-600 font-bold flex items-center gap-1" v-else>
|
||||
<i class="pi pi-exclamation-circle"></i> 未配置收款账户
|
||||
<router-link to="/creator/settings" class="underline hover:text-orange-800 ml-1">去配置</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<i v-if="withdrawMethod === 'external'" class="pi pi-check-circle text-primary-600 text-xl"></i>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer hover:border-primary-500 hover:bg-slate-50 transition-all" :class="withdrawMethod === 'wallet' ? 'border-primary-500 bg-primary-50 ring-1 ring-primary-500' : 'border-slate-200'">
|
||||
<input type="radio" v-model="withdrawMethod" value="wallet" class="hidden">
|
||||
<div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center"><i class="pi pi-wallet text-xl"></i></div>
|
||||
<div class="flex-1">
|
||||
<div class="font-bold text-slate-900">转入个人钱包余额</div>
|
||||
<div class="text-xs text-slate-500">实时到账，可用于平台消费</div>
|
||||
</div>
|
||||
<i v-if="withdrawMethod === 'wallet'" class="pi pi-check-circle text-primary-600 text-xl"></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">提现金额 (¥)</label>
|
||||
<input type="number" placeholder="请输入金额" class="w-full h-12 px-4 border border-slate-200 rounded-lg text-lg font-bold outline-none focus:border-primary-500 transition-colors">
|
||||
<div class="text-xs text-slate-400 mt-2 flex justify-between">
|
||||
<span>可提现收益: ¥ 8,920.50</span>
|
||||
<button class="text-primary-600 hover:underline">全部提现</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<button @click="showWithdraw = false" class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm font-bold">取消</button>
|
||||
<button @click="handleWithdraw" class="px-6 py-2 bg-primary-600 text-white rounded-lg text-sm font-bold hover:bg-primary-700 shadow-sm" :disabled="withdrawMethod === 'external' && !hasPayoutAccount" :class="{ 'opacity-50 cursor-not-allowed': withdrawMethod === 'external' && !hasPayoutAccount }">确认提现</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Dialog from 'primevue/dialog';
|
||||
import Toast from 'primevue/toast';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
|
||||
const toast = useToast();
|
||||
const showWithdraw = ref(false);
|
||||
const withdrawMethod = ref('wallet');
|
||||
const hasPayoutAccount = ref(false); // Mock state
|
||||
|
||||
const metrics = ref([
|
||||
{ label: '总关注用户', value: '12,548', trend: 1.2, subtext: '昨日 +125' },
|
||||
{ label: '累计总收益', value: '¥ 8,920.50', trend: 5.4, subtext: '近30天 +2,300' },
|
||||
{ label: '总关注用户', value: '12,548', trend: 1.2, subtext: '昨日 +125' },
|
||||
{ label: '累计总收益', value: '¥ 8,920.50', trend: 5.4, subtext: '近30天 +2,300' },
|
||||
]);
|
||||
|
||||
const handleWithdraw = () => {
|
||||
showWithdraw.value = false;
|
||||
const msg = withdrawMethod.value === 'wallet' ? '资金已转入您的个人钱包' : '提现申请已提交至银行处理';
|
||||
toast.add({ severity: 'success', summary: '提现成功', detail: msg, life: 3000 });
|
||||
};
|
||||
</script>
|
||||
@@ -1,14 +1,8 @@
|
||||
<template>
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h1 class="text-2xl font-bold text-slate-900">频道设置</h1>
|
||||
<button @click="saveSettings"
|
||||
class="px-8 py-2.5 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-sm shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
|
||||
<i class="pi pi-check"></i> 保存修改
|
||||
</button>
|
||||
</div>
|
||||
<div class="max-w-4xl mx-auto p-8">
|
||||
<h1 class="text-2xl font-bold text-slate-900 mb-8">频道设置</h1>
|
||||
|
||||
<div class="max-w-5xl mx-auto space-y-8">
|
||||
<div class="space-y-8">
|
||||
<!-- 0. Tips -->
|
||||
<div class="bg-blue-50 p-6 rounded-xl border border-blue-100 text-sm text-blue-700 flex items-start gap-4">
|
||||
<i class="pi pi-info-circle text-xl mt-0.5"></i>
|
||||
@@ -17,24 +11,21 @@
|
||||
<ul class="list-disc list-inside space-y-1 opacity-90">
|
||||
<li>建议封面图尺寸 1280x320px，重点内容居中。</li>
|
||||
<li>频道名称修改后需人工审核，审核期间原名称仍可见。</li>
|
||||
<li>优质的频道介绍和精美的视觉设计有助于大幅提升关注转化率。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 1. Basic Info -->
|
||||
<!-- 1. Basic Info & Visuals -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8">
|
||||
<h2 class="text-lg font-bold text-slate-900 mb-6 pb-4 border-b border-slate-100">基本信息</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-8">
|
||||
<!-- Avatar & Name -->
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="relative group cursor-pointer flex-shrink-0" @click="triggerUpload('avatar')">
|
||||
<div
|
||||
class="w-24 h-24 rounded-full border-4 border-slate-50 shadow-sm overflow-hidden bg-slate-100">
|
||||
<div class="w-24 h-24 rounded-full border-4 border-slate-50 shadow-sm overflow-hidden bg-slate-100">
|
||||
<img :src="form.avatar" class="w-full h-full object-cover">
|
||||
<div
|
||||
class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<i class="pi pi-camera text-white text-2xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,15 +33,27 @@
|
||||
<div class="flex-1 space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">频道名称</label>
|
||||
<input v-model="form.name" type="text"
|
||||
class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors"
|
||||
placeholder="给您的频道起个名字">
|
||||
<input v-model="form.name" type="text" class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors" placeholder="给您的频道起个名字">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">一句话简介</label>
|
||||
<input v-model="form.bio" type="text"
|
||||
class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors"
|
||||
placeholder="介绍一下您的频道特色...">
|
||||
<input v-model="form.bio" type="text" class="w-full h-11 px-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors" placeholder="介绍一下您的频道特色...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cover Image (Moved Here) -->
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-3">频道头图 (Cover)</label>
|
||||
<div class="aspect-[4/1] rounded-xl bg-slate-50 border-2 border-dashed border-slate-300 relative overflow-hidden group cursor-pointer hover:border-primary-400 transition-all" @click="triggerUpload('cover')">
|
||||
<img v-if="form.cover" :src="form.cover" class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center text-slate-400 bg-white/50 opacity-100 group-hover:bg-white/80 transition-all" v-else>
|
||||
<i class="pi pi-image text-3xl mb-2"></i>
|
||||
<span class="text-sm font-medium">点击上传 (建议尺寸 1280x320)</span>
|
||||
</div>
|
||||
<!-- Hover Overlay -->
|
||||
<div v-if="form.cover" class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="text-white font-bold"><i class="pi pi-refresh mr-2"></i>更换封面</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,45 +61,88 @@
|
||||
<!-- Intro Detail -->
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">详细介绍</label>
|
||||
<textarea v-model="form.description" rows="4"
|
||||
class="w-full p-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors resize-none"
|
||||
placeholder="详细描述您的履历、师承或频道内容规划..."></textarea>
|
||||
<textarea v-model="form.description" rows="4" class="w-full p-4 border border-slate-200 rounded-lg focus:border-primary-500 outline-none transition-colors resize-none" placeholder="详细描述您的履历、师承或频道内容规划..."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Save Button -->
|
||||
<div class="pt-6 border-t border-slate-100 flex justify-end">
|
||||
<button @click="saveSettings" class="px-8 py-3 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-lg shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
|
||||
<i class="pi pi-check"></i> 保存修改
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Visual Style -->
|
||||
<!-- 2. Payout Settings -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8">
|
||||
<h2 class="text-lg font-bold text-slate-900 mb-6 pb-4 border-b border-slate-100">视觉风格</h2>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-3">频道头图 (Cover)</label>
|
||||
<div
|
||||
class="aspect-[4/1] rounded-xl bg-slate-50 border-2 border-dashed border-slate-300 relative overflow-hidden group cursor-pointer hover:border-primary-400 transition-all"
|
||||
@click="triggerUpload('cover')">
|
||||
<img v-if="form.cover" :src="form.cover" class="w-full h-full object-cover">
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col items-center justify-center text-slate-400 bg-white/50 opacity-100 group-hover:bg-white/80 transition-all"
|
||||
v-else>
|
||||
<i class="pi pi-image text-3xl mb-2"></i>
|
||||
<span class="text-sm font-medium">点击上传 (建议尺寸 1280x320)</span>
|
||||
</div>
|
||||
<!-- Hover Overlay for replace -->
|
||||
<div v-if="form.cover"
|
||||
class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="text-white font-bold"><i class="pi pi-refresh mr-2"></i>更换封面</span>
|
||||
<div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-100">
|
||||
<h2 class="text-lg font-bold text-slate-900">收款账户</h2>
|
||||
<button @click="showAddAccount = true" class="text-sm font-bold text-primary-600 hover:text-primary-700 cursor-pointer flex items-center gap-1 px-3 py-1.5 rounded hover:bg-primary-50 transition-colors">
|
||||
<i class="pi pi-plus"></i> 添加账户
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Mock Account Card -->
|
||||
<div class="p-4 border border-slate-200 rounded-xl flex items-center gap-4 bg-white relative group hover:border-primary-200 transition-colors">
|
||||
<div class="w-10 h-10 rounded-full bg-red-50 text-red-600 flex items-center justify-center"><i class="pi pi-briefcase"></i></div>
|
||||
<div>
|
||||
<div class="font-bold text-slate-900">招商银行</div>
|
||||
<div class="text-sm text-slate-500">储蓄卡 (8888)</div>
|
||||
</div>
|
||||
<button class="absolute top-4 right-4 text-slate-300 hover:text-red-500 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity p-2"><i class="pi pi-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="file" ref="fileInput" class="hidden" @change="handleFileChange">
|
||||
|
||||
<!-- Add Account Dialog -->
|
||||
<Dialog v-model:visible="showAddAccount" modal header="添加收款账户" :style="{ width: '25rem' }">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">账户类型</label>
|
||||
<div class="flex gap-4">
|
||||
<label class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50">
|
||||
<RadioButton v-model="newAccount.type" value="bank" />
|
||||
<span>银行卡</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50">
|
||||
<RadioButton v-model="newAccount.type" value="alipay" />
|
||||
<span>支付宝</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="newAccount.type === 'bank'">
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">银行名称</label>
|
||||
<input type="text" class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500" placeholder="如：招商银行">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">{{ newAccount.type === 'bank' ? '银行卡号' : '支付宝账号' }}</label>
|
||||
<input type="text" class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500" placeholder="请输入账号">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">真实姓名</label>
|
||||
<input type="text" class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500" placeholder="需与实名认证一致">
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<button @click="showAddAccount = false" class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm font-bold cursor-pointer">取消</button>
|
||||
<button @click="handleAddAccount" class="px-6 py-2 bg-primary-600 text-white rounded-lg text-sm font-bold hover:bg-primary-700 cursor-pointer shadow-sm">保存</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Dialog from 'primevue/dialog';
|
||||
import RadioButton from 'primevue/radiobutton';
|
||||
import Toast from 'primevue/toast';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { reactive, ref } from 'vue';
|
||||
@@ -104,6 +150,14 @@ import { reactive, ref } from 'vue';
|
||||
const toast = useToast();
|
||||
const fileInput = ref(null);
|
||||
const currentUploadType = ref('');
|
||||
const showAddAccount = ref(false);
|
||||
|
||||
const newAccount = reactive({
|
||||
type: 'bank',
|
||||
name: '',
|
||||
account: '',
|
||||
realname: ''
|
||||
});
|
||||
|
||||
const form = reactive({
|
||||
name: '梅派传人小林',
|
||||
@@ -133,6 +187,11 @@ const handleFileChange = (event) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddAccount = () => {
|
||||
showAddAccount.value = false;
|
||||
toast.add({ severity: 'success', summary: '添加成功', detail: '收款账户已添加', life: 3000 });
|
||||
};
|
||||
|
||||
const saveSettings = () => {
|
||||
if (!form.name) {
|
||||
toast.add({ severity: 'error', summary: '错误', detail: '频道名称不能为空', life: 3000 });
|
||||
|
||||
@@ -79,16 +79,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State (Hidden for mock) -->
|
||||
<!-- <div class="text-center py-12 text-slate-400">暂无交易记录</div> -->
|
||||
</div>
|
||||
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import Toast from 'primevue/toast';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
|
||||
const toast = useToast();
|
||||
const showRecharge = ref(false);
|
||||
const selectedAmount = ref(50);
|
||||
const customAmount = ref('');
|
||||
|
||||
Reference in New Issue
Block a user