feat(component):新增订单信息组件，用于订单支付确认显示

app.json

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

components/orderInfo/orderInfo.js

@@ -0,0 +1,35 @@
+// 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',
+        status:'已授权'
+      }
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  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;
+}

pages/orderConfirm/orderConfirm.js

@@ -0,0 +1,74 @@
+// pages/orderConfirm/orderConfirm.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    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() {
+
+  }
+})

pages/orderConfirm/orderConfirm.json

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

pages/orderConfirm/orderConfirm.wxml

@@ -0,0 +1,3 @@
+<view class="orderConfirmContainer">
+  <orderInfo class="orderInfo" order="{{order}}"></orderInfo>
+</view>

pages/orderConfirm/orderConfirm.wxss

@@ -0,0 +1,12 @@
+.orderConfirmContainer{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.orderInfo{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}