查看全部订单列表

app.json

@@ -8,7 +8,8 @@
     "pages/logs/logs",
     "pages/order-detail/order-detail",
     "pages/medical-records/medical-records",
-    "pages/medical-record-detail/medical-record-detail"
+    "pages/medical-record-detail/medical-record-detail",
+    "pages/order-list/order-list"
   ],
   "window": {
     "navigationBarTextStyle": "black",

pages/order-list/order-list.js

@@ -0,0 +1,59 @@
+const mockData = require('../../utils/mockData.js')
+
+Page({
+  data: {
+    activeTab: 'all',
+    tabs: [
+      { key: 'all', label: '全部' },
+      { key: 'delivering', label: '配送中' },
+      { key: 'completed', label: '已完成' }
+    ],
+    orders: []
+  },
+
+  onLoad(options) {
+    const status = options.status || 'all'
+    this.setData({
+      activeTab: status
+    })
+    this.loadOrders(status)
+  },
+
+  onShow() {
+    this.loadOrders(this.data.activeTab)
+  },
+
+  loadOrders(status) {
+    const app = getApp()
+    let orders = []
+
+    if (status === 'all') {
+      orders = app.getOrders()
+    } else {
+      orders = app.getOrdersByStatus(status === 'delivering' ? '配送中' : '已完成')
+    }
+
+    this.setData({
+      orders: orders
+    })
+  },
+
+  switchTab(e) {
+    const tab = e.currentTarget.dataset.tab
+    this.setData({
+      activeTab: tab
+    })
+    this.loadOrders(tab)
+  },
+
+  viewOrderDetail(e) {
+    const order = e.currentTarget.dataset.order
+    wx.navigateTo({
+      url: `/pages/order-detail/order-detail?id=${order.id}`
+    })
+  },
+
+  goBack() {
+    wx.navigateBack()
+  }
+})

pages/order-list/order-list.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "订单列表",
+  "usingComponents": {}
+}

pages/order-list/order-list.wxml

@@ -0,0 +1,87 @@
+<wxs module="utils">
+module.exports = {
+  getStatusClass: function(status) {
+    if (status === '配送中') return 'delivering';
+    if (status === '已完成') return 'completed';
+    if (status === '待支付') return 'pending';
+    if (status === 'delivering') return 'delivering';
+    if (status === 'completed') return 'completed';
+    if (status === 'pending') return 'pending';
+    return '';
+  },
+  getStatusText: function(status) {
+    if (status === 'delivering') return '配送中';
+    if (status === 'completed') return '已完成';
+    if (status === 'pending') return '待支付';
+    return status;
+  }
+}
+</wxs>
+<view class="container">
+  
+
+  <view class="tabs-container">
+    <view class="tabs">
+      <view 
+        class="tab-item {{activeTab === item.key ? 'active' : ''}}" 
+        wx:for="{{tabs}}" 
+        wx:key="key"
+        bindtap="switchTab"
+        data-tab="{{item.key}}"
+      >
+        <text>{{item.label}}</text>
+      </view>
+    </view>
+  </view>
+
+  <view class="orders-container">
+    <view class="empty-state" wx:if="{{orders.length === 0}}">
+      <view class="empty-icon">
+        <text>📦</text>
+      </view>
+      <text class="empty-text">暂无订单</text>
+    </view>
+
+    <view class="order-list" wx:else>
+      <view 
+        class="order-card" 
+        wx:for="{{orders}}" 
+        wx:key="id"
+        bindtap="viewOrderDetail"
+        data-order="{{item}}"
+      >
+        <view class="order-header">
+          <view class="order-id">
+            <text class="label">订单编号：</text>
+            <text class="value">{{item.id}}</text>
+          </view>
+          <text class="order-status {{utils.getStatusClass(item.status)}}">{{utils.getStatusText(item.status)}}</text>
+        </view>
+
+        <view class="order-body">
+          <view class="hospital-info">
+            <text class="hospital-name">{{item.hospital}}</text>
+            <text class="order-date">{{item.date}}</text>
+          </view>
+
+          <view class="medicines-info">
+            <text class="medicines-label">药品：</text>
+            <text class="medicines-text">{{item.medicines.join('、')}}</text>
+          </view>
+
+          <view class="address-info" wx:if="{{item.deliveryAddress}}">
+            <text class="address-label">地址：</text>
+            <text class="address-text">{{item.deliveryAddress}}</text>
+          </view>
+        </view>
+
+        <view class="order-footer">
+          <text class="total-price">¥{{item.totalPrice}}</text>
+          <view class="arrow-icon">
+            <text>›</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

pages/order-list/order-list.wxss

@@ -0,0 +1,260 @@
+.container {
+  width: 100%;
+  align-items: stretch;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #f5f5f5;
+}
+
+.custom-navbar {
+  background: linear-gradient(135deg, #007AFF 0%, #00D4FF 100%);
+  padding: 45rpx 30rpx 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+.navbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.back-btn {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.back-icon {
+  font-size: 48rpx;
+  color: white;
+  font-weight: bold;
+}
+
+.navbar-title {
+  flex: 1;
+  text-align: center;
+}
+
+.navbar-title text {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: white;
+}
+
+.navbar-right {
+  width: 60rpx;
+  flex-shrink: 0;
+}
+
+.tabs-container {
+  background: white;
+  padding: 20rpx 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  flex-shrink: 0;
+}
+
+.tabs {
+  display: flex;
+  background: #f5f5f5;
+  border-radius: 50rpx;
+  padding: 6rpx;
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 16rpx 0;
+  border-radius: 44rpx;
+  transition: all 0.3s;
+}
+
+.tab-item text {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.tab-item.active {
+  background: #007AFF;
+}
+
+.tab-item.active text {
+  color: white;
+  font-weight: bold;
+}
+
+.orders-container {
+  flex: 1;
+  padding: 20rpx;
+  overflow-y: auto;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 0;
+}
+
+.empty-icon {
+  font-size: 120rpx;
+  margin-bottom: 30rpx;
+  opacity: 0.3;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.order-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.order-card {
+  background: white;
+  border-radius: 20rpx;
+  padding: 25rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  transition: all 0.3s;
+}
+
+.order-card:active {
+  transform: scale(0.98);
+  box-shadow: 0 2rpx 15rpx rgba(0, 0, 0, 0.1);
+}
+
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  margin-bottom: 20rpx;
+}
+
+.order-id {
+  display: flex;
+  align-items: center;
+}
+
+.order-id .label {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.order-id .value {
+  font-size: 24rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.order-status {
+  font-size: 22rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 20rpx;
+  font-weight: bold;
+}
+
+.order-status.delivering {
+  background: #e6f7ff;
+  color: #1890ff;
+}
+
+.order-status.completed {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+.order-status.pending {
+  background: #fff7e6;
+  color: #fa8c16;
+}
+
+.order-body {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20rpx;
+}
+
+.hospital-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15rpx;
+}
+
+.hospital-name {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.order-date {
+  font-size: 22rpx;
+  color: #999;
+}
+
+.medicines-info {
+  display: flex;
+  margin-bottom: 15rpx;
+}
+
+.medicines-label {
+  font-size: 24rpx;
+  color: #999;
+  flex-shrink: 0;
+}
+
+.medicines-text {
+  font-size: 24rpx;
+  color: #666;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.address-info {
+  display: flex;
+}
+
+.address-label {
+  font-size: 24rpx;
+  color: #999;
+  flex-shrink: 0;
+}
+
+.address-text {
+  font-size: 24rpx;
+  color: #666;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.order-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 15rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.total-price {
+  font-size: 32rpx;
+  color: #FF6B35;
+  font-weight: bold;
+}
+
+.arrow-icon {
+  font-size: 36rpx;
+  color: #ccc;
+}

pages/profile/profile.js

@@ -204,35 +204,16 @@ Page({
   // 查看订单
   viewOrders(e) {
     const status = e.currentTarget.dataset.status
-    const app = getApp()
-    const orders = app.getOrdersByStatus(status)
+    let tabStatus = 'all'
     
-    if (orders.length === 0) {
-      wx.showToast({
-        title: `暂无${status}订单`,
-        icon: 'none'
-      })
-      return
+    if (status === '配送中') {
+      tabStatus = 'delivering'
+    } else if (status === '已完成') {
+      tabStatus = 'completed'
     }
-
-    // 构建订单列表内容
-    let content = `${status}订单列表：\n\n`
-    orders.forEach((order, index) => {
-      content += `${index + 1}. ${order.hospital}\n`
-      content += `   药品：${order.medicines.join('、')}\n`
-      content += `   价格：¥${order.totalPrice}\n`
-      content += `   状态：${order.status}\n`
-      content += `   日期：${order.date}\n`
-      if (order.deliveryAddress) {
-        content += `   地址：${order.deliveryAddress}\n`
-      }
-      content += `\n`
-    })
-
-    wx.showModal({
-      title: '订单列表',
-      content: content,
-      showCancel: false
+    
+    wx.navigateTo({
+      url: `/pages/order-list/order-list?status=${tabStatus}`
     })
   },
 

pages/profile/profile.wxml

@@ -108,7 +108,7 @@ module.exports = {
     <view class="recent-orders">
       <view class="recent-title">
         <text>最近订单</text>
-        <text class="view-all" bindtap="viewOrders">查看全部 ></text>
+        <text class="view-all" bindtap="viewOrders" data-status="全部">查看全部 ></text>
       </view>
       <view class="order-list">
         <view class="order-item" wx:for="{{recentOrders}}" wx:key="id" bindtap="viewOrderDetail" data-order="{{item}}">