xingmingyi_applet/pages/pay/payVid.vue

<template>
	<view class="pagecon">
		<view class="conwarp">
			<view class="gdHead dffs">
				<view class="head flex1">{{ goodInfo.title }}</view>
				<text v-for="(item, index) in goodInfo.tags.split('|')" class="desc">{{ item }}</text>
			</view>
			<view class="subtit textgrey fontssm">{{ goodInfo.desc }}</view>
		</view>
		<view v-if="!hidePay" class="conwarp">
			<view class="gdHead"><view class="head textgrey">选择支付方式</view></view>
			<view class="monBox">
				<view @click="selHandle(1)" class="payInfo bb dfsb">
					<image class="payicon" src="/static/img/pro/paywx.png" mode=""></image>
					<view class="flex1"><text class="blank fontmid">微信支付</text></view>
					<image class="payselicon" :src="pay_type == 1 ? '/static/img/pro/chenggong.png' : '/static/img/pro/wxz.png'" mode=""></image>
				</view>
				<view @click="selHandle(2)" class="payInfo bb dfsb">
					<image class="payicon" src="/static/img/pro/payxd.png" mode=""></image>
					<view class="dffd flex1">
						<text class="blank fontmid">学豆支付</text>
						<view class="textgrey fontssm">
							剩余学豆：
							<text class="prosecond fontssm">{{ userInfo.userInfo.bean || 0 }}</text>
						</view>
					</view>
					<image class="payselicon" :src="pay_type == 2 ? '/static/img/pro/chenggong.png' : '/static/img/pro/wxz.png'" mode=""></image>
				</view>
				<!-- <view class="payInfo bb dfsb">
					<image class="payicon" src="/static/img/pro/payyh.png" mode=""></image>
					<view class="dffd flex1">
						<text class="blank fontmid">使用优惠券 -{{ coupon.reduce || 0 }}</text>
						<view @click.stop="nextTo" class="textgrey fontssm dffs">
							查看当前可使用的优惠券
							<u-icon name="arrow-down" color="#999" size="14"></u-icon>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="fixBox dffs">
			<view class="fontbase">应付：</view>
			<text class=" prosecond">{{ ordInfo.order_amount }} </text>
			<text class="fontsm flex1"> 会员折扣{{ userInfo.userInfo.jing_discount || 0 }}折</text>

			<view @click="creatOrd()" class="clickbtn fontmid"> 确定购买 </view>
		</view>
		<pay-password-keyboard :showPass="payShow" @close="payShow = false" @getPass="balancePay"></pay-password-keyboard>
	</view>
</template>

<script>
import videoList from '@/pages/index/components/wordlist.vue';
import payPasswordKeyboard from '@/components/pay-password-keyboard/pay-password-keyboard.vue';
import { mapState } from 'vuex';
export default {
	components: {
		videoList,
		payPasswordKeyboard
	},
	data() {
		return {
			hidePay: false, //如果选择下载并且 价格为0  隐藏支付方式
			id: '',
			goodInfo: { tags: '' },
			// pay_type: 1, //2微信  1 学豆
			pay_type: 1, //1=微信  2=学豆 
			payShow: false, //支付密码
			coupon: { reduce: 0 }, 
			ordInfo:'',
			ordId: ''
		};
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo })
	},
	async onLoad(opt) {
		this.goodInfo = JSON.parse(opt.item);
		console.log(this.goodInfo);
		await this.$store.dispatch('getUserInfo');
		await this.getInfo(); 
	},
	methods: {
		selHandle(val) {
			console.log(val);
			if (val == 2 && this.userInfo.userInfo.level_time == 0) {
				this.$api.toast('请先开通会员');
				setTimeout(res => {
					uni.navigateTo({
						url: '/pages/user/mine/member'
					});
				}, 600);
			} else {
				this.pay_type = val;
				this.getInfo();
			}
			
		},
		/**
		 * 请求数据只是为了代码不那么乱
		 * 分次请求未作整合
		 */
		async getInfo() {
			let url = 'video_order/outInfo';
			this.$api
				.request(url, {
					video_id: this.goodInfo.id,
					pay_type: this.pay_type,
				})
				.then(res => {
					if (res.code == '200') { 
						this.ordInfo = res.data;
					}
				});
		},
		// 选择优惠券
		nextTo() {
			if (this.pay_type == 1) return this.$api.toast('余额支付不能使用优惠券');
			uni.navigateTo({
				url: '/pages/user/coupon/myCoup?money=' + this.money
			});
		}, 
		// 学豆支付
		balancePay(val) {
			this.payShow = false;
			console.log(val);
			this.$api
				.request('user/checkMd', {
					pay_pass: val
				})
				.then(data => {
					if (data.code == 200) {
						this.emitHandle();
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		// 点击支付
		creatOrd() {
			// return;
			let url = 'video_order/create'; 
			if ( this.ordInfo.order_amount <= 0) {
				this.pay_type = 3;
			}
			this.$api
				.request(url, {
					video_id: this.goodInfo.id,
					coupon_id: this.coupon.id || '',
					pay_type: this.pay_type
				})
				.then(data => {
					if (data.code == 200) {
						this.ordId = data.data;
						if (this.pay_type == 1) {
							this.emitHandle();
						} else if (this.pay_type == 2) {
							this.payShow = true;
						} else {
							this.emitHandle();
						}
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		// 点击支付
		emitHandle() {
			// return;
			let url = 'payment/videoPay';
			this.$api
				.request(url, {
					order_id: this.ordId || '',
					pay_type: this.pay_type 
				})
				.then(data => { 
					if (this.pay_type != 1) {
						this.$api.toast(data.msg);
						if (data.code == 200) {
							setTimeout(res => {
								uni.navigateTo({
									url: '/pages/user/mine/buy'
								});
							}, 600);
						}
					} else {
						if (data.code && data.code != 200) {
							this.$api.toast(data.msg || '获取支付信息失败');
							return;
						}
						console.log(data);
						const orderInfo = data;
						const { timeStamp, nonceStr, paySign } = orderInfo;
						const payParams = {
							provider: 'wxpay',
							orderInfo: data,
							timeStamp,
							nonceStr,
							package: orderInfo.package,
							signType: 'MD5',
							paySign,
							success: e => {
								this.$api.toast('支付成功');
								setTimeout(res => {
									uni.navigateTo({
										url: '/pages/user/mine/buy'
									});
								}, 600);
							},
							fail: err => {
								if (err.errMsg.indexOf('取消') > -1 || err.errMsg.indexOf('cancel') > 1 || err.errMsg.indexOf('-2') > -1) {
									this.$api.toast('取消支付');
								} else {
									this.$api.toast('支付遇到错误，请稍候重试');
									console.log(err);
								}
							}
						};
						uni.requestPayment(payParams);
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.pagecon {
	padding-bottom: 100rpx;
	.conwarp {
		background-color: #fff;
		padding: 26rpx 30rpx 39rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		.gdHead {
			line-height: 58rpx;
			margin-bottom: 16rpx;
			.head {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 48rpx;
			}
			.desc {
				background: #f89638;
				border-radius: 5rpx;
				font-size: 18rpx;
				height: 32rpx;
				line-height: 32rpx;
				padding: 0rpx 8rpx;
				display: inline-block;
				color: #fff;
				margin-left: 10rpx;
				&:nth-of-type(2) {
					background: #7fc06e;
				}
				&:nth-of-type(3) {
					background: #75b2c4;
				}
				&:nth-of-type(4) {
					background: #8875c0;
				}
			}
		}
	}
	.monBox {
		margin-top: 20rpx;
		background-color: #fff;
		.payInfo {
			padding: 35rpx 0;
			.payicon {
				width: 68rpx;
				height: 68rpx;
			}
			.flex1 {
				margin: 0 15rpx;
			}
			.fontmid {
				flex: 1;
			}
			.payselicon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.fixBox {
		justify-content: flex-end;
		font-size: 32rpx;
		padding: 0 30rpx;
		.prosecond {
			// text-align: right;
			// flex: 1;
			text {
				font-size: 28rpx;
				color: $prosecond;
			}
			font-size: 42rpx;
			font-family: DIN-Regular, DIN;
			font-weight: 400;
		}
		.clickbtn {
			margin: 0 0 0 20rpx;
			width: 214rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #ed742f;
			border-radius: 40rpx;
		}
	}
}
</style>