feat: 订单分享链接，公开页面查看订单

2026-03-29 07:10:17 +00:00
parent eb2b16f84f
commit 7c25420c30
3 changed files with 324 additions and 15 deletions
--- a/src/pages.json
+++ b/src/pages.json
@@ -101,6 +101,12 @@
      "style": {
        "navigationBarTitleText": "种类管理"
      }
+    },
+    {
+      "path": "pages/share/order",
+      "style": {
+        "navigationBarTitleText": "订单详情"
+      }
    }
  ],
  "globalStyle": {
--- a/src/pages/order/detail.vue
+++ b/src/pages/order/detail.vue
@@ -216,30 +216,23 @@ export default {
      uni.showToast({ title: '打印功能开发中', icon: 'none' })
    },
    shareOrder() {
-      // 构建分享内容
-      let content = `【订单信息】\n`
-      content += `订单号: ${this.order.orderNo}\n`
-      content += `客户: ${this.order.customerName || '散客'}\n`
-      content += `实付金额: ¥${this.order.actualAmount}\n`
-      content += `支付方式: ${this.getPaymentMethod(this.order.paymentMethod)}\n`
-      content += `\n【商品明细】\n`
-      this.orderItems.forEach(item => {
-        content += `${item.productName} x${item.quantity} ¥${item.price}\n`
-      })
+      // 构建分享链接
+      const baseUrl = getApp().globalData.h5BaseUrl || 'https://你的域名'
+      const shareUrl = `${baseUrl}/#/pages/share/order?orderNo=${this.order.orderNo}`
      
-      // 复制到剪贴板分享
+      // 复制链接到剪贴板
      uni.setClipboardData({
-        data: content,
+        data: shareUrl,
        success: () => {
          uni.showModal({
-            title: '订单已复制',
-            content: '订单信息已复制到剪贴板，可以粘贴分享给客户',
+            title: '分享链接已复制',
+            content: '订单分享链接已复制，可粘贴发送给客户',
            showCancel: false,
            confirmText: '知道了'
          })
        }
      })
-    }
+    },
  }
 }
 </script>
--- a/src/pages/share/order.vue
+++ b/src/pages/share/order.vue
@@ -0,0 +1,310 @@
+<template>
+  <view class="page">
+    <!-- 加载中 -->
+    <view class="loading" v-if="loading">
+      <text>加载中...</text>
+    </view>
+
+    <!-- 错误 -->
+    <view class="error" v-else-if="error">
+      <text class="error-icon">❌</text>
+      <text class="error-text">{{ error }}</text>
+    </view>
+
+    <!-- 订单详情 -->
+    <view class="order-content" v-else-if="order">
+      <!-- 头部状态 -->
+      <view class="order-header">
+        <view class="status-badge" :class="getStatusClass(order.status)">
+          {{ order.statusText }}
+        </view>
+        <text class="order-no">订单号: {{ order.orderNo }}</text>
+      </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 class="info-row">
+            <text class="label">下单时间</text>
+            <text class="value">{{ formatTime(order.createdAt) }}</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 order.items" 
+            :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 amount-section">
+        <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 actual">
+          <text class="label">实付金额</text>
+          <text class="value">¥{{ order.actualAmount }}</text>
+        </view>
+        <view class="info-row">
+          <text class="label">支付方式</text>
+          <text class="value">{{ 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 class="footer">
+        <text class="shop-name">建材销售管家</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: true,
+      error: '',
+      order: null,
+      orderNo: ''
+    }
+  },
+  onLoad(options) {
+    if (options.orderNo) {
+      this.orderNo = options.orderNo
+      this.loadOrder()
+    } else {
+      this.error = '订单号不能为空'
+      this.loading = false
+    }
+  },
+  methods: {
+    async loadOrder() {
+      try {
+        const res = await uni.request({
+          url: `${getApp().globalData.apiBaseUrl}/public/orders/${this.orderNo}`,
+          method: 'GET'
+        })
+        this.loading = false
+        if (res.data.code === 0) {
+          this.order = res.data.data
+        } else {
+          this.error = res.data.message || '订单不存在'
+        }
+      } catch (e) {
+        this.loading = false
+        this.error = '加载失败，请检查网络'
+      }
+    },
+    getStatusClass(status) {
+      const map = {
+        0: 'status-progress',
+        1: 'status-success',
+        2: 'status-cancel',
+        3: 'status-refunding',
+        4: 'status-refunded',
+        9: 'status-returning'
+      }
+      return map[status] || ''
+    },
+    formatTime(time) {
+      if (!time) return ''
+      return time.substring(0, 16).replace('T', ' ')
+    }
+  }
+}
+</script>
+
+<style>
+.page {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.loading, .error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+.error-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+
+.error-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.order-content {
+  padding: 20rpx;
+}
+
+.order-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 40rpx 30rpx;
+  border-radius: 20rpx 20rpx 0 0;
+  text-align: center;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 10rpx 30rpx;
+  border-radius: 30rpx;
+  font-size: 26rpx;
+  color: #fff;
+  margin-bottom: 16rpx;
+}
+
+.status-progress { background: #1890ff; }
+.status-success { background: #52c41a; }
+.status-cancel { background: #999; }
+.status-refunding { background: #fa8c16; }
+.status-refunded { background: #ff4d4f; }
+.status-returning { background: #722ed1; }
+
+.order-no {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 24rpx;
+}
+
+.section {
+  background: #fff;
+  margin-bottom: 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: 0 30rpx;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f8f8f8;
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.label {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.value {
+  font-size: 26rpx;
+  color: #333;
+}
+
+.value.discount {
+  color: #ff4d4f;
+}
+
+.info-row.actual .value {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #ff4d4f;
+}
+
+.items-list {
+  padding: 0 30rpx;
+}
+
+.item-row {
+  display: flex;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f8f8f8;
+  font-size: 26rpx;
+}
+
+.item-row.header {
+  background: #f8f9fa;
+  font-weight: bold;
+  color: #666;
+}
+
+.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;
+}
+
+.amount-section {
+  padding: 20rpx 30rpx;
+}
+
+.footer {
+  text-align: center;
+  padding: 40rpx;
+}
+
+.shop-name {
+  font-size: 24rpx;
+  color: #999;
+}
+</style>