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

<template>
	<view class="container cashier">
		<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">￥{{payableAmount.toFixed(2)}}</text>
						</view>
						<view class="pay-paid">
							<text class="txt-m">已支付金额</text>
							<text class="txt-b">￥{{receiptAmount.toFixed(2)}}</text>
						</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="" 
								   type="button" 
								   value="" 
								   @focus="focusInput"  
								   @input="inputMoney" 
								   @blur="blurInput" 
								   v-model="" 
								   placeholder="" maxlength="10"/> -->
						</view>
						<view class="bot-resid">
							<text>订单剩余￥{{balanceAmount.toFixed(2)}}</text>
						</view>
					</view>
				</view>
				<view class="pay-record">
					<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}}</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">
				<view class="btn" @click.stop="MiniWxPayFor">{{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">客服热线：</view>
						<view class="text-p">0755-22907771 / 15338851365</view>
						<view class="text-p">（周一至周五 09:00-18:00）</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 数字键盘 -->
		<keyboard v-if="showDigitKeyboard"  
				  @confirmEvent="confirmEvent" 
				  :money.sync="payAmount" 
				  btn-color='linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%)' 
				  title="完成">
		</keyboard>
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js'
	import keyboard from "@/components/keyboard/keyboard.vue"
	import { PayOrderCheckoutCounter,WeChatMiniWxPay } from "@/api/order.js"
	export default{
		components: {
			keyboard
		},
		data(){
			return{
				orderID:'',
				payableAmount:2222,
				receiptAmount:0,
				balanceAmount:0,
				payAmount:0,
				nvabarData: {		//顶部自定义导航
					haveBack:true,
					showCapsule:1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '收银台',  // 导航栏 中间的标题
					textLeft:this.$store.state.isIphoneX
				},
				idCardList:[],
				isIphoneX:this.$store.state.isIphoneX,
				CustomBar:this.CustomBar,// 顶部导航栏高度
				tabCurrentIndex:0,
				isShowTip:false,
				buttonText:'去支付',
				discernReceipt:[],
				showDigitKeyboard:false
			}
		},
		onLoad(option) {
			// this.initData(option)
		},
		computed:{
			passStr(){
				let str='';
				this.idCardList.forEach(item=>{
					str+=item.toString();
				})
				return str;
			}
		},
		methods:{
			initData(e){
				this.orderID = e.orderID
				PayOrderCheckoutCounter({orderId:this.orderID}).then(response =>{
					console.log(response)
					this.discernReceipt = response.data.discernReceipt 		//支付记录
					this.receiptAmount = response.data.order.receiptAmount  //已付金额
					this.payableAmount = response.data.order.payableAmount - this.receiptAmount  //待付金额
					this.payAmount = this.payableAmount.toFixed(2)	//自定义金额
					this.balanceAmount = this.payableAmount - this.payAmount// 计算剩余支付金额
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			MiniWxPayFor(){
				let self = this
				authorize.getCode('weixin').then(wechatcode =>{
					if(this.payAmount == 0){
						this.$util.msg("请输入本次支付的金额",2000)
						return
					}
					let params ={
							payAmount:this.payAmount*100,
							payWay:"WEIXIN",
							payType:"MINIAPP_WEIXIN",
							code:wechatcode,
							orderId:this.orderID
						}
					WeChatMiniWxPay(params).then(response =>{
						let PayInfo = JSON.parse(response.data.data.payInfo);
						uni.setStorageSync('payInfo',PayInfo)
						console.log(PayInfo)
						wx.requestPayment({
							'timeStamp': PayInfo.timeStamp,
							'nonceStr': PayInfo.nonceStr,
							'package': PayInfo.package,
							'signType': PayInfo.signType,
							'paySign': PayInfo.paySign,
							'success':function(res){
								console.log('支付成功');
								this.$api.redirectTo('/pages/user/order/order-details?orderID='+this.orderID)
							},
							'fail':function(res){
								self.$util.msg('支付失败')
							},
							'complete':function(res){
								
							}
						})
					}).catch(error =>{
						this.$util.msg(error.msg,2000)
					})
				})
			},
			focusInput(){
				this.showDigitKeyboard = true
			},
			confirmEvent(value){
				//点击键盘完成的回调函数
				console.log(value)
				this.chechValue(value)
				this.showDigitKeyboard = false
			},
			chechValue(value){
				console.log(parseInt(value))
				if(value == 0){
					console.log('1111',value)
					this.payAmount = 0
					this.balanceAmount = this.payableAmount
				}else if(parseInt(value)>this.payableAmount){
					console.log('2222',value)
					this.payAmount = this.payableAmount
					this.balanceAmount = this.payableAmount - this.payAmount
				}else{
					console.log('33333',value)
					this.payAmount = value
					this.balanceAmount = this.payableAmount - this.payAmount
				}
			},
			hanldNavigateBack(){
				uni.navigateBack({
					delta: 1
				});
			},
			payTypeText (state){
				let stateText = '',
					stateTextObject={
						12:'PC-B2B网银',
						13:'PC-微信支付',
						14:'PC-支付宝',
						15:'小程序-微信支付',
						16:'余额抵扣',
					}
				Object.keys(stateTextObject).forEach(key => {
					if(key == state){
						stateText = stateTextObject[key]
					}
				})
				return stateText;
			},
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	page{height: auto !important;background-color: #F7F7F7;}
	.container-cash{
		width: 100%;
		.container-wrapper{
			width:100%;
			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;
				background-size: cover;
				float: left;
				.pay-top{
					width: 100%;
					height: auto;
					.pay-paid{
						width: 100%;
						height: auto;
						margin-bottom: 38rpx;
						text{
							display: inline-block;
							line-height: 48rpx;
							text-align: left;
							color: #FFFFFF;
							width: 100%;
						}
						.txt-m{
							font-size: $font-size-26;
							opacity: 0.7;
						}
						.txt-b{
							font-size: $font-size-32;
						}
					}
				}
				.pay-bot{
					width: 614rpx;
					height: 184rpx;
					padding: 24rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					.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-28;
							width: 500rpx;
							height: 66rpx;
							padding: 0 10rpx;
							line-height: 66rpx;
							float: left;
							.none{
								color:$text-color;
								opacity: 0.3;
							}
							.text{
								color:$text-color;
							}
						}
					}
					.bot-resid{
						line-height: 36rpx;
						font-size: $font-size-26;
						color: #666666;
						margin-top: 24rpx;
					}
				}
			}
			.pay-record{
				float: left;
				background: #FFFFFF;
				width: 702rpx;
				height: auto;
				padding: 0 24rpx;
				.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;
								}
							}
						}
					}
				}
			}
		}
		.pay-button{
			width: 100%;
			position: fixed;
			bottom: 40rpx;
			.btn{
				width: 702rpx;
				height: 88rpx;
				border-radius: 14rpx;
				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;
					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>