caimei-applets-caimei/pages/user/order/order-pay.vue

<template>
	<view class="container cashier"  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">
				<view class="pay-content">
					<view class="pay-top">
						<view class="pay-paid">
							<text class="txt-m">待付金额</text>
							<text class="txt-b"><text class="small">￥</text>{{payableAmount | NumFormat}}</text>
						</view>
						<view class="pay-payd">
							<view class="pay-paids">
								<text class="txt-m">应付总额</text>
								<text class="txt-b">￥{{payableAmount | NumFormat}}</text>
							</view>
							<view class="pay-paids">
								<text class="txt-m">已支付金额</text>
								<text class="txt-b">￥{{receiptAmount | NumFormat}}</text>
							</view>
						</view>
					</view>
					<view class="pay-bot">
						<view class="bot-title"><text>本次支付金额</text></view>
						<view class="bot-input">
							<text>￥</text>
 					<!-- 	<view class="input" @click.stop="focusInput">
								<text class="text" v-if="payAmount>=0">{{payAmount}}</text>
								<text class="none" v-else>输入金额不能大于待付金额</text>
							</view> -->
							<input  class="input"
									type="digit"
									v-model="payAmount"
									@focus="focusInput"
									@blur="blurInput"
									placeholder="输入金额不能大于待付金额"
									placeholder-class="placeholder"/>
						</view>
						<view class="bot-resid">
							<text>应付剩余￥{{balanceAmount|NumFormat}}</text>
						</view>
					</view>
				</view>
				<view class="pay-record" :style="{paddingBottom:isIphoneX ? '156rpx' : '112rpx'}">
					<view class="record-title"><text>支付记录</text></view>
					<view class="record-list">
						<view class="list-main" v-if="discernReceipt.length>0">
							<view class="list-item" v-for="(item,index) in discernReceipt" :key="index">
								<text class="text row-1">￥{{item.receiptAmount | NumFormat}}</text>
								<text class="text row-2">{{payTypeText(item.payType)}}</text>
								<text class="text row-3">{{item.receiptDate}}</text>
							</view>
						</view>
						<view class="list-none" v-else>暂无支付记录</view>
					</view>
				</view>
			</view>
			<view class="pay-button" :style="{paddingBottom:isIphoneX ? '68rpx' : '24rpx'}">
				<view class="btn" @click.stop="buttonSubMit" :style="{'background':btnColor}">{{buttonText}}</view>
			</view>
		</view>
		<view class="alert spec" :class="specClass" v-if="isShowTip">
			<!-- 选择支付弹窗说明 -->
			<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">链接有效期为72小时</view>
					</view>
					<view class="text-button" @click.stop="clipboard(payHttpUrl)">复制链接</view>
				</view>
			</view>
		</view>
		<!--大额转账弹窗  -->
		<tui-modal :show="modal" :padding="'30rpx 30rpx'" @cancel="hideMobel(0)" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<view class="tui-prompt-title">大额银联转账信息</view>
				<view class="tui-prompt-text">
					<view class="tui-prompt-tips">请使用银行手机app或者网银输入以下信息进行转账。每次发起支付请求，收款账号都会变化，请使用最新的收款账号进行转账。</view>
					<view class="tui-prompt-item">
						<text class="text">户名：</text>
						{{ bigPayInfo.receiveName }}
						<view class="copy" @click.stop="copyClipboard(bigPayInfo.receiveName)"><text class="iconfont icon-fuzhi_o"></text></view>
					</view>
					<view class="tui-prompt-item">
						<text class="text">收款账号：</text>
						{{ bigPayInfo.receiveAccountNo }}
						<view class="copy" @click.stop="copyClipboard(bigPayInfo.receiveAccountNo)"><text class="iconfont icon-fuzhi_o"></text></view>
					</view>
					<view class="tui-prompt-item">
						<text class="text">银行：</text>
						{{ bigPayInfo.accountName }}
					</view>
					<view class="tui-prompt-item">
						<text class="text">收款方开户地：</text>
						{{ bigPayInfo.areaInfo }}
					</view>
					<view class="tui-prompt-item">
						<text class="text">收款网点：</text>
						{{ bigPayInfo.accountName }}
					</view>
				</view>
				<view class="tui-prompt-flex">
					<view class="btn btn-confirm" @click="handleClick">已完成转账，请点击</view>
					<view class="btn btn-cancel" @click="hideMobel">关闭</view>
				</view>	
			</view>
		</tui-modal>	
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js'
	import thorui from '@/components/clipboard/clipboard.thorui.js'
	export default{
		components: {
			// keyboard
		},
		data(){
			return{
				orderId:'',
				payType:'',
				payWay:'',
				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.isIphone
				},
				idCardList:[],
				isIphoneX:this.$store.state.isIphoneX,
				CustomBar:this.CustomBar,// 顶部导航栏高度
				tabCurrentIndex:0,
				isShowTip:false,
				buttonText:'去支付',
				btnColor:'#09BB07',
				discernReceipt:[],
				showDigitKeyboard:false,
				payHttpUrl:'',
				bigPayInfo:{},// 大额网银转账
				mbOrderId:0, // 支付记录订单Id
				modal:false,
			}
		},
		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.payType = e.type
				console.log(this.payType)
				this.orderId = e.orderId
				switch(this.payType){
					case '0':
						this.payWay = 'WEIXIN'
						this.btnColor='#09BB07'
						this.buttonText = '去支付'
						break
					case '1':
						this.payWay = 'UNIONPAY'
						this.btnColor='#034582'
						this.buttonText = '生成企业网银支付链接'
						break
					case '2':
						this.payWay = 'UNIONPAY'
						this.btnColor='#034582'
						this.buttonText = '生成个人网银支付链接'
						break
					case '3':
						this.payWay = 'UNIONPAY'
						this.btnColor='#034582'
						this.buttonText = '去转账'
						break
				}
				this.GetPayOrderInfo()
			},
			GetPayOrderInfo(){//初始化支付信息
				this.PayService.PayOrderCheckoutCounter({orderId:this.orderId}).then(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*100 - this.receiptAmount*100)/100// 已付金额
					this.payAmount = this.toFixedFn(this.payableAmount)			// 自定义金额
					console.log('this.payAmount',this.payAmount)
					this.balanceAmount = this.payableAmount - this.payAmount	// 计算剩余支付金额
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			buttonSubMit(){
				switch(this.payType){
					case '0':// 微信支付
						// 友盟埋点收集微信支付
						if(process.env.NODE_ENV != 'development'){
							this.$uma.trackEvent('Um_Event_ConfirmWechatPay', {
								Um_Key_PageName: '微信支付',
								Um_Key_SourcePage: '线上支付',
								Um_Key_PayName:`${this.buttonText}`,
								Um_Key_PayOrderID:`${this.orderId}`
							})
						}
						this.MiniWxPayFor()
						break
					case '1':// 企业网银
						// 友盟埋点收集企业网银
						if(process.env.NODE_ENV != 'development'){
							this.$uma.trackEvent('Um_Event_ConfirmEbankPay', {
								Um_Key_PageName: '企业网银',
								Um_Key_SourcePage: '线上支付',
								Um_Key_PayName:`${this.buttonText}`,
								Um_Key_PayOrderID:`${this.orderId}`
							})
						}
						this.BuildCatenate()
						break
					case '2':// 个人网银
						// 友盟埋点收集个人网银
						if(process.env.NODE_ENV != 'development'){
							this.$uma.trackEvent('Um_Event_ConfirmAbankPay', {
								Um_Key_PageName: '个人网银',
								Um_Key_SourcePage: '线上支付',
								Um_Key_PayName:`${this.buttonText}`,
								Um_Key_PayOrderID:`${this.orderId}`
							})
						}
						this.BuildCatenate()
						break
					case '3':// 大额支付
						// 友盟埋点收集大额支付
						if(process.env.NODE_ENV != 'development'){
							this.$uma.trackEvent('Um_Event_ConfirmBigbankPay', {
								Um_Key_PageName: '大额支付',
								Um_Key_SourcePage: '线上支付',
								Um_Key_PayName:`${this.buttonText}`,
								Um_Key_PayOrderID:`${this.orderId}`
							})
						}
						this.LargePayment()
						break
				}
			},
			LargePayment(){// 大额银联
				if(this.payAmount == 0){
					this.$util.msg('请输入本次支付的金额',2000)
					return
				}
				if(this.payAmount <=12){
					this.$util.msg('网银支付的金额必须大于￥12.00',2000)
					return
				}
				this.PayService.PayOrderTransferUnion({payAmount:this.accMul(this.payAmount,100),orderId:this.orderId}).then(response =>{
					this.bigPayInfo = JSON.parse(response.data.data.payInfo)
					this.mbOrderId = response.data.data.mbOrderId
					this.modal = true
					console.log('PayInfo',this.bigPayInfo)
				})
			},
			handleClick(){// 查询是否支付成功
				this.PayService.PayOrderFindOrderStatus({mbOrderId:this.mbOrderId}).then(response =>{
					const data = response.data.data
					const linkData =  {
							  payAmount:this.payAmount,
							  orderId:this.orderId,
							  type:data.status === '1' ? 'success' : 'error'
						}
					if(data.status === '1'){
						this.$api.navigateTo(`/pages/user/order/order-success?data=${JSON.stringify({ data: linkData })}`)
					}else{
						this.$api.navigateTo(`/pages/user/order/order-success-tips?data=${JSON.stringify({ data: linkData })}`)
					}	
				})
			},
			hideMobel(){
				this.modal = false
			},
			BuildCatenate(){// 企业网银  个人网银
				if(this.payAmount == 0){
					this.$util.msg('请输入本次支付的金额',2000)
					return
				}
				if(this.payAmount <=10){
					this.$util.msg('网银支付的金额必须大于￥10.00',2000)
					return
				}
				this.PayService.PayOrderPayLink({unpaidAmount:this.payAmount,orderId:this.orderId,payType:this.payType}).then(response =>{
					this.payHttpUrl = response.data
					this.isShowTip = true
				})
			},
			MiniWxPayFor(){// 微信支付
				authorize.getCode('weixin').then(wechatcode =>{
					if(this.payAmount > 5000){
						this.$util.modal('','本次支付金额已超出微信支付限额，请输入小于5千的金额进行支付','知道了','',false,() =>{})
						return
					}
					if(this.payAmount == 0){
						this.$util.msg('请输入本次支付的金额',2000)
						return
					}
					if(this.payAmount*100 < 2){
						this.$util.msg('本次支付的金额必须大于￥0.02',2000)
						return
					}
					console.log('this.payAmount',this.payAmount)
					let params ={
							payAmount:this.accMul(this.payAmount,100),
							payWay:'WEIXIN',
							code:wechatcode,
							orderId:this.orderId
						}
					this.PayService.WeChatMiniWxPay(params).then(response =>{
						let PayInfo = JSON.parse(response.data.data.payInfo)
						this.WxRequestPayment(PayInfo)
					}).catch(error =>{
						this.$util.msg(error.msg,2000)
					})
				})
			},
			WxRequestPayment(data){
				let self = this
				wx.requestPayment({
					'timeStamp': data.timeStamp,
					'nonceStr': data.nonceStr,
					'package': data.package,
					'signType': data.signType,
					'paySign': data.paySign,
					'success':function(res){
						wx.reLaunch({url: '/pages/tabBar/user/user'})
					},
					'fail':function(res){
						self.$util.msg('用户取消支付~')
					},
					'complete':function(res){

					}
				})
			},
			accMul(value1, value2) {
			    if (value1 == 0 || value2 == 0) {
			      return 0
			    }
			    let m = 0
			    let v1 = value1.toString()
			    let v2 = value2.toString()
			    m += v1.split('.')[1] ? v1.split('.')[1].length : 0
			    m += v2.split('.')[1] ? v2.split('.')[1].length : 0
			    let _v1 = Number(v1.replace('.', ''))
			    let _v2 = Number(v2.replace('.', ''))
			    return (_v1 * _v2) / Math.pow(10, m)
			},
			confirmEvent(value){//点击自定义键盘完成的回调函数
				this.chechValue(value)
				this.showDigitKeyboard = false
			},
			blurInput(e){
				this.chechValue(e.detail.value)
			},
			focusInput(){
				// this.showDigitKeyboard = true
			},
			hideKeyboard(){
				this.showDigitKeyboard = false
			},
			chechValue(value){
				let patern = /\d+\.\d+/g
				if(value && value.split('.').length > 2) {
					value= patern.exec(value)
				}
				if(value == '' || value <0 ){
					this.payAmount = ''
					this.balanceAmount = this.payableAmount
				}else if( value > this.payableAmount){
					this.payAmount = this.toFixedFn(this.payableAmount)
					this.balanceAmount = this.toFixedFn(this.payableAmount - this.payAmount)
				}else{
					this.payAmount = this.toFixedFn(value)
					this.balanceAmount = this.toFixedFn(this.payableAmount - this.payAmount)
				}
			},
			hanldNavigateBack(){//页面返回
				uni.navigateBack({
					delta: 1
				})
			},
			payTypeText (state){//处理支付记录文字
				let stateText = '',
					stateTextObject={
						12:'企业网银',
						13:'微信支付',
						14:'支付宝',
						15:'微信支付',
						16:'余额抵扣',
					}
				Object.keys(stateTextObject).forEach(key => {
					if(key == state){
						stateText = stateTextObject[key]
					}
				})
				return stateText
			},
			hideTips(){//隐藏弹窗
				this.isShowTip = false
			},
			toFixedFn(text){//处理小数点后两位数
				return Number(text).toFixed(2)
			},
			copyClipboard(data){
				//复制账号
				thorui.getClipboardData(data, (res) => {
					if (res) {
						this.$util.msg('已复制',2000)
					} else {
						this.$util.msg('复制失败',2000)
					}
				})
			},
			clipboard(data) {//复制链接
				console.log('data',data)
				thorui.getClipboardData(data, (res) => {
					if (res) {
						this.isShowTip = false
						this.$util.msg('已复制',2000)
						// 友盟埋点收集复制网银链接
						if(process.env.NODE_ENV != 'development'){
							this.$uma.trackEvent('Um_Event_CopyUnionPay', {
								Um_Key_PageName: '网银支付',
								Um_Key_SourcePage: '线上支付',
								Um_Key_PayName:`${this.buttonText}`,
								Um_Key_PayOrderID:`${this.orderId}`
							})
						}
					} else {
						this.$util.msg('复制失败',2000)
					}
				})
			},
			discard(){
				//丢弃
			}
		},
		onShow() {

		}
	}
</script>

<style lang="scss">
	page{height: auto !important;background-color: #FFFFFF;}
	.container-cash{
		width: 100%;
		.container-wrapper{
			width:100%;
			margin: 0 auto;
			.pay-content{
				width: 662rpx;
				height: 420rpx;
				padding: 64rpx 44rpx 0 44rpx;
				background: url(https://img.caimei365.com/group1/M00/03/BD/Cmis218elN6AY6VeAAqw4n3n4nw186.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{
							line-height: 48rpx;
							text-align: left;
							color: #FFFFFF;
							width: 100%;
						}
						.txt-m{
							font-size: $font-size-26;
							opacity: 0.7;
							display: inline-block;
						}
						.txt-b{
							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;
							}
						}
					}
				}
				.pay-bot{
					width: 614rpx;
					height: 184rpx;
					padding: 24rpx;
					background: #FFFFFF;
					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;
						color: #666666;
					}
					.bot-input{
						width: 100%;
						height: 66rpx;
						margin: 15rpx 0;
						border-bottom: 1px solid #EBEBEB;
						line-height: 66rpx;
						font-size: $font-size-32;
						color: $text-color;
						text{
							display: block;
							float: left;
						}
						.input{
							font-size: $font-size-40;
							width: 500rpx;
							height: 66rpx;
							padding: 0 10rpx;
							line-height: 66rpx;
							float: left;
							.none{
								color:$text-color;
								opacity: 0.3;
							}
							.text{
								color:$text-color;
							}
						}
						.placeholder{
							font-size: $font-size-26;
						}
					}
					.bot-resid{
						line-height: 36rpx;
						font-size: $font-size-26;
						color: #666666;
						margin-top: 24rpx;
						color: $color-system;
					}
				}
			}
			.pay-record{
				float: left;
				background: #FFFFFF;
				width: 702rpx;
				height: auto;
				padding: 0 24rpx;
				margin-top: 112rpx;
				.record-title{
					width: 100%;
					float: left;
					font-size: $font-size-28;
					color: $text-color;
					line-height: 80rpx;
					height: 80rpx;
					border-bottom: 1px solid #F8F8F8;
				}
				.record-list{
					width: 100%;
					height: auto;
					float: left;
					.list-none{
						line-height: 80rpx;
						font-size: $font-size-26;
						color: #999999;
						text-align: left;
					}
					.list-main{
						height: auto;
						display: flex;
						flex-direction:column;
						.list-item{
							width: 100%;
							height:80rpx;
							display: flex;
							flex: 1;
							line-height: 80rpx;
							font-size: $font-size-26;
							color: $text-color;
							.text{
								&.row-1{
									flex: 3;
								}
								&.row-2{
									flex: 3;
								}
								&.row-3{
									flex: 4;
									text-align: right;
									color: #999999;
								}
							}
						}
					}
				}
			}
		}
		.pay-button{
			width: 100%;
			background-color: #FFFFFF;
			position: fixed;
			height: 88rpx;
			padding-top: 24rpx;
			bottom: 0;
			.btn{
				width: 702rpx;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: $font-size-28;
				line-height: 88rpx;
				color: #FFFFFF;
				margin: 0 auto;
				text-align: center;
				background: $btn-confirm;
			}
		}
	}
	.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;
			}
		}
	}
	.tui-prompt-title{
		width: 100%;
		height: 44rpx;
		line-height: 44rpx;
		padding: 20rpx 0;
		text-align: center;
		color: #333333;
		border-bottom: 1px solid #E2E7EF;
	}
	.tui-prompt-text{
		padding-top: 20rpx;
		.tui-prompt-tips{
			width: 100%;
			line-height: 36rpx;
			font-size: $font-size-22;
			color: #E15616;
			text-align: justify;
			margin-bottom: 24rpx;
		}
		.tui-prompt-item{
			width: 100%;
			line-height: 60rpx;
			color: #333333;
			font-size: $font-size-26;
			.text{
				font-weight: bold;
			}
			.copy{
				height: 38rpx;
				box-sizing: border-box;
				padding: 0 24rpx;
				text-align: center;
				line-height: 36rpx;
				display: inline-block;
				.iconfont{
					font-size: $font-size-40;
					color: #666666;
				}
			}
		}	
	}
	.tui-prompt-flex{
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0 35rpx;
		.btn{
			width: 100%;
			line-height: 84rpx;
			font-size: $font-size-26;
			text-align: center;
			color: #FFFFFF;
			border-radius: 44rpx;
			margin: 20rpx 0;
			&.btn-cancel{
				background: #FFFFFF;
				color: #333333;
				border: 1px solid #979797;
			}
			&.btn-confirm{
				background: $btn-confirm;
			}
		}
		
	}
</style>