|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<view class="container cashier" :style="{paddingTop:CustomBar+'px'}">
|
|
|
- <cu-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></cu-custom>
|
|
|
+ <ws-custom :systeminfo='systeminfo' :navbar-data='nvabarData' :headerBtnPosi ="headerBtnPosi" :isBackType="true" :path="'/pages/user/cart/cart'"></ws-custom>
|
|
|
<template v-if="isPaySwitch">
|
|
|
<view class="container-cash clearfix">
|
|
|
<view class="pay-bring-title">线上支付功能正在维护中,请使用线下转账方式支付订单</view>
|
|
@@ -9,7 +9,8 @@
|
|
|
<view class="pay-p"><text>待付金额</text></view>
|
|
|
<view class="pay-money">
|
|
|
<text class="pay-sm">¥</text>
|
|
|
- <text class="pay-bg">{{payableAmount | NumFormat}}</text>
|
|
|
+ <text class="pay-bg">{{showIndexOfMoney | NumFormat}}</text>
|
|
|
+ <text class="pay-sm">{{smallMoney | NumFormat}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -34,7 +35,8 @@
|
|
|
<view class="pay-p"><text>待付金额</text></view>
|
|
|
<view class="pay-money">
|
|
|
<text class="pay-sm">¥</text>
|
|
|
- <text class="pay-bg">{{payableAmount | NumFormat}}</text>
|
|
|
+ <text class="pay-bg">{{showIndexOfMoney | NumFormat}}</text>
|
|
|
+ <text class="pay-sm">{{smallMoney | NumFormat}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -56,20 +58,17 @@
|
|
|
<view class="pay-p"><text>待付金额</text></view>
|
|
|
<view class="pay-money">
|
|
|
<text class="pay-sm">¥</text>
|
|
|
- <text class="pay-bg">{{payableAmount | NumFormat}}</text>
|
|
|
+ <text class="pay-bg">{{showIndexOfMoney}}</text>
|
|
|
+ <text class="pay-sm">{{smallMoney}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="pay-check">
|
|
|
- <view class="check-title"><view class="text">选择支付方式</view></view>
|
|
|
<view class="pay-checked">
|
|
|
<view class="pay-item" :class="{ 'current' : tabCurrentIndex === 0}" @click="tabClick(0)" >
|
|
|
<view class="item-l">
|
|
|
<view class="item-icon"><text class="iconfont icon-weixinzhifu"></text></view>
|
|
|
<view class="item-texts"><text>微信支付</text></view>
|
|
|
</view>
|
|
|
- <view class="item-r">
|
|
|
- <text class="iconfont icon-duigou"></text>
|
|
|
- </view>
|
|
|
</view>
|
|
|
<view class="pay-item" :class="{ 'current' : tabCurrentIndex === 1}" @click="tabClick(1)" >
|
|
|
<view class="item-l">
|
|
@@ -79,9 +78,6 @@
|
|
|
<view class="txt-t">需要在电脑端汇款</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="item-r">
|
|
|
- <text class="iconfont icon-duigou"></text>
|
|
|
- </view>
|
|
|
</view>
|
|
|
<view class="pay-item" :class="{ 'current' : tabCurrentIndex === 2}" @click="tabClick(2)" >
|
|
|
<view class="item-l">
|
|
@@ -91,9 +87,6 @@
|
|
|
<view class="txt-t">需要在电脑端汇款</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="item-r">
|
|
|
- <text class="iconfont icon-duigou"></text>
|
|
|
- </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -140,17 +133,19 @@
|
|
|
return{
|
|
|
orderID:'',
|
|
|
payableAmount:0,
|
|
|
+ showIndexOfMoney:'0',
|
|
|
+ smallMoney:'.00',
|
|
|
emptyWrapperH: '',
|
|
|
bankNumber:'6217 6803 0362 0897',
|
|
|
payOrderId:'',
|
|
|
nvabarData: { //顶部自定义导航
|
|
|
+ haveBack:true,
|
|
|
showCapsule:1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
- showSearch: 0,
|
|
|
title: '选择支付方式', // 导航栏 中间的标题
|
|
|
- haveBack:false,
|
|
|
- haveHome:true,
|
|
|
textLeft:this.$store.state.isIphone
|
|
|
},
|
|
|
+ headerBtnPosi:this.setHeaderBtnPosi(),//获取设备顶部胶囊高度
|
|
|
+ systeminfo:this.setSysteminfo(), //获取设备信息
|
|
|
isIphoneX:this.$store.state.isIphoneX,
|
|
|
CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
tabCurrentIndex:0,
|
|
@@ -278,6 +273,22 @@
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ initAbleUserMoney(money){//拆分金额并转千分位格式显示
|
|
|
+ if(money == 0){
|
|
|
+ this.showIndexOfMoney ='0';
|
|
|
+ this.smallMoney=".00"
|
|
|
+ }else{
|
|
|
+ this.ableUserMoney = this.$api.FormatMoney(money) ;
|
|
|
+ let i = this.ableUserMoney.toString().lastIndexOf('.');
|
|
|
+ if(i==-1){
|
|
|
+ this.showIndexOfMoney=this.$api.FormatMoney( this.ableUserMoney)
|
|
|
+ this.smallMoney=".00"
|
|
|
+ }else{
|
|
|
+ this.smallMoney = this.ableUserMoney.toString().substring(i);
|
|
|
+ this.showIndexOfMoney= this.$api.FormatMoney(this.ableUserMoney.toString().substring(0,i))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
tabClick(index) {//tab切换
|
|
|
this.tabCurrentIndex = index;
|
|
|
switch(index){
|
|
@@ -312,6 +323,20 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ setHeaderBtnPosi(){
|
|
|
+ // 获得胶囊按钮位置信息
|
|
|
+ let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
|
|
|
+ return headerBtnPosi
|
|
|
+ },
|
|
|
+ setSysteminfo(){
|
|
|
+ let systeminfo;
|
|
|
+ uni.getSystemInfo({ // 获取设备信息
|
|
|
+ success: (res) => {
|
|
|
+ systeminfo = res
|
|
|
+ },
|
|
|
+ })
|
|
|
+ return systeminfo
|
|
|
+ },
|
|
|
},
|
|
|
onShow() {
|
|
|
|
|
@@ -338,39 +363,32 @@
|
|
|
color: $color-system;
|
|
|
}
|
|
|
.container-wrapper{
|
|
|
- width:662rpx;
|
|
|
+ width:100%;
|
|
|
margin: 0 auto;
|
|
|
- .pay-title{
|
|
|
- font-size: $font-size-32;
|
|
|
- line-height: 44rpx;
|
|
|
- text-align: center;
|
|
|
- color: #2A86FF;
|
|
|
- margin: 40rpx 0 0 0;
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- }
|
|
|
.pay-content{
|
|
|
- width: 574rpx;
|
|
|
- height: 136rpx;
|
|
|
- padding: 52rpx 44rpx;
|
|
|
- background: url(https://img.caimei365.com/group1/M00/03/BD/Cmis218ekFyAHoAzAALhR3oBpDI049.png) no-repeat;
|
|
|
+ width: 100%;
|
|
|
+ height: 220rpx;
|
|
|
+ background: url(https://static-b.caimei365.com/app/wisa/img/icon/pay_bg.png) no-repeat;
|
|
|
background-size: cover;
|
|
|
float: left;
|
|
|
- margin-top: 40rpx;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40rpx 84rpx;
|
|
|
.pay-p{
|
|
|
font-size: $font-size-26;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #fff3e2;
|
|
|
line-height: 36rpx;
|
|
|
}
|
|
|
.pay-money{
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 84rpx;
|
|
|
+ color: #ff9723;
|
|
|
+ line-height: 100rpx;
|
|
|
font-weight: bold;
|
|
|
.pay-sm{
|
|
|
- font-size: $font-size-26;
|
|
|
+ font-size: 42rpx;
|
|
|
+ font-weight: normal;
|
|
|
}
|
|
|
.pay-bg{
|
|
|
- font-size: 50rpx;
|
|
|
+ font-size: 64rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -405,34 +423,32 @@
|
|
|
.pay-checked{
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
.pay-item{
|
|
|
- width: 618rpx;
|
|
|
- height: 96rpx;
|
|
|
- border: 2px solid #F5F5F5;
|
|
|
- border-radius: 30rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 120rpx;
|
|
|
+ border: 1px solid #F5F5F5;
|
|
|
+ border-radius: 8rpx;
|
|
|
padding: 20rpx;
|
|
|
margin: 24rpx 0;
|
|
|
display: flex;
|
|
|
background-color: #FFFFFF;
|
|
|
+ box-sizing: border-box;
|
|
|
&.current{
|
|
|
border-color:$color-system;
|
|
|
- .item-r{
|
|
|
- .icon-duigou{
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
.item-l{
|
|
|
flex: 8;
|
|
|
.item-icon{
|
|
|
- width: 96rpx;
|
|
|
- height: 96rpx;
|
|
|
+ width: 76rpx;
|
|
|
+ height: 76rpx;
|
|
|
float: left;
|
|
|
text-align: center;
|
|
|
- line-height: 96rpx;
|
|
|
+ line-height: 76rpx;
|
|
|
margin-right: 20rpx;
|
|
|
.iconfont{
|
|
|
- font-size:88rpx;
|
|
|
+ font-size:66rpx;
|
|
|
}
|
|
|
.icon-weixinzhifu{
|
|
|
color: #09BB07;
|
|
@@ -445,12 +461,12 @@
|
|
|
}
|
|
|
}
|
|
|
.item-texts{
|
|
|
- line-height: 96rpx;
|
|
|
+ line-height: 76rpx;
|
|
|
font-size:$font-size-26;
|
|
|
color: $text-color;
|
|
|
}
|
|
|
.item-text{
|
|
|
- line-height: 48rpx;
|
|
|
+ line-height: 38rpx;
|
|
|
font-size:$font-size-26;
|
|
|
.txt-p{
|
|
|
color: $text-color;
|
|
@@ -460,15 +476,6 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .item-r{
|
|
|
- flex: 2;
|
|
|
- text-align: center;
|
|
|
- line-height: 96rpx;
|
|
|
- .icon-duigou{
|
|
|
- font-size: 60rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|