结算页面

结算页面

app.json

 {
   "pages": [
+    "pages/balance/balance",
     "pages/operation_waiting/operation_waiting",
-    "pages/home/home",
     "pages/login/login",
+    "pages/home/home",
     "pages/index/index",
     "pages/logs/logs"
   ],
   "window": {
+    "navigationStyle": "custom",
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "WeChat",

miniprogram_npm/weui-miniprogram/half-screen-dialog/half-screen-dialog.js

@@ -149,6 +149,12 @@ Component({
 
     }
   },
+
+  lifetimes: {
+    attached() {
+      console.log('hellow ')
+    }
+  },
   methods: {
     close(e) {
       const {

pages/balance/balance.js

+// pages/balance/balance.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    payPriceYuan:"0.01"
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file

pages/balance/balance.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

pages/balance/balance.wxml

+<view class="page">
+   <view class="balance-top" >
+
+    <view class="wait-remind">请支付</view>
+    <view class="price">¥{{payPriceYuan}}</view>
+      
+   </view>
+
+  <text class="pay-guide">请选择支付方式</text> 
+
+   <view class="pay-way-container">
+
+     <view class="pay-way-item">
+      
+       <image class="pay-way-image" src="../../images/face_pay.png"/>
+       <view>刷脸支付</view>
+     </view> 
+
+     <view class="pay-way-item">
+       <image class="pay-way-image" src="../../images/qr_pay.png"/>
+       <view>扫码支付</view>
+     </view>
+
+   </view>
+</view>
\ No newline at end of file

pages/balance/balance.wxss

+.page{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.balance-top{
+   width: 100%;
+   height: 43%;
+   background-size: 100% 100%;
+   background-repeat: no-repeat;
+   display: flex;
+   flex-direction: column;
+   align-content: center;
+   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAIaBAMAAAAqyDQkAAAALVBMVEVHcEz/dgD/dwD/dwD/dwD/dgD/dwD/dwD/dwD/cgD/dwD/dwD/dgD/dgD/dwBpAiFJAAAADnRSTlMAXvTAljSs0+QNhEkhcj2mIRMAAAVaSURBVHja7dixS6NnHMDxZ3EIuAi6KC520Mmhikq3olgICDo4BK9TQloczWGcOihcMx1ZMhRcwgWHAwcHh1YDOjiIXQLXGxSXLL2pf0PTokWvd6fGJHmTfL5T5ufD8/s9b8JfilTBEQARECACAkRAgAgIEAERECACAkRAgAgIEAERECACAkRAgAgIEAERECACAkRAgAgIEAERECACAkRAgAgIEAERECACAkRAgAgIEAERECACAkRAgAgIEAERECACAkRAgAgIEAERECACAkRAgAgIEAERECACAkRAgAgIEAEBIiACAkRAgAgIEAEBIiACAkRAgAgIEAEBIiACAkRAgAgIEAEBIiACAkRAgAgIEAEBIiACAkRAgAgIEAEBIiACAkRAgAgIEAEBIiACAkRAgAgIEAEBIiACAkRAgAgIEAEBIiACAkRAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABERAgAgIEAEBIiBABASIIwAiIEAEBIiAABEQIAIiIEAEBIiAABEQIAIiIEAEBIiAABEQIAIiIEAEBIiAABEQIAIiIEAEBIiAABEQIAIiIEAEBIiAABEQIAIiIEAEBIiAABEQIAIiIEAEBIiAABEQIAIiIEAEBIiAABEQIAIiIEAEBIiAABEQIAICREAEBIiAABEQIAICREAEBIiAABEQIAICREAEBIiAABEQIAICREAEBIiAABEQIAICREAEBIiAABEQIAICREAEBIiAABEQIAICREAEBIiAABEQIAICREAEBIiAABEQIAICREAEBIiAABEQIAICRECACIiAABEQIAICRECACIiAABEQIAICRECACIiAABEQIAICRECACIiAABEQIAICRECACIiAABEQIAICRECACIiAABEQIAICRECACIiAANGjQH50BlFqM4SL+UnnEI2q3/wa/qnw/rXDaH9/fnsSbusf/MmBtLdXf+TD3WLfWybt68PNrLrfqWXSnr66M6vu1/fe5Gr5In85FL5QrGxytXaRL4eHunhjcrWolx8t8s/VP/i1w2p640uJ8PhWvnNNmro5pofCE+sb3HBuTXtWLYd6WvEObsY3x/pxqLs+26TBbV7lw/M6ffPaMTZsVCVCA+r/zbdJIz45njOqPq7wzuh63uKYHsqHxna6Z3TV/e/I1UloQrGyV1c9a7zYFI3bdfKDE35Kr4qJ0OQKw1Z8dDRuTeac9sOTqkUaNyaDTL6wxTeLy6HlFYbtk0+/cK9OQpuqmXh33Wt8veHfG099d5XnfZ/ctLN0HKJQbGXPP/Ufplu7xB/qrKeH10683YPq08NrcaMnr0YlESLbRW9dlOrm0nE+RLzYSmmuV+bUSeiQ+stdvuZ31kc6BuO/b5RuXSk1jPPQoRXKe3NdtjM672b8b3wdlGa7YdGPzxQP86FLil0Mz3fw/Kpm4iOJ0HXtHrxLdty/LNWdVOU4H7q3s4NScrtT7kWqctjNFnd2fe2ubEXZYmImfvWiNyzuLPu10b3ZyF2WiUyqeHgeerfdtdFSciMar6h4pacp7r3Czg4uF9t1XXKZ1P5Izw2ox7pcl5KtgpnIpOMVEo9aL2dHo5eLyWwzZKq5zMzC/sAhiLquzO7q0cBlaTE5u7X9LITsVHrh7XWNwZJoXL/8vrp2NDB6/ba0kE4np2az2a1cbntsbGzy339mJmu/xiZyuZ+z2ampdDq1EN+/Hhg4Wn1x3ll34W9TpHtiC2h+1AAAAABJRU5ErkJggg==);
+
+}
+
+.wait-remind {
+   width: 100%;
+   height: 56rpx;
+   font-size: 40rpx;
+   font-family: PingFangSC-Regular, PingFang SC;
+   font-weight: 400;
+   color: white;
+   line-height: 56rpx;
+   margin-top: 112rpx;
+   text-align: center;
+ }
+ 
+ .price{
+   font-size: 120rpx;
+   color: white;
+   text-align: center;
+ }
+
+ .pay-guide{
+    width: 100%;
+    margin-top: 100rpx;
+    text-align: center;
+    font-size: 45rpx;
+    color: #2E384D;
+ }
+
+.pay-way-container{
+   width: 100%;
+   display: flex;
+   flex-direction: row;
+   margin-top: 100rpx;
+   align-content: center;
+   align-items: center;
+}
+
+ .pay-way-item{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-items: center;
+ }
+
+ .pay-way-image{
+    width: 140rpx;
+    height: 140rpx;
+    margin-bottom: 40rpx;
+ }
\ No newline at end of file

pages/home/home.js

@@ -14,7 +14,6 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
   },
 
   /**
@@ -66,9 +65,14 @@ Page({
 
   },
 
+  /**
+   * 跳转待支付页面
+   */
   goToPay:function(){
+    //todo 测试
+    var payPriceYuan = "0.01";
     wx.navigateTo({
-      url: 'operation_waiting',
+      url: '/pages/operation_waiting/operation_waiting?payPriceYuan='+payPriceYuan,
     })
   }
 })
\ No newline at end of file

pages/home/home.wxml

 <!--pages/home.wxml-->
-<view class="container" style="justify-content:flex-start" onTap="goToPay">
+<view class="container" style="justify-content:flex-start" bindtap="goToPay">
   <image class="operation-position" src="{{welcomeUrl}}"/>
   <image class="miya-logo" src="{{miyaLogo}}"/>
 

pages/login/login.js

@@ -103,7 +103,6 @@ Page({
         'content-type': 'application/json' // 默认值
       },
       success (res) {
-        console.log(res)
         wx.hideLoading({
           success: (res) => {},
         })
@@ -114,6 +113,9 @@ Page({
             duration: 2000
           })
           wx.setStorageSync('accountInfo', params)
+          wx.navigateTo({
+            url: '/pages/home/home',
+          })
         }else{
           wx.showToast({
             title: res.data.msg,

pages/operation_waiting/operation_waiting.js

@@ -5,9 +5,27 @@ Page({
    * 页面的初始数据
    */
   data: {
-    waitStatus: "等待中",
-    waitingRemind: "等待收银员输入金额…",
-    hasPrice:false,
+    payCountDown: "3s",
+    waitingRemind: "请支付",
+    payPriceYuan:"0.00",
+    payCountDownTimer:null,
+
+    show: true,
+    buttons: [
+        {
+            type: 'default',
+            className: '',
+            text: '辅助操作',
+            value: 0
+        },
+        {
+            type: 'primary',
+            className: '',
+            text: '主操作',
+            value: 1
+        }
+    ]
+
   },
 
   /**
@@ -15,6 +33,43 @@ Page({
    */
   onLoad: function (options) {
 
+    var payPriceYuan = options.payPriceYuan
+    this.setData({payPriceYuan:payPriceYuan})
+   
+    //开启倒计时
+    this.startPayCountDown();
+       
+
+  },
+
+  /**
+   * 3秒倒计时结束 弹出选择支付方式
+   */
+  startPayCountDown:function(){
+    
+    this.setData({payCountDown:"3s"})
+    if (this.data.payCountDownTimer != null) {
+      clearInterval(this.data.payCountDownTimer)
+    }
+  
+    var countDown = 3;
+    var that = this;
+    var payCountDownTimer = setInterval(() => {
+        if(countDown <= 0){
+          that.setData({payCountDown:"",show:true})
+          clearInterval(payCountDownTimer)
+        }else{
+          --countDown
+          that.setData({payCountDown:countDown+"s"})
+        }
+    }, 1000);
+  },
+  
+  /**
+   * 展示支付方式弹窗
+   */
+  showPayWayDialog(){
+     
   },
 
   /**

pages/operation_waiting/operation_waiting.json

 {
-  "usingComponents": {}
-}
+  "usingComponents": {
+      "half-screen-dialog": "/miniprogram_npm/weui-miniprogram/half-screen-dialog/half-screen-dialog"
\ No newline at end of file
+    }
+  }

pages/operation_waiting/operation_waiting.wxml

 <view class="container">
-  <view class="titlebar"/>
-
+  <view class="titlebar" />
   <view class="wait-remind">{{waitingRemind}}</view>
-  <view class="price" wx:if="{{hasPrice}}"/>
-  <image src="../../images/balance.png" class="wait-icon" />
-  <view class="wait-status">{{waitStatus}}</view>
+  <view class="price">¥{{payPriceYuan}}</view>
+  <image src="../../images/balance.png" class="wait-icon" bindtap="finishInputPrice" />
+  <view class="pay-count-down">{{payCountDown}}</view>
 </view>
+

pages/operation_waiting/operation_waiting.wxss

@@ -3,27 +3,15 @@
   height: 88rpx;
 }
 
-.wait-remind {
-  width: 100%;
-  height: 56rpx;
-  font-size: 40rpx;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: rgba(46, 56, 77, 1);
-  line-height: 56rpx;
-  padding-left: 100rpx;
-  padding-right: 100rpx;
-  margin-top: 112rpx;
-  text-align: center;
-}
+
 
 .wait-icon {
   width: 574rpx;
   height: 573rpx;
-  margin-top: 224rpx;
+  margin-top: 150rpx;
 }
 
-.wait-status {
+.pay-count-down {
   width: 100%;
   height: auto;
   font-size: 32rpx;
@@ -36,3 +24,21 @@
   padding-left: 100rpx;
   padding-right: 100rpx;
 }
+.wait-remind {
+  width: 100%;
+  height: 56rpx;
+  font-size: 40rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: rgba(46, 56, 77, 1);
+  line-height: 56rpx;
+  padding-left: 100rpx;
+  padding-right: 100rpx;
+  margin-top: 112rpx;
+  text-align: center;
+}
+
+.price{
+  font-size: 80rpx;
+  color: var(--main-color);
+}
\ No newline at end of file