feat: 支持商品管理
This commit is contained in:
richarjiang
238
packages/app/src/components/ShopOrders.vue
Normal file
238
packages/app/src/components/ShopOrders.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<view>
|
||||
<input
|
||||
v-if="admin"
|
||||
v-model="search"
|
||||
class="input search"
|
||||
placeholder="搜索商品、订单号或手机号"
|
||||
confirm-type="search"
|
||||
@confirm="load(true)"
|
||||
/>
|
||||
<view class="tabs">
|
||||
<text
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="tab"
|
||||
:class="{ active: status === tab.value }"
|
||||
@tap="filter(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="muted">共 {{ total }} 笔订单</text>
|
||||
<text class="badge" @tap="load(true)">刷新 ↻</text>
|
||||
</view>
|
||||
<view style="height: 24rpx" />
|
||||
<view v-if="error" class="error" @tap="load(true)">{{ error }} · 点击重试</view>
|
||||
<view v-if="!items.length && !error" class="state">
|
||||
{{ loading ? '加载中…' : '这里还没有订单' }}
|
||||
</view>
|
||||
<view v-for="order in items" :key="order.id" class="panel">
|
||||
<view class="row">
|
||||
<text class="muted">{{ date(order.createdAt) }}</text>
|
||||
<text class="badge">{{ shopStatus[order.status] }}</text>
|
||||
</view>
|
||||
<view class="divider" />
|
||||
<view class="row">
|
||||
<image class="thumb" :src="order.coverUrl" mode="aspectFill" />
|
||||
<view style="flex: 1">
|
||||
<text class="item-title">{{ order.title }}</text>
|
||||
<text class="muted">¥{{ shopMoney(order.unitPrice) }} × {{ order.quantity }}</text>
|
||||
<text class="price">¥{{ shopMoney(order.amount) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="divider" />
|
||||
<text class="muted">{{ order.contactName }} · {{ order.contactPhone }}</text>
|
||||
<text class="order-no" @tap="copy(order.orderNo)">订单号 {{ order.orderNo }} ⧉</text>
|
||||
<template v-if="order.status === 'PAID'">
|
||||
<view v-if="!admin" class="notice">
|
||||
到馆出示提货码
|
||||
<text class="code" @tap="copy(order.pickupCode)">{{ order.pickupCode }}</text>
|
||||
请在领取商品时向工作人员出示。
|
||||
</view>
|
||||
<view v-else class="field">
|
||||
<input
|
||||
v-model="codes[order.id]"
|
||||
class="input"
|
||||
maxlength="12"
|
||||
placeholder="输入顾客的 12 位提货码"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
<text v-if="order.status === 'PENDING'" class="muted">
|
||||
付款截止 {{ date(order.expiresAt) }}，超时后自动取消。
|
||||
</text>
|
||||
<view class="actions">
|
||||
<template v-if="order.status === 'PENDING' && !admin">
|
||||
<button class="secondary" :disabled="!!busy" @tap="cancel(order)">取消订单</button>
|
||||
<button class="secondary" :disabled="!!busy" @tap="sync(order)">刷新支付状态</button>
|
||||
<button class="primary" :disabled="!!busy || expired(order)" @tap="pay(order)">
|
||||
继续付款
|
||||
</button>
|
||||
</template>
|
||||
<button
|
||||
v-if="admin && order.status === 'PAID'"
|
||||
class="primary"
|
||||
:disabled="!!busy"
|
||||
@tap="complete(order)"
|
||||
>
|
||||
确认已交付商品
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<button
|
||||
v-if="items.length < total"
|
||||
class="secondary load-more"
|
||||
:disabled="loading"
|
||||
@tap="load(false)"
|
||||
>
|
||||
加载更多
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { ShopOrder, ShopPage } from '@mp-pilates/shared'
|
||||
import { get, post } from '../utils/request'
|
||||
import { shopMoney, shopStatus, shopError, payShopOrder } from '../utils/shop'
|
||||
const props = defineProps<{ admin?: boolean }>(),
|
||||
emit = defineEmits<{ (e: 'changed'): void }>()
|
||||
const items = ref<ShopOrder[]>([]),
|
||||
status = ref(''),
|
||||
search = ref(''),
|
||||
page = ref(0),
|
||||
total = ref(0),
|
||||
loading = ref(false),
|
||||
error = ref(''),
|
||||
busy = ref(''),
|
||||
codes = ref<Record<string, string>>({})
|
||||
const tabs = [
|
||||
{ value: '', label: '全部' },
|
||||
...Object.entries(shopStatus).map(([value, label]) => ({ value, label })),
|
||||
]
|
||||
const date = (value: string) => {
|
||||
const date = new Date(value)
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
|
||||
}
|
||||
const expired = (o: ShopOrder) => new Date(o.expiresAt).getTime() <= Date.now()
|
||||
const copy = (data: string) => uni.setClipboardData({ data })
|
||||
async function load(reset = true) {
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const data = await get<ShopPage<ShopOrder>>(
|
||||
props.admin ? '/admin/shop/orders' : '/shop/orders',
|
||||
{
|
||||
page: reset ? 1 : page.value + 1,
|
||||
...(status.value ? { status: status.value } : {}),
|
||||
search: search.value,
|
||||
},
|
||||
)
|
||||
items.value = reset ? data.items : [...items.value, ...data.items]
|
||||
total.value = data.total
|
||||
page.value = data.page
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : '加载失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
function filter(value: string) {
|
||||
if (loading.value) return
|
||||
status.value = value
|
||||
load(true)
|
||||
}
|
||||
async function sync(order: ShopOrder) {
|
||||
if (busy.value) return
|
||||
busy.value = order.id
|
||||
try {
|
||||
const updated = await post<ShopOrder>(`/shop/orders/${order.id}/sync`)
|
||||
items.value = items.value.map((o) => (o.id === updated.id ? updated : o))
|
||||
uni.showToast({
|
||||
title:
|
||||
updated.status === 'PENDING' ? '仍在等待付款确认，请稍后刷新' : shopStatus[updated.status],
|
||||
icon: 'none',
|
||||
})
|
||||
} catch (e) {
|
||||
shopError(e)
|
||||
} finally {
|
||||
busy.value = ''
|
||||
}
|
||||
}
|
||||
async function syncId(id: string) {
|
||||
try {
|
||||
await post(`/shop/orders/${id}/sync`)
|
||||
} catch (e) {
|
||||
shopError(e)
|
||||
}
|
||||
await load(true)
|
||||
}
|
||||
async function pay(order: ShopOrder) {
|
||||
if (busy.value) return
|
||||
busy.value = order.id
|
||||
try {
|
||||
await payShopOrder(order.id)
|
||||
} catch (e) {
|
||||
shopError(e)
|
||||
} finally {
|
||||
busy.value = ''
|
||||
await sync(order)
|
||||
}
|
||||
}
|
||||
async function cancel(order: ShopOrder) {
|
||||
const answer = await uni.showModal({
|
||||
title: '取消订单',
|
||||
content: '确认取消这笔未付款订单？库存会在微信关单确认后释放。',
|
||||
})
|
||||
if (!answer.confirm || busy.value) return
|
||||
busy.value = order.id
|
||||
try {
|
||||
await post(`/shop/orders/${order.id}/cancel`)
|
||||
await load(true)
|
||||
} catch (e) {
|
||||
shopError(e)
|
||||
} finally {
|
||||
busy.value = ''
|
||||
}
|
||||
}
|
||||
async function complete(order: ShopOrder) {
|
||||
const code = (codes.value[order.id] || '').trim().toUpperCase()
|
||||
if (!/^[A-F0-9]{12}$/.test(code)) {
|
||||
shopError(new Error('请输入完整提货码'))
|
||||
return
|
||||
}
|
||||
const answer = await uni.showModal({
|
||||
title: '确认商品已交付',
|
||||
content: `${order.title} × ${order.quantity}，取货人 ${order.contactName}。核销后订单将完成。`,
|
||||
})
|
||||
if (!answer.confirm || busy.value) return
|
||||
busy.value = order.id
|
||||
try {
|
||||
await post(`/admin/shop/orders/${order.id}/complete`, { pickupCode: code })
|
||||
await load(true)
|
||||
emit('changed')
|
||||
uni.showToast({ title: '提货完成' })
|
||||
} catch (e) {
|
||||
shopError(e)
|
||||
} finally {
|
||||
busy.value = ''
|
||||
}
|
||||
}
|
||||
defineExpose({ load, syncId })
|
||||
</script>
|
||||
<style scoped src="../pages/shop/shop.css"></style>
|
||||
<style scoped lang="scss">
|
||||
.price {
|
||||
font-size: 31rpx;
|
||||
}
|
||||
.order-no {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
.actions:empty {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user