From 2d5598dcad4f480a19b211054009035adc1885f1 Mon Sep 17 00:00:00 2001
From: xiaoquan <838115837@qq.com>
Date: Mon, 11 May 2026 12:00:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BF=AD=E4=BB=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
apps/miniapp/src/pages/order-detail/index.vue | 1469 ++++++++++-------
apps/miniapp/src/pages/order/index.vue | 516 ++++--
2 files changed, 1209 insertions(+), 776 deletions(-)
diff --git a/apps/miniapp/src/pages/order-detail/index.vue b/apps/miniapp/src/pages/order-detail/index.vue
index 3991c8c..a0ae5db 100644
--- a/apps/miniapp/src/pages/order-detail/index.vue
+++ b/apps/miniapp/src/pages/order-detail/index.vue
@@ -1,165 +1,277 @@
-
-
-
- {{ getStatusText(order.status) }}
-
-
-
-
-
-
-
- {{ order.room?.name }}
- {{ order.merchant?.shopName }}
-
+
+
+
+
+
-
-
-
-
- 入住信息
-
- 入住日期
- {{ order.checkInDate }}
-
-
- 离店日期
- {{ order.checkOutDate }}
-
-
- 入住晚数
- {{ order.nights }}晚
-
-
- 房间套数
- {{ order.roomCount || 1 }}套
-
-
- 入住人数
- {{ order.guestCount || 1 }}人
-
-
- 联系人
- {{ order.contactName }}
-
-
- 联系电话
- {{ order.contactPhone }}
-
-
- 身份证号
- {{ order.contactIdCard }}
-
-
-
-
-
- 费用明细
-
- 房费
- ¥{{ order.roomAmount }}
-
-
- 优惠券
- -¥{{ order.couponDiscount }}
-
-
- 实付金额
-
-
-
-
-
-
- 订单信息
-
- 订单号
- {{ order.orderNo }}
-
-
- 下单时间
- {{ order.createdAt }}
-
-
- 支付方式
- {{ paymentMethodLabels[order.paymentMethod] }}
-
-
- 支付时间
- {{ order.paidAt }}
-
-
- 取消原因
- {{ order.cancelReason }}
-
-
-
-
-
- 取消订单
- 去支付
-
-
- 取消订单
-
-
- 评价
-
-
- 已评价
+ 订单详情
+
- 加载中...
-
-
-
-
-
- 支付金额
-
+
+
+
+
+
-
-
- 💳
- 微信支付
- ✓
-
-
- 💳
- 支付宝
- ✓
-
-
- 确认支付
-
-
-
-
-
-
-
- 评分
-
-
-
-
-
- 匿名评价
-
-
- 取消
- 提交
+
+ {{ getStatusText(order.status) }}
+ {{ getStatusDesc(order.status) }}
-
+
+
+
+
+
+
+
+
+
+ {{ order.room?.name }}
+
+
+ {{ order.merchant?.shopName }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 入住日期
+
+ {{ formatDate(order.checkInDate) }}
+
+
+
+
+
+
+ 离店日期
+
+ {{ formatDate(order.checkOutDate) }}
+
+
+
+
+
+
+ 入住晚数
+
+ {{ order.nights }}晚
+
+
+
+
+
+
+ 房间套数
+
+ {{ order.roomCount || 1 }}套
+
+
+
+
+
+
+ 入住人数
+
+ {{ order.guestCount || 1 }}人
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 联系人
+
+ {{ order.contactName }}
+
+
+
+
+
+
+ 联系电话
+
+
+ {{ order.contactPhone }}
+
+
+ 拨打
+
+
+
+
+
+
+
+
+ 身份证号
+
+ {{ maskIdCard(order.contactIdCard) }}
+
+
+
+
+
+
+
+
+
+ 房费
+ ¥{{ order.roomAmount }}
+
+
+ 优惠券
+ -¥{{ order.couponDiscount }}
+
+
+
+ 实付金额
+
+ ¥
+ {{ order.payAmount }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 订单号
+
+
+ {{ order.orderNo }}
+
+ 复制
+
+
+
+
+
+
+
+
+ 下单时间
+
+ {{ formatDateTime(order.createdAt) }}
+
+
+
+
+
+
+ 支付方式
+
+ {{ paymentMethodLabels[order.paymentMethod] }}
+
+
+
+
+
+
+ 支付时间
+
+ {{ formatDateTime(order.paidAt) }}
+
+
+
+
+
+
+ 取消原因
+
+ {{ order.cancelReason }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 加载中...
+
+
+
+
+
+
+
+ {{ action.text }}
+
+
+
@@ -167,10 +279,6 @@
import { ref, onMounted } from 'vue';
import { getOrderDetail, cancelOrder, payOrder } from '@/api/user/order';
import { createReview, checkOrderReviewed } from '@/api/user/review';
-import BaseButton from '@/components/base/BaseButton.vue';
-import BaseModal from '@/components/base/BaseModal.vue';
-import PriceTag from '@/components/business/PriceTag.vue';
-import RatingStars from '@/components/business/RatingStars.vue';
const paymentMethodLabels: Record = {
wechat: '微信支付',
@@ -194,17 +302,39 @@ function getStatusText(status: string): string {
return statusLabels[status] || status;
}
+function getStatusIcon(status: string): string {
+ const iconMap: Record = {
+ pending_pay: 'rmb-circle-fill',
+ pending_confirm: 'clock-fill',
+ confirmed: 'checkmark-circle-fill',
+ pending_checkin: 'calendar-fill',
+ checked_in: 'home-fill',
+ completed: 'checkmark-circle-fill',
+ cancelled: 'close-circle-fill',
+ refunding: 'reload',
+ refunded: 'checkmark-circle-fill',
+ };
+ return iconMap[status] || 'info-circle-fill';
+}
+
+function getStatusDesc(status: string): string {
+ const descMap: Record = {
+ pending_pay: '请尽快完成支付，超时订单将自动取消',
+ pending_confirm: '商家正在确认您的订单，请耐心等待',
+ confirmed: '订单已确认，期待您的入住',
+ pending_checkin: '订单已确认，期待您的入住',
+ checked_in: '祝您入住愉快',
+ completed: '感谢您的入住，期待再次光临',
+ cancelled: '订单已取消',
+ refunding: '退款正在处理中，请耐心等待',
+ refunded: '退款已完成',
+ };
+ return descMap[status] || '';
+}
+
const order = ref({});
const orderId = ref(0);
-const showPayModal = ref(false);
-const payMethod = ref<'wechat' | 'alipay'>('wechat');
-
-// 评价相关
const reviewed = ref(false);
-const showReviewModal = ref(false);
-const reviewRating = ref(5);
-const reviewContent = ref('');
-const isAnonymous = ref(false);
onMounted(() => {
const pages = getCurrentPages();
@@ -223,20 +353,131 @@ async function fetchDetail() {
reviewed.value = reviewRes.data?.reviewed || false;
}
} catch (e) {
- console.error(e);
+ console.error('获取订单详情失败:', e);
+ uni.showToast({ title: '加载失败', icon: 'none' });
}
}
+function goBack() {
+ uni.navigateBack();
+}
+
+function goRoomDetail() {
+ if (order.value?.room?.id) {
+ uni.navigateTo({ url: `/pages/room-detail/index?id=${order.value.room.id}` });
+ }
+}
+
+function formatDate(dateStr: string): string {
+ if (!dateStr) return '';
+ const d = new Date(dateStr);
+ return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function formatDateTime(dateStr: string): string {
+ if (!dateStr) return '';
+ const d = new Date(dateStr);
+ return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+}
+
+function maskIdCard(idCard: string): string {
+ if (!idCard || idCard.length < 8) return idCard;
+ return idCard.substring(0, 6) + '********' + idCard.substring(idCard.length - 4);
+}
+
+function callPhone() {
+ if (order.value?.contactPhone) {
+ uni.makePhoneCall({
+ phoneNumber: order.value.contactPhone,
+ });
+ }
+}
+
+function copyOrderNo() {
+ if (order.value?.orderNo) {
+ uni.setClipboardData({
+ data: order.value.orderNo,
+ success: () => {
+ uni.showToast({ title: '订单号已复制', icon: 'success' });
+ },
+ });
+ }
+}
+
+function getActions() {
+ const status = order.value?.status;
+ if (!status) return [];
+
+ const actionMap: Record = {
+ pending_pay: [
+ { type: 'cancel', text: '取消订单', style: 'default', icon: 'close-circle' },
+ { type: 'pay', text: '立即支付', style: 'primary', icon: 'rmb-circle' },
+ ],
+ pending_confirm: [
+ { type: 'cancel', text: '取消订单', style: 'default', icon: 'close-circle' },
+ { type: 'contact', text: '联系商家', style: 'default', icon: 'phone' },
+ ],
+ confirmed: [
+ { type: 'cancel', text: '取消订单', style: 'default', icon: 'close-circle' },
+ { type: 'contact', text: '联系商家', style: 'default', icon: 'phone' },
+ ],
+ pending_checkin: [
+ { type: 'contact', text: '联系商家', style: 'default', icon: 'phone' },
+ ],
+ completed: reviewed.value
+ ? []
+ : [{ type: 'review', text: '评价订单', style: 'primary', icon: 'edit' }],
+ };
+
+ return actionMap[status] || [];
+}
+
+function handleAction(type: string) {
+ switch (type) {
+ case 'pay':
+ handlePay();
+ break;
+ case 'cancel':
+ handleCancel();
+ break;
+ case 'contact':
+ handleContact();
+ break;
+ case 'review':
+ handleReview();
+ break;
+ }
+}
+
+function handlePay() {
+ uni.showModal({
+ title: '支付订单',
+ content: `确认支付¥${order.value.payAmount}？`,
+ success: async (res) => {
+ if (res.confirm) {
+ uni.showLoading({ title: '支付中...' });
+ try {
+ await payOrder(orderId.value, 'wechat');
+ uni.hideLoading();
+ uni.showToast({ title: '支付成功', icon: 'success' });
+ fetchDetail();
+ } catch (e: any) {
+ uni.hideLoading();
+ uni.showToast({ title: e.message || '支付失败', icon: 'none' });
+ }
+ }
+ },
+ });
+}
+
function handleCancel() {
- const isPaid = order.value?.status === 'pending_confirm' || order.value?.status === 'pending_checkin';
+ const isPaid = order.value?.status === 'pending_confirm' || order.value?.status === 'confirmed' || order.value?.status === 'pending_checkin';
uni.showModal({
title: '取消订单',
content: isPaid ? '订单已支付，取消后将自动退款，确认取消？' : '确定取消此订单？',
- editable: true,
- placeholderText: '请输入取消原因',
success: async (res) => {
if (res.confirm) {
- const reason = res.content?.trim() || '用户主动取消';
+ const reason = '用户主动取消';
uni.showLoading({ title: '处理中...' });
try {
await cancelOrder(orderId.value, reason);
@@ -252,535 +493,521 @@ function handleCancel() {
});
}
-function handlePay() {
- showPayModal.value = true;
+function handleContact() {
+ uni.showToast({ title: '联系商家功能开发中', icon: 'none' });
}
-function closePayModal() {
- showPayModal.value = false;
-}
-
-async function confirmPay() {
- uni.showLoading({ title: '支付中...' });
- try {
- await payOrder(orderId.value, payMethod.value);
- uni.hideLoading();
- uni.showToast({ title: '支付成功', icon: 'success' });
- showPayModal.value = false;
- fetchDetail();
- } catch (e: any) {
- uni.hideLoading();
- uni.showToast({ title: e.message || '支付失败', icon: 'none' });
- }
-}
-
-function openReviewModal() {
- reviewRating.value = 5;
- reviewContent.value = '';
- isAnonymous.value = false;
- showReviewModal.value = true;
-}
-
-function closeReviewModal() {
- showReviewModal.value = false;
-}
-
-async function submitReview() {
- uni.showLoading({ title: '提交中...' });
- try {
- await createReview(orderId.value, {
- rating: reviewRating.value,
- content: reviewContent.value || undefined,
- isAnonymous: isAnonymous.value,
- });
- uni.hideLoading();
- uni.showToast({ title: '评价已提交，等待审核', icon: 'success' });
- showReviewModal.value = false;
- reviewed.value = true;
- } catch (e: any) {
- uni.hideLoading();
- uni.showToast({ title: e.message || '评价失败', icon: 'none' });
- }
+function handleReview() {
+ uni.showModal({
+ title: '评价订单',
+ content: '评价功能开发中',
+ showCancel: false,
+ });
}
diff --git a/apps/miniapp/src/pages/order/index.vue b/apps/miniapp/src/pages/order/index.vue
index 0836f32..d0b52d6 100644
--- a/apps/miniapp/src/pages/order/index.vue
+++ b/apps/miniapp/src/pages/order/index.vue
@@ -1,5 +1,7 @@
+
+
@@ -10,11 +12,8 @@
:class="['tab-item', { active: currentTab === tab.value }]"
@tap="switchTab(tab.value)"
>
-
-
- {{ tab.label }}
- {{ tab.count }}
-
+ {{ tab.label }}
+ {{ tab.count }}
@@ -22,109 +21,142 @@
-
-
-
-
-
-
-
-
-
-
- {{ order.roomName }}
-
-
-
- {{ formatDateRange(order.checkInDate, order.checkOutDate) }}
+
+
+
+
+
+