新增摸大红业务并修复后台链接按钮白字
支持分类筛选、搜索、下单支付建群与固定二维码；合并迁移种子数据；后台表格编辑/详情链接恢复主题色可见。
This commit is contained in:
yml2213
@@ -0,0 +1,290 @@
|
||||
import { apiClient } from '@/shared/api/client'
|
||||
import type { ApiResponse } from '@/shared/types/types'
|
||||
import type { PaymentOrder, PaymentPayWay } from '@/features/orders/api/orders'
|
||||
|
||||
export interface MohongCategory {
|
||||
id: number
|
||||
name: string
|
||||
code: string
|
||||
sort_order: number
|
||||
status: string
|
||||
product_count: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface MohongProduct {
|
||||
id: number
|
||||
category_id?: number | null
|
||||
category_name?: string
|
||||
title: string
|
||||
cover_url: string
|
||||
image_urls: string[]
|
||||
description: string
|
||||
price_cent: number
|
||||
price: string
|
||||
original_price_cent: number
|
||||
original_price?: string
|
||||
unit: string
|
||||
stock: number
|
||||
sort_order: number
|
||||
status: string
|
||||
qrcode_image_url?: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface MohongOrder {
|
||||
id: number
|
||||
order_no: string
|
||||
user_id: number
|
||||
product_id: number
|
||||
quantity: number
|
||||
unit_price_cent: number
|
||||
unit_price: string
|
||||
amount_cent: number
|
||||
amount: string
|
||||
status: string
|
||||
product_title: string
|
||||
product_cover_url: string
|
||||
product_unit: string
|
||||
qrcode_url_snapshot: string
|
||||
copy_text: string
|
||||
conversation_id?: number | null
|
||||
buyer_nickname?: string
|
||||
buyer_phone?: string
|
||||
admin_remark?: string
|
||||
cancel_reason?: string
|
||||
paid_at?: string | null
|
||||
completed_at?: string | null
|
||||
cancelled_at?: string | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface MohongConfig {
|
||||
default_qrcode_url: string
|
||||
group_welcome_text: string
|
||||
order_copy_template: string
|
||||
}
|
||||
|
||||
export interface Paginated<T> {
|
||||
items: T[]
|
||||
total: number
|
||||
page: number
|
||||
page_size: number
|
||||
}
|
||||
|
||||
export async function fetchMohongCategories() {
|
||||
const { data } = await apiClient.get<ApiResponse<MohongCategory[]>>('/mohong/categories')
|
||||
return data.data || []
|
||||
}
|
||||
|
||||
export async function fetchMohongProducts(params?: {
|
||||
keyword?: string
|
||||
category_id?: number
|
||||
page?: number
|
||||
page_size?: number
|
||||
}) {
|
||||
const { data } = await apiClient.get<ApiResponse<Paginated<MohongProduct>>>('/mohong/products', {
|
||||
params,
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchMohongProduct(id: number | string) {
|
||||
const { data } = await apiClient.get<ApiResponse<MohongProduct>>(`/mohong/products/${id}`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function createMohongOrder(productId: number, quantity: number) {
|
||||
const { data } = await apiClient.post<ApiResponse<MohongOrder>>('/mohong/orders', {
|
||||
product_id: productId,
|
||||
quantity,
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchMyMohongOrders(params?: {
|
||||
status?: string
|
||||
page?: number
|
||||
page_size?: number
|
||||
}) {
|
||||
const { data } = await apiClient.get<ApiResponse<Paginated<MohongOrder>>>('/mohong/orders', {
|
||||
params,
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchMyMohongOrder(id: number | string) {
|
||||
const { data } = await apiClient.get<ApiResponse<MohongOrder>>(`/mohong/orders/${id}`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function cancelMyMohongOrder(id: number | string, reason?: string) {
|
||||
const { data } = await apiClient.post<ApiResponse<MohongOrder>>(`/mohong/orders/${id}/cancel`, {
|
||||
reason: reason || '',
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function startMohongPayment(
|
||||
orderId: number,
|
||||
payWay: PaymentPayWay | string,
|
||||
jsPayFlag?: string
|
||||
) {
|
||||
const { data } = await apiClient.post<ApiResponse<PaymentOrder>>(
|
||||
`/mohong/orders/${orderId}/start-payment`,
|
||||
{
|
||||
pay_way: payWay || 'ZFBZF',
|
||||
jspay_flag: jsPayFlag || '',
|
||||
}
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function queryMohongPayment(orderId: number) {
|
||||
const { data } = await apiClient.get<ApiResponse<PaymentOrder>>(
|
||||
`/mohong/orders/${orderId}/query-payment`
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
// Admin APIs
|
||||
export async function fetchAdminMohongCategories() {
|
||||
const { data } = await apiClient.get<ApiResponse<MohongCategory[]>>('/admin/mohong/categories')
|
||||
return data.data || []
|
||||
}
|
||||
|
||||
export async function createAdminMohongCategory(payload: {
|
||||
name: string
|
||||
code?: string
|
||||
sort_order?: number
|
||||
status?: string
|
||||
}) {
|
||||
const { data } = await apiClient.post<ApiResponse<MohongCategory>>(
|
||||
'/admin/mohong/categories',
|
||||
payload
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function updateAdminMohongCategory(
|
||||
id: number,
|
||||
payload: Partial<{ name: string; code: string; sort_order: number; status: string }>
|
||||
) {
|
||||
const { data } = await apiClient.put<ApiResponse<MohongCategory>>(
|
||||
`/admin/mohong/categories/${id}`,
|
||||
payload
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function deleteAdminMohongCategory(id: number) {
|
||||
const { data } = await apiClient.delete<ApiResponse<{ message: string }>>(
|
||||
`/admin/mohong/categories/${id}`
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchAdminMohongProducts(params?: {
|
||||
keyword?: string
|
||||
status?: string
|
||||
category_id?: number
|
||||
page?: number
|
||||
page_size?: number
|
||||
}) {
|
||||
const { data } = await apiClient.get<ApiResponse<Paginated<MohongProduct>>>(
|
||||
'/admin/mohong/products',
|
||||
{ params }
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchAdminMohongProduct(id: number | string) {
|
||||
const { data } = await apiClient.get<ApiResponse<MohongProduct>>(`/admin/mohong/products/${id}`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function createAdminMohongProduct(payload: Partial<MohongProduct> & { title: string; price_cent: number }) {
|
||||
const { data } = await apiClient.post<ApiResponse<MohongProduct>>('/admin/mohong/products', payload)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function updateAdminMohongProduct(id: number, payload: Record<string, unknown>) {
|
||||
const { data } = await apiClient.put<ApiResponse<MohongProduct>>(
|
||||
`/admin/mohong/products/${id}`,
|
||||
payload
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function deleteAdminMohongProduct(id: number) {
|
||||
const { data } = await apiClient.delete<ApiResponse<{ message: string }>>(
|
||||
`/admin/mohong/products/${id}`
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchAdminMohongOrders(params?: {
|
||||
status?: string
|
||||
keyword?: string
|
||||
page?: number
|
||||
page_size?: number
|
||||
}) {
|
||||
const { data } = await apiClient.get<ApiResponse<Paginated<MohongOrder>>>('/admin/mohong/orders', {
|
||||
params,
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchAdminMohongOrder(id: number | string) {
|
||||
const { data } = await apiClient.get<ApiResponse<MohongOrder>>(`/admin/mohong/orders/${id}`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function completeAdminMohongOrder(id: number, remark?: string) {
|
||||
const { data } = await apiClient.post<ApiResponse<MohongOrder>>(
|
||||
`/admin/mohong/orders/${id}/complete`,
|
||||
{ remark: remark || '' }
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function cancelAdminMohongOrder(id: number, reason?: string) {
|
||||
const { data } = await apiClient.post<ApiResponse<MohongOrder>>(
|
||||
`/admin/mohong/orders/${id}/cancel`,
|
||||
{ reason: reason || '' }
|
||||
)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchAdminMohongConfig() {
|
||||
const { data } = await apiClient.get<ApiResponse<MohongConfig>>('/admin/mohong/config')
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function updateAdminMohongConfig(payload: Partial<MohongConfig>) {
|
||||
const { data } = await apiClient.put<ApiResponse<MohongConfig>>('/admin/mohong/config', payload)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export function mohongOrderStatusLabel(status: string) {
|
||||
const map: Record<string, string> = {
|
||||
pending_payment: '待支付',
|
||||
paid: '已支付',
|
||||
completed: '已完成',
|
||||
cancelled: '已取消',
|
||||
refunded: '已退款',
|
||||
}
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
export function mohongProductStatusLabel(status: string) {
|
||||
const map: Record<string, string> = {
|
||||
draft: '草稿',
|
||||
on_sale: '上架中',
|
||||
off_sale: '已下架',
|
||||
}
|
||||
return map[status] || status
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import type { MohongProduct } from '@/features/mohong/api/mohong'
|
||||
import { formatCent } from '@/shared/utils/money'
|
||||
|
||||
const props = defineProps<{ product: MohongProduct }>()
|
||||
|
||||
const imgFailed = ref(false)
|
||||
const coverURL = computed(() => props.product.cover_url || props.product.image_urls?.[0] || '')
|
||||
const showImage = computed(() => Boolean(coverURL.value) && !imgFailed.value)
|
||||
const priceText = computed(() => props.product.price || formatCent(props.product.price_cent))
|
||||
const stockLabel = computed(() => {
|
||||
if (props.product.stock < 0) return ''
|
||||
if (props.product.stock === 0) return '缺货'
|
||||
return `剩${props.product.stock}`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink class="mohong-card" :to="`/mohong/${product.id}`">
|
||||
<div class="card-cover">
|
||||
<img
|
||||
v-if="showImage"
|
||||
:src="coverURL"
|
||||
:alt="product.title"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
@error="imgFailed = true"
|
||||
/>
|
||||
<div v-else class="empty-cover">{{ product.title.slice(0, 1) || '红' }}</div>
|
||||
<span v-if="stockLabel" class="stock-tag" :class="{ danger: product.stock === 0 }">
|
||||
{{ stockLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<h3 :title="product.title">{{ product.title }}</h3>
|
||||
<div class="row">
|
||||
<div class="price">
|
||||
<strong>¥{{ priceText }}</strong>
|
||||
<small v-if="product.original_price">¥{{ product.original_price }}</small>
|
||||
</div>
|
||||
<span class="buy">购买</span>
|
||||
</div>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mohong-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8edf5;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition:
|
||||
border-color 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
transform 0.18s ease;
|
||||
}
|
||||
|
||||
.mohong-card:hover {
|
||||
border-color: #ffb27a;
|
||||
box-shadow: 0 10px 24px rgba(255, 106, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #f4f6fa;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-cover img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.empty-cover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(145deg, #fff7ed, #ffe4cc);
|
||||
color: #ff6a00;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.stock-tag {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.62);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.stock-tag.danger {
|
||||
background: rgba(220, 38, 38, 0.88);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px 12px 12px;
|
||||
}
|
||||
|
||||
.card-body h3 {
|
||||
margin: 0;
|
||||
color: #1f2937;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.price strong {
|
||||
color: #ff6a00;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.price small {
|
||||
color: #c0c8d4;
|
||||
font-size: 12px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.buy {
|
||||
flex-shrink: 0;
|
||||
padding: 5px 10px;
|
||||
border-radius: 8px;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mohong-card:hover .buy {
|
||||
background: #ea580c;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,318 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { showToast } from 'vant'
|
||||
import MobilePayWaySelectPopup from '@/features/orders/components/MobilePayWaySelectPopup.vue'
|
||||
import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
|
||||
import { useMobilePayWaySelect } from '@/features/orders/composables/useMobilePayWaySelect'
|
||||
import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
|
||||
import {
|
||||
createMohongOrder,
|
||||
fetchMohongProduct,
|
||||
queryMohongPayment,
|
||||
startMohongPayment,
|
||||
type MohongProduct,
|
||||
} from '@/features/mohong/api/mohong'
|
||||
import { useSessionStore } from '@/stores/session'
|
||||
import { formatCent } from '@/shared/utils/money'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const session = useSessionStore()
|
||||
const product = ref<MohongProduct | null>(null)
|
||||
const loading = ref(true)
|
||||
const quantity = ref(1)
|
||||
const submitting = ref(false)
|
||||
const payWaySelect = useMobilePayWaySelect()
|
||||
const {
|
||||
paymentPopupVisible,
|
||||
activePayment,
|
||||
payURL,
|
||||
paymentQRCodeURL,
|
||||
qrGenerating,
|
||||
checkingPayment,
|
||||
openMobilePaymentCashier,
|
||||
refreshPaymentStatus,
|
||||
} = useMobilePaymentCashier({
|
||||
queryPayment: queryMohongPayment,
|
||||
paidMessage: '支付成功',
|
||||
})
|
||||
|
||||
const images = computed(() => {
|
||||
if (!product.value) return []
|
||||
const list = [...(product.value.image_urls || [])]
|
||||
if (product.value.cover_url && !list.includes(product.value.cover_url)) {
|
||||
list.unshift(product.value.cover_url)
|
||||
}
|
||||
return list
|
||||
})
|
||||
|
||||
const totalPrice = computed(() => {
|
||||
if (!product.value) return '0'
|
||||
const cent = product.value.price_cent * quantity.value
|
||||
return formatCent(cent)
|
||||
})
|
||||
|
||||
const canBuy = computed(() => {
|
||||
if (!product.value) return false
|
||||
if (product.value.stock === 0) return false
|
||||
if (product.value.stock > 0 && quantity.value > product.value.stock) return false
|
||||
return true
|
||||
})
|
||||
|
||||
onMounted(loadProduct)
|
||||
|
||||
async function loadProduct() {
|
||||
loading.value = true
|
||||
try {
|
||||
product.value = await fetchMohongProduct(String(route.params.id))
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, '商品不存在'), icon: 'cross' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function ensureAuthReady() {
|
||||
if (!session.isLoggedIn) {
|
||||
router.push({ path: '/m/login', query: { redirect: route.fullPath } })
|
||||
return false
|
||||
}
|
||||
try {
|
||||
await session.loadMe()
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
if (session.realnameStatus !== 'verified') {
|
||||
router.push({ path: '/m/realname', query: { redirect: route.fullPath } })
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
async function handleBuy() {
|
||||
if (!product.value || submitting.value) return
|
||||
if (!(await ensureAuthReady())) return
|
||||
if (!canBuy.value) {
|
||||
showToast({ message: '库存不足', icon: 'cross' })
|
||||
return
|
||||
}
|
||||
const payWay = await payWaySelect.select()
|
||||
if (!payWay) return
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const order = await createMohongOrder(product.value.id, quantity.value)
|
||||
const payment = await startMohongPayment(order.id, payWay)
|
||||
if (payment.paid || payment.status === 'paid') {
|
||||
showToast({ message: '支付成功', icon: 'passed' })
|
||||
await router.push(`/mohong/orders/${order.id}`)
|
||||
return
|
||||
}
|
||||
await openMobilePaymentCashier(payment, async () => {
|
||||
await router.push(`/mohong/orders/${order.id}`)
|
||||
})
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, '下单失败'), icon: 'cross' })
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="detail-shell">
|
||||
<header class="page-header">
|
||||
<button type="button" class="back-btn" @click="router.back()">
|
||||
<van-icon name="arrow-left" :size="20" />
|
||||
</button>
|
||||
<h1>商品详情</h1>
|
||||
</header>
|
||||
|
||||
<van-loading v-if="loading" class="state-loading" size="24px" vertical>加载中...</van-loading>
|
||||
<template v-else-if="product">
|
||||
<van-swipe v-if="images.length" class="gallery" :autoplay="4000">
|
||||
<van-swipe-item v-for="(url, idx) in images" :key="idx">
|
||||
<img :src="url" :alt="product.title" />
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
<div v-else class="gallery empty">暂无图片</div>
|
||||
|
||||
<section class="panel">
|
||||
<div class="price-row">
|
||||
<strong>¥{{ product.price || formatCent(product.price_cent) }}</strong>
|
||||
<span v-if="product.original_price" class="origin">¥{{ product.original_price }}</span>
|
||||
<em>/ {{ product.unit || '份' }}</em>
|
||||
</div>
|
||||
<h2>{{ product.title }}</h2>
|
||||
<p class="stock">
|
||||
库存：
|
||||
<template v-if="product.stock < 0">充足</template>
|
||||
<template v-else>{{ product.stock }}</template>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h3>商品说明</h3>
|
||||
<p class="desc">{{ product.description || '暂无说明' }}</p>
|
||||
</section>
|
||||
|
||||
<section class="panel qty-panel">
|
||||
<span>购买数量</span>
|
||||
<van-stepper v-model="quantity" :min="1" :max="product.stock > 0 ? product.stock : 99" />
|
||||
</section>
|
||||
|
||||
<div class="buy-bar">
|
||||
<div class="sum">
|
||||
合计 <strong>¥{{ totalPrice }}</strong>
|
||||
</div>
|
||||
<van-button
|
||||
type="primary"
|
||||
color="#ff6a00"
|
||||
round
|
||||
:loading="submitting"
|
||||
:disabled="!canBuy"
|
||||
@click="handleBuy"
|
||||
>
|
||||
{{ canBuy ? '立即购买' : '暂时缺货' }}
|
||||
</van-button>
|
||||
</div>
|
||||
</template>
|
||||
<van-empty v-else description="商品不存在" />
|
||||
|
||||
<MobilePayWaySelectPopup
|
||||
v-model:show="payWaySelect.visible.value"
|
||||
@choose="payWaySelect.choose"
|
||||
@closed="payWaySelect.handleClosed"
|
||||
/>
|
||||
<MobilePaymentCashierPopup
|
||||
v-model:show="paymentPopupVisible"
|
||||
:payment="activePayment"
|
||||
:pay-url="payURL"
|
||||
:qr-code-url="paymentQRCodeURL"
|
||||
:qr-generating="qrGenerating"
|
||||
:checking="checkingPayment"
|
||||
@refresh="refreshPaymentStatus(false)"
|
||||
/>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.detail-shell {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fb;
|
||||
padding-bottom: 88px;
|
||||
}
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
}
|
||||
.back-btn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
}
|
||||
.state-loading {
|
||||
padding: 48px 0;
|
||||
}
|
||||
.gallery {
|
||||
height: 280px;
|
||||
background: #fff;
|
||||
}
|
||||
.gallery img {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.gallery.empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #a0aec0;
|
||||
}
|
||||
.panel {
|
||||
margin: 10px 12px;
|
||||
padding: 14px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
.price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.price-row strong {
|
||||
color: #ff6a00;
|
||||
font-size: 24px;
|
||||
}
|
||||
.price-row .origin {
|
||||
color: #b0b8c4;
|
||||
text-decoration: line-through;
|
||||
font-size: 13px;
|
||||
}
|
||||
.price-row em {
|
||||
font-style: normal;
|
||||
color: #8a94a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
.panel h2 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 17px;
|
||||
color: #17233d;
|
||||
}
|
||||
.stock,
|
||||
.desc {
|
||||
margin: 0;
|
||||
color: #6b7a90;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.panel h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 14px;
|
||||
color: #17233d;
|
||||
}
|
||||
.qty-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.buy-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
border-top: 1px solid #eef1f5;
|
||||
}
|
||||
.sum {
|
||||
color: #6b7a90;
|
||||
font-size: 13px;
|
||||
}
|
||||
.sum strong {
|
||||
color: #ff6a00;
|
||||
font-size: 20px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.buy-bar :deep(.van-button) {
|
||||
min-width: 128px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,386 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { showToast } from 'vant'
|
||||
import MobileBottomNav from '@/components/MobileBottomNav.vue'
|
||||
import {
|
||||
fetchMohongCategories,
|
||||
fetchMohongProducts,
|
||||
type MohongCategory,
|
||||
type MohongProduct,
|
||||
} from '@/features/mohong/api/mohong'
|
||||
import { formatCent } from '@/shared/utils/money'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const loading = ref(false)
|
||||
const products = ref<MohongProduct[]>([])
|
||||
const categories = ref<MohongCategory[]>([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const hasMore = ref(true)
|
||||
const loadingMore = ref(false)
|
||||
const keyword = ref('')
|
||||
const activeCategoryId = ref<number | null>(null)
|
||||
const failedCover = ref<Record<number, boolean>>({})
|
||||
let searchTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
onMounted(async () => {
|
||||
await loadCategories()
|
||||
applyRouteQuery()
|
||||
await loadProducts(true)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.query,
|
||||
() => {
|
||||
applyRouteQuery()
|
||||
loadProducts(true)
|
||||
}
|
||||
)
|
||||
|
||||
function applyRouteQuery() {
|
||||
const q = route.query
|
||||
keyword.value = typeof q.keyword === 'string' ? q.keyword : ''
|
||||
const cat = Number(q.category_id || 0)
|
||||
activeCategoryId.value = cat > 0 ? cat : null
|
||||
}
|
||||
|
||||
async function loadCategories() {
|
||||
try {
|
||||
categories.value = await fetchMohongCategories()
|
||||
if (!activeCategoryId.value && categories.value.length) {
|
||||
const dahong = categories.value.find(c => c.name === '大红')
|
||||
const first = categories.value.find(c => c.product_count > 0) || categories.value[0]
|
||||
if (dahong || first) {
|
||||
activeCategoryId.value = (dahong || first)!.id
|
||||
syncQuery()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, '加载分类失败'), icon: 'cross' })
|
||||
}
|
||||
}
|
||||
|
||||
async function loadProducts(reset = true) {
|
||||
if (loadingMore.value) return
|
||||
if (reset) {
|
||||
loading.value = true
|
||||
page.value = 1
|
||||
hasMore.value = true
|
||||
} else {
|
||||
if (!hasMore.value) return
|
||||
loadingMore.value = true
|
||||
}
|
||||
try {
|
||||
const result = await fetchMohongProducts({
|
||||
page: page.value,
|
||||
page_size: 20,
|
||||
keyword: keyword.value.trim() || undefined,
|
||||
category_id: activeCategoryId.value || undefined,
|
||||
})
|
||||
products.value = reset ? result.items || [] : [...products.value, ...(result.items || [])]
|
||||
total.value = result.total || 0
|
||||
hasMore.value = products.value.length < total.value
|
||||
page.value += 1
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, '加载商品失败'), icon: 'cross' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectCategory(id: number | null) {
|
||||
activeCategoryId.value = id
|
||||
syncQuery()
|
||||
loadProducts(true)
|
||||
}
|
||||
|
||||
function onSearchInput() {
|
||||
if (searchTimer) clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => {
|
||||
syncQuery()
|
||||
loadProducts(true)
|
||||
}, 280)
|
||||
}
|
||||
|
||||
function syncQuery() {
|
||||
const query: Record<string, string> = {}
|
||||
if (keyword.value.trim()) query.keyword = keyword.value.trim()
|
||||
if (activeCategoryId.value) query.category_id = String(activeCategoryId.value)
|
||||
router.replace({ path: '/mohong', query })
|
||||
}
|
||||
|
||||
function goDetail(id: number) {
|
||||
router.push(`/mohong/${id}`)
|
||||
}
|
||||
|
||||
function markCoverFailed(id: number) {
|
||||
failedCover.value = { ...failedCover.value, [id]: true }
|
||||
}
|
||||
|
||||
function showCover(item: MohongProduct) {
|
||||
return Boolean(item.cover_url) && !failedCover.value[item.id]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="mohong-shell">
|
||||
<header class="page-header">
|
||||
<button type="button" class="back-btn" @click="router.push('/')">
|
||||
<van-icon name="arrow-left" :size="20" />
|
||||
</button>
|
||||
<div class="search-wrap">
|
||||
<van-icon name="search" :size="16" />
|
||||
<input
|
||||
v-model="keyword"
|
||||
type="search"
|
||||
placeholder="搜索商品"
|
||||
@input="onSearchInput"
|
||||
/>
|
||||
</div>
|
||||
<button type="button" class="orders-btn" @click="router.push('/mohong/orders')">订单</button>
|
||||
</header>
|
||||
|
||||
<div class="shop-body">
|
||||
<aside class="cat-sidebar">
|
||||
<button
|
||||
type="button"
|
||||
class="cat-item"
|
||||
:class="{ active: !activeCategoryId }"
|
||||
@click="selectCategory(null)"
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
<button
|
||||
v-for="cat in categories"
|
||||
:key="cat.id"
|
||||
type="button"
|
||||
class="cat-item"
|
||||
:class="{ active: activeCategoryId === cat.id }"
|
||||
@click="selectCategory(cat.id)"
|
||||
>
|
||||
{{ cat.name }}
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<section class="list-panel">
|
||||
<van-loading v-if="loading" class="state-loading" size="24px" vertical>加载中...</van-loading>
|
||||
<van-empty v-else-if="products.length === 0" description="暂无商品" />
|
||||
<div v-else class="product-list">
|
||||
<button
|
||||
v-for="item in products"
|
||||
:key="item.id"
|
||||
type="button"
|
||||
class="product-row"
|
||||
@click="goDetail(item.id)"
|
||||
>
|
||||
<div class="cover">
|
||||
<img
|
||||
v-if="showCover(item)"
|
||||
:src="item.cover_url"
|
||||
:alt="item.title"
|
||||
@error="markCoverFailed(item.id)"
|
||||
/>
|
||||
<span v-else class="cover-fallback">{{ item.title.slice(0, 1) || '红' }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<div class="price-row">
|
||||
<strong>¥{{ item.price || formatCent(item.price_cent) }}</strong>
|
||||
<small v-if="item.original_price">¥{{ item.original_price }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<span class="buy-icon">购</span>
|
||||
</button>
|
||||
</div>
|
||||
<van-button
|
||||
v-if="hasMore && products.length"
|
||||
size="small"
|
||||
plain
|
||||
block
|
||||
:loading="loadingMore"
|
||||
class="load-more"
|
||||
@click="loadProducts(false)"
|
||||
>
|
||||
加载更多
|
||||
</van-button>
|
||||
</section>
|
||||
</div>
|
||||
<MobileBottomNav />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mohong-shell {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fb;
|
||||
padding-bottom: calc(64px + env(safe-area-inset-bottom));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
}
|
||||
.back-btn,
|
||||
.orders-btn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #17233d;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.orders-btn {
|
||||
color: #ff6a00;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.search-wrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: #f3f5f9;
|
||||
color: #94a3b8;
|
||||
}
|
||||
.search-wrap input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
color: #17233d;
|
||||
}
|
||||
.shop-body {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 88px minmax(0, 1fr);
|
||||
min-height: 0;
|
||||
}
|
||||
.cat-sidebar {
|
||||
background: #f7f8fa;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0 16px;
|
||||
}
|
||||
.cat-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 14px 8px;
|
||||
border: 0;
|
||||
border-left: 3px solid transparent;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cat-item.active {
|
||||
background: #fff;
|
||||
border-left-color: #ff4d4f;
|
||||
color: #ff4d4f;
|
||||
font-weight: 700;
|
||||
}
|
||||
.list-panel {
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
padding: 0 0 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
.state-loading {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.product-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.product-row {
|
||||
display: grid;
|
||||
grid-template-columns: 88px minmax(0, 1fr) 36px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
.cover {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: #111;
|
||||
}
|
||||
.cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.cover-fallback {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(145deg, #fff7ed, #ffe4cc);
|
||||
color: #ff6a00;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.info h2 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 15px;
|
||||
color: #17233d;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
.price-row strong {
|
||||
color: #ff4d4f;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.price-row small {
|
||||
color: #c0c8d4;
|
||||
text-decoration: line-through;
|
||||
font-size: 12px;
|
||||
}
|
||||
.buy-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #ffb4b4;
|
||||
color: #ff4d4f;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.load-more {
|
||||
margin: 12px;
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,339 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { showToast } from 'vant'
|
||||
import MobilePayWaySelectPopup from '@/features/orders/components/MobilePayWaySelectPopup.vue'
|
||||
import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
|
||||
import { useMobilePayWaySelect } from '@/features/orders/composables/useMobilePayWaySelect'
|
||||
import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
|
||||
import {
|
||||
cancelMyMohongOrder,
|
||||
fetchMyMohongOrder,
|
||||
mohongOrderStatusLabel,
|
||||
queryMohongPayment,
|
||||
startMohongPayment,
|
||||
type MohongOrder,
|
||||
} from '@/features/mohong/api/mohong'
|
||||
import { formatCent } from '@/shared/utils/money'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const order = ref<MohongOrder | null>(null)
|
||||
const loading = ref(true)
|
||||
const acting = ref(false)
|
||||
const payWaySelect = useMobilePayWaySelect()
|
||||
const {
|
||||
paymentPopupVisible,
|
||||
activePayment,
|
||||
payURL,
|
||||
paymentQRCodeURL,
|
||||
qrGenerating,
|
||||
checkingPayment,
|
||||
openMobilePaymentCashier,
|
||||
refreshPaymentStatus,
|
||||
} = useMobilePaymentCashier({
|
||||
queryPayment: queryMohongPayment,
|
||||
paidMessage: '支付成功',
|
||||
})
|
||||
|
||||
const statusText = computed(() =>
|
||||
order.value ? mohongOrderStatusLabel(order.value.status) : ''
|
||||
)
|
||||
|
||||
onMounted(loadOrder)
|
||||
|
||||
async function loadOrder() {
|
||||
loading.value = true
|
||||
try {
|
||||
order.value = await fetchMyMohongOrder(String(route.params.id))
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, '订单不存在'), icon: 'cross' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePay() {
|
||||
if (!order.value || acting.value) return
|
||||
const payWay = await payWaySelect.select()
|
||||
if (!payWay) return
|
||||
acting.value = true
|
||||
try {
|
||||
const payment = await startMohongPayment(order.value.id, payWay)
|
||||
if (payment.paid || payment.status === 'paid') {
|
||||
showToast({ message: '支付成功', icon: 'passed' })
|
||||
await loadOrder()
|
||||
return
|
||||
}
|
||||
await openMobilePaymentCashier(payment, async () => {
|
||||
await loadOrder()
|
||||
})
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, '支付失败'), icon: 'cross' })
|
||||
} finally {
|
||||
acting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
if (!order.value || acting.value) return
|
||||
acting.value = true
|
||||
try {
|
||||
order.value = await cancelMyMohongOrder(order.value.id)
|
||||
showToast({ message: '已取消', icon: 'passed' })
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, '取消失败'), icon: 'cross' })
|
||||
} finally {
|
||||
acting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function copyText() {
|
||||
if (!order.value?.copy_text) {
|
||||
showToast({ message: '暂无可复制信息', icon: 'warning-o' })
|
||||
return
|
||||
}
|
||||
try {
|
||||
await navigator.clipboard.writeText(order.value.copy_text)
|
||||
showToast({ message: '已复制订单信息', icon: 'passed' })
|
||||
} catch {
|
||||
showToast({ message: '复制失败', icon: 'cross' })
|
||||
}
|
||||
}
|
||||
|
||||
function openChat() {
|
||||
if (!order.value?.conversation_id) {
|
||||
showToast({ message: '群聊尚未创建', icon: 'warning-o' })
|
||||
return
|
||||
}
|
||||
router.push(`/chats/${order.value.conversation_id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="order-shell">
|
||||
<header class="page-header">
|
||||
<button type="button" class="back-btn" @click="router.back()">
|
||||
<van-icon name="arrow-left" :size="20" />
|
||||
</button>
|
||||
<h1>订单详情</h1>
|
||||
</header>
|
||||
|
||||
<van-loading v-if="loading" class="state-loading" size="24px" vertical>加载中...</van-loading>
|
||||
<template v-else-if="order">
|
||||
<section class="panel status-panel">
|
||||
<strong>{{ statusText }}</strong>
|
||||
<p>订单号 {{ order.order_no }}</p>
|
||||
</section>
|
||||
|
||||
<section class="panel product-panel">
|
||||
<div class="cover">
|
||||
<img v-if="order.product_cover_url" :src="order.product_cover_url" alt="" />
|
||||
<span v-else>图</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2>{{ order.product_title }}</h2>
|
||||
<p>
|
||||
¥{{ order.unit_price || formatCent(order.unit_price_cent) }} × {{ order.quantity }}
|
||||
{{ order.product_unit }}
|
||||
</p>
|
||||
<strong>合计 ¥{{ order.amount || formatCent(order.amount_cent) }}</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="order.copy_text" class="panel">
|
||||
<div class="copy-head">
|
||||
<h3>订单信息（发给客服）</h3>
|
||||
<button type="button" @click="copyText">一键复制</button>
|
||||
</div>
|
||||
<pre class="copy-text">{{ order.copy_text }}</pre>
|
||||
</section>
|
||||
|
||||
<section v-if="order.qrcode_url_snapshot" class="panel qr-panel">
|
||||
<h3>客服二维码</h3>
|
||||
<img :src="order.qrcode_url_snapshot" alt="客服二维码" />
|
||||
</section>
|
||||
|
||||
<div class="actions">
|
||||
<van-button
|
||||
v-if="order.status === 'pending_payment'"
|
||||
type="primary"
|
||||
color="#ff6a00"
|
||||
block
|
||||
round
|
||||
:loading="acting"
|
||||
@click="handlePay"
|
||||
>
|
||||
去支付
|
||||
</van-button>
|
||||
<van-button
|
||||
v-if="order.status === 'pending_payment'"
|
||||
plain
|
||||
block
|
||||
round
|
||||
:loading="acting"
|
||||
@click="handleCancel"
|
||||
>
|
||||
取消订单
|
||||
</van-button>
|
||||
<van-button
|
||||
v-if="order.conversation_id"
|
||||
type="primary"
|
||||
color="#ff6a00"
|
||||
block
|
||||
round
|
||||
@click="openChat"
|
||||
>
|
||||
进入订单群
|
||||
</van-button>
|
||||
<van-button v-if="order.copy_text" plain block round @click="copyText">
|
||||
复制订单信息
|
||||
</van-button>
|
||||
</div>
|
||||
</template>
|
||||
<van-empty v-else description="订单不存在" />
|
||||
|
||||
<MobilePayWaySelectPopup
|
||||
v-model:show="payWaySelect.visible.value"
|
||||
@choose="payWaySelect.choose"
|
||||
@closed="payWaySelect.handleClosed"
|
||||
/>
|
||||
<MobilePaymentCashierPopup
|
||||
v-model:show="paymentPopupVisible"
|
||||
:payment="activePayment"
|
||||
:pay-url="payURL"
|
||||
:qr-code-url="paymentQRCodeURL"
|
||||
:qr-generating="qrGenerating"
|
||||
:checking="checkingPayment"
|
||||
@refresh="refreshPaymentStatus(false)"
|
||||
/>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.order-shell {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fb;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
}
|
||||
.back-btn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
}
|
||||
.state-loading {
|
||||
padding: 48px 0;
|
||||
}
|
||||
.panel {
|
||||
margin: 10px 12px;
|
||||
padding: 14px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
.status-panel strong {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
color: #ff6a00;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.status-panel p {
|
||||
margin: 0;
|
||||
color: #8a94a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
.product-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 72px 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.cover {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: #f0f3f8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #a0aec0;
|
||||
}
|
||||
.cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.product-panel h2 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.product-panel p {
|
||||
margin: 0 0 6px;
|
||||
color: #8a94a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
.product-panel strong {
|
||||
color: #ff6a00;
|
||||
}
|
||||
.copy-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.copy-head h3,
|
||||
.qr-panel h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.copy-head button {
|
||||
border: 0;
|
||||
background: #fff4ea;
|
||||
color: #ff6a00;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.copy-text {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: #f7f9fc;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
.qr-panel {
|
||||
text-align: center;
|
||||
}
|
||||
.qr-panel img {
|
||||
margin-top: 10px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
object-fit: contain;
|
||||
border-radius: 12px;
|
||||
background: #f7f9fc;
|
||||
}
|
||||
.actions {
|
||||
padding: 8px 12px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast } from 'vant'
|
||||
import {
|
||||
fetchMyMohongOrders,
|
||||
mohongOrderStatusLabel,
|
||||
type MohongOrder,
|
||||
} from '@/features/mohong/api/mohong'
|
||||
import { formatCent } from '@/shared/utils/money'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const orders = ref<MohongOrder[]>([])
|
||||
|
||||
onMounted(loadOrders)
|
||||
|
||||
async function loadOrders() {
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await fetchMyMohongOrders({ page: 1, page_size: 50 })
|
||||
orders.value = result.items || []
|
||||
} catch (error) {
|
||||
showToast({ message: readError(error, '加载订单失败'), icon: 'cross' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="orders-shell">
|
||||
<header class="page-header">
|
||||
<button type="button" class="back-btn" @click="router.back()">
|
||||
<van-icon name="arrow-left" :size="20" />
|
||||
</button>
|
||||
<h1>摸大红订单</h1>
|
||||
</header>
|
||||
|
||||
<van-loading v-if="loading" class="state-loading" size="24px" vertical>加载中...</van-loading>
|
||||
<van-empty v-else-if="orders.length === 0" description="暂无订单" />
|
||||
<div v-else class="list">
|
||||
<button
|
||||
v-for="item in orders"
|
||||
:key="item.id"
|
||||
type="button"
|
||||
class="card"
|
||||
@click="router.push(`/mohong/orders/${item.id}`)"
|
||||
>
|
||||
<div class="top">
|
||||
<span>{{ item.order_no }}</span>
|
||||
<em>{{ mohongOrderStatusLabel(item.status) }}</em>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="cover">
|
||||
<img v-if="item.product_cover_url" :src="item.product_cover_url" alt="" />
|
||||
<span v-else>图</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2>{{ item.product_title }}</h2>
|
||||
<p>x{{ item.quantity }} · ¥{{ item.amount || formatCent(item.amount_cent) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.orders-shell {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
}
|
||||
.back-btn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
}
|
||||
.state-loading {
|
||||
padding: 48px 0;
|
||||
}
|
||||
.list {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.card {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
color: #8a94a6;
|
||||
}
|
||||
.top em {
|
||||
font-style: normal;
|
||||
color: #ff6a00;
|
||||
font-weight: 600;
|
||||
}
|
||||
.body {
|
||||
display: grid;
|
||||
grid-template-columns: 64px 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.cover {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: #f0f3f8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #a0aec0;
|
||||
}
|
||||
.cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.body h2 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 15px;
|
||||
color: #17233d;
|
||||
}
|
||||
.body p {
|
||||
margin: 0;
|
||||
color: #8a94a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,531 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
createMohongOrder,
|
||||
fetchMohongProduct,
|
||||
queryMohongPayment,
|
||||
startMohongPayment,
|
||||
type MohongProduct,
|
||||
} from '@/features/mohong/api/mohong'
|
||||
import type { PaymentPayWay } from '@/features/orders/api/orders'
|
||||
import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPaymentCashier'
|
||||
import { useSessionStore } from '@/stores/session'
|
||||
import { formatCent } from '@/shared/utils/money'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const session = useSessionStore()
|
||||
const product = ref<MohongProduct | null>(null)
|
||||
const loading = ref(true)
|
||||
const quantity = ref(1)
|
||||
const submitting = ref(false)
|
||||
const activeImage = ref('')
|
||||
const payWayDialogVisible = ref(false)
|
||||
let payWayResolver: ((value: PaymentPayWay | null) => void) | null = null
|
||||
|
||||
const cashier = useOrderPaymentCashier({
|
||||
notifySuccess: msg => ElMessage.success(msg),
|
||||
notifyError: msg => ElMessage.error(msg),
|
||||
notifyInfo: msg => ElMessage.info(msg),
|
||||
notifyFallback: msg => ElMessage.warning(msg),
|
||||
paidMessage: '支付成功',
|
||||
pollIntervalMs: 3000,
|
||||
qrWidth: 240,
|
||||
queryPayment: queryMohongPayment,
|
||||
})
|
||||
|
||||
const images = computed(() => {
|
||||
if (!product.value) return [] as string[]
|
||||
const list = [...(product.value.image_urls || [])]
|
||||
if (product.value.cover_url && !list.includes(product.value.cover_url)) {
|
||||
list.unshift(product.value.cover_url)
|
||||
}
|
||||
return list
|
||||
})
|
||||
|
||||
const totalPrice = computed(() => {
|
||||
if (!product.value) return '0.0'
|
||||
return formatCent(product.value.price_cent * quantity.value)
|
||||
})
|
||||
|
||||
const canBuy = computed(() => {
|
||||
if (!product.value) return false
|
||||
if (product.value.stock === 0) return false
|
||||
if (product.value.stock > 0 && quantity.value > product.value.stock) return false
|
||||
return true
|
||||
})
|
||||
|
||||
const activePayWayLabel = computed(() => {
|
||||
const map: Record<string, string> = { WXZF: '微信', ZFBZF: '支付宝' }
|
||||
return map[cashier.activePayment.value?.pay_way || ''] || '微信/支付宝'
|
||||
})
|
||||
|
||||
onMounted(loadProduct)
|
||||
|
||||
async function loadProduct() {
|
||||
loading.value = true
|
||||
try {
|
||||
product.value = await fetchMohongProduct(String(route.params.id))
|
||||
activeImage.value = images.value[0] || ''
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '商品不存在'))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectPayWay(): Promise<PaymentPayWay | null> {
|
||||
payWayDialogVisible.value = true
|
||||
return new Promise(resolve => {
|
||||
payWayResolver = resolve
|
||||
})
|
||||
}
|
||||
|
||||
function choosePayWay(payWay: PaymentPayWay) {
|
||||
payWayResolver?.(payWay)
|
||||
payWayResolver = null
|
||||
payWayDialogVisible.value = false
|
||||
}
|
||||
|
||||
function handlePayWayDialogClosed() {
|
||||
payWayResolver?.(null)
|
||||
payWayResolver = null
|
||||
}
|
||||
|
||||
async function ensureAuthReady() {
|
||||
if (!session.isLoggedIn) {
|
||||
router.push({ path: '/login', query: { redirect: route.fullPath } })
|
||||
return false
|
||||
}
|
||||
try {
|
||||
await session.loadMe()
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
if (session.realnameStatus !== 'verified') {
|
||||
router.push({ path: '/realname', query: { redirect: route.fullPath } })
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
async function handleBuy() {
|
||||
if (!product.value || submitting.value) return
|
||||
if (!(await ensureAuthReady())) return
|
||||
if (!canBuy.value) {
|
||||
ElMessage.warning('库存不足')
|
||||
return
|
||||
}
|
||||
const payWay = await selectPayWay()
|
||||
if (!payWay) return
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const order = await createMohongOrder(product.value.id, quantity.value)
|
||||
const payment = await startMohongPayment(order.id, payWay)
|
||||
if (payment.paid || payment.status === 'paid') {
|
||||
ElMessage.success('支付成功')
|
||||
await router.push(`/mohong/orders/${order.id}`)
|
||||
return
|
||||
}
|
||||
await cashier.openPaymentCashier(payment, async () => {
|
||||
await router.push(`/mohong/orders/${order.id}`)
|
||||
})
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '下单失败'))
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-loading="loading" class="mohong-detail-page">
|
||||
<template v-if="product">
|
||||
<div class="detail-layout">
|
||||
<div class="gallery-panel">
|
||||
<div class="main-image">
|
||||
<img v-if="activeImage" :src="activeImage" :alt="product.title" />
|
||||
<div v-else class="empty-image">暂无图片</div>
|
||||
</div>
|
||||
<div v-if="images.length > 1" class="thumbs">
|
||||
<button
|
||||
v-for="(url, idx) in images"
|
||||
:key="idx"
|
||||
type="button"
|
||||
class="thumb"
|
||||
:class="{ active: url === activeImage }"
|
||||
@click="activeImage = url"
|
||||
>
|
||||
<img :src="url" :alt="`${product.title}-${idx + 1}`" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-panel">
|
||||
<p class="eyebrow">摸大红商品</p>
|
||||
<h1>{{ product.title }}</h1>
|
||||
<p class="desc">{{ product.description || '暂无说明' }}</p>
|
||||
|
||||
<div class="price-box">
|
||||
<div>
|
||||
<small>售价</small>
|
||||
<strong>¥{{ product.price || formatCent(product.price_cent) }}</strong>
|
||||
<em>/ {{ product.unit || '份' }}</em>
|
||||
</div>
|
||||
<span v-if="product.original_price" class="origin">
|
||||
原价 ¥{{ product.original_price }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="meta-rows">
|
||||
<div class="meta-row">
|
||||
<span>库存</span>
|
||||
<strong>
|
||||
<template v-if="product.stock < 0">充足</template>
|
||||
<template v-else>{{ product.stock }}</template>
|
||||
</strong>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span>数量</span>
|
||||
<el-input-number
|
||||
v-model="quantity"
|
||||
:min="1"
|
||||
:max="product.stock > 0 ? product.stock : 99"
|
||||
/>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span>合计</span>
|
||||
<strong class="total">¥{{ totalPrice }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
color="#ff6a00"
|
||||
:loading="submitting"
|
||||
:disabled="!canBuy"
|
||||
@click="handleBuy"
|
||||
>
|
||||
{{ canBuy ? '立即购买' : '暂时缺货' }}
|
||||
</el-button>
|
||||
<el-button size="large" @click="router.push('/mohong')">返回列表</el-button>
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
<p>购买须知</p>
|
||||
<ul>
|
||||
<li>下单需登录并完成实名认证</li>
|
||||
<li>支付成功后自动创建订单群，发送固定客服二维码</li>
|
||||
<li>群内与订单详情可一键复制订单信息发给客服</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty v-else-if="!loading" description="商品不存在" />
|
||||
|
||||
<el-dialog
|
||||
v-model="payWayDialogVisible"
|
||||
title="选择支付方式"
|
||||
width="420px"
|
||||
append-to-body
|
||||
@closed="handlePayWayDialogClosed"
|
||||
>
|
||||
<p class="pay-way-tip">选择渠道后将生成对应的支付二维码</p>
|
||||
<div class="pay-way-options">
|
||||
<button type="button" class="pay-way-option wechat" @click="choosePayWay('WXZF')">
|
||||
<strong>微信支付</strong>
|
||||
<small>使用微信扫码完成支付</small>
|
||||
</button>
|
||||
<button type="button" class="pay-way-option alipay" @click="choosePayWay('ZFBZF')">
|
||||
<strong>支付宝支付</strong>
|
||||
<small>使用支付宝扫码完成支付</small>
|
||||
</button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="cashier.paymentPopupVisible.value"
|
||||
title="订单支付"
|
||||
width="520px"
|
||||
append-to-body
|
||||
@closed="cashier.stopPaymentPolling"
|
||||
>
|
||||
<div v-if="cashier.activePayment.value" class="pay-dialog-body">
|
||||
<div class="pay-amount">
|
||||
支付金额
|
||||
<strong>¥{{ formatCent(cashier.activePayment.value.amount_cent) }}</strong>
|
||||
</div>
|
||||
<div v-if="cashier.payURL.value" class="pay-qr">
|
||||
<img
|
||||
v-if="cashier.paymentQRCodeURL.value"
|
||||
:src="cashier.paymentQRCodeURL.value"
|
||||
alt="支付二维码"
|
||||
/>
|
||||
<p>请使用{{ activePayWayLabel }}扫码支付</p>
|
||||
</div>
|
||||
<p v-else class="pay-hint">支付单已创建，请完成付款后刷新状态。</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="cashier.checkingPayment.value"
|
||||
@click="cashier.refreshPaymentStatus(false)"
|
||||
>
|
||||
我已支付，刷新状态
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mohong-detail-page {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.detail-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.gallery-panel,
|
||||
.info-panel {
|
||||
background: #fff;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 16px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.main-image {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #f3f6fb;
|
||||
}
|
||||
|
||||
.main-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.empty-image {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
.thumbs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
padding: 0;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: #f3f6fb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.thumb.active {
|
||||
border-color: #ff6a00;
|
||||
}
|
||||
|
||||
.thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: #ff6a00;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.info-panel h1 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 28px;
|
||||
color: #17233d;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin: 0 0 18px;
|
||||
color: #6b7a90;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background: #fff7ed;
|
||||
}
|
||||
|
||||
.price-box small {
|
||||
display: block;
|
||||
color: #9a3412;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.price-box strong {
|
||||
color: #ff6a00;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.price-box em {
|
||||
margin-left: 6px;
|
||||
color: #9a3412;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.origin {
|
||||
color: #b0b8c4;
|
||||
text-decoration: line-through;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.meta-rows {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
color: #6b7a90;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.meta-row .total {
|
||||
color: #ff6a00;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #eef1f5;
|
||||
color: #6b7a90;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tips p {
|
||||
margin: 0 0 8px;
|
||||
color: #17233d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tips ul {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.pay-way-tip {
|
||||
margin: 0 0 14px;
|
||||
color: #6b7a90;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pay-way-options {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pay-way-option {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #e7edf6;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pay-way-option:hover {
|
||||
border-color: #ff6a00;
|
||||
}
|
||||
|
||||
.pay-way-option strong {
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.pay-way-option small {
|
||||
color: #8a94a6;
|
||||
}
|
||||
|
||||
.pay-dialog-body {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pay-amount {
|
||||
color: #6b7a90;
|
||||
}
|
||||
|
||||
.pay-amount strong {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
color: #ff6a00;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.pay-qr img {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 12px;
|
||||
background: #f7f9fc;
|
||||
}
|
||||
|
||||
.pay-hint {
|
||||
color: #6b7a90;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.detail-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,406 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Search, Tickets } from '@element-plus/icons-vue'
|
||||
import MohongProductCard from '@/features/mohong/components/MohongProductCard.vue'
|
||||
import {
|
||||
fetchMohongCategories,
|
||||
fetchMohongProducts,
|
||||
type MohongCategory,
|
||||
type MohongProduct,
|
||||
} from '@/features/mohong/api/mohong'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const products = ref<MohongProduct[]>([])
|
||||
const categories = ref<MohongCategory[]>([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const hasMore = ref(true)
|
||||
const keyword = ref('')
|
||||
const activeCategoryId = ref<number | null>(null)
|
||||
let searchTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
onMounted(async () => {
|
||||
await loadCategories()
|
||||
applyRouteQuery()
|
||||
await loadProducts(true)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.query,
|
||||
() => {
|
||||
applyRouteQuery()
|
||||
loadProducts(true)
|
||||
}
|
||||
)
|
||||
|
||||
function applyRouteQuery() {
|
||||
const q = route.query
|
||||
keyword.value = typeof q.keyword === 'string' ? q.keyword : ''
|
||||
const cat = Number(q.category_id || 0)
|
||||
activeCategoryId.value = cat > 0 ? cat : null
|
||||
}
|
||||
|
||||
async function loadCategories() {
|
||||
try {
|
||||
categories.value = await fetchMohongCategories()
|
||||
// 默认选中「大红」或第一个有商品的分类
|
||||
if (!activeCategoryId.value && categories.value.length) {
|
||||
const dahong = categories.value.find(c => c.name === '大红')
|
||||
const first = categories.value.find(c => c.product_count > 0) || categories.value[0]
|
||||
if (dahong || first) {
|
||||
activeCategoryId.value = (dahong || first)!.id
|
||||
syncQuery()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '加载分类失败'))
|
||||
}
|
||||
}
|
||||
|
||||
async function loadProducts(reset = true) {
|
||||
if (loadingMore.value) return
|
||||
if (reset) {
|
||||
loading.value = true
|
||||
page.value = 1
|
||||
hasMore.value = true
|
||||
} else {
|
||||
if (!hasMore.value) return
|
||||
loadingMore.value = true
|
||||
}
|
||||
try {
|
||||
const result = await fetchMohongProducts({
|
||||
page: page.value,
|
||||
page_size: 24,
|
||||
keyword: keyword.value.trim() || undefined,
|
||||
category_id: activeCategoryId.value || undefined,
|
||||
})
|
||||
const items = result.items || []
|
||||
products.value = reset ? items : [...products.value, ...items]
|
||||
total.value = result.total || 0
|
||||
hasMore.value = products.value.length < total.value
|
||||
page.value += 1
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '加载商品失败'))
|
||||
} finally {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectCategory(id: number | null) {
|
||||
activeCategoryId.value = id
|
||||
syncQuery()
|
||||
loadProducts(true)
|
||||
}
|
||||
|
||||
function onKeywordInput() {
|
||||
if (searchTimer) clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => {
|
||||
syncQuery()
|
||||
loadProducts(true)
|
||||
}, 280)
|
||||
}
|
||||
|
||||
function syncQuery() {
|
||||
const query: Record<string, string> = {}
|
||||
if (keyword.value.trim()) query.keyword = keyword.value.trim()
|
||||
if (activeCategoryId.value) query.category_id = String(activeCategoryId.value)
|
||||
router.replace({ path: '/mohong', query })
|
||||
}
|
||||
|
||||
const activeCategoryName = () => {
|
||||
if (!activeCategoryId.value) return '全部'
|
||||
return categories.value.find(c => c.id === activeCategoryId.value)?.name || '全部'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mohong-pc-page">
|
||||
<header class="toolbar">
|
||||
<div class="title-block">
|
||||
<h1>摸大红</h1>
|
||||
<span class="count">{{ total }} 件</span>
|
||||
<span class="tip">{{ activeCategoryName() }} · 支付后自动进群</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="search-box">
|
||||
<el-icon><Search /></el-icon>
|
||||
<input
|
||||
v-model="keyword"
|
||||
type="search"
|
||||
placeholder="搜索商品名称"
|
||||
@input="onKeywordInput"
|
||||
/>
|
||||
</div>
|
||||
<el-button size="small" :icon="Tickets" @click="router.push('/mohong/orders')">
|
||||
我的订单
|
||||
</el-button>
|
||||
<el-button size="small" plain @click="router.push('/')">租号大厅</el-button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="shop-layout">
|
||||
<aside class="cat-sidebar">
|
||||
<button
|
||||
type="button"
|
||||
class="cat-item"
|
||||
:class="{ active: !activeCategoryId }"
|
||||
@click="selectCategory(null)"
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
<button
|
||||
v-for="cat in categories"
|
||||
:key="cat.id"
|
||||
type="button"
|
||||
class="cat-item"
|
||||
:class="{ active: activeCategoryId === cat.id }"
|
||||
@click="selectCategory(cat.id)"
|
||||
>
|
||||
<span>{{ cat.name }}</span>
|
||||
<em v-if="cat.product_count">{{ cat.product_count }}</em>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<div class="shop-main">
|
||||
<div v-if="!loading && products.length === 0" class="empty-state">
|
||||
<strong>暂无商品</strong>
|
||||
<span>试试切换分类或清空搜索关键词。</span>
|
||||
</div>
|
||||
<div v-else v-loading="loading" class="product-grid">
|
||||
<MohongProductCard v-for="item in products" :key="item.id" :product="item" />
|
||||
</div>
|
||||
<div v-if="!loading && products.length" class="load-state">
|
||||
<el-button v-if="hasMore" :loading="loadingMore" @click="loadProducts(false)">
|
||||
加载更多
|
||||
</el-button>
|
||||
<span v-else class="end">已经到底了</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mohong-pc-page {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.title-block {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title-block h1 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.count {
|
||||
padding: 1px 8px;
|
||||
border-radius: 999px;
|
||||
background: #fff4ea;
|
||||
color: #ff6a00;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: #8a94a6;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 220px;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: #17233d;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.shop-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 140px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
min-height: 480px;
|
||||
}
|
||||
|
||||
.cat-sidebar {
|
||||
position: sticky;
|
||||
top: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 8px 0;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #eef1f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 0;
|
||||
border-left: 3px solid transparent;
|
||||
background: transparent;
|
||||
color: #52616f;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.15s,
|
||||
color 0.15s,
|
||||
border-color 0.15s;
|
||||
}
|
||||
|
||||
.cat-item:hover {
|
||||
background: #f8fafc;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.cat-item.active {
|
||||
background: #fff7ed;
|
||||
border-left-color: #ff6a00;
|
||||
color: #ff6a00;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cat-item em {
|
||||
font-style: normal;
|
||||
color: #b0b8c4;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cat-item.active em {
|
||||
color: #ff9a4d;
|
||||
}
|
||||
|
||||
.shop-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-grid :deep(.mohong-card) {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
justify-items: center;
|
||||
width: 100%;
|
||||
padding: 64px 20px;
|
||||
border-radius: 14px;
|
||||
border: 1px dashed #dbe3ee;
|
||||
background: #fff;
|
||||
color: #8a94a6;
|
||||
}
|
||||
|
||||
.empty-state strong {
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.load-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 12px 0 8px;
|
||||
}
|
||||
|
||||
.end {
|
||||
color: #b0b8c4;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.shop-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cat-sidebar {
|
||||
position: static;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
padding: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
flex: 0 0 auto;
|
||||
border-left: 0;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cat-item.active {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,437 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
cancelMyMohongOrder,
|
||||
fetchMyMohongOrder,
|
||||
mohongOrderStatusLabel,
|
||||
queryMohongPayment,
|
||||
startMohongPayment,
|
||||
type MohongOrder,
|
||||
} from '@/features/mohong/api/mohong'
|
||||
import type { PaymentPayWay } from '@/features/orders/api/orders'
|
||||
import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPaymentCashier'
|
||||
import { formatCent } from '@/shared/utils/money'
|
||||
import { formatDateTime } from '@/shared/utils/time'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const order = ref<MohongOrder | null>(null)
|
||||
const loading = ref(true)
|
||||
const acting = ref(false)
|
||||
const payWayDialogVisible = ref(false)
|
||||
let payWayResolver: ((value: PaymentPayWay | null) => void) | null = null
|
||||
|
||||
const cashier = useOrderPaymentCashier({
|
||||
notifySuccess: msg => ElMessage.success(msg),
|
||||
notifyError: msg => ElMessage.error(msg),
|
||||
notifyInfo: msg => ElMessage.info(msg),
|
||||
notifyFallback: msg => ElMessage.warning(msg),
|
||||
paidMessage: '支付成功',
|
||||
pollIntervalMs: 3000,
|
||||
qrWidth: 240,
|
||||
queryPayment: queryMohongPayment,
|
||||
})
|
||||
|
||||
const statusText = computed(() =>
|
||||
order.value ? mohongOrderStatusLabel(order.value.status) : ''
|
||||
)
|
||||
|
||||
const activePayWayLabel = computed(() => {
|
||||
const map: Record<string, string> = { WXZF: '微信', ZFBZF: '支付宝' }
|
||||
return map[cashier.activePayment.value?.pay_way || ''] || '微信/支付宝'
|
||||
})
|
||||
|
||||
onMounted(loadOrder)
|
||||
|
||||
async function loadOrder() {
|
||||
loading.value = true
|
||||
try {
|
||||
order.value = await fetchMyMohongOrder(String(route.params.id))
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '订单不存在'))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectPayWay(): Promise<PaymentPayWay | null> {
|
||||
payWayDialogVisible.value = true
|
||||
return new Promise(resolve => {
|
||||
payWayResolver = resolve
|
||||
})
|
||||
}
|
||||
|
||||
function choosePayWay(payWay: PaymentPayWay) {
|
||||
payWayResolver?.(payWay)
|
||||
payWayResolver = null
|
||||
payWayDialogVisible.value = false
|
||||
}
|
||||
|
||||
function handlePayWayDialogClosed() {
|
||||
payWayResolver?.(null)
|
||||
payWayResolver = null
|
||||
}
|
||||
|
||||
async function handlePay() {
|
||||
if (!order.value || acting.value) return
|
||||
const payWay = await selectPayWay()
|
||||
if (!payWay) return
|
||||
acting.value = true
|
||||
try {
|
||||
const payment = await startMohongPayment(order.value.id, payWay)
|
||||
if (payment.paid || payment.status === 'paid') {
|
||||
ElMessage.success('支付成功')
|
||||
await loadOrder()
|
||||
return
|
||||
}
|
||||
await cashier.openPaymentCashier(payment, async () => {
|
||||
await loadOrder()
|
||||
})
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '支付失败'))
|
||||
} finally {
|
||||
acting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
if (!order.value || acting.value) return
|
||||
acting.value = true
|
||||
try {
|
||||
order.value = await cancelMyMohongOrder(order.value.id)
|
||||
ElMessage.success('已取消')
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '取消失败'))
|
||||
} finally {
|
||||
acting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function copyText() {
|
||||
if (!order.value?.copy_text) {
|
||||
ElMessage.warning('暂无可复制信息')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await navigator.clipboard.writeText(order.value.copy_text)
|
||||
ElMessage.success('已复制订单信息')
|
||||
} catch {
|
||||
ElMessage.error('复制失败')
|
||||
}
|
||||
}
|
||||
|
||||
function openChat() {
|
||||
if (!order.value?.conversation_id) {
|
||||
ElMessage.warning('群聊尚未创建')
|
||||
return
|
||||
}
|
||||
router.push(`/messages/${order.value.conversation_id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-loading="loading" class="order-detail-page">
|
||||
<template v-if="order">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<p class="eyebrow">订单详情</p>
|
||||
<h1>{{ statusText }}</h1>
|
||||
<p class="sub">订单号 {{ order.order_no }} · {{ formatDateTime(order.created_at) }}</p>
|
||||
</div>
|
||||
<el-button @click="router.push('/mohong/orders')">返回列表</el-button>
|
||||
</header>
|
||||
|
||||
<div class="layout">
|
||||
<div class="main-card">
|
||||
<div class="product-row">
|
||||
<div class="cover">
|
||||
<img v-if="order.product_cover_url" :src="order.product_cover_url" alt="" />
|
||||
<span v-else>图</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2>{{ order.product_title }}</h2>
|
||||
<p>
|
||||
¥{{ order.unit_price || formatCent(order.unit_price_cent) }} × {{ order.quantity }}
|
||||
{{ order.product_unit }}
|
||||
</p>
|
||||
<strong>合计 ¥{{ order.amount || formatCent(order.amount_cent) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order.copy_text" class="copy-box">
|
||||
<div class="copy-head">
|
||||
<h3>订单信息（发给客服）</h3>
|
||||
<el-button type="primary" plain size="small" @click="copyText">一键复制</el-button>
|
||||
</div>
|
||||
<pre>{{ order.copy_text }}</pre>
|
||||
</div>
|
||||
|
||||
<div v-if="order.qrcode_url_snapshot" class="qr-box">
|
||||
<h3>客服二维码</h3>
|
||||
<img :src="order.qrcode_url_snapshot" alt="客服二维码" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="side-card">
|
||||
<h3>操作</h3>
|
||||
<el-button
|
||||
v-if="order.status === 'pending_payment'"
|
||||
type="primary"
|
||||
color="#ff6a00"
|
||||
:loading="acting"
|
||||
@click="handlePay"
|
||||
>
|
||||
去支付
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="order.status === 'pending_payment'"
|
||||
:loading="acting"
|
||||
@click="handleCancel"
|
||||
>
|
||||
取消订单
|
||||
</el-button>
|
||||
<el-button v-if="order.conversation_id" type="primary" plain @click="openChat">
|
||||
进入订单群
|
||||
</el-button>
|
||||
<el-button v-if="order.copy_text" plain @click="copyText">复制订单信息</el-button>
|
||||
<el-button plain @click="router.push('/mohong')">继续选购</el-button>
|
||||
</aside>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty v-else-if="!loading" description="订单不存在" />
|
||||
|
||||
<el-dialog
|
||||
v-model="payWayDialogVisible"
|
||||
title="选择支付方式"
|
||||
width="420px"
|
||||
append-to-body
|
||||
@closed="handlePayWayDialogClosed"
|
||||
>
|
||||
<div class="pay-way-options">
|
||||
<button type="button" class="pay-way-option" @click="choosePayWay('WXZF')">
|
||||
<strong>微信支付</strong>
|
||||
</button>
|
||||
<button type="button" class="pay-way-option" @click="choosePayWay('ZFBZF')">
|
||||
<strong>支付宝支付</strong>
|
||||
</button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="cashier.paymentPopupVisible.value"
|
||||
title="订单支付"
|
||||
width="520px"
|
||||
append-to-body
|
||||
@closed="cashier.stopPaymentPolling"
|
||||
>
|
||||
<div v-if="cashier.activePayment.value" class="pay-dialog-body">
|
||||
<div class="pay-amount">
|
||||
支付金额
|
||||
<strong>¥{{ formatCent(cashier.activePayment.value.amount_cent) }}</strong>
|
||||
</div>
|
||||
<div v-if="cashier.paymentQRCodeURL.value" class="pay-qr">
|
||||
<img :src="cashier.paymentQRCodeURL.value" alt="支付二维码" />
|
||||
<p>请使用{{ activePayWayLabel }}扫码支付</p>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="cashier.checkingPayment.value"
|
||||
@click="cashier.refreshPaymentStatus(false)"
|
||||
>
|
||||
我已支付，刷新状态
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.order-detail-page {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 6px;
|
||||
color: #ff6a00;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 28px;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.sub {
|
||||
margin: 0;
|
||||
color: #8a94a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 240px;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.main-card,
|
||||
.side-card {
|
||||
background: #fff;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 16px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.product-row {
|
||||
display: grid;
|
||||
grid-template-columns: 88px 1fr;
|
||||
gap: 14px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #f3f6fb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
.cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.product-row h2 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.product-row p {
|
||||
margin: 0 0 8px;
|
||||
color: #8a94a6;
|
||||
}
|
||||
|
||||
.product-row strong {
|
||||
color: #ff6a00;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.copy-box,
|
||||
.qr-box {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #eef1f5;
|
||||
}
|
||||
|
||||
.copy-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.copy-box h3,
|
||||
.qr-box h3,
|
||||
.side-card h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.copy-box pre {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: #f7f9fc;
|
||||
white-space: pre-wrap;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.qr-box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-box img {
|
||||
margin-top: 12px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
object-fit: contain;
|
||||
border-radius: 12px;
|
||||
background: #f7f9fc;
|
||||
}
|
||||
|
||||
.side-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.side-card :deep(.el-button) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pay-way-options {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pay-way-option {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #e7edf6;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pay-dialog-body {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pay-amount strong {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
color: #ff6a00;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.pay-qr img {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
fetchMyMohongOrders,
|
||||
mohongOrderStatusLabel,
|
||||
type MohongOrder,
|
||||
} from '@/features/mohong/api/mohong'
|
||||
import { formatCent } from '@/shared/utils/money'
|
||||
import { formatDateTime } from '@/shared/utils/time'
|
||||
import { readError } from '@/shared/utils/error'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const orders = ref<MohongOrder[]>([])
|
||||
|
||||
onMounted(loadOrders)
|
||||
|
||||
async function loadOrders() {
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await fetchMyMohongOrders({ page: 1, page_size: 50 })
|
||||
orders.value = result.items || []
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '加载订单失败'))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mohong-orders-page">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<p class="eyebrow">My Orders</p>
|
||||
<h1>摸大红订单</h1>
|
||||
</div>
|
||||
<el-button @click="router.push('/mohong')">返回商品列表</el-button>
|
||||
</header>
|
||||
|
||||
<el-table v-loading="loading" :data="orders" border stripe empty-text="暂无订单">
|
||||
<el-table-column prop="order_no" label="订单号" min-width="180" />
|
||||
<el-table-column prop="product_title" label="商品" min-width="160" />
|
||||
<el-table-column label="数量" width="80" prop="quantity" />
|
||||
<el-table-column label="金额" width="110">
|
||||
<template #default="{ row }">¥{{ row.amount || formatCent(row.amount_cent) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="110">
|
||||
<template #default="{ row }">{{ mohongOrderStatusLabel(row.status) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="下单时间" min-width="170">
|
||||
<template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="router.push(`/mohong/orders/${row.id}`)">
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mohong-orders-page {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: #ff6a00;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
color: #17233d;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user