feat(page):新增历史订单页面

app.json

@@ -1,11 +1,13 @@
 {
   "pages": [
-    "components/orderItem/orderItem",
+    
+    "pages/historyOrder/historyOrder",
     "pages/scan/scan",
     "pages/index/index",
     "pages/login/login",
     "pages/login/load",
-    "pages/logs/logs"
+    "pages/logs/logs",
+    "components/orderItem/orderItem"
   ],
   "window": {
     "navigationBarTextStyle": "black",

components/orderItem/orderItem.js

@@ -7,39 +7,39 @@ Component({
   properties: {
     order:{
       type:Object,
-      value:{
-        oilName:'92号汽油',
-        nozzleNum:'5',
-        volume:'19.9',
-        amount:'46.8',
-        date:'2024-11-24',
-        time:'09:28',
-        status:'已授权'
-      }
+      // value:{
+      //   oilName:'92号汽油',
+      //   nozzleNum:'5',
+      //   volume:'19.9',
+      //   amount:'46.8',
+      //   date:'2024-11-24',
+      //   time:'09:28',
+      //   status:'已授权'
+      // }
     },
     statusColor:{
-      type:Object,
-      value:"#88b743"
+      type:String,
+      // value:"#88b743"
     },
     countdown:{
       type:String,
-      value:"60"
+      // value:""
     },
     buttonMessage1:{
       type:String,
-      value:"按钮一"
+      // value:"按钮一"
     },
     buttonMessage2:{
       type:String,
-      value:"按钮二"
+      // value:"按钮二"
     },
     buttonColor1:{
       type:String,
-      value:"#ee333a"
+      // value:"#ee333a"
     },
     buttonColor2:{
       type:String,
-      value:"#97c276"
+      // value:"#97c276"
     }
   },
 
@@ -64,13 +64,13 @@ Component({
     //第二个按钮的点击事件
     buttonClick2(){
       /**第二个按钮会是去支付：1和去授权：2两种
-       * 当当前订单状态为未支付时，第二个按钮点击就是去支付，event 传递1
+       * 当当前订单状态为未支付或者支付失败时，第二个按钮点击就是去支付，event 传递1
        * 当当前订单状态为已失效时，第二个按钮点击就是去重新授权，event 传递2
        */
       var sendEvent = 1;
       if(this.properties.order.status == "已失效") sendEvent = 2
-      this.triggerEvent('bottonEvent1',{
-        order:this.properties.data.order,
+      this.triggerEvent('bottonEvent2',{
+        order:this.properties.order,
         event:sendEvent
       })
     },

components/orderItem/orderItem.wxml

@@ -5,7 +5,7 @@
     <text style="margin-left: 3%;color: #a7a7a7;font-size: smaller;">{{order.date}}</text>
     <view style="margin-right: 3%;" class="timeAndStatus">
       <text style="font-weight: 600;">{{order.time}}</text>
-      <text style="color: {{statusColor}};">{{order.status}}</text>
+      <text style="color: {{statusColor}};font-size: small;">{{order.status}}</text>
     </view>
   </view>
 
@@ -20,7 +20,7 @@
         <text style="color: #ff4e0e;font-size: small;">升</text>
       </view>
     </view>
-    <text>倒计时 {{countdown}} 秒</text>
+    <text wx:if="{{countdown != ''}}">倒计时 {{countdown}} 秒</text>
   </view>
 
   <!-- 底部金额及按钮-->  
@@ -30,7 +30,25 @@
       <text>￥</text>
       <text>{{order.amount}}</text>
     </view>
-    <button style="color: {{buttonColor1}};">{{buttonMessage1}}</button>
-    <button style="color: {{buttonColor2}};">{{buttonMessage2}}</button>
+    <view class="botton">
+      <block wx:if="{{buttonMessage1 != ''}}">
+        <button 
+        style="color: {{buttonColor1}};"
+        bind:tap="buttonClick1">{{buttonMessage1}}</button>
+      </block>
+      <block wx:else>
+        <view style="width: 45%;"></view> <!-- 占位元素 -->
+      </block>
+      
+      <block wx:if="{{buttonMessage2 != ''}}">
+        <button 
+        style="color: {{buttonColor2}};"
+        bind:tap="buttonClick2">{{buttonMessage2}}</button>
+      </block>
+      <block wx:else>
+        <view style="width: 45%;"></view> <!-- 占位元素 -->
+      </block>
+    </view>
+    
   </view>
 </view>

components/orderItem/orderItem.wxss

@@ -78,8 +78,14 @@
   font-weight: 600;
 }
 
-.bottom button{
-  width: 30%;
+.botton{
+  display: flex;
+  width: 60%;
+  justify-content: space-between;
+}
+
+.botton button{
+  width: 45%;
   background-color: transparent;
   border: 1rpx solid #b6df96;
   font-weight: 500;

pages/historyOrder/historyOrder.js

@@ -0,0 +1,260 @@
+// pages/historyOrderAfter/historyOrderAfter.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    date:'',
+    startDate:'',
+    endDate:'',
+    orders:[
+      {
+        buttonMessage1:'',
+        buttonColor1:'',
+        buttonMessage2:'',
+        buttonColor2:'',
+        order:{
+          oilName:"92#",
+          nozzleNum:'5',
+          volume:'20.0',
+          amount:'46.8',
+          date:'2024-11-24',
+          time:'09:08',
+          status:'已授权'
+        },
+        statusColor:'#838282',
+        countdown:'60'
+      },
+      {
+        buttonMessage1:'取消订单',
+        buttonColor1:'#838282',
+        buttonMessage2:'重新授权',
+        buttonColor2:'#d17067',
+        order:{
+          oilName:"0#",
+          nozzleNum:'6',
+          volume:'21.0',
+          amount:'42.8',
+          date:'2024-11-24',
+          time:'09:08',
+          status:'已失效'
+        },
+        statusColor:'#838282',
+        countdown:''
+      },
+      {
+        buttonMessage1:'',
+        buttonColor1:'',
+        buttonMessage2:'重新支付',
+        buttonColor2:'#d17067',
+        order:{
+          oilName:"0#",
+          nozzleNum:'6',
+          volume:'21.0',
+          amount:'42.8',
+          date:'2024-11-24',
+          time:'09:08',
+          status:'支付失败'
+        },
+        statusColor:'#d17067',
+        countdown:''
+      },
+      {
+        buttonMessage1:'',
+        buttonColor1:'',
+        buttonMessage2:'重新支付',
+        buttonColor2:'#d17067',
+        order:{
+          oilName:"0#",
+          nozzleNum:'6',
+          volume:'21.0',
+          amount:'42.8',
+          date:'2024-11-24',
+          time:'09:08',
+          status:'支付失败'
+        },
+        statusColor:'#d17067',
+        countdown:''
+      },
+      {
+        buttonMessage1:'',
+        buttonColor1:'',
+        buttonMessage2:'重新支付',
+        buttonColor2:'#d17067',
+        order:{
+          oilName:"0#",
+          nozzleNum:'6',
+          volume:'21.0',
+          amount:'42.8',
+          date:'2024-11-24',
+          time:'09:08',
+          status:'支付失败'
+        },
+        statusColor:'#d17067',
+        countdown:''
+      },
+      {
+        buttonMessage1:'',
+        buttonColor1:'',
+        buttonMessage2:'重新支付',
+        buttonColor2:'#d17067',
+        order:{
+          oilName:"0#",
+          nozzleNum:'6',
+          volume:'21.0',
+          amount:'42.8',
+          date:'2024-11-24',
+          time:'09:08',
+          status:'支付失败'
+        },
+        statusColor:'#d17067',
+        countdown:''
+      },
+    ]
+  },
+
+  /** 获取当前日期 */
+  getNowDate(){
+    const date = new Date(); // 获取当前日期
+    const year = date.getFullYear(); // 获取年份
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，补零
+    const day = String(date.getDate()).padStart(2, '0'); // 获取日期，补零
+  
+    return `${year}-${month}-${day}`; // 拼接成 yyyy-MM-dd 格式
+  },
+  /** 获取上个月日期 */
+  getLastMouthDate(){
+    const currentDate = new Date(); // 获取当前日期
+    const year = currentDate.getFullYear(); // 当前年份
+    const month = currentDate.getMonth(); // 当前月份（0-11）
+    const day = currentDate.getDate(); // 当前日期
+
+    // 计算一个月前的日期
+    const oneMonthAgoDate = new Date(year, month - 1, day);
+
+    // 处理跨年问题（如果当前月份是 1 月，month - 1 会是 0，即上一年的 12 月）
+    // 无需额外处理，Date 对象会自动处理
+
+    // 格式化日期为 YYYY-MM-DD
+    const formattedDate = `${oneMonthAgoDate.getFullYear()}-${String(oneMonthAgoDate.getMonth() + 1).padStart(2, '0')}-${String(oneMonthAgoDate.getDate()).padStart(2, '0')}`;
+
+    return formattedDate;
+  },
+
+  /** 计算倒计时，倒计时结束后发起取消授权 */
+  startCountdow(){
+    this.timer = setInterval(() => {
+      const countDownZeroOrders = []
+      const orders = this.data.orders.map(order => {
+        if(order.countdown && order.countdown != '0') {
+          const currentCountDown = (Number(order.countdown) - 1);
+          order.countdown = currentCountDown.toString();
+          if(currentCountDown <= 0) countDownZeroOrders.push(order)
+        }
+        return order
+      })
+
+      this.setData({
+        orders:orders
+      })
+      this.toUnAnthorization(countDownZeroOrders)
+    },1000);
+  },
+
+  /** 结束倒计时 */
+  endCountDown(){
+    if(this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+  },
+  /** 发送取消授权 */
+  toUnAnthorization(orders) {
+    console.log(orders)
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    const today = this.getNowDate();
+    const lastMouthDay = this.getLastMouthDate();
+    this.setData({
+      date:today,
+      startDate:today,
+      endDate:lastMouthDay
+    });
+
+    this.startCountdow();
+  },
+
+  onUnload(){
+    this.endCountDown()
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+
+  /** 日期选择器选择时间 */
+  bindDateChange(date) {
+    this.setData({
+      date: date.detail.value
+    });
+    console.log(date)
+  },
+
+  /** 组件按钮一点击事件 */
+  onOrderButtonClick1(event){
+    console.log(event)
+  },
+
+  /** 组件按钮二点击事件 */
+  onOrderButtonClick2(event){
+    console.log(event)
+  },
+})

pages/historyOrder/historyOrder.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "orderItem":"../../components/orderItem/orderItem"
+  }
+}

pages/historyOrder/historyOrder.wxml

@@ -0,0 +1,29 @@
+<!--pages/historyOrderAfter/historyOrderAfter.wxml-->
+<view class="orderContainer">
+
+  <!-- 日期选择器 -->
+  <view class="dataSelect">
+    <text>日期选择</text>
+    <picker mode="date" value="{{date}}" bindchange="bindDateChange">
+      <text>{{date}} ></text>
+    </picker>
+  </view>
+
+  <!-- 订单列表 -->
+  <view class="order">
+    <view class="orderItem" wx:for="{{orders}}">
+      <orderItem 
+      order="{{item.order}}"
+      statusColor="{{item.statusColor}}"
+      buttonMessage1="{{item.buttonMessage1}}"
+      buttonColor1="{{item.buttonColor1}}"
+      buttonMessage2="{{item.buttonMessage2}}"
+      buttonColor2="{{item.buttonColor2}}"
+      countdown="{{item.countdown}}"
+      bind:bottonEvent1="onOrderButtonClick1"
+      bind:bottonEvent2="onOrderButtonClick2" />
+    </view>
+  </view>
+
+  <text style="color: #a1a1a1; margin: 5%">仅保留一个月的交易记录</text>
+</view>

pages/historyOrder/historyOrder.wxss

@@ -0,0 +1,28 @@
+.orderContainer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.dataSelect {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 90%;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 2% 3%;
+  border-radius: 3%;
+}
+
+.order{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 93%;
+}
+
+.orderItem {
+  width: 100%;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 1%;
+}