|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <view class="container cashier" @touchmove.stop.prevent="discard" @tap="hideKeyboard">
|
|
|
+ <view class="container cashier" @touchmove.stop.prevent="discard" @tap="hideKeyboard" v-show="isRepuest">
|
|
|
<cu-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></cu-custom>
|
|
|
<view class="container-cash clearfix" :style="{marginTop:CustomBar+'px'}">
|
|
|
<view class="container-wrapper">
|
|
|
@@ -7,11 +7,17 @@
|
|
|
<view class="pay-top">
|
|
|
<view class="pay-paid">
|
|
|
<text class="txt-m">待付金额</text>
|
|
|
- <text class="txt-b">￥{{payableAmount.toFixed(2)}}</text>
|
|
|
+ <text class="txt-b"><text class="small">￥</text>{{payableAmount.toFixed(2)}}</text>
|
|
|
</view>
|
|
|
- <view class="pay-paid">
|
|
|
- <text class="txt-m">已支付金额</text>
|
|
|
- <text class="txt-b">￥{{receiptAmount.toFixed(2)}}</text>
|
|
|
+ <view class="pay-payd">
|
|
|
+ <view class="pay-paids">
|
|
|
+ <text class="txt-m">应付总额</text>
|
|
|
+ <text class="txt-b">￥{{payTotalFee.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="pay-paids">
|
|
|
+ <text class="txt-m">已支付金额</text>
|
|
|
+ <text class="txt-b">￥{{receiptAmount.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="pay-bot">
|
|
|
@@ -31,7 +37,7 @@
|
|
|
placeholder-class="placeholder"/>
|
|
|
</view>
|
|
|
<view class="bot-resid">
|
|
|
- <text>订单剩余￥{{balanceAmount.toFixed(2)}}</text>
|
|
|
+ <text>应付剩余￥{{balanceAmount.toFixed(2)}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -93,16 +99,18 @@
|
|
|
return{
|
|
|
orderID:'',
|
|
|
payType:'',
|
|
|
+ isRepuest:false,
|
|
|
payableAmount:0,
|
|
|
receiptAmount:0,
|
|
|
balanceAmount:0,
|
|
|
+ payTotalFee:0,
|
|
|
payAmount:0,
|
|
|
nvabarData: { //顶部自定义导航
|
|
|
showCapsule:1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
showSearch: 0,
|
|
|
title: '收银台', // 导航栏 中间的标题
|
|
|
haveBack:true,
|
|
|
- textLeft:this.$store.state.isIphoneX
|
|
|
+ textLeft:this.$store.state.isIphone
|
|
|
},
|
|
|
idCardList:[],
|
|
|
isIphoneX:this.$store.state.isIphoneX,
|
|
|
@@ -138,8 +146,9 @@
|
|
|
},
|
|
|
GetPayOrderInfo(){
|
|
|
PayOrderCheckoutCounter({orderId:this.orderID}).then(response =>{
|
|
|
- console.log(response)
|
|
|
+ this.isRepuest = true
|
|
|
this.discernReceipt = response.data.discernReceipt //支付记录
|
|
|
+ this.payTotalFee = response.data.order.payTotalFee //已付金额
|
|
|
this.receiptAmount = response.data.order.receiptAmount //已付金额
|
|
|
this.payableAmount = response.data.order.payableAmount - this.receiptAmount //待付金额
|
|
|
this.payAmount = this.payableAmount.toFixed(2) //自定义金额
|
|
|
@@ -276,7 +285,7 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- page{height: auto !important;background-color: #F7F7F7;}
|
|
|
+ page{height: auto !important;background-color: #FFFFFF;}
|
|
|
.container-cash{
|
|
|
width: 100%;
|
|
|
.container-wrapper{
|
|
|
@@ -284,20 +293,22 @@
|
|
|
margin: 0 auto;
|
|
|
.pay-content{
|
|
|
width: 662rpx;
|
|
|
- height: 512rpx;
|
|
|
- padding: 48rpx 44rpx;
|
|
|
- background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/05/%E6%94%B6%E9%93%B6%E5%8F%B0bg%402x.png) no-repeat;
|
|
|
+ height: 420rpx;
|
|
|
+ padding: 64rpx 44rpx 0 44rpx;
|
|
|
+ background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/05/bg%403x.png) no-repeat;
|
|
|
background-size: cover;
|
|
|
float: left;
|
|
|
+ position: relative;
|
|
|
.pay-top{
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 44rpx;
|
|
|
.pay-paid{
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
margin-bottom: 38rpx;
|
|
|
text{
|
|
|
- display: inline-block;
|
|
|
line-height: 48rpx;
|
|
|
text-align: left;
|
|
|
color: #FFFFFF;
|
|
|
@@ -306,9 +317,39 @@
|
|
|
.txt-m{
|
|
|
font-size: $font-size-26;
|
|
|
opacity: 0.7;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
.txt-b{
|
|
|
- font-size: $font-size-32;
|
|
|
+ font-size: $font-size-48;
|
|
|
+ display: inline-block;
|
|
|
+ .small{
|
|
|
+ font-size: $font-size-32;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-payd{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ .pay-paids{
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-right: 48rpx;
|
|
|
+ text{
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: left;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .txt-m{
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+ .txt-b{
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: $font-size-32;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -317,7 +358,11 @@
|
|
|
height: 184rpx;
|
|
|
padding: 24rpx;
|
|
|
background: #FFFFFF;
|
|
|
- border-radius: 10rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ box-shadow:0 2px 6px rgba(255, 77, 0, .17);
|
|
|
+ position: absolute;
|
|
|
+ bottom: -92rpx;
|
|
|
+ left:44rpx;
|
|
|
.bot-title{
|
|
|
line-height: 36rpx;
|
|
|
font-size: $font-size-26;
|
|
|
@@ -359,6 +404,7 @@
|
|
|
font-size: $font-size-26;
|
|
|
color: #666666;
|
|
|
margin-top: 24rpx;
|
|
|
+ color: $color-system;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -368,6 +414,7 @@
|
|
|
width: 702rpx;
|
|
|
height: auto;
|
|
|
padding: 0 24rpx;
|
|
|
+ margin-top: 112rpx;
|
|
|
.record-title{
|
|
|
width: 100%;
|
|
|
float: left;
|
