xusfood_client/shopping/pay.vue

<template>
	<view class="">
		<u-navbar
			title="收银台"
			@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="gotoPay">去支付<text>¥ {{params.payAmount}}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromPage:'',
				customBalance:'',
				credit:'',
				params:{
					paymentMode:null,
					orderId:'',
					openid:'',
					payAmount:'',
					payResult:{},
				}
				
			}
		},
		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);
				})
			},
			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=>{
					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;
}
</style>