caimei-applets-weisha/pages/user/order/order-payment.vue

<template>
	<view class="container cashier" :style="{paddingTop:CustomBar+'px'}">
		<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>
				<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">{{ showIndexOfMoney }}</text>
							<text class="pay-sm">{{ smallMoney }}</text>
						</view>
					</view>
				</view>
				<view class="pay-bring-wrapper clearfix">
					<view class="pay-bring-content">
						<view class="text-v title"><text class="line"></text>转账信息</view>
						<view class="text-v">开户行：中信银行（深圳泰然支行）</view>
						<view class="text-v">银行卡号：{{ bankNumber }}</view>
						<view class="text-v">户名：周仁声</view>
					</view>
				</view>
			</view>		
		</template>
		<template v-else>
			<!-- 有发票 -->
			<view class="container-cash clearfix" v-if="invoiceStatus">
				<view class="pay-bring-title">
					<text class="iconfont icon-tongzhi"></text>
					{{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">{{ showIndexOfMoney }}</text>
							<text class="pay-sm">{{ smallMoney }}</text>
						</view>
					</view>
				</view>
				<view class="pay-bring-wrapper clearfix">
					<view class="pay-bring-content">
						<view class="text-v title"><text class="line"></text>转账信息</view>
						<view class="text-v">开户行：<text class="span">中信银行（深圳泰然支行）</text></view>
						<view class="text-v">银行卡号：<text class="span">{{ bankNumber }}</text> </view>
						<view class="text-v">户名： <text class="span">周仁声</text></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 class="container-cash clearfix" v-else>
				<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">{{showIndexOfMoney}}</text>
							<text class="pay-sm">{{smallMoney}}</text>
						</view>
					</view>
					<view class="pay-check">
						<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>
							<view  class="pay-item" :class="{ current : tabCurrentIndex === 1}"   @click="tabClick(1)" >
								<view class="item-l">
									<view class="item-icon"><text class="iconfont icon-qiyewangyinzhifu"></text></view>
									<view class="item-text">
										<view class="txt-p">企业网银支付</view>
										<view class="txt-t">需要在电脑端汇款</view>
									</view>
								</view>
							</view>
							<view  class="pay-item" :class="{ current : tabCurrentIndex === 2}"   @click="tabClick(2)" >
								<view class="item-l">
									<view class="item-icon"><text class="iconfont icon-gerenwangyinzhifu"></text></view>
									<view class="item-text">
										<view class="txt-p">个人网银支付</view>
										<view class="txt-t">需要在电脑端汇款</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pay-button">
					<view class="btn" @click.stop="goOrderCash" :style="{'background':btnColor}">{{buttonText}}</view>
				</view>
				<view class="pay-statustext">
					<view class="pay-statustext-inner">
						<view class="pay-icon">
							<text class="iconfont icon-gantanhao-yuankuang"></text>
						</view>
						<view class="pay-text">
							<text>{{payStatusText}}</text>
						</view>
					</view>
				</view>
				<view class="pay-bring clearfix" :style="{paddingBottom:isIphoneX ? '68rpx' : '24rpx'}" @click.stop="showTips" v-if="isReceiptStatus">
					<view class="pay-bring-line"><text class="line"></text></view>
					<view class="pay-bring-content" v-if="!isShowTip">
						<view class="text bg-color">查看转账信息</view>
						<view class="text">除了以上两种支付方式</view>
						<view class="text">您还可以通过线下转账的方式付款</view>
					</view>
					<view class="pay-bring-content" v-else>
						<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 class="alert spec" :class="specClass" v-if="isHttpUrlShowTip">
				<view class="freight-alert"  @tap="hideTips">
					<view class="content">
						<view class="title">
							<text>支付链接</text>
							<text class="iconfont icon-iconfontguanbi" @click.stop="hideTips"></text>
						</view>
						<view class="text-content">
							<view class="text">请复制以下链接，并发送至电脑端，在浏览器访问该链接并选择银行尽快完成支付</view>
							<view class="text-p">{{payHttpUrl}}</view>
							<view class="text-b">链接有效期为24小时</view>
						</view>
						<view class="text-button" @click.stop="clipboard(payHttpUrl)">复制链接</view>
					</view>
				</view>
			</view> -->
		</template>
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js'
	import thorui from "@/components/clipboard/clipboard.thorui.js"
	export default{
		data(){
			return{
				orderId:'',			//订单id
				payableAmount:0,	//待付款金额
				ableUserMoney:'',	
				showIndexOfMoney:'0',
				smallMoney:'.00',
				emptyWrapperH: '',
				bankNumber:'6217 6803 0362 0897',
				payorderId:'',
				nvabarData: {				//顶部自定义导航
					haveBack:true,
					showCapsule:1, 			// 是否显示左上角图标  1表示显示  0表示不显示,
					title: '选择支付方式',  	// 导航栏 中间的标题
					textLeft:this.$store.state.isIphone
				},
				headerBtnPosi:this.setHeaderBtnPosi(),	//获取设备顶部胶囊高度
				systeminfo:this.setSysteminfo(),		//获取设备信息
				isIphoneX:this.$store.state.isIphoneX,
				CustomBar:this.CustomBar,				// 顶部导航栏高度
				tabCurrentIndex:0,
				isShowTip:false,
				isReceiptStatus:false,
				buttonText:'使用微信支付',
				btnColor:'#09BB07',
				receiptStatus:'',
				invoiceStatus:false,
				isPaySwitch:false,
				optionType:'',
				onlinePayFlag:'',
				payBringTitle:'本次交易暂不支持线上支付，请使用线下转账方式付款',
				payStatusText:'使用微信和网银支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。若着急发货，可以选择使用线下转账进行付款。',
				pageType:'',
				payType:'',
				// isHttpUrlShowTip:false,
				isUnbindWxPay:true
			}
		},
		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){
				this.orderId = e.orderId;
				console.log(e);
				this.payorderId ='#'+e.orderId+'#';
				this.optionType = e.type;
				switch(e.type){
					// 选择支付方式
					case 'payfirm':
						this.nvabarData.haveBack = true
						this.nvabarData.haveHome = false
						this.nvabarData.title = '选择支付方式'
						this.PayOrderOnLineSwitch()
						this.PayOrderCheckoutCounter(this.orderId)
						break;
					// 如果当前订单已经通过线下付款支付了部分款项，剩下的款项就只能通过线下支付
					case 'onlinePay':
						this.invoiceStatus = true
						this.isPaySwitch = false
						this.nvabarData.haveBack = true
						this.nvabarData.haveHome = false
						this.nvabarData.title = '付款提示'
						this.payableAmount = this.ableUserMoney = e.Amount
						this.payBringTitle = '您已通过线下转账的方式支付了订单部分款项，剩余款项依然需要使用线下转账方式，给您带来的不便敬请谅解'
						this.initAbleUserMoney(this.payableAmount)
						break;
				}
			},
			//线上支付开关
			PayOrderOnLineSwitch(){
				this.PayService.PayOrderOnLineSwitch().then(response=>{
					if(response.data === 0 ){
						this.isPaySwitch = true
					}else{
						this.isPaySwitch = false
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			PayOrderCheckoutCounter(orderId){
				this.PayService.PayOrderCheckoutCounter({orderId:orderId}).then(response =>{
					let data = response.data.order
					// 待支付金额 = 总支付金额 - 已支付金额
					this.payableAmount = this.ableUserMoney = data.payableAmount - data.receiptAmount  //待付金额
					this.receiptStatus =  data.receiptStatus
					this.onlinePayFlag = data.onlinePayFlag		
					this.initAbleUserMoney(this.payableAmount)
					//判断线上线下显示
					if(this.optionType == 'onlinePay'){
						this.invoiceStatus = true
					}else{
						this.invoiceStatus = data.invoiceStatus
					}
					if(data.receiptAmount > 0){
						this.payStatusText = '使用微信和网银支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。'
						this.isReceiptStatus = false
					}else{
						this.payStatusText = '使用微信和网银支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。若着急发货，可以选择使用线下转账进行付款。'
						this.isReceiptStatus = true
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			goOrderCash(){
				if(this.invoiceStatus){
					this.$util.modal('','本次交易暂不支持线上支付开票,请使用线下转账的方式付款','知道了','',false,() =>{})
					this.payStatusText = '使用微信和网银支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。若着急发货，可以选择使用线下转账进行付款。'
					this.isReceiptStatus = true
				}else{
					const pagePath = `/pages/user/order/order-pay?orderId=${this.orderId}&payType=${this.tabCurrentIndex}`
					this.$api.navigateTo(pagePath)
				}
			},
			//拆分金额并转千分位格式显示
			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))
						if(this.smallMoney.length == 2) { //补0,实际上用不着
							this.smallMoney = this.smallMoney + '0';
						}
					}
					console.log(this.smallMoney)
				}
			},
			tabClick(index) {//tab切换
				this.tabCurrentIndex = index;
				switch(index){
					case 0:
						this.btnColor="#09BB07"
						this.buttonText='使用微信支付';
						break;
					case 1:
						this.btnColor="#034582"
						this.buttonText='使用企业网银支付';
						break;
					case 2:
						this.btnColor="#034582"
						this.buttonText='使用个人网银支付';
						break;
				}
			},
			//页面返回
			hanldNavigateBack(){
				uni.navigateBack({
					delta: 1
				});
			},
			//隐藏弹窗
			hideTips(){
				this.isHttpUrlShowTip = false
			},
			showTips(){
				this.isShowTip=!this.isShowTip
			},
			// 获得胶囊按钮位置信息
			setHeaderBtnPosi(){
				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
				return headerBtnPosi
			},
			setSysteminfo(){
				let systeminfo;
				// 获取设备信息
				uni.getSystemInfo({ 
					success: (res) => {
						systeminfo = res
					},
				})
				return systeminfo
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: auto !important;
		background-color: #FFFFFF;
	}
	.container-cash{
		width: 100%;
		.pay-bring-title{
			box-sizing: border-box;
			width: 100%;
			min-height: 90rpx;
			padding: 0 24rpx;
			line-height: 90rpx;
			text-align: left;
			font-size: $font-size-24;
			background:#fff3e2;
			color: #ff9723;
			padding-left: 84rpx;
			position: relative;
			.icon-tongzhi{
				width: 60rpx;
				line-height: 90rpx;
				text-align: center;
				display: block;
				position: absolute;
				left: 24rpx;
				top: 0;
				color: #ff9723;
				font-size: 36rpx;
			}
		}
		.container-wrapper{
			width:100%;
			margin: 0 auto;
			.pay-content{
				width: 100%;
				height: 220rpx;
				background: url(https://static.caimei365.com/app/wisa/img/icon/pay_bg.png) no-repeat;
				background-size: cover;
				float: left;
				box-sizing: border-box;
				padding: 40rpx 84rpx;
				border-bottom: 10px solid #F7F7F7;
				.pay-p{
					font-size: $font-size-26;
					color: #fff3e2;
					line-height: 36rpx;
				}
				.pay-money{
					color: #ff9723;
					line-height: 100rpx;
					font-weight: bold;
					.pay-sm{
						font-size: 42rpx;
						font-weight: normal;
					}
					.pay-bg{
						font-size: 64rpx;
					}
				}
			}
			.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;
					box-sizing: border-box;
					padding: 0 24rpx;
					.pay-item{
						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:#c4761f;
						}
						.item-l{
							flex: 8;
							.item-icon{
								width: 76rpx;
								height: 76rpx;
								float: left;
								text-align: center;
								line-height: 76rpx;
								margin-right: 20rpx;
								.iconfont{
									font-size:66rpx;
								}
								.icon-weixinzhifu{
									color: #09BB07;
								}
								.icon-gerenwangyinzhifu{
									color: #034582;
								}
								.icon-qiyewangyinzhifu{
									color: #004889;
								}
							}
							.item-texts{
								line-height: 76rpx;
								font-size:$font-size-26;
								color: $text-color;
							}
							.item-text{
								line-height: 38rpx;
								font-size:$font-size-26;
								.txt-p{
									color: $text-color;
								}
								.txt-t{
									color: #999999;
								}
							}
						}
					}
				}
			}
		}
		.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: 120rpx;
			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-26;
					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:#ff2a2a;
						line-height: 88rpx;
					}
				}
				.text-v{
					font-size: $font-size-28;
					color: #999;
					line-height: 70rpx;
					text-align: left;
					&.title{
						padding-left: 10rpx;
						font-size: $font-size-26;
						color: #666666;
					}
					&.bg-color{
						line-height: 44rpx;
						color: #ff2a2a;
					}
					.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: #ff2a2a;
						line-height: 88rpx;
					}
				}
				.text-v{
					font-size: $font-size-28;
					color: #999;
					line-height: 70rpx;
					text-align: left;
					.span{
						color: #333333;
					}
					&.title{
						font-size: $font-size-28;
						color: #666666;
						position: relative;
						padding-left: 20rpx;
						font-weight: bold;
						.line{
							display: block;
							width: 6rpx;
							height: 22rpx;
							background-color: #c4761f;
							border-radius: 3rpx;
							position: absolute;
							left: 0;
							top: 26rpx;
						}
					}
					&.bg-color{
						line-height: 44rpx;
						color: #ff2a2a;
					}
					.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 0 0;
					line-height: 44rpx;
					font-size: $font-size-26;
					color:#666666;
					text-align: justify;
				}
				.text-p{
					width: 100%;
					line-height: 44rpx;
					font-size: $font-size-26;
					color:$color-system;
					text-align: left;
					text-overflow:ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				} 
				.text-b{
					line-height: 44rpx;
					font-size: $font-size-24;
					color:#999999;
					text-align: left;
				}
			}
			.text-button{
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background: $btn-confirm;
				font-size: $font-size-28;
				border-radius: 44rpx;
				color:#FFFFFF;
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}
	
</style>