完成订单详情页面

app.js

@@ -61,6 +61,54 @@ App({
     
     // 更新全局数据
     this.globalData.orders = orders
+    
+    console.log('订单已添加:', order)
+  },
+
+  // 全局方法：获取所有订单
+  getOrders() {
+    const orders = wx.getStorageSync('orders') || []
+    this.globalData.orders = orders
+    return orders
+  },
+
+  // 全局方法：根据状态获取订单
+  getOrdersByStatus(status) {
+    const orders = this.getOrders()
+    if (status === '全部') {
+      return orders
+    }
+    return orders.filter(order => order.status === status)
+  },
+
+  // 全局方法：更新订单状态
+  updateOrderStatus(orderId, newStatus) {
+    const orders = this.getOrders()
+    const orderIndex = orders.findIndex(order => order.id === orderId)
+    
+    if (orderIndex !== -1) {
+      orders[orderIndex].status = newStatus
+      
+      // 更新无人机配送状态
+      if (newStatus === 'completed') {
+        orders[orderIndex].droneTracking.status = '已送达'
+      } else if (newStatus === 'delivering') {
+        orders[orderIndex].droneTracking.status = '配送中'
+      }
+      
+      wx.setStorageSync('orders', orders)
+      this.globalData.orders = orders
+      console.log('订单状态已更新:', orderId, newStatus)
+    }
+  },
+
+  // 全局方法：删除订单
+  deleteOrder(orderId) {
+    let orders = this.getOrders()
+    orders = orders.filter(order => order.id !== orderId)
+    wx.setStorageSync('orders', orders)
+    this.globalData.orders = orders
+    console.log('订单已删除:', orderId)
   },
 
   // 全局方法：添加诊断记录

app.json

@@ -5,7 +5,8 @@
     "pages/diagnosis/diagnosis",
     "pages/profile/profile",
     "pages/hospital/hospital",
-    "pages/logs/logs"
+    "pages/logs/logs",
+    "pages/order-detail/order-detail"
   ],
   "window": {
     "navigationBarTextStyle": "black",

pages/order-detail/order-detail.js

@@ -0,0 +1,98 @@
+// order-detail.js
+Page({
+  data: {
+    order: null
+  },
+
+  onLoad(options) {
+    const orderId = parseInt(options.id)
+    const app = getApp()
+    const orders = app.getOrders()
+    const order = orders.find(o => o.id === orderId)
+    
+    if (order) {
+      this.setData({
+        order: order
+      })
+    } else {
+      wx.showToast({
+        title: '订单不存在',
+        icon: 'none'
+      })
+      setTimeout(() => {
+        wx.navigateBack()
+      }, 1500)
+    }
+  },
+
+  // 返回上一页
+  goBack() {
+    wx.navigateBack({
+      delta: 1
+    })
+  },
+
+  // 联系客服
+  contactSupport() {
+    wx.showModal({
+      title: '联系客服',
+      content: '客服电话：400-123-4567\n工作时间：9:00-18:00',
+      showCancel: false
+    })
+  },
+
+  // 再次购买
+  reorder() {
+    const order = this.data.order
+    wx.showModal({
+      title: '再次购买',
+      content: `确认再次购买${order.hospital}的药品吗？`,
+      success: (res) => {
+        if (res.confirm) {
+          // 跳转到下单页面
+          wx.switchTab({
+            url: '/pages/order/order'
+          })
+          
+          // 延迟设置搜索关键词
+          setTimeout(() => {
+            const pages = getCurrentPages()
+            const orderPage = pages.find(page => page.route === 'pages/order/order')
+            if (orderPage) {
+              orderPage.setData({
+                currentTab: 0,
+                hospitalKeyword: order.hospital
+              })
+            }
+          }, 500)
+        }
+      }
+    })
+  },
+
+  // 删除订单
+  deleteOrder() {
+    const order = this.data.order
+    wx.showModal({
+      title: '确认删除',
+      content: '确定要删除这个订单吗？删除后无法恢复。',
+      success: (res) => {
+        if (res.confirm) {
+          const app = getApp()
+          app.deleteOrder(order.id)
+          
+          wx.showToast({
+            title: '订单已删除',
+            icon: 'success',
+            success: () => {
+              setTimeout(() => {
+                wx.navigateBack()
+              }, 1500)
+            }
+          })
+        }
+      }
+    }
+  )
+}
+})

pages/order-detail/order-detail.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "订单详情",
+  "navigationStyle": "custom",
+  "enablePullDownRefresh": false
+}

pages/order-detail/order-detail.wxml

@@ -0,0 +1,126 @@
+<!--order-detail.wxml-->
+<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="custom-navbar">
+    <view class="navbar-content">
+      <view class="back-btn" bindtap="goBack">
+        <text class="back-icon">‹</text>
+      </view>
+      <view class="navbar-title">
+        <text>订单详情</text>
+      </view>
+      <view class="navbar-right"></view>
+    </view>
+  </view>
+
+  <!-- 订单基本信息 -->
+  <view class="order-info-section">
+    <view class="section-title">
+      <text>订单信息</text>
+    </view>
+    <view class="info-card">
+      <view class="info-row">
+        <text class="info-label">订单编号：</text>
+        <text class="info-value">{{order.id}}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">医院：</text>
+        <text class="info-value">{{order.hospital}}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">下单时间：</text>
+        <text class="info-value">{{order.date}}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">订单状态：</text>
+        <text class="info-value status {{utils.getStatusClass(order.status)}}">{{utils.getStatusText(order.status)}}</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- 药品信息 -->
+  <view class="medicines-section">
+    <view class="section-title">
+      <text>药品信息</text>
+    </view>
+    <view class="medicine-list">
+      <view class="medicine-item" wx:for="{{order.medicines}}" wx:key="*this">
+        <view class="medicine-icon">
+          <text>💊</text>
+        </view>
+        <view class="medicine-info">
+          <text class="medicine-name">{{item}}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 价格信息 -->
+  <view class="price-section">
+    <view class="section-title">
+      <text>价格信息</text>
+    </view>
+    <view class="price-card">
+      <view class="price-row">
+        <text class="price-label">药品总价：</text>
+        <text class="price-value">¥{{order.totalPrice}}</text>
+      </view>
+      <view class="price-row total">
+        <text class="price-label">实付金额：</text>
+        <text class="price-value final">¥{{order.totalPrice}}</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- 无人机配送轨迹 -->
+  <view class="tracking-section" wx:if="{{order.droneTracking}}">
+    <view class="section-title">
+      <text>无人机配送轨迹</text>
+    </view>
+    <view class="tracking-card">
+      <view class="tracking-status">
+        <text class="status-text">当前状态：{{order.droneTracking.status}}</text>
+      </view>
+      <view class="tracking-steps">
+        <view class="step-item" wx:for="{{order.droneTracking.steps}}" wx:key="*this">
+          <view class="step-icon {{item === '配送中' || item === '已送达' ? 'active' : ''}}">
+            <text>{{item === '配送中' || item === '已送达' ? '✓' : '○'}}</text>
+          </view>
+          <text class="step-text">{{item}}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 操作按钮 -->
+  <view class="action-section">
+    <button class="action-btn primary" bindtap="contactSupport" wx:if="{{order.status === 'delivering'}}">
+      <text>联系客服</text>
+    </button>
+    <button class="action-btn secondary" bindtap="reorder" wx:if="{{order.status === 'completed'}}">
+      <text>再次购买</text>
+    </button>
+    <button class="action-btn danger" bindtap="deleteOrder">
+      <text>删除订单</text>
+    </button>
+  </view>
+</view>

pages/order-detail/order-detail.wxss

@@ -0,0 +1,303 @@
+.container {
+  width: 100%;
+  align-items: stretch;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #f5f5f5;
+}
+
+.custom-navbar {
+  background: white;
+  padding: 20rpx 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.navbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 88rpx;
+}
+
+.back-btn {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-icon {
+  font-size: 48rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.navbar-title {
+  flex: 1;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.navbar-right {
+  width: 60rpx;
+}
+
+.section-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  margin-bottom: 20rpx;
+  color: #333;
+  padding-left: 10rpx;
+  border-left: 6rpx solid #007AFF;
+}
+
+.order-info-section {
+  background: white;
+  padding: 30rpx;
+  margin: 20rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.info-card {
+  background: #f8f8f8;
+  border-radius: 15rpx;
+  padding: 25rpx;
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 20rpx;
+  align-items: center;
+}
+
+.info-row:last-child {
+  margin-bottom: 0;
+}
+
+.info-label {
+  font-size: 26rpx;
+  color: #666;
+  width: 150rpx;
+  flex-shrink: 0;
+}
+
+.info-value {
+  font-size: 26rpx;
+  color: #333;
+  flex: 1;
+}
+
+.info-value.status {
+  color: #007AFF;
+  font-weight: bold;
+}
+
+.info-value.status.delivering {
+  color: #fa8c16;
+}
+
+.info-value.status.completed {
+  color: #52c41a;
+}
+
+.medicines-section {
+  background: white;
+  padding: 30rpx;
+  margin: 20rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.medicine-list {
+  background: #f8f8f8;
+  border-radius: 15rpx;
+  padding: 20rpx;
+}
+
+.medicine-item {
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  background: white;
+  border-radius: 10rpx;
+  margin-bottom: 15rpx;
+}
+
+.medicine-item:last-child {
+  margin-bottom: 0;
+}
+
+.medicine-icon {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+  font-size: 36rpx;
+}
+
+.medicine-info {
+  flex: 1;
+}
+
+.medicine-name {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.price-section {
+  background: white;
+  padding: 30rpx;
+  margin: 20rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.price-card {
+  background: #f8f8f8;
+  border-radius: 15rpx;
+  padding: 25rpx;
+}
+
+.price-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+  align-items: center;
+}
+
+.price-row:last-child {
+  margin-bottom: 0;
+}
+
+.price-label {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.price-value {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.price-row.total {
+  border-top: 1rpx solid #e8e8e8;
+  padding-top: 20rpx;
+  margin-top: 20rpx;
+}
+
+.price-value.final {
+  font-size: 32rpx;
+  color: #FF6B35;
+}
+
+.tracking-section {
+  background: white;
+  padding: 30rpx;
+  margin: 20rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.tracking-card {
+  background: #f8f8f8;
+  border-radius: 15rpx;
+  padding: 25rpx;
+}
+
+.tracking-status {
+  text-align: center;
+  margin-bottom: 30rpx;
+  padding-bottom: 20rpx;
+  border-bottom: 1rpx solid #e8e8e8;
+}
+
+.status-text {
+  font-size: 28rpx;
+  color: #007AFF;
+  font-weight: bold;
+}
+
+.tracking-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 25rpx;
+}
+
+.step-item {
+  display: flex;
+  align-items: center;
+}
+
+.step-icon {
+  width: 50rpx;
+  height: 50rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+  font-size: 32rpx;
+  color: #ccc;
+  font-weight: bold;
+  border-radius: 50%;
+  background: white;
+  border: 2rpx solid #e8e8e8;
+}
+
+.step-icon.active {
+  color: #52c41a;
+  border-color: #52c41a;
+  background: #f6ffed;
+}
+
+.step-text {
+  font-size: 26rpx;
+  color: #333;
+}
+
+.action-section {
+  background: white;
+  padding: 30rpx;
+  margin: 20rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.action-btn {
+  width: 100%;
+  padding: 25rpx 0;
+  border-radius: 10rpx;
+  font-size: 28rpx;
+  text-align: center;
+  border: none;
+  margin-bottom: 20rpx;
+}
+
+.action-btn:last-child {
+  margin-bottom: 0;
+}
+
+.action-btn.primary {
+  background: #007AFF;
+  color: white;
+}
+
+.action-btn.secondary {
+  background: #52c41a;
+  color: white;
+}
+
+.action-btn.danger {
+  background: #ff4d4f;
+  color: white;
+}

pages/order/order.js

@@ -164,6 +164,24 @@ Page({
       return
     }
 
+    // 创建订单数据
+    const order = {
+      id: Date.now(),
+      hospital: this.data.selectedHospital.name,
+      medicines: selectedMedicines.map(m => m.name),
+      totalPrice: this.data.totalPrice,
+      status: '配送中',
+      date: new Date().toISOString().split('T')[0],
+      droneTracking: {
+        status: '配送中',
+        steps: ['订单确认', '药品准备', '无人机起飞', '配送中', '待送达']
+      }
+    }
+
+    // 保存订单到全局变量和本地存储
+    const app = getApp()
+    app.addOrder(order)
+
     // 模拟下单成功
     wx.showModal({
       title: '下单成功',
@@ -171,7 +189,12 @@ Page({
       showCancel: false,
       success: () => {
         this.closeMedicineModal()
-        // 可以跳转到订单详情页面
+        // 跳转到我的页面查看订单
+        setTimeout(() => {
+          wx.switchTab({
+            url: '/pages/profile/profile'
+          })
+        }, 500)
       }
     })
   },
@@ -193,14 +216,42 @@ Page({
   // 通过价格选择医院
   selectByPrice(e) {
     const priceInfo = e.currentTarget.dataset.price
+    const medicineName = this.data.medicineKeyword
+    
     wx.showModal({
       title: '确认下单',
-      content: `确认在${priceInfo.hospital}购买${this.data.medicineKeyword}，价格：¥${priceInfo.price}`,
+      content: `确认在${priceInfo.hospital}购买${medicineName}，价格：¥${priceInfo.price}`,
       success: (res) => {
         if (res.confirm) {
+          // 创建订单数据
+          const order = {
+            id: Date.now(),
+            hospital: priceInfo.hospital,
+            medicines: [medicineName],
+            totalPrice: priceInfo.price,
+            status: '配送中',
+            date: new Date().toISOString().split('T')[0],
+            droneTracking: {
+              status: '配送中',
+              steps: ['订单确认', '药品准备', '无人机起飞', '配送中', '待送达']
+            }
+          }
+
+          // 保存订单到全局变量和本地存储
+          const app = getApp()
+          app.addOrder(order)
+
           wx.showToast({
             title: '下单成功',
-            icon: 'success'
+            icon: 'success',
+            success: () => {
+              // 跳转到我的页面查看订单
+              setTimeout(() => {
+                wx.switchTab({
+                  url: '/pages/profile/profile'
+                })
+              }, 500)
+            }
           })
         }
       }

pages/profile/profile.js

@@ -31,8 +31,10 @@ Page({
 
   // 加载用户数据
   loadUserData() {
-    // 加载订单数据
-    const orders = mockData.orders
+    // 从全局变量获取订单数据
+    const app = getApp()
+    const orders = app.getOrders()
+    
     const orderStats = {
       total: orders.length,
       delivering: orders.filter(order => order.status === '配送中').length,
@@ -204,9 +206,30 @@ Page({
   // 查看订单
   viewOrders(e) {
     const status = e.currentTarget.dataset.status
+    const app = getApp()
+    const orders = app.getOrdersByStatus(status)
+    
+    if (orders.length === 0) {
+      wx.showToast({
+        title: `暂无${status}订单`,
+        icon: 'none'
+      })
+      return
+    }
+
+    // 构建订单列表内容
+    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\n`
+    })
+
     wx.showModal({
       title: '订单列表',
-      content: `这里将显示${status}的订单列表`,
+      content: content,
       showCancel: false
     })
   },
@@ -214,10 +237,8 @@ Page({
   // 查看订单详情
   viewOrderDetail(e) {
     const order = e.currentTarget.dataset.order
-    wx.showModal({
-      title: '订单详情',
-      content: `医院：${order.hospital}\n药品：${order.medicines.join('、')}\n总价：¥${order.totalPrice}\n状态：${order.status}`,
-      showCancel: false
+    wx.navigateTo({
+      url: `/pages/order-detail/order-detail?id=${order.id}`
     })
   },
 

pages/profile/profile.wxml

@@ -5,7 +5,16 @@ module.exports = {
     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>
@@ -109,7 +118,7 @@ module.exports = {
             <text class="order-medicines">{{item.medicines.join('、')}}</text>
           </view>
           <view class="order-status">
-            <text class="status-badge {{utils.getStatusClass(item.status)}}">{{item.status}}</text>
+            <text class="status-badge {{utils.getStatusClass(item.status)}}">{{utils.getStatusText(item.status)}}</text>
             <text class="order-price">¥{{item.totalPrice}}</text>
           </view>
         </view>

utils/mockData.js

@@ -135,7 +135,7 @@ const mockData = {
       hospital: "北京协和医院",
       medicines: ["阿莫西林胶囊", "布洛芬缓释胶囊"],
       totalPrice: 43.5,
-      status: "已完成",
+      status: "completed",
       date: "2024-03-01",
       droneTracking: {
         status: "已送达",
@@ -147,7 +147,7 @@ const mockData = {
       hospital: "上海瑞金医院",
       medicines: ["奥美拉唑肠溶胶囊"],
       totalPrice: 45.0,
-      status: "配送中",
+      status: "delivering",
       date: "2024-03-05",
       droneTracking: {
         status: "配送中",