|
|
@@ -0,0 +1,507 @@
|
|
|
+<template>
|
|
|
+ <view class="container cashier">
|
|
|
+ <view class="container-cash clearfix">
|
|
|
+ <view class="pay-bring-title" v-if="onlinePay == 2">{{payBringTitle}}</view>
|
|
|
+ <view class="container-wrapper">
|
|
|
+ <view class="pay-content">
|
|
|
+ <view class="pay-p"><text>待付金额</text></view>
|
|
|
+ <view class="pay-money">
|
|
|
+ <text class="pay-sm">￥</text>
|
|
|
+ <text class="pay-bg">{{payableAmount | NumFormat}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pay-bring-wrapper clearfix">
|
|
|
+ <view class="pay-bring-content">
|
|
|
+ <view class="text-v title">转账信息</view>
|
|
|
+ <view class="text-v">开户行：中信银行（深圳泰然支行）</view>
|
|
|
+ <view class="text-v">银行卡号：{{bankNumber}}</view>
|
|
|
+ <view class="text-v">户名：周仁声</view>
|
|
|
+ <view class="text-v">订单标识：{{payOrderId}} <text class="clipboard" @click.stop="clipboard(payOrderId)">复制</text></view>
|
|
|
+ <view class="text-v title">特别注意</view>
|
|
|
+ <view class="text-v bg-color">请在转账备注中填写上述订单标识，方便财务快速审核，提高发货速度</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const thorui = require('@/components/clipboard/clipboard.thorui.js')
|
|
|
+ export default{
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ orderId:'',
|
|
|
+ payableAmount:0,
|
|
|
+ emptyWrapperH: '',
|
|
|
+ bankNumber:'6217 6803 0362 0897',
|
|
|
+ payOrderId:'',
|
|
|
+ isIphoneX:this.$store.state.isIphoneX,
|
|
|
+ CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
+ tabCurrentIndex:0,
|
|
|
+ isReceiptStatus:false,
|
|
|
+ buttonText:'使用微信支付',
|
|
|
+ btnColor:'#09BB07',
|
|
|
+ receiptStatus:'',
|
|
|
+ onlinePay:1,
|
|
|
+ optionType:'',
|
|
|
+ onlinePayFlag:'',
|
|
|
+ payBringTitle:'本次交易暂不支持线上支付，请使用线下转账方式付款',
|
|
|
+ payStatusText:'使用任何一种线上支付方式支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。',
|
|
|
+ pageType:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.initData(option)
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ NumFormat(value) {
|
|
|
+ if(!value) return '0.00'
|
|
|
+ /*原来用的是Number(value).toFixed(0)，这样取整时有问题，例如0.51取整之后为1，感谢Nils指正*/
|
|
|
+ /*后来改成了 Number(value)|0,但是输入超过十一位就为负数了，具体见评论 */
|
|
|
+ var intPart = Number(value) - Number(value)%1 //获取整数部分（这里是windy93的方法）
|
|
|
+ var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
|
|
|
+ var floatPart = '.00' //预定义小数部分
|
|
|
+ var value2Array = value.toString().split('.')
|
|
|
+ //=2表示数据有小数位
|
|
|
+ if(value2Array.length == 2) {
|
|
|
+ floatPart = value2Array[1].toString() //拿到小数部分
|
|
|
+
|
|
|
+ if(floatPart.length == 1) { //补0,实际上用不着
|
|
|
+ return intPartFormat + '.' + floatPart + '0'
|
|
|
+ } else {
|
|
|
+ return intPartFormat + '.' + floatPart
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return intPartFormat + floatPart
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ initData(e){
|
|
|
+ console.log(e)
|
|
|
+ this.orderId = e.orderId
|
|
|
+ this.payOrderId ='#'+e.orderId+'#'
|
|
|
+ this.PayOrderCheckoutCounter(this.orderId)
|
|
|
+ },
|
|
|
+ PayOrderCheckoutCounter(orderId){
|
|
|
+ this.PayService.PayOrderCheckoutCounter({orderId:orderId}).then(response =>{
|
|
|
+ let data = response.data.order
|
|
|
+ this.payableAmount = data.payableAmount - data.receiptAmount //待付金额
|
|
|
+ this.receiptStatus = data.receiptStatus
|
|
|
+ this.onlinePayFlag = data.onlinePayFlag
|
|
|
+ //判断线上线下显示
|
|
|
+ if(this.optionType == 'onlinePay'){
|
|
|
+ this.onlinePay = 2
|
|
|
+ }else{
|
|
|
+ this.onlinePay = response.data.onlinePay
|
|
|
+ }
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clipboard(data) {
|
|
|
+ thorui.getClipboardData(data, (res) => {
|
|
|
+ if (res) {
|
|
|
+ this.$util.msg('复制成功',2000,true,'success')
|
|
|
+ } else {
|
|
|
+ this.$util.msg('复制失败',2000,true,'none')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page{
|
|
|
+ height: auto !important;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .container-cash{
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 250rpx;
|
|
|
+ .pay-bring-title{
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 96rpx;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ background:rgba(255,234,221,1);
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ .container-wrapper{
|
|
|
+ width:662rpx;
|
|
|
+ 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;
|
|
|
+ background-size: cover;
|
|
|
+ float: left;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ .pay-p{
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+ .pay-money{
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 84rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ .pay-sm{
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
+ .pay-bg{
|
|
|
+ font-size: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-check{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .check-title{
|
|
|
+ width: 622rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .text{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: left;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .icon{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ background: radial-gradient(circle,rgba(225,86,22,1) 0%,rgba(255,170,0,1) 67%,rgba(249,185,156,1) 100%);
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-checked{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ .pay-item{
|
|
|
+ width: 618rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ border: 2px solid #F5F5F5;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ margin: 24rpx 0;
|
|
|
+ display: flex;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ &.current{
|
|
|
+ border-color:$color-system;
|
|
|
+ .item-r{
|
|
|
+ .icon-duigou{
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-l{
|
|
|
+ flex: 8;
|
|
|
+ .item-icon{
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 96rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ .iconfont{
|
|
|
+ font-size:88rpx;
|
|
|
+ }
|
|
|
+ .icon-weixinzhifu{
|
|
|
+ color: #09BB07;
|
|
|
+ }
|
|
|
+ .icon-gerenwangyinzhifu{
|
|
|
+ color: #034582;
|
|
|
+ }
|
|
|
+ .icon-daewangyinzhuanzhang{
|
|
|
+ font-size: 68rpx;
|
|
|
+ color: #034582;
|
|
|
+ }
|
|
|
+ .icon-qiyewangyinzhifu{
|
|
|
+ color: #004889;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-texts{
|
|
|
+ line-height: 96rpx;
|
|
|
+ font-size:$font-size-26;
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ .item-text{
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size:$font-size-26;
|
|
|
+ .txt-p{
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ .txt-t{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-r{
|
|
|
+ flex: 2;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 96rpx;
|
|
|
+ .icon-duigou{
|
|
|
+ font-size: 60rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-button{
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ margin-top:30rpx;
|
|
|
+ .btn{
|
|
|
+ width: 662rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 88rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ background:$btn-confirm;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-statustext{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-top:40rpx;
|
|
|
+ .pay-statustext-inner{
|
|
|
+ width: 662rpx;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ .pay-icon{
|
|
|
+ width: 62rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ .iconfont{
|
|
|
+ color: #FF2A2A;
|
|
|
+ font-size:$font-size-36;
|
|
|
+ line-height: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-text{
|
|
|
+ width: 560rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #FF2A2A;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-bring{
|
|
|
+ width: 100%;
|
|
|
+ min-height: 190rpx;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ box-shadow:0px 3px 6px rgba(0,0,0,0.16);
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ border-radius: 30rpx 30rpx 0 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .pay-bring-line{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .line{
|
|
|
+ display: inline-block;
|
|
|
+ width: 48rpx;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #707070;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-bring-content{
|
|
|
+ width: 654rpx;
|
|
|
+ height: auto;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .text{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #666;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ &.bg-color{
|
|
|
+ color: $color-system;
|
|
|
+ line-height: 88rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-v{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #999;
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: left;
|
|
|
+ &.title{
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ &.bg-color{
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ .clipboard{
|
|
|
+ width: 84rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background:linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-bring-wrapper{
|
|
|
+ width: 100%;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .pay-bring-content{
|
|
|
+ width: 654rpx;
|
|
|
+ height: auto;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .text{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #666;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ &.bg-color{
|
|
|
+ color: $color-system;
|
|
|
+ line-height: 88rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-v{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #999;
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: left;
|
|
|
+ &.title{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ &.bg-color{
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ .clipboard{
|
|
|
+ width: 84rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background:linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .freight-alert{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0,0,0,.5);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 8888;
|
|
|
+ transition: all 0.4s;
|
|
|
+ &.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ width: 422rpx;
|
|
|
+ height:434rpx;
|
|
|
+ position: absolute;
|
|
|
+ background: $bg-color;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ top: 0;
|
|
|
+ margin: auto;
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ .title{
|
|
|
+ width: 100%;
|
|
|
+ height: 68rpx;
|
|
|
+ line-height: 68rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ .icon-iconfontguanbi{
|
|
|
+ width: 68rpx;
|
|
|
+ height: 68rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 68rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ font-size: $font-size-36;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-content{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ .text{
|
|
|
+ padding: 20rpx 0;
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color:#666666;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ .text-p{
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color:$color-system;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
