feat: 添加归还成功页面及相关功能

在 `pages.json` 中新增归还成功页面的配置，并在 `order/success.vue` 中实现设备状态提示和加载动画。同时，更新了订单支付逻辑，确保在支付成功后能够正确弹出充电宝。优化了订单状态查询和处理逻辑，提升用户体验。

pages/index/index.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script>
-	import {getQueryString }from '@/util/index.js'
+	import {getQueryString, wxLogin }from '@/util/index.js'
 	export default {
 		methods: {
 			async handleScan() {
@@ -64,6 +64,19 @@
 					console.log('扫码路径:', scanResult.path)
 					console.log('解析到的设备号:', deviceNo)
 					
+					if (!deviceNo) {
+						uni.showToast({
+							title: '无效的设备二维码',
+							icon: 'none'
+						})
+						return
+					}
+					
+					// 直接在当前页面查询是否有使用中的订单，避免跳转到中间页面
+					if (!uni.getStorageSync('token')) {
+						await wxLogin()
+					}
+					
 					// 检查是否有使用中的订单
 					const inUseRes = await uni.request({
 						url: `${uni.getStorageSync('baseUrl') || 'http://127.0.0.1:8080'}/app/order/inUse`,
@@ -109,10 +122,10 @@
 							url: `/pages/order/payment?orderId=${unpaidOrder.orderId}`
 						})
 					} else {
-						// 无待支付订单，正常跳转到设备检查页面
-						console.log('无待支付订单，跳转到设备检查页面, deviceNo:', deviceNo)
+						// 查询设备信息并直接跳转到设备详情页面
+						console.log('无待支付订单，直接跳转到设备详情页面, deviceNo:', deviceNo)
 						uni.navigateTo({
-							url: `/pages/serve/bagCheck/index?deviceNo=${deviceNo}`
+							url: `/pages/device/detail?deviceNo=${deviceNo}`
 						})
 					}
 				} catch (error) {

pages/order/index.vue

@@ -73,14 +73,22 @@ export default {
         if (res.code === 200 && res.data) {
           // 将获取到的订单添加到列表中
           const orderData = res.data;
+          console.log('特定订单数据:', JSON.stringify(orderData));
+          console.log('特定订单的开始时间:', orderData.startTime);
+          console.log('特定订单的创建时间:', orderData.createTime);
+          
+          // 使用实际的startTime字段，如果没有则尝试使用createTime
+          const orderStartTime = orderData.startTime || orderData.createTime || '';
+          console.log('特定订单最终显示的开始时间:', orderStartTime);
+          
           // 格式化订单数据
           const formattedOrder = {
             orderNo: orderData.orderId,
             status: orderData.orderStatus,
             deviceId: orderData.deviceNo,
-            startTime: orderData.createTime,
+            startTime: orderStartTime,
             endTime: orderData.endTime || '',
-            amount: orderData.amount || '0.00'
+            amount: orderData.payAmount || orderData.actualDeviceAmount || '0.00'
           };
           
           // 将订单添加到列表开头
@@ -107,15 +115,26 @@ export default {
       try {
         const res = await getOrderList(statusList);
         if (res.code === 200 && res.data && res.data.records) {
+          console.log('API返回的订单列表数据:', JSON.stringify(res.data.records));
+          
           // 处理订单列表数据
-          this.orderList = res.data.records.map(item => ({
-            orderNo: item.orderId,
-            status: item.orderStatus,
-            deviceId: item.deviceNo,
-            startTime: item.createTime,
-            endTime: item.endTime || '',
-            amount: item.amount || '0.00'
-          }));
+          this.orderList = res.data.records.map(item => {
+            console.log(`订单 ${item.orderId} 的开始时间:`, item.startTime);
+            console.log(`订单 ${item.orderId} 的创建时间:`, item.createTime);
+            
+            // 使用实际的startTime字段，如果没有则尝试使用createTime
+            const orderStartTime = item.startTime || item.createTime || '';
+            console.log(`订单 ${item.orderId} 最终显示的开始时间:`, orderStartTime);
+            
+            return {
+              orderNo: item.orderId,
+              status: item.orderStatus,
+              deviceId: item.deviceNo,
+              startTime: orderStartTime,
+              endTime: item.endTime || '',
+              amount: item.payAmount || item.actualDeviceAmount || '0.00'
+            };
+          });
         }
       } catch (error) {
         console.error('获取订单列表失败:', error);

pages/order/payment.vue

@@ -203,26 +203,69 @@ export default {
           title: '处理中'
         })
         
-        // 调用后端创建微信支付订单接口
+        console.log('开始处理支付，订单号:', this.orderId)
+
+        // 调用后端支付API
         const res = await uni.request({
-          url: `${uni.getStorageSync('baseUrl') || 'http://127.0.0.1:8080'}/app/wx-payment/create/${this.orderInfo.orderNo}`,
+          url: `${uni.getStorageSync('baseUrl') || 'http://127.0.0.1:8080'}/app/payment/${this.orderInfo.orderNo}`,
           method: 'GET',
           header: {
-            'Authorization': "Bearer " + uni.getStorageSync('token'),
+            'Authorization': 'Bearer ' + uni.getStorageSync('token'),
             'Clientid': uni.getStorageSync('client_id')
           }
         })
-
+        
+        console.log('支付API返回结果:', res.data)
+        
         if (res.statusCode === 200 && res.data.code === 200) {
-          // 支付成功，跳转到支付成功页面
-          uni.hideLoading()
-          uni.redirectTo({
-            url: `/pages/order/success?orderId=${this.orderId}`
+          // 获取微信支付所需参数
+          const payParams = res.data.data
+          
+          console.log('准备调用微信支付，参数:', payParams)
+          
+          // 验证支付参数是否完整
+          if (!payParams.timeStamp || !payParams.nonceStr || 
+              !payParams.packageValue || !payParams.paySign) {
+            console.error('支付参数不完整:', payParams)
+            throw new Error('支付参数不完整，请联系客服')
+          }
+          
+          // 调用微信支付API
+          uni.requestPayment({
+            provider: 'wxpay',
+            timeStamp: payParams.timeStamp,
+            nonceStr: payParams.nonceStr,
+            package: payParams.packageValue, // 后端返回的是packageValue字段
+            signType: payParams.signType || 'MD5',
+            paySign: payParams.paySign,
+            success: (payRes) => {
+              console.log('支付成功:', payRes)
+              uni.hideLoading()
+              // 支付成功后开始轮询订单状态
+              this.pollOrderStatus()
+            },
+            fail: (err) => {
+              console.error('支付失败:', err)
+              uni.hideLoading()
+              // 用户取消支付的情况，不显示错误提示
+              if (err.errMsg === 'requestPayment:fail cancel') {
+                console.log('用户取消了支付')
+                return
+              }
+              uni.showToast({
+                title: err.errMsg || '支付失败',
+                icon: 'none'
+              })
+            },
+            complete: () => {
+              console.log('支付流程结束')
+            }
           })
         } else {
-          throw new Error(res.data.msg || '支付失败')
+          throw new Error(res.data?.msg || '支付请求失败')
         }
       } catch (error) {
+        console.error('支付处理错误:', error)
         uni.hideLoading()
         uni.showToast({
           title: error.message || '支付失败',
@@ -231,105 +274,32 @@ export default {
       }
     },
     
-    // 发送租借指令
-    async sendRentCommand() {
-      try {
-        uni.showLoading({
-          title: '处理中'
-        })
-        
-        // 调用发送租借指令的接口
-        const res = await this.sendRentRequest()
-        
-        if (res.code === 200) {
-          uni.hideLoading()
-          uni.showToast({
-            title: '租借成功',
-            icon: 'success'
-          })
-          
-          // 跳转到订单列表页面
-          setTimeout(() => {
-            uni.redirectTo({
-              url: `/pages/order/index?orderId=${this.orderId}`
-            })
-          }, 1500)
-        } else {
-          throw new Error(res.msg || '租借失败')
-        }
-      } catch (error) {
-        uni.hideLoading()
-        uni.showToast({
-          title: error.message || '租借失败',
-          icon: 'none'
-        })
-      }
-    },
-    
-    // 发送租借请求
-    sendRentRequest() {
-      return new Promise((resolve, reject) => {
-        uni.request({
-          url: `${uni.getStorageSync('baseUrl') || 'http://127.0.0.1:8080'}/app/device/sendRentCommand`,
-          method: 'POST',
-          data: {
-            orderId: this.orderId
-          },
-          header: {
-            'Content-Type': 'application/x-www-form-urlencoded',
-            'Authorization': "Bearer " + uni.getStorageSync('token'),
-            'Clientid': uni.getStorageSync('client_id')
-          },
-          success(res) {
-            if (res.statusCode === 200) {
-              resolve(res.data)
-            } else {
-              reject(new Error('请求失败'))
-            }
-          },
-          fail(err) {
-            reject(err)
-          }
-        })
-      })
-    },
-    
-    // 格式化时间
-    formatTime(date) {
-      const year = date.getFullYear()
-      const month = (date.getMonth() + 1).toString().padStart(2, '0')
-      const day = date.getDate().toString().padStart(2, '0')
-      const hour = date.getHours().toString().padStart(2, '0')
-      const minute = date.getMinutes().toString().padStart(2, '0')
-      
-      return `${year}-${month}-${day} ${hour}:${minute}`
-    },
-    
     // 轮询订单状态
     async pollOrderStatus() {
       let retryCount = 0;
-      const maxRetries = 10;
-      const interval = 1000; // 1秒间隔
+      const maxRetries = 30; // 增加最大重试次数，允许更长时间检测
+      const interval = 2000; // 调整为2秒间隔
     
       const checkStatus = async () => {
         try {
-          const res = await uni.request({
-            url: `${uni.getStorageSync('baseUrl') || 'http://127.0.0.1:8080'}/app/payment/status/${this.orderInfo.orderNo}`,
-            method: 'GET',
-            header: {
-              'Authorization': "Bearer " + uni.getStorageSync('token'),
-              'Clientid': uni.getStorageSync('client_id')
-            }
-          });
+          // 使用queryById方法直接查询订单状态
+          const res = await queryById(this.orderId);
+          console.log('轮询订单状态结果:', res);
     
-          if (res.statusCode === 200 && res.data.code === 200) {
-            const orderData = res.data.data;
-            if (orderData.orderStatus === 'IN_USED') {
-              // 支付成功，订单已开始使用
+          if (res.code === 200 && res.data) {
+            const orderData = res.data;
+            // 检查订单是否已支付成功
+            if (orderData.orderStatus === 'IN_USED' || 
+                orderData.orderStatus === 'PAYMENT_SUCCESSFUL') {
+              console.log('支付成功，订单状态:', orderData.orderStatus);
+              // 显示弹出充电宝的提示
               uni.showToast({
-                title: '支付成功',
-                icon: 'success'
+                title: '支付成功，充电宝已弹出',
+                icon: 'success',
+                duration: 2000
               });
+              
+              // 延迟跳转到支付成功页面
               setTimeout(() => {
                 uni.redirectTo({
                   url: `/pages/order/success?orderId=${this.orderId}`
@@ -341,18 +311,39 @@ export default {
     
           if (retryCount < maxRetries) {
             retryCount++;
+            console.log(`第${retryCount}次轮询，等待订单状态更新...`);
             setTimeout(checkStatus, interval);
           } else {
-            throw new Error('订单状态查询超时');
+            console.error('轮询订单状态超时');
+            uni.showModal({
+              title: '提示',
+              content: '订单状态查询超时，请在"我的订单"中查看订单状态',
+              showCancel: false,
+              success: function(res) {
+                if (res.confirm) {
+                  uni.redirectTo({
+                    url: '/pages/order/index'
+                  });
+                }
+              }
+            });
           }
         } catch (error) {
-          uni.showToast({
-            title: error.message || '查询订单状态失败',
-            icon: 'none'
-          });
+          console.error('查询订单状态失败:', error);
+          // 出错时继续轮询，不要中断
+          if (retryCount < maxRetries) {
+            retryCount++;
+            setTimeout(checkStatus, interval);
+          } else {
+            uni.showToast({
+              title: '查询订单状态失败',
+              icon: 'none'
+            });
+          }
         }
       };
     
+      // 开始轮询
       checkStatus();
     },
   }

pages/order/return-success.vue

@@ -0,0 +1,298 @@
+<template>
+  <view class="success-container">
+    <!-- 支付成功状态 -->
+    <view class="status-card">
+      <view class="status-icon success"></view>
+      <view class="status-text">归还成功</view>
+      <view class="status-desc">您的充电宝已归还，押金已退回</view>
+    </view>
+    
+    <!-- 订单信息 -->
+    <view class="order-card">
+      <view class="card-title">订单信息</view>
+      <view class="info-item">
+        <text class="label">订单号</text>
+        <text class="value">{{ orderInfo.orderNo || '-' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">设备号</text>
+        <text class="value">{{ orderInfo.deviceNo || '-' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">使用时长</text>
+        <text class="value">{{ orderInfo.usedTime || '-' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">费用</text>
+        <text class="value">￥{{ orderInfo.currentFee || '0.00' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">归还时间</text>
+        <text class="value">{{ orderInfo.endTime || '-' }}</text>
+      </view>
+    </view>
+
+    <!-- 退还信息 -->
+    <view class="refund-card">
+      <view class="card-title">退还信息</view>
+      <view class="info-item">
+        <text class="label">押金</text>
+        <text class="value">￥{{ orderInfo.deposit || '99.00' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">退还金额</text>
+        <text class="value highlight">￥{{ orderInfo.refundAmount || '99.00' }}</text>
+      </view>
+      <view class="info-item">
+        <text class="label">退还状态</text>
+        <text class="value success">已退还</text>
+      </view>
+    </view>
+
+    <!-- 操作按钮 -->
+    <view class="button-group">
+      <button class="primary-btn" @click="goToHome">返回首页</button>
+      <button class="secondary-btn" @click="goToOrderList">查看订单</button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { queryById } from '@/config/user.js'
+
+export default {
+  data() {
+    return {
+      orderId: '',
+      orderInfo: {
+        orderNo: '',
+        deviceNo: '',
+        startTime: '',
+        usedTime: '',
+        currentFee: '0.00',
+        deposit: '99.00',
+        refundAmount: '99.00',
+        endTime: ''
+      }
+    }
+  },
+  onLoad(options) {
+    if (options && options.orderId) {
+      this.orderId = options.orderId
+      this.loadOrderInfo()
+    } else {
+      uni.showToast({
+        title: '订单信息不存在',
+        icon: 'none'
+      })
+      setTimeout(() => {
+        this.goToHome()
+      }, 1500)
+    }
+  },
+  methods: {
+    async loadOrderInfo() {
+      try {
+        uni.showLoading({
+          title: '加载中'
+        })
+        
+        const res = await queryById(this.orderId)
+        console.log('归还成功页面获取的订单数据:', JSON.stringify(res.data))
+        
+        if (res.code === 200 && res.data) {
+          const orderData = res.data
+          console.log('订单的开始时间:', orderData.startTime)
+          console.log('订单的创建时间:', orderData.createTime)
+          
+          // 计算退还金额 (押金 - 费用)
+          const deposit = 99.00
+          const fee = parseFloat(orderData.currentFee || orderData.actualDeviceAmount || orderData.payAmount || '0')
+          const refundAmount = (deposit - fee).toFixed(2)
+          
+          this.orderInfo = {
+            orderNo: orderData.orderNo || orderData.orderId,
+            deviceNo: orderData.deviceNo,
+            startTime: orderData.startTime || orderData.createTime || '-',
+            usedTime: orderData.usedTime || '-',
+            currentFee: orderData.currentFee || orderData.actualDeviceAmount || orderData.payAmount || '0.00',
+            deposit: deposit.toFixed(2),
+            refundAmount: refundAmount,
+            endTime: orderData.endTime || this.formatTime(new Date())
+          }
+          
+          console.log('处理后的订单信息:', JSON.stringify(this.orderInfo))
+        } else {
+          throw new Error('获取订单信息失败')
+        }
+        
+        uni.hideLoading()
+      } catch (error) {
+        uni.hideLoading()
+        uni.showToast({
+          title: error.message || '获取订单信息失败',
+          icon: 'none'
+        })
+      }
+    },
+    
+    formatTime(date) {
+      const year = date.getFullYear()
+      const month = (date.getMonth() + 1).toString().padStart(2, '0')
+      const day = date.getDate().toString().padStart(2, '0')
+      const hour = date.getHours().toString().padStart(2, '0')
+      const minute = date.getMinutes().toString().padStart(2, '0')
+      const second = date.getSeconds().toString().padStart(2, '0')
+      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
+    },
+    
+    goToHome() {
+      uni.switchTab({
+        url: '/pages/index/index'
+      })
+    },
+    
+    goToOrderList() {
+      uni.redirectTo({
+        url: '/pages/order/index'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.success-container {
+  padding: 20px;
+  background-color: #f8f8f8;
+  min-height: 100vh;
+}
+
+.status-card {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 30px;
+  text-align: center;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  
+  .status-icon {
+    width: 60px;
+    height: 60px;
+    margin: 0 auto 16px;
+    
+    &.success {
+      background-color: #07c160;
+      border-radius: 50%;
+      position: relative;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 30px;
+        height: 20px;
+        border: 3px solid #fff;
+        border-top: none;
+        border-right: none;
+        transform-origin: center;
+        transform: translate(-50%, -70%) rotate(-45deg);
+      }
+    }
+  }
+  
+  .status-text {
+    font-size: 24px;
+    font-weight: bold;
+    color: #07c160;
+    margin-bottom: 8px;
+  }
+  
+  .status-desc {
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.order-card, .refund-card {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  
+  .card-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 16px;
+    color: #333;
+    border-bottom: 1px solid #f0f0f0;
+    padding-bottom: 10px;
+  }
+  
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .label {
+      color: #666;
+      font-size: 14px;
+    }
+    
+    .value {
+      color: #333;
+      font-size: 14px;
+      
+      &.highlight {
+        color: #ff6b00;
+        font-weight: bold;
+        font-size: 16px;
+      }
+      
+      &.success {
+        color: #07c160;
+      }
+    }
+  }
+}
+
+.button-group {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  
+  .primary-btn {
+    background-color: #07c160;
+    color: #fff;
+    border: none;
+    border-radius: 24px;
+    padding: 12px;
+    font-size: 16px;
+    
+    &:active {
+      opacity: 0.8;
+    }
+  }
+  
+  .secondary-btn {
+    background-color: #fff;
+    color: #07c160;
+    border: 1px solid #07c160;
+    border-radius: 24px;
+    padding: 12px;
+    font-size: 16px;
+    
+    &:active {
+      background-color: #f5f5f5;
+    }
+  }
+}
+</style> 

pages/order/success.vue

@@ -28,6 +28,14 @@
       </view>
     </view>
 
+    <!-- 设备状态 -->
+    <view class="device-status">
+      <view class="status-message">{{ deviceMessage }}</view>
+      <view class="loading-animation" v-if="isLoading">
+        <view class="loading-circle"></view>
+      </view>
+    </view>
+
     <!-- 操作按钮 -->
     <view class="button-group">
       <button class="primary-btn" @click="goToHome">返回首页</button>
@@ -37,19 +45,28 @@
 </template>
 
 <script>
-import { queryById } from '@/config/user.js'
+import { queryById, confirmPaymentAndRent, sendRentCommand } from '@/config/user.js'
 
 export default {
   data() {
     return {
       orderId: '',
-      orderInfo: {}
+      orderInfo: {},
+      isLoading: true,
+      deviceMessage: '正在准备您的设备，请稍候...',
+      hasTriggeredDevice: false
     }
   },
   onLoad(options) {
     if (options && options.orderId) {
       this.orderId = options.orderId
       this.loadOrderInfo()
+      
+      // 添加页面显示监听，防止页面切换后重复触发弹出
+      uni.$once('orderSuccess:' + this.orderId, () => {
+        console.log('已经触发过弹出逻辑，不再重复触发')
+        this.hasTriggeredDevice = true
+      })
     } else {
       uni.showToast({
         title: '订单信息不存在',
@@ -73,8 +90,24 @@ export default {
           this.orderInfo = {
             orderNo: orderData.orderNo || orderData.orderId,
             deviceNo: orderData.deviceNo,
-            amount: orderData.amount,
-            payTime: this.formatTime(new Date())
+            amount: orderData.payAmount || orderData.amount,
+            payTime: orderData.payTime || this.formatTime(new Date())
+          }
+          
+          // 检查订单状态
+          if (orderData.orderStatus === 'IN_USED') {
+            // 如果已经是使用中状态，可能说明开锁已经完成
+            this.deviceMessage = '设备已弹出，请取走您的充电宝'
+            this.isLoading = false
+            
+            // 如果是第一次加载页面且设备已弹出，记录状态，避免重复弹出
+            if (!this.hasTriggeredDevice) {
+              uni.$emit('orderSuccess:' + this.orderId)
+              this.hasTriggeredDevice = true
+            }
+          } else {
+            // 正常触发弹出逻辑
+            this.triggerDeviceEject()
           }
         } else {
           throw new Error('获取订单信息失败')
@@ -89,6 +122,55 @@ export default {
         })
       }
     },
+    
+    // 触发弹出充电宝
+    async triggerDeviceEject() {
+      if (this.hasTriggeredDevice) {
+        console.log('已经触发过弹出充电宝，不重复触发')
+        return
+      }
+      
+      this.hasTriggeredDevice = true
+      uni.$emit('orderSuccess:' + this.orderId)
+      this.isLoading = true
+      this.deviceMessage = '正在准备您的设备，请稍候...'
+      
+      try {
+        console.log(`准备触发弹出充电宝，orderId: ${this.orderId}`)
+        
+        // 先尝试使用确认支付并弹出的方法
+        let result
+        try {
+          result = await confirmPaymentAndRent(this.orderId)
+          console.log('确认支付并弹出充电宝结果:', JSON.stringify(result))
+        } catch (error) {
+          console.error('确认支付并弹出失败，尝试备用方法:', error)
+          // 如果第一种方法失败，尝试使用备用方法直接发送租借指令
+          result = await sendRentCommand(this.orderId)
+          console.log('发送租借指令结果:', JSON.stringify(result))
+        }
+        
+        if (result && result.code === 200) {
+          this.deviceMessage = '设备已弹出，请取走您的充电宝'
+          uni.showToast({
+            title: '充电宝已弹出',
+            icon: 'success'
+          })
+        } else {
+          throw new Error((result && result.msg) || '弹出充电宝失败')
+        }
+      } catch (error) {
+        console.error('弹出充电宝错误:', error)
+        this.deviceMessage = '弹出设备失败，请联系客服'
+        uni.showToast({
+          title: error.message || '弹出充电宝失败，请联系客服',
+          icon: 'none'
+        })
+      } finally {
+        this.isLoading = false
+      }
+    },
+    
     formatTime(date) {
       const year = date.getFullYear()
       const month = (date.getMonth() + 1).toString().padStart(2, '0')
@@ -194,6 +276,41 @@ export default {
   }
 }
 
+.device-status {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+  
+  .status-message {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 12px;
+  }
+  
+  .loading-animation {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    
+    .loading-circle {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      border: 3px solid #f0f0f0;
+      border-top-color: #07c160;
+      animation: spin 1s linear infinite;
+    }
+    
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  }
+}
+
 .button-group {
   margin-top: 30px;
   display: flex;

pages/return/index.vue

@@ -3,7 +3,7 @@
     <!-- 订单信息卡片 -->
     <view class="order-card">
       <view class="order-header">
-        <text class="title">使用中</text>
+        <text class="title">{{ getOrderStatusText() }}</text>
         <text class="order-no">订单号：{{ orderInfo.orderId }}</text>
       </view>
       
@@ -26,6 +26,14 @@
           <text class="value">￥{{ orderInfo.currentFee }}</text>
         </view>
       </view>
+      
+      <!-- 调试信息(仅在开发环境显示) -->
+      <view class="debug-info" v-if="false">
+        <view class="debug-title">调试信息</view>
+        <view class="debug-item">原始开始时间: {{ this.orderInfo._rawStartTime }}</view>
+        <view class="debug-item">处理后开始时间: {{ this.orderInfo.startTime }}</view>
+        <view class="debug-item">订单状态: {{ this.orderInfo.orderStatus }}</view>
+      </view>
     </view>
 
     <!-- 归还说明 -->
@@ -38,26 +46,29 @@
         </view>
         <view class="notice-item">
           <view class="dot"></view>
-          <text>请在指定区域内归还设备</text>
+          <text>将充电宝插入原位置或空闲插口</text>
         </view>
         <view class="notice-item">
           <view class="dot"></view>
-          <text>归还后押金将自动退还</text>
+          <text>系统将自动检测归还并处理退款</text>
+        </view>
+        <view class="notice-item">
+          <view class="dot"></view>
+          <text>归还成功后将自动跳转到成功页面</text>
         </view>
       </view>
     </view>
 
     <!-- 底部操作栏 -->
     <view class="bottom-bar">
-      <button class="unlock-btn" @click="handleUnlock" :disabled="unlocking">
-        {{ unlocking ? '开锁中...' : '开锁归还' }}
-      </button>
+      <button class="secondary-btn" @click="checkReturnStatus">刷新状态</button>
+      <button class="primary-btn" @click="goToHome">返回首页</button>
     </view>
   </view>
 </template>
 
 <script>
-import { queryById, overOrderById } from '@/config/user.js'
+import { queryById } from '@/config/user.js'
 
 export default {
   data() {
@@ -66,11 +77,16 @@ export default {
       orderInfo: {
         orderId: '',
         startTime: '',
+        _rawStartTime: '',  // 用于调试
         usedTime: '0分钟',
-        currentFee: '0.00'
+        currentFee: '0.00',
+        orderStatus: 'in_used' // 默认状态为使用中
       },
-      unlocking: false,
-      timer: null
+      timer: null,
+      statusCheckTimer: null,
+      maxStatusChecks: 30, // 最多检查30次
+      currentStatusChecks: 0,
+      statusCheckInterval: 5000 // 5秒检查一次
     }
   },
   onLoad(options) {
@@ -78,7 +94,7 @@ export default {
     
     // 获取传递的参数
     this.orderInfo.orderId = options.orderId || ''
-    this.deviceId = options.deviceId || ''
+    this.deviceId = options.deviceNo || options.deviceId || ''
     
     console.log(`初始化参数: orderId=${this.orderInfo.orderId}, deviceId=${this.deviceId}`)
     
@@ -90,6 +106,8 @@ export default {
       this.getOrderDetails()
       // 启动定时器更新使用时长
       this.startTimer()
+      // 启动状态检查定时器
+      this.startStatusCheckTimer()
     } else {
       // 缺少必要参数
       uni.showToast({
@@ -99,17 +117,32 @@ export default {
       
       // 返回首页
       setTimeout(() => {
-        uni.reLaunch({
-          url: '/pages/index/index'
-        })
+        this.goToHome()
       }, 1500)
     }
   },
   onUnload() {
     // 页面卸载时清除定时器
     this.clearTimer()
+    this.clearStatusCheckTimer()
   },
   methods: {
+    // 根据订单状态获取对应的文字显示
+    getOrderStatusText() {
+      const statusMap = {
+        'waiting_for_payment': '待支付',
+        'payment_in_progress': '支付中',
+        'payment_successful': '支付成功',
+        'in_used': '使用中',
+        'payment_failed': '支付失败',
+        'order_cancelled': '订单取消',
+        'used_done': '订单完成',
+        'used_down': '订单完成'
+      }
+      
+      return statusMap[this.orderInfo.orderStatus] || '使用中'
+    },
+    
     // 获取订单详情
     async getOrderDetails() {
       try {
@@ -125,32 +158,33 @@ export default {
 
         if (result.code === 200 && result.data) {
           const orderData = result.data
-          console.log('订单数据:', JSON.stringify(orderData))
+          console.log('订单原始数据:', orderData)
+          console.log('开始时间字段:', orderData.startTime, typeof orderData.startTime)
           
-          // 更新订单信息
+          // 更新订单状态
+          if (orderData.orderStatus) {
+            this.orderInfo.orderStatus = orderData.orderStatus
+          }
+          
+          // 检查订单状态，如果已完成，跳转到归还成功页面
+          if (orderData.orderStatus && orderData.orderStatus === 'used_down') {
+            // 清理定时器
+            this.clearTimer()
+            this.clearStatusCheckTimer()
+            
+            // 跳转到归还成功页面
+            console.log('订单已完成，准备跳转到归还成功页面')
+            uni.redirectTo({
+              url: `/pages/order/return-success?orderId=${this.orderInfo.orderId}`
+            })
+            return
+          }
+          
+          // 更新订单信息 (包括开始时间)
           this.updateOrderInfo(orderData)
           
-          // 格式化开始时间
-          const rawTime = orderData.startTime
-          console.log('开始时间:', rawTime)
-          
-          if (rawTime) {
-            try {
-              // 尝试格式化时间
-              const date = new Date(rawTime.replace(' ', 'T'))
-              if (!isNaN(date.getTime())) {
-                this.orderInfo.startTime = this.formatTime(date)
-              } else {
-                // 如果时间解析失败，直接使用原始时间字符串
-                this.orderInfo.startTime = rawTime
-              }
-            } catch (e) {
-              console.error('时间格式化错误:', e)
-              this.orderInfo.startTime = rawTime
-            }
-          } else {
-            this.orderInfo.startTime = '未知'
-          }
+          // 更新后检查是否成功设置了startTime
+          console.log('更新后的开始时间:', this.orderInfo.startTime)
         } else {
           throw new Error(result.msg || '获取订单详情失败')
         }
@@ -163,9 +197,7 @@ export default {
         
         // 如果获取订单失败，返回首页
         setTimeout(() => {
-          uni.reLaunch({
-            url: '/pages/index/index'
-          })
+          this.goToHome()
         }, 1500)
       } finally {
         uni.hideLoading()
@@ -186,8 +218,41 @@ export default {
     // 使用后端返回的使用时长和费用数据
     updateOrderInfo(orderData) {
       console.log('更新订单信息:', JSON.stringify(orderData))
+      
+      // 处理使用时长
       this.orderInfo.usedTime = orderData.usedTime || '0分钟';
-      this.orderInfo.currentFee = orderData.currentFee || '0.00';
+      
+      // 处理当前费用
+      this.orderInfo.currentFee = orderData.currentFee || orderData.actualDeviceAmount || orderData.payAmount || '0.00';
+      
+      // 更新订单状态
+      if (orderData.orderStatus) {
+        this.orderInfo.orderStatus = orderData.orderStatus;
+      }
+      
+      // 保存原始开始时间用于调试
+      this.orderInfo._rawStartTime = orderData.startTime;
+      
+      // 处理开始时间
+      if (orderData.startTime) {
+        try {
+          console.log('API返回的开始时间:', orderData.startTime);
+          // 尝试直接显示API返回的时间字符串
+          this.orderInfo.startTime = orderData.startTime;
+        } catch (e) {
+          console.error('更新开始时间错误:', e);
+          this.orderInfo.startTime = '未知';
+        }
+      } else {
+        console.warn('API返回的订单数据中没有startTime字段');
+        // 尝试使用createTime作为备选
+        if (orderData.createTime) {
+          console.log('使用createTime作为备选:', orderData.createTime);
+          this.orderInfo.startTime = orderData.createTime;
+        } else {
+          this.orderInfo.startTime = '未知';
+        }
+      }
       
       // 如果有设备号，更新设备号
       if (orderData.deviceNo && !this.deviceId) {
@@ -211,65 +276,37 @@ export default {
       }
     },
     
-    // 处理开锁归还
-    async handleUnlock() {
-      if (this.unlocking) return
-      
-      try {
-        this.unlocking = true
-        uni.showLoading({ title: '开锁中' })
-        
-        // 确认是否归还
-        const confirmResult = await new Promise((resolve) => {
-          uni.showModal({
-            title: '确认归还',
-            content: '确定要归还设备吗？',
-            success: (res) => {
-              resolve(res.confirm)
-            }
-          })
-        })
-        
-        if (!confirmResult) {
-          this.unlocking = false
-          uni.hideLoading()
-          return
-        }
-        
-        console.log(`准备结束订单, orderId: ${this.orderInfo.orderId}`)
-        
-        // 调用结束订单接口
-        const result = await overOrderById(this.orderInfo.orderId)
-        
-        console.log('结束订单结果:', JSON.stringify(result))
-        
-        if (result.code === 200) {
-          uni.showToast({
-            title: '归还成功',
-            icon: 'success'
-          })
-          
-          // 归还成功后，返回首页
-          setTimeout(() => {
-            uni.reLaunch({
-              url: '/pages/index/index'
-            })
-          }, 1500)
-        } else {
-          throw new Error(result.msg || '归还失败')
-        }
-      } catch (error) {
-        console.error('归还操作错误:', error)
-        uni.showToast({
-          title: error.message || '归还失败，请重试',
-          icon: 'none'
-        })
-      } finally {
-        this.unlocking = false
-        uni.hideLoading()
+    // 清除状态检查定时器
+    clearStatusCheckTimer() {
+      if (this.statusCheckTimer) {
+        clearInterval(this.statusCheckTimer)
+        this.statusCheckTimer = null
       }
     },
     
+    // 开始状态检查定时器
+    startStatusCheckTimer() {
+      this.currentStatusChecks = 0
+      this.clearStatusCheckTimer()
+      
+      this.statusCheckTimer = setInterval(() => {
+        this.currentStatusChecks++
+        this.checkReturnStatus()
+        
+        // 如果超过最大检查次数，停止定时器
+        if (this.currentStatusChecks >= this.maxStatusChecks) {
+          this.clearStatusCheckTimer()
+          
+          // 提示用户手动刷新
+          uni.showToast({
+            title: '请手动刷新查看归还状态',
+            icon: 'none',
+            duration: 3000
+          })
+        }
+      }, this.statusCheckInterval)
+    },
+    
     // 通过设备号查询使用中的订单
     async getOrderByDevice() {
       try {
@@ -293,13 +330,28 @@ export default {
         
         if (inUseRes.statusCode === 200 && inUseRes.data.code === 200 && inUseRes.data.data) {
           const inUseOrder = inUseRes.data.data
+          console.log('使用中的订单:', inUseOrder)
+          
           // 更新订单ID
           this.orderInfo.orderId = inUseOrder.orderId
           
+          // 如果有订单状态，更新订单状态
+          if (inUseOrder.orderStatus) {
+            this.orderInfo.orderStatus = inUseOrder.orderStatus
+          }
+          
+          // 如果有开始时间，直接更新
+          if (inUseOrder.startTime) {
+            console.log('inUse API返回的开始时间:', inUseOrder.startTime)
+            this.orderInfo.startTime = inUseOrder.startTime
+          }
+          
           // 获取详细订单信息
           this.getOrderDetails()
           // 启动定时器
           this.startTimer()
+          // 启动状态检查定时器
+          this.startStatusCheckTimer()
         } else {
           throw new Error('未找到使用中的订单')
         }
@@ -312,13 +364,27 @@ export default {
         
         // 如果获取订单失败，返回首页
         setTimeout(() => {
-          uni.reLaunch({
-            url: '/pages/index/index'
-          })
+          this.goToHome()
         }, 1500)
       } finally {
         uni.hideLoading()
       }
+    },
+    
+    // 检查归还状态
+    async checkReturnStatus() {
+      try {
+        await this.getOrderDetails()
+      } catch (error) {
+        console.error('检查归还状态失败:', error)
+      }
+    },
+    
+    // 返回首页
+    goToHome() {
+      uni.reLaunch({
+        url: '/pages/index/index'
+      })
     }
   }
 }
@@ -346,9 +412,9 @@ export default {
       margin-bottom: 30rpx;
 
       .title {
-        font-size: 36rpx;
-        font-weight: 600;
-        color: #1976D2;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333;
       }
 
       .order-no {
@@ -358,15 +424,15 @@ export default {
     }
 
     .device-info {
-      margin-bottom: 20rpx;
-
+      margin-bottom: 30rpx;
+      
       .device-name {
-        font-size: 32rpx;
-        font-weight: 500;
+        font-size: 28rpx;
         color: #333;
-        margin-right: 20rpx;
+        display: block;
+        margin-bottom: 10rpx;
       }
-
+      
       .device-id {
         font-size: 24rpx;
         color: #666;
@@ -374,27 +440,32 @@ export default {
     }
 
     .time-info {
+      background: #f9f9f9;
+      border-radius: 16rpx;
+      padding: 20rpx;
+
       .time-item {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         margin-bottom: 16rpx;
-
+        
         &:last-child {
           margin-bottom: 0;
         }
 
         .label {
-          font-size: 28rpx;
+          font-size: 26rpx;
           color: #666;
         }
 
         .value {
-          font-size: 28rpx;
+          font-size: 26rpx;
           color: #333;
-
+          
           &.highlight {
-            color: #1976D2;
-            font-weight: 500;
+            color: #ff6b00;
+            font-weight: bold;
           }
         }
       }
@@ -409,18 +480,18 @@ export default {
     box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
 
     .notice-title {
-      font-size: 32rpx;
-      font-weight: 600;
+      font-size: 28rpx;
+      font-weight: bold;
       color: #333;
-      margin-bottom: 24rpx;
+      margin-bottom: 20rpx;
     }
 
     .notice-list {
       .notice-item {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         margin-bottom: 16rpx;
-
+        
         &:last-child {
           margin-bottom: 0;
         }
@@ -428,13 +499,15 @@ export default {
         .dot {
           width: 12rpx;
           height: 12rpx;
-          background: #1976D2;
+          background: #07c160;
           border-radius: 50%;
+          margin-top: 10rpx;
           margin-right: 16rpx;
+          flex-shrink: 0;
         }
 
         text {
-          font-size: 28rpx;
+          font-size: 26rpx;
           color: #666;
           line-height: 1.5;
         }
@@ -447,33 +520,38 @@ export default {
     left: 0;
     right: 0;
     bottom: 0;
+    padding: 30rpx;
     background: #fff;
-    padding: 20rpx 30rpx;
-    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-    display: flex;
-    align-items: center;
-    justify-content: center;
     box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.04);
+    z-index: 10;
+    display: flex;
+    justify-content: space-between;
+    gap: 20rpx;
 
-    .unlock-btn {
-      width: 100%;
+    .primary-btn, .secondary-btn {
       height: 88rpx;
-      border-radius: 44rpx;
-      background: linear-gradient(135deg, #FF9800, #FFB74D);
-      color: #fff;
+      line-height: 88rpx;
       font-size: 32rpx;
-      font-weight: 600;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-
+      border-radius: 44rpx;
+      text-align: center;
+      flex: 1;
+    }
+    
+    .primary-btn {
+      background: #07c160;
+      color: #fff;
+      
       &:active {
-        transform: scale(0.98);
+        opacity: 0.8;
       }
-
-      &:disabled {
-        opacity: 0.7;
+    }
+    
+    .secondary-btn {
+      background: #f0f0f0;
+      color: #333;
+      
+      &:active {
+        opacity: 0.8;
       }
     }
   }