赵忠林
5e26fdc7fb
- 添加 .dockerignore 和 .env.example 配置文件 - 添加 .gitignore 忽略规则配置 - 创建服务端代理API路由（_file、_modules、_server） - 集成 Ant Design Vue 组件库并配置SSR样式提取 - 定义API响应类型封装 - 创建基础布局组件（blank、console） - 实现应用中心页面和组件（AppsCenter） - 添加文章列表测试页面 - 配置控制台导航菜单结构 - 实现控制台头部组件 - 创建联系页面表单
395 lines
12 KiB
Vue
395 lines
12 KiB
Vue
<template>
|
||
<div class="space-y-4">
|
||
<a-page-header title="订单管理" sub-title="购买、续费与支付记录">
|
||
<template #extra>
|
||
<a-space>
|
||
<a-input
|
||
v-model:value="keywords"
|
||
allow-clear
|
||
placeholder="搜索订单号/产品"
|
||
class="w-64"
|
||
@press-enter="doSearch"
|
||
/>
|
||
<a-button :loading="loading" @click="reload">刷新</a-button>
|
||
</a-space>
|
||
</template>
|
||
</a-page-header>
|
||
|
||
<a-card :bordered="false" class="card">
|
||
<a-space class="mb-4">
|
||
<a-segmented
|
||
:value="payStatusSegment"
|
||
:options="payStatusOptions"
|
||
@update:value="onPayStatusChange"
|
||
/>
|
||
<a-select
|
||
v-model:value="orderStatus"
|
||
allow-clear
|
||
placeholder="订单状态"
|
||
:options="orderStatusOptions"
|
||
@change="reload"
|
||
style="min-width: 160px"
|
||
/>
|
||
</a-space>
|
||
|
||
<a-alert v-if="error" class="mb-4" show-icon type="error" :message="error" />
|
||
|
||
<a-table
|
||
:data-source="list"
|
||
:loading="loading"
|
||
:pagination="false"
|
||
size="middle"
|
||
:row-key="(r: any) => r.orderId ?? r.orderNo"
|
||
>
|
||
<a-table-column title="订单号" key="orderNo" width="220">
|
||
<template #default="{ record }">
|
||
<a-typography-text :copyable="{ text: record.orderNo || '' }">
|
||
{{ record.orderNo || '-' }}
|
||
</a-typography-text>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="产品" key="product" width="200">
|
||
<template #default="{ record }">
|
||
<div class="min-w-0">
|
||
<div class="truncate">{{ resolveProductName(record) }}</div>
|
||
<div class="text-xs text-gray-500 truncate" v-if="resolveProductSub(record)">
|
||
{{ resolveProductSub(record) }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="金额" key="amount" width="140">
|
||
<template #default="{ record }">
|
||
<span>{{ formatMoney(record.payPrice || record.totalPrice) }}</span>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="支付" key="payStatus" width="110">
|
||
<template #default="{ record }">
|
||
<a-tag v-if="Number(record.payStatus) === 1" color="green">已支付</a-tag>
|
||
<a-tag v-else-if="Number(record.payStatus) === 0" color="default">未支付</a-tag>
|
||
<a-tag v-else color="default">-</a-tag>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="状态" key="orderStatus" width="160">
|
||
<template #default="{ record }">
|
||
<a-tag :color="resolveOrderStatusColor(record.orderStatus)">{{ resolveOrderStatusText(record.orderStatus) }}</a-tag>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="创建时间" data-index="createTime" width="180">
|
||
<template #default="{ record }">
|
||
<span>{{ record.createTime || '-' }}</span>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="到期时间" data-index="expirationTime" width="180">
|
||
<template #default="{ record }">
|
||
<span>{{ record.expirationTime || '-' }}</span>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="操作" key="actions" width="120" fixed="right">
|
||
<template #default="{ record }">
|
||
<a-button size="small" @click="openDetail(record)">查看</a-button>
|
||
</template>
|
||
</a-table-column>
|
||
</a-table>
|
||
|
||
<div class="mt-4 flex items-center justify-end">
|
||
<a-pagination
|
||
:current="page"
|
||
:page-size="limit"
|
||
:total="total"
|
||
show-size-changer
|
||
:page-size-options="['10', '20', '50', '100']"
|
||
@change="onPageChange"
|
||
@show-size-change="onPageSizeChange"
|
||
/>
|
||
</div>
|
||
</a-card>
|
||
|
||
<a-modal v-model:open="detailOpen" title="订单详情" :width="720" ok-text="关闭" cancel-text="取消" :footer="null">
|
||
<a-descriptions :column="2" size="small" bordered>
|
||
<a-descriptions-item label="订单号">
|
||
<a-typography-text :copyable="{ text: selected?.orderNo || '' }">
|
||
{{ selected?.orderNo || '-' }}
|
||
</a-typography-text>
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="订单ID">{{ selected?.orderId ?? '-' }}</a-descriptions-item>
|
||
<a-descriptions-item label="金额">{{ formatMoney(selected?.payPrice || selected?.totalPrice) }}</a-descriptions-item>
|
||
<a-descriptions-item label="支付方式">{{ resolvePayTypeText(selected?.payType) }}</a-descriptions-item>
|
||
<a-descriptions-item label="支付状态">
|
||
{{ Number(selected?.payStatus) === 1 ? '已支付' : Number(selected?.payStatus) === 0 ? '未支付' : '-' }}
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="订单状态">{{ resolveOrderStatusText(selected?.orderStatus) }}</a-descriptions-item>
|
||
<a-descriptions-item label="创建时间">{{ selected?.createTime || '-' }}</a-descriptions-item>
|
||
<a-descriptions-item label="支付时间">{{ selected?.payTime || '-' }}</a-descriptions-item>
|
||
<a-descriptions-item label="到期时间">{{ selected?.expirationTime || '-' }}</a-descriptions-item>
|
||
<a-descriptions-item label="产品">
|
||
{{ resolveProductName(selected) }}
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="备注">
|
||
<span class="break-all">{{ pickFirstRemark(selected) || '-' }}</span>
|
||
</a-descriptions-item>
|
||
</a-descriptions>
|
||
|
||
<a-divider />
|
||
|
||
<div class="text-sm text-gray-600 mb-2">解析到的扩展字段（buyerRemarks/merchantRemarks/comments）</div>
|
||
<a-typography-paragraph :copyable="{ text: prettyExtra(selected) }">
|
||
<pre class="m-0 whitespace-pre-wrap break-words">{{ prettyExtra(selected) }}</pre>
|
||
</a-typography-paragraph>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from 'vue'
|
||
import { message } from 'ant-design-vue'
|
||
import { getUserInfo } from '@/api/layout'
|
||
import { pageShopOrder } from '@/api/shop/shopOrder'
|
||
import type { ShopOrder } from '@/api/shop/shopOrder/model'
|
||
|
||
definePageMeta({ layout: 'console' })
|
||
|
||
const loading = ref(false)
|
||
const error = ref('')
|
||
const list = ref<ShopOrder[]>([])
|
||
const page = ref(1)
|
||
const limit = ref(10)
|
||
const total = ref(0)
|
||
|
||
const keywords = ref('')
|
||
const payStatus = ref<number | null>(null)
|
||
const orderStatus = ref<number | null>(null)
|
||
|
||
const currentUserId = ref<number | null>(null)
|
||
|
||
const payStatusOptions = [
|
||
{ label: '全部', value: 'all' },
|
||
{ label: '已支付', value: 1 },
|
||
{ label: '未支付', value: 0 }
|
||
]
|
||
|
||
const payStatusSegment = computed(() => (payStatus.value === null ? 'all' : payStatus.value))
|
||
|
||
const orderStatusOptions = [
|
||
{ label: '未使用', value: 0 },
|
||
{ label: '已完成', value: 1 },
|
||
{ label: '已取消', value: 2 },
|
||
{ label: '取消中', value: 3 },
|
||
{ label: '退款申请中', value: 4 },
|
||
{ label: '退款被拒绝', value: 5 },
|
||
{ label: '退款成功', value: 6 },
|
||
{ label: '客户申请退款', value: 7 }
|
||
]
|
||
|
||
const detailOpen = ref(false)
|
||
const selected = ref<ShopOrder | null>(null)
|
||
|
||
function safeJsonParse(value: string): unknown {
|
||
try {
|
||
return JSON.parse(value)
|
||
} catch {
|
||
return undefined
|
||
}
|
||
}
|
||
|
||
function pickFirstRemark(order?: ShopOrder | null) {
|
||
if (!order) return ''
|
||
const record = order as unknown as Record<string, unknown>
|
||
const keys = ['buyerRemarks', 'merchantRemarks', 'comments']
|
||
for (const key of keys) {
|
||
const v = record[key]
|
||
if (typeof v === 'string' && v.trim()) return v.trim()
|
||
}
|
||
return ''
|
||
}
|
||
|
||
function parseExtra(order?: ShopOrder | null): Record<string, unknown> | null {
|
||
const raw = pickFirstRemark(order)
|
||
if (!raw) return null
|
||
const parsed = safeJsonParse(raw)
|
||
if (!parsed || typeof parsed !== 'object') return null
|
||
return parsed as Record<string, unknown>
|
||
}
|
||
|
||
function prettyExtra(order?: ShopOrder | null) {
|
||
const extra = parseExtra(order)
|
||
if (!extra) return '-'
|
||
try {
|
||
return JSON.stringify(extra, null, 2)
|
||
} catch {
|
||
return '-'
|
||
}
|
||
}
|
||
|
||
const productCatalog: Record<string, { name: string }> = {
|
||
website: { name: '企业官网' },
|
||
shop: { name: '电商系统' },
|
||
mp: { name: '小程序/公众号' }
|
||
}
|
||
|
||
function resolveProductCode(order?: ShopOrder | null) {
|
||
const extra = parseExtra(order)
|
||
const code = typeof extra?.product === 'string' ? extra.product.trim() : ''
|
||
return code
|
||
}
|
||
|
||
function resolveProductSub(order?: ShopOrder | null) {
|
||
const extra = parseExtra(order)
|
||
const months = extra?.months
|
||
const tenantName = extra?.tenantName
|
||
const domain = extra?.domain
|
||
|
||
const parts: string[] = []
|
||
if (typeof months === 'number' || typeof months === 'string') {
|
||
const m = String(months).trim()
|
||
if (m) parts.push(`${m}个月`)
|
||
}
|
||
if (typeof tenantName === 'string' && tenantName.trim()) parts.push(tenantName.trim())
|
||
if (typeof domain === 'string' && domain.trim()) parts.push(domain.trim())
|
||
return parts.join(' · ')
|
||
}
|
||
|
||
function resolveProductName(order?: ShopOrder | null) {
|
||
const code = resolveProductCode(order)
|
||
if (code && productCatalog[code]) return productCatalog[code].name
|
||
if (code) return code
|
||
return '-'
|
||
}
|
||
|
||
function formatMoney(value?: string) {
|
||
const v = typeof value === 'string' ? value.trim() : ''
|
||
if (!v) return '-'
|
||
const n = Number(v)
|
||
if (!Number.isFinite(n)) return `¥${v}`
|
||
return `¥${n.toFixed(2)}`
|
||
}
|
||
|
||
function resolvePayTypeText(payType?: number) {
|
||
const v = Number(payType)
|
||
if (!Number.isFinite(v)) return '-'
|
||
const map: Record<number, string> = {
|
||
0: '余额',
|
||
1: '微信',
|
||
102: '微信 Native',
|
||
2: '会员卡',
|
||
3: '支付宝',
|
||
4: '现金',
|
||
5: 'POS',
|
||
12: '免费'
|
||
}
|
||
return map[v] || `方式${v}`
|
||
}
|
||
|
||
function resolveOrderStatusText(orderStatus?: number) {
|
||
const v = Number(orderStatus)
|
||
if (!Number.isFinite(v)) return '-'
|
||
const map: Record<number, string> = {
|
||
0: '未使用',
|
||
1: '已完成',
|
||
2: '已取消',
|
||
3: '取消中',
|
||
4: '退款申请中',
|
||
5: '退款被拒绝',
|
||
6: '退款成功',
|
||
7: '客户申请退款'
|
||
}
|
||
return map[v] || `状态${v}`
|
||
}
|
||
|
||
function resolveOrderStatusColor(orderStatus?: number) {
|
||
const v = Number(orderStatus)
|
||
if (v === 1) return 'green'
|
||
if (v === 2) return 'default'
|
||
if (v === 6) return 'default'
|
||
if (v === 4 || v === 3 || v === 7) return 'orange'
|
||
if (v === 5) return 'red'
|
||
return 'blue'
|
||
}
|
||
|
||
async function ensureUser() {
|
||
if (currentUserId.value) return
|
||
const user = await getUserInfo()
|
||
currentUserId.value = user.userId ?? null
|
||
}
|
||
|
||
async function load() {
|
||
loading.value = true
|
||
error.value = ''
|
||
try {
|
||
await ensureUser()
|
||
const userId = currentUserId.value
|
||
if (!userId) {
|
||
throw new Error('缺少用户信息，无法查询当前用户订单')
|
||
}
|
||
|
||
const data = await pageShopOrder({
|
||
page: page.value,
|
||
limit: limit.value,
|
||
userId,
|
||
keywords: keywords.value?.trim() || undefined,
|
||
payStatus: payStatus.value === null ? undefined : payStatus.value,
|
||
orderStatus: orderStatus.value === null ? undefined : orderStatus.value
|
||
})
|
||
|
||
list.value = data?.list || []
|
||
total.value = data?.count || 0
|
||
} catch (e: unknown) {
|
||
console.error(e)
|
||
list.value = []
|
||
total.value = 0
|
||
error.value = e instanceof Error ? e.message : '加载订单失败'
|
||
message.error(error.value)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
async function reload() {
|
||
await load()
|
||
}
|
||
|
||
function doSearch() {
|
||
page.value = 1
|
||
load()
|
||
}
|
||
|
||
function onPayStatusChange(value: string | number) {
|
||
payStatus.value = value === 'all' ? null : Number(value)
|
||
page.value = 1
|
||
load()
|
||
}
|
||
|
||
function onPageChange(p: number) {
|
||
page.value = p
|
||
load()
|
||
}
|
||
|
||
function onPageSizeChange(_current: number, size: number) {
|
||
limit.value = size
|
||
page.value = 1
|
||
load()
|
||
}
|
||
|
||
function openDetail(order: ShopOrder) {
|
||
selected.value = order
|
||
detailOpen.value = true
|
||
}
|
||
|
||
onMounted(() => {
|
||
load()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.card {
|
||
border-radius: 12px;
|
||
}
|
||
</style>
|