feat: remove shop feature (Phase 2)
Delete all shop domain classes, controllers, schema builders, templates, JS/CSS, admin SPA pages, and shop-only payment classes (Shipping, AfterSale, Discount). Remove shop-only DB table definitions (product_variant, after_sale, order_shipping, card_key) from migrator and add their DROP to uninstall.php. Clean up shared files: - Remove aksrt_product CPT + taxonomies from Setup.php - Remove shop rewrite rules/query vars/template redirect from SetupPart2.php - Remove shop widget areas from SetupPart1.php - Remove shop enqueues from ScriptsPart1b.php - Remove sepakerator-aksrt-shop from SetupPart2.php - Remove get_shop_settings facade (delete ForumShop.php, clean DomainGroups.php) - Remove ORDER_PRODUCT_SHOP constant from DomainModel.php - Remove Shop::class fallback branches from UserOrders.php, OrderCenterRest.php - Remove shipping/after-sale branches from OrderRepositoryAdmin.php, PayMenus.php, PayOrders.php - Remove shop product widgets from widgets-register.php - Remove cart page from template-registry.php, routing.php, ScriptsPart2.php - Remove cart UI from sidebar-nav.php, profile-orders.php, sidebar-orders.php - Clean up order-center.js (remove rebuy/cartUrl/receipt/after-sale handlers) - Remove aksrt_get_cart_page_url/product_page/product_edit from transactions.php - Clean up aksrt_product_cat references in Coupon.php, PayCoupons.php Shared payment/order/credits/content-pay stack fully retained.
This commit is contained in:
kate522 committed
1 parent
2bbd7c01a3
commit
1d2505356e
103 files changed
+46
-21267
No files matched your search
@@ -1,304 +0,0 @@
|
||||
<template>
|
||||
<div class="aksrt-page-container">
|
||||
<PageHeader title="售后工作台" desc="把退款、换货、维修放在订单语境里处理，减少运营跳转。" />
|
||||
|
||||
<div class="aksrt-after-sale__stats">
|
||||
<div v-for="item in statCards" :key="item.key" class="aksrt-after-sale__stat-card">
|
||||
<div class="aksrt-after-sale__stat-icon" :style="{ background: item.color }">
|
||||
<i :class="item.icon"></i>
|
||||
</div>
|
||||
<div class="aksrt-after-sale__stat-info">
|
||||
<div class="aksrt-after-sale__stat-value">{{ stats[item.key] || 0 }}</div>
|
||||
<div class="aksrt-after-sale__stat-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-card size="small" class="aksrt-after-sale__section">
|
||||
<n-space wrap>
|
||||
<n-select v-model:value="filters.status" :options="statusOptions" clearable placeholder="售后状态" style="width: 160px" />
|
||||
<n-select v-model:value="filters.stage" :options="stageOptions" clearable placeholder="处理阶段" style="width: 160px" />
|
||||
<n-select v-model:value="filters.type" :options="typeOptions" clearable placeholder="售后类型" style="width: 160px" />
|
||||
<n-input v-model:value="filters.order_number" clearable placeholder="订单号" style="width: 180px" @keyup.enter="loadData(1)" />
|
||||
<n-input v-model:value="filters.date_from" type="date" style="width: 160px" />
|
||||
<n-input v-model:value="filters.date_to" type="date" style="width: 160px" />
|
||||
<n-button type="primary" @click="loadData(1)">查询</n-button>
|
||||
<n-button @click="resetFilters">重置</n-button>
|
||||
</n-space>
|
||||
|
||||
<div class="aksrt-after-sale__toolbar">
|
||||
<n-space>
|
||||
<n-button type="primary" @click="showCreateModal = true">新建售后</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</n-card>
|
||||
|
||||
<n-card size="small" class="aksrt-after-sale__section">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="items"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
@update:page="handlePageChange"
|
||||
/>
|
||||
</n-card>
|
||||
|
||||
<AfterSaleDetailDrawer
|
||||
v-model:show="detailVisible"
|
||||
:after-sale-id="detailId"
|
||||
:status-options="detailStatusOptions"
|
||||
@updated="loadData(page)"
|
||||
/>
|
||||
|
||||
<div v-if="showCreateModal" class="aksrt-modal-overlay" @click.self="showCreateModal = false">
|
||||
<div class="aksrt-modal aksrt-after-sale__modal">
|
||||
<h3>新建售后工单</h3>
|
||||
<div class="aksrt-form-group">
|
||||
<label>订单号</label>
|
||||
<input v-model="createForm.order_number" type="text" class="aksrt-input" placeholder="输入订单号">
|
||||
</div>
|
||||
<div class="aksrt-form-group">
|
||||
<label>售后类型</label>
|
||||
<select v-model="createForm.type" class="aksrt-select">
|
||||
<option v-for="item in typeOptions.filter((item) => item.value)" :key="item.value" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="aksrt-form-group">
|
||||
<label>金额</label>
|
||||
<input v-model.number="createForm.amount" type="number" step="0.01" class="aksrt-input" placeholder="0.00">
|
||||
</div>
|
||||
<div class="aksrt-form-group">
|
||||
<label>原因</label>
|
||||
<textarea v-model="createForm.reason" class="aksrt-textarea" rows="3" placeholder="售后原因"></textarea>
|
||||
</div>
|
||||
<div class="aksrt-form-group">
|
||||
<label>补充备注</label>
|
||||
<textarea v-model="createForm.note" class="aksrt-textarea" rows="3" placeholder="补充说明"></textarea>
|
||||
</div>
|
||||
<div class="aksrt-modal__actions">
|
||||
<button class="aksrt-button" @click="showCreateModal = false">取消</button>
|
||||
<button class="aksrt-button aksrt-button--primary" :disabled="creating" @click="submitCreate">
|
||||
{{ creating ? '提交中...' : '提交' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, h, onMounted, reactive, ref } from 'vue'
|
||||
import { NButton, NTag, useMessage } from 'naive-ui'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import api from '@/api/index.js'
|
||||
import AfterSaleDetailDrawer from './components/AfterSaleDetailDrawer.vue'
|
||||
|
||||
const message = useMessage()
|
||||
const loading = ref(false)
|
||||
const page = ref(1)
|
||||
const items = ref([])
|
||||
const stats = ref({})
|
||||
const detailVisible = ref(false)
|
||||
const detailId = ref(null)
|
||||
const statusOptions = ref([])
|
||||
const stageOptions = ref([])
|
||||
const typeOptions = ref([])
|
||||
const showCreateModal = ref(false)
|
||||
const creating = ref(false)
|
||||
|
||||
const filters = reactive({
|
||||
status: null,
|
||||
stage: null,
|
||||
type: null,
|
||||
order_number: '',
|
||||
date_from: '',
|
||||
date_to: '',
|
||||
})
|
||||
|
||||
const createForm = reactive({
|
||||
order_number: '',
|
||||
type: 'refund',
|
||||
amount: 0,
|
||||
reason: '',
|
||||
note: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
itemCount: 0,
|
||||
})
|
||||
|
||||
const statCards = [
|
||||
{ key: 'pending', label: '待处理', icon: 'fas fa-clock', color: '#f59e0b' },
|
||||
{ key: 'processing', label: '处理中', icon: 'fas fa-spinner', color: '#2563eb' },
|
||||
{ key: 'approved', label: '已通过', icon: 'fas fa-check', color: '#16a34a' },
|
||||
{ key: 'rejected', label: '已拒绝', icon: 'fas fa-times', color: '#dc2626' },
|
||||
{ key: 'total', label: '总数', icon: 'fas fa-layer-group', color: '#7c3aed' },
|
||||
]
|
||||
|
||||
const detailStatusOptions = computed(() => statusOptions.value.filter((item) => item.value))
|
||||
|
||||
const columns = [
|
||||
{ title: '订单号', key: 'order_number', width: 170, render: (row) => h('code', row.order_number) },
|
||||
{ title: '售后类型', key: 'type_label', width: 110 },
|
||||
{ title: '阶段', key: 'stage', width: 120, render: (row) => row.stage?.label || '-' },
|
||||
{ title: '物流联动', key: 'shipping_link', width: 170, render: (row) => row.order_context?.shipping?.latest?.status_label || row.order_context?.shipping?.latest?.status || '-' },
|
||||
{ title: '申请人', key: 'applicant', width: 120, render: (row) => row.applicant?.display_name || '-' },
|
||||
{ title: '金额', key: 'amount', width: 110, render: (row) => `¥${Number(row.amount || 0).toFixed(2)}` },
|
||||
{ title: '原因', key: 'reason', ellipsis: { tooltip: true } },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render: (row) => h(NTag, { size: 'small', type: resolveTagType(row.status) }, () => row.status_label || row.status),
|
||||
},
|
||||
{ title: '创建时间', key: 'created_at', width: 160 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 120,
|
||||
render: (row) => h(NButton, { size: 'small', quaternary: true, type: 'info', onClick: () => openDetail(row) }, () => '详情'),
|
||||
},
|
||||
]
|
||||
|
||||
function resolveTagType(status) {
|
||||
if (status === 'approved' || status === 'completed') return 'success'
|
||||
if (status === 'processing') return 'info'
|
||||
if (status === 'rejected' || status === 'cancelled') return 'error'
|
||||
return 'warning'
|
||||
}
|
||||
|
||||
async function loadData(nextPage = 1) {
|
||||
loading.value = true
|
||||
page.value = nextPage
|
||||
pagination.page = nextPage
|
||||
|
||||
try {
|
||||
const res = await api.request('/shop/after-sale', {
|
||||
params: {
|
||||
page: nextPage,
|
||||
per_page: pagination.pageSize,
|
||||
status: filters.status || '',
|
||||
stage: filters.stage || '',
|
||||
type: filters.type || '',
|
||||
order_number: filters.order_number || '',
|
||||
date_from: filters.date_from || '',
|
||||
date_to: filters.date_to || '',
|
||||
},
|
||||
})
|
||||
|
||||
const data = res?.data || {}
|
||||
items.value = data.items || []
|
||||
stats.value = data.stats || {}
|
||||
pagination.itemCount = data.total || 0
|
||||
statusOptions.value = [{ label: '全部状态', value: null }, ...(data.options?.status || [])]
|
||||
stageOptions.value = [{ label: '全部阶段', value: null }, ...(data.options?.stage || [])]
|
||||
typeOptions.value = [{ label: '全部类型', value: null }, ...(data.options?.type || [])]
|
||||
} catch (error) {
|
||||
message.error(error?.message || '加载售后数据失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handlePageChange(nextPage) {
|
||||
loadData(nextPage)
|
||||
}
|
||||
|
||||
function openDetail(row) {
|
||||
detailId.value = row.id
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.status = null
|
||||
filters.stage = null
|
||||
filters.type = null
|
||||
filters.order_number = ''
|
||||
filters.date_from = ''
|
||||
filters.date_to = ''
|
||||
loadData(1)
|
||||
}
|
||||
|
||||
async function submitCreate() {
|
||||
if (!createForm.order_number || !createForm.reason) {
|
||||
message.warning('请填写订单号和售后原因')
|
||||
return
|
||||
}
|
||||
|
||||
creating.value = true
|
||||
try {
|
||||
await api.request('/shop/after-sale', {
|
||||
method: 'POST',
|
||||
data: { ...createForm },
|
||||
})
|
||||
message.success('售后工单已创建')
|
||||
showCreateModal.value = false
|
||||
createForm.order_number = ''
|
||||
createForm.type = 'refund'
|
||||
createForm.amount = 0
|
||||
createForm.reason = ''
|
||||
createForm.note = ''
|
||||
loadData(1)
|
||||
} catch (error) {
|
||||
message.error(error?.message || '创建售后工单失败')
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => loadData(1))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-after-sale__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.aksrt-after-sale__stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.aksrt-after-sale__stat-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-after-sale__stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.aksrt-after-sale__stat-label {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.aksrt-after-sale__section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.aksrt-after-sale__toolbar {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.aksrt-after-sale__modal {
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
}
|
||||
</style>
|
||||
@@ -1,215 +0,0 @@
|
||||
<template>
|
||||
<div class="aksrt-page-container">
|
||||
<PageHeader title="优惠券管理" desc="创建和管理优惠券，支持百分比和固定金额两种类型。" />
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<n-card size="small" class="aksrt-shop-coupons__section">
|
||||
<n-space justify="space-between">
|
||||
<n-space>
|
||||
<n-input v-model:value="search" placeholder="搜索优惠码" clearable style="width:200px;" @clear="loadCoupons" @keyup.enter="loadCoupons">
|
||||
<template #prefix><FaIcon icon="fas fa-search" :size="12" /></template>
|
||||
</n-input>
|
||||
<n-select v-model:value="statusFilter" :options="statusOptions" placeholder="状态" clearable style="width:120px;" @update:value="loadCoupons" />
|
||||
</n-space>
|
||||
<n-button type="primary" @click="showCreate = true">
|
||||
<template #icon><FaIcon icon="fas fa-plus" :size="12" /></template>
|
||||
新增优惠券
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<n-card size="small" class="aksrt-shop-coupons__section">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="coupons"
|
||||
:loading="loading"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
:pagination="pagination"
|
||||
@update:page="handlePageChange"
|
||||
/>
|
||||
</n-card>
|
||||
|
||||
<!-- 创建弹窗 -->
|
||||
<n-modal :show="showCreate" @update:show="showCreate = $event" preset="card" title="新增优惠券" style="width:480px;" closable>
|
||||
<n-form ref="formRef" :model="form" :rules="rules" label-placement="top">
|
||||
<n-form-item label="优惠码" path="code">
|
||||
<n-input v-model:value="form.code" placeholder="如 SAVE20" />
|
||||
</n-form-item>
|
||||
<n-form-item label="类型" path="type">
|
||||
<n-select v-model:value="form.type" :options="typeOptions" />
|
||||
</n-form-item>
|
||||
<n-form-item :label="form.type === 'percent' ? '折扣比例 (%)' : '减免金额 (元)'" path="value">
|
||||
<n-input-number v-model:value="form.value" :min="0" :max="form.type === 'percent' ? 100 : 99999" style="width:100%;" />
|
||||
</n-form-item>
|
||||
<n-form-item label="最低消费 (元)">
|
||||
<n-input-number v-model:value="form.min_amount" :min="0" style="width:100%;" />
|
||||
</n-form-item>
|
||||
<n-form-item label="使用次数上限">
|
||||
<n-input-number v-model:value="form.usage_limit" :min="0" style="width:100%;" />
|
||||
<template #feedback>0 表示不限制</template>
|
||||
</n-form-item>
|
||||
<n-form-item label="过期时间">
|
||||
<n-input v-model:value="form.expires_at" type="datetime-local" />
|
||||
<template #feedback>留空表示永不过期</template>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showCreate = false">取消</n-button>
|
||||
<n-button type="primary" :loading="saving" @click="handleCreate">创建</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, h } from 'vue'
|
||||
import { NTag, NButton, useMessage, useDialog } from 'naive-ui'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import FaIcon from '@/components/form/FaIcon.vue'
|
||||
import api from '@/api/index.js'
|
||||
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const coupons = ref([])
|
||||
const search = ref('')
|
||||
const statusFilter = ref(null)
|
||||
const showCreate = ref(false)
|
||||
const formRef = ref(null)
|
||||
|
||||
const form = reactive({
|
||||
code: '',
|
||||
type: 'fixed',
|
||||
value: 10,
|
||||
min_amount: 0,
|
||||
usage_limit: 0,
|
||||
expires_at: '',
|
||||
})
|
||||
|
||||
const rules = {
|
||||
code: { required: true, message: '请输入优惠码', trigger: 'blur' },
|
||||
value: { type: 'number', required: true, message: '请输入数值', trigger: 'blur' },
|
||||
}
|
||||
|
||||
const statusOptions = [
|
||||
{ label: '有效', value: 'active' },
|
||||
{ label: '已禁用', value: 'disabled' },
|
||||
]
|
||||
|
||||
const typeOptions = [
|
||||
{ label: '固定金额', value: 'fixed' },
|
||||
{ label: '百分比折扣', value: 'percent' },
|
||||
]
|
||||
|
||||
const pagination = reactive({ page: 1, pageSize: 20, itemCount: 0, showSizePicker: true, pageSizes: [10, 20, 50] })
|
||||
|
||||
const columns = [
|
||||
{ title: '优惠码', key: 'code', width: 140 },
|
||||
{
|
||||
title: '类型',
|
||||
key: 'type',
|
||||
width: 100,
|
||||
render: (row) => h(NTag, { size: 'small', type: row.type === 'percent' ? 'info' : 'success' }, () => row.type === 'percent' ? `${row.value}%` : `¥${row.value}`),
|
||||
},
|
||||
{ title: '最低消费', key: 'min_amount', width: 100, render: (row) => row.min_amount > 0 ? `¥${row.min_amount}` : '—' },
|
||||
{ title: '已用/上限', key: 'usage', width: 100, render: (row) => `${row.used_count}/${row.usage_limit || '∞'}` },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 80,
|
||||
render: (row) => h(NTag, { size: 'small', type: row.status === 'active' ? 'success' : 'default' }, () => row.status === 'active' ? '有效' : '已禁用'),
|
||||
},
|
||||
{ title: '过期时间', key: 'expires_at', width: 160, render: (row) => row.expires_at || '永不过期' },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 100,
|
||||
render: (row) => {
|
||||
if (row.status !== 'active') return h('span', { style: 'color:#aaa;font-size:12px;' }, '—')
|
||||
return h(NButton, { size: 'tiny', quaternary: true, type: 'error', onClick: () => handleDisable(row) }, () => '禁用')
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
async function loadCoupons() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: String(pagination.page),
|
||||
per_page: String(pagination.pageSize),
|
||||
})
|
||||
if (search.value) params.set('search', search.value)
|
||||
if (statusFilter.value) params.set('status', statusFilter.value)
|
||||
|
||||
const res = await api.request('/shop/coupons?' + params.toString())
|
||||
if (res?.data) {
|
||||
coupons.value = res.data.items || []
|
||||
pagination.itemCount = res.data.total || 0
|
||||
}
|
||||
} catch {
|
||||
// endpoint may not exist yet
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handlePageChange(page) {
|
||||
pagination.page = page
|
||||
loadCoupons()
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
try {
|
||||
await formRef.value?.validate()
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
await api.request('/shop/coupons', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ ...form }),
|
||||
})
|
||||
message.success('优惠券已创建')
|
||||
showCreate.value = false
|
||||
loadCoupons()
|
||||
} catch {
|
||||
message.error('创建失败')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleDisable(row) {
|
||||
dialog.warning({
|
||||
title: '确认禁用',
|
||||
content: `确定要禁用优惠码「${row.code}」吗？`,
|
||||
positiveText: '禁用',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
try {
|
||||
await api.request(`/shop/coupons/${row.id}/disable`, { method: 'POST' })
|
||||
message.success('优惠券已禁用')
|
||||
loadCoupons()
|
||||
} catch {
|
||||
message.error('操作失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(loadCoupons)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-shop-coupons__section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,180 +0,0 @@
|
||||
<template>
|
||||
<div class="aksrt-page-container">
|
||||
<PageHeader title="商城&商品" desc="商品管理、订单系统、库存管理等电商功能。" />
|
||||
|
||||
<div class="aksrt-shop-dashboard">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="aksrt-shop-dashboard__stats">
|
||||
<div class="aksrt-shop-stat-card">
|
||||
<div class="aksrt-shop-stat-card__icon"><i class="fas fa-box"></i></div>
|
||||
<div class="aksrt-shop-stat-card__info">
|
||||
<span class="aksrt-shop-stat-card__value">{{ overview.product_count }}</span>
|
||||
<span class="aksrt-shop-stat-card__label">商品数量</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aksrt-shop-stat-card">
|
||||
<div class="aksrt-shop-stat-card__icon"><i class="fas fa-file-invoice"></i></div>
|
||||
<div class="aksrt-shop-stat-card__info">
|
||||
<span class="aksrt-shop-stat-card__value">{{ overview.order_count }}</span>
|
||||
<span class="aksrt-shop-stat-card__label">订单数量</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aksrt-shop-stat-card">
|
||||
<div class="aksrt-shop-stat-card__icon"><i class="fas fa-coins"></i></div>
|
||||
<div class="aksrt-shop-stat-card__info">
|
||||
<span class="aksrt-shop-stat-card__value">{{ revenueDisplay }}</span>
|
||||
<span class="aksrt-shop-stat-card__label">累计收入 (元)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aksrt-shop-stat-card">
|
||||
<div class="aksrt-shop-stat-card__icon"><i class="fas fa-clock"></i></div>
|
||||
<div class="aksrt-shop-stat-card__info">
|
||||
<span class="aksrt-shop-stat-card__value">{{ overview.order_pending }}</span>
|
||||
<span class="aksrt-shop-stat-card__label">待处理订单</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近商品 -->
|
||||
<n-card class="aksrt-section-card" title="最近商品">
|
||||
<n-data-table
|
||||
v-if="products.length"
|
||||
:columns="productColumns"
|
||||
:data="products"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
/>
|
||||
<n-empty v-else description="暂无商品" />
|
||||
</n-card>
|
||||
|
||||
<!-- 最近订单 -->
|
||||
<n-card class="aksrt-section-card" title="最近订单" style="margin-top:16px;">
|
||||
<n-data-table
|
||||
v-if="orders.length"
|
||||
:columns="orderColumns"
|
||||
:data="orders"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
/>
|
||||
<n-empty v-else description="暂无订单" />
|
||||
</n-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, h } from 'vue'
|
||||
import { NTag } from 'naive-ui'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import api from '@/api/index.js'
|
||||
|
||||
const overview = ref({ product_count: 0, order_count: 0, order_pending: 0, revenue_total: 0 })
|
||||
const products = ref([])
|
||||
const orders = ref([])
|
||||
|
||||
const revenueDisplay = computed(() => (overview.value.revenue_total || 0).toFixed(2))
|
||||
|
||||
const statusMap = {
|
||||
created: { label: '已创建', type: 'default' },
|
||||
pending: { label: '待支付', type: 'warning' },
|
||||
paid: { label: '已支付', type: 'success' },
|
||||
delivered: { label: '已发货', type: 'info' },
|
||||
completed: { label: '已完成', type: 'success' },
|
||||
cancelled: { label: '已取消', type: 'default' },
|
||||
expired: { label: '已过期', type: 'default' },
|
||||
refunding: { label: '退款中', type: 'warning' },
|
||||
refunded: { label: '已退款', type: 'error' },
|
||||
}
|
||||
|
||||
const productColumns = [
|
||||
{ title: '商品名称', key: 'title', ellipsis: { tooltip: true } },
|
||||
{ title: '价格', key: 'price', width: 100, render: (row) => '¥' + (row.price || 0).toFixed(2) },
|
||||
{ title: '库存', key: 'stock', width: 80 },
|
||||
{ title: '销量', key: 'sales', width: 80 },
|
||||
{ title: '创建时间', key: 'created', width: 160 },
|
||||
]
|
||||
|
||||
const orderColumns = [
|
||||
{ title: '订单号', key: 'order_number', width: 180, ellipsis: { tooltip: true } },
|
||||
{ title: '产品类型', key: 'product_type', width: 100 },
|
||||
{ title: '金额', key: 'amount', width: 100, render: (row) => '¥' + (row.amount || 0).toFixed(2) },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render: (row) => {
|
||||
const s = statusMap[row.status] || { label: row.status, type: 'default' }
|
||||
return h(NTag, { size: 'small', type: s.type }, () => s.label)
|
||||
},
|
||||
},
|
||||
{ title: '创建时间', key: 'created_at', width: 160 },
|
||||
]
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const [overviewRes, productsRes, ordersRes] = await Promise.all([
|
||||
api.request('/shop/overview'),
|
||||
api.request('/shop/products?per_page=5'),
|
||||
api.request('/shop/orders?per_page=5'),
|
||||
])
|
||||
if (overviewRes?.success && overviewRes.data) {
|
||||
overview.value = { ...overview.value, ...overviewRes.data }
|
||||
}
|
||||
if (productsRes?.success && productsRes.data) {
|
||||
products.value = productsRes.data.items || []
|
||||
}
|
||||
if (ordersRes?.success && ordersRes.data) {
|
||||
orders.value = ordersRes.data.items || []
|
||||
}
|
||||
} catch {
|
||||
// endpoints may not be available yet
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-shop-dashboard__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.aksrt-shop-stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.aksrt-shop-stat-card__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: #f0f5ff;
|
||||
color: #1890ff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.aksrt-shop-stat-card__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.aksrt-shop-stat-card__value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.aksrt-shop-stat-card__label {
|
||||
font-size: 13px;
|
||||
color: #7a7f8a;
|
||||
}
|
||||
</style>
|
||||
@@ -1,173 +0,0 @@
|
||||
<template>
|
||||
<div class="aksrt-page-container">
|
||||
<PageHeader title="订单管理" desc="查看和管理所有交易订单。" />
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<n-card size="small" class="aksrt-shop__section">
|
||||
<n-space>
|
||||
<n-input v-model:value="search" placeholder="搜索订单号" clearable style="width: 200px;" @clear="loadOrders" @keyup.enter="loadOrders">
|
||||
<template #prefix><FaIcon icon="fas fa-search" :size="12" /></template>
|
||||
</n-input>
|
||||
<n-select v-model:value="statusFilter" :options="statusOptions" placeholder="订单状态" clearable style="width: 140px;" @update:value="loadOrders" />
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<n-card size="small" class="aksrt-shop__section">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="orders"
|
||||
:loading="loading"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
:pagination="pagination"
|
||||
@update:page="handlePageChange"
|
||||
/>
|
||||
</n-card>
|
||||
|
||||
<!-- 订单详情抽屉 -->
|
||||
<OrderDetailDrawer
|
||||
v-model:show="detailVisible"
|
||||
:order-number="detailOrderNumber"
|
||||
@updated="loadOrders"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, h } from 'vue'
|
||||
import { NTag, NButton } from 'naive-ui'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import FaIcon from '@/components/form/FaIcon.vue'
|
||||
import OrderDetailDrawer from './components/OrderDetailDrawer.vue'
|
||||
import api from '@/api/index.js'
|
||||
|
||||
const loading = ref(false)
|
||||
const orders = ref([])
|
||||
const search = ref('')
|
||||
const statusFilter = ref(null)
|
||||
|
||||
const detailVisible = ref(false)
|
||||
const detailOrderNumber = ref('')
|
||||
|
||||
const statusOptions = [
|
||||
{ label: '待支付', value: 'pending' },
|
||||
{ label: '已支付', value: 'paid' },
|
||||
{ label: '已完成', value: 'completed' },
|
||||
{ label: '已取消', value: 'cancelled' },
|
||||
{ label: '已退款', value: 'refunded' },
|
||||
]
|
||||
|
||||
const statusMap = {
|
||||
created: { label: '已创建', type: 'default' },
|
||||
pending: { label: '待支付', type: 'warning' },
|
||||
paid: { label: '已支付', type: 'success' },
|
||||
delivered: { label: '已发货', type: 'info' },
|
||||
completed: { label: '已完成', type: 'success' },
|
||||
cancelled: { label: '已取消', type: 'default' },
|
||||
expired: { label: '已过期', type: 'default' },
|
||||
refunding: { label: '退款中', type: 'warning' },
|
||||
refunded: { label: '已退款', type: 'error' },
|
||||
}
|
||||
|
||||
const pagination = reactive({ page: 1, pageSize: 20, itemCount: 0, showSizePicker: true, pageSizes: [10, 20, 50] })
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '订单号',
|
||||
key: 'order_number',
|
||||
width: 180,
|
||||
ellipsis: { tooltip: true },
|
||||
render: (row) => h('a', {
|
||||
href: 'javascript:;',
|
||||
style: 'color:#1890ff;cursor:pointer;',
|
||||
onClick: () => openDetail(row),
|
||||
}, row.order_number),
|
||||
},
|
||||
{ title: '商品', key: 'product_name', ellipsis: { tooltip: true } },
|
||||
{ title: '金额', key: 'amount', width: 100, render: (row) => '¥' + (row.amount || 0).toFixed(2) },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render: (row) => {
|
||||
const s = statusMap[row.status] || { label: row.status, type: 'default' }
|
||||
return h(NTag, { size: 'small', type: s.type }, () => s.label)
|
||||
},
|
||||
},
|
||||
{ title: '买家', key: 'buyer_name', width: 120 },
|
||||
{ title: '创建时间', key: 'created_at', width: 160 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 160,
|
||||
render: (row) => {
|
||||
const btns = []
|
||||
btns.push(h(NButton, { size: 'tiny', quaternary: true, type: 'info', onClick: () => openDetail(row) }, () => '详情'))
|
||||
if (row.status === 'pending') {
|
||||
btns.push(h(NButton, { size: 'tiny', quaternary: true, type: 'error', onClick: () => handleCancel(row) }, () => '取消'))
|
||||
}
|
||||
if (row.status === 'paid') {
|
||||
btns.push(h(NButton, { size: 'tiny', quaternary: true, type: 'info', onClick: () => handleDeliver(row) }, () => '发货'))
|
||||
}
|
||||
return h('div', { style: 'display:flex;gap:4px;' }, btns)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
async function loadOrders() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
per_page: String(pagination.pageSize),
|
||||
page: String(pagination.page),
|
||||
})
|
||||
if (search.value) params.set('search', search.value)
|
||||
if (statusFilter.value) params.set('status', statusFilter.value)
|
||||
|
||||
const res = await api.request('/shop/orders?' + params.toString())
|
||||
if (res?.data) {
|
||||
orders.value = res.data.items || []
|
||||
pagination.itemCount = res.data.total || 0
|
||||
}
|
||||
} catch {
|
||||
// Endpoint may not exist yet
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handlePageChange(page) {
|
||||
pagination.page = page
|
||||
loadOrders()
|
||||
}
|
||||
|
||||
function openDetail(row) {
|
||||
detailOrderNumber.value = row.order_number || ''
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
// Canonical: use order_number for status updates
|
||||
async function updateOrderStatus(row, newStatus) {
|
||||
try {
|
||||
await api.request('/shop/orders/update-status', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ order_number: row.order_number, status: newStatus }),
|
||||
})
|
||||
loadOrders()
|
||||
} catch {
|
||||
// silent
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel(row) { updateOrderStatus(row, 'cancelled') }
|
||||
function handleDeliver(row) { updateOrderStatus(row, 'delivered') }
|
||||
|
||||
onMounted(loadOrders)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-shop__section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,147 +0,0 @@
|
||||
<template>
|
||||
<div class="aksrt-page-container">
|
||||
<PageHeader title="商品管理" desc="管理所有商品的上架、编辑和库存。" />
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<n-card size="small" class="aksrt-shop__section">
|
||||
<n-space justify="space-between">
|
||||
<n-space>
|
||||
<n-input v-model:value="search" placeholder="搜索商品名称" clearable style="width: 240px;" @clear="loadProducts" @keyup.enter="loadProducts">
|
||||
<template #prefix><FaIcon icon="fas fa-search" :size="12" /></template>
|
||||
</n-input>
|
||||
<n-select v-model:value="statusFilter" :options="statusOptions" placeholder="状态筛选" clearable style="width: 140px;" @update:value="loadProducts" />
|
||||
</n-space>
|
||||
<n-button type="primary" @click="openCreate">
|
||||
<template #icon><FaIcon icon="fas fa-plus" :size="12" /></template>
|
||||
新增商品
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<n-card size="small" class="aksrt-shop__section">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="products"
|
||||
:loading="loading"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
:pagination="pagination"
|
||||
@update:page="handlePageChange"
|
||||
/>
|
||||
</n-card>
|
||||
|
||||
<!-- 商品编辑抽屉 -->
|
||||
<ProductEditorDrawer
|
||||
v-model:show="drawerVisible"
|
||||
:product-id="editingProductId"
|
||||
@saved="loadProducts"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, h } from 'vue'
|
||||
import { NTag, NSpace, NButton } from 'naive-ui'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import FaIcon from '@/components/form/FaIcon.vue'
|
||||
import ProductEditorDrawer from './components/ProductEditorDrawer.vue'
|
||||
import api from '@/api/index.js'
|
||||
|
||||
const loading = ref(false)
|
||||
const products = ref([])
|
||||
const search = ref('')
|
||||
const statusFilter = ref(null)
|
||||
|
||||
const drawerVisible = ref(false)
|
||||
const editingProductId = ref(null)
|
||||
|
||||
const statusOptions = [
|
||||
{ label: '已上架', value: 'publish' },
|
||||
{ label: '已下架', value: 'draft' },
|
||||
{ label: '全部', value: '' },
|
||||
]
|
||||
|
||||
const pagination = reactive({ page: 1, pageSize: 20, itemCount: 0, showSizePicker: true, pageSizes: [10, 20, 50] })
|
||||
|
||||
const columns = [
|
||||
{ title: '商品名称', key: 'title', ellipsis: { tooltip: true } },
|
||||
{ title: '价格', key: 'price', width: 100, render: (row) => '¥' + (row.price || 0).toFixed(2) },
|
||||
{ title: '库存', key: 'stock', width: 80 },
|
||||
{ title: '销量', key: 'sales', width: 80 },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 80,
|
||||
render: (row) => h(NTag, { size: 'small', type: row.status === 'publish' ? 'success' : 'default' }, () => row.status === 'publish' ? '已上架' : '已下架'),
|
||||
},
|
||||
{ title: '创建时间', key: 'created', width: 160 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 140,
|
||||
render: (row) => h(NSpace, { size: 'small' }, () => [
|
||||
h(NButton, { size: 'tiny', quaternary: true, type: 'info', onClick: () => openEdit(row) }, () => '编辑'),
|
||||
h(NButton, { size: 'tiny', quaternary: true, type: row.status === 'publish' ? 'warning' : 'success', onClick: () => handleToggle(row) }, () => row.status === 'publish' ? '下架' : '上架'),
|
||||
]),
|
||||
},
|
||||
]
|
||||
|
||||
async function loadProducts() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
per_page: String(pagination.pageSize),
|
||||
page: String(pagination.page),
|
||||
})
|
||||
if (search.value) params.set('search', search.value)
|
||||
if (statusFilter.value) params.set('status', statusFilter.value)
|
||||
|
||||
const res = await api.request('/shop/products?' + params.toString())
|
||||
if (res?.data) {
|
||||
products.value = res.data.items || []
|
||||
pagination.itemCount = res.data.total || 0
|
||||
}
|
||||
} catch {
|
||||
// Endpoint may not exist yet
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handlePageChange(page) {
|
||||
pagination.page = page
|
||||
loadProducts()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editingProductId.value = null
|
||||
drawerVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
editingProductId.value = row.id
|
||||
drawerVisible.value = true
|
||||
}
|
||||
|
||||
async function handleToggle(row) {
|
||||
const newStatus = row.status === 'publish' ? 'draft' : 'publish'
|
||||
try {
|
||||
await api.request('/shop/products/' + row.id, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
})
|
||||
loadProducts()
|
||||
} catch {
|
||||
// silent
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadProducts)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-shop__section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,364 +0,0 @@
|
||||
<template>
|
||||
<div class="aksrt-page-container">
|
||||
<PageHeader title="物流工作台" desc="围绕订单上下文处理发货、跟踪、签收和异常退回。" />
|
||||
|
||||
<div class="aksrt-shipping__stats">
|
||||
<div v-for="item in statCards" :key="item.key" class="aksrt-shipping__stat-card">
|
||||
<div class="aksrt-shipping__stat-icon" :style="{ background: item.color }">
|
||||
<i :class="item.icon"></i>
|
||||
</div>
|
||||
<div class="aksrt-shipping__stat-info">
|
||||
<div class="aksrt-shipping__stat-value">{{ stats[item.key] || 0 }}</div>
|
||||
<div class="aksrt-shipping__stat-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-card size="small" class="aksrt-shipping__section">
|
||||
<n-space wrap>
|
||||
<n-select v-model:value="filters.status" :options="statusOptions" clearable placeholder="物流状态" style="width: 150px" />
|
||||
<n-input v-model:value="filters.order_number" clearable placeholder="订单号" style="width: 180px" @keyup.enter="loadData(1)" />
|
||||
<n-input v-model:value="filters.tracking_no" clearable placeholder="物流单号" style="width: 180px" @keyup.enter="loadData(1)" />
|
||||
<n-input v-model:value="filters.date_from" type="date" style="width: 160px" />
|
||||
<n-input v-model:value="filters.date_to" type="date" style="width: 160px" />
|
||||
<n-button type="primary" @click="loadData(1)">查询</n-button>
|
||||
<n-button @click="resetFilters">重置</n-button>
|
||||
</n-space>
|
||||
|
||||
<div class="aksrt-shipping__toolbar">
|
||||
<n-space>
|
||||
<n-button type="primary" @click="showCreateModal = true">新建发货</n-button>
|
||||
<n-button :disabled="selectedRowKeys.length === 0" @click="showBatchDialog = true">批量更新状态</n-button>
|
||||
<n-popover trigger="click" placement="bottom-start">
|
||||
<template #trigger>
|
||||
<n-button>列控制</n-button>
|
||||
</template>
|
||||
<n-checkbox-group v-model:value="visibleColumnKeys">
|
||||
<n-space vertical size="small">
|
||||
<n-checkbox v-for="item in columnOptions" :key="item.key" :value="item.key">
|
||||
{{ item.label }}
|
||||
</n-checkbox>
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</n-popover>
|
||||
</n-space>
|
||||
</div>
|
||||
</n-card>
|
||||
|
||||
<n-card size="small" class="aksrt-shipping__section">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="items"
|
||||
:loading="loading"
|
||||
:row-key="(row) => row.id"
|
||||
:pagination="pagination"
|
||||
@update:page="handlePageChange"
|
||||
@update:checked-row-keys="selectedRowKeys = $event"
|
||||
/>
|
||||
</n-card>
|
||||
|
||||
<ShippingDetailDrawer
|
||||
v-model:show="detailVisible"
|
||||
:shipping-id="detailId"
|
||||
@updated="loadData(page)"
|
||||
/>
|
||||
|
||||
<ShippingBatchActionDialog
|
||||
v-model:show="showBatchDialog"
|
||||
:ids="selectedRowKeys"
|
||||
:status-options="batchStatusOptions"
|
||||
@updated="handleBatchUpdated"
|
||||
/>
|
||||
|
||||
<div v-if="showCreateModal" class="aksrt-modal-overlay" @click.self="showCreateModal = false">
|
||||
<div class="aksrt-modal aksrt-shipping__modal">
|
||||
<h3>新建发货记录</h3>
|
||||
<div class="aksrt-form-group">
|
||||
<label>订单号</label>
|
||||
<input v-model="createForm.order_number" type="text" class="aksrt-input" placeholder="输入订单号">
|
||||
</div>
|
||||
<div class="aksrt-form-group">
|
||||
<label>物流公司</label>
|
||||
<select v-model="createForm.carrier" class="aksrt-select">
|
||||
<option value="">请选择</option>
|
||||
<option v-for="item in carrierOptions" :key="item.value" :value="item.value">{{ item.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="aksrt-form-group">
|
||||
<label>物流单号</label>
|
||||
<input v-model="createForm.tracking_no" type="text" class="aksrt-input" placeholder="输入物流单号">
|
||||
</div>
|
||||
<div class="aksrt-form-group">
|
||||
<label>备注</label>
|
||||
<textarea v-model="createForm.note" class="aksrt-textarea" rows="3" placeholder="发货备注"></textarea>
|
||||
</div>
|
||||
<div class="aksrt-modal__actions">
|
||||
<button class="aksrt-button" @click="showCreateModal = false">取消</button>
|
||||
<button class="aksrt-button aksrt-button--primary" :disabled="creating" @click="submitCreate">
|
||||
{{ creating ? '提交中...' : '提交' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, h, onMounted, reactive, ref } from 'vue'
|
||||
import { NButton, NTag, useMessage } from 'naive-ui'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import api from '@/api/index.js'
|
||||
import ShippingDetailDrawer from './components/ShippingDetailDrawer.vue'
|
||||
import ShippingBatchActionDialog from './components/ShippingBatchActionDialog.vue'
|
||||
|
||||
const message = useMessage()
|
||||
const loading = ref(false)
|
||||
const page = ref(1)
|
||||
const items = ref([])
|
||||
const stats = ref({})
|
||||
const detailVisible = ref(false)
|
||||
const detailId = ref(null)
|
||||
const selectedRowKeys = ref([])
|
||||
const showBatchDialog = ref(false)
|
||||
const showCreateModal = ref(false)
|
||||
const creating = ref(false)
|
||||
const carrierOptions = ref([])
|
||||
const statusOptions = ref([])
|
||||
|
||||
const filters = reactive({
|
||||
status: null,
|
||||
order_number: '',
|
||||
tracking_no: '',
|
||||
date_from: '',
|
||||
date_to: '',
|
||||
})
|
||||
|
||||
const createForm = reactive({
|
||||
order_number: '',
|
||||
carrier: '',
|
||||
tracking_no: '',
|
||||
note: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
itemCount: 0,
|
||||
})
|
||||
|
||||
const statCards = [
|
||||
{ key: 'shipped', label: '已发货', icon: 'fas fa-box', color: '#0f766e' },
|
||||
{ key: 'in_transit', label: '运输中', icon: 'fas fa-truck', color: '#2563eb' },
|
||||
{ key: 'delivered', label: '已签收', icon: 'fas fa-check-circle', color: '#16a34a' },
|
||||
{ key: 'returned', label: '已退回', icon: 'fas fa-undo', color: '#dc2626' },
|
||||
{ key: 'total', label: '总数', icon: 'fas fa-layer-group', color: '#7c3aed' },
|
||||
]
|
||||
|
||||
const batchStatusOptions = computed(() => statusOptions.value.filter((item) => item.value !== 'shipped'))
|
||||
|
||||
const columnOptions = [
|
||||
{ key: 'order_number', label: '订单号' },
|
||||
{ key: 'carrier_label', label: '物流公司' },
|
||||
{ key: 'tracking_no', label: '物流单号' },
|
||||
{ key: 'status_label', label: '状态' },
|
||||
{ key: 'operator', label: '处理人' },
|
||||
{ key: 'address', label: '收货信息' },
|
||||
{ key: 'created_at', label: '创建时间' },
|
||||
]
|
||||
const visibleColumnKeys = ref(columnOptions.map((item) => item.key))
|
||||
|
||||
const baseColumns = [
|
||||
{ title: '订单号', key: 'order_number', width: 170, render: (row) => h('code', row.order_number) },
|
||||
{ title: '物流公司', key: 'carrier_label', width: 120 },
|
||||
{ title: '物流单号', key: 'tracking_no', width: 180, render: (row) => h('code', row.tracking_no) },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status_label',
|
||||
width: 100,
|
||||
render: (row) => h(NTag, { size: 'small', type: resolveTagType(row.status) }, () => row.status_label || row.status),
|
||||
},
|
||||
{ title: '处理人', key: 'operator', width: 120, render: (row) => row.operator?.display_name || '-' },
|
||||
{ title: '收货信息', key: 'address', ellipsis: { tooltip: true }, render: (row) => row.order_context?.address?.full_text || '-' },
|
||||
{ title: '创建时间', key: 'created_at', width: 160 },
|
||||
]
|
||||
|
||||
const columns = computed(() => {
|
||||
const visible = new Set(visibleColumnKeys.value)
|
||||
const filteredColumns = baseColumns.filter((column) => visible.has(column.key))
|
||||
|
||||
return [
|
||||
{ type: 'selection', width: 40 },
|
||||
...filteredColumns,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 160,
|
||||
render: (row) => h('div', { class: 'aksrt-shipping__action-buttons' }, [
|
||||
h(NButton, { size: 'small', quaternary: true, type: 'info', onClick: () => openDetail(row) }, () => '详情'),
|
||||
h(NButton, { size: 'small', quaternary: true, onClick: () => copyAddress(row) }, () => '复制地址'),
|
||||
]),
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
function resolveTagType(status) {
|
||||
if (status === 'delivered') return 'success'
|
||||
if (status === 'in_transit') return 'info'
|
||||
if (status === 'returned') return 'error'
|
||||
return 'warning'
|
||||
}
|
||||
|
||||
async function loadData(nextPage = 1) {
|
||||
loading.value = true
|
||||
page.value = nextPage
|
||||
pagination.page = nextPage
|
||||
|
||||
try {
|
||||
const res = await api.request('/shop/shipping', {
|
||||
params: {
|
||||
page: nextPage,
|
||||
per_page: pagination.pageSize,
|
||||
status: filters.status || '',
|
||||
order_number: filters.order_number || '',
|
||||
tracking_no: filters.tracking_no || '',
|
||||
date_from: filters.date_from || '',
|
||||
date_to: filters.date_to || '',
|
||||
},
|
||||
})
|
||||
|
||||
const data = res?.data || {}
|
||||
items.value = data.items || []
|
||||
stats.value = data.stats || {}
|
||||
pagination.itemCount = data.total || 0
|
||||
carrierOptions.value = data.options?.carrier || []
|
||||
statusOptions.value = [{ label: '全部状态', value: null }, ...(data.options?.status || [])]
|
||||
} catch (error) {
|
||||
message.error(error?.message || '加载物流数据失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handlePageChange(nextPage) {
|
||||
loadData(nextPage)
|
||||
}
|
||||
|
||||
function openDetail(row) {
|
||||
detailId.value = row.id
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
function handleBatchUpdated() {
|
||||
selectedRowKeys.value = []
|
||||
loadData(page.value)
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.status = null
|
||||
filters.order_number = ''
|
||||
filters.tracking_no = ''
|
||||
filters.date_from = ''
|
||||
filters.date_to = ''
|
||||
loadData(1)
|
||||
}
|
||||
|
||||
async function copyAddress(row) {
|
||||
const text = row.order_context?.address?.full_text || ''
|
||||
if (!text) {
|
||||
message.warning('当前记录没有地址信息')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
message.success('地址已复制')
|
||||
} catch {
|
||||
message.warning('复制失败，请手动复制')
|
||||
}
|
||||
}
|
||||
|
||||
async function submitCreate() {
|
||||
if (!createForm.order_number || !createForm.carrier || !createForm.tracking_no) {
|
||||
message.warning('请填写订单号、物流公司和物流单号')
|
||||
return
|
||||
}
|
||||
|
||||
creating.value = true
|
||||
try {
|
||||
await api.request('/shop/shipping', {
|
||||
method: 'POST',
|
||||
data: { ...createForm },
|
||||
})
|
||||
message.success('发货记录已创建')
|
||||
showCreateModal.value = false
|
||||
createForm.order_number = ''
|
||||
createForm.carrier = ''
|
||||
createForm.tracking_no = ''
|
||||
createForm.note = ''
|
||||
loadData(1)
|
||||
} catch (error) {
|
||||
message.error(error?.message || '创建发货记录失败')
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => loadData(1))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-shipping__stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.aksrt-shipping__stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.aksrt-shipping__stat-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aksrt-shipping__stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.aksrt-shipping__stat-label {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.aksrt-shipping__section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.aksrt-shipping__toolbar {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.aksrt-shipping__action-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.aksrt-shipping__modal {
|
||||
width: min(520px, calc(100vw - 32px));
|
||||
}
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<div class="aksrt-page-container">
|
||||
<PageHeader title="提现管理" desc="审核和管理创作者提现申请。" />
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<n-card size="small" class="aksrt-shop__section">
|
||||
<n-space>
|
||||
<n-select v-model:value="statusFilter" :options="statusOptions" placeholder="提现状态" clearable style="width: 140px;" @update:value="loadWithdrawals" />
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<!-- 提现列表 -->
|
||||
<n-card size="small" class="aksrt-shop__section">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="withdrawals"
|
||||
:loading="loading"
|
||||
:bordered="false"
|
||||
size="small"
|
||||
:pagination="pagination"
|
||||
@update:page="handlePageChange"
|
||||
/>
|
||||
</n-card>
|
||||
|
||||
<!-- 审核弹窗 -->
|
||||
<WithdrawalReviewModal
|
||||
v-model:show="reviewVisible"
|
||||
:withdrawal="reviewItem"
|
||||
@updated="loadWithdrawals"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, h } from 'vue'
|
||||
import { NTag, NButton } from 'naive-ui'
|
||||
import PageHeader from '@/components/PageHeader.vue'
|
||||
import WithdrawalReviewModal from './components/WithdrawalReviewModal.vue'
|
||||
import api from '@/api/index.js'
|
||||
|
||||
const loading = ref(false)
|
||||
const withdrawals = ref([])
|
||||
const statusFilter = ref(null)
|
||||
|
||||
const reviewVisible = ref(false)
|
||||
const reviewItem = ref({})
|
||||
|
||||
const statusOptions = [
|
||||
{ label: '待审核', value: 'pending' },
|
||||
{ label: '已批准', value: 'approved' },
|
||||
{ label: '已拒绝', value: 'rejected' },
|
||||
{ label: '已打款', value: 'completed' },
|
||||
]
|
||||
|
||||
const statusMap = {
|
||||
pending: { label: '待审核', type: 'warning' },
|
||||
approved: { label: '已批准', type: 'info' },
|
||||
processing: { label: '处理中', type: 'info' },
|
||||
completed: { label: '已打款', type: 'success' },
|
||||
rejected: { label: '已拒绝', type: 'error' },
|
||||
}
|
||||
|
||||
// Unified pagination: page + per_page → items + total + page + total_pages
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
itemCount: 0,
|
||||
showSizePicker: true,
|
||||
pageSizes: [10, 20, 50],
|
||||
})
|
||||
|
||||
const columns = [
|
||||
{ title: '申请人', key: 'user_name', width: 120 },
|
||||
{ title: '金额', key: 'amount', width: 120, render: (row) => '¥' + (row.amount || 0).toFixed(2) },
|
||||
{ title: '提现方式', key: 'method', width: 100 },
|
||||
{ title: '收款账号', key: 'account_info', width: 160, ellipsis: { tooltip: true } },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render: (row) => {
|
||||
const s = statusMap[row.status] || { label: row.status, type: 'default' }
|
||||
return h(NTag, { size: 'small', type: s.type }, () => s.label)
|
||||
},
|
||||
},
|
||||
{ title: '申请时间', key: 'created_at', width: 160 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 120,
|
||||
render: (row) => {
|
||||
if (row.status !== 'pending') {
|
||||
return h('span', { style: 'color:#aaa;font-size:12px;' }, '—')
|
||||
}
|
||||
return h(NButton, { size: 'tiny', quaternary: true, type: 'info', onClick: () => openReview(row) }, () => '审核')
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
async function loadWithdrawals() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
per_page: String(pagination.pageSize),
|
||||
page: String(pagination.page),
|
||||
})
|
||||
if (statusFilter.value) params.set('status', statusFilter.value)
|
||||
|
||||
const res = await api.request('/payment/withdrawals?' + params.toString())
|
||||
if (res?.data) {
|
||||
withdrawals.value = res.data.items || []
|
||||
pagination.itemCount = res.data.total || 0
|
||||
}
|
||||
} catch {
|
||||
// Endpoint may not exist yet
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handlePageChange(page) {
|
||||
pagination.page = page
|
||||
loadWithdrawals()
|
||||
}
|
||||
|
||||
function openReview(row) {
|
||||
reviewItem.value = row
|
||||
reviewVisible.value = true
|
||||
}
|
||||
|
||||
onMounted(loadWithdrawals)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-shop__section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,283 +0,0 @@
|
||||
<template>
|
||||
<n-drawer :show="show" :width="640" @update:show="$emit('update:show', $event)">
|
||||
<n-drawer-content title="售后详情" closable>
|
||||
<n-spin :show="loading">
|
||||
<!-- 售后状态头 -->
|
||||
<div class="aksrt-aftersale__status-header" :class="'aksrt-aftersale__status-header--' + (detail.record?.status || 'default')">
|
||||
<n-tag :type="statusType" size="large">{{ statusLabel }}</n-tag>
|
||||
<span class="aksrt-aftersale__order-no">订单号：{{ detail.record?.order_number || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 售后信息 -->
|
||||
<n-descriptions bordered :column="2" size="small" label-placement="left" style="margin-top:16px;">
|
||||
<n-descriptions-item label="售后类型">{{ detail.record?.type_label || detail.record?.type || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="申请阶段">
|
||||
<n-tag size="small">{{ detail.record?.stage?.label || '-' }}</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="申请金额">
|
||||
<n-text type="error" strong>¥{{ Number(detail.record?.amount || 0).toFixed(2) }}</n-text>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="退款金额">
|
||||
<n-text type="error" strong>¥{{ Number(detail.record?.refund_amount || 0).toFixed(2) }}</n-text>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="申请原因" :span="2">{{ detail.record?.reason || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="申请人">{{ detail.record?.applicant?.display_name || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="申请时间">{{ detail.record?.created_at || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="处理人">{{ detail.record?.operator?.display_name || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="处理时间">{{ detail.record?.processed_at || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item v-if="detail.record?.operator_note" label="处理备注" :span="2">{{ detail.record.operator_note }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
|
||||
<!-- 退款渠道 -->
|
||||
<n-card v-if="detail.record?.refund_channel" size="small" title="退款渠道" :bordered="false" style="margin-top:16px;">
|
||||
<n-descriptions :column="2" size="small" label-placement="left">
|
||||
<n-descriptions-item label="退款方式">{{ detail.record.refund_channel.method_label || detail.record.refund_channel.method || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="退款状态">
|
||||
<n-tag :type="detail.record.refund_channel.status === 'completed' ? 'success' : 'warning'" size="small">
|
||||
{{ detail.record.refund_channel.status_label || detail.record.refund_channel.status || '-' }}
|
||||
</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="退款单号">{{ detail.record.refund_channel.refund_id || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="退款时间">{{ detail.record.refund_channel.completed_at || '-' }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</n-card>
|
||||
|
||||
<!-- 退货地址 -->
|
||||
<n-card v-if="detail.record?.return_address" size="small" title="退货地址" :bordered="false" style="margin-top:12px;">
|
||||
<n-descriptions :column="1" size="small" label-placement="left">
|
||||
<n-descriptions-item label="收货人">{{ detail.record.return_address.name || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="电话">{{ detail.record.return_address.phone || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="地址">{{ detail.record.return_address.full_address || '-' }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-button size="small" @click="copyReturnAddress" style="margin-top:8px;">
|
||||
<i class="fas fa-copy" style="margin-right:4px;" /> 复制地址
|
||||
</n-button>
|
||||
</n-card>
|
||||
|
||||
<!-- 回寄物流 -->
|
||||
<n-card v-if="detail.record?.return_shipping" size="small" title="回寄物流" :bordered="false" style="margin-top:12px;">
|
||||
<n-descriptions :column="2" size="small" label-placement="left">
|
||||
<n-descriptions-item label="物流公司">{{ detail.record.return_shipping.company || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="物流单号">{{ detail.record.return_shipping.tracking_number || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="回寄时间">{{ detail.record.return_shipping.shipped_at || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="状态">
|
||||
<n-tag size="small" :type="detail.record.return_shipping.status === 'received' ? 'success' : 'info'">
|
||||
{{ detail.record.return_shipping.status_label || detail.record.return_shipping.status || '-' }}
|
||||
</n-tag>
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-timeline v-if="detail.record.return_shipping.tracking_detail?.length" style="margin-top:12px;">
|
||||
<n-timeline-item
|
||||
v-for="(item, i) in detail.record.return_shipping.tracking_detail"
|
||||
:key="i"
|
||||
:title="item.description"
|
||||
:content="item.time"
|
||||
:type="i === 0 ? 'success' : 'default'"
|
||||
/>
|
||||
</n-timeline>
|
||||
</n-card>
|
||||
|
||||
<!-- 售后联动 -->
|
||||
<n-card size="small" title="售后联动" :bordered="false" style="margin-top:12px;">
|
||||
<div class="aksrt-aftersale__context-item">
|
||||
关联物流：
|
||||
<span>
|
||||
{{ detail.record?.order_context?.shipping?.latest?.status_label || detail.record?.order_context?.shipping?.latest?.status || '暂无物流记录' }}
|
||||
<template v-if="detail.record?.order_context?.shipping?.latest?.tracking_no">
|
||||
/ {{ detail.record.order_context.shipping.latest.carrier_label || '-' }}
|
||||
/ {{ detail.record.order_context.shipping.latest.tracking_no }}
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="detail.record?.order_context?.address?.full_text" class="aksrt-aftersale__context-item">
|
||||
回寄参考地址：
|
||||
<span>{{ detail.record.order_context.address.full_text }}</span>
|
||||
</div>
|
||||
</n-card>
|
||||
|
||||
<!-- 状态更新 -->
|
||||
<n-card size="small" title="状态更新" :bordered="false" style="margin-top:16px;">
|
||||
<n-space vertical>
|
||||
<n-input v-model:value="note" type="textarea" :rows="2" placeholder="处理备注" />
|
||||
<n-space>
|
||||
<n-select v-model:value="nextStatus" :options="actionOptions" placeholder="选择状态" style="width:160px;" />
|
||||
<n-button type="primary" :disabled="!nextStatus" :loading="updating" @click="handleStatusUpdate">更新状态</n-button>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<!-- 操作时间线 -->
|
||||
<div v-if="detail.timeline?.length" class="aksrt-aftersale__timeline">
|
||||
<div class="aksrt-aftersale__section-title">操作时间线</div>
|
||||
<n-timeline size="small">
|
||||
<n-timeline-item
|
||||
v-for="(item, index) in detail.timeline"
|
||||
:key="index"
|
||||
:time="item.time"
|
||||
:title="item.label"
|
||||
:content="item.detail || ''"
|
||||
:type="item.type === 'refund' ? 'warning' : item.type === 'shipping' ? 'info' : 'success'"
|
||||
/>
|
||||
</n-timeline>
|
||||
</div>
|
||||
</n-spin>
|
||||
</n-drawer-content>
|
||||
</n-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import api from '@/api/index.js'
|
||||
|
||||
const props = defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
afterSaleId: { type: [Number, String], default: null },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:show', 'updated'])
|
||||
const message = useMessage()
|
||||
const loading = ref(false)
|
||||
const updating = ref(false)
|
||||
const detail = ref({ record: null, timeline: [] })
|
||||
const nextStatus = ref(null)
|
||||
const note = ref('')
|
||||
|
||||
const statusMap = {
|
||||
pending: { label: '待处理', type: 'warning' },
|
||||
processing: { label: '处理中', type: 'info' },
|
||||
approved: { label: '已通过', type: 'success' },
|
||||
rejected: { label: '已拒绝', type: 'error' },
|
||||
completed: { label: '已完成', type: 'success' },
|
||||
cancelled: { label: '已取消', type: 'default' },
|
||||
}
|
||||
|
||||
const statusLabel = computed(() => {
|
||||
const s = detail.value?.record?.status
|
||||
return (statusMap[s] || { label: s || '-' }).label
|
||||
})
|
||||
|
||||
const statusType = computed(() => {
|
||||
const s = detail.value?.record?.status
|
||||
return (statusMap[s] || { type: 'default' }).type
|
||||
})
|
||||
|
||||
const actionOptions = computed(() => {
|
||||
const status = detail.value?.record?.status
|
||||
if (status === 'pending') {
|
||||
return [
|
||||
{ label: '处理中', value: 'processing' },
|
||||
{ label: '已通过', value: 'approved' },
|
||||
{ label: '已拒绝', value: 'rejected' },
|
||||
{ label: '已取消', value: 'cancelled' },
|
||||
]
|
||||
}
|
||||
if (status === 'processing') {
|
||||
return [
|
||||
{ label: '已通过', value: 'approved' },
|
||||
{ label: '已拒绝', value: 'rejected' },
|
||||
{ label: '已取消', value: 'cancelled' },
|
||||
]
|
||||
}
|
||||
if (status === 'approved') {
|
||||
return [
|
||||
{ label: '已完成', value: 'completed' },
|
||||
{ label: '已取消', value: 'cancelled' },
|
||||
]
|
||||
}
|
||||
return []
|
||||
})
|
||||
|
||||
watch(() => props.show, async (visible) => {
|
||||
if (visible && props.afterSaleId) {
|
||||
await loadDetail()
|
||||
} else if (!visible) {
|
||||
detail.value = { record: null, timeline: [] }
|
||||
nextStatus.value = null
|
||||
note.value = ''
|
||||
}
|
||||
})
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.request(`/shop/after-sale/${props.afterSaleId}`)
|
||||
detail.value = res?.data || { record: null, timeline: [] }
|
||||
} catch (error) {
|
||||
message.error(error?.message || '加载售后详情失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStatusUpdate() {
|
||||
if (!nextStatus.value) return
|
||||
updating.value = true
|
||||
try {
|
||||
await api.request(`/shop/after-sale/${props.afterSaleId}/update-status`, {
|
||||
method: 'POST',
|
||||
data: { status: nextStatus.value, operator_note: note.value },
|
||||
})
|
||||
message.success('售后状态已更新')
|
||||
nextStatus.value = null
|
||||
note.value = ''
|
||||
await loadDetail()
|
||||
emit('updated')
|
||||
} catch (error) {
|
||||
message.error(error?.message || '状态更新失败')
|
||||
} finally {
|
||||
updating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function copyReturnAddress() {
|
||||
const addr = detail.value?.record?.return_address
|
||||
if (!addr) return
|
||||
const text = `${addr.name} ${addr.phone} ${addr.full_address}`
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
message.success('退货地址已复制')
|
||||
} catch {
|
||||
message.warning('复制失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-aftersale__status-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.aksrt-aftersale__status-header--pending { background: #fff7e6; }
|
||||
.aksrt-aftersale__status-header--processing { background: #e6f7ff; }
|
||||
.aksrt-aftersale__status-header--approved { background: #f6ffed; }
|
||||
.aksrt-aftersale__status-header--rejected { background: #fff1f0; }
|
||||
.aksrt-aftersale__status-header--completed { background: #f6ffed; }
|
||||
.aksrt-aftersale__status-header--cancelled { background: #f5f5f5; }
|
||||
|
||||
.aksrt-aftersale__order-no {
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.aksrt-aftersale__context-item {
|
||||
margin-top: 8px;
|
||||
color: var(--color-ink-2);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.aksrt-aftersale__timeline {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.aksrt-aftersale__section-title {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
</style>
|
||||
@@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<div class="aksrt-order-context">
|
||||
<n-card size="small" title="订单上下文" :bordered="false">
|
||||
<template v-if="context?.exists">
|
||||
<n-descriptions bordered :column="1" size="small" label-placement="left">
|
||||
<n-descriptions-item label="订单号">{{ context.summary?.order_number || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="订单状态">{{ context.summary?.status_label || context.summary?.status || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="买家">
|
||||
{{ context.buyer?.display_name || '-' }}
|
||||
<span v-if="context.buyer?.user_login" class="aksrt-order-context__muted">({{ context.buyer.user_login }})</span>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item v-if="context.buyer?.user_email" label="联系邮箱">{{ context.buyer.user_email }}</n-descriptions-item>
|
||||
<n-descriptions-item label="支付方式">{{ context.payment_method?.label || context.payment_method?.value || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="配送方式">{{ context.shipping_method?.label || context.shipping_method?.value || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="收货地址">{{ context.address?.full_text || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item v-if="context.coupon?.code || context.coupon?.label" label="优惠信息">
|
||||
{{ context.coupon?.label || context.coupon?.code }}
|
||||
<span v-if="context.coupon?.discount" class="aksrt-order-context__muted">减免 ¥{{ formatAmount(context.coupon.discount) }}</span>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="金额">
|
||||
¥{{ formatAmount(context.pricing?.amount) }}
|
||||
<span class="aksrt-order-context__muted">
|
||||
小计 ¥{{ formatAmount(context.pricing?.subtotal) }} / 运费 ¥{{ formatAmount(context.pricing?.shipping_fee) }} / 优惠 ¥{{ formatAmount(context.pricing?.discount) }}
|
||||
</span>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="物流联动">
|
||||
<template v-if="context.shipping?.latest?.status_label || context.shipping?.count">
|
||||
{{ context.shipping?.latest?.status_label || context.shipping?.latest?.status || '-' }}
|
||||
<span v-if="context.shipping?.latest?.tracking_no" class="aksrt-order-context__muted">
|
||||
{{ context.shipping.latest.carrier_label || context.shipping.latest.carrier || '' }} / {{ context.shipping.latest.tracking_no }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="售后联动">
|
||||
<template v-if="context.after_sale?.latest?.status_label || context.after_sale?.count">
|
||||
{{ context.after_sale?.latest?.status_label || context.after_sale?.latest?.status || '-' }}
|
||||
<span v-if="context.after_sale?.latest?.stage?.label" class="aksrt-order-context__muted">
|
||||
{{ context.after_sale.latest.stage.label }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item v-if="context.customer_note" label="用户备注">{{ context.customer_note }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
|
||||
<div v-if="Array.isArray(context.items) && context.items.length" class="aksrt-order-context__items">
|
||||
<div v-for="(item, index) in context.items" :key="index" class="aksrt-order-context__item">
|
||||
<div class="aksrt-order-context__item-title">{{ item.product_name || `商品 #${item.product_id || index + 1}` }}</div>
|
||||
<div class="aksrt-order-context__item-meta">数量 {{ item.quantity || 1 }} / 小计 ¥{{ formatAmount(item.line_total) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<n-empty v-else description="未找到订单上下文" size="small" />
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
context: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
function formatAmount(value) {
|
||||
return Number(value || 0).toFixed(2)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-order-context {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.aksrt-order-context__muted {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
color: #8c8c8c;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.aksrt-order-context__items {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.aksrt-order-context__item {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.aksrt-order-context__item-title {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.aksrt-order-context__item-meta {
|
||||
margin-top: 4px;
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,479 +0,0 @@
|
||||
<template>
|
||||
<n-drawer :show="show" :width="640" @update:show="$emit('update:show', $event)">
|
||||
<n-drawer-content title="订单详情" closable>
|
||||
<n-spin :show="loading">
|
||||
<!-- 订单状态头 -->
|
||||
<div class="aksrt-order-drawer__status-header" :class="'aksrt-order-drawer__status-header--' + order.status">
|
||||
<n-tag :type="statusType" size="large">{{ statusLabel }}</n-tag>
|
||||
<span class="aksrt-order-drawer__order-no">订单号：{{ order.order_number || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 核心信息 -->
|
||||
<n-descriptions bordered :column="2" label-placement="left" size="small" style="margin-top:16px;">
|
||||
<n-descriptions-item label="商品" :span="2">{{ order.product_name || order.product_type || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="订单金额">
|
||||
<n-text type="error" strong>¥{{ (order.amount || 0).toFixed(2) }}</n-text>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="支付方式">{{ order.payment_method?.label || order.payment_method || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="小计">¥{{ (order.subtotal || 0).toFixed(2) }}</n-descriptions-item>
|
||||
<n-descriptions-item label="运费">¥{{ (order.shipping_fee || 0).toFixed(2) }}</n-descriptions-item>
|
||||
<n-descriptions-item label="优惠">¥{{ (order.discount || 0).toFixed(2) }}</n-descriptions-item>
|
||||
<n-descriptions-item v-if="order.payment_transaction_id" label="交易号" :span="2">{{ order.payment_transaction_id }}</n-descriptions-item>
|
||||
<n-descriptions-item label="创建时间">{{ order.created_at || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item v-if="order.paid_at" label="支付时间">{{ order.paid_at }}</n-descriptions-item>
|
||||
<n-descriptions-item v-if="order.completed_at" label="完成时间">{{ order.completed_at }}</n-descriptions-item>
|
||||
<n-descriptions-item v-if="order.note" label="备注" :span="2">{{ order.note }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
|
||||
<!-- 买家信息 -->
|
||||
<n-card size="small" title="买家信息" :bordered="false" style="margin-top:16px;">
|
||||
<n-descriptions :column="2" label-placement="left" size="small">
|
||||
<n-descriptions-item label="用户 ID">{{ order.user_id || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="用户名">{{ buyer.display_name || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="邮箱">{{ buyer.email || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="手机">{{ buyer.phone || '-' }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</n-card>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
<n-card v-if="address" size="small" title="收货地址" :bordered="false" style="margin-top:12px;">
|
||||
<n-descriptions :column="1" label-placement="left" size="small">
|
||||
<n-descriptions-item label="收货人">{{ address.name || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="电话">{{ address.phone || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="地址">{{ address.full_address || '-' }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</n-card>
|
||||
|
||||
<!-- 物流信息 -->
|
||||
<n-card v-if="shipping" size="small" title="物流信息" :bordered="false" style="margin-top:12px;">
|
||||
<n-descriptions :column="2" label-placement="left" size="small">
|
||||
<n-descriptions-item label="物流公司">{{ shipping.company || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="物流单号">{{ shipping.tracking_number || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="发货时间">{{ shipping.shipped_at || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="状态">
|
||||
<n-tag :type="shipping.status === 'delivered' ? 'success' : 'info'" size="small">
|
||||
{{ shipping.status_label || shipping.status || '-' }}
|
||||
</n-tag>
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-timeline v-if="shipping.tracking_detail?.length" style="margin-top:12px;">
|
||||
<n-timeline-item
|
||||
v-for="(item, i) in shipping.tracking_detail"
|
||||
:key="i"
|
||||
:title="item.description"
|
||||
:content="item.time"
|
||||
:type="i === 0 ? 'success' : 'default'"
|
||||
/>
|
||||
</n-timeline>
|
||||
</n-card>
|
||||
|
||||
<!-- 售后信息 -->
|
||||
<n-card v-if="afterSale" size="small" title="售后信息" :bordered="false" style="margin-top:12px;">
|
||||
<n-descriptions :column="2" label-placement="left" size="small">
|
||||
<n-descriptions-item label="售后类型">{{ afterSale.type_label || afterSale.type || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="售后状态">
|
||||
<n-tag :type="afterSale.status === 'completed' ? 'success' : 'warning'" size="small">
|
||||
{{ afterSale.status_label || afterSale.status || '-' }}
|
||||
</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="退款金额">¥{{ (afterSale.refund_amount || 0).toFixed(2) }}</n-descriptions-item>
|
||||
<n-descriptions-item label="申请时间">{{ afterSale.created_at || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="原因" :span="2">{{ afterSale.reason || '-' }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</n-card>
|
||||
|
||||
<!-- 操作时间线 -->
|
||||
<n-card v-if="timeline.length" size="small" title="操作时间线" :bordered="false" style="margin-top:16px;">
|
||||
<n-timeline>
|
||||
<n-timeline-item
|
||||
v-for="(entry, index) in timeline"
|
||||
:key="index"
|
||||
:type="entry.type === 'shipping' ? 'info' : entry.type === 'after_sale' ? 'warning' : 'success'"
|
||||
:title="entry.title"
|
||||
:content="entry.detail || ''"
|
||||
:time="entry.time"
|
||||
/>
|
||||
</n-timeline>
|
||||
</n-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div v-if="order.order_number" class="aksrt-order-drawer__actions">
|
||||
<n-divider />
|
||||
<n-space wrap>
|
||||
<n-button v-if="order.status === 'pending'" type="success" size="small" @click="updateStatus('paid')">
|
||||
<template #icon><i class="fas fa-check" /></template>
|
||||
确认支付
|
||||
</n-button>
|
||||
<n-button v-if="order.status === 'pending'" type="error" size="small" @click="updateStatus('cancelled')">
|
||||
<template #icon><i class="fas fa-times" /></template>
|
||||
取消订单
|
||||
</n-button>
|
||||
<n-button v-if="order.status === 'paid'" type="info" size="small" @click="showShipModal = true">
|
||||
<template #icon><i class="fas fa-truck" /></template>
|
||||
发货
|
||||
</n-button>
|
||||
<n-button v-if="order.status === 'delivered'" type="success" size="small" @click="updateStatus('completed')">
|
||||
<template #icon><i class="fas fa-check-double" /></template>
|
||||
确认完成
|
||||
</n-button>
|
||||
<n-button v-if="['paid', 'delivered', 'completed'].includes(order.status)" type="warning" size="small" @click="showRefundModal = true">
|
||||
<template #icon><i class="fas fa-undo" /></template>
|
||||
申请退款
|
||||
</n-button>
|
||||
<n-button v-if="order.status === 'completed' && !afterSale" type="default" size="small" @click="showAfterSaleModal = true">
|
||||
<template #icon><i class="fas fa-headset" /></template>
|
||||
创建售后
|
||||
</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</n-spin>
|
||||
|
||||
<template #footer>
|
||||
<n-button @click="$emit('update:show', false)">关闭</n-button>
|
||||
</template>
|
||||
</n-drawer-content>
|
||||
</n-drawer>
|
||||
|
||||
<!-- 发货弹窗 -->
|
||||
<n-modal v-model:show="showShipModal" preset="card" title="发货" style="max-width:480px;" :bordered="false">
|
||||
<n-form label-placement="top">
|
||||
<n-form-item label="物流公司">
|
||||
<n-select v-model:value="shipForm.company" :options="shippingCompanies" placeholder="选择物流公司" />
|
||||
</n-form-item>
|
||||
<n-form-item label="物流单号">
|
||||
<n-input v-model:value="shipForm.tracking_number" placeholder="填写物流单号" />
|
||||
</n-form-item>
|
||||
<n-form-item label="备注">
|
||||
<n-input v-model:value="shipForm.note" type="textarea" :rows="2" placeholder="发货备注（可选）" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showShipModal = false">取消</n-button>
|
||||
<n-button type="info" :loading="shipLoading" @click="submitShip">确认发货</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
|
||||
<!-- 退款弹窗 -->
|
||||
<n-modal v-model:show="showRefundModal" preset="card" title="申请退款" style="max-width:420px;" :bordered="false">
|
||||
<n-form label-placement="top">
|
||||
<n-form-item label="退款金额 (元)">
|
||||
<n-input-number v-model:value="refundAmount" :min="0" :max="order.amount || 0" :precision="2" style="width:100%;" />
|
||||
<n-text depth="3" style="font-size:12px;margin-top:4px;">订单总额 ¥{{ (order.amount || 0).toFixed(2) }}，支持部分退款</n-text>
|
||||
</n-form-item>
|
||||
<n-form-item label="退款原因">
|
||||
<n-input v-model:value="refundReason" type="textarea" :rows="3" placeholder="填写退款原因（可选）" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showRefundModal = false">取消</n-button>
|
||||
<n-button type="warning" :loading="refundLoading" @click="submitRefund">确认退款</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
|
||||
<!-- 售后弹窗 -->
|
||||
<n-modal v-model:show="showAfterSaleModal" preset="card" title="创建售后" style="max-width:480px;" :bordered="false">
|
||||
<n-form label-placement="top">
|
||||
<n-form-item label="售后类型">
|
||||
<n-select v-model:value="afterSaleForm.type" :options="afterSaleTypes" />
|
||||
</n-form-item>
|
||||
<n-form-item label="退款金额">
|
||||
<n-input-number v-model:value="afterSaleForm.refund_amount" :min="0" :max="order.amount || 0" :precision="2" style="width:100%;" />
|
||||
</n-form-item>
|
||||
<n-form-item label="原因">
|
||||
<n-input v-model:value="afterSaleForm.reason" type="textarea" :rows="3" placeholder="售后原因" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="showAfterSaleModal = false">取消</n-button>
|
||||
<n-button type="warning" :loading="afterSaleLoading" @click="submitAfterSale">提交售后</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import api from '@/api/index.js'
|
||||
|
||||
const props = defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
orderNumber: { type: String, default: '' },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:show', 'updated'])
|
||||
const message = useMessage()
|
||||
const loading = ref(false)
|
||||
const order = ref({})
|
||||
const buyer = ref({})
|
||||
const address = ref(null)
|
||||
const shipping = ref(null)
|
||||
const afterSale = ref(null)
|
||||
const timeline = ref([])
|
||||
|
||||
// 发货
|
||||
const showShipModal = ref(false)
|
||||
const shipLoading = ref(false)
|
||||
const shipForm = ref({ company: '', tracking_number: '', note: '' })
|
||||
const shippingCompanies = [
|
||||
{ label: '顺丰速运', value: 'sf' },
|
||||
{ label: '圆通速递', value: 'yt' },
|
||||
{ label: '中通快递', value: 'zt' },
|
||||
{ label: '韵达快递', value: 'yd' },
|
||||
{ label: '申通快递', value: 'sto' },
|
||||
{ label: '百世快递', value: 'ht' },
|
||||
{ label: '极兔速递', value: 'jt' },
|
||||
{ label: '邮政快递', value: 'ems' },
|
||||
{ label: '其他', value: 'other' },
|
||||
]
|
||||
|
||||
// 退款
|
||||
const showRefundModal = ref(false)
|
||||
const refundAmount = ref(0)
|
||||
const refundReason = ref('')
|
||||
const refundLoading = ref(false)
|
||||
|
||||
// 售后
|
||||
const showAfterSaleModal = ref(false)
|
||||
const afterSaleLoading = ref(false)
|
||||
const afterSaleForm = ref({ type: 'refund', refund_amount: 0, reason: '' })
|
||||
const afterSaleTypes = [
|
||||
{ label: '仅退款', value: 'refund' },
|
||||
{ label: '退货退款', value: 'refund_return' },
|
||||
{ label: '换货', value: 'exchange' },
|
||||
{ label: '维修', value: 'repair' },
|
||||
]
|
||||
|
||||
const statusMap = {
|
||||
created: { label: '已创建', type: 'default' },
|
||||
pending: { label: '待支付', type: 'warning' },
|
||||
paid: { label: '已支付', type: 'success' },
|
||||
delivered: { label: '已发货', type: 'info' },
|
||||
completed: { label: '已完成', type: 'success' },
|
||||
cancelled: { label: '已取消', type: 'default' },
|
||||
expired: { label: '已过期', type: 'default' },
|
||||
refunding: { label: '退款中', type: 'warning' },
|
||||
refunded: { label: '已退款', type: 'error' },
|
||||
}
|
||||
|
||||
const statusLabel = computed(() => (statusMap[order.value.status] || { label: order.value.status }).label)
|
||||
const statusType = computed(() => (statusMap[order.value.status] || { type: 'default' }).type)
|
||||
|
||||
watch(() => props.show, async (val) => {
|
||||
if (val && props.orderNumber) {
|
||||
await loadOrder()
|
||||
} else if (!val) {
|
||||
resetState()
|
||||
}
|
||||
})
|
||||
|
||||
async function loadOrder() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.request(`/shop/orders/${props.orderNumber}`)
|
||||
applyOrderResponse(res)
|
||||
} catch {
|
||||
message.error('加载订单详情失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function applyOrderResponse(res) {
|
||||
if (!res) return
|
||||
order.value = res.data || {}
|
||||
const ctx = res.context || {}
|
||||
buyer.value = ctx.buyer || {}
|
||||
const addr = ctx.address || null
|
||||
if (addr && !addr.full_address) {
|
||||
addr.full_address = addr.full_text || [addr.province, addr.city, addr.district, addr.address].filter(Boolean).join(' ')
|
||||
}
|
||||
address.value = addr && Object.keys(addr).length ? addr : null
|
||||
|
||||
const shipLatest = ctx.shipping?.latest || null
|
||||
if (shipLatest && Object.keys(shipLatest).length) {
|
||||
shipping.value = {
|
||||
company: shipLatest.carrier_label || shipLatest.carrier || '',
|
||||
tracking_number: shipLatest.tracking_no || '',
|
||||
shipped_at: shipLatest.created_at || '',
|
||||
status: shipLatest.status || '',
|
||||
status_label: shipLatest.status_label || '',
|
||||
tracking_detail: shipLatest.tracking_detail || [],
|
||||
}
|
||||
} else {
|
||||
shipping.value = null
|
||||
}
|
||||
|
||||
const asLatest = ctx.after_sale?.latest || null
|
||||
if (asLatest && Object.keys(asLatest).length) {
|
||||
afterSale.value = {
|
||||
type: asLatest.type || '',
|
||||
type_label: asLatest.type_label || '',
|
||||
status: asLatest.status || '',
|
||||
status_label: asLatest.status_label || '',
|
||||
refund_amount: asLatest.amount ?? asLatest.refund_amount ?? 0,
|
||||
created_at: asLatest.created_at || '',
|
||||
reason: asLatest.reason || '',
|
||||
}
|
||||
} else {
|
||||
afterSale.value = null
|
||||
}
|
||||
|
||||
timeline.value = res.timeline || []
|
||||
if (order.value.amount != null) {
|
||||
refundAmount.value = order.value.amount || 0
|
||||
}
|
||||
}
|
||||
|
||||
function resetState() {
|
||||
order.value = {}
|
||||
buyer.value = {}
|
||||
address.value = null
|
||||
shipping.value = null
|
||||
afterSale.value = null
|
||||
timeline.value = []
|
||||
showRefundModal.value = false
|
||||
showShipModal.value = false
|
||||
showAfterSaleModal.value = false
|
||||
}
|
||||
|
||||
async function refreshOrder() {
|
||||
try {
|
||||
const res = await api.request(`/shop/orders/${props.orderNumber}`)
|
||||
applyOrderResponse(res)
|
||||
} catch { /* silent */ }
|
||||
}
|
||||
|
||||
async function updateStatus(status) {
|
||||
try {
|
||||
await api.request('/shop/orders/update-status', {
|
||||
method: 'POST',
|
||||
data: { order_number: props.orderNumber, status },
|
||||
})
|
||||
message.success('状态已更新')
|
||||
await refreshOrder()
|
||||
emit('updated')
|
||||
} catch {
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function submitShip() {
|
||||
if (!shipForm.value.company || !shipForm.value.tracking_number) {
|
||||
message.warning('请填写物流公司和物流单号')
|
||||
return
|
||||
}
|
||||
shipLoading.value = true
|
||||
try {
|
||||
await api.request('/shop/shipping', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
order_number: props.orderNumber,
|
||||
carrier: shipForm.value.company,
|
||||
tracking_no: shipForm.value.tracking_number,
|
||||
note: shipForm.value.note,
|
||||
},
|
||||
})
|
||||
message.success('发货成功')
|
||||
showShipModal.value = false
|
||||
shipForm.value = { company: '', tracking_number: '', note: '' }
|
||||
await refreshOrder()
|
||||
emit('updated')
|
||||
} catch (err) {
|
||||
message.error(err?.message || '发货失败')
|
||||
} finally {
|
||||
shipLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitRefund() {
|
||||
refundLoading.value = true
|
||||
try {
|
||||
await api.request('/shop/orders/update-status', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
order_number: props.orderNumber,
|
||||
status: 'refunding',
|
||||
refund_amount: refundAmount.value,
|
||||
refund_reason: refundReason.value,
|
||||
},
|
||||
})
|
||||
message.success('退款申请已提交')
|
||||
showRefundModal.value = false
|
||||
refundReason.value = ''
|
||||
await refreshOrder()
|
||||
emit('updated')
|
||||
} catch (err) {
|
||||
message.error(err?.message || '退款操作失败')
|
||||
} finally {
|
||||
refundLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitAfterSale() {
|
||||
if (!afterSaleForm.value.reason) {
|
||||
message.warning('请填写售后原因')
|
||||
return
|
||||
}
|
||||
afterSaleLoading.value = true
|
||||
try {
|
||||
await api.request('/shop/after-sale', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
order_number: props.orderNumber,
|
||||
type: afterSaleForm.value.type,
|
||||
amount: afterSaleForm.value.refund_amount,
|
||||
reason: afterSaleForm.value.reason,
|
||||
},
|
||||
})
|
||||
message.success('售后申请已提交')
|
||||
showAfterSaleModal.value = false
|
||||
afterSaleForm.value = { type: 'refund', refund_amount: 0, reason: '' }
|
||||
await refreshOrder()
|
||||
emit('updated')
|
||||
} catch (err) {
|
||||
message.error(err?.message || '售后申请失败')
|
||||
} finally {
|
||||
afterSaleLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-order-drawer__status-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.aksrt-order-drawer__status-header--pending { background: #fff7e6; }
|
||||
.aksrt-order-drawer__status-header--paid { background: #f6ffed; }
|
||||
.aksrt-order-drawer__status-header--delivered { background: #e6f7ff; }
|
||||
.aksrt-order-drawer__status-header--completed { background: #f6ffed; }
|
||||
.aksrt-order-drawer__status-header--cancelled { background: #f5f5f5; }
|
||||
.aksrt-order-drawer__status-header--refunding { background: #fff7e6; }
|
||||
.aksrt-order-drawer__status-header--refunded { background: #fff1f0; }
|
||||
|
||||
.aksrt-order-drawer__order-no {
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.aksrt-order-drawer__actions {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.aksrt-order-drawer__muted {
|
||||
font-size: 12px;
|
||||
color: var(--color-ink-4);
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,523 +0,0 @@
|
||||
<template>
|
||||
<n-drawer :show="show" :width="720" @update:show="$emit('update:show', $event)">
|
||||
<n-drawer-content :title="isEdit ? '编辑商品' : '新增商品'" closable>
|
||||
<n-form ref="formRef" :model="form" :rules="rules" label-placement="top">
|
||||
<!-- 基础信息 -->
|
||||
<n-divider title-placement="left">基础信息</n-divider>
|
||||
|
||||
<n-form-item label="商品名称" path="title">
|
||||
<n-input v-model:value="form.title" placeholder="输入商品名称" />
|
||||
</n-form-item>
|
||||
|
||||
<n-grid :cols="2" :x-gap="12">
|
||||
<n-gi>
|
||||
<n-form-item label="价格 (元)" path="price">
|
||||
<n-input-number v-model:value="form.price" :min="0" :precision="2" style="width:100%;" placeholder="0.00" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="库存" path="stock">
|
||||
<n-input-number v-model:value="form.stock" :min="0" style="width:100%;" placeholder="0" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-form-item label="商品简介" path="excerpt">
|
||||
<n-input v-model:value="form.excerpt" type="textarea" :rows="3" placeholder="简短描述（可选）" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="商品详情" path="content">
|
||||
<n-input v-model:value="form.content" type="textarea" :rows="6" placeholder="详细描述（支持 HTML）" />
|
||||
</n-form-item>
|
||||
|
||||
<!-- 商品素材 -->
|
||||
<n-divider title-placement="left">商品素材</n-divider>
|
||||
|
||||
<n-form-item label="主图 URL" path="image">
|
||||
<n-input v-model:value="form.image" placeholder="https://example.com/image.jpg" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="图集 URL">
|
||||
<n-input v-model:value="form.galleryText" type="textarea" :rows="3" placeholder="每行一个图片 URL" />
|
||||
</n-form-item>
|
||||
|
||||
<!-- 分类与标签 -->
|
||||
<n-divider title-placement="left">分类与标签</n-divider>
|
||||
|
||||
<n-form-item label="分类">
|
||||
<n-space vertical style="width:100%;">
|
||||
<n-select
|
||||
v-model:value="form.categories"
|
||||
:options="categoryOptions"
|
||||
multiple
|
||||
filterable
|
||||
placeholder="选择分类（可多选）"
|
||||
:loading="loadingTaxonomy"
|
||||
style="width:100%;"
|
||||
/>
|
||||
<n-space>
|
||||
<n-input
|
||||
v-model:value="newCategoryName"
|
||||
placeholder="新建分类名称"
|
||||
style="min-width:180px;"
|
||||
@keyup.enter="createCategory"
|
||||
/>
|
||||
<n-button :loading="creatingCategory" @click="createCategory">新建分类</n-button>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="标签">
|
||||
<n-select
|
||||
v-model:value="form.tags"
|
||||
:options="tagOptions"
|
||||
multiple
|
||||
filterable
|
||||
tag
|
||||
placeholder="选择或输入新标签后回车"
|
||||
:loading="loadingTaxonomy"
|
||||
@update:value="onTagsUpdate"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<!-- 发货与售后 -->
|
||||
<n-divider title-placement="left">发货与售后</n-divider>
|
||||
|
||||
<n-grid :cols="2" :x-gap="12">
|
||||
<n-gi>
|
||||
<n-form-item label="发货方式" path="shipping_mode">
|
||||
<n-select v-model:value="form.shipping_mode" :options="shippingModeOptions" placeholder="选择发货方式" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="额外运费 (元)" path="shipping_fee">
|
||||
<n-input-number v-model:value="form.shipping_fee" :min="0" :precision="2" style="width:100%;" placeholder="0.00" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-form-item label="售后说明" path="after_sale_policy">
|
||||
<n-input v-model:value="form.after_sale_policy" type="textarea" :rows="3" placeholder="售后政策说明（可选）" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="支持退款">
|
||||
<n-switch v-model:value="form.support_refund" />
|
||||
</n-form-item>
|
||||
|
||||
<!-- 发布设置 -->
|
||||
<n-divider title-placement="left">发布设置</n-divider>
|
||||
|
||||
<n-form-item label="状态" path="status">
|
||||
<n-select v-model:value="form.status" :options="statusOptions" />
|
||||
</n-form-item>
|
||||
|
||||
<!-- SKU / 变体（编辑已有商品时可用；新建时先创建再编辑变体） -->
|
||||
<n-divider title-placement="left">SKU 变体</n-divider>
|
||||
<n-alert v-if="!isEdit" type="info" :bordered="false" style="margin-bottom:12px;">
|
||||
新建商品请先保存，再编辑时配置 SKU 变体。
|
||||
</n-alert>
|
||||
<template v-else>
|
||||
<n-space style="margin-bottom:12px;">
|
||||
<n-button size="small" @click="addVariantRow">
|
||||
<template #icon><i class="fas fa-plus" /></template>
|
||||
添加变体
|
||||
</n-button>
|
||||
<n-button size="small" type="primary" ghost :loading="savingVariants" @click="saveVariantsOnly">
|
||||
仅保存变体
|
||||
</n-button>
|
||||
<n-text depth="3" style="font-size:12px;">属性格式：名称:值，多项用分号分隔，如 颜色:红;尺寸:L</n-text>
|
||||
</n-space>
|
||||
<n-spin :show="loadingVariants">
|
||||
<n-empty v-if="!variants.length" description="暂无变体，点击「添加变体」" style="margin:12px 0;" />
|
||||
<div v-for="(row, index) in variants" :key="row._key || row.id || index" class="aksrt-variant-row">
|
||||
<n-grid :cols="24" :x-gap="8" :y-gap="8">
|
||||
<n-gi :span="6">
|
||||
<n-input v-model:value="row.sku" placeholder="SKU" size="small" />
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-input v-model:value="row.attrsText" placeholder="颜色:红;尺寸:L" size="small" />
|
||||
</n-gi>
|
||||
<n-gi :span="4">
|
||||
<n-input-number v-model:value="row.price" :min="0" :precision="2" size="small" style="width:100%;" placeholder="价格" />
|
||||
</n-gi>
|
||||
<n-gi :span="4">
|
||||
<n-input-number v-model:value="row.stock" :min="0" size="small" style="width:100%;" placeholder="库存" />
|
||||
</n-gi>
|
||||
<n-gi :span="2">
|
||||
<n-button size="small" quaternary type="error" @click="removeVariantRow(index)">
|
||||
<i class="fas fa-trash" />
|
||||
</n-button>
|
||||
</n-gi>
|
||||
<n-gi :span="22">
|
||||
<n-input v-model:value="row.image" placeholder="变体图片 URL（可选）" size="small" />
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</div>
|
||||
</n-spin>
|
||||
</template>
|
||||
</n-form>
|
||||
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="$emit('update:show', false)">取消</n-button>
|
||||
<n-button type="primary" :loading="saving" @click="handleSave">
|
||||
{{ isEdit ? '保存修改' : '创建商品' }}
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-drawer-content>
|
||||
</n-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, computed } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import api from '@/api/index.js'
|
||||
|
||||
const props = defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
productId: { type: [Number, String], default: null },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:show', 'saved'])
|
||||
const message = useMessage()
|
||||
const formRef = ref(null)
|
||||
const saving = ref(false)
|
||||
const loadingTaxonomy = ref(false)
|
||||
const loadingVariants = ref(false)
|
||||
const savingVariants = ref(false)
|
||||
const variants = ref([])
|
||||
let variantKeySeq = 1
|
||||
|
||||
const isEdit = computed(() => !!props.productId)
|
||||
|
||||
const form = reactive({
|
||||
title: '',
|
||||
price: 0,
|
||||
stock: 0,
|
||||
excerpt: '',
|
||||
content: '',
|
||||
status: 'publish',
|
||||
image: '',
|
||||
galleryText: '',
|
||||
categories: [],
|
||||
tags: [],
|
||||
shipping_mode: 'digital',
|
||||
shipping_fee: 0,
|
||||
after_sale_policy: '',
|
||||
support_refund: true,
|
||||
})
|
||||
|
||||
const rules = {
|
||||
title: { required: true, message: '请输入商品名称', trigger: 'blur' },
|
||||
price: { type: 'number', required: true, message: '请输入价格', trigger: 'blur' },
|
||||
}
|
||||
|
||||
const statusOptions = [
|
||||
{ label: '上架', value: 'publish' },
|
||||
{ label: '下架', value: 'draft' },
|
||||
]
|
||||
|
||||
const shippingModeOptions = [
|
||||
{ label: '自动发货（虚拟商品）', value: 'digital' },
|
||||
{ label: '手动发货', value: 'manual' },
|
||||
{ label: '快递发货', value: 'express' },
|
||||
]
|
||||
|
||||
const categoryOptions = ref([])
|
||||
const tagOptions = ref([])
|
||||
const newCategoryName = ref('')
|
||||
const creatingCategory = ref(false)
|
||||
const creatingTagNames = new Set()
|
||||
|
||||
// Load taxonomy options
|
||||
async function loadTaxonomy() {
|
||||
loadingTaxonomy.value = true
|
||||
try {
|
||||
const res = await api.request('/shop/products/taxonomy')
|
||||
if (res?.data) {
|
||||
categoryOptions.value = (res.data.categories || []).map(c => ({ label: c.name, value: c.id }))
|
||||
tagOptions.value = (res.data.tags || []).map(t => ({ label: t.name, value: t.name }))
|
||||
}
|
||||
} catch {
|
||||
message.warning('分类标签加载失败，可稍后重试')
|
||||
} finally {
|
||||
loadingTaxonomy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function createCategory() {
|
||||
const name = (newCategoryName.value || '').trim()
|
||||
if (!name) {
|
||||
message.warning('请输入分类名称')
|
||||
return
|
||||
}
|
||||
creatingCategory.value = true
|
||||
try {
|
||||
const res = await api.request('/shop/products/taxonomy', {
|
||||
method: 'POST',
|
||||
data: { taxonomy: 'category', name },
|
||||
})
|
||||
const term = res?.data
|
||||
if (term?.id) {
|
||||
if (!categoryOptions.value.some(o => o.value === term.id)) {
|
||||
categoryOptions.value = [...categoryOptions.value, { label: term.name, value: term.id }]
|
||||
}
|
||||
if (!form.categories.includes(term.id)) {
|
||||
form.categories = [...form.categories, term.id]
|
||||
}
|
||||
newCategoryName.value = ''
|
||||
message.success(term.existing ? '分类已存在，已选中' : '分类已创建')
|
||||
}
|
||||
} catch (err) {
|
||||
message.error(err?.message || '创建分类失败')
|
||||
} finally {
|
||||
creatingCategory.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function ensureTagTerm(name) {
|
||||
const label = String(name || '').trim()
|
||||
if (!label || creatingTagNames.has(label)) return
|
||||
const exists = tagOptions.value.some(o => o.value === label || o.label === label)
|
||||
if (exists) return
|
||||
|
||||
creatingTagNames.add(label)
|
||||
try {
|
||||
const res = await api.request('/shop/products/taxonomy', {
|
||||
method: 'POST',
|
||||
data: { taxonomy: 'tag', name: label },
|
||||
})
|
||||
const term = res?.data
|
||||
if (term?.name && !tagOptions.value.some(o => o.value === term.name)) {
|
||||
tagOptions.value = [...tagOptions.value, { label: term.name, value: term.name }]
|
||||
}
|
||||
} catch {
|
||||
// Keep typed tag in form; backend product save still accepts string tags.
|
||||
} finally {
|
||||
creatingTagNames.delete(label)
|
||||
}
|
||||
}
|
||||
|
||||
function onTagsUpdate(values) {
|
||||
const list = Array.isArray(values) ? values : []
|
||||
form.tags = list
|
||||
list.forEach((name) => {
|
||||
if (!tagOptions.value.some(o => o.value === name)) {
|
||||
ensureTagTerm(name)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function attributesToText(attrs) {
|
||||
if (!Array.isArray(attrs) || !attrs.length) return ''
|
||||
return attrs
|
||||
.map((item) => {
|
||||
if (!item || typeof item !== 'object') return ''
|
||||
const name = String(item.name ?? item.key ?? '').trim()
|
||||
const value = String(item.value ?? '').trim()
|
||||
if (!name && !value) return ''
|
||||
return name ? `${name}:${value}` : value
|
||||
})
|
||||
.filter(Boolean)
|
||||
.join(';')
|
||||
}
|
||||
|
||||
function textToAttributes(text) {
|
||||
const raw = String(text || '').trim()
|
||||
if (!raw) return []
|
||||
return raw
|
||||
.split(/[;；\n]+/)
|
||||
.map(part => part.trim())
|
||||
.filter(Boolean)
|
||||
.map((part) => {
|
||||
const sep = part.includes(':') ? ':' : (part.includes('：') ? '：' : null)
|
||||
if (!sep) return { name: '规格', value: part }
|
||||
const [name, ...rest] = part.split(sep)
|
||||
return { name: (name || '规格').trim(), value: rest.join(sep).trim() }
|
||||
})
|
||||
.filter(item => item.value !== '')
|
||||
}
|
||||
|
||||
function mapVariantFromApi(row) {
|
||||
return {
|
||||
_key: `v_${variantKeySeq++}`,
|
||||
id: row.id || 0,
|
||||
sku: row.sku || '',
|
||||
price: Number(row.price || 0),
|
||||
stock: Number(row.stock || 0),
|
||||
image: row.image || '',
|
||||
attrsText: attributesToText(row.attributes),
|
||||
}
|
||||
}
|
||||
|
||||
function buildVariantsPayload() {
|
||||
return variants.value.map((row, index) => ({
|
||||
sku: String(row.sku || '').trim(),
|
||||
price: Number(row.price || 0),
|
||||
stock: Math.max(0, parseInt(row.stock, 10) || 0),
|
||||
image: String(row.image || '').trim(),
|
||||
attributes: textToAttributes(row.attrsText),
|
||||
sort_order: index,
|
||||
}))
|
||||
}
|
||||
|
||||
function addVariantRow() {
|
||||
variants.value = [
|
||||
...variants.value,
|
||||
{
|
||||
_key: `v_${variantKeySeq++}`,
|
||||
id: 0,
|
||||
sku: '',
|
||||
price: Number(form.price || 0),
|
||||
stock: Number(form.stock || 0),
|
||||
image: '',
|
||||
attrsText: '',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
function removeVariantRow(index) {
|
||||
variants.value = variants.value.filter((_, i) => i !== index)
|
||||
}
|
||||
|
||||
async function loadVariants(productId) {
|
||||
if (!productId) {
|
||||
variants.value = []
|
||||
return
|
||||
}
|
||||
loadingVariants.value = true
|
||||
try {
|
||||
const res = await api.request(`/shop/products/${productId}/variants`)
|
||||
const list = res?.data?.variants || res?.variants || []
|
||||
variants.value = Array.isArray(list) ? list.map(mapVariantFromApi) : []
|
||||
} catch {
|
||||
variants.value = []
|
||||
message.warning('变体加载失败')
|
||||
} finally {
|
||||
loadingVariants.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function persistVariants(productId) {
|
||||
if (!productId) return false
|
||||
await api.request(`/shop/products/${productId}/variants`, {
|
||||
method: 'POST',
|
||||
data: { variants: buildVariantsPayload() },
|
||||
})
|
||||
return true
|
||||
}
|
||||
|
||||
async function saveVariantsOnly() {
|
||||
if (!props.productId) {
|
||||
message.warning('请先保存商品')
|
||||
return
|
||||
}
|
||||
savingVariants.value = true
|
||||
try {
|
||||
await persistVariants(props.productId)
|
||||
message.success('变体已保存')
|
||||
await loadVariants(props.productId)
|
||||
} catch (err) {
|
||||
message.error(err?.message || '变体保存失败')
|
||||
} finally {
|
||||
savingVariants.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Load product data when editing
|
||||
watch(() => props.show, async (val) => {
|
||||
if (val) {
|
||||
loadTaxonomy()
|
||||
if (props.productId) {
|
||||
try {
|
||||
const res = await api.request(`/shop/products/${props.productId}`)
|
||||
if (res?.data) {
|
||||
const gallery = Array.isArray(res.data.gallery) ? res.data.gallery : []
|
||||
Object.assign(form, {
|
||||
title: res.data.title || '',
|
||||
price: res.data.price || 0,
|
||||
stock: res.data.stock || 0,
|
||||
excerpt: res.data.excerpt || '',
|
||||
content: res.data.content || '',
|
||||
status: res.data.status || 'publish',
|
||||
image: res.data.image || '',
|
||||
galleryText: gallery.join('\n'),
|
||||
categories: Array.isArray(res.data.categories) ? res.data.categories : [],
|
||||
tags: Array.isArray(res.data.tags) ? res.data.tags : [],
|
||||
shipping_mode: res.data.shipping_mode || 'digital',
|
||||
shipping_fee: res.data.shipping_fee || 0,
|
||||
after_sale_policy: res.data.after_sale_policy || '',
|
||||
support_refund: res.data.support_refund !== false,
|
||||
})
|
||||
}
|
||||
await loadVariants(props.productId)
|
||||
} catch {
|
||||
message.error('加载商品失败')
|
||||
}
|
||||
} else {
|
||||
Object.assign(form, {
|
||||
title: '', price: 0, stock: 0, excerpt: '', content: '', status: 'publish',
|
||||
image: '', galleryText: '', categories: [], tags: [],
|
||||
shipping_mode: 'digital', shipping_fee: 0, after_sale_policy: '', support_refund: true,
|
||||
})
|
||||
variants.value = []
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
async function handleSave() {
|
||||
try {
|
||||
await formRef.value?.validate()
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
try {
|
||||
const payload = {
|
||||
...form,
|
||||
gallery: form.galleryText
|
||||
.split('\n')
|
||||
.map(s => s.trim())
|
||||
.filter(Boolean),
|
||||
}
|
||||
delete payload.galleryText
|
||||
|
||||
if (isEdit.value) {
|
||||
await api.request(`/shop/products/${props.productId}`, {
|
||||
method: 'POST',
|
||||
data: payload,
|
||||
})
|
||||
await persistVariants(props.productId)
|
||||
message.success('商品已更新')
|
||||
} else {
|
||||
const res = await api.request('/shop/products', {
|
||||
method: 'POST',
|
||||
data: payload,
|
||||
})
|
||||
const productId = res?.data?.id || res?.id || null
|
||||
if (productId && variants.value.length) {
|
||||
await persistVariants(productId)
|
||||
}
|
||||
message.success('商品已创建')
|
||||
}
|
||||
emit('update:show', false)
|
||||
emit('saved')
|
||||
} catch (err) {
|
||||
message.error(err?.message || '操作失败')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-variant-row {
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid var(--n-border-color, #e5e7eb);
|
||||
border-radius: 8px;
|
||||
background: var(--n-color-modal, #fafafa);
|
||||
}
|
||||
</style>
|
||||
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<n-modal :show="show" preset="dialog" title="批量更新物流状态" @update:show="$emit('update:show', $event)">
|
||||
<div class="aksrt-shipping-batch__body">
|
||||
<div class="aksrt-shipping-batch__summary">已选 {{ ids.length }} 条记录</div>
|
||||
<n-form label-placement="top">
|
||||
<n-form-item label="目标状态">
|
||||
<n-select v-model:value="form.status" :options="statusOptions" placeholder="选择状态" />
|
||||
</n-form-item>
|
||||
<n-form-item label="备注">
|
||||
<n-input v-model:value="form.note" type="textarea" :rows="3" placeholder="批量操作备注" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</div>
|
||||
<template #action>
|
||||
<n-space justify="end">
|
||||
<n-button @click="$emit('update:show', false)">取消</n-button>
|
||||
<n-button type="primary" :loading="submitting" @click="handleSubmit">提交</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, watch } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import api from '@/api/index.js'
|
||||
|
||||
const props = defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
ids: { type: Array, default: () => [] },
|
||||
statusOptions: { type: Array, default: () => [] },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:show', 'updated'])
|
||||
const message = useMessage()
|
||||
const form = reactive({
|
||||
status: null,
|
||||
note: '',
|
||||
})
|
||||
const submitting = reactive({ value: false })
|
||||
|
||||
watch(() => props.show, (visible) => {
|
||||
if (visible) {
|
||||
form.status = null
|
||||
form.note = ''
|
||||
}
|
||||
})
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.status || !props.ids.length) {
|
||||
message.warning('请选择目标状态并至少勾选一条记录')
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const res = await api.request('/shop/shipping/batch-update-status', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
ids: props.ids,
|
||||
status: form.status,
|
||||
note: form.note,
|
||||
},
|
||||
})
|
||||
const updatedIds = Array.isArray(res?.data?.updated_ids) ? res.data.updated_ids : []
|
||||
const failed = Array.isArray(res?.data?.failed) ? res.data.failed : []
|
||||
|
||||
if (failed.length) {
|
||||
message.warning(`已更新 ${updatedIds.length} 条，另有 ${failed.length} 条因状态限制未执行`)
|
||||
} else {
|
||||
message.success(`已批量更新 ${updatedIds.length} 条记录`)
|
||||
}
|
||||
|
||||
emit('update:show', false)
|
||||
emit('updated')
|
||||
} catch (error) {
|
||||
message.error(error?.message || '批量操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-shipping-batch__body {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.aksrt-shipping-batch__summary {
|
||||
margin-bottom: 12px;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,237 +0,0 @@
|
||||
<template>
|
||||
<n-drawer :show="show" :width="640" @update:show="$emit('update:show', $event)">
|
||||
<n-drawer-content title="物流详情" closable>
|
||||
<n-spin :show="loading">
|
||||
<!-- 物流状态头 -->
|
||||
<div class="aksrt-shipping__status-header" :class="'aksrt-shipping__status-header--' + (detail.record?.status || 'default')">
|
||||
<n-tag :type="statusType" size="large">{{ statusLabel }}</n-tag>
|
||||
<span class="aksrt-shipping__order-no">订单号：{{ detail.record?.order_number || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 物流信息 -->
|
||||
<n-descriptions bordered :column="2" size="small" label-placement="left" style="margin-top:16px;">
|
||||
<n-descriptions-item label="物流公司">{{ detail.record?.carrier_label || detail.record?.carrier || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="物流单号">
|
||||
<n-text code>{{ detail.record?.tracking_no || '-' }}</n-text>
|
||||
<n-button v-if="detail.record?.tracking_no" text size="small" @click="copyTrackingNo" style="margin-left:8px;">
|
||||
<i class="fas fa-copy" />
|
||||
</n-button>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="发货时间">{{ detail.record?.shipped_at || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="处理人">{{ detail.record?.operator?.display_name || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="发货类型">
|
||||
<n-tag size="small" :type="detail.record?.ship_type === 'express' ? 'info' : 'default'">
|
||||
{{ detail.record?.ship_type_label || '快递发货' }}
|
||||
</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="备注">{{ detail.record?.note || '-' }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
<n-card v-if="detail.record?.order_context?.address" size="small" title="收货地址" :bordered="false" style="margin-top:16px;">
|
||||
<n-descriptions :column="1" size="small" label-placement="left">
|
||||
<n-descriptions-item label="收货人">{{ detail.record.order_context.address.name || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="电话">{{ detail.record.order_context.address.phone || '-' }}</n-descriptions-item>
|
||||
<n-descriptions-item label="地址">{{ detail.record.order_context.address.full_address || detail.record.order_context.address.full_text || '-' }}</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
<n-button size="small" @click="copyAddress" style="margin-top:8px;">
|
||||
<i class="fas fa-copy" style="margin-right:4px;" /> 复制地址
|
||||
</n-button>
|
||||
</n-card>
|
||||
|
||||
<!-- 物流追踪 -->
|
||||
<n-card v-if="detail.tracking_detail?.length" size="small" title="物流追踪" :bordered="false" style="margin-top:16px;">
|
||||
<n-timeline>
|
||||
<n-timeline-item
|
||||
v-for="(item, i) in detail.tracking_detail"
|
||||
:key="i"
|
||||
:title="item.description || item.status"
|
||||
:content="item.time"
|
||||
:type="i === 0 ? 'success' : 'default'"
|
||||
/>
|
||||
</n-timeline>
|
||||
</n-card>
|
||||
|
||||
<!-- 状态更新 -->
|
||||
<n-card size="small" title="状态更新" :bordered="false" style="margin-top:16px;">
|
||||
<n-space vertical>
|
||||
<n-input v-model:value="note" type="textarea" :rows="2" placeholder="状态变更备注" />
|
||||
<n-space>
|
||||
<n-select v-model:value="nextStatus" :options="actionOptions" placeholder="选择状态" style="width:160px;" />
|
||||
<n-button type="primary" :disabled="!nextStatus" :loading="updating" @click="handleStatusUpdate">更新状态</n-button>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<!-- 操作时间线 -->
|
||||
<div v-if="detail.timeline?.length" class="aksrt-shipping__timeline">
|
||||
<div class="aksrt-shipping__section-title">操作时间线</div>
|
||||
<n-timeline size="small">
|
||||
<n-timeline-item
|
||||
v-for="(item, index) in detail.timeline"
|
||||
:key="index"
|
||||
:time="item.time"
|
||||
:title="item.label"
|
||||
:content="item.detail || ''"
|
||||
/>
|
||||
</n-timeline>
|
||||
</div>
|
||||
</n-spin>
|
||||
</n-drawer-content>
|
||||
</n-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import api from '@/api/index.js'
|
||||
|
||||
const props = defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
shippingId: { type: [Number, String], default: null },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:show', 'updated'])
|
||||
const message = useMessage()
|
||||
const loading = ref(false)
|
||||
const updating = ref(false)
|
||||
const detail = ref({ record: null, timeline: [], tracking_detail: [] })
|
||||
const nextStatus = ref(null)
|
||||
const note = ref('')
|
||||
|
||||
const statusMap = {
|
||||
pending: { label: '待发货', type: 'warning' },
|
||||
shipped: { label: '已发货', type: 'info' },
|
||||
in_transit: { label: '运输中', type: 'info' },
|
||||
delivered: { label: '已签收', type: 'success' },
|
||||
returned: { label: '已退回', type: 'warning' },
|
||||
lost: { label: '已丢失', type: 'error' },
|
||||
}
|
||||
|
||||
const statusLabel = computed(() => {
|
||||
const s = detail.value?.record?.status
|
||||
return (statusMap[s] || { label: s || '-' }).label
|
||||
})
|
||||
|
||||
const statusType = computed(() => {
|
||||
const s = detail.value?.record?.status
|
||||
return (statusMap[s] || { type: 'default' }).type
|
||||
})
|
||||
|
||||
const actionOptions = computed(() => {
|
||||
const status = detail.value?.record?.status
|
||||
if (status === 'shipped' || status === 'pending') {
|
||||
return [
|
||||
{ label: '运输中', value: 'in_transit' },
|
||||
{ label: '已签收', value: 'delivered' },
|
||||
{ label: '已退回', value: 'returned' },
|
||||
{ label: '已丢失', value: 'lost' },
|
||||
]
|
||||
}
|
||||
if (status === 'in_transit') {
|
||||
return [
|
||||
{ label: '已签收', value: 'delivered' },
|
||||
{ label: '已退回', value: 'returned' },
|
||||
{ label: '已丢失', value: 'lost' },
|
||||
]
|
||||
}
|
||||
return []
|
||||
})
|
||||
|
||||
watch(() => props.show, async (visible) => {
|
||||
if (visible && props.shippingId) {
|
||||
await loadDetail()
|
||||
} else if (!visible) {
|
||||
detail.value = { record: null, timeline: [], tracking_detail: [] }
|
||||
nextStatus.value = null
|
||||
note.value = ''
|
||||
}
|
||||
})
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.request(`/shop/shipping/${props.shippingId}`)
|
||||
detail.value = res?.data || { record: null, timeline: [], tracking_detail: [] }
|
||||
} catch (error) {
|
||||
message.error(error?.message || '加载物流详情失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStatusUpdate() {
|
||||
if (!nextStatus.value) return
|
||||
updating.value = true
|
||||
try {
|
||||
await api.request(`/shop/shipping/${props.shippingId}/update-status`, {
|
||||
method: 'POST',
|
||||
data: { status: nextStatus.value, note: note.value },
|
||||
})
|
||||
message.success('物流状态已更新')
|
||||
nextStatus.value = null
|
||||
note.value = ''
|
||||
await loadDetail()
|
||||
emit('updated')
|
||||
} catch (error) {
|
||||
message.error(error?.message || '状态更新失败')
|
||||
} finally {
|
||||
updating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function copyTrackingNo() {
|
||||
const text = detail.value?.record?.tracking_no || ''
|
||||
if (!text) return
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
message.success('物流单号已复制')
|
||||
} catch {
|
||||
message.warning('复制失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function copyAddress() {
|
||||
const addr = detail.value?.record?.order_context?.address
|
||||
const text = addr?.full_address || addr?.full_text || ''
|
||||
if (!text) return
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
message.success('地址已复制')
|
||||
} catch {
|
||||
message.warning('复制失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-shipping__status-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.aksrt-shipping__status-header--shipped { background: #e6f7ff; }
|
||||
.aksrt-shipping__status-header--in_transit { background: #e6f7ff; }
|
||||
.aksrt-shipping__status-header--delivered { background: #f6ffed; }
|
||||
.aksrt-shipping__status-header--returned { background: #fff7e6; }
|
||||
.aksrt-shipping__status-header--lost { background: #fff1f0; }
|
||||
|
||||
.aksrt-shipping__order-no {
|
||||
font-size: 13px;
|
||||
color: var(--color-ink-3);
|
||||
}
|
||||
|
||||
.aksrt-shipping__timeline {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.aksrt-shipping__section-title {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
</style>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<n-modal :show="show" @update:show="$emit('update:show', $event)" preset="card" :title="modalTitle" style="width:480px;" closable>
|
||||
<n-form label-placement="top">
|
||||
<n-form-item label="申请人">
|
||||
<n-input :value="withdrawal.user_name || '-'" disabled />
|
||||
</n-form-item>
|
||||
<n-form-item label="提现金额">
|
||||
<n-input :value="'¥' + (withdrawal.amount || 0).toFixed(2)" disabled />
|
||||
</n-form-item>
|
||||
<n-form-item label="提现方式">
|
||||
<n-input :value="withdrawal.method || '-'" disabled />
|
||||
</n-form-item>
|
||||
<n-form-item label="收款账号">
|
||||
<n-input :value="withdrawal.account || withdrawal.account_info || '-'" disabled />
|
||||
</n-form-item>
|
||||
<n-form-item label="审核备注">
|
||||
<n-input v-model:value="note" type="textarea" :rows="3" placeholder="填写审核说明（可选）" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<template #footer>
|
||||
<n-space justify="end">
|
||||
<n-button @click="$emit('update:show', false)">取消</n-button>
|
||||
<n-button type="error" :loading="loading" @click="handleAction('rejected')">拒绝</n-button>
|
||||
<n-button type="success" :loading="loading" @click="handleAction('approved')">批准</n-button>
|
||||
<n-button type="info" :loading="loading" @click="handleAction('completed')">打款</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import api from '@/api/index.js'
|
||||
|
||||
const props = defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
withdrawal: { type: Object, default: () => ({}) },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:show', 'updated'])
|
||||
const message = useMessage()
|
||||
const loading = ref(false)
|
||||
const note = ref('')
|
||||
|
||||
const modalTitle = computed(() => {
|
||||
const id = props.withdrawal?.id
|
||||
return id ? `审核提现 #${id}` : '审核提现'
|
||||
})
|
||||
|
||||
async function handleAction(status) {
|
||||
loading.value = true
|
||||
try {
|
||||
await api.request(`/payment/withdrawals/${props.withdrawal.id}`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ status, note: note.value }),
|
||||
})
|
||||
message.success('操作成功')
|
||||
emit('update:show', false)
|
||||
emit('updated')
|
||||
} catch {
|
||||
message.error('操作失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in new issue
Block a user