From 41896a073fb42ebff460e57becc440003a341aac Mon Sep 17 00:00:00 2001
From: Agent <agent@openclaw.ai>
Date: Sat, 28 Mar 2026 10:32:14 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=EF=BC=8C=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E8=B7=B3=E8=BD=AC=E8=AF=A6=E6=83=85=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=89=93=E5=8D=B0=E5=92=8C=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json             |   6 +
 src/pages/order/detail.vue | 396 +++++++++++++++++++++++++++++++++++++
 src/pages/order/list.vue   |   8 +-
 src/pages/order/search.vue |   6 +-
 4 files changed, 407 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/order/detail.vue

diff --git a/src/pages.json b/src/pages.json
index a7d0f0f..5865655 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -60,6 +60,12 @@
         "navigationBarTitleText": "退货"
       }
     },
+    {
+      "path": "pages/order/detail",
+      "style": {
+        "navigationBarTitleText": "订单详情"
+      }
+    },
     {
       "path": "pages/stock/list",
       "style": {
diff --git a/src/pages/order/detail.vue b/src/pages/order/detail.vue
new file mode 100644
index 0000000..34d7940
--- /dev/null
+++ b/src/pages/order/detail.vue
@@ -0,0 +1,396 @@
+<template>
+  <view class="page" v-if="order">
+    <!-- 订单信息 -->
+    <view class="order-header">
+      <view class="header-row">
+        <text class="label">订单编号</text>
+        <text class="value">{{ order.orderNo }}</text>
+      </view>
+      <view class="header-row">
+        <text class="label">订单状态</text>
+        <text class="status" :class="getStatusClass(order.status)">{{ getStatusText(order.status) }}</text>
+      </view>
+      <view class="header-row">
+        <text class="label">下单时间</text>
+        <text class="value">{{ formatTime(order.createdAt) }}</text>
+      </view>
+    </view>
+
+    <!-- 客户信息 -->
+    <view class="section">
+      <view class="section-title">客户信息</view>
+      <view class="section-content">
+        <view class="info-row">
+          <text class="label">客户姓名</text>
+          <text class="value">{{ order.customerName || '散客' }}</text>
+        </view>
+        <view class="info-row" v-if="order.customerPhone">
+          <text class="label">联系电话</text>
+          <text class="value">{{ order.customerPhone }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 商品明细 -->
+    <view class="section">
+      <view class="section-title">商品明细</view>
+      <view class="items-list">
+        <view class="item-row header">
+          <text class="item-name">商品名称</text>
+          <text class="item-qty">数量</text>
+          <text class="item-price">单价</text>
+          <text class="item-subtotal">小计</text>
+        </view>
+        <view 
+          v-for="(item, index) in orderItems" 
+          :key="index" 
+          class="item-row"
+        >
+          <text class="item-name">{{ item.productName }}</text>
+          <text class="item-qty">{{ item.quantity }}</text>
+          <text class="item-price">¥{{ item.price }}</text>
+          <text class="item-subtotal">¥{{ (item.price * item.quantity).toFixed(2) }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 金额信息 -->
+    <view class="section">
+      <view class="section-title">金额信息</view>
+      <view class="section-content">
+        <view class="info-row">
+          <text class="label">原价合计</text>
+          <text class="value">¥{{ order.totalAmount }}</text>
+        </view>
+        <view class="info-row">
+          <text class="label">优惠金额</text>
+          <text class="value discount">-¥{{ order.discountAmount }}</text>
+        </view>
+        <view class="info-row">
+          <text class="label">实付金额</text>
+          <text class="value actual">¥{{ order.actualAmount }}</text>
+        </view>
+        <view class="info-row" v-if="order.paymentMethod">
+          <text class="label">支付方式</text>
+          <text class="value">{{ getPaymentMethod(order.paymentMethod) }}</text>
+        </view>
+        <view class="info-row" v-if="order.remark">
+          <text class="label">备注</text>
+          <text class="value">{{ order.remark }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 操作信息 -->
+    <view class="section" v-if="order.operatorName">
+      <view class="section-title">操作信息</view>
+      <view class="section-content">
+        <view class="info-row">
+          <text class="label">操作员</text>
+          <text class="value">{{ order.operatorName }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部操作栏 -->
+    <view class="bottom-bar">
+      <button class="print-btn" @click="printOrder">
+        打印订单
+      </button>
+      <button 
+        class="action-btn" 
+        v-if="order.status === 0" 
+        @click="confirmOrder"
+      >
+        确认完成
+      </button>
+      <button 
+        class="action-btn cancel" 
+        v-if="order.status === 0" 
+        @click="cancelOrder"
+      >
+        取消订单
+      </button>
+    </view>
+  </view>
+</template>
+
+<script>
+import orderApi from '@/api/order'
+
+export default {
+  data() {
+    return {
+      orderId: '',
+      order: null,
+      orderItems: []
+    }
+  },
+  onLoad(options) {
+    if (options.orderId) {
+      this.orderId = options.orderId
+      this.loadOrderDetail()
+    }
+  },
+  methods: {
+    async loadOrderDetail() {
+      try {
+        const res = await orderApi.getOrderDetail(this.orderId)
+        this.order = res.order
+        this.orderItems = res.items || []
+      } catch (e) {
+        uni.showToast({ title: '加载失败', icon: 'none' })
+      }
+    },
+    getStatusClass(status) {
+      const map = {
+        1: 'status-success',
+        2: 'status-cancel',
+        3: 'status-refunding',
+        4: 'status-refunded',
+        9: 'status-returning'
+      }
+      return map[status] || ''
+    },
+    getStatusText(status) {
+      const map = {
+        0: '未完成',
+        1: '已完成',
+        2: '已取消',
+        3: '退款中',
+        4: '已退款',
+        9: '退货中'
+      }
+      return map[status] || '未知'
+    },
+    formatTime(time) {
+      if (!time) return ''
+      return time.substring(0, 16).replace('T', ' ')
+    },
+    getPaymentMethod(method) {
+      const map = {
+        'cash': '现金',
+        'wechat': '微信',
+        'alipay': '支付宝'
+      }
+      return map[method] || method
+    },
+    async confirmOrder() {
+      uni.showModal({
+        title: '确认订单',
+        content: '确认完成后订单将变为已完成状态',
+        success: async (res) => {
+          if (res.confirm) {
+            try {
+              await orderApi.updateOrderStatus(this.orderId, 1)
+              uni.showToast({ title: '已确认', icon: 'success' })
+              this.loadOrderDetail()
+            } catch (e) {
+              uni.showToast({ title: '操作失败', icon: 'none' })
+            }
+          }
+        }
+      })
+    },
+    async cancelOrder() {
+      uni.showModal({
+        title: '取消订单',
+        content: '确定要取消此订单吗？',
+        success: async (res) => {
+          if (res.confirm) {
+            try {
+              await orderApi.updateOrderStatus(this.orderId, 2)
+              uni.showToast({ title: '已取消', icon: 'success' })
+              this.loadOrderDetail()
+            } catch (e) {
+              uni.showToast({ title: '操作失败', icon: 'none' })
+            }
+          }
+        }
+      })
+    },
+    printOrder() {
+      uni.showToast({ title: '打印功能开发中', icon: 'none' })
+      // TODO: 实现打印功能
+    }
+  }
+}
+</script>
+
+<style>
+.page {
+  min-height: 100vh;
+  background: #f8f9fa;
+  padding-bottom: 180rpx;
+}
+
+.order-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 30rpx;
+  color: #fff;
+}
+
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16rpx;
+}
+
+.header-row .label {
+  font-size: 26rpx;
+  opacity: 0.8;
+}
+
+.header-row .value {
+  font-size: 26rpx;
+}
+
+.status {
+  padding: 4rpx 16rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+}
+
+.status-success {
+  background: #52c41a;
+  color: #fff;
+}
+
+.status-cancel {
+  background: #ff4d4f;
+  color: #fff;
+}
+
+.status-returning {
+  background: #fa8c16;
+  color: #fff;
+}
+
+.section {
+  background: #fff;
+  margin: 20rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.section-title {
+  padding: 24rpx 30rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.section-content {
+  padding: 10rpx 30rpx;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 16rpx 0;
+  border-bottom: 1rpx solid #f8f8f8;
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-row .label {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.info-row .value {
+  font-size: 26rpx;
+  color: #333;
+}
+
+.info-row .value.discount {
+  color: #ff4d4f;
+}
+
+.info-row .value.actual {
+  color: #ff4d4f;
+  font-weight: bold;
+  font-size: 30rpx;
+}
+
+.items-list {
+  padding: 0 30rpx;
+}
+
+.item-row {
+  display: flex;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f8f8f8;
+  font-size: 26rpx;
+}
+
+.item-row.header {
+  font-weight: bold;
+  color: #666;
+  background: #f8f9fa;
+  padding: 16rpx 0;
+}
+
+.item-name {
+  flex: 2;
+}
+
+.item-qty {
+  flex: 1;
+  text-align: center;
+}
+
+.item-price {
+  flex: 1;
+  text-align: right;
+}
+
+.item-subtotal {
+  flex: 1;
+  text-align: right;
+  color: #ff4d4f;
+}
+
+.bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  padding: 20rpx 30rpx;
+  background: #fff;
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
+  gap: 20rpx;
+}
+
+.print-btn {
+  flex: 1;
+  height: 88rpx;
+  line-height: 88rpx;
+  background: #fff;
+  color: #667eea;
+  border: 2rpx solid #667eea;
+  border-radius: 44rpx;
+  font-size: 28rpx;
+}
+
+.action-btn {
+  flex: 1;
+  height: 88rpx;
+  line-height: 88rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  border: none;
+  border-radius: 44rpx;
+  font-size: 28rpx;
+}
+
+.action-btn.cancel {
+  background: #fff;
+  color: #ff4d4f;
+  border: 2rpx solid #ff4d4f;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/order/list.vue b/src/pages/order/list.vue
index 100bd8f..36a4a6c 100644
--- a/src/pages/order/list.vue
+++ b/src/pages/order/list.vue
@@ -192,11 +192,9 @@ export default {
       this.loadOrders()
     },
     viewDetail(order) {
-      // 跳转到订单详情页或显示详情弹窗
-      uni.showModal({
-        title: '订单详情',
-        content: `订单号: ${order.orderNo}\n原价: ¥${order.totalAmount}\n优惠: ¥${order.discountAmount}\n实付: ¥${order.actualAmount}`,
-        showCancel: false
+      // 跳转到订单详情页
+      uni.navigateTo({
+        url: `/pages/order/detail?orderId=${order.orderId}`
       })
     },
     getItemCount(orderId) {
diff --git a/src/pages/order/search.vue b/src/pages/order/search.vue
index a7f705a..cedf376 100644
--- a/src/pages/order/search.vue
+++ b/src/pages/order/search.vue
@@ -205,10 +205,8 @@ export default {
       return time.substring(0, 16).replace('T', ' ')
     },
     viewDetail(order) {
-      uni.showModal({
-        title: '订单详情',
-        content: `订单号: ${order.orderNo}\n原价: ¥${order.totalAmount}\n优惠: ¥${order.discountAmount}\n实付: ¥${order.actualAmount}\n状态: ${this.getStatusText(order.status)}`,
-        showCancel: false
+      uni.navigateTo({
+        url: `/pages/order/detail?orderId=${order.orderId}`
       })
     }
   }