xingmingyi_applet/pages/pay/pay.vue

<template>
	<view class="pagecon">
		<view class="conwarp">
			<view class="gdHead"><view class="head textgrey">选择文档</view></view>
			<view class="cl-one"><video-list :selType="pay_type" @getItem="getItem" :flag="3" :list="goodInfo.files"></video-list></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>
					<!-- <image class="payselicon" :src="pay_type == 3 ? '/static/img/pro/chenggong.png' : '/static/img/pro/wxz.png'" mode=""></image> -->
				</view>
			</view>
		</view>
		<view class="fixBox dffs">
			<view class="fontbase">应付：</view>
			<text class=" prosecond">{{ pay_type == 1 ? money : bean }}</text>
			<text class="fontsm flex1">会员折扣{{ userInfo.userInfo.jing_discount || 0 }}折</text>

			<view @click="creatOrd()" class="clickbtn fontmid">{{ hidePay ? '免费下载': '确定下载' }}</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=学豆
			money: 0, //应付
			bean: 0, //应付
			payShow: false, //支付密码
			coupon: { reduce: 0 },
			ids: '',
			ordId: ''
		};
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo })
	},
	async onLoad(opt) {
		this.id = opt.id;
		await this.$store.dispatch('getUserInfo');
		await this.loadData();
	},
	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;
			}
		},
		/**
		 * 请求数据只是为了代码不那么乱
		 * 分次请求未作整合
		 */
		async loadData() {
			let url = 'index/getClassInfo';
			this.$api
				.request(url, {
					id: this.id
				})
				.then(res => {
					if (res.code == '200') {
						let data = res.data;
						data.files.forEach(item => {
							item.sel = false;
						});
						this.goodInfo = data;
					}
				});
		},
		// 选择优惠券
		nextTo() {
			if (this.pay_type == 1) return this.$api.toast('余额支付不能使用优惠券');
			uni.navigateTo({
				url: '/pages/user/coupon/myCoup?money=' + this.money
			});
		},
		// 点击
		getItem(sel, index) {
			this.goodInfo.files[index].sel = sel;
			let arr = this.goodInfo.files;
			let mon = 0;
			let beans = 0;
			let id = [];
			arr.forEach(res => {
				if (res.sel) {
					mon = parseFloat(mon) + parseFloat(res.price);
					beans = parseFloat(beans) + parseFloat(res.bean);
					id.push(res.id);
				}
			});
			let total =
				this.userInfo.userInfo.jing_discount == 0
					? parseFloat(mon - this.coupon.reduce).toFixed(2)
					: parseFloat((mon * this.userInfo.userInfo.jing_discount) / 10 - this.coupon.reduce).toFixed(2);
			this.money = total;
			this.bean = parseFloat(beans).toFixed(2) || '';
			this.ids = id.toString();
			// console.log('bean: ',this.bean);
			if ((this.money == 0 && this.ids) || (this.bean == 0 && this.ids)) {
				this.hidePay = true;
			} else {
				this.hidePay = false;
			}
		},
		// 学豆支付
		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 = 'files_order/create'; 
			let money = parseFloat(this.money) * parseFloat(this.userInfo.userInfo.jing_discount / 10) - parseFloat(this.coupon.reduce);
			if ((this.hidePay && this.pay_type == 2) || money <= 0) {
				this.pay_type = 3;
			}
			this.$api
				.request(url, {
					ids: this.ids,
					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/filePay';
			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/down'
								});
							}, 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/down'
									});
								}, 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;
				line-height: 48rpx;
			}
		}
	}
	.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>