xusfood_client/shopping/pay.vue

<template>
	<view class="">
		<u-navbar
			title="收银台"
			:placeholder="true"
			@leftClick="leftClick"
			:autoBack="false"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-wrap">
			<view class="pay-way page-wrap">
				  <u-radio-group  v-model="params.paymentMode" placement="column" @change="groupChange">
				   <!-- <view class="pay-way-item u-flex u-row-between">
				    	<view class="left">微信支付</view>
				    	<u-radio :name="1" activeColor="#00A447" size="36rpx"></u-radio>
				    </view> -->
					<view :class="{disabled:customBalance<params.payAmount}" class="pay-way-item u-flex u-row-between">
						<view class="left">旭烁余额支付(¥ {{customBalance}})</view>
						<u-radio :name="2" :disabled="customBalance<params.payAmount" activeColor="#00A447" size="36rpx"></u-radio>
					</view>
				<!-- 	<view class="pay-way-item u-flex u-row-between">
						<view class="left">积分支付(¥ {{credit}})</view>
						<u-radio :name="3" :disabled="fromPage!=creditOrder&&customBalance<params.payAmount" activeColor="#00A447" size="36rpx"></u-radio>
					</view> -->
					<view class="pay-way-item u-flex u-row-between">
						<view class="left">农商行支付</view>
						<u-radio :name="4" activeColor="#00A447" size="36rpx"></u-radio>
					</view>
				  </u-radio-group>
			</view>
			<view class="full-btn" @click="payRoute">去支付<text>¥ {{params.payAmount}}</text></view>
			<u-popup :show="checkPassShow" @close="checkPassClose" mode="center">
				<view class="check-pass">
					<view class="title">请输入支付密码</view>
					<view class="name">旭烁商城</view>
					<view class="number">¥{{params.payAmount}}</view>
					<view class="the-way u-flex u-row-between">
						<view class="left">支付方式</view>
						<view class="right u-flex">
							<u--image class="image" :src="staticUrl+'/img/qian.png'" width="32rpx" height="32rpx"></u--image>
							<text style="margin-left: 10px;">零钱</text>
						</view>
					</view>
					<u-code-input v-model="paypass" 
						:space="0"
						:size="40" 
						@finish="checkPayPassword" 
						:maxlength="6" 
						:adjustPosition="true"
						:dot="true"
						:focus="true"
						:disabled-keyboard="false" >
					</u-code-input>
					<!-- <view class="btn-wrap u-flex">
						<u-button text="取消" @click="checkPassShow=false"></u-button>
						<u-button text="确认" @click="checkPassShow=false"></u-button>
					</view> -->
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				fromPage:'',
				customBalance:'',
				credit:'',
				params:{
					paymentMode:null,
					orderId:'',
					openid:'',
					payAmount:'',
					payResult:{},
				},
				checkPassShow:false,
				paypass:'',
				
			}
		},
		onShow() {	
			this.getMemberInfo();
		},
		onLoad(page) {
			console.log('page',page);
			this.fromPage = page.fromPage;
			this.params.orderId = page.orderId;
			this.params.openid = this.vuex_wechatOpenid;
			this.params.payAmount = page.payAmount;
			this.params.paymentMode = page.paymentMode || 4;
		},
		methods: {
			leftClick(){
				uni.showModal({
				    title: '提示',
				    content: '是否放弃本次付款！',
				    success: res => {
						if (res.confirm) {
							uni.navigateBack()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
				    }
				});
			},
			getMemberInfo(){
				this.$u.api.memberInfo({id:this.vuex_user_info.userid}).then(res=>{
					this.customBalance= res.data.balance;
					this.credit= res.data.credit;
				}).catch(err=>{
					console.log('memberInfo',err.data);
				})
			},
			checkPassClose(){
				this.checkPassShow = false
			},
			payRoute(){
				if(this.params.paymentMode==2){
					this.checkPassShow = true
				}else{
					this.gotoPay();
				}
			},
			checkPayPassword(){
				this.$u.api.checkPayPassword({payPassword:this.paypass}).then(res=>{
					// console.log('res',res.data);
					if(res.data==1){//密码正确
						this.gotoPay()
					}else{
						this.paypass = '';
						uni.showToast({
							title:'密码错误',
							icon:'error'
						});
					}
					
				}).catch(err=>{
					this.paypass = '';
					uni.showToast({
						title:'密码错误',
						icon:'error'
					});
					console.log('checkPayPassword',err);
				})
			},
			gotoPay(){
				console.log('gotoPay',this.params);
				this.$u.api.gotoPay(this.params).then(res=>{
					this.payResult = res.data.payResult;
					if(this.params.paymentMode==1||this.params.paymentMode==4){
						this.wxPay()
					}else{
						uni.$u.route('/shopping/paysuccess');
					}
					console.log('gotoPayres',res.data);
				}).catch(err=>{
					this.paypass = '';
					this.checkPassShow = false;
					console.log('gotoPay',err);
				})				
			},
			wxPay(){
				uni.requestPayment({
					... this.payResult,
				    "provider": "wxpay", 
				    "orderInfo": {
				        // "appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
				        // "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
				        // "package": "Sign=WXPay",        // 固定值
				        // "partnerid": "148*****52",      // 微信支付商户号
				        // "prepayid": "wx202254********************fbe90000", // 统一下单订单号 
				        // "timestamp": 1597935292,        // 时间戳（单位：秒）
				        // "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
				    },
				    success(res) {
						uni.$u.route('/shopping/paysuccess');
					},
				    fail(e) {
						console.log('wxPayfail',e);
					}
				})				
			},
			groupChange(e){
				console.log('groupChange',e);
			}
			
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
.pay-way{
	background-color: #fff;
	border-radius: 8rpx;
	.pay-way-item {
		padding: 30rpx;
		&:not(:last-child){
			border-bottom: 0.5px solid #eee;
		}
		&.disabled{
			.left{
				color: #D8D8D8;
			}
		}
	}
	.left{
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
	}
}
.full-btn{
	margin-top: 100rpx;
}
/deep/ .u-popup__content{
	overflow: hidden;
	border-radius: 8rpx;
}
.check-pass{
	padding: 24rpx 40rpx 40rpx;
 	.title{
		margin-bottom: 30rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
	}
	.name{
		text-align: center;
		font-size: 30rpx;
		font-weight: 400;
		color: #666666;
		line-height: 42rpx;
		margin-bottom: 10rpx;
	}
	.number{
		text-align: center;
		font-size: 58rpx;
		font-weight: 600;
		color: #FF3538;
		line-height: 81rpx;
		margin-bottom: 30rpx;
	}
	.the-way{
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
		margin-bottom: 25rpx;
	}
	.btn-wrap{
		
	}
}
</style>