支持开关门状态显示/订单数据渲染

src/pages/order/order.vue

@@ -2,24 +2,24 @@
   <view class="order-page">
     <!-- 顶部Tab切换 -->
     <view class="tab-header">
-      <view 
-        class="tab-item" 
+      <view
+        class="tab-item"
         :class="{ active: currentTab === 'all' }"
         @click="switchTab('all')"
       >
         <text class="tab-text">全部订单</text>
         <view class="tab-line" v-if="currentTab === 'all'"></view>
       </view>
-      <view 
-        class="tab-item" 
+      <view
+        class="tab-item"
         :class="{ active: currentTab === 'paid' }"
         @click="switchTab('paid')"
       >
         <text class="tab-text">已支付</text>
         <view class="tab-line" v-if="currentTab === 'paid'"></view>
       </view>
-      <view 
-        class="tab-item" 
+      <view
+        class="tab-item"
         :class="{ active: currentTab === 'unpaid' }"
         @click="switchTab('unpaid')"
       >
@@ -43,34 +43,39 @@
     </view>
 
     <!-- 订单列表 -->
-    <scroll-view class="order-scroll" scroll-y>
+    <scroll-view class="order-scroll" scroll-y @scrolltolower="loadMore">
       <view class="order-list">
-        <view 
-          class="order-card" 
-          v-for="(order, index) in filteredOrders" 
-          :key="index"
+        <view
+          class="order-card"
+          v-for="order in filteredOrders"
+          :key="order._id"
         >
           <!-- 第一行: 日期 + 状态 -->
           <view class="order-header">
-            <text class="order-date">{{ order.create_time }}</text>
-            <text class="order-status" :class="{ paid: order.status === 'paid', unpaid: order.status === 'unpaid' }">
-              {{ order.status === 'paid' ? '已支付' : '未支付' }}
-            </text>
+            <text class="order-date">{{ formatTime(order.createdAt) }}</text>
+            <view class="status-tags">
+              <text class="order-status" :class="orderStatusClass(order.order_status)">
+                {{ orderStatusText(order.order_status) }}
+              </text>
+              <text class="pay-status" :class="payStatusClass(order.payment_status)">
+                {{ payStatusText(order.payment_status) }}
+              </text>
+            </view>
           </view>
           <view class="divider"></view>
 
-          <!-- 商品列表（整体可点击跳转） -->
+          <!-- 商品列表 -->
           <view class="product-section" @click="goToDetail(order)">
             <view class="product-list">
-              <view 
-                class="product-item" 
-                v-for="(product, pIndex) in order.products" 
+              <view
+                class="product-item"
+                v-for="(product, pIndex) in order.products"
                 :key="pIndex"
               >
                 <image class="product-img" :src="product.image" mode="aspectFill" />
                 <view class="product-info">
                   <text class="product-name">{{ product.name }}</text>
-                  <text class="product-price-qty">￥{{ product.price }} x {{ product.quantity }}</text>
+                  <text class="product-price-qty">￥{{ getDecimal(product.unit_price) }} x {{ product.qty }}</text>
                 </view>
               </view>
             </view>
@@ -81,27 +86,44 @@
 
           <!-- 总计 -->
           <view class="order-total">
-            <text class="total-qty">共{{ order.totalQuantity }}件</text>
+            <text class="total-qty">共{{ order.total_qty }}件</text>
             <view class="total-amount">
               <text class="total-label">总计:</text>
-              <text class="total-price">￥{{ order.totalAmount }}</text>
+              <text class="total-price">￥{{ getDecimal(order.total_amount) }}</text>
             </view>
           </view>
 
           <!-- 操作按钮 -->
           <view class="order-action">
-            <view 
-              class="action-btn" 
-              :class="{ 'pay-btn': order.status === 'unpaid', 'refund-btn': order.status === 'paid' }"
-              @click="handleAction(order)"
+            <view
+              v-if="order.payment_status === 'PENDING'"
+              class="action-btn pay-btn"
+              @click="handlePay(order)"
             >
-              {{ order.status === 'unpaid' ? '立即支付' : '申请退款' }}
+              立即支付
+            </view>
+            <view
+              v-else-if="order.payment_status === 'PAID' && !order.has_refund"
+              class="action-btn refund-btn"
+              @click="handleRefund(order)"
+            >
+              申请退款
             </view>
           </view>
         </view>
 
+        <!-- 加载状态 -->
+        <view class="loading-state" v-if="loading">
+          <text class="loading-text">加载中...</text>
+        </view>
+
+        <!-- 加载更多 / 没有更多 -->
+        <view class="load-more" v-if="!loading && orderList.length > 0 && total > limit">
+          <text class="load-more-text">{{ hasNext ? '上拉加载更多' : '没有更多了' }}</text>
+        </view>
+
         <!-- 空状态 -->
-        <view class="empty-state" v-if="filteredOrders.length === 0">
+        <view class="empty-state" v-if="!loading && filteredOrders.length === 0">
           <text class="empty-text">暂无订单</text>
         </view>
       </view>
@@ -118,11 +140,7 @@
         <view class="sidebar-content">
           <view class="date-row">
             <text class="date-label">开始时间</text>
-            <picker 
-              mode="date" 
-              :value="tempStartTime" 
-              @change="onStartTimeChange"
-            >
+            <picker mode="date" :value="tempStartTime" @change="onStartTimeChange">
               <view class="date-picker">
                 <text class="date-value">{{ tempStartTime || '请选择' }}</text>
               </view>
@@ -130,11 +148,7 @@
           </view>
           <view class="date-row">
             <text class="date-label">结束时间</text>
-            <picker 
-              mode="date" 
-              :value="tempEndTime" 
-              @change="onEndTimeChange"
-            >
+            <picker mode="date" :value="tempEndTime" @change="onEndTimeChange">
               <view class="date-picker">
                 <text class="date-value">{{ tempEndTime || '请选择' }}</text>
               </view>
@@ -164,7 +178,8 @@
 
 <script>
 import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';
-import { checkLoginWithPrompt } from '@/utils/auth-guard.js';
+import { get } from '@/utils/request.js';
+import { checkLoginWithPrompt, getCachedUserInfo } from '@/utils/auth-guard.js';
 
 export default {
   components: { PageNavBar },
@@ -176,99 +191,92 @@ export default {
       tempEndTime: '',
       filterStartTime: '',
       filterEndTime: '',
-      // 模拟订单数据
-      orderList: [
-        {
-          id: 1,
-          create_time: '2026-04-30 10:25:30',
-          status: 'paid',
-          products: [
-            { name: '君乐宝450ml悦鲜活', price: 0.01, quantity: 2, image: '/static/c1.png' },
-            { name: '可口可乐330ml', price: 3.00, quantity: 1, image: '/static/c4.png' }
-          ],
-          totalQuantity: 3,
-          totalAmount: '0.04'
-        },
-        {
-          id: 2,
-          create_time: '2026-04-29 15:12:45',
-          status: 'unpaid',
-          products: [
-            { name: '农夫山泉550ml', price: 2.00, quantity: 3, image: '/static/c5.png' }
-          ],
-          totalQuantity: 3,
-          totalAmount: '6.00'
-        },
-        {
-          id: 3,
-          create_time: '2026-04-28 09:30:00',
-          status: 'paid',
-          products: [
-            { name: '乐事薯片原味75g', price: 7.50, quantity: 1, image: '/static/c6.png' },
-            { name: '白桔（0.0.0.0-5.5.5）', price: 0.05, quantity: 5, image: '/static/c3.png' }
-          ],
-          totalQuantity: 6,
-          totalAmount: '1.00'
-        },
-        {
-          id: 4,
-          create_time: '2026-04-27 18:45:20',
-          status: 'unpaid',
-          products: [
-            { name: '白红（0.0.0.0-9.9.9）', price: 0.06, quantity: 10, image: '/static/c2.png' }
-          ],
-          totalQuantity: 10,
-          totalAmount: '0.60'
-        },
-        {
-          id: 5,
-          create_time: '2026-04-25 12:00:00',
-          status: 'paid',
-          products: [
-            { name: '君乐宝450ml悦鲜活', price: 0.01, quantity: 1, image: '/static/c1.png' }
-          ],
-          totalQuantity: 1,
-          totalAmount: '0.01'
-        }
-      ]
+      orderList: [],
+      loading: false,
+      page: 1,
+      limit: 10,
+      hasNext: true,
+      total: 0
     };
   },
   computed: {
     filteredOrders() {
       let list = this.orderList;
-      
-      // Tab筛选
+
       if (this.currentTab === 'paid') {
-        list = list.filter(o => o.status === 'paid');
+        list = list.filter(o => o.payment_status === 'PAID');
       } else if (this.currentTab === 'unpaid') {
-        list = list.filter(o => o.status === 'unpaid');
+        list = list.filter(o => o.payment_status === 'PENDING');
       }
-      
-      // 日期筛选
-      if (this.filterStartTime) {
-        list = list.filter(o => o.create_time >= this.filterStartTime);
-      }
-      if (this.filterEndTime) {
-        list = list.filter(o => o.create_time.split(' ')[0] <= this.filterEndTime);
-      }
-      
+
       return list;
     }
   },
   onLoad() {
-    // 进入订单页需要登录
     if (!checkLoginWithPrompt('order')) return;
+    this.fetchOrders();
   },
   methods: {
+    // 拉取订单列表
+    async fetchOrders(append = false) {
+      if (this.loading) return;
+      this.loading = true;
+
+      try {
+        const userInfo = getCachedUserInfo();
+        const userId = userInfo && userInfo.user_id;
+        if (!userId) {
+          uni.showToast({ title: '无法获取用户信息', icon: 'none' });
+          return;
+        }
+
+        const filter = { user_id: userId };
+        if (this.filterStartTime) filter.start_time = this.filterStartTime;
+        if (this.filterEndTime) filter.end_time = this.filterEndTime;
+
+        const res = await get('/user/orders', {
+          page: this.page,
+          limit: this.limit,
+          filter: JSON.stringify(filter)
+        });
+
+        const ret = res.data || {};
+        if (ret.code === 0) {
+          const list = Array.isArray(ret.data) ? ret.data : [];
+          const meta = ret.meta || {};
+
+          if (append) {
+            this.orderList = this.orderList.concat(list);
+          } else {
+            this.orderList = list;
+          }
+
+          this.total = meta.total || list.length;
+          this.hasNext = !!meta.hasNext;
+        } else {
+          uni.showToast({ title: ret.message || '获取订单失败', icon: 'none' });
+        }
+      } catch (e) {
+        uni.showToast({ title: '网络请求失败', icon: 'none' });
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 上拉加载更多
+    loadMore() {
+      if (!this.hasNext || this.loading) return;
+      this.page++;
+      this.fetchOrders(true);
+    },
+
     switchTab(tab) {
       this.currentTab = tab;
     },
-    onStartTimeChange(e) {
-      this.tempStartTime = e.detail.value;
-    },
-    onEndTimeChange(e) {
-      this.tempEndTime = e.detail.value;
-    },
+
+    // 筛选
+    onStartTimeChange(e) { this.tempStartTime = e.detail.value; },
+    onEndTimeChange(e) { this.tempEndTime = e.detail.value; },
     resetFilter() {
       this.tempStartTime = '';
       this.tempEndTime = '';
@@ -277,39 +285,82 @@ export default {
       this.filterStartTime = this.tempStartTime;
       this.filterEndTime = this.tempEndTime;
       this.showFilterSidebar = false;
+      this.page = 1;
+      this.hasNext = true;
+      this.fetchOrders();
     },
     clearFilter() {
       this.filterStartTime = '';
       this.filterEndTime = '';
+      this.page = 1;
+      this.hasNext = true;
+      this.fetchOrders();
     },
+
+    // 格式化时间
+    formatTime(iso) {
+      if (!iso) return '';
+      const d = new Date(iso);
+      const pad = n => String(n).padStart(2, '0');
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    },
+
+    // 解析 MongoDB Decimal128
+    getDecimal(val) {
+      if (!val) return '0.00';
+      if (val.$numberDecimal) return val.$numberDecimal;
+      return String(val);
+    },
+
+    // 订单状态
+    orderStatusText(status) {
+      const map = { PROCESSING: '处理中', COMPLETED: '已完成', CANCELLED: '已取消' };
+      return map[status] || status;
+    },
+    orderStatusClass(status) {
+      if (status === 'COMPLETED') return 'paid';
+      if (status === 'CANCELLED') return 'cancelled';
+      return 'processing';
+    },
+
+    // 支付状态
+    payStatusText(status) {
+      const map = { PENDING: '待支付', PAID: '已支付', REFUNDED: '已退款', PARTIAL_REFUND: '部分退款' };
+      return map[status] || status;
+    },
+    payStatusClass(status) {
+      if (status === 'PAID') return 'paid';
+      if (status === 'PENDING') return 'unpaid';
+      return '';
+    },
+
     goToDetail(order) {
-      uni.showToast({ title: '订单详情开发中', icon: 'none' });
+      uni.navigateTo({ url: `/pages/order/detail?order_id=${order.order_id}` });
     },
-    handleAction(order) {
-      if (order.status === 'unpaid') {
-        // 支付需要登录
-        if (!checkLoginWithPrompt('pay')) return;
-        uni.showModal({
-          title: '立即支付',
-          content: `确认支付￥${order.totalAmount}？`,
-          success: (res) => {
-            if (res.confirm) {
-              uni.showToast({ title: '支付成功', icon: 'success' });
-            }
+    handlePay(order) {
+      if (!checkLoginWithPrompt('pay')) return;
+      uni.showModal({
+        title: '立即支付',
+        content: `确认支付￥${this.getDecimal(order.total_amount)}？`,
+        success: (res) => {
+          if (res.confirm) {
+            uni.showToast({ title: '支付功能开发中', icon: 'none' });
           }
-        });
-      } else {
-        uni.showModal({
-          title: '申请退款',
-          content: '确认申请退款？',
-          success: (res) => {
-            if (res.confirm) {
-              uni.showToast({ title: '退款申请已提交', icon: 'success' });
-            }
-          }
-        });
-      }
+        }
+      });
     },
+    handleRefund(order) {
+      uni.showModal({
+        title: '申请退款',
+        content: '确认申请退款？',
+        success: (res) => {
+          if (res.confirm) {
+            uni.showToast({ title: '退款功能开发中', icon: 'none' });
+          }
+        }
+      });
+    },
+
     handleNavPrev() {
       uni.navigateBack({ fail: () => { uni.switchTab({ url: '/pages/index/index' }); } });
     },
@@ -426,16 +477,36 @@ page { height: 100%; background-color: #f5f5f5; }
   font-size: 26rpx;
   color: #666;
 }
-.order-status {
-  font-size: 26rpx;
-  font-weight: bold;
+.status-tags {
+  display: flex;
+  gap: 12rpx;
+}
+.order-status, .pay-status {
+  font-size: 22rpx;
+  padding: 4rpx 14rpx;
+  border-radius: 6rpx;
+}
+.order-status.processing {
+  background: #e8f4ff;
+  color: #2979ff;
 }
 .order-status.paid {
+  background: #e8faf0;
   color: #19be6b;
 }
-.order-status.unpaid {
+.order-status.cancelled {
+  background: #f5f5f5;
+  color: #999;
+}
+.pay-status.paid {
+  background: #e8faf0;
+  color: #19be6b;
+}
+.pay-status.unpaid {
+  background: #fff0f0;
   color: #e4393c;
 }
+
 .divider {
   height: 1rpx;
   background: #f0f0f0;
@@ -554,6 +625,28 @@ page { height: 100%; background-color: #f5f5f5; }
   color: #999;
 }
 
+/* 加载状态 */
+.loading-state {
+  display: flex;
+  justify-content: center;
+  padding: 40rpx 0;
+}
+.loading-text {
+  font-size: 26rpx;
+  color: #999;
+}
+
+/* 加载更多 */
+.load-more {
+  display: flex;
+  justify-content: center;
+  padding: 30rpx 0;
+}
+.load-more-text {
+  font-size: 24rpx;
+  color: #ccc;
+}
+
 /* 筛选侧边栏 */
 .filter-sidebar-mask {
   position: fixed;
@@ -645,4 +738,4 @@ page { height: 100%; background-color: #f5f5f5; }
 .bottom-spacer {
   height: 120rpx;
 }
-</style>
+</style>