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

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

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;