From a720a795a12915902f22a4e0749fa2f27c897660 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Mon, 25 Aug 2025 11:47:28 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                |   2 +-
 pages/myOrder/myOrder.vue | 355 ++++++++++++++++++++++++++++++++++++--
 2 files changed, 341 insertions(+), 16 deletions(-)

diff --git a/pages.json b/pages.json
index 97f4328..4a1656d 100644
--- a/pages.json
+++ b/pages.json
@@ -102,7 +102,7 @@
     {
       "path": "pages/myOrder/myOrder",
       "style": {
-        "navigationBarTitleText": "我的订单"
+        "navigationBarTitleText": "订单列表"
       }
     },
     {
diff --git a/pages/myOrder/myOrder.vue b/pages/myOrder/myOrder.vue
index 8eb0cf7..d200cf1 100644
--- a/pages/myOrder/myOrder.vue
+++ b/pages/myOrder/myOrder.vue
@@ -1,7 +1,62 @@
 <template>
   <view class="container">
-    <view v-for="item in list" :key="item.id" class="item">
-      <uni-card :extra="item.createTime" :title="item.typeName" @click="detail(item)"></uni-card>
+    <!-- 加载状态 -->
+    <view v-if="loading" class="loading-container">
+      <text class="loading-text">正在加载...</text>
+    </view>
+    
+    <!-- 空数据状态 -->
+    <view v-else-if="list.length === 0 && !loading" class="empty-container">
+      <view class="empty-icon">📋</view>
+      <text class="empty-text">暂无订单数据</text>
+    </view>
+    
+    <!-- 订单列表 -->
+    <view v-else>
+      <view v-for="item in list" :key="item.id" class="order-item" @click="onClick(item)">
+        <view class="order-header">
+          <view class="order-title">
+            <text class="title-text">{{ item.typeName || '订单详情' }}</text>
+            <text class="status-text" :class="getStatusClass(item.status)">
+              {{ mapOrderStatus('status', item.status) }}
+            </text>
+          </view>
+          <text class="order-time">{{ formatTime(item.createTime) }}</text>
+        </view>
+        
+        <view class="order-content">
+          <view class="order-info">
+            <text class="order-id">订单号：{{ item.orderNumber || item.id }}</text>
+            <text class="order-amount">¥{{ item.amount || '0.00' }}</text>
+          </view>
+          
+          <view class="order-details">
+            <view class="detail-item">
+              <text class="label">租赁套餐：</text>
+              <text class="value">{{ item.suitName }}</text>
+            </view>
+            <view class="detail-item">
+              <text class="label">租赁时间：</text>
+              <text class="value">{{ formatTime(item.leaseTime) }}</text>
+            </view>
+            <view class="detail-item">
+              <text class="label">到期时间：</text>
+              <text class="value">{{ formatTime(item.expirationTime) }}</text>
+            </view>
+            <view class="detail-item">
+              <text class="label">物流状态：</text>
+              <text class="value" :class="getLogisticClass(item.logisticStatus)">
+                {{ mapOrderStatus('logistic', item.logisticStatus) }}
+              </text>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 加载更多状态 -->
+      <view v-if="noData && list.length > 0" class="load-more">
+        <text class="no-more-text">没有更多数据了</text>
+      </view>
     </view>
   </view>
 </template>
@@ -9,16 +64,109 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { getMyOrder } from '@/api/order/myOrder.js'
-
 import { onUnload, onReachBottom } from '@dcloudio/uni-app'
 
 const list = ref([])
 const noData = ref(false)
+const loading = ref(false)
+
+/**
+ * 订单状态/物流状态映射工具
+ * @param {string} type - 'status'（订单状态） 或 'logistic'（物流状态）
+ * @param {string|number} value - 状态值（数字或中文）
+ * @returns {string|number} 转换后的值
+ */
+function mapOrderStatus(type, value) {
+  const maps = {
+    status: {
+      '1': '未支付',
+      '2': '支付成功',
+      '3': '退款',
+      '未支付': '1',
+      '支付成功': '2',
+      '退款': '3',
+    },
+    logistic: {
+      '1': '未签收',
+      '2': '已签收',
+      '3': '已归还',
+      '未签收': '1',
+      '已签收': '2',
+      '已归还': '3',
+    },
+  }
+
+  return maps[type]?.[value] || '未知状态' // 添加默认值
+}
+
+/**
+ * 获取订单状态样式类
+ * @param {string} status - 状态值
+ * @returns {string} 样式类名
+ */
+function getStatusClass(status) {
+  const statusMap = {
+    '1': 'status-pending',
+    '2': 'status-success',
+    '3': 'status-refund'
+  }
+  return statusMap[status] || 'status-unknown'
+}
+
+/**
+ * 获取物流状态样式类
+ * @param {string} status - 状态值
+ * @returns {string} 样式类名
+ */
+function getLogisticClass(status) {
+  const statusMap = {
+    '1': 'logistic-pending',
+    '2': 'logistic-success',
+    '3': 'logistic-returned'
+  }
+  return statusMap[status] || 'logistic-unknown'
+}
+
+/**
+ * 格式化时间
+ * @param {string} timeStr - 时间字符串
+ * @returns {string} 格式化后的时间
+ */
+function formatTime(timeStr) {
+  if (!timeStr) return '--'
+  
+  try {
+    // 处理iOS兼容性问题，将 "yyyy-MM-dd HH:mm:ss" 转换为 "yyyy/MM/dd HH:mm:ss"
+    let normalizedTimeStr = timeStr
+    if (typeof timeStr === 'string' && timeStr.includes('-') && timeStr.includes(' ')) {
+      // 将 "2027-08-22 17:17:01" 转换为 "2027/08/22 17:17:01"
+      normalizedTimeStr = timeStr.replace(/-/g, '/')
+    }
+    
+    const date = new Date(normalizedTimeStr)
+    
+    // 检查日期是否有效
+    if (isNaN(date.getTime())) {
+      return timeStr
+    }
+    
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    
+    return `${year}-${month}-${day} ${hours}:${minutes}`
+  } catch (error) {
+    console.error('时间格式化错误:', error, '原始时间:', timeStr)
+    return timeStr
+  }
+}
 
 //定义data参数
 const queryParams = {
   pageNum: 1,
-  pageSize: 12,
+  pageSize: 6,
 }
 
 // 页面加载时获取数据
@@ -27,34 +175,59 @@ onMounted(() => {
 })
 
 onReachBottom(() => {
-  if (noData.value) return
+  if (noData.value || loading.value) return
   queryParams.pageNum++
   getList()
 })
 
 // 获取列表
 const getList = async () => {
+  if (loading.value) return
+  
   try {
+    loading.value = true
     let res = await getMyOrder(queryParams)
 
     // 确保 res.data 存在且是数组
     const newData = res?.rows || []
-    list.value = [...list.value, ...newData]
+    
+    // 如果是第一页，直接替换数据
+    if (queryParams.pageNum === 1) {
+      list.value = newData
+    } else {
+      list.value = [...list.value, ...newData]
+    }
 
-    if (queryParams.pageSize > newData.length) noData.value = true
-    uni.setStorageSync('storyList', list.value)
-    console.log(list.value)
+    if (newData.length < queryParams.pageSize) {
+      noData.value = true
+    }
+    
+    console.log('订单列表:', list.value)
   } catch (error) {
     console.error('获取订单列表失败:', error)
     uni.showToast({
       title: '获取订单列表失败',
       icon: 'none',
     })
+  } finally {
+    loading.value = false
   }
 }
 
+// 点击订单卡片
+const onClick = (item) => {
+  console.log('点击订单:', item)
+  // 跳转到订单详情页
+  uni.navigateTo({
+    url: `/pages/myOrder/orderDetail?id=${item.id}`
+  })
+}
+
 onUnload(() => {
-  uni.removeStorageSync('storyList')
+  // 清理数据
+  list.value = []
+  noData.value = false
+  loading.value = false
 })
 </script>
 
@@ -62,15 +235,167 @@ onUnload(() => {
 .container {
   overflow: hidden;
   padding: 20rpx;
+  min-height: 100vh;
+  background-color: #f5f5f5;
 }
 
-.item {
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200rpx;
+  
+  .loading-text {
+    font-size: 28rpx;
+    color: #666;
+  }
+}
+
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 400rpx;
+  
+  .empty-icon {
+    font-size: 80rpx;
+    margin-bottom: 20rpx;
+  }
+  
+  .empty-text {
+    font-size: 28rpx;
+    color: #999;
+  }
+}
+
+.order-item {
+  background-color: #fff;
+  border-radius: 16rpx;
   margin-bottom: 20rpx;
+  padding: 30rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  
+  &:active {
+    background-color: #f8f8f8;
+  }
 }
 
-.uni-body {
-  font-size: 28rpx;
-  line-height: 1.6;
-  color: #666;
+.order-header {
+  margin-bottom: 20rpx;
+  
+  .order-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10rpx;
+    
+    .title-text {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333;
+    }
+    
+    .status-text {
+      font-size: 24rpx;
+      padding: 6rpx 12rpx;
+      border-radius: 20rpx;
+      font-weight: 500;
+      
+      &.status-pending {
+        background-color: #fff7e6;
+        color: #fa8c16;
+      }
+      
+      &.status-success {
+        background-color: #f6ffed;
+        color: #52c41a;
+      }
+      
+      &.status-refund {
+        background-color: #fff2f0;
+        color: #ff4d4f;
+      }
+      
+      &.status-unknown {
+        background-color: #f5f5f5;
+        color: #999;
+      }
+    }
+  }
+  
+  .order-time {
+    font-size: 24rpx;
+    color: #999;
+  }
+}
+
+.order-content {
+  .order-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20rpx;
+    padding-bottom: 15rpx;
+    border-bottom: 1rpx solid #f0f0f0;
+    
+    .order-id {
+      font-size: 26rpx;
+      color: #666;
+    }
+    
+    .order-amount {
+      font-size: 32rpx;
+      color: #f15a04;
+      font-weight: bold;
+    }
+  }
+  
+  .order-details {
+    .detail-item {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 12rpx;
+      
+      .label {
+        font-size: 26rpx;
+        color: #666;
+        min-width: 140rpx;
+      }
+      
+      .value {
+        font-size: 26rpx;
+        color: #333;
+        flex: 1;
+        text-align: right;
+        
+        &.logistic-pending {
+          color: #fa8c16;
+        }
+        
+        &.logistic-success {
+          color: #52c41a;
+        }
+        
+        &.logistic-returned {
+          color: #1890ff;
+        }
+        
+        &.logistic-unknown {
+          color: #999;
+        }
+      }
+    }
+  }
+}
+
+.load-more {
+  margin-top: 20rpx;
+  text-align: center;
+  
+  .no-more-text {
+    font-size: 24rpx;
+    color: #999;
+  }
 }
 </style>