feat(componets):自定义orderItem组件

app.json

@@ -1,6 +1,6 @@
 {
   "pages": [
-    
+    "components/orderItem/orderItem",
     "pages/scan/scan",
     "pages/index/index",
     "pages/login/login",

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:Object,
+      value:"#88b743"
+    },
+    countdown:{
+      type:String,
+      value:"60"
+    },
+    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('bottonEvent1',{
+        order:this.properties.data.order,
+        event:sendEvent
+      })
+    },
+  }
+})

components/orderItem/orderItem.json

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

components/orderItem/orderItem.wxml

@@ -0,0 +1,36 @@
+<!--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 style="color: {{statusColor}};">{{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>倒计时 {{countdown}} 秒</text>
+  </view>
+
+  <!-- 底部金额及按钮-->  
+  <view class="bottom">
+    <view class="amount">
+      <text>金额</text>
+      <text>￥</text>
+      <text>{{order.amount}}</text>
+    </view>
+    <button style="color: {{buttonColor1}};">{{buttonMessage1}}</button>
+    <button style="color: {{buttonColor2}};">{{buttonMessage2}}</button>
+  </view>
+</view>

components/orderItem/orderItem.wxss

@@ -0,0 +1,90 @@
+.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;
+}
+
+.bottom button{
+  width: 30%;
+  background-color: transparent;
+  border: 1rpx solid #b6df96;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+}

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>