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

feat: 添加媒体资产文件名支持，优化上传和内容获取逻辑

Browse Source
This commit is contained in:
Rogee
2026-01-04 19:09:34 +08:00
parent 5496c776df
commit df08e148ce
3 changed files with 139 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -98,19 +98,26 @@
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Mock Account Card -->
<div
<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 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 class="w-10 h-10 rounded-full flex items-center justify-center text-xl"
:class="acc.type === 'alipay' ? 'bg-blue-50 text-blue-600' : 'bg-red-50 text-red-600'">
<i class="pi" :class="acc.type === 'alipay' ? 'pi-mobile' : 'pi-briefcase'"></i>
</div>
<button
<div>
<div class="font-bold text-slate-900">{{ acc.name }}</div>
<div class="text-sm text-slate-500">{{ acc.type === 'alipay' ? '支付宝' : '银行卡' }} ({{ acc.account.slice(-4) }})</div>
</div>
<button @click="removeAccount(acc.id)"
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>
<!-- Empty State -->
<div v-if="payoutAccounts.length === 0" class="col-span-full py-8 text-center text-slate-400 bg-slate-50 rounded-xl border border-dashed border-slate-200">
<i class="pi pi-wallet text-2xl mb-2"></i>
<p>暂无收款账户，请添加</p>
</div>
</div>
</div>
</div>
@@ -175,12 +182,15 @@ 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';
import { reactive, ref, onMounted } from 'vue';
import { creatorApi } from '../../api/creator';
import { commonApi } from '../../api/common';
const toast = useToast();
const fileInput = ref(null);
const currentUploadType = ref('');
const showAddAccount = ref(false);
const payoutAccounts = ref([]);
const newAccount = reactive({
type: 'bank',
@@ -190,43 +200,106 @@ const newAccount = reactive({
});
const form = reactive({
name: '梅派传人小林',
bio: '专注京剧程派艺术传承与推广',
name: '',
bio: '',
description: '',
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1',
cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80'
avatar: '',
cover: ''
});
const fetchData = async () => {
try {
const [settings, accounts] = await Promise.all([
creatorApi.getSettings(),
creatorApi.listPayoutAccounts()
]);
if (settings) {
Object.assign(form, settings);
// Set defaults if empty
if (!form.avatar) form.avatar = 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1';
}
if (accounts) payoutAccounts.value = accounts;
} catch (e) {
console.error(e);
}
};
onMounted(fetchData);
const triggerUpload = (type) => {
currentUploadType.value = type;
fileInput.value.click();
};
const handleFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
if (currentUploadType.value === 'avatar') {
form.avatar = e.target.result;
} else {
form.cover = e.target.result;
}
};
reader.readAsDataURL(file);
if (fileInput.value) {
fileInput.value.accept = 'image/*';
fileInput.value.click();
}
};
const handleAddAccount = () => {
showAddAccount.value = false;
toast.add({ severity: 'success', summary: '添加成功', detail: '收款账户已添加', life: 3000 });
const handleFileChange = async (event) => {
const file = event.target.files[0];
if (!file) return;
try {
toast.add({ severity: 'info', summary: '正在上传...', life: 2000 });
const task = commonApi.uploadWithProgress(file, 'image');
const res = await task.promise;
console.log('Upload response:', res);
if (res && res.url) {
if (currentUploadType.value === 'avatar') {
form.avatar = res.url;
} else {
form.cover = res.url;
}
toast.add({ severity: 'success', summary: '上传成功', life: 2000 });
} else {
console.error('Invalid upload response:', res);
toast.add({ severity: 'error', summary: '上传失败', detail: '服务器返回无效数据', life: 3000 });
}
} catch (e) {
console.error(e);
toast.add({ severity: 'error', summary: '上传失败', detail: e.message, life: 3000 });
}
event.target.value = '';
};
const saveSettings = () => {
const handleAddAccount = async () => {
if (!newAccount.name || !newAccount.account || !newAccount.realname) {
toast.add({ severity: 'warn', summary: '提示', detail: '请填写完整信息', life: 3000 });
return;
}
try {
await creatorApi.addPayoutAccount(newAccount);
showAddAccount.value = false;
toast.add({ severity: 'success', summary: '添加成功', detail: '收款账户已添加', life: 3000 });
fetchData();
// Reset
newAccount.name = ''; newAccount.account = ''; newAccount.realname = '';
} catch (e) {
toast.add({ severity: 'error', summary: '添加失败', detail: e.message, life: 3000 });
}
};
const removeAccount = async (id) => {
if (!confirm('确定要删除此账户吗？')) return;
try {
await creatorApi.removePayoutAccount(id);
toast.add({ severity: 'success', summary: '删除成功', life: 3000 });
fetchData();
} catch (e) {
toast.add({ severity: 'error', summary: '删除失败', detail: e.message, life: 3000 });
}
};
const saveSettings = async () => {
if (!form.name) {
toast.add({ severity: 'error', summary: '错误', detail: '频道名称不能为空', life: 3000 });
return;
}
toast.add({ severity: 'success', summary: '保存成功', detail: '部分信息正在审核中', life: 3000 });
try {
await creatorApi.updateSettings(form);
toast.add({ severity: 'success', summary: '保存成功', detail: '设置已更新', life: 3000 });
} catch (e) {
toast.add({ severity: 'error', summary: '保存失败', detail: e.message, life: 3000 });
}
};
</script>