null/pages/public/pay.vue

<template>
	<view class="page">
		<view class="p-top flex-col align-center justify-center">
			<view class="key">待支付金额</view>
			<view class="price">￥151.00</view>
		</view>
		<view class="p-type">
			<view class="line align-center" @tap="tapType(1)">
				<view class="key">
					余额支付
				</view>
				<text class="money">{{userInfo.money}}</text>
				<image :src="payType === 1? '/static/check-do.png' : '/static/check-un.png'" mode="widthFix" class="ic"></image>
			</view>
			<view class="line align-center" @tap="tapType(2)">
				<view class="key">
					微信支付
				</view>
				<image :src="payType === 2? '/static/check-do.png' : '/static/check-un.png'" mode="widthFix" class="ic"></image>
			</view>
		</view>
		<submit-btn @submit="submit" ref="submitRef">
			<template v-slot:btns="{isSubmitted}">
				<view class="p-btn" :class="{'disabled':isSubmitted}">
                   立即支付
				</view>
			</template>
		</submit-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid:'',
				orderId:'',
				payType:'', //1=余额支付,2微信支付
				price:0,
			};
		},
		onLoad(e){
			this.orderId = e.orderId;
			this.getOpenid();
		},
		methods:{
			async getOpenid(){
				let [lErr,lRes] = await uni.login({
					provider: 'weixin'
				});
				if (lRes.hasOwnProperty('code')) {
				    let res = await this.$request('user.getopenid',{code:lRes.code});
					this.openid = res.data.openid;
				}else {
					this.$tools.msg('登录失败，请重启应用');
				}
			},
			tapType(type){
				if(type === this.payType){
					return;
				}
				if(type===1 &&   parseFloat(this.price || 0)  > parseFloat(this.userInfo.money || 0) ){
					this.$tools.msg('您的余额不足')
					return;
				}
				this.payType = type;
			},
			//支付
			async submit(){
				if(!this.openid){
					let [mErr,mRes] = await uni.showModal({
						title: '微信错误，请刷新',
					    showCancel:false,
						confirmText:'刷新'
					})
					if(mRes.confirm){
						this.getOpenid();
					}
					return;
				}else if(!this.payType){
					this.$tools.msg('请选择支付方式')
					return;
				}else if(this.payType===1 &&    parseFloat(this.price || 0)  > parseFloat(this.userInfo.money || 0) ){
					this.$tools.msg('您的余额不足')
					return;
				}
				
				let sendData={
					id:this.orderId,
					pay_type:this.payType,
					openid: this.openid,
				}
				let res=await this.$request('order.pay',sendData);
				let data = res.data;
				if(this.payType == 1){
					this.$refs.submitRef.chgeStatus();
					this.navTo('/pages/public/paySuc',{},{type:'replace'})	
				}else if (this.payType == 2) {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonce_str,
						package: data.prepay_id,
						signType: data.signType,
						paySign: data.paySign,
						success: (res) => {
							this.$refs.submitRef.chgeStatus();
							this.navTo('/pages/public/paySuc',{},{type:'replace'})	
						},
						fail: function(err) {
							//console.log('fail:' + JSON.stringify(err));
							//that.$api.msg('fail:' + JSON.stringify(err))
							that.$tools.msg('支付失败');
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.page{
	padding: 30rpx;
}
.p-top{
	width: 690rpx;
	height: 194rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(42,42,42,0.08);
	border-radius: 20rpx;
	.key{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 37rpx;
	}
	.price{
		margin-top: 28rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF3E3E;
		line-height: 37rpx;
	}
}
.p-type{
	margin-top: 24rpx;
	width: 690rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(42,42,42,0.08);
	border-radius: 20rpx;
	padding: 0 20rpx;
	margin-bottom: 154rpx;
	.line{
		height: 108rpx;
		border-bottom: 2rpx solid #eee;
		&:last-child{
			border: none;
		}
		.key{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.money{
			margin-left: 20rpx;
			color: #333;
			font-size: 28rpx;
		}
		.ic{
			margin-left: auto;
			width: 36rpx;
			height: 36rpx;
		}
	}
}
.p-btn{
	width: 690rpx;
	height: 94rpx;
	background: #92B99C;
	border-radius: 47rpx;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 94rpx;
	text-align: center;
	&.disabled{
		background-color: #eee;
	}
}
</style>