rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(creator): 优化管理概览和频道设置视图，提升用户体验和界面美观

Browse Source
This commit is contained in:
Rogee
2025-12-26 23:23:31 +08:00
parent 7d11378436
commit 77ac9d00b3
2 changed files with 212 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
frontend/portal/src/views/creator/DashboardView.vue
View File

@@ -1,118 +1,139 @@
<template> <template>
<div class="p-8"> <div>
<div class="flex items-center justify-between mb-8"> <div class="flex items-center justify-between mb-8">
<h1 class="text-2xl font-bold text-slate-900">管理概览</h1> <h1 class="text-2xl font-bold text-slate-900">管理概览</h1>
<div class="flex gap-4"> <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"> <router-link to="/creator/contents/new"
<i class="pi pi-plus"></i> 发布新内容 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">
</router-link> <i class="pi pi-plus"></i> 发布新内容
</div> </router-link>
</div> </div>
</div>
<!-- Key Metrics --> <!-- Key Metrics -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> <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 v-for="metric in metrics" :key="metric.label"
<div class="text-sm text-slate-500 mb-2">{{ metric.label }}</div> class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow relative">
<div class="flex items-baseline gap-2"> <div class="text-sm text-slate-500 mb-2">{{ metric.label }}</div>
<span class="text-3xl font-bold text-slate-900">{{ metric.value }}</span> <div class="flex items-baseline gap-2">
<span class="text-xs font-bold" :class="metric.trend > 0 ? 'text-green-600' : 'text-red-600'"> <span class="text-3xl font-bold text-slate-900">{{ metric.value }}</span>
<i class="pi" :class="metric.trend > 0 ? 'pi-arrow-up' : 'pi-arrow-down'" style="font-size: 0.7rem"></i> <span class="text-xs font-bold" :class="metric.trend > 0 ? 'text-green-600' : 'text-red-600'">
{{ Math.abs(metric.trend) }}% <i class="pi" :class="metric.trend > 0 ? 'pi-arrow-up' : 'pi-arrow-down'"
</span> style="font-size: 0.7rem"></i>
</div> {{ Math.abs(metric.trend) }}%
<div class="text-xs text-slate-400 mt-2">{{ metric.subtext }}</div> </span>
</div>
<!-- Withdraw Button for Revenue Card --> <div class="text-xs text-slate-400 mt-2">{{ metric.subtext }}</div>
<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) --> <!-- Withdraw Button for Revenue Card -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100"> <button v-if="metric.label === '累计总收益'" @click="showWithdraw = true"
<h3 class="font-bold text-slate-900 mb-4">待处理事项</h3> 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">
<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')"> </button>
<div class="flex items-center gap-3"> </div>
<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>
<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 --> <!-- Pending Orders (Quick Access) -->
<Dialog v-model:visible="showWithdraw" modal header="收益提现" :style="{ width: '35rem' }"> <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
<div class="space-y-6 pt-2"> <h3 class="font-bold text-slate-900 mb-4">待处理事项</h3>
<div class="flex gap-4">
<div> <div
<label class="block text-sm font-bold text-slate-700 mb-3">提现方式</label> 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"
<div class="grid grid-cols-1 gap-3"> @click="$router.push('/creator/orders')">
<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'"> <div class="flex items-center gap-3">
<input type="radio" v-model="withdrawMethod" value="external" class="hidden"> <div class="w-10 h-10 rounded-full bg-orange-200 text-orange-700 flex items-center justify-center"><i
<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> class="pi pi-refresh"></i></div>
<div class="flex-1"> <div>
<div class="font-bold text-slate-900">提现至银行卡/支付宝</div> <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">需要处理</div>
<div class="text-xs text-orange-600 font-bold flex items-center gap-1" v-else> </div>
<i class="pi pi-exclamation-circle"></i> 未配置收款账户 </div>
<router-link to="/creator/settings" class="underline hover:text-orange-800 ml-1">去配置</router-link> <div class="text-2xl font-bold text-orange-700">2</div>
</div> </div>
</div> <div
<i v-if="withdrawMethod === 'external'" class="pi pi-check-circle text-primary-600 text-xl"></i> 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">
</label> <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>
<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'"> <!-- Withdraw Dialog -->
<input type="radio" v-model="withdrawMethod" value="wallet" class="hidden"> <Dialog v-model:visible="showWithdraw" modal header="收益提现" :style="{ width: '35rem' }">
<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="space-y-6 pt-2">
<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> <div>
<label class="block text-sm font-bold text-slate-700 mb-2">提现金额 (¥)</label> <label class="block text-sm font-bold text-slate-700 mb-3">提现方式</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="grid grid-cols-1 gap-3">
<div class="text-xs text-slate-400 mt-2 flex justify-between"> <label
<span>可提现收益: ¥ 8,920.50</span> class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer hover:border-primary-500 hover:bg-slate-50 transition-all"
<button class="text-primary-600 hover:underline">全部提现</button> :class="withdrawMethod === 'external' ? 'border-primary-500 bg-primary-50 ring-1 ring-primary-500' : 'border-slate-200'">
</div> <input type="radio" v-model="withdrawMethod" value="external" class="hidden">
</div> <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"><i
</div> class="pi pi-credit-card text-xl"></i></div>
<template #footer> <div class="flex-1">
<button @click="showWithdraw = false" class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm font-bold">取消</button> <div class="font-bold text-slate-900">提现至银行卡/支付宝</div>
<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> <div class="text-xs text-slate-500" v-if="hasPayoutAccount">已绑定：招商银行 (8888)</div>
</template> <div class="text-xs text-orange-600 font-bold flex items-center gap-1" v-else>
</Dialog> <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>
<Toast /> <label
</div> 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> </template>
<script setup> <script setup>
import { ref } from 'vue';
import Dialog from 'primevue/dialog'; import Dialog from 'primevue/dialog';
import Toast from 'primevue/toast'; import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast'; import { useToast } from 'primevue/usetoast';
import { ref } from 'vue';
const toast = useToast(); const toast = useToast();
const showWithdraw = ref(false); const showWithdraw = ref(false);
@@ -120,13 +141,13 @@ const withdrawMethod = ref('wallet');
const hasPayoutAccount = ref(false); // Mock state const hasPayoutAccount = ref(false); // Mock state
const metrics = ref([ const metrics = ref([
{ label: '总关注用户', value: '12,548', trend: 1.2, subtext: '昨日 +125' }, { label: '总关注用户', value: '12,548', trend: 1.2, subtext: '昨日 +125' },
{ label: '累计总收益', value: '¥ 8,920.50', trend: 5.4, subtext: '近30天 +2,300' }, { label: '累计总收益', value: '¥ 8,920.50', trend: 5.4, subtext: '近30天 +2,300' },
]); ]);
const handleWithdraw = () => { const handleWithdraw = () => {
showWithdraw.value = false; showWithdraw.value = false;
const msg = withdrawMethod.value === 'wallet' ? '资金已转入您的个人钱包' : '提现申请已提交至银行处理'; const msg = withdrawMethod.value === 'wallet' ? '资金已转入您的个人钱包' : '提现申请已提交至银行处理';
toast.add({ severity: 'success', summary: '提现成功', detail: msg, life: 3000 }); toast.add({ severity: 'success', summary: '提现成功', detail: msg, life: 3000 });
}; };
</script> </script>

138
frontend/portal/src/views/creator/SettingsView.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="max-w-4xl mx-auto p-8"> <div>
<h1 class="text-2xl font-bold text-slate-900 mb-8">频道设置</h1> <h1 class="text-2xl font-bold text-slate-900 mb-8">频道设置</h1>
<div class="space-y-8"> <div class="space-y-8">
@@ -23,9 +23,11 @@
<!-- Avatar & Name --> <!-- Avatar & Name -->
<div class="flex items-start gap-6"> <div class="flex items-start gap-6">
<div class="relative group cursor-pointer flex-shrink-0" @click="triggerUpload('avatar')"> <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"> <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> <i class="pi pi-camera text-white text-2xl"></i>
</div> </div>
</div> </div>
@@ -33,11 +35,15 @@
<div class="flex-1 space-y-4"> <div class="flex-1 space-y-4">
<div> <div>
<label class="block text-sm font-bold text-slate-700 mb-2">频道名称</label> <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>
<div> <div>
<label class="block text-sm font-bold text-slate-700 mb-2">一句话简介</label> <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> </div>
</div> </div>
@@ -45,14 +51,19 @@
<!-- Cover Image (Moved Here) --> <!-- Cover Image (Moved Here) -->
<div> <div>
<label class="block text-sm font-bold text-slate-700 mb-3">频道头图 (Cover)</label> <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')"> <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"> <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> <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> <i class="pi pi-image text-3xl mb-2"></i>
<span class="text-sm font-medium">点击上传 (建议尺寸 1280x320)</span> <span class="text-sm font-medium">点击上传 (建议尺寸 1280x320)</span>
</div> </div>
<!-- Hover Overlay --> <!-- 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"> <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> <span class="text-white font-bold"><i class="pi pi-refresh mr-2"></i>更换封面</span>
</div> </div>
</div> </div>
@@ -61,12 +72,15 @@
<!-- Intro Detail --> <!-- Intro Detail -->
<div> <div>
<label class="block text-sm font-bold text-slate-700 mb-2">详细介绍</label> <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> </div>
<!-- Save Button --> <!-- Save Button -->
<div class="pt-6 border-t border-slate-100 flex justify-end"> <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"> <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> 保存修改 <i class="pi pi-check"></i> 保存修改
</button> </button>
</div> </div>
@@ -77,63 +91,79 @@
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8"> <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8">
<div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-100"> <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> <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"> <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> 添加账户 <i class="pi pi-plus"></i> 添加账户
</button> </button>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Mock Account Card --> <!-- 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
<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> 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>
<div class="font-bold text-slate-900">招商银行</div> <div class="font-bold text-slate-900">招商银行</div>
<div class="text-sm text-slate-500">储蓄卡 (8888)</div> <div class="text-sm text-slate-500">储蓄卡 (8888)</div>
</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> <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>
</div> </div>
</div> </div>
<input type="file" ref="fileInput" class="hidden" @change="handleFileChange"> <input type="file" ref="fileInput" class="hidden" @change="handleFileChange">
<!-- Add Account Dialog --> <!-- Add Account Dialog -->
<Dialog v-model:visible="showAddAccount" modal header="添加收款账户" :style="{ width: '25rem' }"> <Dialog v-model:visible="showAddAccount" modal header="添加收款账户" :style="{ width: '25rem' }">
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<label class="block text-sm font-bold text-slate-700 mb-2">账户类型</label> <label class="block text-sm font-bold text-slate-700 mb-2">账户类型</label>
<div class="flex gap-4"> <div class="flex gap-4">
<label class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50"> <label
<RadioButton v-model="newAccount.type" value="bank" /> class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50">
<span>银行卡</span> <RadioButton v-model="newAccount.type" value="bank" />
</label> <span>银行卡</span>
<label class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50"> </label>
<RadioButton v-model="newAccount.type" value="alipay" /> <label
<span>支付宝</span> class="flex items-center gap-2 cursor-pointer p-2 border border-transparent rounded hover:bg-slate-50">
</label> <RadioButton v-model="newAccount.type" value="alipay" />
</div> <span>支付宝</span>
</div> </label>
</div>
<div v-if="newAccount.type === 'bank'"> </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> <div v-if="newAccount.type === 'bank'">
<label class="block text-sm font-bold text-slate-700 mb-2">{{ newAccount.type === 'bank' ? '银行卡号' : '支付宝账号' }}</label> <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="请输入账号"> <input type="text"
</div> class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500"
placeholder="如：招商银行">
</div>
<div> <div>
<label class="block text-sm font-bold text-slate-700 mb-2">真实姓名</label> <label class="block text-sm font-bold text-slate-700 mb-2">{{ newAccount.type === 'bank' ? '银行卡号' :
<input type="text" class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500" placeholder="需与实名认证一致"> '支付宝账号' }}</label>
</div> <input type="text"
</div> class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500"
<template #footer> placeholder="请输入账号">
<button @click="showAddAccount = false" class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm font-bold cursor-pointer">取消</button> </div>
<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> <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> </Dialog>
<Toast /> <Toast />
@@ -153,10 +183,10 @@ const currentUploadType = ref('');
const showAddAccount = ref(false); const showAddAccount = ref(false);
const newAccount = reactive({ const newAccount = reactive({
type: 'bank', type: 'bank',
name: '', name: '',
account: '', account: '',
realname: '' realname: ''
}); });
const form = reactive({ const form = reactive({
@@ -188,8 +218,8 @@ const handleFileChange = (event) => {
}; };
const handleAddAccount = () => { const handleAddAccount = () => {
showAddAccount.value = false; showAddAccount.value = false;
toast.add({ severity: 'success', summary: '添加成功', detail: '收款账户已添加', life: 3000 }); toast.add({ severity: 'success', summary: '添加成功', detail: '收款账户已添加', life: 3000 });
}; };
const saveSettings = () => { const saveSettings = () => {