feat:小程序UI优化

app.json

@@ -1,26 +1,26 @@
 {
   "pages": [
     "pages/scan/scan",
-    "pages/quantify/quantify",
-    "pages/moreOrder/moreOrder",
     "pages/TransactionPage/TransactionPage",
-    "pages/index/index",
-    "pages/login/login",
-    "pages/historyOrder/historyOrder",
-    "pages/login/load",
-    "pages/logs/logs",
-    "components/orderItem/orderItem",
-    "components/orderInfo/orderInfo",
+    "pages/AuthorizationTransactionPage/AuthorizationTransactionPage",
+    "pages/quantify/quantify",
     "components/orderItemInfo/orderItemInfo",
+    "pages/historyOrder/historyOrder",
     "components/prepayOrderItemInfo/prepayOrderItemInfo",
-    "components/pay/pay",
-    "pages/payStatus/payStatus",
     "pages/payResult/payResult",
-    "pages/AuthorizationTransactionPage/AuthorizationTransactionPage"
+    "pages/payStatus/payStatus",
+    "components/pay/pay",
+    "components/orderInfo/orderInfo",
+    "components/orderItem/orderItem",
+    "pages/logs/logs",
+    "pages/login/load",
+    "pages/index/index",
+    "pages/moreOrder/moreOrder",
+    "pages/login/login"
   ],
   "window": {
     "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "Weixin",
+    "navigationBarTitleText": "",
     "navigationBarBackgroundColor": "#ffffff"
   },
   "style": "v2",

components/orderInfo/orderInfo.wxml

@@ -1,5 +1,5 @@
 <!-- 订单信息 -->
-<view class="orderItemContainer">
+<view class="orderItemContainer" style="position: relative; left: 23rpx; top: -38rpx">
     <!-- 时间 -->
     <view class="dateTime">
       <text style="margin-left: 3%;color: #a7a7a7;font-size: smaller;">{{order.date}}</text>
@@ -8,13 +8,13 @@
 
     <!-- 中间订单信息 -->
     <view class="middle">
-      <image src="../../images/oil.svg" mode="aspectFit"></image>
+      <image class="flip-image" src="../../images/oiloil.png" mode="aspectFit"></image>
       <view class="orderInfo">
-        <text style="font-weight: 800;">{{order.oilName}}</text>
+        <text style="font-weight: 800; position: relative; left: 31rpx; top: 0rpx">{{order.oilName}}</text>
         <view class="nozzleAndVolume">
-          <text class="nozzle">{{order.nozzleNum}}号枪</text>
-          <text class="volume">{{order.volume}}</text>
-          <text style="color: #ff4e0e;font-size: small;">升</text>
+          <text class="nozzle" style="position: relative; left: 26rpx; top: 0rpx">{{order.nozzleNum}}号枪</text>
+          <text class="volume" style="position: relative; left: 15rpx; top: 0rpx">{{order.volume}}</text>
+          <text style="color: #0d7ee7; font-size: small; position: relative; left: 25rpx; top: 0rpx">升</text>
         </view>
       </view>
     </view>

components/orderInfo/orderInfo.wxss

@@ -10,6 +10,8 @@
   padding: 2% 2%;
 }
 
+.flip-image {transform: scaleX(-1);}
+
 .dateTime {
   display: flex;
   flex-direction: row;
@@ -51,12 +53,12 @@
   color: #ffffff;
   font-weight: 600;
   font-size: small;
-  background-color: #ca5a50;
+  background-color: #0d7ee7;
   border-radius: 10%;
 }
 
 .volume {
-  color: #ff4e0e;
+  color: #0d7ee7;
   font-size: large;
 }
 

components/orderItem/orderItem.wxml

@@ -11,13 +11,13 @@
 
   <!-- 中间订单信息 -->
   <view class="middle">
-    <image src="../../images/oil.svg" mode="aspectFit"></image>
+    <image class="youqiang" src="../../images/oiloil.png" mode="aspectFit"></image>
     <view class="orderInfo">
       <text style="font-weight: 800;">{{order.oilName}}</text>
       <view class="nozzleAndVolume">
-        <text class="nozzle">{{order.nozzleNum}}号枪</text>
+        <text class="nozzle" style="position: relative; left: 64rpx; top: 0rpx">{{order.nozzleNum}}号枪</text>
         <text class="volume">{{order.volume}}</text>
-        <text style="color: #ff4e0e;font-size: small;">升</text>
+        <text style="color: #0d7ee7;font-size: small;">升</text>
       </view>
     </view>
     <text wx:if="{{countdown != ''}}">倒计时 {{countdown}} 秒</text>

components/orderItem/orderItem.wxss

@@ -54,12 +54,14 @@
   color: #ffffff;
   font-weight: 600;
   font-size: small;
-  background-color: #ca5a50;
+  background-color: #0d7ee7;
   border-radius: 10%;
 }
 
+.youqiang{transform: scaleX(-1);}
+
 .volume {
-  color: #ff4e0e;
+  color: #0d7ee7;
   font-size: large;
 }
 

components/orderItemInfo/orderItemInfo.js

@@ -17,7 +17,8 @@ Component({
         payAmount:209.4,
         discount:15.3,
         orderId:'20251111111111',
-        time:'2025-01-20 18:33'
+        time:'2025-01-20 18:33',
+        price:''
       }
     },
     bottonText1:{
@@ -44,8 +45,7 @@ Component({
    */
   methods: {
     showOrHide(){
-      
-      const height = this.data.isHide?10:23;
+      const height = this.data.isHide?10:29;
       console.log("点击了",this.data.isHide,height)
       
       this.setData({
@@ -64,12 +64,16 @@ Component({
     },
     //第二个按钮的点击事件
     buttonClick2(){
+      wx.showLoading({
+        title: '正在跳转',
+      })
       /**第二个按钮会是去支付：1和去授权：2两种
        * 当当前订单状态为未支付或者支付失败时，第二个按钮点击就是去支付，event 传递1
        * 当当前订单状态为已失效时，第二个按钮点击就是去重新授权，event 传递2
        */
       var sendEvent = 1;
       if(this.properties.order.status == "已失效") sendEvent = 2
+      wx.hideLoading()
       this.triggerEvent('bottonEvent2',{
         order:this.properties.order,
         event:sendEvent

components/orderItemInfo/orderItemInfo.wxml

@@ -6,42 +6,56 @@
       <text class="nozzle">{{order.nozzle}} 号油枪</text>
       <text class="status" style="color: {{order.statusColor}};">{{order.status}}</text>
     </view>
-    
+
 
     <view class="orderInfo" style="height: {{contentHeight}}vh;" bind:tap="showOrHide">
       <!-- 订单主要信息 -->
       <view class="mainInfo">
-        <image src="../../images/oil.svg" mode="aspectFill" />
+        <image style="width: 150rpx; height: 140rpx; display: block; box-sizing: border-box; position: relative; left: 0rpx; top: 14rpx" class="youqiang" src="/images/oiloil.png" mode="aspectFill" />
         <view class="oilInfo">
-          <text class="oil">{{order.oilName}}</text>
-          <text class="volume">{{order.volume}}升数</text>
+          <text class="oil" style="position: relative; left: 22rpx; top: 0rpx">{{order.oilName}}</text>
+          <text class="volume" style="position: relative; left: 22rpx; top: 0rpx">{{order.volume}}升数</text>
         </view>
         <view class="amountBox">
           <text class="mainAmount">￥ {{order.payAmount}}</text>
           <image src="../../images/down.png" mode="aspectFill" style="transform: rotate({{rotateDeg}}deg);" />
         </view>
       </view>
+       <!-- 分割线 -->
+    <view class="line"></view>
 
-      <!-- 分割线 -->
-      <view class="line"></view>
+<view class="orderDetailInfo transition-box">
+  <view>
+    <text>升数</text>
+    <text>{{order.volume}}L</text>
+  </view>
+  <view>
+    <text>单价</text>
+    <text>￥ {{order.price}}</text>
+  </view>
 
-      <!-- 详情信息 -->
-      <view class="orderDetailInfo">
-        <view>
-          <text>金额</text>
-          <text>￥ {{order.amount}}</text>
-        </view>
-        <view>
-          <text>优惠</text>
-          <text>-{{order.discount}}</text>
-        </view>
-        <view>
-          <text>合计</text>
-          <text>￥ {{order.payAmount}}</text>
-        </view>
-      </view>
+  <!-- 分割线 -->
+  <view class="line"></view>
+
+  <!-- 详情信息 -->
+  <view class="orderDetailInfo transition-box">
+    <view>
+      <text>金额</text>
+      <text>￥ {{order.amount}}</text>
+    </view>
+    <view>
+      <text>优惠</text>
+      <text>-{{order.discount}}</text>
+    </view>
+    <view>
+      <text>合计</text>
+      <text>￥ {{order.payAmount}}</text>
+    </view>
+  </view>
+</view>
     </view>
 
+   
     <!-- 分割线 -->
     <view class="line"></view>
 

components/orderItemInfo/orderItemInfo.wxss

@@ -1,3 +1,34 @@
+
+.orderContainer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f2f2f2;
+}
+
+.dataSelect {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 90%;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 2% 3%;
+  border-radius: 3%;
+  background-color: #FFFFFF;
+  margin-top: 1%;
+}
+.dateTip{
+  display: flex;
+  align-items: center;
+  width: 50%;
+}
+.dataSelect image{
+  width: 50rpx;
+  height: 50rpx;
+  margin-right: 5%;
+}
+
 .orderItemInfoContainer{
   display: flex;
   flex-direction: column;
@@ -5,7 +36,7 @@
   justify-content: center;
   width: 100%;
   border-radius: 15rpx;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
@@ -50,13 +81,17 @@
   flex-grow: 1;
 }
 
+.youqiang{
+transform: scaleX(-1);
+}
+
 .oilInfo{
   display: flex;
   flex-direction: column;
   flex-grow: 3;
 }
 .oil{
-  color: #d92610;
+  color: #0177e6;
   font-size: large;
   font-weight: 550;
   margin-bottom: 3%;
@@ -89,7 +124,7 @@
   background-color: #e5e5e5;
   height: 1rpx;
   width: 105%;
-  margin: 3% 0%;
+  margin: 2% 0%;
 }
 
 .orderDetailInfo{
@@ -97,6 +132,7 @@
   flex-direction: column;
   width: 100%;
   margin-bottom: 3%;
+  transition: max-height 0.3s ease-in-out;
 }
 .orderDetailInfo view{
   display: flex;
@@ -112,10 +148,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #d81e07;
+  background-color: #0d7ee7;
   color: #FFFFFF;
   width: 100%;
   height: 5vh;
   font-size: small;
   border-radius: 0 0 15rpx 15rpx ;
-}
+}
+

components/pay/pay.wxss

@@ -7,7 +7,7 @@
   border-radius: 40rpx;
   padding-left: 5%;
   padding-right: 8%;
-  background-image: linear-gradient(to right, #333333 75%, #d81e07 75%); /* 线性渐变 */
+  background-image: linear-gradient(to right, #333333 75%, #0d7ee7 75%); /* 线性渐变 */
 }
 
 .amount{

components/prepayOrderItemInfo/prepayOrderItemInfo.js

@@ -35,7 +35,7 @@ Component({
    * 组件的初始数据
    */
   data: {
-    contentHeight: 21,
+    contentHeight: 20,
     isHide:false,
     rotateDeg:0
   },
@@ -47,7 +47,7 @@ Component({
     
     showOrHide(){
       
-      const height = this.data.isHide?21:38;
+      const height = this.data.isHide?20:35;
       console.log("点击了",this.data.isHide,height)
       
       this.setData({

components/prepayOrderItemInfo/prepayOrderItemInfo.wxml

@@ -11,10 +11,10 @@
     <view class="orderInfo" style="height: {{contentHeight}}vh;" bind:tap="showOrHide">
       <!-- 订单主要信息 -->
       <view class="mainInfo">
-        <image src="../../images/oil.svg" mode="aspectFill" />
+        <image class="youqiang" src="/images/oiloil.png" mode="aspectFill" />
         <view class="oilInfo">
-          <text class="oil">{{order.oilName}}</text>
-          <text class="volume">{{order.volume}}升数</text>
+          <text class="oil" style="position: relative; left: 27rpx; top: -4rpx">{{order.oilName}}</text>
+          <text class="volume" style="position: relative; left: 27rpx; top: 0rpx">{{order.volume}}升数</text>
         </view>
         <view class="amountBox">
           <text class="mainAmount">￥ {{order.payAmount}}</text>
@@ -62,7 +62,7 @@
     </view>
   </view>
 
-  <view class="buttonBox">
+  <view class="buttonBox" wx:if="{{buttonText1 != '' || buttonText2 != ''}}">
     
     <text wx:if="{{buttonText1 == '' && buttonText2 != ''}}" class="button1All" bind:tap="buttonClick2">{{buttonText2}}</text>
 

components/prepayOrderItemInfo/prepayOrderItemInfo.wxss

@@ -1,3 +1,37 @@
+.orderContainer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f2f2f2;
+}
+
+.dataSelect {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 90%;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 2% 3%;
+  border-radius: 3%;
+  background-color: #FFFFFF;
+  margin-top: 1%;
+}
+
+.youqiang{
+  transform: scaleX(-1);
+}
+
+.dateTip{
+  display: flex;
+  align-items: center;
+  width: 50%;
+}
+.dataSelect image{
+  width: 50rpx;
+  height: 50rpx;
+  margin-right: 5%;
+}
 .orderItemInfoContainer{
   display: flex;
   flex-direction: column;
@@ -56,7 +90,7 @@
   flex-grow: 3;
 }
 .oil{
-  color: #d92610;
+  color: #0c7de7;
   font-size: large;
   font-weight: 550;
   margin-bottom: 3%;
@@ -110,7 +144,7 @@
 
 .buttonBox{
   width: 100%;
-  height: 8vh;
+  height: 6vh;
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -122,7 +156,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #d81e07;
+  background-color: #0d7ee7;
   border-radius: 0 0 15rpx 15rpx ;
   color: #FFFFFF;
 }
@@ -141,7 +175,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #d81e07;
+  background-color: #0d7ee7;
   border-radius: 15rpx ;
   color: #FFFFFF;
 }

pages/AuthorizationTransactionPage/AuthorizationTransactionPage.wxss

@@ -24,7 +24,7 @@
 }
 
 .moreOrderTip{
-  color: #d81e07;
+  color: #0d7ee7;
   margin-top: 5%;
   font-weight: 600;
 }

pages/TransactionPage/TransactionPage.js

@@ -13,8 +13,18 @@ Page({
     nozzleId: 0,
     type: '后支付',
     order: null,
+    // order: {
+    //   oilName: '好名字',
+    //   nozzle: "1",
+    //   volume: "1",
+    //   amount: "1",
+    //   payAmount: "1",
+    //   discount: "1-1",
+    //   orderId: "1",
+    //   time: "2025-4-3"
+    // },
     oprationBtn1: '',
-    oprationBtn2: '对此订单有疑问？',
+    oprationBtn2: '对此订单有疑问？'
   },
 
   /**
@@ -84,8 +94,12 @@ Page({
 
   /** 获取订单信息 */
   getOrder() {
+    wx.showLoading({
+      title: '正在获取订单',
+    })
     api.request_GetMiniProgramTransactionsUnpaidNozzle(Number(this.data.nozzleId))
       .then(res => {
+        wx.hideLoading()
         if (res.data.statusCode == 203) {
           //若为203，证明还未登录，跳转到登录页，这里可能刚从主页跳转过来，频繁的跳转可能会跳转页面超时，故而加上延时
           setTimeout(() => {
@@ -108,18 +122,23 @@ Page({
             payAmount: order.actualPaymentAmount,
             discount: order.originalAmount - order.actualPaymentAmount,
             orderId: order.id,
-            time: time
+            time: time,
+            price:order.price
           }
         })
 
 
       }).catch(err => {
+        wx.hideLoading()
         console.log("未获取到未支付订单")
       })
   },
 
   /** 后支付查看更多交易 */
   toMordOrderPage() {
+    wx.showLoading({
+      title: '正在跳转',
+    })
     var that = this;
     wx.navigateTo({
       url: '../moreOrder/moreOrder?nozzle=' + this.data.nozzleId,
@@ -132,18 +151,36 @@ Page({
         }
       }
     })
+    wx.hideLoading()
   },
-  
+
   /** 支付按钮点击事件 */
   toPay() {
+    wx.showLoading({
+      title: '正在跳转',
+    })
     var that = this;
     api.request_wechatPay(this.data.order.orderId).then(res => {
       console.log("支付结果", res)
+      if(res.data.statusCode != 200) {
+        wx.hideLoading()
+        wx.showModal({
+          title: '提示',
+          content: '支付失败',
+        })
+        return
+      }
       this.subMessage()
       // this.pay()
     }).catch(err => {
+      wx.hideLoading()
       console.log("支付失败", err)
+      wx.showModal({
+        title: '提示',
+        content: '支付失败',
+      })
     })
+    
   },
   /** 订阅消息模板 */
   subMessage() {
@@ -174,15 +211,19 @@ Page({
           //     console.error('订阅消息发送失败', err)
           //   }
           // })
-          
+
         }
       },
       fail(err) {
         that.pay()
+        wx.showModal({
+          title: '提示',
+          content: '目前暂未获取到未支付订单',
+        })
       }
     })
 
-    
+
   },
   pay() {
     const that = this;
@@ -198,17 +239,13 @@ Page({
             wx.hideLoading()
             that.sendMessage()
             that.toPayResult()
-            
+
           },
           fail: res => {
             wx.hideLoading()
             wx.showModal({
-              title: '支付失败',
-              content: res.errMsg + '请稍后再试',
-              showCancel: false,
-              success(res) {
-
-              }
+              title: '提示',
+              content: '支付失败',
             })
           }
         })
@@ -218,24 +255,24 @@ Page({
   /** 发送消息模板 */
   sendMessage() {
     const message = {
-      trxid:this.data.order.orderId,
-      orderType:'支付'
+      trxid: this.data.order.orderId,
+      orderType: '支付'
     }
     api.request_sendMessage(message).then(res => {
-      console.log("发送消息模板结果",res)
+      console.log("发送消息模板结果", res)
     }).catch(err => {
-      console.log("发送消息模板失败",err)
+      console.log("发送消息模板失败", err)
     })
   },
 
   /** 跳转到支付结果页 */
-  toPayResult(){
+  toPayResult() {
     wx.redirectTo({
       url: '../payResult/payResult',
     })
   },
   /** 跳转到支付结果页(不用这个) */
-  toPayResult_back(){
+  toPayResult_back() {
     const that = this;
     setTimeout(function () {
       wx.navigateTo({

pages/TransactionPage/TransactionPage.wxml

@@ -1,9 +1,9 @@
 <view class="orderConfirmContainer">
 
   <!-- 订单 -->
-  <orderInfo wx:if="{{order != null}}" class="orderInfo" order="{{order}}" bottonText2="{{oprationBtn2}}" bind:bottonEvent2="toMordOrderPage" />
+  <orderInfo style="position: relative; left: 0rpx; top: 38rpx" wx:if="{{order != null}}" class="orderInfo" order="{{order}}" bottonText2="{{oprationBtn2}}" bind:bottonEvent2="toMordOrderPage" />
 
-  <text class="moreOrderTip" bind:tap="toMordOrderPage">更多交易</text>
+  <text class="moreOrderTip" bind:tap="toMordOrderPage" style="position: relative; left: -1rpx; top: 37rpx">更多交易</text>
   
   <!-- 支付按钮 -->
   <pay class="payButton" amount="{{order.amount}}" bind:onPay="toPay" />

pages/TransactionPage/TransactionPage.wxss

@@ -24,7 +24,7 @@
 }
 
 .moreOrderTip{
-  color: #d81e07;
+  color: #0177e6;
   margin-top: 5%;
   font-weight: 600;
 }

pages/historyOrder/historyOrder.js

@@ -10,33 +10,51 @@ Page({
    * 页面的初始数据
    */
   data: {
+    orders: [
+      {
+        order:{
+          status: '未支付',
+          statusColor: '#ff8d1a',
+          oilName: "hk",
+          nozzle: "1",
+          volume: "1",
+          amount: "1",
+          payAmount: "1",
+          discount: "1",
+          orderId: "1",
+          time: "2025-4-3",
+          price:'666'
+        },
+        bottonText2: ""
+      }
+    ],
     date: '',
     startDate: '',
     endDate: '',
-    pageNum:1,//查询页码
-    pageSize:5,//页数
-    isHaveOrder:true,//是否还有订单
+    pageNum: 1,//查询页码
+    pageSize: 5,//页数
+    isHaveOrder: true,//是否还有订单
     paymentMode: -1,
     /** 后支付订单状态  订单状态（0：未支付； 1：已支付； 2：订单全额退款；3：订单部分退款；5：已完成）*/
     payStatusValue: [{
-        orderStatus: 0,
-        status: '未支付',
-        statusColor: '#ff8d1a'
-      },
-      {
-        orderStatus: 1,
-        status: '已完成',
-        statusColor: '#a6a6a6'
-      },
-      {
-        orderStatus: 5,
-        status: '已完成',
-        statusColor: '#a6a6a6'
-      }
+      orderStatus: 0,
+      status: '未支付',
+      statusColor: '#ff8d1a'
+    },
+    {
+      orderStatus: 1,
+      status: '已完成',
+      statusColor: '#a6a6a6'
+    },
+    {
+      orderStatus: 5,
+      status: '已完成',
+      statusColor: '#a6a6a6'
+    }
     ],
     /** 预支付订单状态 授权状态（未授权：0；已授权：1）
      * + 订单状态（0：未支付； 1：已支付； 2：订单全额退款；3：订单部分退款；5：已完成） */
-    prepayStatuValue:[
+    prepayStatuValue: [
       {
         authorizationStatus: 0,
         orderStatus: 0,
@@ -74,9 +92,11 @@ Page({
         statusColor: '#a6a6a6'
       },
     ],
-    orders: []
+
   },
 
+
+
   /** 获取当前日期 */
   getNowDate() {
     const date = new Date(); // 获取当前日期
@@ -148,9 +168,9 @@ Page({
       startDate: today,
       endDate: lastMouthDay
     });
-    console.log("历史页当前data",this.data)
+    console.log("历史页当前data", this.data)
 
-    this.getOrder();
+    
 
     // this.startCountdow();
   },
@@ -159,14 +179,14 @@ Page({
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady() {
-
+    this.getOrder();
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
   onShow() {
-
+    
   },
 
   /**
@@ -194,10 +214,10 @@ Page({
    * 页面上拉触底事件的处理函数
    */
   onReachBottom() {
-    if(!this.data.isHaveOrder) return;
+    if (!this.data.isHaveOrder) return;
     var page = this.data.pageNum + 1;
     this.setData({
-      pageNum:page
+      pageNum: page
     })
     this.getOrder()
   },
@@ -213,7 +233,7 @@ Page({
   bindDateChange(date) {
     this.setData({
       date: date.detail.value,
-      orders:[]
+      orders: []
     });
     console.log(date)
     this.getOrder()
@@ -224,15 +244,15 @@ Page({
     console.log(event)
     const order = event.detail.order;
     const message = event.detail.event;
-    if(message == "退款") {
+    if (message == "退款") {
       wx.showLoading({
         title: '正在退款',
       })
-      api.request_RefundTrx({"trxId":order.orderId}).then(res =>{
-        console.log("退款",res)
+      api.request_RefundTrx({ "trxId": order.orderId }).then(res => {
+        console.log("退款", res)
         wx.hideLoading()
-        if(res.data.statusCode == 200) {
-          return util.subAndsendMessage(order.orderId,"退款")
+        if (res.data.statusCode == 200) {
+          return util.subAndsendMessage(order.orderId, "退款")
         } else {
           wx.showToast({
             title: res.data.message,
@@ -241,17 +261,17 @@ Page({
       }).then(res => {
         this.refreshOrder();
       })
-      .catch(err => {
-        console.log("退款失败",err)
-        wx.hideLoading()
-      })
+        .catch(err => {
+          console.log("退款失败", err)
+          wx.hideLoading()
+        })
     }
   },
 
   /** 组件按钮二点击事件 */
   onOrderButtonClick2(event) {
     console.log(event)
-    if(event.detail.event == "重新授权") {
+    if (event.detail.event == "重新授权") {
       this.toAuthorization(event.detail.order.orderId)
     }
   },
@@ -263,9 +283,9 @@ Page({
       title: '授权中',
     })
     api.request_NozzleAuthorization(orderId).then(res => {
-      console.log("授权",res)
+      console.log("授权", res)
       wx.hideLoading()
-      if(res.data.statusCode == 200) {
+      if (res.data.statusCode == 200) {
         that.refreshOrder()
       } else {
         wx.showToast({
@@ -273,7 +293,7 @@ Page({
         })
       }
     }).catch(err => {
-      console.log("授权报错",err)
+      console.log("授权报错", err)
       wx.showToast({
         title: '授权失败',
       })
@@ -282,30 +302,39 @@ Page({
 
   /** 获取订单 */
   getOrder() {
+    wx.showLoading({
+      title: '获取订单中',
+    })
     const that = this;
     api.request_WXFindOrders(this.data.date, this.data.pageNum, this.data.pageSize).then(res => {
+      wx.hideLoading()
       // api.request_WXFindOrders(this.data.date, 3, 5).then(res => {
       console.log("获取历史订单", res)
       let datas = res.data.data;
-      if(datas.length <= 0) {
+      if (datas.length <= 0) {
         that.data.isHaveOrder = false;
         return
       }
       var getOrders = that.turnOnOrder(datas)
 
-      var orderList = [...this.data.orders,...getOrders]
+      var orderList = [...this.data.orders, ...getOrders]
       this.setData({
         orders: orderList
       })
 
       console.log("转换后的订单", this.data.orders)
     }).catch(err => {
+      wx.hideLoading()
       console.log("获取历史订单失败", err)
+      wx.showModal({
+        title: '提示',
+        content: '获取订单失败',
+      })
     })
   },
 
   /** 打包订单信息 */
-  turnOnOrder(orders){
+  turnOnOrder(orders) {
     const that = this;
     var getOrders = orders.map(order => {
       //获取订单时间
@@ -319,7 +348,7 @@ Page({
       //获取订单状态
       var status = undefined;
       //根据不同的模式获取订单状态值
-      if(that.data.paymentMode == 0) {
+      if (that.data.paymentMode == 0) {
         status = that.data.payStatusValue.find(state => state.orderStatus == order.orderStatus)
       } else {
         status = that.data.prepayStatuValue.find(state =>
@@ -327,7 +356,7 @@ Page({
           state.orderStatus == order.orderStatus
         )
       }
-      
+
       var stute = '';
       var stateColor = '';
       var bt1 = ''
@@ -336,8 +365,8 @@ Page({
         stute = status.status
         stateColor = status.statusColor
       }
-      if(that.data.paymentMode == 0) {
-        if(stute == '未支付') bt2 = '重新支付';
+      if (that.data.paymentMode == 0) {
+        if (stute == '未支付') bt2 = '重新支付';
         return {
           order: {
             status: stute,
@@ -349,17 +378,18 @@ Page({
             payAmount: order.actualPaymentAmount,
             discount: order.originalAmount - order.actualPaymentAmount,
             orderId: order.id,
-            time: time
+            time: time,
+            price: order.price
           },
           bottonText2: bt2
         }
       } else {
-        if(stute == "授权成功") bt2 = "请尽快提枪"
-        if(stute == "支付失败") {
+        if (stute == "授权成功") bt2 = "请尽快提枪"
+        if (stute == "支付失败") {
           bt1 = "取消"
           bt2 = "继续支付"
         }
-        if(stute == "授权失败") {
+        if (stute == "授权失败") {
           bt1 = "退款"
           bt2 = "重新授权"
         }
@@ -373,24 +403,24 @@ Page({
             amount: order.originalAmount,
             payAmount: order.actualPaymentAmount,
             discount: order.originalAmount - order.actualPaymentAmount,
-            refund:order.refundAmount,
+            refund: order.refundAmount,
             orderId: order.id,
             time: time
           },
-          bottonText1:bt1,
+          bottonText1: bt1,
           bottonText2: bt2
         }
       }
     })
-    
+
     return getOrders;
   },
 
   /** 刷新订单 */
-  refreshOrder(){
+  refreshOrder() {
     this.setData({
       date: '',
-      orders:[]
+      orders: []
     });
     console.log(this.data.date)
     this.getOrder()

pages/historyOrder/historyOrder.json

@@ -3,5 +3,5 @@
     "orderItem":"../../components/orderItemInfo/orderItemInfo",
     "prepayOrderItem":"../../components/prepayOrderItemInfo/prepayOrderItemInfo"
   },
-  "navigationBarTitleText": "历史订单"
+  "navigationBarTitleText": "订单列表"
 }

pages/historyOrder/historyOrder.wxml

@@ -2,16 +2,15 @@
 <view class="orderContainer">
 
   <!-- 日期选择器 -->
-  <view class="dataSelect">
+<picker mode="date" value="{{date}}" bindchange="bindDateChange">
+  <view class="dataSelect" style="position: relative;">
     <view class="dateTip">
       <image src="../../images/date.png" mode="aspectFill" />
       <text>日期跳转</text>
     </view>
-    
-    <picker mode="date" value="{{date}}" bindchange="bindDateChange">
-      <text>{{date}} ></text>
-    </picker>
+    <text>{{date}} ></text>
   </view>
+</picker>
 
   <!-- 订单列表-后支付-->
   <view class="order" wx:if="{{paymentMode == 0}}">
@@ -36,5 +35,5 @@
     </view>
   </view>
 
-  <text style="color: #a1a1a1; margin: 5%">仅保留一个月的交易记录</text>
+  <text style="color: #a1a1a1; margin: 6%">仅保留一个月的交易记录</text>
 </view>

pages/historyOrder/historyOrder.wxss

@@ -21,7 +21,7 @@
 .dateTip{
   display: flex;
   align-items: center;
-  width: 50%;
+  width: 60%;
 }
 .dataSelect image{
   width: 50rpx;
@@ -29,6 +29,11 @@
   margin-right: 5%;
 }
 
+picker{
+  margin-left: 4%;
+  width: 100%;
+}
+
 .order{
   display: flex;
   flex-direction: column;

pages/index/index.json

@@ -1,4 +1,7 @@
 {
   "usingComponents": {
-  }
+  
+  },
+  "navigationBarTitleText": ""
+  
 }

pages/login/load.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "navigationBarTitleText": ""
 }

pages/login/load.wxml

@@ -1,5 +1,5 @@
 <scroll-view class="scrollarea" scroll-y>
-  <view class="container">
+  <view class="container" style="position: relative; left: 0rpx; top: 0rpx">
     <image src="/images/v2_sony48.svg" mode="widthFix" class="auto-image"></image>
   </view>
   <view class="text">

pages/login/login.js

@@ -204,7 +204,8 @@ Page({
         success(res) {
           console.log('用户信息:', res.userInfo);
           var user = {
-            UserName: res.userInfo.nickName,
+            // UserName: res.userInfo.nickName,
+            UserName: "测试",
             UserAvatarUrl: res.userInfo.avatarUrl,
             UserPhoneNumber: '',
             Address: '',

pages/login/login.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "navigationBarTitleText": ""
 }

pages/login/login.wxml

@@ -1,10 +1,10 @@
 <view class="container">
   <view class="image-container">
-    <image src="/images/v2_sony48.svg" mode="widthFix" class="auto-image"></image>
+    <image src="/images/v2_sony48.svg" mode="widthFix" class="auto-image" style="position: relative; left: -16rpx; top: -135rpx"></image>
   </view>
-  <view class="action-text">立码加油</view>
+  <view class="action-text" style="position: relative; left: 0rpx; top: -110rpx">立码加油</view>
   <button class="auth-button" open-type="getPhoneNumber" style="width: 547rpx; height: 94rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx"  bindtap="handleAuthLogin" bindgetphonenumber="handleAuthLogin">一键授权登录</button>
-  <view class="agreement">
+  <view class="agreement" style="position: relative; left: 46rpx; top: 16rpx">
     <!-- <button class="auth-button"   bindtap="subMessage">支付</button>
     <button class="auth-button"   bindtap="RefundTrx">退款</button>
     <button open-type="getPhoneNumber" bindgetphonenumber="handleGetPhoneNumber">获取手机号</button>

pages/logs/logs.json

@@ -1,4 +1,5 @@
 {
   "usingComponents": {
-  }
+  },
+  "navigationBarTitleText": ""
 }

pages/moreOrder/moreOrder.js

@@ -103,6 +103,10 @@ Page({
       
     }).catch(err => {
       console.log("未获取到未支付订单")
+      wx.showModal({
+        title: '提示',
+        content: '目前暂未获取到未支付订单',
+      })
     })
   },
 })

pages/moreOrder/moreOrder.wxml

@@ -1,9 +1,9 @@
 <view class="moreOrderContainer">
   <!-- 提示 -->
-  <view class="tip">
+  <!-- <view class="tip">
     <icon color="#fbac15" type="warn" />
     <text>请勿在油机旁使用手机</text>
-  </view>
+  </view> -->
   <view class="order" wx:for="{{orders}}" wx:key="{{index}}">
     <orderItem class="orderItem" order="{{item}}" bottonText2="{{buttonMessage2}}" bind:bottonEvent2="toPay" />
   </view>

pages/payResult/payResult.wxml

@@ -1,14 +1,14 @@
 <view class="payResultContainer">
   <!-- 标识区 -->
   <view class="signBox">
-    <icon type="success" size="100" />
-    <text>支付成功</text>
+    <icon type="success" size="120" />
+    <text style="font-size: 40rpx;">支付成功</text>
   </view>
 
   <view class="buttonBox">
-    <text class="checkOrderBtn" bind:tap="toHistoryOrder">查看订单</text>
-    <text class="finishBtn" bind:tap="finish">完成</text>
+    <text class="checkOrderBtn" bind:tap="toHistoryOrder" style="font-size: 37rpx;">查看订单</text>
+    <text class="finishBtn" bind:tap="finish" style="font-size: 37rpx;">完成</text>
   </view>
 
-  <text class="bottomTip">客服帮助 | 隐私政策等</text>
+  <text class="bottomTip" style="position: relative; left: 0rpx; top: 74rpx">客服帮助 | 隐私政策等</text>
 </view>

pages/payResult/payResult.wxss

@@ -35,7 +35,7 @@
   margin-top: 8%;
 }
 .checkOrderBtn{
-  background-color: #d81e07;
+  background-color: #0d7ee7;
   color: #FFFFFF;
   height: 6vh;
   width: 100%;
@@ -49,7 +49,7 @@
 }
 .finishBtn{
   background-color: #FFFFFF;
-  color: #d81e07;
+  color: #0d7ee7;
   height: 6vh;
   width: 100%;
   display: flex;
@@ -58,7 +58,7 @@
   font-size: small;
   font-weight: 600;
   border-radius: 10rpx;
-  border: #d81e07 solid 5rpx;
+  border: #0d7ee7 solid 5rpx;
 }
 
 .bottomTip{

pages/payStatus/payStatus.js

@@ -2,7 +2,7 @@ const { default: api } = require("../../js/api");
 
 Page({
   data: {
-    id: 1 , // 初始ID值
+    id: 4 , // 初始ID值
     nozzleId:0,
     order:null,
     countdown: 120,

pages/payStatus/payStatus.wxml

@@ -1,36 +1,35 @@
-<view class="container" wx:if="{{id === 1}}" style="position: relative; left: 0rpx; top: 0rpx">
+<view class="container" wx:if="{{id === 1}}" style="position: relative; left: 0rpx; top: 610rpx">
   <!-- 动画区域 -->
-  <view style="position: relative; left: 0rpx; top: 204rpx">
-    <view class="loading-circle" style="position: relative; left: 0rpx; top: 1rpx"></view>
+  <view style="position: relative; left: 0rpx; top: -29rpx; width: 674rpx; height: 452rpx; display: block; box-sizing: border-box">
+    <image class="rotating-image" style="width: 222rpx; height: 222rpx; display: inline-block; box-sizing: border-box; position: relative; left: 226rpx; top: -267rpx" src="/images/loading.png" mode="" />
   </view>
   <!-- 文本区域 -->
   <view>
-    <view class="title" style="width: 122rpx; display: block; box-sizing: border-box; position: relative; left: 25rpx; top: -222rpx">授权中</view>
-    <view class="sub-title" style="position: relative; left: 0rpx; top: -200rpx; width: 170rpx; display: block; box-sizing: border-box; height: 50rpx">请勿退出页面</view>
+    <view class="title" style="width: 122rpx; display: block; box-sizing: border-box; position: relative; left: 58rpx; top: -189rpx">授权中</view>
+    <view class="sub-title" style="position: relative; left: 0rpx; top: -149rpx; width: 237rpx; display: block; box-sizing: border-box; height: 120rpx; font-size: 20px">请勿退出页面</view>
   </view>
   <!-- 底部链接区域 -->
-  <view class="bottom-links" style="position: relative; left: 192rpx; top: -12rpx">
-    <text style="height: 56rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx; position: relative; width: 150rpx">客服帮助</text>
-    <text style="width: 72rpx; height: 56rpx; display: block; box-sizing: border-box; position: relative; left: -34rpx; top: 0rpx">|</text>
-    <text style="position: relative; left: -70rpx; top: 0rpx; width: 218rpx; display: block; box-sizing: border-box; height: 56rpx">隐私政策等</text>
+  <view class="bottom-links" style="position: relative; left: 179rpx; top: -149rpx">
+    <text style="height: 56rpx; display: block; box-sizing: border-box; left: 7rpx; top: -25rpx; position: relative; width: 150rpx">客服帮助</text>
+    <text style="width: 72rpx; height: 1224rpx; display: block; box-sizing: border-box; position: relative; left: -29rpx; top: 560rpx">|</text>
+    <text style="position: relative; left: -65rpx; top: -25rpx; width: 218rpx; display: block; box-sizing: border-box; height: 56rpx">隐私政策等</text>
   </view>
 </view>
 
 
 <view class="page-container" wx:if="{{id === 2}}" style="position: relative; left: 0rpx; top: -39rpx">
   <!-- 图标部分 -->
-  <view class="fail-icon-box">
-    <view class="orange-circle" style="position: relative; left: 0rpx; top: 154rpx">
-      <text class="close-icon" style="position: relative; left: 0rpx; top: 0rpx; height: 225rpx; display: block; box-sizing: border-box">×</text>
-    </view>
+  <view>
+    <image style="width: 222rpx; height: 222rpx; display: inline-block; box-sizing: border-box; position: relative; left: 0rpx; top: 174rpx" src="/images/no.png" mode="" />
   </view>
+
   <!-- 提示文本部分 -->
   <view class="prompt-text-area">
-    <text class="fail-title" style="position: relative; left: 0rpx; top: 143rpx">支付失败</text>
+    <text class="fail-title" style="position: relative; left: 0rpx; top: 237rpx">支付失败</text>
   </view>
   <!-- 操作按钮部分 -->
   <view class="action-button-section">
-    <button class="retry-pay-btn" style="position: relative; left: 0rpx; top: 241rpx; width: 522rpx; display: block; box-sizing: border-box" bind:tap="back">重新支付</button>
+    <button class="retry-pay-btn" style="position: relative; left: 0rpx; top: 356rpx; width: 600rpx; display: block; box-sizing: border-box">重新支付</button>
   </view>
   <!-- 底部链接区域 -->
   <view class="bottom-links" style="position: relative; left: 130rpx; top: -15rpx">
@@ -40,22 +39,21 @@
   </view>
 </view>
 
+
 <view class="a" wx:if="{{id === 3}}" style="position: relative; left: 0rpx; top: 0rpx">
   <!-- 图标区域 -->
-  <view class="b" style="position: relative; left: 0rpx; top: 95rpx">
-    <view class="c">
-      <text class="d">√</text>
-    </view>
+  <view class="b">
+    <image style="width: 222rpx; height: 222rpx; display: block; box-sizing: border-box; left: 0rpx; top: 88rpx; position: relative" src="/images/yes.png" alt="" />
   </view>
   <!-- 提示文本区域 -->
   <view class="e">
-    <text class="f" style="position: relative; left: 0rpx; top: -108rpx">授权成功</text>
+    <text class="f" style="position: relative; left: 0rpx; top: -100rpx">授权成功</text>
   </view>
   <view class="g">
-    <text class="h" style="position: relative; left: 0rpx; top: -226rpx">请在两分钟内提枪加油</text>
+    <text class="h" style="position: relative; left: 0rpx; top: -266rpx">请在两分钟内提枪加油</text>
   </view>
   <!-- 倒计时区域 -->
-  <view class="i" style="position: relative; left: 0rpx; top: -388rpx; width: 556rpx; height: 100rpx; display: block; box-sizing: border-box">
+  <view class="i" style="position: relative; left: -2rpx; top: -387rpx; width: 560rpx; height: 100rpx; display: block; box-sizing: border-box">
     <view class="k" style="width: {{progressWidth}}%; position: relative; left: -58rpx; top: 0rpx"></view>
     <text class="countdown-text" style="position: absolute; left: 85rpx; top: -105rpx; width: 368rpx; height: 291rpx; display: flex; box-sizing: border-box">{{currentSeconds}}s</text>
   </view>
@@ -68,20 +66,20 @@
 </view>
 
 
-<view class="a" wx:if="{{id === 4}}" style="position: relative; left: 0rpx; top: 0rpx">
+<view class="a" wx:if="{{id === 4}}" style="position: relative; left: 0rpx; top: 45rpx">
   <!-- 图标区域 -->
-  <view class="b" style="position: relative; left: 0rpx; top: 95rpx">
-    <view class="c">
-      <text class="d">√</text>
+  <view class="b" style="position: relative; left: 0rpx; top: 125rpx; width: 562rpx; height: 439rpx; display: flex; box-sizing: border-box">
+    <view>
+      <image style="width: 222rpx; height: 222rpx; display: inline-block; box-sizing: border-box; position: relative; left: 0rpx; top: -24rpx" src="/images/yes.png" mode="" />
     </view>
   </view>
   <!-- 提示文本区域 -->
   <view class="e">
-    <text class="f" style="position: relative; left: 0rpx; top: -160rpx">加油中</text>
+    <text class="f" style="position: relative; left: 0rpx; top: -312rpx">加油中</text>
   </view>
   <view class="button-container">
-    <button class="check-order-btn" style="position: relative; left: 2rpx; top: -266rpx; width: 464rpx; display: block; box-sizing: border-box; height: 83rpx" bind:tap="toHistory">查看订单</button>
-    <button class="complete-btn" style="position: relative; left: 0rpx; top: -254rpx; width: 468rpx; display: block; box-sizing: border-box; height: 83rpx" bind:tap="toHistory">完成</button>
+    <button class="check-order-btn" style="position: relative; left: 0rpx; top: -314rpx; width: 593rpx; display: block; box-sizing: border-box; height: 99rpx">查看订单</button>
+    <button class="complete-btn" style="position: relative; left: 0rpx; top: -295rpx; width: 593rpx; display: block; box-sizing: border-box; height: 99rpx">完成</button>
   </view>
   <!-- 底部链接区域 -->
   <view class="bottom-links" style="position: relative; left: 180rpx; top: -12rpx">
@@ -94,18 +92,18 @@
 <view class="page-container" wx:if="{{id === 5}}" style="position: relative; left: 0rpx; top: -37rpx">
   <!-- 图标部分 -->
   <view class="fail-icon-box">
-    <view class="orange-circle" style="position: relative; left: 0rpx; top: 154rpx">
-      <text class="close-icon" style="position: relative; left: 0rpx; top: 0rpx; height: 225rpx; display: block; box-sizing: border-box">×</text>
+    <view>
+      <image style="width: 222rpx; height: 222rpx; display: inline-block; box-sizing: border-box; position: relative; left: 0rpx; top: 175rpx" src="/images/no.png" mode="" />
     </view>
   </view>
   <!-- 提示文本部分 -->
   <view class="prompt-text-area">
     <text class="fail-title" style="position: relative; left: 0rpx; top: 143rpx">授权失败</text>
   </view>
+
   <!-- 操作按钮部分 -->
   <view class="action-button-section">
-    <button class="retry-pay-btn" style="position: relative; left: 0rpx; top: 150rpx; width: 522rpx; display: block; box-sizing: border-box" bind:tap="toAuthorization">重新授权</button>
-    <button class="checkHistory" style="position: relative; left: 0rpx; top: 150rpx; width: 522rpx; display: block; box-sizing: border-box" bind:tap="toHistory">查看订单</button>
+    <button class="retry-pay-btn" style="position: relative; left: 0rpx; top: 245rpx; width: 602rpx; display: block; box-sizing: border-box">重新发起授权</button>
   </view>
   <!-- 底部链接区域 -->
   <view class="bottom-links" style="position: relative; left: 24rpx; top: 0rpx">

pages/payStatus/payStatus.wxss

@@ -8,6 +8,33 @@
   padding: 20px;
 }
 
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.rotating-image {
+  /* 设置旋转中心为图片中心 */
+  transform-origin: center center;
+  /* 初始旋转角度为 0 度 */
+  transform: rotate(0deg);
+  /* 定义旋转动画，动画名为 rotate，持续时间 5 秒，无限循环，线性变化 */
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    /* 动画起始时旋转角度为 0 度 */
+    transform: rotate(0deg);
+  }
+  to {
+    /* 动画结束时旋转角度为 360 度 */
+    transform: rotate(360deg);
+  }
+}    
+
 .title {
   color: #373737;
   font-size: 20px;
@@ -81,7 +108,7 @@
   width: 100%;
   height: 45px;
   line-height: 30px;
-  background-color: #d81e07;
+  background-color: #0d7ee7;
   color: #fff3e9;
   border: none;
   border-radius: 12px;
@@ -93,8 +120,8 @@
   height: 45px;
   line-height: 30px;
   background-color: #fff3e9;
-  color: #d81e07;
-  border: #d81e07 solid 3rpx;
+  color: #0d7ee7;
+  border: #0d7ee7 solid 3rpx;
   border-radius: 12px;
   font-size: 16px;
   margin-top: 5%;
@@ -157,7 +184,7 @@
   width: 120%;
   background-color: #f2f2f2;
   height: 45px;
-  border: 5px solid #d81e07;
+  border: 5px solid #0d7ee7;
   border-radius: 20px;
   overflow: hidden; 
   box-sizing: border-box;
@@ -166,7 +193,7 @@
 
 .k{
   height: 100%;
-  background-color: #d81e07;
+  background-color: #0d7ee7;
   transition: width 1s ease; /* 添加过渡动画，让进度条变化更平滑 */
 }
 
@@ -194,28 +221,31 @@
 .check-order-btn {
   width: 200px; /* 按钮宽度 */
   height: 45px; /* 按钮高度 */
-  background-color: #d81e07; /* 背景颜色 */
+  background-color: #0d7ee7; /* 背景颜色 */
   color: #fffdfe; /* 文字颜色 */
   border: none; /* 无边框 */
   border-radius: 10px; /* 圆角 */
   font-size: 16px; /* 文字大小 */
+  text-align: center;
+  line-height: 33px;
 }
 
 .complete-btn {
   width: 200px;
   height: 45px;
   background-color: #f2f2f2; /* 背景颜色为白色 */
-  color: #c52818; /* 文字颜色为红色 */
-  border: 3px solid #c83523; /* 红色边框 */
+  color: #0d7ee7; /* 文字颜色为红色 */
+  border: 3px solid #0d7ee7; /* 红色边框 */
   border-radius: 10px;
   font-size: 16px;
+  line-height: 33px;
 }
 
 .loading-circle {
   width: 65px;
   height: 65px;
   border: 4px solid #e0e0e0; /* 灰色边框 */
-  border-top-color: #ad1919; /* 绿色上边框，可根据喜好修改 */
+  border-top-color: #0d7ee7; /* 绿色上边框，可根据喜好修改 */
   border-radius: 50%; /* 圆形 */
   animation: spin 1s linear infinite; /* 应用动画，1秒循环一次，线性变化，无限循环 */
 }

pages/quantify/quantify.js

@@ -10,17 +10,18 @@ Page({
    */
   data: {
     nozzleId: '',
+    isLoading: false,
     nozzleInfo: null,
     quantify: '元',
     fastInputs: [10, 20, 50, 100, 200, 500],
     type: [{
-        name: '金额',
-        checked: true
-      },
-      {
-        name: '升数',
-        checked: false
-      }
+      name: '金额',
+      checked: true
+    },
+    {
+      name: '升数',
+      checked: false
+    }
     ],
     inputValue: '',
     inputTip: '请输入金额',
@@ -100,9 +101,13 @@ Page({
         nozzle.productPrice = utils.formatDiNumber(nozzle.productPrice);
         that.setData({
           nozzleInfo: nozzle
-        })
+        });
+      } else {
+        console.log('获取油枪信息失败，无内容返回');
       }
-    })
+    }).catch(err => {
+      console.log('获取油枪信息接口请求失败', err);
+    });
   },
 
   /** 输入框监听 */
@@ -126,6 +131,11 @@ Page({
 
   /** 授权 */
   toAuthorization() {
+    wx.showLoading({
+      title: '授权中',
+    })
+  
+    console.log('进入 toAuthorization 方法');
     console.log(this.data)
     // const distance = utils.haversine(this.data.stationLatitude,this.data.stationLongitude,this.data.latitude,this.data.longitude);
     // if(distance > 500) {
@@ -134,21 +144,30 @@ Page({
     //   })
     //   return
     // }
-    this.createOrder()
+    this.createOrder();
   },
 
   /** 创建订单 */
   createOrder() {
     const nozzle = this.data.nozzleInfo;
+    if (!nozzle) {
+      wx.hideLoading()
+      wx.showToast({
+        title: '油枪信息未获取',
+        icon: 'error',
+      });
+      return;
+    }
+
     const value = this.data.inputValue;
     console.log("要授权的油枪信息", nozzle, value)
-    if(value <= 0){
+    if (value <= 0) {
       wx.showToast({
         title: '定量值非法',
-      })
-      return
+      });
+      return;
     }
-    var requestData = null
+    var requestData = null;
     if (this.data.quantify == '元') {
       requestData = {
         externalGunNumber: nozzle.externalGunNumber,
@@ -168,25 +187,31 @@ Page({
     }
 
     api.request_createOrder(requestData).then(res => {
-      console.log("创建订单", res)
-      if (res.data.statusCode != 200) {
+      console.log("创建订单", res);
+      if (res.data.statusCode == 200) {
+        utils.subAndsendMessage(res.data.data.id, "下单").then(response => {
+          this.toPayPage(res);
+        }).catch(err => {
+          this.toPayPage(res);
+        });
+      } else {
         wx.showToast({
           icon: "none",
-          title: res.data.message == undefined ? res.data.notification : res.data.message,
-        })
-        return
+          title: '授权失败',
+        });
       }
-      utils.subAndsendMessage(res.data.data.id, "下单").then(response => {
-        this.toPayPage(res)
-      }).catch(err => {
-        this.toPayPage(res)
+    }).catch(err => {
+      console.log("创建订单失败", err);
+      wx.showToast({
+        icon: "none",
+        title: '授权失败',
       });
-    })
+    });
   },
 
   toPayPage(res) {
     const order = res.data.data;
-    const time = utils.formatDateNotSecond(order.createTime)
+    const time = utils.formatDateNotSecond(order.createTime);
     setTimeout(() => {
       wx.navigateTo({
         url: '../AuthorizationTransactionPage/AuthorizationTransactionPage?nozzleId=' + this.data.nozzleId,
@@ -199,12 +224,15 @@ Page({
             payAmount: order.actualPaymentAmount,
             discount: order.originalAmount - order.actualPaymentAmount,
             orderId: order.id,
-            time: time
+            time: time,
+            price:order.price
           })
         }
       })
-    }, 500)
+    }, 500);
+    wx.hideLoading()
   },
+
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
@@ -272,4 +300,4 @@ Page({
       });
     }
   }
-})
+});

pages/quantify/quantify.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "navigationBarTitleText": "定额加油"
 }

pages/quantify/quantify.wxml

@@ -8,10 +8,10 @@
   <view class="quantifyBox">
     <!-- 油品信息 -->
     <view class="oilInfoBox">
-      <image src="../../images/oil.svg" mode="aspectFill" />
+      <image style="position: relative; left: 25rpx; top: 0rpx; width: 218rpx; display: block; box-sizing: border-box" src="../../images/oiloil.png" mode="aspectFill" class="flip-image" />
       <view class="oilInfo">
-        <text class="oil">{{nozzleInfo.productName}}油品</text>
-        <text class="price">￥{{nozzleInfo.productPrice}}/升</text>
+        <text class="oil" style="position: relative; left: -8rpx; top: 0rpx">{{nozzleInfo.productName}}</text>
+        <text class="price" style="position: relative; left: -8rpx; top: 6rpx">￥{{nozzleInfo.productPrice}}/升</text>
       </view>
     </view>
 
@@ -20,7 +20,7 @@
       <!-- 输入 -->
       <view class="input">
         <text>{{inputTip}}</text>
-        <input type="digit" placeholder="0.00" value="{{inputValue}}" bindinput="onInputChange" />
+        <input style="width: 393rpx; height: 43rpx; display: block; box-sizing: border-box" type="digit" placeholder="0.00" value="{{inputValue}}" bindinput="onInputChange" />
         <text>{{quantify}}</text>
       </view>
 
@@ -29,15 +29,15 @@
 
       <!-- 快速输入 -->
       <view class="fastInput">
-        <text class="fastItem" wx:for="{{fastInputs}}" wx:key="index" bindtap="onFastInputClick" data-id="{{item}}">{{item}}{{quantify}}</text>
+        <text hover-class="fast-item-hover" class="fastItem" wx:for="{{fastInputs}}" wx:key="index" bindtap="onFastInputClick" data-id="{{item}}">{{item}}{{quantify}}</text>
       </view>
 
       <!-- 定量类型选择 -->
-      <radio-group class="typeSelect" bindchange="onTypeChange">
-        <radio wx:for="{{type}}" wx:key="index" checked="{{item.checked}}" color="#d81e07" value="{{item.name}}">{{item.name}}</radio>
+      <radio-group class="typeSelect" bindchange="onTypeChange" style="position: relative; left: 0rpx; top: 22rpx">
+        <radio wx:for="{{type}}" wx:key="index" checked="{{item.checked}}" color="#0d7ee7" value="{{item.name}}">{{item.name}}</radio>
       </radio-group>
     </view>
   </view>
-
-  <text class="anthorization" bind:tap="toAuthorization">授权</text>
+                                                                                                      
+  <text class="anthorization" bind:tap="toAuthorization" hover-class="authorization-hover" loading="{{isLoading}}">授权</text>
 </view>

pages/quantify/quantify.wxss

@@ -46,15 +46,17 @@
   font-size: x-large;
 }
 
+.flip-image {transform: scaleX(-1);}
+
 .price{
-  border: #b7332e solid 5rpx;
-  background-color: #ffebec;
+  border: #0d7ee7 solid 5rpx;
+  background-color: #e8efff;
   border-radius: 18rpx;
   margin-top: 5%;
   padding: 10%;
   font-size: larger;
   font-weight: 600;
-  color: #b7332e;
+  color: #0d7ee7;
   width: 100%;
 }
 
@@ -110,7 +112,7 @@
 }
 
 .anthorization{
-  background-color: #d81e07;
+  background-color: #0d7ee7;
   color: #FFFFFF;
   margin-top: 5%;
   width: 90%;
@@ -119,4 +121,25 @@
   align-items: center;
   justify-content: center;
   border-radius: 20rpx;
+}
+
+.fast-item-hover {
+  background-color: #e0e0e0; 
+}
+
+.authorization-hover {
+  background-color: #0a6bc5;
+  color: white;
+}
+
+text[loading="true"] {
+  animation: loadingAnimation 1s linear infinite; 
+}
+@keyframes loadingAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

pages/scan/scan.js

@@ -62,6 +62,9 @@ Page({
 
   // 打开扫码功能
   scanCode: function () {
+    wx.showLoading({
+      title: '正在跳转',
+    })
     const that = this;
     wx.scanCode({
       success(res) {

pages/scan/scan.wxml

@@ -1,47 +1,51 @@
 <view class="scanContainer">
-  <view class="header">
+  <view class="header" style="position: fixed; left: 0rpx; top: 56rpx">
     <image src="../../images/orientation.png" />
     <text>{{site.name}}</text>
   </view>
-  <image class="background" src="../../images/stationBackground.png"></image>
+  <image class="background" src="../../images/stationBackground.png" style="height: 518rpx; display: block; box-sizing: border-box"></image>
 
-  <view class="scan-box">
+  <view class="scan-box" style="position: absolute; left: 38rpx; top: 379rpx; height: 1050rpx; display: flex; box-sizing: border-box">
     <!-- 登录条 -->
-    <view class="login-container" bind:tap="toLoginOrOrderPage">
+    <view class="login-container" bind:tap="toLoginOrOrderPage" style="position: relative; left: 0rpx; top: -200rpx">
       <view class="user-icon">
-        <view class="user-border-unlogin" wx:if="{{!isLoggedIn}}">
-          <image src="../../images/user.png" mode="aspectFit"></image>
+        <view class="user-border-unlogin" wx:if="{{!isLoggedIn}}" style="position: relative; left: 25rpx; top: 0rpx">
+          <image src="../../images/user.png" style="position: relative; left: 5rpx; top: -2rpx"></image>
         </view>
-        <image class="user-icon-login" wx:if="{{isLoggedIn}}" src="{{userInfo.userAvatarUrl}}" mode="aspectFit"></image>
+        <image class="user-icon-login" style="position: relative; left: 5rpx; top: -10rpx" wx:if="{{isLoggedIn}}" src="{{userInfo.userAvatarUrl}}" mode="aspectFit"></image>
       </view>
-      
-      <view class="user-tip" wx:if="{{!isLoggedIn}}">
-        <text style="font-weight: 530;">未登录</text>
-        <text style="font-size: 24rpx;color: #81838f;">请授权登录</text>
+
+      <view class="user-tip" wx:if="{{!isLoggedIn}}" style="position: relative; left: 21rpx; top: 0rpx">
+        <text style="font-weight: 700; position: relative; left: -22rpx; top: 36rpx; height: 99rpx; display: block; box-sizing: border-box">未登录</text>
+        <text style="font-size: 30rpx; color: #81838f; position: relative; left: -22rpx; top: -15rpx; height: 68rpx; display: block; box-sizing: border-box">请授权登录</text>
+      </view>
+      <text class="user-tip" wx:if="{{isLoggedIn}}" style="position: relative; left: -22rpx; top: 21rpx">{{userInfo.userPhoneNumber}}</text>
+
+      <view style="position: relative; left: 0rpx; top: -10rpx">
+        <image class="lishidingdan" src="/images/date.png" mode="" wx:if="{{isLoggedIn}}" style="position: relative; left: -35rpx; top: 8rpx"></image>
+        <text class="toOtherPage" wx:if="{{isLoggedIn}}" style="height: 37rpx; display: flex; box-sizing: border-box; position: relative; left: -32rpx; top: 0rpx">历史订单</text>
       </view>
-      <text class="user-tip" wx:if="{{isLoggedIn}}">{{userInfo.userPhoneNumber}}</text>
 
-      <text class="toOtherPage">></text>
     </view>
-    
+
     <!-- 分割线 -->
-    <view class="line"></view>
+    <view class="line" style="position: relative; left: 0rpx; top: -226rpx"></view>
 
     <!-- 扫码区 -->
-    <view class="scan-container" bind:tap="scanCode">
-      <view class="scan-image-box">
+    <view class="scan-container" bind:tap="scanCode" style="position: relative; left: 0rpx; top: -29rpx">
+      <view class="scan-image-box" style="position: relative; left: 0rpx; top: -39rpx">
         <view class="scan-bg-1" />
         <view class="scan-bg-2" />
         <view class="scan-bg-3" />
         <image src="../../images/scan.png" mode="aspectFit"></image>
       </view>
-      
+
       <view class="scan-tip-title">
         <view class="title-line" />
         <text class="scan-tip-title-text">{{scanTitle}}</text>
       </view>
-      
-      <text class="scan-tip-text">{{scanTip}}</text>
+
+      <text class="scan-tip-text" style="position: relative; left: 0rpx; top: 0rpx; width: 327rpx; height: 45rpx; display: block; box-sizing: border-box">{{scanTip}}</text>
     </view>
   </view>
 

pages/scan/scan.wxss

@@ -43,6 +43,12 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.lishidingdan{
+  height: 65rpx;
+  width: 65rpx;
+  margin-left: 23rpx;
+}
+
 .login-container{
   display: flex;
   flex-direction: row;
@@ -68,17 +74,18 @@
   border-radius: 50%;
   width: 100rpx;
   height: 100rpx;
-  border: #d81e07 solid 1rpx;
+  border: #fdfdfd solid 1rpx;
   background-color: #ebebeb;
   margin-right: 5%;
 }
 .user-border-unlogin image {
-  width: 80rpx;
-  height: 80rpx;
+  width: 100rpx;
+  height: 100rpx;
   border-radius: 50%;
   margin-right: 3%;
 }
 .user-icon-login {
+  left: 5rpx; top: -9rpx;
   width: 100rpx;
   height: 100rpx;
   border-radius: 50%;
@@ -95,12 +102,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 25rpx;
 }
 
 .line{
   width: 100%;
   height: 6rpx;
-  background-color: #d81e07;
+  background-color: #c8d6fa;
   padding: 0;
   margin: 0;
 }
@@ -126,21 +134,21 @@
   width: 230rpx;
   height: 230rpx;
   border-radius: 50%;
-  background: #fed3d4;
+  background: #b9d6fa;
 }
 .scan-bg-2{
   position: absolute;
   width: 210rpx;
   height: 210rpx;
   border-radius: 50%;
-  background: #f2635d;
+  background: #459ef7;
 }
 .scan-bg-3{
   position: absolute;
   width: 200rpx;
   height: 200rpx;
   border-radius: 50%;
-  background: #d81e07;
+  background: #0d7ee7;
 }
 .scan-container image {
   position: absolute;