nc.963.cn/pages/score/score.vue

<template>
	<view class="main-page">
		<view class="img">
			<image src="../../static/img/zhishang.png"></image>
		</view>
		<view>{{ book_name }}</view>
		<view>你的测评已完成，支付完成后查看测评结果。</view>
		<view @click="pay(1)"><span>
				<image src="../../static/img/zhipay.png"></image>支付宝支付
			</span>
		</view>
		<view @click="pay(2)">
			<span>
				<image src="../../static/img/weipay.png"></image>微信支付
			</span>
		</view>
		<view class="weixin_pc" v-if="pc_pay">
			<view class="pc_popup">
				<view>
					<p>微信支付</p>
					<p>订单编号：{{ oid }}</p>
				</view>
				<view>
					<view id="qrcode" ref="qrcode" class="qrCodeUrl"></view>
					<p>￥{{ price }}</p>
					<view class="butns"><a @click="getpcpay">取消</a></view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import QRCode from "qrcodejs2";
	import {
		mapGetters
	} from 'vuex';
	import {
		wxpayJspay,
		alipayH5pay,
		wxpayH5pay,
		wxpayWeb,
		alipayWeb
	} from '../../api/pay.js';
	import { getorderResult } from '../../api/test.js';
	export default {
		data() {
			return {
				pc_pay: false,
				is_apill: false,
				score: 0,
				name_id: '',
				nums: '',
				payForm: '',
				time: '',
				sign: '',
				oid: '',
				book_name: '',
				price: 0
			};
		},
		onLoad(option) {
			this.book_name = option.book_name;
			this.name_id = option.name_id;
			this.price = option.price;
			this.score = option.score;
			this.oid = option.orderId;
			this.$store.commit("user/SET_ALLSCORCE", option.score);
			this.$store.commit("user/SET_NAMEID", option.name_id);
			this.$store.commit("user/SET_OID", option.orderId);
		},
		computed: {
			...mapGetters(['WXCode', 'openId']),
		},
		methods: {
			//取消微信支付
			getpcpay(){
				this.pc_pay = !this.pc_pay;
				clearInterval(timer)
			},
			//判断是否微信环境登录
			isWeiXinLogin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			//支付
			pay(paytype) {
				let browser = this.$browser;
				let that = this;
				if (this.isWeiXinLogin()) {
					if (paytype == 1) {
						// 微信公众中支付宝支付
						uni.showToast({
							icon: 'none',
							position: 'center',
							title: '微信中暂时不支持支付宝，请使用微信支付！'
						});
					} else {
						// 微信公众号支付
						wxpayJspay({
							out_trade_no: this.oid,
							openid: this.openId
						}).then(res => {
							if (res.code == 1) {
								var jweixin = require('jweixin-module');
								jweixin.config({
									debug: false,
									appId: res.data.appId,
									timestamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									signature: res.data.paySign,
									jsApiList: ['chooseWXPay']
								});
								jweixin.ready(function() {
									jweixin.chooseWXPay({
										timestamp: Number(res.data.timeStamp),
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										signType: res.data.signType,
										paySign: res.data.paySign,
										success: function(res) {
											//支付成功后处理事件
											that.payResult();
										},
										fail: function(err) {
											// 取消支付后处理事件
											console.log('fail:' + err);
										}
									});
								});
								jweixin.error(function(res) {
									console.log('报错信息', res)
								});

							}
						})
					}
				} else {
					if (paytype == 1) {
						if (browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions
							.iPhone || browser.versions.iPad) {
							//移动端支付宝支付
							alipayH5pay({
								out_trade_no: this.oid
							}).then(res => {
								uni.setStorageSync('form', res)
								uni.navigateTo({
									url: '/pages/apilypay/apilypay'
								})
								
							})
						} else {
							//pc端支付宝支付
							alipayWeb({
								out_trade_no: this.oid
							}).then(res => {
								if(res.code == 1){
									uni.setStorageSync('form', res.data)
									uni.navigateTo({
										url: '/pages/apilypay/apilypay'
									})
								}
								
							})
						}
					} else {
						if (browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions
							.iPhone || browser.versions.iPad) {
							//移动端微信支付
							wxpayH5pay({
								out_trade_no: this.oid
							}).then(res => {
								if (res.code == 1) {
									location.href = res.data;
								}
							})
						} else {
							//pc端微信支付
							wxpayWeb({
								out_trade_no: this.oid
							}).then(res => {
								if (res.code == 1) {
									// 先显示微信支付弹窗
									this.pc_pay = true;
									// 在生成支付二维码
									this.$nextTick(() => {
										this.qrcode = new QRCode("qrcode", {
										  width: 180,//二维码宽度
										  height: 180,//二维码高度
										  text: res.data.code_url,//调用微信支付接口返回的微信特殊链接：例如"weixin://wxpay/bizpayurl?pr=uDKsQ4E00"
										  colorDark: "#000",//颜色配置
										  colorLight: "#fff",
										});
									});
									window.timer = setInterval(() => {
									  setTimeout(this.pcpay(), 0)
									}, 2000)
								}
							})
						}
					}
				}
			},
			// pc端微信支付每2秒查询一次接口
			pcpay() {
				getorderResult({oid:this.oid}).then(res => {
					if (res.code == 1) {
						this.pc_pay = false;
						clearInterval(timer)
						uni.navigateTo({
							url: '../result/result'
						})
					}
				})
			},
			//微信支付
			payResult() {
				uni.navigateTo({
					url: '/pages/result/result?name_id=' + this.name_id + '&score=' + this.score
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.main-page {
		width: 100%;
		text-align: center;

		.img {
			width: 350upx;
			height: 320upx;
			margin: 130upx auto 60upx auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		view {
			&:nth-child(2) {
				font-size: 44upx;
				font-weight: 600;
				letter-spacing: 2upx;
				color: #333333;
			}

			&:nth-child(3) {
				font-size: 28upx;
				font-weight: 400;
				color: #5D5D5D;
				margin-top: 32upx;
			}

			&:nth-child(4),
			&:nth-child(5) {
				width: 606upx;
				margin: auto;
				height: 80upx;
				line-height: 80upx;
				border-radius: 50upx;
				text-align: center;
				color: #fff;

				image {
					width: 60upx;
					height: 60upx;
					margin-top: 10upx;
					display: inline-block;
					position: absolute;
					left: -70upx;
				}

				span {
					position: relative;
					height: 80upx;
					margin-left: 60upx;
					line-height: 80upx;
					display: inline-block;
				}
			}

			&:nth-child(4) {
				background: #06B4FD;
				margin-top: 48upx;
			}

			&:nth-child(5) {
				margin-top: 36upx;
				background-color: #07C160;
			}
		}

		.weixin_pc {
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.3);

			.pc_popup {
				position: absolute;
				width: 900upx;
				overflow: hidden;
				padding: 40upx 60upx;
				height: 1000upx;
				background-color: #FFFFFF;
				left: calc((100vw - 900upx)/2);
				top: calc((100vh - 1000upx)/2);
				color: #484848;
				z-index: 100;

				view {
					&:nth-child(1) {
						p {
							text-align: left;

							&:nth-child(1) {
								font-size: 50upx;
								color: #06C05F;
								font-weight: bold;
							}

							&:nth-child(2) {
								font-size: 32upx;
								padding-bottom: 100upx;
								margin-top: 30upx;
								border-bottom: 2upx solid #E7EBED;
							}
						}
					}

					&:nth-child(2) {
						text-align: center;
						margin-top: 40upx;

						p {
							color: #ff6600;
							margin-top: 40upx;
						}

						.qrCodeUrl {
							display: block;
							margin: auto;
							width: 360upx;
							height: 360upx;
						}
						.butns{
							margin-top: 60upx;
							text-align: center;
							a{
								display: inline-block;
								width: 360upx;
								height: 70upx;
								line-height: 70upx;
								font-size: 32upx;
								background-color: #efd140;
							}
						}
					}
					
				}
			}
		}
	}
</style>