feat(page):修改确认支付页面为UI初稿

app.json

@@ -1,12 +1,12 @@
 {
   "pages": [
     
+    "pages/orderConfirm/orderConfirm",
     "components/orderItemInfo/orderItemInfo",
     "pages/scan/scan",
     "pages/index/index",
     "pages/login/login",
     "pages/moreOrder/moreOrder",
-    "pages/orderConfirm/orderConfirm",
     "pages/historyOrder/historyOrder",
     "pages/login/load",
     "pages/logs/logs",

components/orderItemInfo/orderItemInfo.js

@@ -19,6 +19,14 @@ Component({
         orderId:'20251111111111',
         time:'2025-01-20 18:33'
       }
+    },
+    bottonText1:{
+      type:String,
+      value:"按钮一"
+    },
+    bottonText2:{
+      type:String,
+      value:"按钮二"
     }
   },
 

components/orderItemInfo/orderItemInfo.wxml

@@ -58,6 +58,6 @@
     </view>
   </view>
 
-  <text class="botton" bind:tap="buttonClick2">去支付</text>
+  <text class="botton" bind:tap="buttonClick2">{{bottonText2}}</text>
 
 </view>

components/orderItemInfo/orderItemInfo.wxss

@@ -5,6 +5,8 @@
   justify-content: center;
   width: 100%;
   border-radius: 15rpx;
+  background-color: #FFFFFF;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .orderInfoBox{

components/pay/pay.wxss

@@ -7,7 +7,7 @@
   border-radius: 40rpx;
   padding-left: 5%;
   padding-right: 8%;
-  background-image: linear-gradient(to right, #333333 75%, #81b337 75%); /* 线性渐变 */
+  background-image: linear-gradient(to right, #333333 75%, #d81e07 75%); /* 线性渐变 */
 }
 
 .amount{

pages/orderConfirm/orderConfirm.js

@@ -8,13 +8,16 @@ Page({
     type:'后支付',
     order:{
       oilName:"92#",
-      nozzleNum:'5',
-      volume:'20.0',
-      amount:'46.8',
-      date:'2024-11-24',
-      time:'09:08',
-      status:'已授权'
+      nozzle:5,
+      volume:20.0,
+      amount:46.8,
+      payAmount:46.8,
+      discount:0.00,
+      orderId:'1',
+      time:'2025-02-20 09:08'
     },
+    oprationBtn1:'',
+    oprationBtn2:'对此订单有疑问？',
   },
 
   /**
@@ -75,7 +78,9 @@ Page({
 
   /** 后支付查看更多交易 */
   toMordOrderPage(){
-    console.log("跳转到更多交易页面");
+    wx.navigateTo({
+      url: '../moreOrder/moreOrder',
+    })
   },
 
   /** 支付按钮点击事件 */

pages/orderConfirm/orderConfirm.json

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

pages/orderConfirm/orderConfirm.wxml

@@ -1,17 +1,15 @@
 <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 class="tip">
+    <icon color="#fbac15" type="warn"/>
+    <text>请勿在油机旁使用手机</text>
   </view>
 
-  <!-- 预支付提示 -->
-  <text wx:if="{{type == '预支付'}}" class="anthorizationTip">请您先提枪后再做授权</text>
+  <!-- 订单 -->
+  <orderInfo class="orderInfo" order="{{order}}" bottonText2="{{oprationBtn2}}" bind:bottonEvent2="toMordOrderPage" />
 
+  <text class="moreOrderTip" bind:tap="toMordOrderPage">更多交易</text>
+  
   <!-- 支付按钮 -->
   <pay class="payButton" amount="{{order.amount}}" bind:onPay="toPay" />
 </view>

pages/orderConfirm/orderConfirm.wxss

@@ -4,38 +4,29 @@
   align-items: center;
   width: 100%;
   height: 95vh;
+  background-color: #f2f2f2;
 }
-
-.orderInfo{
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.afterPayTipBox{
+.tip{
   display: flex;
-  flex-direction: column;
+  align-self: flex-start;
+  margin: 3%;
   width: 100%;
-  align-items: center;
-  margin-top: 3%;
 }
-
-.afterPayTip{
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 40%;
-  justify-content: space-around;
+.tip text{
+  color: #fbac15;
+  margin-left: 3%;
 }
 
-.afterPayTip image{
-  width: 50rpx;
-  height: 50rpx;
+.orderInfo{
+  width: 90%;
+  display: flex;
+  justify-content: center;
 }
 
-.afterPayTipBox button {
-  color: #2bc675;
-  margin-top: 3%;
+.moreOrderTip{
+  color: #d81e07;
+  margin-top: 5%;
+  font-weight: 600;
 }
 
 .anthorizationTip{