feat: add creator coupons and portal lint
This commit is contained in:
@@ -1,188 +1,3 @@
|
||||
<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">
|
||||
<button
|
||||
class="px-4 py-2 border border-slate-200 rounded-lg text-sm font-bold text-slate-600 hover:bg-slate-50 cursor-pointer">
|
||||
<i class="pi pi-download mr-1"></i> 导出报表
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 mb-6 flex flex-wrap gap-4 items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-bold text-slate-500">状态:</span>
|
||||
<select v-model="filterStatus"
|
||||
class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white cursor-pointer">
|
||||
<option value="all">全部</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="refunding">退款申请中</option>
|
||||
<option value="refunded">已退款</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ml-auto relative w-64">
|
||||
<i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
|
||||
<input type="text" v-model="searchKeyword" @keyup.enter="fetchOrders" placeholder="搜索订单号或买家..."
|
||||
class="w-full h-9 pl-9 pr-4 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Order Table -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
|
||||
<table class="w-full text-left text-sm">
|
||||
<thead class="bg-slate-50 text-slate-500 font-bold border-b border-slate-200">
|
||||
<tr>
|
||||
<th class="px-6 py-4 whitespace-nowrap">订单号</th>
|
||||
<th class="px-6 py-4 w-[30%]">内容信息</th>
|
||||
<th class="px-6 py-4 whitespace-nowrap">买家</th>
|
||||
<th class="px-6 py-4 text-right whitespace-nowrap">实付金额</th>
|
||||
<th class="px-6 py-4 whitespace-nowrap">下单时间</th>
|
||||
<th class="px-6 py-4 whitespace-nowrap">状态</th>
|
||||
<th class="px-6 py-4 text-right whitespace-nowrap">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr v-for="order in filteredOrders" :key="order.id" class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4 font-mono text-slate-600 align-middle">
|
||||
{{ order.id }}
|
||||
</td>
|
||||
<td class="px-6 py-4 align-middle">
|
||||
<div class="flex items-center gap-3">
|
||||
<img :src="order.cover"
|
||||
class="w-16 h-10 object-cover rounded bg-slate-100 flex-shrink-0" />
|
||||
<span class="font-bold text-slate-900 truncate max-w-[240px]" :title="order.title">{{
|
||||
order.title }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 align-middle">
|
||||
<div class="flex items-center gap-2">
|
||||
<img :src="order.buyerAvatar" class="w-8 h-8 rounded-full flex-shrink-0" />
|
||||
<span class="text-slate-700 truncate max-w-[100px]">{{
|
||||
order.buyerName
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right font-bold text-slate-900 align-middle">
|
||||
¥ {{ order.amount }}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-500 whitespace-nowrap align-middle">
|
||||
{{ order.date }}
|
||||
</td>
|
||||
<td class="px-6 py-4 align-middle">
|
||||
<span class="inline-block px-2.5 py-1 rounded text-xs font-bold whitespace-nowrap" :class="statusStyle(order.status).bg + ' ' + statusStyle(order.status).text
|
||||
">
|
||||
{{ statusStyle(order.status).label }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right align-middle whitespace-nowrap">
|
||||
<button @click="viewDetail(order)"
|
||||
class="text-primary-600 hover:text-primary-700 font-medium mr-4 cursor-pointer hover:bg-primary-50 px-2 py-1 rounded transition-colors">
|
||||
详情
|
||||
</button>
|
||||
<button v-if="order.status === 'refunding'" @click="handleRefund(order)"
|
||||
class="text-red-600 hover:text-red-700 font-medium cursor-pointer hover:bg-red-50 px-2 py-1 rounded transition-colors">
|
||||
处理退款
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="filteredOrders.length === 0" class="text-center py-12 text-slate-400">
|
||||
暂无相关订单
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detail Dialog -->
|
||||
<Dialog v-model:visible="detailDialog" modal header="订单详情" :style="{ width: '30rem' }">
|
||||
<div v-if="selectedOrder" class="space-y-6">
|
||||
<div class="flex justify-between items-center pb-4 border-b border-slate-100">
|
||||
<span class="text-sm text-slate-500">订单号</span>
|
||||
<span class="font-mono font-bold">{{ selectedOrder.id }}</span>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<img :src="selectedOrder.cover" class="w-20 h-14 object-cover rounded" />
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-900">{{ selectedOrder.title }}</h3>
|
||||
<p class="text-sm text-slate-500 mt-1">类型: {{ selectedOrder.type }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-slate-50 p-4 rounded-lg space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">买家</span>
|
||||
<span class="font-medium">{{ selectedOrder.buyerName }} (ID: {{ selectedOrder.buyerId }})</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">支付方式</span>
|
||||
<span>微信支付</span>
|
||||
</div>
|
||||
<div class="flex justify-between pt-2 border-t border-slate-200">
|
||||
<span class="font-bold text-slate-900">实付</span>
|
||||
<span class="font-bold text-red-600 text-lg">¥ {{ selectedOrder.amount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedOrder.status === 'refunding'" class="bg-red-50 p-4 rounded-lg border border-red-100">
|
||||
<h4 class="text-red-700 font-bold text-sm mb-2">退款申请信息</h4>
|
||||
<p class="text-sm text-red-600">申请原因：内容无法播放/质量问题</p>
|
||||
<p class="text-sm text-red-600 mt-1">申请说明：视频一直加载不出来。</p>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<button @click="detailDialog = false"
|
||||
class="px-4 py-2 border border-slate-200 rounded text-sm hover:bg-slate-50">
|
||||
关闭
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 border border-primary-200 text-primary-600 rounded text-sm hover:bg-primary-50 ml-2">
|
||||
联系买家
|
||||
</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<!-- Refund Dialog -->
|
||||
<Dialog v-model:visible="refundDialog" modal header="处理退款申请" :style="{ width: '25rem' }">
|
||||
<div class="text-sm text-slate-600 mb-6">
|
||||
您正在处理订单
|
||||
<span class="font-mono font-bold">{{ selectedOrder?.id }}</span> 的退款申请。
|
||||
<br />同意后，金额将原路退回给买家。
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-slate-50" :class="refundAction === 'accept'
|
||||
? 'border-green-500 bg-green-50'
|
||||
: 'border-slate-200'
|
||||
">
|
||||
<RadioButton v-model="refundAction" value="accept" />
|
||||
<span>同意退款</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-slate-50" :class="refundAction === 'reject' ? 'border-red-500 bg-red-50' : 'border-slate-200'
|
||||
">
|
||||
<RadioButton v-model="refundAction" value="reject" />
|
||||
<span>拒绝退款</span>
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="refundAction === 'reject'" class="mt-4">
|
||||
<textarea v-model="refundReason" class="w-full p-2 border border-slate-200 rounded text-sm focus:border-red-500 outline-none"
|
||||
rows="2" placeholder="请输入拒绝理由..."></textarea>
|
||||
</div>
|
||||
<template #footer>
|
||||
<button @click="refundDialog = false" class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm">
|
||||
取消
|
||||
</button>
|
||||
<button @click="confirmRefund"
|
||||
class="px-4 py-2 bg-slate-900 text-white rounded text-sm hover:bg-slate-800">
|
||||
确认处理
|
||||
</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Dialog from "primevue/dialog";
|
||||
import RadioButton from "primevue/radiobutton";
|
||||
@@ -203,29 +18,29 @@ const orders = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const fetchOrders = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
status: filterStatus.value === 'all' ? '' : filterStatus.value,
|
||||
keyword: searchKeyword.value
|
||||
};
|
||||
const res = await creatorApi.listOrders(params);
|
||||
orders.value = (res || []).map(o => ({
|
||||
id: o.id,
|
||||
title: o.title || '未知内容',
|
||||
type: '数字内容',
|
||||
cover: o.cover,
|
||||
buyerName: o.buyer_name,
|
||||
buyerAvatar: o.buyer_avatar,
|
||||
amount: o.amount,
|
||||
date: o.create_time,
|
||||
status: o.status
|
||||
}));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
status: filterStatus.value === "all" ? "" : filterStatus.value,
|
||||
keyword: searchKeyword.value,
|
||||
};
|
||||
const res = await creatorApi.listOrders(params);
|
||||
orders.value = (res || []).map((o) => ({
|
||||
id: o.id,
|
||||
title: o.title || "未知内容",
|
||||
type: "数字内容",
|
||||
cover: o.cover,
|
||||
buyerName: o.buyer_name,
|
||||
buyerAvatar: o.buyer_avatar,
|
||||
amount: o.amount,
|
||||
date: o.create_time,
|
||||
status: o.status,
|
||||
}));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(fetchOrders);
|
||||
@@ -234,42 +49,329 @@ watch(filterStatus, fetchOrders);
|
||||
const filteredOrders = computed(() => orders.value);
|
||||
|
||||
const statusStyle = (status) => {
|
||||
switch (status) {
|
||||
case "paid":
|
||||
case "completed":
|
||||
return { bg: "bg-green-50", text: "text-green-600", label: "已完成" };
|
||||
case "refunding":
|
||||
return { bg: "bg-orange-50", text: "text-orange-600", label: "退款申请中" };
|
||||
case "refunded":
|
||||
return { bg: "bg-slate-100", text: "text-slate-500", label: "已退款" };
|
||||
default:
|
||||
return { bg: "bg-slate-100", text: "text-slate-500", label: "未知" };
|
||||
}
|
||||
switch (status) {
|
||||
case "paid":
|
||||
case "completed":
|
||||
return { bg: "bg-green-50", text: "text-green-600", label: "已完成" };
|
||||
case "refunding":
|
||||
return {
|
||||
bg: "bg-orange-50",
|
||||
text: "text-orange-600",
|
||||
label: "退款申请中",
|
||||
};
|
||||
case "refunded":
|
||||
return { bg: "bg-slate-100", text: "text-slate-500", label: "已退款" };
|
||||
default:
|
||||
return { bg: "bg-slate-100", text: "text-slate-500", label: "未知" };
|
||||
}
|
||||
};
|
||||
|
||||
const viewDetail = (order) => {
|
||||
selectedOrder.value = order;
|
||||
detailDialog.value = true;
|
||||
selectedOrder.value = order;
|
||||
detailDialog.value = true;
|
||||
};
|
||||
|
||||
const handleRefund = (order) => {
|
||||
selectedOrder.value = order;
|
||||
refundAction.value = "accept";
|
||||
refundReason.value = "";
|
||||
refundDialog.value = true;
|
||||
selectedOrder.value = order;
|
||||
refundAction.value = "accept";
|
||||
refundReason.value = "";
|
||||
refundDialog.value = true;
|
||||
};
|
||||
|
||||
const confirmRefund = async () => {
|
||||
try {
|
||||
const res = await creatorApi.refundOrder(selectedOrder.value.id, {
|
||||
action: refundAction.value,
|
||||
reason: refundReason.value
|
||||
});
|
||||
refundDialog.value = false;
|
||||
toast.add({ severity: "success", summary: "处理成功", life: 3000 });
|
||||
fetchOrders();
|
||||
} catch (e) {
|
||||
toast.add({ severity: "error", summary: "处理失败", detail: e.message, life: 3000 });
|
||||
}
|
||||
try {
|
||||
await creatorApi.refundOrder(selectedOrder.value.id, {
|
||||
action: refundAction.value,
|
||||
reason: refundReason.value,
|
||||
});
|
||||
refundDialog.value = false;
|
||||
toast.add({ severity: "success", summary: "处理成功", life: 3000 });
|
||||
fetchOrders();
|
||||
} catch (e) {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: "处理失败",
|
||||
detail: e.message,
|
||||
life: 3000,
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<button
|
||||
class="px-4 py-2 border border-slate-200 rounded-lg text-sm font-bold text-slate-600 hover:bg-slate-50 cursor-pointer"
|
||||
>
|
||||
<i class="pi pi-download mr-1"></i> 导出报表
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div
|
||||
class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 mb-6 flex flex-wrap gap-4 items-center"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-bold text-slate-500">状态:</span>
|
||||
<select
|
||||
v-model="filterStatus"
|
||||
class="h-9 px-3 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none bg-white cursor-pointer"
|
||||
>
|
||||
<option value="all">全部</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="refunding">退款申请中</option>
|
||||
<option value="refunded">已退款</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ml-auto relative w-64">
|
||||
<i
|
||||
class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
|
||||
></i>
|
||||
<input
|
||||
type="text"
|
||||
v-model="searchKeyword"
|
||||
@keyup.enter="fetchOrders"
|
||||
placeholder="搜索订单号或买家..."
|
||||
class="w-full h-9 pl-9 pr-4 rounded border border-slate-200 text-sm focus:border-primary-500 outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Order Table -->
|
||||
<div
|
||||
class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden"
|
||||
>
|
||||
<table class="w-full text-left text-sm">
|
||||
<thead
|
||||
class="bg-slate-50 text-slate-500 font-bold border-b border-slate-200"
|
||||
>
|
||||
<tr>
|
||||
<th class="px-6 py-4 whitespace-nowrap">订单号</th>
|
||||
<th class="px-6 py-4 w-[30%]">内容信息</th>
|
||||
<th class="px-6 py-4 whitespace-nowrap">买家</th>
|
||||
<th class="px-6 py-4 text-right whitespace-nowrap">实付金额</th>
|
||||
<th class="px-6 py-4 whitespace-nowrap">下单时间</th>
|
||||
<th class="px-6 py-4 whitespace-nowrap">状态</th>
|
||||
<th class="px-6 py-4 text-right whitespace-nowrap">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr
|
||||
v-for="order in filteredOrders"
|
||||
:key="order.id"
|
||||
class="hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<td class="px-6 py-4 font-mono text-slate-600 align-middle">
|
||||
{{ order.id }}
|
||||
</td>
|
||||
<td class="px-6 py-4 align-middle">
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
:src="order.cover"
|
||||
class="w-16 h-10 object-cover rounded bg-slate-100 flex-shrink-0"
|
||||
/>
|
||||
<span
|
||||
class="font-bold text-slate-900 truncate max-w-[240px]"
|
||||
:title="order.title"
|
||||
>{{ order.title }}</span
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 align-middle">
|
||||
<div class="flex items-center gap-2">
|
||||
<img
|
||||
:src="order.buyerAvatar"
|
||||
class="w-8 h-8 rounded-full flex-shrink-0"
|
||||
/>
|
||||
<span class="text-slate-700 truncate max-w-[100px]">{{
|
||||
order.buyerName
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="px-6 py-4 text-right font-bold text-slate-900 align-middle"
|
||||
>
|
||||
¥ {{ order.amount }}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-500 whitespace-nowrap align-middle">
|
||||
{{ order.date }}
|
||||
</td>
|
||||
<td class="px-6 py-4 align-middle">
|
||||
<span
|
||||
class="inline-block px-2.5 py-1 rounded text-xs font-bold whitespace-nowrap"
|
||||
:class="
|
||||
statusStyle(order.status).bg +
|
||||
' ' +
|
||||
statusStyle(order.status).text
|
||||
"
|
||||
>
|
||||
{{ statusStyle(order.status).label }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right align-middle whitespace-nowrap">
|
||||
<button
|
||||
@click="viewDetail(order)"
|
||||
class="text-primary-600 hover:text-primary-700 font-medium mr-4 cursor-pointer hover:bg-primary-50 px-2 py-1 rounded transition-colors"
|
||||
>
|
||||
详情
|
||||
</button>
|
||||
<button
|
||||
v-if="order.status === 'refunding'"
|
||||
@click="handleRefund(order)"
|
||||
class="text-red-600 hover:text-red-700 font-medium cursor-pointer hover:bg-red-50 px-2 py-1 rounded transition-colors"
|
||||
>
|
||||
处理退款
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div
|
||||
v-if="filteredOrders.length === 0"
|
||||
class="text-center py-12 text-slate-400"
|
||||
>
|
||||
暂无相关订单
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detail Dialog -->
|
||||
<Dialog
|
||||
v-model:visible="detailDialog"
|
||||
modal
|
||||
header="订单详情"
|
||||
:style="{ width: '30rem' }"
|
||||
>
|
||||
<div v-if="selectedOrder" class="space-y-6">
|
||||
<div
|
||||
class="flex justify-between items-center pb-4 border-b border-slate-100"
|
||||
>
|
||||
<span class="text-sm text-slate-500">订单号</span>
|
||||
<span class="font-mono font-bold">{{ selectedOrder.id }}</span>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<img
|
||||
:src="selectedOrder.cover"
|
||||
class="w-20 h-14 object-cover rounded"
|
||||
/>
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-900">{{ selectedOrder.title }}</h3>
|
||||
<p class="text-sm text-slate-500 mt-1">
|
||||
类型: {{ selectedOrder.type }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-slate-50 p-4 rounded-lg space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">买家</span>
|
||||
<span class="font-medium"
|
||||
>{{ selectedOrder.buyerName }} (ID:
|
||||
{{ selectedOrder.buyerId }})</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">支付方式</span>
|
||||
<span>微信支付</span>
|
||||
</div>
|
||||
<div class="flex justify-between pt-2 border-t border-slate-200">
|
||||
<span class="font-bold text-slate-900">实付</span>
|
||||
<span class="font-bold text-red-600 text-lg"
|
||||
>¥ {{ selectedOrder.amount }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="selectedOrder.status === 'refunding'"
|
||||
class="bg-red-50 p-4 rounded-lg border border-red-100"
|
||||
>
|
||||
<h4 class="text-red-700 font-bold text-sm mb-2">退款申请信息</h4>
|
||||
<p class="text-sm text-red-600">申请原因：内容无法播放/质量问题</p>
|
||||
<p class="text-sm text-red-600 mt-1">
|
||||
申请说明：视频一直加载不出来。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<button
|
||||
@click="detailDialog = false"
|
||||
class="px-4 py-2 border border-slate-200 rounded text-sm hover:bg-slate-50"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 border border-primary-200 text-primary-600 rounded text-sm hover:bg-primary-50 ml-2"
|
||||
>
|
||||
联系买家
|
||||
</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<!-- Refund Dialog -->
|
||||
<Dialog
|
||||
v-model:visible="refundDialog"
|
||||
modal
|
||||
header="处理退款申请"
|
||||
:style="{ width: '25rem' }"
|
||||
>
|
||||
<div class="text-sm text-slate-600 mb-6">
|
||||
您正在处理订单
|
||||
<span class="font-mono font-bold">{{ selectedOrder?.id }}</span>
|
||||
的退款申请。 <br />同意后，金额将原路退回给买家。
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<label
|
||||
class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-slate-50"
|
||||
:class="
|
||||
refundAction === 'accept'
|
||||
? 'border-green-500 bg-green-50'
|
||||
: 'border-slate-200'
|
||||
"
|
||||
>
|
||||
<RadioButton v-model="refundAction" value="accept" />
|
||||
<span>同意退款</span>
|
||||
</label>
|
||||
<label
|
||||
class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-slate-50"
|
||||
:class="
|
||||
refundAction === 'reject'
|
||||
? 'border-red-500 bg-red-50'
|
||||
: 'border-slate-200'
|
||||
"
|
||||
>
|
||||
<RadioButton v-model="refundAction" value="reject" />
|
||||
<span>拒绝退款</span>
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="refundAction === 'reject'" class="mt-4">
|
||||
<textarea
|
||||
v-model="refundReason"
|
||||
class="w-full p-2 border border-slate-200 rounded text-sm focus:border-red-500 outline-none"
|
||||
rows="2"
|
||||
placeholder="请输入拒绝理由..."
|
||||
></textarea>
|
||||
</div>
|
||||
<template #footer>
|
||||
<button
|
||||
@click="refundDialog = false"
|
||||
class="px-4 py-2 text-slate-500 hover:text-slate-700 text-sm"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
@click="confirmRefund"
|
||||
class="px-4 py-2 bg-slate-900 text-white rounded text-sm hover:bg-slate-800"
|
||||
>
|
||||
确认处理
|
||||
</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user