feat(component):按初稿修改订单组件

app.json

@@ -1,12 +1,13 @@
 {
   "pages": [
     
+    "components/orderItemInfo/orderItemInfo",
     "pages/scan/scan",
+    "pages/index/index",
     "pages/login/login",
     "pages/moreOrder/moreOrder",
     "pages/orderConfirm/orderConfirm",
     "pages/historyOrder/historyOrder",
-    "pages/index/index",
     "pages/login/load",
     "pages/logs/logs",
     "components/orderItem/orderItem",

components/orderItemInfo/orderItemInfo.js

@@ -0,0 +1,71 @@
+// components/orderItemInfo/orderItemInfo.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    order:{
+      type:Object,
+      value:{
+        nozzle:5,
+        status:'已授权',
+        statusColor:'#a6d53f',
+        oilName:'92#汽油',
+        volume:30,
+        amount:224.7,
+        payAmount:209.4,
+        discount:15.3,
+        orderId:'20251111111111',
+        time:'2025-01-20 18:33'
+      }
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    contentHeight: 10,
+    isHide:false,
+    rotateDeg:0
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    showOrHide(){
+      
+      const height = this.data.isHide?10:23;
+      console.log("点击了",this.data.isHide,height)
+      
+      this.setData({
+        contentHeight:height,
+        isHide:!this.data.isHide,
+        rotateDeg:this.data.rotateDeg+180
+      })
+    },
+
+    //第一个按钮的点击事件
+    buttonClick1(){
+      this.triggerEvent('bottonEvent1',{
+        order:this.properties.order,
+        event:3 //第一个按钮只会传递取消订单
+      })
+    },
+    //第二个按钮的点击事件
+    buttonClick2(){
+      /**第二个按钮会是去支付：1和去授权：2两种
+       * 当当前订单状态为未支付或者支付失败时，第二个按钮点击就是去支付，event 传递1
+       * 当当前订单状态为已失效时，第二个按钮点击就是去重新授权，event 传递2
+       */
+      var sendEvent = 1;
+      if(this.properties.order.status == "已失效") sendEvent = 2
+      this.triggerEvent('bottonEvent2',{
+        order:this.properties.order,
+        event:sendEvent
+      })
+    },
+  }
+})

components/orderItemInfo/orderItemInfo.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/orderItemInfo/orderItemInfo.wxml

@@ -0,0 +1,63 @@
+<view class="orderItemInfoContainer">
+  <!-- 订单信息 -->
+  <view class="orderInfoBox">
+    <!-- 油枪 -->
+    <view class="nozzleAndStatus">
+      <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" />
+        <view class="oilInfo">
+          <text class="oil">{{order.oilName}}</text>
+          <text class="volume">{{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="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>
+
+    <!-- 分割线 -->
+    <view class="line"></view>
+
+    <!-- 其余信息 -->
+    <view class="orderDetailInfo">
+      <view>
+        <text>交易订单号</text>
+        <text>{{order.orderId}}</text>
+      </view>
+      <view>
+        <text>时间</text>
+        <text>{{order.time}}</text>
+      </view>
+    </view>
+  </view>
+
+  <text class="botton" bind:tap="buttonClick2">去支付</text>
+
+</view>

components/orderItemInfo/orderItemInfo.wxss

@@ -0,0 +1,117 @@
+.orderItemInfoContainer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border-radius: 15rpx;
+}
+
+.orderInfoBox{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 90%;
+}
+.nozzleAndStatus{
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.nozzle{
+  font-weight: 600;
+}
+.status{
+  position: absolute;
+  font-weight: 600;
+  margin-left: 70%;
+}
+
+.orderInfo{
+  width: 100%;
+  overflow: hidden;
+  transition: height 0.3s ease-in-out; /* 添加过渡效果 */
+}
+
+.mainInfo{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.mainInfo image{
+  width: 150rpx;
+  height: 150rpx;
+  flex-grow: 1;
+}
+
+.oilInfo{
+  display: flex;
+  flex-direction: column;
+  flex-grow: 3;
+}
+.oil{
+  color: #d92610;
+  font-size: large;
+  font-weight: 550;
+  margin-bottom: 3%;
+}
+.volume{
+  color: #878787;
+  font-size: small;
+}
+
+.amountBox{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  flex-grow: 3;
+}
+.mainAmount{
+  font-size: larger;
+  font-weight: 600;
+  margin-bottom: 3%;
+}
+
+.amountBox image {
+  width: 40rpx;
+  height: 40rpx;
+  margin-top: 3%;
+  transition: transform 0.3s ease-in-out;
+}
+
+.line{
+  background-color: #e5e5e5;
+  height: 1rpx;
+  width: 105%;
+  margin: 3% 0%;
+}
+
+.orderDetailInfo{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.orderDetailInfo view{
+  display: flex;
+  justify-content: space-between;
+}
+.orderDetailInfo text{
+  color: #838383;
+  font-size: small;
+  margin: 1% 0%;
+}
+
+.botton{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #d81e07;
+  color: #FFFFFF;
+  width: 100%;
+  height: 5vh;
+  font-size: small;
+  border-radius: 0 0 15rpx 15rpx ;
+  margin-top: 3%;
+}

js/api.js

@@ -3,7 +3,7 @@ const SM4Exten = require('../js/SM4Exten');
 const miniprogramsm4 = require("../miniprogram_npm/miniprogram-sm-crypto/index").sm4;
 const secretId = "D2BCF8DE-AA24-4BF6-9C34-C8DD325E412B";//小程序应用ID
 const Secret = "6C680A47B87740138DFB299FC69A64E1";//小程序应用密钥
-const api_root = 'http://10.153.148.110:5006/'
+const api_root = 'http://10.153.148.121:5006/'
 const CurrentBuId = '12345678-9abc-def0-1234-56789abcdef0';
 
 function request(path, method = 'GET', data = null) {
@@ -20,7 +20,6 @@ function request(path, method = 'GET', data = null) {
                        "&nonce=" +  nonce +
                        "&timestamp=" + timestamp + 
                        jsonString;
-                       debugger
     console.log('加密串 :' + stringToSign);
     let key =  stringToHex(Secret);//key转16进制
     key = getFirst32Chars(key);//截取前16位
@@ -178,5 +177,6 @@ export default {
   // request_getSite,
   request_wechatPay,
   request_Wechatlogin,
-  request_GetSiteInfo
+  request_GetSiteInfo,
+  request_GetMiniProgramTransactionsUnpaidQuery
 }

pages/historyOrder/historyOrder.js

@@ -1,3 +1,5 @@
+const { default: api } = require("../../js/api");
+
 // pages/historyOrderAfter/historyOrderAfter.js
 Page({
 
@@ -185,12 +187,10 @@ Page({
       endDate:lastMouthDay
     });
 
-    this.startCountdow();
-  },
 
-  onUnload(){
+    // this.startCountdow();
-    this.endCountDown()
   },
+
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
@@ -216,7 +216,7 @@ Page({
    * 生命周期函数--监听页面卸载
    */
   onUnload() {
-
+    this.endCountDown()
   },
 
   /**
@@ -257,4 +257,13 @@ Page({
   onOrderButtonClick2(event){
     console.log(event)
   },
+
+  /** 获取订单 */
+  getOrder(){
+    api.request_GetMiniProgramTransactionsUnpaidQuery(null).then(res => {
+      console.log("未支付订单",res)
+    }).catch(err => {
+      console.log("获取未支付订单失败",err)
+    })
+  }
 })

pages/index/index.js

@@ -20,6 +20,7 @@ Page({
   onChooseAvatar(e) {
     const { avatarUrl } = e.detail
     const { nickName } = this.data.userInfo
+    console.log("获取头像",e,this.data.userInfo)
     this.setData({
       "userInfo.avatarUrl": avatarUrl,
       hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
@@ -28,12 +29,15 @@ Page({
   onInputChange(e) {
     const nickName = e.detail.value
     const { avatarUrl } = this.data.userInfo
+    
+    console.log("获取名称",e,this.data.userInfo)
     this.setData({
       "userInfo.nickName": nickName,
       hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
     })
   },
   getUserProfile(e) {
+    console.log("获取信息",e)
     // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
     wx.getUserProfile({
       desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写

pages/login/login.js

@@ -105,8 +105,23 @@ Page({
      })
     });
   },
-  handleAuthLogin() {
+  handleAuthLogin(e) {
     console.log('一键授权登录按钮被点击');
+    wx.showLoading({
+      title: '正在登录中...',
+    })
+    // if(e.detail.userInfo) {
+      wx.getUserProfile({
+        desc: '用于完善用户信息',
+        success:(res) => {
+          console.log(res.userInfo)
+        },
+        fail:(err) => {
+          console.log("获取用户信息失败",err)
+        }
+      })
+    // }
+
     // 调用微信登录接口
     wx.login({
       success(res) {
@@ -114,32 +129,22 @@ Page({
           console.log('登录成功，code:', res.code);
           api.request_Wechatlogin(res.code)
           .then(res => {
-            debugger
             wx.setStorageSync('WachatID', res.data.data)
+            wx.hideLoading()
             wx.redirectTo({
               url: '../scan/scan',
             })
           });
         } else {
+          wx.hideLoading()
           console.log('登录失败:', res.errMsg);
         }
       },
       fail(err) {
+        wx.hideLoading()
         console.error('登录接口调用失败:', err);
       },
     });
 
-    // 获取用户信息授权
-    wx.getUserProfile({
-      desc: '用于完善用户资料', // 声明获取用户信息的目的
-      success(res) {
-        console.log('用户信息:', res.userInfo);
-        // 将用户信息发送到服务器
-        // 例如：wx.request({ url: 'https://example.com/userInfo', data: res.userInfo })
-      },
-      fail(err) {
-        console.error('获取用户信息失败:', err);
-      },
-    });
   }
 })

pages/login/login.wxml

@@ -3,6 +3,7 @@
     <image src="/images/v2_sony48.svg" mode="widthFix" class="auto-image"></image>
   </view>
   <view class="action-text">立码加油</view>
+  <open-data></open-data>
   <button class="auth-button" style="width: 547rpx; height: 94rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx"  bindtap="handleAuthLogin">一键授权登录</button>
   <view class="agreement">
     <button class="auth-button"   bindtap="pay">支付</button>

pages/scan/scan.js

@@ -2,7 +2,7 @@ const { default: api } = require("../../js/api");
 
 Page({
   data: {
-    isLoggedIn: true,
+    isLoggedIn: false,
     userInfo: null,
     scanTitle:'扫码加油',
     scanTip:'请扫描加油机键盘上的二维码'
@@ -18,18 +18,27 @@ Page({
       api.request_GetSiteInfo().then(res => {
         console.log(res)
       })
-      // this.setData({
+      this.setData({
-      //   isLoggedIn: true,
+        isLoggedIn: true,
-      //   userInfo: null,
+        userInfo: null,
-      //   scanTitle:'扫码加油',
+        scanTitle:'扫码加油',
-      //   scanTip:'请扫码加油机键盘上的二维码'
+        scanTip:'请扫码加油机键盘上的二维码'
-      // })
+      })
     }
   },
 
-  handleGetUserInfo: function(e) {
+  toLoginOrOrderPage: function() {
-    wx.redirectTo({
+    if(!this.data.isLoggedIn) {
-      url: '../login/login'
+      wx.redirectTo({
-    })
+        url: '../login/login'
+      })
+    } else {
+      wx.navigateTo({
+        url: '../historyOrder/historyOrder',
+      })
+    }
+
+
+    
   }
 });

pages/scan/scan.wxml

@@ -7,12 +7,12 @@
 
   <view class="scan-box">
     <!-- 登录条 -->
-    <view class="login-container">
+    <view class="login-container" bind:tap="toLoginOrOrderPage">
       <view class="user-icon">
         <view class="user-border-unlogin" wx:if="{{!isLoggedIn}}">
           <image src="../../images/user.png" mode="aspectFit"></image>
         </view>
-        <image wx:if="{{isLoggedIn}}" src="../../images/user.png" mode="aspectFit"></image>
+        <image class="user-icon-login" wx:if="{{isLoggedIn}}" src="../../images/user.png" mode="aspectFit"></image>
       </view>
       
       <view class="user-tip" wx:if="{{!isLoggedIn}}">

pages/scan/scan.wxss

@@ -78,7 +78,7 @@
   border-radius: 50%;
   margin-right: 3%;
 }
-.user-icon image {
+.user-icon-login {
   width: 100rpx;
   height: 100rpx;
   border-radius: 50%;

project.private.config.json

@@ -5,5 +5,5 @@
     "compileHotReLoad": true,
     "urlCheck": false
   },
-  "libVersion": "2.31.1"
+  "libVersion": "3.7.7"
 }