From bed414251c59095a2c6921ad74032b5bed82d072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B9=E6=96=B9=E6=88=90?= <zfc9393@163.com>
Date: Thu, 18 Dec 2025 14:39:37 +0800
Subject: [PATCH] feat: merge pending stash changes (orders, activity, api) and
 update docs

---
 api/appUser.js                      |  11 +
 components/YifanSelector.vue        |   4 +
 pages/activity/duiduipeng/index.vue |  14 +-
 pages/orders/index.vue              | 774 ++++++++++++++++++++++------
 utils/subscribe.js                  |  90 ++++
 说明文档.md                         |   1 +
 6 files changed, 731 insertions(+), 163 deletions(-)
 create mode 100644 utils/subscribe.js

diff --git a/api/appUser.js b/api/appUser.js
index 82ed485..0c30ab2 100644
--- a/api/appUser.js
+++ b/api/appUser.js
@@ -31,6 +31,17 @@ export function getOrders(user_id, status, page = 1, page_size = 20) {
   return authRequest({ url: `/api/app/users/${user_id}/orders`, method: 'GET', data })
 }
 
+// 获取订单详情
+export function getOrderDetail(order_id) {
+  return authRequest({ url: `/api/app/orders/${order_id}`, method: 'GET' })
+}
+
+// 取消订单
+export function cancelOrder(order_id, reason = '') {
+  const data = reason ? { reason } : {}
+  return authRequest({ url: `/api/app/orders/${order_id}/cancel`, method: 'POST', data })
+}
+
 export function listAddresses(user_id) {
   return authRequest({ url: `/api/app/users/${user_id}/addresses`, method: 'GET' })
 }
diff --git a/components/YifanSelector.vue b/components/YifanSelector.vue
index b6caf74..7e4fd81 100644
--- a/components/YifanSelector.vue
+++ b/components/YifanSelector.vue
@@ -55,6 +55,7 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import { getIssueChoices, getUserCoupons, joinLottery, createWechatOrder, getLotteryResult } from '@/api/appUser'
 import PaymentPopup from '@/components/PaymentPopup.vue'
+import { requestLotterySubscription } from '@/utils/subscribe'
 
 const props = defineProps({
   activityId: { type: [String, Number], required: true },
@@ -216,6 +217,9 @@ async function onPaymentConfirm(paymentData) {
      return
   }
 
+  // 请求用户订阅开奖通知
+  await requestLotterySubscription()
+
   uni.showLoading({ title: '处理中...' })
   
   try {
diff --git a/pages/activity/duiduipeng/index.vue b/pages/activity/duiduipeng/index.vue
index 08ef370..1294afc 100644
--- a/pages/activity/duiduipeng/index.vue
+++ b/pages/activity/duiduipeng/index.vue
@@ -255,23 +255,25 @@ function onPreviewBanner() {
   if (url) uni.previewImage({ urls: [url], current: url })
 }
 
-function onParticipate() {
+async function onParticipate() {
   const aid = activityId.value || ''
   const iid = currentIssueId.value || ''
   if (!aid || !iid) { uni.showToast({ title: '期数未选择', icon: 'none' }); return }
+  
   uni.showLoading({ title: '抽选中...' })
-  drawActivityIssue(aid, iid).then(res => {
-    try { uni.hideLoading() } catch (_) {}
+  try {
+    const res = await drawActivityIssue(aid, iid)
+    uni.hideLoading()
     const obj = res || {}
     const data = obj.data || obj.result || obj.reward || obj.item || obj
     const name = String((data && (data.title || data.name || data.product_name)) || '未知奖励')
     const img = String((data && (data.image || data.img || data.pic || data.product_image)) || '')
     uni.showModal({ title: '抽选结果', content: '恭喜获得：' + name, showCancel: false, success: () => { if (img) uni.previewImage({ urls: [img], current: img }) } })
-  }).catch(err => {
-    try { uni.hideLoading() } catch (_) {}
+  } catch (err) {
+    uni.hideLoading()
     const msg = String((err && (err.message || err.msg)) || '抽选失败')
     uni.showToast({ title: msg, icon: 'none' })
-  })
+  }
 }
 
 onLoad((opts) => {
diff --git a/pages/orders/index.vue b/pages/orders/index.vue
index 5d8f847..d46a364 100644
--- a/pages/orders/index.vue
+++ b/pages/orders/index.vue
@@ -1,34 +1,130 @@
 <template>
-  <view class="wrap">
-    <view class="bg-decoration"></view>
+  <view class="page-container">
+    <!-- 顶部 Tab -->
     <view class="tabs">
-      <view class="tab" :class="{ active: currentTab === 'pending' }" @click="switchTab('pending')">待付款</view>
-      <view class="tab" :class="{ active: currentTab === 'completed' }" @click="switchTab('completed')">已完成</view>
-    </view>
-    <view v-if="error" class="error">{{ error }}</view>
-    <view v-if="orders.length === 0 && !loading" class="empty">
-      <view class="empty-icon">📦</view>
-      <view class="empty-text">暂无订单</view>
-    </view>
-    <view v-for="item in orders" :key="item.id || item.order_no" class="order">
-      <view class="order-main">
-        <view class="order-title">{{ item.title || item.subject || '订单' }}</view>
-        <view class="order-sub">{{ formatTime(item.created_at || item.time) }}</view>
+      <view 
+        class="tab-item" 
+        :class="{ active: currentTab === 'pending' }" 
+        @click="switchTab('pending')"
+      >
+        <text class="tab-text">待付款</text>
       </view>
-      <view class="order-right">
-        <view class="order-amount">{{ formatAmount(item.total_amount || item.amount || item.price) }}</view>
-        <view class="order-status" :class="getStatusClass(item)">{{ statusText(item) }}</view>
+      <view 
+        class="tab-item" 
+        :class="{ active: currentTab === 'completed' }" 
+        @click="switchTab('completed')"
+      >
+        <text class="tab-text">已完成</text>
+      </view>
+    </view>
+
+    <!-- 页面内容 -->
+    <view class="page-content">
+      <!-- 错误提示 -->
+      <view v-if="error" class="error-toast">
+        <text class="error-icon">⚠️</text>
+        <text class="error-text">{{ error }}</text>
+      </view>
+
+      <!-- 加载状态 -->
+      <view v-if="loading" class="loading-state">
+        <view class="loading-spinner"></view>
+        <text class="loading-text">加载中...</text>
+      </view>
+
+      <!-- 空状态 -->
+      <view v-else-if="orders.length === 0" class="empty-state">
+        <view class="empty-illustration">
+          <text class="empty-icon">📦</text>
+        </view>
+        <text class="empty-title">暂无订单</text>
+        <text class="empty-desc">{{ currentTab === 'pending' ? '没有待付款的订单' : '完成的订单将显示在这里' }}</text>
+        <button class="empty-btn" @tap="goShopping">去逛逛</button>
+      </view>
+
+      <!-- 订单列表 -->
+      <view v-else class="orders-list">
+        <view 
+          v-for="(item, index) in orders" 
+          :key="item.id || item.order_no" 
+          class="order-card"
+          :style="{ '--delay': index * 0.05 + 's' }"
+          @tap="goOrderDetail(item)"
+        >
+          <!-- 订单头部 -->
+          <view class="order-header">
+            <view class="order-type">
+              <text class="type-icon">{{ getTypeIcon(item) }}</text>
+              <text class="type-name">{{ getTypeName(item) }}</text>
+            </view>
+            <view class="order-status" :class="getStatusClass(item)">
+              {{ statusText(item) }}
+            </view>
+          </view>
+
+          <!-- 订单内容 -->
+          <view class="order-body">
+            <!-- 商品图片 -->
+            <view class="product-image-wrap">
+              <image 
+                class="product-image" 
+                :src="getProductImage(item)" 
+                mode="aspectFill"
+              />
+              <view class="image-overlay" v-if="item.is_winner">
+                <text class="winner-badge">🎉 中奖</text>
+              </view>
+            </view>
+            
+            <!-- 商品信息 -->
+            <view class="product-info">
+              <text class="product-title">{{ getOrderTitle(item) }}</text>
+              <view class="product-meta">
+                <text class="meta-item" v-if="item.activity_name">{{ item.activity_name }}</text>
+                <text class="meta-item" v-if="item.issue_number">第{{ item.issue_number }}期</text>
+              </view>
+              <text class="order-time">{{ formatTime(item.created_at) }}</text>
+            </view>
+          </view>
+
+          <!-- 订单底部 -->
+          <view class="order-footer">
+            <view class="order-no">
+              <text class="no-label">订单号:</text>
+              <text class="no-value">{{ item.order_no }}</text>
+            </view>
+            <view class="order-amount">
+              <text class="amount-label">实付</text>
+              <text class="amount-value">{{ formatAmount(item.actual_amount || item.total_amount) }}</text>
+            </view>
+          </view>
+
+          <!-- 快捷操作 -->
+          <view class="order-actions" v-if="currentTab === 'pending'">
+            <button class="action-btn secondary" @tap.stop="cancelOrder(item)">取消订单</button>
+            <button class="action-btn primary" @tap.stop="payOrder(item)">立即支付</button>
+          </view>
+        </view>
+
+        <!-- 加载更多 -->
+        <view v-if="loadingMore" class="loading-more">
+          <view class="loading-spinner small"></view>
+          <text>加载更多...</text>
+        </view>
+        <view v-else-if="!hasMore" class="no-more">
+          <view class="divider"></view>
+          <text>没有更多了</text>
+          <view class="divider"></view>
+        </view>
       </view>
     </view>
-    <view v-if="loadingMore" class="loading">加载中...</view>
-    <view v-else-if="!hasMore && orders.length > 0" class="end">没有更多了</view>
   </view>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { onLoad, onReachBottom } from '@dcloudio/uni-app'
-import { getOrders } from '../../api/appUser'
+import { getOrders, cancelOrder as cancelOrderApi } from '../../api/appUser'
 
 const currentTab = ref('pending')
 const orders = ref([])
@@ -39,41 +135,109 @@ const page = ref(1)
 const pageSize = ref(20)
 const hasMore = ref(true)
 
+// 默认商品图片
+const defaultImage = 'https://keaiya-1259195914.cos.ap-shanghai.myqcloud.com/images/default-product.png'
+
 function formatTime(t) {
   if (!t) return ''
   const d = typeof t === 'string' ? new Date(t) : new Date(t)
-  const y = d.getFullYear()
+  const now = new Date()
+  const diffMs = now - d
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+  
+  if (diffMins < 1) return '刚刚'
+  if (diffMins < 60) return `${diffMins}分钟前`
+  if (diffHours < 24) return `${diffHours}小时前`
+  if (diffDays < 7) return `${diffDays}天前`
+  
   const m = String(d.getMonth() + 1).padStart(2, '0')
   const day = String(d.getDate()).padStart(2, '0')
   const hh = String(d.getHours()).padStart(2, '0')
   const mm = String(d.getMinutes()).padStart(2, '0')
-  return `${y}-${m}-${day} ${hh}:${mm}`
+  return `${m}-${day} ${hh}:${mm}`
 }
 
 function formatAmount(a) {
-  if (a === undefined || a === null) return ''
+  if (a === undefined || a === null) return '¥0.00'
   const n = Number(a)
-  if (Number.isNaN(n)) return String(a)
+  if (Number.isNaN(n)) return '¥0.00'
   const yuan = n / 100
   return `¥${yuan.toFixed(2)}`
 }
 
+function getOrderTitle(item) {
+  // 优先使用 remark 中的商品名称
+  if (item.remark && !item.remark.startsWith('lottery:')) {
+    return item.remark
+  }
+  // 其次使用 items 中的商品名称
+  if (item.items && item.items.length > 0) {
+    return item.items[0].title || '商品'
+  }
+  // 使用活动名称
+  if (item.activity_name) {
+    return item.activity_name
+  }
+  return item.title || item.subject || '订单'
+}
+
+function getProductImage(item) {
+  // 从 items 中获取图片
+  if (item.items && item.items.length > 0) {
+    const images = item.items[0].product_images
+    if (images) {
+      try {
+        const parsed = JSON.parse(images)
+        if (Array.isArray(parsed) && parsed.length > 0) {
+          return parsed[0]
+        }
+      } catch (e) {
+        if (typeof images === 'string' && images.startsWith('http')) {
+          return images
+        }
+      }
+    }
+  }
+  return defaultImage
+}
+
+function getTypeIcon(item) {
+  const sourceType = item.source_type
+  if (sourceType === 2) return '🎰'  // 抽奖订单
+  if (sourceType === 1) return '🛒'  // 商城订单
+  return '📦'
+}
+
+function getTypeName(item) {
+  const sourceType = item.source_type
+  if (sourceType === 2) return '一番赏'
+  if (sourceType === 1) return '商城'
+  return '订单'
+}
+
 function statusText(item) {
-  const v = item && (item.is_draw ?? item.drawed ?? item.completed)
-  const ok = v === true || v === 1 || String(v) === 'true' || String(v) === '1'
-  if (ok) return '已完成'
-  const s = item && (item.status || item.pay_status || item.state)
-  const t = String(s || '').toLowerCase()
-  if (t.includes('pend')) return '待付款'
-  if (t.includes('paid') || t.includes('complete') || t.includes('done')) return '已完成'
-  return s || ''
+  // 检查是否已开奖
+  if (item.is_draw === true || item.is_draw === 1) {
+    return item.is_winner ? '已中奖' : '未中奖'
+  }
+  
+  const status = item.status
+  if (status === 1) return '待付款'
+  if (status === 2) return '已完成'
+  if (status === 3) return '已取消'
+  
+  return '进行中'
 }
 
 function getStatusClass(item) {
   const text = statusText(item)
   if (text === '待付款') return 'status-pending'
-  if (text === '已完成') return 'status-completed'
-  return ''
+  if (text === '已完成' || text === '已中奖') return 'status-success'
+  if (text === '未中奖') return 'status-normal'
+  if (text === '已取消') return 'status-cancelled'
+  return 'status-processing'
 }
 
 function switchTab(tab) {
@@ -86,10 +250,17 @@ function apiStatus() {
   return currentTab.value === 'pending' ? 'pending' : 'completed'
 }
 
+// 过滤掉 source_type=3 的发奖订单
+function filterOrders(items) {
+  if (!Array.isArray(items)) return []
+  return items.filter(item => item.source_type !== 3)
+}
+
 async function fetchOrders(append) {
   const user_id = uni.getStorageSync('user_id')
   const token = uni.getStorageSync('token')
   const phoneBound = !!uni.getStorageSync('phone_bound')
+  
   if (!user_id || !token || !phoneBound) {
     uni.showModal({
       title: '提示',
@@ -103,6 +274,7 @@ async function fetchOrders(append) {
     })
     return
   }
+  
   if (!append) {
     if (currentTab.value === 'completed') {
       await fetchAllOrders()
@@ -118,12 +290,17 @@ async function fetchOrders(append) {
     loadingMore.value = true
     page.value = page.value + 1
   }
+  
   error.value = ''
+  
   try {
     const list = await getOrders(user_id, apiStatus(), page.value, pageSize.value)
-    const items = Array.isArray(list) ? list : (list && list.items) || []
+    const rawItems = Array.isArray(list) ? list : (list && list.items) || (list && list.list) || []
+    const items = filterOrders(rawItems)
     const total = (list && list.total) || 0
+    
     orders.value = append ? orders.value.concat(items) : items
+    
     if (total) {
       hasMore.value = orders.value.length < total
     } else {
@@ -146,15 +323,20 @@ async function fetchAllOrders() {
   page.value = 1
   hasMore.value = false
   orders.value = []
+  
   try {
     const first = await getOrders(user_id, apiStatus(), 1, pageSize.value)
-    const itemsFirst = Array.isArray(first) ? first : (first && first.items) || (first && first.list) || []
+    const rawItemsFirst = Array.isArray(first) ? first : (first && first.items) || (first && first.list) || []
+    const itemsFirst = filterOrders(rawItemsFirst)
     const total = (first && first.total) || 0
+    
     orders.value = itemsFirst
+    
     const totalPages = Math.max(1, Math.ceil(Number(total) / pageSize.value))
     for (let p = 2; p <= totalPages; p++) {
       const res = await getOrders(user_id, apiStatus(), p, pageSize.value)
-      const items = Array.isArray(res) ? res : (res && res.items) || (res && res.list) || []
+      const rawItems = Array.isArray(res) ? res : (res && res.items) || (res && res.list) || []
+      const items = filterOrders(rawItems)
       orders.value = orders.value.concat(items)
     }
   } catch (e) {
@@ -163,6 +345,45 @@ async function fetchAllOrders() {
     loading.value = false
   }
 }
+
+function goOrderDetail(item) {
+  // 跳转订单详情页
+  uni.navigateTo({ 
+    url: `/pages/orders/detail?id=${item.id}&order_no=${item.order_no}` 
+  })
+}
+
+function goShopping() {
+  uni.switchTab({ url: '/pages/index/index' })
+}
+
+async function doCancelOrder(item) {
+  uni.showModal({
+    title: '确认取消',
+    content: '确定要取消这个订单吗？',
+    success: async (res) => {
+      if (res.confirm) {
+        uni.showLoading({ title: '取消中...' })
+        try {
+          await cancelOrderApi(item.id, '用户主动取消')
+          uni.hideLoading()
+          uni.showToast({ title: '订单已取消', icon: 'success' })
+          // 刷新订单列表
+          fetchOrders(false)
+        } catch (e) {
+          uni.hideLoading()
+          uni.showToast({ title: e.message || '取消失败', icon: 'none' })
+        }
+      }
+    }
+  })
+}
+
+function payOrder(item) {
+  // TODO: 跳转支付
+  uni.showToast({ title: '支付功能开发中', icon: 'none' })
+}
+
 onLoad((opts) => {
   const s = (opts && opts.status) || ''
   if (s === 'completed' || s === 'pending') currentTab.value = s
@@ -176,121 +397,217 @@ onReachBottom(() => {
 
 <style lang="scss" scoped>
 /* ============================================
-   奇盒潮玩 - 订单页面
-   采用暖橙色调的订单列表设计
+   订单页面 - 高级设计重构
    ============================================ */
 
-.wrap {
-  padding: $spacing-md;
+.page-container {
   min-height: 100vh;
-  background-color: $bg-page;
+  background: $bg-page;
   position: relative;
-  overflow-x: hidden;
+  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
+}
+
+/* 顶部 Tab - 与货柜页面保持一致 */
+.tabs {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 88rpx;
+  background: rgba($bg-card, 0.95);
+  backdrop-filter: blur(20rpx);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+
+.tab-item {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
   
-  &::before {
-    content: '';
-    position: fixed;
-    top: 0; left: 0; width: 100%; height: 100vh;
-    background: radial-gradient(circle at 10% 10%, rgba($brand-primary, 0.05), transparent 40%),
-                radial-gradient(circle at 90% 90%, rgba($accent-gold, 0.05), transparent 40%);
-    pointer-events: none;
-    z-index: 0;
+  &.active {
+    .tab-text {
+      color: $brand-primary;
+      font-weight: 700;
+      font-size: 30rpx;
+    }
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 40rpx;
+      height: 4rpx;
+      background: $brand-primary;
+      border-radius: 4rpx;
+    }
   }
 }
 
-/* Tab 切换 */
-.tabs {
-  display: flex;
-  background: $bg-glass;
-  backdrop-filter: blur(10rpx);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  border-radius: $radius-lg;
-  padding: 8rpx;
-  margin-bottom: $spacing-lg;
-  box-shadow: $shadow-sm;
-}
-.tab {
-  flex: 1;
-  text-align: center;
-  padding: 20rpx 0;
-  font-size: $font-md;
+.tab-text {
+  font-size: 28rpx;
   color: $text-sub;
-  border-radius: $radius-md;
-  transition: all 0.25s ease;
-  font-weight: 500;
+  transition: all 0.3s;
 }
-.tab.active {
-  background: $gradient-brand;
-  color: $text-inverse;
+
+.page-content {
+  position: relative;
+  z-index: 1;
+  padding: $spacing-lg;
+  padding-top: calc(88rpx + $spacing-lg); /* tabs height + spacing */
+}
+
+/* 错误提示 */
+.error-toast {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  padding: $spacing-md $spacing-lg;
+  background: rgba($uni-color-error, 0.1);
+  border-radius: $radius-lg;
+  margin-bottom: $spacing-lg;
+  
+  .error-icon { font-size: $font-lg; }
+  .error-text { color: $uni-color-error; font-size: $font-sm; }
+}
+
+/* 加载状态 */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 0;
+  
+  .loading-text {
+    margin-top: $spacing-lg;
+    color: $text-sub;
+    font-size: $font-sm;
+  }
+}
+
+.loading-spinner {
+  width: 60rpx;
+  height: 60rpx;
+  border: 4rpx solid rgba($brand-primary, 0.2);
+  border-top-color: $brand-primary;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  
+  &.small {
+    width: 32rpx;
+    height: 32rpx;
+    border-width: 3rpx;
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 100rpx $spacing-xl;
+  animation: fadeInUp 0.5s ease-out;
+}
+.empty-illustration {
+  width: 200rpx;
+  height: 200rpx;
+  background: rgba($brand-primary, 0.05);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: $spacing-xl;
+}
+.empty-icon {
+  font-size: 80rpx;
+  animation: float 3s ease-in-out infinite;
+}
+.empty-title {
+  font-size: $font-xl;
+  font-weight: 700;
+  color: $text-main;
+  margin-bottom: $spacing-sm;
+}
+.empty-desc {
+  font-size: $font-sm;
+  color: $text-sub;
+  margin-bottom: $spacing-xl;
+}
+.empty-btn {
+  background: $gradient-brand !important;
+  color: #fff !important;
+  border: none !important;
+  padding: 0 60rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  border-radius: $radius-round;
+  font-size: $font-md;
   font-weight: 600;
-  box-shadow: $shadow-glow;
+  box-shadow: $shadow-warm;
+}
+
+/* 订单列表 */
+.orders-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
 }
 
 /* 订单卡片 */
-.order {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.order-card {
   background: $bg-card;
-  border-radius: $radius-md;
-  padding: $spacing-lg;
-  margin-bottom: $spacing-lg;
-  box-shadow: $shadow-sm;
-  border: 1rpx solid rgba(0,0,0,0.02);
-  transition: all 0.2s ease;
+  border-radius: $radius-xl;
+  overflow: hidden;
+  box-shadow: $shadow-card;
   animation: fadeInUp 0.4s ease-out backwards;
-}
-
-@for $i from 1 through 10 {
-  .order:nth-child(#{$i}) {
-    animation-delay: #{$i * 0.05}s;
+  animation-delay: var(--delay, 0s);
+  transition: all 0.2s;
+  
+  &:active {
+    transform: scale(0.98);
   }
 }
 
-.order:active {
-  transform: scale(0.98);
-  box-shadow: none;
-}
-
-.order-main {
+/* 订单头部 */
+.order-header {
   display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-md $spacing-lg;
+  border-bottom: 1rpx solid $border-color-light;
+  background: rgba($bg-secondary, 0.3);
 }
-.order-title {
-  font-size: $font-md;
-  font-weight: 700;
-  color: $text-main;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-bottom: $spacing-xs;
+.order-type {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
 }
-.order-sub {
+.type-icon {
+  font-size: $font-lg;
+}
+.type-name {
   font-size: $font-sm;
   color: $text-sub;
-}
-
-.order-right {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  margin-left: $spacing-lg;
-  flex-shrink: 0;
-}
-.order-amount {
-  font-size: $font-lg;
-  font-weight: 800;
-  color: $brand-primary;
-  font-family: 'DIN Alternate', sans-serif;
+  font-weight: 500;
 }
 .order-status {
   font-size: $font-xs;
-  color: $text-sub;
-  margin-top: 10rpx;
-  padding: 4rpx $spacing-md;
-  background: $bg-page;
+  padding: 6rpx 16rpx;
   border-radius: $radius-round;
   font-weight: 600;
   
@@ -298,51 +615,194 @@ onReachBottom(() => {
     background: rgba($brand-primary, 0.1);
     color: $brand-primary;
   }
-  
-  &.status-completed {
+  &.status-success {
     background: rgba($uni-color-success, 0.1);
     color: $uni-color-success;
   }
+  &.status-normal {
+    background: rgba($text-sub, 0.1);
+    color: $text-sub;
+  }
+  &.status-cancelled {
+    background: rgba($text-placeholder, 0.1);
+    color: $text-placeholder;
+  }
+  &.status-processing {
+    background: rgba($accent-gold, 0.15);
+    color: #B45309;
+  }
 }
 
-/* 空状态 */
-.empty {
+/* 订单内容 */
+.order-body {
+  display: flex;
+  padding: $spacing-lg;
+  gap: $spacing-lg;
+}
+.product-image-wrap {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: $radius-lg;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+  background: $bg-secondary;
+}
+.product-image {
+  width: 100%;
+  height: 100%;
+}
+.image-overlay {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-top: 120rpx;
-  animation: fadeInUp 0.5s ease-out;
-  
-  .empty-icon {
-    font-size: 80rpx;
-    margin-bottom: $spacing-lg;
-    opacity: 0.6;
-    animation: float 4s ease-in-out infinite;
-  }
-  
-  .empty-text {
-    color: $text-sub;
-    font-size: $font-md;
-  }
 }
-
-/* 错误提示 */
-.error {
-  color: $uni-color-error;
+.winner-badge {
+  color: #fff;
   font-size: $font-sm;
-  margin-bottom: $spacing-md;
-  padding: $spacing-md;
-  background: rgba($uni-color-error, 0.1);
-  border-radius: $radius-lg;
-  text-align: center;
+  font-weight: 700;
+  background: $gradient-gold;
+  padding: 6rpx 16rpx;
+  border-radius: $radius-sm;
 }
 
-/* 加载状态 */
-.loading, .end {
-  text-align: center;
+.product-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+}
+.product-title {
+  font-size: $font-md;
+  font-weight: 700;
+  color: $text-main;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.product-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+  margin-top: $spacing-xs;
+}
+.meta-item {
+  font-size: $font-xs;
   color: $text-sub;
-  padding: $spacing-lg 0;
+  background: $bg-secondary;
+  padding: 4rpx 12rpx;
+  border-radius: $radius-sm;
+}
+.order-time {
+  font-size: $font-xs;
+  color: $text-placeholder;
+  margin-top: auto;
+}
+
+/* 订单底部 */
+.order-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-md $spacing-lg;
+  background: rgba($bg-secondary, 0.3);
+  border-top: 1rpx solid $border-color-light;
+}
+.order-no {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+}
+.no-label {
+  font-size: $font-xs;
+  color: $text-placeholder;
+}
+.no-value {
+  font-size: $font-xs;
+  color: $text-sub;
+  font-family: 'SF Mono', monospace;
+}
+.order-amount {
+  display: flex;
+  align-items: baseline;
+  gap: $spacing-xs;
+}
+.amount-label {
+  font-size: $font-xs;
+  color: $text-sub;
+}
+.amount-value {
+  font-size: $font-lg;
+  font-weight: 800;
+  color: $brand-primary;
+  font-family: 'DIN Alternate', sans-serif;
+}
+
+/* 操作按钮 */
+.order-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-md;
+  padding: $spacing-md $spacing-lg;
+  border-top: 1rpx solid $border-color-light;
+}
+.action-btn {
+  height: 64rpx;
+  line-height: 64rpx;
+  padding: 0 32rpx;
+  border-radius: $radius-round;
   font-size: $font-sm;
+  font-weight: 600;
+  
+  &.primary {
+    background: $gradient-brand !important;
+    color: #fff !important;
+    border: none !important;
+  }
+  
+  &.secondary {
+    background: transparent !important;
+    color: $text-sub !important;
+    border: 2rpx solid $border-color !important;
+  }
+}
+
+/* 加载更多 */
+.loading-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  padding: $spacing-xl 0;
+  color: $text-sub;
+  font-size: $font-sm;
+}
+
+.no-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-md;
+  padding: $spacing-xl 0;
+  color: $text-placeholder;
+  font-size: $font-xs;
+  
+  .divider {
+    width: 60rpx;
+    height: 1rpx;
+    background: $border-color-light;
+  }
+}
+
+/* 动画 */
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10rpx); }
 }
 </style>
diff --git a/utils/subscribe.js b/utils/subscribe.js
new file mode 100644
index 0000000..b85c1d8
--- /dev/null
+++ b/utils/subscribe.js
@@ -0,0 +1,90 @@
+/**
+ * 微信订阅消息授权工具
+ * 用于在抽奖前请求用户授权接收开奖通知
+ */
+
+// 抽奖结果通知模板 ID
+const LOTTERY_RESULT_TEMPLATE_ID = 'O2eqJQD3pn-vQ6g2z9DWzINVwOmPoz8yW-172J_YcpI'
+
+/**
+ * 请求用户订阅抽奖结果通知
+ * @returns {Promise<object>} 订阅结果
+ */
+export function requestLotterySubscription() {
+    return new Promise((resolve) => {
+        // #ifdef MP-WEIXIN
+        wx.requestSubscribeMessage({
+            tmplIds: [LOTTERY_RESULT_TEMPLATE_ID],
+            success(res) {
+                console.log('订阅消息授权结果:', res)
+                resolve({
+                    success: true,
+                    result: res,
+                    // 检查用户是否接受了订阅
+                    accepted: res[LOTTERY_RESULT_TEMPLATE_ID] === 'accept'
+                })
+            },
+            fail(err) {
+                console.warn('订阅消息授权失败:', err)
+                // 即使授权失败也不阻止用户参与抽奖
+                resolve({
+                    success: false,
+                    error: err,
+                    accepted: false
+                })
+            }
+        })
+        // #endif
+
+        // #ifndef MP-WEIXIN
+        // 非微信小程序环境，直接返回成功
+        resolve({
+            success: true,
+            accepted: false,
+            message: '非微信小程序环境，跳过订阅授权'
+        })
+        // #endif
+    })
+}
+
+/**
+ * 批量请求多个模板的订阅授权
+ * @param {string[]} templateIds 模板ID数组
+ * @returns {Promise<object>} 订阅结果
+ */
+export function requestSubscriptions(templateIds) {
+    return new Promise((resolve) => {
+        // #ifdef MP-WEIXIN
+        wx.requestSubscribeMessage({
+            tmplIds: templateIds,
+            success(res) {
+                console.log('订阅消息授权结果:', res)
+                resolve({
+                    success: true,
+                    result: res
+                })
+            },
+            fail(err) {
+                console.warn('订阅消息授权失败:', err)
+                resolve({
+                    success: false,
+                    error: err
+                })
+            }
+        })
+        // #endif
+
+        // #ifndef MP-WEIXIN
+        resolve({
+            success: true,
+            message: '非微信小程序环境，跳过订阅授权'
+        })
+        // #endif
+    })
+}
+
+export default {
+    requestLotterySubscription,
+    requestSubscriptions,
+    LOTTERY_RESULT_TEMPLATE_ID
+}
diff --git a/说明文档.md b/说明文档.md
index 25cfef4..5416049 100644
--- a/说明文档.md
+++ b/说明文档.md
@@ -30,5 +30,6 @@
 *   [x] 2025-12-17: 修复 `pages/activity/yifanshang/index.vue` 编译错误，在 `uni.scss` 中补充 `text-ellipsis` mixin 定义。
 *   [x] 2025-12-17: 修复 `pages/login/index.vue` 等多处 `$border-color` 未定义错误，在 `uni.scss` 中增加变量别名。
 *   [x] 2025-12-17: 修复 `pages/mine/index.vue` 编译错误，在 `api/appUser.js` 中补充 `getUserInfo`, `getUserTasks`, `getInviteRecords` 导出。
+*   [x] 2025-12-17: 将 dev 分支代码强制推送至 main 分支 (Deployment/Sync)。
 *   [ ] 2025-12-17: 进行中 - 优化 `pages/activity/yifanshang/index.vue` 及相关组件。
 *   [ ] 2025-12-17: 待开始 - 优化 `pages/login/index.vue` 视觉细节。