feat: 实现创作者频道设置功能及收款账户管理

This commit is contained in:
2026-01-04 19:25:21 +08:00
parent df08e148ce
commit 581cbc3991

View File

@@ -92,12 +92,14 @@
<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"
v-if="payoutAccounts.length === 0"
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>
<span v-else class="text-xs text-slate-400">仅支持一个收款账户删除后可更换</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="grid grid-cols-1 gap-4">
<div v-for="acc in payoutAccounts" :key="acc.id"
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 flex items-center justify-center text-xl"
@@ -145,7 +147,7 @@
<div v-if="newAccount.type === 'bank'">
<label class="block text-sm font-bold text-slate-700 mb-2">银行名称</label>
<input type="text"
<input type="text" v-model="newAccount.name"
class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500"
placeholder="如:招商银行">
</div>
@@ -153,14 +155,14 @@
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">{{ newAccount.type === 'bank' ? '银行卡号' :
'支付宝账号' }}</label>
<input type="text"
<input type="text" v-model="newAccount.account"
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"
<input type="text" v-model="newAccount.realname"
class="w-full h-10 px-3 border border-slate-200 rounded-lg outline-none focus:border-primary-500"
placeholder="需与实名认证一致">
</div>
@@ -218,7 +220,7 @@ const fetchData = async () => {
// Set defaults if empty
if (!form.avatar) form.avatar = 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1';
}
if (accounts) payoutAccounts.value = accounts;
payoutAccounts.value = accounts || [];
} catch (e) {
console.error(e);
}
@@ -263,6 +265,13 @@ const handleFileChange = async (event) => {
};
const handleAddAccount = async () => {
if (payoutAccounts.value.length >= 1) {
toast.add({ severity: 'error', summary: '限制', detail: '仅支持一个收款账户', life: 3000 });
return;
}
if (newAccount.type === 'alipay') {
newAccount.name = '支付宝';
}
if (!newAccount.name || !newAccount.account || !newAccount.realname) {
toast.add({ severity: 'warn', summary: '提示', detail: '请填写完整信息', life: 3000 });
return;