feat(component,page):新增支付按钮组件，新增支付页面

app.json

@@ -8,7 +8,8 @@
     "pages/login/load",
     "pages/logs/logs",
     "components/orderItem/orderItem",
-    "components/orderInfo/orderInfo"
+    "components/orderInfo/orderInfo",
+    "components/pay/pay"
   ],
   "window": {
     "navigationBarTextStyle": "black",

components/orderInfo/orderInfo.js

@@ -13,8 +13,7 @@ Component({
         volume:'19.9',
         amount:'46.8',
         date:'2024-11-24',
-        time:'09:28',
-        status:'已授权'
+        time:'09:28'
       }
     },
   },

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/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/orderConfirm/orderConfirm.js

@@ -5,6 +5,7 @@ Page({
    * 页面的初始数据
    */
   data: {
+    type:'预支付',
     order:{
       oilName:"92#",
       nozzleNum:'5',
@@ -70,5 +71,10 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+
+  /** 支付按钮点击事件 */
+  toPay(){
+    console.log("点击了支付")
   }
 })

pages/orderConfirm/orderConfirm.json

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

pages/orderConfirm/orderConfirm.wxml

@@ -1,3 +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>更多交易</button>
+  </view>
+
+  <!-- 预支付提示 -->
+  <text wx:if="{{type == '预支付'}}" class="anthorizationTip">请您先提枪后再做授权</text>
+
+  <!-- 支付按钮 -->
+  <pay class="payButton" amount="{{order.amount}}" bind:onPay="toPay" />
 </view>

pages/orderConfirm/orderConfirm.wxss

@@ -3,6 +3,7 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
+  height: 95vh;
 }
 
 .orderInfo{
@@ -10,3 +11,38 @@
   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;
+}