Merge branch 'feature/后支付订单静态页面' into develop

app.json

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

components/orderInfo/orderInfo.js

@@ -0,0 +1,34 @@
+// components/orderInfo/orderInfo.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    order:{
+      type:Object,
+      value:{
+        oilName:'92号汽油',
+        nozzleNum:'5',
+        volume:'19.9',
+        amount:'46.8',
+        date:'2024-11-24',
+        time:'09:28'
+      }
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/orderInfo/orderInfo.json

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

components/orderInfo/orderInfo.wxml

@@ -0,0 +1,30 @@
+<!-- 订单信息 -->
+<view class="orderItemContainer">
+    <!-- 时间 -->
+    <view class="dateTime">
+      <text style="margin-left: 3%;color: #a7a7a7;font-size: smaller;">{{order.date}}</text>
+      <text style="font-weight: 600;margin-right: 3%;">{{order.time}}</text>
+    </view>
+
+    <!-- 中间订单信息 -->
+    <view class="middle">
+      <image src="../../images/oil.svg" 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="volume">{{order.volume}}</text>
+          <text style="color: #ff4e0e;font-size: small;">升</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部金额-->  
+    <view class="bottom">
+      <view class="amount">
+        <text>合计</text>
+        <text>￥</text>
+        <text>{{order.amount}}</text>
+      </view>
+    </view>
+  </view>

components/orderInfo/orderInfo.wxss

@@ -0,0 +1,76 @@
+.orderItemContainer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 90%;
+  margin-top: 5%;
+  margin-bottom: 3%;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 3%;
+  padding: 2% 2%;
+}
+
+.dateTime {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.middle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 90%;
+  border-bottom: 2rpx dashed #e1e1e2;
+}
+
+.middle image{
+  width: 150rpx;
+  height: 150rpx;
+}
+
+.orderInfo{
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.nozzleAndVolume{
+  display: flex;
+  width: 60%;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 3%;
+}
+
+.nozzle {
+  color: #ffffff;
+  font-weight: 600;
+  font-size: small;
+  background-color: #ca5a50;
+  border-radius: 10%;
+}
+
+.volume {
+  color: #ff4e0e;
+  font-size: large;
+}
+
+.bottom {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 5%;
+  width: 90%;
+}
+
+.amount {
+  display: flex;
+  flex-direction: row;
+  font-weight: 600;
+}

components/orderItem/orderItem.js

@@ -0,0 +1,78 @@
+// components/orderItem/orderItem.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    order:{
+      type:Object,
+      // value:{
+      //   oilName:'92号汽油',
+      //   nozzleNum:'5',
+      //   volume:'19.9',
+      //   amount:'46.8',
+      //   date:'2024-11-24',
+      //   time:'09:28',
+      //   status:'已授权'
+      // }
+    },
+    statusColor:{
+      type:String,
+      // value:"#88b743"
+    },
+    countdown:{
+      type:String,
+      // value:""
+    },
+    buttonMessage1:{
+      type:String,
+      // value:"按钮一"
+    },
+    buttonMessage2:{
+      type:String,
+      // value:"按钮二"
+    },
+    buttonColor1:{
+      type:String,
+      // value:"#ee333a"
+    },
+    buttonColor2:{
+      type:String,
+      // value:"#97c276"
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    //第一个按钮的点击事件
+    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/orderItem/orderItem.json

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

components/orderItem/orderItem.wxml

@@ -0,0 +1,54 @@
+<!--components/orderItem/orderItem.wxml-->
+<view class="orderItemContainer">
+  <!-- 时间 -->
+  <view class="dateTime">
+    <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 wx:if="{{order.status != ''}}" style="color: {{statusColor}};font-size: small;">{{order.status}}</text>
+    </view>
+  </view>
+
+  <!-- 中间订单信息 -->
+  <view class="middle">
+    <image src="../../images/oil.svg" 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="volume">{{order.volume}}</text>
+        <text style="color: #ff4e0e;font-size: small;">升</text>
+      </view>
+    </view>
+    <text wx:if="{{countdown != ''}}">倒计时 {{countdown}} 秒</text>
+  </view>
+
+  <!-- 底部金额及按钮-->  
+  <view class="bottom">
+    <view class="amount">
+      <text>金额</text>
+      <text>￥</text>
+      <text>{{order.amount}}</text>
+    </view>
+    <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

@@ -0,0 +1,96 @@
+.orderItemContainer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: 3%;
+  margin-bottom: 3%;
+}
+
+.dateTime {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.timeAndStatus{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.middle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 90%;
+  border-bottom: 2rpx dashed #e1e1e2;
+}
+
+.middle image{
+  width: 150rpx;
+  height: 150rpx;
+}
+
+.orderInfo{
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.nozzleAndVolume{
+  display: flex;
+  width: 60%;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 3%;
+}
+
+.nozzle {
+  color: #ffffff;
+  font-weight: 600;
+  font-size: small;
+  background-color: #ca5a50;
+  border-radius: 10%;
+}
+
+.volume {
+  color: #ff4e0e;
+  font-size: large;
+}
+
+.bottom {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 5%;
+  width: 90%;
+}
+
+.amount {
+  display: flex;
+  flex-direction: row;
+  font-weight: 600;
+}
+
+.botton{
+  display: flex;
+  width: 60%;
+  justify-content: space-between;
+}
+
+.botton button{
+  width: 45%;
+  background-color: transparent;
+  border: 1rpx solid #b6df96;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+}

components/pay/pay.js

@@ -0,0 +1,29 @@
+// components/pay/pay.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    amount:{
+      type:String,
+      value:'46.8'
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    toPay(){
+      this.triggerEvent("onPay");
+    }
+  }
+})

components/pay/pay.json

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

components/pay/pay.wxml

@@ -0,0 +1,4 @@
+<view class="payContainer">
+  <view class="amount">合计 ￥ {{amount}}</view>
+  <view class="toPay" bind:tap="toPay">去支付</view>
+</view>

components/pay/pay.wxss

@@ -0,0 +1,24 @@
+
+.payContainer{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 80rpx;
+  border-radius: 40rpx;
+  padding-left: 5%;
+  padding-right: 8%;
+  background-image: linear-gradient(to right, #333333 75%, #81b337 75%); /* 线性渐变 */
+}
+
+.amount{
+  color: #eaf3fa;
+  display: flex;
+  justify-content: start;
+}
+
+.toPay{
+  color: #eaf3fa;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: end;
+}

images/oil.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="94" height="94" style="" filter="none">
+    
+    <g>
+    <defs fill="rgba(16,16,16,1)"><style fill="rgba(16,16,16,1)">.cls-1 {fill: #4895ef;}.cls-2 {fill: #135891;}.cls-3 {fill: none;}.cls-4 {fill: #82bbf0;}</style></defs><rect class="cls-2" x="9.28" y="4" width="4.8" height="3.36" rx="1.04" ry="1.04" fill="rgba(16,16,16,1)"></rect><path class="cls-3" d="m18.7,9.2c-.38-.45-1.05-.52-1.51-.14-.45.38-.52,1.05-.14,1.51l3.34,4.05c.38.45,1.05.52,1.51.14.45-.38.52-1.05.14-1.51l-3.34-4.05Z" fill="rgba(16,16,16,1)"></path><path class="cls-4" d="m24.64,13.96c0-.43-.15-.86-.44-1.19l-5.25-6.2c-.35-.41-.86-.65-1.4-.65h-8.35c-1.01,0-1.84.82-1.84,1.84v16.88h17.28v-10.68Zm-2.75.8c-.45.38-1.13.31-1.51-.14l-3.34-4.05c-.38-.45-.31-1.13.14-1.51.45-.38,1.13-.31,1.51.14l3.34,4.05c.38.45.31,1.13-.14,1.51Z" fill="rgba(16,16,16,1)"></path><path class="cls-2" d="m9.2,28h13.61c1.01,0,1.84-.82,1.84-1.84v-1.52H7.36v1.52c0,1.01.82,1.84,1.84,1.84Z" fill="rgba(16,16,16,1)"></path><path class="cls-1" d="m14.56,18.27c0,1.07-.87,1.94-1.94,1.94s-1.94-.87-1.94-1.94,1.94-4.19,1.94-4.19c0,0,1.94,3.12,1.94,4.19Z" fill="rgba(16,16,16,1)"></path>
+    </g>
+  </svg>

images/question.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="36" height="36" style="" filter="none">
+    
+    <g>
+    <path d="M16 1.984c-7.744 0-13.984 6.272-13.984 14.016s6.24 14.016 13.984 14.016 14.016-6.272 14.016-14.016-6.272-14.016-14.016-14.016zM17.6 25.728c-0.672 0.096-1.344 0.16-1.984 0.16-0.672 0-1.344-0.064-2.016-0.16-0.096-0.672-0.16-1.344-0.16-2.016s0.064-1.312 0.16-2.016c0.672-0.096 1.344-0.16 1.984-0.16 0.672 0 1.344 0.064 2.016 0.16 0.128 0.704 0.16 1.376 0.16 2.016 0 0.672-0.032 1.344-0.16 2.016zM21.248 13.888c-0.31 0.615-0.718 1.136-1.21 1.563l-0.006 0.005c-0.405 0.399-0.868 0.74-1.376 1.009l-0.032 0.015c-0.48 0.288-0.896 0.48-1.184 0.608v2.464c-0.64 0.096-1.248 0.16-1.856 0.16s-1.152-0.064-1.696-0.16v-4.672c0.416-0.064 0.832-0.192 1.312-0.32 0.475-0.137 0.89-0.334 1.264-0.586l-0.016 0.010c0.378-0.215 0.69-0.506 0.922-0.854l0.006-0.010c0.256-0.352 0.384-0.8 0.384-1.344 0-0.768-0.288-1.344-0.864-1.76-0.544-0.416-1.312-0.608-2.24-0.608-0.384 0-0.704 0-1.024 0.032-0.314 0.028-0.598 0.073-0.875 0.136l0.043-0.008c-0.224 0.064-0.512 0.128-0.768 0.224s-0.544 0.16-0.832 0.288c-0.256-0.48-0.448-0.96-0.64-1.472-0.151-0.471-0.254-1.017-0.287-1.582l-0.001-0.018c0.48-0.16 0.928-0.288 1.312-0.416s0.8-0.192 1.184-0.288c0.352-0.064 0.736-0.128 1.12-0.128 0.384-0.032 0.8-0.064 1.216-0.064 2.208 0 3.84 0.512 4.96 1.504 1.088 0.992 1.664 2.336 1.664 4.064 0 0.864-0.16 1.6-0.48 2.208z" fill="rgba(129,179,55,1)"></path>
+    </g>
+  </svg>

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%;
+}

pages/moreOrder/moreOrder.js

@@ -0,0 +1,145 @@
+// pages/moreOrder/moreOrder.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    orders:[
+      {
+        buttonMessage2:'去支付',
+        buttonColor2:'#91cdcc',
+        order:{
+          oilName:"92#",
+          nozzleNum:'5',
+          volume:'20.0',
+          amount:'46.8',
+          date:'2024-11-24',
+          time:'09:08'
+        }
+      },
+      {
+        buttonMessage2:'去支付',
+        buttonColor2:'#91cdcc',
+        order:{
+          oilName:"92#",
+          nozzleNum:'5',
+          volume:'20.0',
+          amount:'46.8',
+          date:'2024-11-24',
+          time:'09:08'
+        }
+      },
+      {
+        buttonMessage2:'去支付',
+        buttonColor2:'#91cdcc',
+        order:{
+          oilName:"92#",
+          nozzleNum:'5',
+          volume:'20.0',
+          amount:'46.8',
+          date:'2024-11-24',
+          time:'09:08'
+        }
+      },
+      {
+        buttonMessage2:'去支付',
+        buttonColor2:'#91cdcc',
+        order:{
+          oilName:"92#",
+          nozzleNum:'5',
+          volume:'20.0',
+          amount:'46.8',
+          date:'2024-11-24',
+          time:'09:08'
+        }
+      },
+      {
+        buttonMessage2:'去支付',
+        buttonColor2:'#91cdcc',
+        order:{
+          oilName:"92#",
+          nozzleNum:'5',
+          volume:'20.0',
+          amount:'46.8',
+          date:'2024-11-24',
+          time:'09:08'
+        }
+      },
+      {
+        buttonMessage2:'去支付',
+        buttonColor2:'#91cdcc',
+        order:{
+          oilName:"92#",
+          nozzleNum:'5',
+          volume:'20.0',
+          amount:'46.8',
+          date:'2024-11-24',
+          time:'09:08'
+        }
+      },
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+  
+  /** 点击去支付 */
+  toPay(event) {
+    console.log(event)
+    //跳转回支付页
+  }
+})

pages/moreOrder/moreOrder.json

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

pages/moreOrder/moreOrder.wxml

@@ -0,0 +1,11 @@
+<view class="moreOrderContainer">
+  <view class="order" wx:for="{{orders}}">
+    <orderItem class="orderItem"
+    order="{{item.order}}" 
+    buttonMessage2="{{item.buttonMessage2}}"
+    buttonColor="{{item.buttonColor2}}"
+    bind:bottonEvent2="toPay" />
+  </view>
+
+  <text style="margin-top: 3%;margin-bottom: 10%;color: #b29a9a;">没有找到？请联系油站工作人员</text>
+</view>

pages/moreOrder/moreOrder.wxss

@@ -0,0 +1,18 @@
+.moreOrderContainer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.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);
+  margin: 3%;
+  border-radius: 1%;
+}

pages/orderConfirm/orderConfirm.js

@@ -0,0 +1,85 @@
+// pages/orderConfirm/orderConfirm.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    type:'后支付',
+    order:{
+      oilName:"92#",
+      nozzleNum:'5',
+      volume:'20.0',
+      amount:'46.8',
+      date:'2024-11-24',
+      time:'09:08',
+      status:'已授权'
+    },
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+
+  /** 后支付查看更多交易 */
+  toMordOrderPage(){
+    console.log("跳转到更多交易页面");
+  },
+
+  /** 支付按钮点击事件 */
+  toPay(){
+    console.log("点击了支付")
+  }
+})

pages/orderConfirm/orderConfirm.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "orderInfo":"../../components/orderInfo/orderInfo",
+    "pay":"../../components/pay/pay"
+  }
+}

pages/orderConfirm/orderConfirm.wxml

@@ -0,0 +1,17 @@
+<view class="orderConfirmContainer">
+  <orderInfo class="orderInfo" order="{{order}}"></orderInfo>
+  <!-- 后支付提示 -->
+  <view wx:if="{{type == '后支付'}}" class="afterPayTipBox">
+    <view class="afterPayTip">
+      <image src="../../images/question.svg"/>
+      <text>不是我的交易？</text>
+    </view>
+    <button bind:tap="toMordOrderPage">更多交易</button>
+  </view>
+
+  <!-- 预支付提示 -->
+  <text wx:if="{{type == '预支付'}}" class="anthorizationTip">请您先提枪后再做授权</text>
+
+  <!-- 支付按钮 -->
+  <pay class="payButton" amount="{{order.amount}}" bind:onPay="toPay" />
+</view>

pages/orderConfirm/orderConfirm.wxss

@@ -0,0 +1,48 @@
+.orderConfirmContainer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 95vh;
+}
+
+.orderInfo{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.afterPayTipBox{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+  margin-top: 3%;
+}
+
+.afterPayTip{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 40%;
+  justify-content: space-around;
+}
+
+.afterPayTip image{
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.afterPayTipBox button {
+  color: #2bc675;
+  margin-top: 3%;
+}
+
+.anthorizationTip{
+  color: #9f9cb7;
+  margin: 3%;
+}
+.payButton{
+  width: 95%;
+  margin-top: auto;
+}