首页示例数据调用

pages.json

@@ -15,8 +15,13 @@
     {
       "path": "pages/faq/faq",
       "style": {
-        "navigationStyle": "custom",
+        "navigationStyle": "custom"
-        "navigationBarTitleText": "常见问题"
+      }
+    },
+    {
+      "path": "pages/order/order",
+      "style": {
+        "navigationStyle": "custom"
       }
     }
   ],

pages/index/index.vue

@@ -6,21 +6,63 @@
         class="product-area"
         scroll-y
       >
+        <!-- 热销商品标题 + 装饰 -->
+        <view class="section-title-wrap">
           <view class="section-title">热销商品</view>
+          <view class="title-decoration">
+            <view class="deco-dot"></view>
+            <view class="deco-line"></view>
+          </view>
+        </view>
 
-        <view class="product-grid" id="productGrid">
+        <!-- 分类 Tab 横向滚动 -->
+        <scroll-view class="category-tabs" scroll-x>
+          <view class="tabs-inner">
+            <view class="tab-item" :class="{ active: activeCategory === 'all' }" @click="switchCategory('all')">
+              <text class="tab-text">全部商品</text>
+              <view class="tab-underline"></view>
+            </view>
             <view
-            v-for="(item, index) in productList"
+              v-for="(cat, idx) in categoryList"
-            :key="index"
+              :key="idx"
+              class="tab-item"
+              :class="{ active: activeCategory === cat.category }"
+              @click="switchCategory(cat.category)"
+            >
+              <text class="tab-text">{{ cat.category }}</text>
+              <view class="tab-underline"></view>
+            </view>
+          </view>
+        </scroll-view>
+
+        <!-- 商品网格 -->
+        <view class="product-grid">
+          <view
+            v-for="(item, idx) in displayProducts"
+            :key="idx"
             class="product-card"
+            @click="goProductDetail(item)"
           >
             <image class="product-img" :src="item.image" mode="aspectFill" />
             <view class="product-name">{{ item.name }}</view>
-            <view class="product-price">{{ item.price }}元</view>
+            <view class="product-price">
+              <text class="price-yen">¥</text>
+              <text class="price-num">{{ getDisplayPrice(item) }}</text>
+            </view>
           </view>
         </view>
 
-        <!-- 底部占位，防止被tab-bar遮挡 -->
+        <!-- 无商品时 -->
+        <view v-if="categoryList.length === 0 && !loading" class="empty-tip">
+          <text>暂无商品</text>
+        </view>
+
+        <!-- loading -->
+        <view v-if="loading" class="loading-tip">
+          <text>加载中...</text>
+        </view>
+
+        <!-- 底部占位 -->
         <view class="bottom-spacer"></view>
       </scroll-view>
 
@@ -89,34 +131,26 @@
 <script>
 import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';
 
+const API_BASE = 'http://localhost:4000';
+const DEVICE_ID = 'A1036';
+const BEARER_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImRlZXB2ZW5kaW5nIiwic3ViIjoiMTY0MDI0MTEyNiIsImZyb20iOiJwb3MiLCJyb2xlIjoicG9zIiwibWFpbmJvYXJkX2lkIjoiVDEwMDIiLCJwb3Nfc24iOiIxNjQwMjQxMTI2IiwiaWF0IjoxNzc3NTI5MjYzLCJleHAiOjE3NzgxMzQwNjN9.I7eL2oL2rmkaJKH4R6aylUloyJh0dUS3vXLvKueX28I';
+
 export default {
   components: { PageNavBar },
   data() {
     return {
       currentTab: 'home',
       showQrcodePopup: false,
-      productList: [
+      loading: false,
-        { name: '君乐宝450ml悦鲜活', price: '0.01', image: '/static/c1.png' },
+      categoryList: [],
-        { name: '白红（0.0.0.0-9.9.9）', price: '0.06', image: '/static/c2.png' },
+      activeCategory: 'all',
-        { name: '白桔（0.0.0.0-5.5.5）', price: '0.05', image: '/static/c3.png' },
-        { name: '可口可乐330ml', price: '3.00', image: '/static/c4.png' },
-        { name: '农夫山泉550ml', price: '2.00', image: '/static/c5.png' },
-        { name: '君乐宝450ml悦鲜活', price: '0.01', image: '/static/c1.png' },
-        { name: '白红（0.0.0.0-9.9.9）', price: '0.06', image: '/static/c2.png' },
-        { name: '白桔（0.0.0.0-5.5.5）', price: '0.05', image: '/static/c3.png' },
-        { name: '可口可乐330ml', price: '3.00', image: '/static/c4.png' },
-        { name: '农夫山泉550ml', price: '2.00', image: '/static/c5.png' },
-        { name: '乐事薯片原味75g', price: '7.50', image: '/static/c6.png' }
-      ],
       userInfo: { nickname: '张三', phone: '13812345678' },
-      // 菜单：我的订单、常见问题、联系客服、公众号信息
       menuList: [
         { title: '我的订单', action: 'order' },
         { title: '常见问题', action: 'faq' },
         { title: '联系客服', action: 'call' },
         { title: '公众号信息', action: 'qrcode' }
       ],
-      // 客服电话
       servicePhone: '13264706088'
     };
   },
@@ -124,40 +158,84 @@ export default {
     maskedPhone() {
       const p = this.userInfo.phone;
       return p ? p.substring(0,3) + '****' + p.substring(7) : '';
+    },
+    // 全部商品：合并所有分类下的商品
+    allProducts() {
+      let all = [];
+      this.categoryList.forEach(cat => {
+        if (cat.products) all = all.concat(cat.products);
+      });
+      return all;
+    },
+    // 当前显示的商品列表（根据选中的分类 tab）
+    displayProducts() {
+      if (this.activeCategory === 'all') return this.allProducts;
+      const cat = this.categoryList.find(c => c.category === this.activeCategory);
+      return cat ? cat.products || [] : [];
     }
   },
+  onLoad() {
+    this.fetchProducts();
+  },
   methods: {
     switchTab(tab) { this.currentTab = tab; },
+    switchCategory(cat) { this.activeCategory = cat; },
+    getDisplayPrice(item) {
+      // 优先显示促销价，没有促销价则显示销售价
+      if (item.promotion_price != null) return item.promotion_price;
+      return item.sale_price;
+    },
+    goProductDetail(item) {
+      uni.navigateTo({ url: '/pages/product/product?product_id=' + item.product_id });
+    },
+    async fetchProducts() {
+      this.loading = true;
+      try {
+        const res = await uni.request({
+          url: API_BASE + '/device-product/getProductList',
+          method: 'GET',
+          data: { device_id: DEVICE_ID },
+          header: {
+            Authorization: 'Bearer ' + BEARER_TOKEN
+          }
+        });
+        const ret = res.data || {};
+        if (ret.code === 0 && Array.isArray(ret.data)) {
+          this.categoryList = ret.data;
+        } else {
+          uni.showToast({ title: ret.message || '获取商品失败', icon: 'none' });
+        }
+      } catch (e) {
+        uni.showToast({ title: '网络请求失败', icon: 'none' });
+      } finally {
+        this.loading = false;
+      }
+    },
     handleOpenDoor() {
-      uni.showModal({ title: '开门', content: '确认打开柜门？', success: r => r.confirm && uni.showToast({title:'柜门已打开', icon:'success'}) });
+      uni.showModal({
+        title: '开门',
+        content: '确认打开柜门？',
+        success: r => r.confirm && uni.showToast({ title: '柜门已打开', icon: 'success' })
+      });
     },
     handleMenuClick(item) {
       switch (item.action) {
         case 'order':
-          uni.showToast({ title: '订单功能开发中', icon: 'none' });
+          uni.navigateTo({ url: '/pages/order/order' });
           break;
         case 'faq':
           uni.navigateTo({ url: '/pages/faq/faq' });
           break;
         case 'call':
-          // 拨打电话
+          uni.makePhoneCall({ phoneNumber: this.servicePhone, fail: () => {} });
-          uni.makePhoneCall({
-            phoneNumber: this.servicePhone,
-            fail: () => {}
-          });
           break;
         case 'qrcode':
-          // 显示公众号二维码弹窗
           this.showQrcodePopup = true;
           break;
       }
     },
-    handleNavPrev() {
+    handleNavPrev() { this.currentTab = 'home'; },
-      this.currentTab = 'home';
+    handleNavNext() { uni.showToast({ title: '暂无下一页', icon: 'none' }); }
-    },
-    handleNavNext() {
-      uni.showToast({ title: '暂无下一页', icon: 'none' });
-    }
   }
 };
 </script>
@@ -170,24 +248,46 @@ page { height: 100%; background-color: #fff; }
 /* ====== 首页样式 ====== */
 .home-page { display: flex; flex-direction: column; height: 100%; }
 .product-area { flex: 1; overflow-y: auto; height: 0; }
-.section-title { font-size: 36rpx; font-weight: bold; color: #333; padding: 24rpx 28rpx 16rpx; }
+
+/* 热销商品标题 + 装饰 */
+.section-title-wrap { display: flex; align-items: center; padding: 24rpx 28rpx 16rpx; }
+.section-title { font-size: 36rpx; font-weight: bold; color: #333; }
+.title-decoration { display: flex; align-items: center; margin-left: 16rpx; }
+.deco-dot { width: 12rpx; height: 12rpx; background: #ff6b6b; border-radius: 50%; }
+.deco-line { width: 40rpx; height: 6rpx; background: linear-gradient(90deg, #ff6b6b, transparent); margin-left: 6rpx; border-radius: 3rpx; }
+
+/* 分类 Tab 横向滚动 */
+.category-tabs { white-space: nowrap; padding: 0 20rpx; border-bottom: 1rpx solid #f0f0f0; }
+.tabs-inner { display: inline-flex; padding: 0 8rpx; }
+.tab-item { display: inline-flex; flex-direction: column; align-items: center; padding: 20rpx 24rpx; position: relative; }
+.tab-text { font-size: 28rpx; color: #666; transition: color 0.2s; }
+.tab-item.active .tab-text { color: #2979ff; font-weight: bold; }
+.tab-underline { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 4rpx; background: #2979ff; border-radius: 2rpx; transition: width 0.2s; }
+.tab-item.active .tab-underline { width: 48rpx; }
+
+/* 商品网格 */
 .product-grid { display: flex; flex-wrap: wrap; padding: 12rpx; gap: 12rpx; }
 .product-card { width: calc((100% - 24rpx) / 3); text-align: center; }
 .product-img { width: 100%; height: 220rpx; border-radius: 8rpx; background-color: #f0f0f0; }
 .product-name { font-size: 24rpx; color: #333; padding: 10rpx 8rpx 6rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .product-price { font-size: 30rpx; font-weight: bold; color: #e4393c; padding: 0 8rpx 16rpx; }
+.price-yen { font-size: 22rpx; }
+.price-num { font-size: 32rpx; }
 
 /* 底部占位 */
 .bottom-spacer { height: 160rpx; }
 
 /* 底部导航栏 */
 .tab-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 120rpx; background: #fff; display: flex; align-items: center; justify-content: space-around; box-shadow: 0 -2rpx 16rpx rgba(0,0,0,0.08); z-index: 999; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }
-.tab-item { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
+.tab-bar .tab-item { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
-.tab-text { font-size: 28rpx; color: #999; font-weight: normal; }
+.tab-bar .tab-text { font-size: 28rpx; color: #999; font-weight: normal; }
-.tab-item.active .tab-text { color: #2979ff; }
+.tab-bar .tab-item.active .tab-text { color: #2979ff; }
 .door-btn-wrapper { position: relative; display: flex; align-items: center; justify-content: center; margin-top: -80rpx; }
 .door-btn { width: 160rpx; height: 160rpx; border-radius: 50%; background: linear-gradient(135deg, #2979ff, #1e60e0); color: #fff; font-size: 38rpx; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 10rpx 36rpx rgba(41,121,255,0.55); }
 
+/* 空状态 / Loading */
+.empty-tip, .loading-tip { text-align: center; padding: 60rpx; color: #999; font-size: 28rpx; }
+
 /* ====== 我的页面样式 ====== */
 .mine-page { background-color: #f5f5f5; position: relative; overflow-y: auto; }
 .user-header { background: linear-gradient(135deg, #2979ff, #1e60e0); padding: 60rpx 40rpx; }

pages/order/order.vue

@@ -0,0 +1,641 @@
+<template>
+  <view class="order-page">
+    <!-- 顶部Tab切换 -->
+    <view class="tab-header">
+      <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" 
+        :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" 
+        :class="{ active: currentTab === 'unpaid' }"
+        @click="switchTab('unpaid')"
+      >
+        <text class="tab-text">未支付</text>
+        <view class="tab-line" v-if="currentTab === 'unpaid'"></view>
+      </view>
+    </view>
+
+    <!-- 数量统计和筛选 -->
+    <view class="filter-bar">
+      <text class="total-count">总数量: {{ filteredOrders.length }}</text>
+      <view class="search-btn" @click="showFilterSidebar = true">
+        <text class="search-icon">🔍</text>
+      </view>
+    </view>
+
+    <!-- 筛选条件显示 -->
+    <view class="filter-condition" v-if="filterStartTime || filterEndTime">
+      <text class="filter-text">{{ filterStartTime }} - {{ filterEndTime }}</text>
+      <text class="filter-clear" @click="clearFilter">✕</text>
+    </view>
+
+    <!-- 订单列表 -->
+    <scroll-view class="order-scroll" scroll-y>
+      <view class="order-list">
+        <view 
+          class="order-card" 
+          v-for="(order, index) in filteredOrders" 
+          :key="index"
+        >
+          <!-- 第一行: 日期 + 状态 -->
+          <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>
+          </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" 
+                :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>
+                </view>
+              </view>
+            </view>
+            <view class="product-arrow">
+              <text class="arrow-icon">›</text>
+            </view>
+          </view>
+
+          <!-- 总计 -->
+          <view class="order-total">
+            <text class="total-qty">共{{ order.totalQuantity }}件</text>
+            <view class="total-amount">
+              <text class="total-label">总计:</text>
+              <text class="total-price">￥{{ order.totalAmount }}</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)"
+            >
+              {{ order.status === 'unpaid' ? '立即支付' : '申请退款' }}
+            </view>
+          </view>
+        </view>
+
+        <!-- 空状态 -->
+        <view class="empty-state" v-if="filteredOrders.length === 0">
+          <text class="empty-text">暂无订单</text>
+        </view>
+      </view>
+      <view class="bottom-spacer"></view>
+    </scroll-view>
+
+    <!-- 筛选侧边栏 -->
+    <view class="filter-sidebar-mask" v-if="showFilterSidebar" @click="showFilterSidebar = false">
+      <view class="filter-sidebar" @click.stop>
+        <view class="sidebar-header">
+          <text class="sidebar-title">筛选条件</text>
+          <text class="sidebar-close" @click="showFilterSidebar = false">✕</text>
+        </view>
+        <view class="sidebar-content">
+          <view class="date-row">
+            <text class="date-label">开始时间</text>
+            <picker 
+              mode="date" 
+              :value="tempStartTime" 
+              @change="onStartTimeChange"
+            >
+              <view class="date-picker">
+                <text class="date-value">{{ tempStartTime || '请选择' }}</text>
+              </view>
+            </picker>
+          </view>
+          <view class="date-row">
+            <text class="date-label">结束时间</text>
+            <picker 
+              mode="date" 
+              :value="tempEndTime" 
+              @change="onEndTimeChange"
+            >
+              <view class="date-picker">
+                <text class="date-value">{{ tempEndTime || '请选择' }}</text>
+              </view>
+            </picker>
+          </view>
+        </view>
+        <view class="sidebar-footer">
+          <view class="sidebar-btn reset-btn" @click="resetFilter">
+            <text class="btn-text">重置</text>
+          </view>
+          <view class="sidebar-btn confirm-btn" @click="confirmFilter">
+            <text class="btn-text">确定</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部导航条 -->
+    <page-nav-bar
+      :hasPrev="true"
+      :hasNext="false"
+      @prev="handleNavPrev"
+      @next="handleNavNext"
+    />
+  </view>
+</template>
+
+<script>
+import PageNavBar from '@/components/page-nav-bar/page-nav-bar.vue';
+
+export default {
+  components: { PageNavBar },
+  data() {
+    return {
+      currentTab: 'all',
+      showFilterSidebar: false,
+      tempStartTime: '',
+      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'
+        }
+      ]
+    };
+  },
+  computed: {
+    filteredOrders() {
+      let list = this.orderList;
+      
+      // Tab筛选
+      if (this.currentTab === 'paid') {
+        list = list.filter(o => o.status === 'paid');
+      } else if (this.currentTab === 'unpaid') {
+        list = list.filter(o => o.status === 'unpaid');
+      }
+      
+      // 日期筛选
+      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;
+    }
+  },
+  methods: {
+    switchTab(tab) {
+      this.currentTab = tab;
+    },
+    onStartTimeChange(e) {
+      this.tempStartTime = e.detail.value;
+    },
+    onEndTimeChange(e) {
+      this.tempEndTime = e.detail.value;
+    },
+    resetFilter() {
+      this.tempStartTime = '';
+      this.tempEndTime = '';
+    },
+    confirmFilter() {
+      this.filterStartTime = this.tempStartTime;
+      this.filterEndTime = this.tempEndTime;
+      this.showFilterSidebar = false;
+    },
+    clearFilter() {
+      this.filterStartTime = '';
+      this.filterEndTime = '';
+    },
+    goToDetail(order) {
+      uni.showToast({ title: '订单详情开发中', icon: 'none' });
+    },
+    handleAction(order) {
+      if (order.status === 'unpaid') {
+        uni.showModal({
+          title: '立即支付',
+          content: `确认支付￥${order.totalAmount}？`,
+          success: (res) => {
+            if (res.confirm) {
+              uni.showToast({ title: '支付成功', icon: 'success' });
+            }
+          }
+        });
+      } else {
+        uni.showModal({
+          title: '申请退款',
+          content: '确认申请退款？',
+          success: (res) => {
+            if (res.confirm) {
+              uni.showToast({ title: '退款申请已提交', icon: 'success' });
+            }
+          }
+        });
+      }
+    },
+    handleNavPrev() {
+      uni.navigateBack({ fail: () => { uni.switchTab({ url: '/pages/index/index' }); } });
+    },
+    handleNavNext() {
+      uni.showToast({ title: '暂无下一页', icon: 'none' });
+    }
+  }
+};
+</script>
+
+<style scoped>
+page { height: 100%; background-color: #f5f5f5; }
+
+.order-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f5f5f5;
+}
+
+/* 顶部Tab */
+.tab-header {
+  display: flex;
+  background: #fff;
+  padding: 0 24rpx;
+}
+.tab-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 28rpx 0 20rpx;
+  position: relative;
+}
+.tab-text {
+  font-size: 30rpx;
+  color: #666;
+}
+.tab-item.active .tab-text {
+  color: #2979ff;
+  font-weight: bold;
+}
+.tab-line {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 48rpx;
+  height: 6rpx;
+  background: #2979ff;
+  border-radius: 3rpx;
+}
+
+/* 筛选栏 */
+.filter-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 28rpx;
+  background: #fff;
+  border-top: 1rpx solid #f0f0f0;
+}
+.total-count {
+  font-size: 28rpx;
+  color: #333;
+}
+.search-btn {
+  padding: 8rpx 16rpx;
+}
+.search-icon {
+  font-size: 36rpx;
+}
+
+/* 筛选条件显示 */
+.filter-condition {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 28rpx;
+  background: #e8f4ff;
+}
+.filter-text {
+  font-size: 26rpx;
+  color: #2979ff;
+  flex: 1;
+}
+.filter-clear {
+  font-size: 28rpx;
+  color: #999;
+  padding: 8rpx;
+}
+
+/* 订单列表 */
+.order-scroll {
+  flex: 1;
+  height: 0;
+}
+.order-list {
+  padding: 20rpx;
+}
+.order-card {
+  background: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  padding: 24rpx;
+}
+
+/* 订单头部 */
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.order-date {
+  font-size: 26rpx;
+  color: #666;
+}
+.order-status {
+  font-size: 26rpx;
+  font-weight: bold;
+}
+.order-status.paid {
+  color: #19be6b;
+}
+.order-status.unpaid {
+  color: #e4393c;
+}
+.divider {
+  height: 1rpx;
+  background: #f0f0f0;
+  margin: 20rpx 0;
+}
+
+/* 商品列表 */
+.product-section {
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 20rpx;
+}
+.product-list {
+  flex: 1;
+  min-width: 0;
+}
+.product-item {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 0;
+}
+.product-img {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 8rpx;
+  background: #f0f0f0;
+  flex-shrink: 0;
+}
+.product-info {
+  flex: 1;
+  margin-left: 20rpx;
+  min-width: 0;
+}
+.product-name {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.product-price-qty {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 8rpx;
+  display: block;
+}
+.product-arrow {
+  display: flex;
+  align-items: center;
+  padding: 0 16rpx 0 20rpx;
+}
+.arrow-icon {
+  font-size: 52rpx;
+  color: #bbb;
+}
+
+/* 总计 */
+.order-total {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 16rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+.total-qty {
+  font-size: 26rpx;
+  color: #666;
+}
+.total-amount {
+  display: flex;
+  align-items: center;
+}
+.total-label {
+  font-size: 26rpx;
+  color: #666;
+}
+.total-price {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #e4393c;
+  margin-left: 4rpx;
+}
+
+/* 操作按钮 */
+.order-action {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20rpx;
+}
+.action-btn {
+  padding: 16rpx 40rpx;
+  border-radius: 40rpx;
+  font-size: 26rpx;
+}
+.pay-btn {
+  background: linear-gradient(135deg, #2979ff, #1e60e0);
+  color: #fff;
+}
+.refund-btn {
+  background: #fff;
+  border: 2rpx solid #2979ff;
+  color: #2979ff;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 100rpx 0;
+}
+.empty-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+/* 筛选侧边栏 */
+.filter-sidebar-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+.filter-sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 600rpx;
+  height: 100%;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+}
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32rpx 28rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+.sidebar-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+.sidebar-close {
+  font-size: 36rpx;
+  color: #999;
+  padding: 8rpx;
+}
+.sidebar-content {
+  flex: 1;
+  padding: 28rpx;
+}
+.date-row {
+  margin-bottom: 32rpx;
+}
+.date-label {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 16rpx;
+  display: block;
+}
+.date-picker {
+  background: #f5f5f5;
+  border-radius: 8rpx;
+  padding: 24rpx;
+}
+.date-value {
+  font-size: 28rpx;
+  color: #333;
+}
+.sidebar-footer {
+  display: flex;
+  padding: 28rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+.sidebar-btn {
+  flex: 1;
+  padding: 24rpx 0;
+  text-align: center;
+  border-radius: 8rpx;
+  margin: 0 8rpx;
+}
+.reset-btn {
+  background: #f5f5f5;
+}
+.confirm-btn {
+  background: #2979ff;
+}
+.reset-btn .btn-text {
+  color: #666;
+}
+.confirm-btn .btn-text {
+  color: #fff;
+}
+.btn-text {
+  font-size: 28rpx;
+}
+
+/* 底部占位 */
+.bottom-spacer {
+  height: 120rpx;
+}
+</style>