psy_web_share/newScale/EQtest/paymentPage.vue

<template>
	<view class="payment_bg">
		<view class="payment_info">
			<view class="people_num"><text>{{peopleNum}}人已测</text></view>
			<view class="price_num"><text>￥{{orderInfo.total}}</text></view>
			<view class="pay_btn_sm" @click="getH5Pay()">{{orderInfo.total}}元解锁专属测试报告</view>
		</view>
		<view class="payment_desc">
			<image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_scale_desc.png"
				mode="widthFix"></image>
		</view>
		<view class="pay_btn_lg" @click="getH5Pay()">
			{{orderInfo.total}}元解锁专属测试报告
		</view>
		<uni-popup ref="popup" type="center">
			<view class="pay_dialog">
				<view class="btn_area">
					<image style="margin-right: 89rpx;" @click="completeHandle"
						src="https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/complete_btn.png"
						mode="widthFix"></image>
					<image @click="uncompleteHandle"
						src="https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/uncomplete_btn.png"
						mode="widthFix"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNo: '',
				orderInfo: {},
				peopleNum: 0
			}
		},
		onLoad(options) {
			if (options.orderNo) {
				this.orderNo = options.orderNo;
				setTimeout(() => {
					this.payEnsure();
				}, 200)
			}
			this.orderInfo = JSON.parse(sessionStorage.getItem('orderInfo'));
			this.getPeople();
		},
		methods: {
			// 检查订单支付状态
			checkOrder() {
				let _this = this;
				_this.$request
					.get({
						url: `api/wx-pay/queryOrder/${_this.orderNo}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then((res) => {
						uni.hideLoading();
						let resultInfo = JSON.parse(res.data.body)
						if (resultInfo.trade_state === 'SUCCESS') {
							uni.navigateTo({
								url: `/newScale/EQtest/paySuccess?resultId=${this.orderInfo.resultId}&userId=${this.orderInfo.userId}`
							});
						} else {
							return;
						}
					});
			},
			// 拉起微信支付
			getH5Pay(params) {
				let _this = this;
				_this.$request
					.get({
						url: `api/orderInfo/queryOrderByResultIdAndUserId/${this.orderInfo.userId}/${this.orderInfo.resultId}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then((res) => {
						uni.hideLoading();
						if (res.data && res.data.orderStatus === '支付成功') {
							uni.navigateTo({
								url: `/newScale/EQtest/paySuccess?resultId=${this.orderInfo.resultId}&userId=${this.orderInfo.userId}`
							});
						} else {
							// _this.orderInfo.total = _this.hasDiscount ? _this.promotionPrice : _this.price;
							_this.$request
								.post({
									url: "api/wx-pay/h5Pay",
									loadingTip: "加载中...",
									data: _this.orderInfo
								})
								.then((res) => {
									let redirect_url = encodeURI(
										`http://hnhong-duo.com/webo/newScale/EQtest/paymentPage?orderNo=${res.data.orderNo}`
									)
									window.location.href = `${res.data.codeUrl}&redirect_url=${redirect_url}`;
								});
						}
					});
			},
			// 查询测试人数
			getPeople() {
				let _this = this;
				_this.$request
					.get({
						url: "record/countByFlag?flag=20210820143117",
						loadingTip: "加载中..."
					})
					.then((res) => {
						_this.peopleNum = res.data + 57000
					});
			},
			payEnsure() {
				// console.log(11111)
				this.$refs.popup.open();
			},
			uncompleteHandle() {
				this.$refs.popup.close();
			},
			completeHandle() {
				uni.showLoading({
					title: ''
				});
				this.checkOrder();
			}
		}
	}
</script>

<style scoped>
	.payment_bg {
		width: 100%;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/payment_bg.png) no-repeat top;
		background-size: 100% auto;
		overflow: hidden;
	}

	.payment_info {
		width: 750rpx;
		height: 531rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_scale_info.png) no-repeat center;
		background-size: cover;
		position: relative;
		margin-top: 143rpx;
		overflow: hidden;
	}

	.payment_info image {
		width: 100%;
		height: auto;
		margin-top: 134rpx;
	}

	.payment_info .pay_btn_sm {
		width: 640rpx;
		height: 73rpx;
		line-height: 73rpx;
		position: absolute;
		left: 55rpx;
		bottom: 73rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_button.png) no-repeat center;
		background-size: 100% auto;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		text-shadow: 0rpx 0rpx 5rpx rgba(168, 63, 90, 0.5);
		text-align: center;
	}

	.payment_desc image {
		width: 750rpx;
	}

	.pay_btn_lg {
		width: 640rpx;
		height: 73rpx;
		line-height: 73rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_button.png) no-repeat center;
		background-size: 100% auto;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		text-shadow: 0rpx 0rpx 5rpx rgba(168, 63, 90, 0.5);
		text-align: center;
		margin: 20rpx auto 60rpx;
	}

	.pay_dialog {
		width: 594rpx;
		height: 360rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/dialog_bg.png) no-repeat top;
		background-size: cover;
		position: fixed;
		top: 540rpx;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.btn_area {
		margin: 240rpx 0 0 96rpx;
	}

	.btn_area image {
		width: 160rpx;
	}

	.btn_area image:active {
		border: 1rpx solid #999999;
		opacity: 0.8;
		border-radius: 28rpx;
	}

	.people_num {
		margin-top: 177rpx;
	}

	.people_num text {
		min-width: 157rpx;
		height: 44rpx;
		padding: 0 10rpx;
		background: #FFEDF1;
		border-radius: 22rpx;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-size: 28rpx;
		color: #FC716D;
		line-height: 44rpx;
		text-align: center;
		margin-left: 373rpx;
	}

	.price_num {
		margin-top: 72rpx;
	}

	.price_num text {
		min-width: 74rpx;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 32rpx;
		color: #FC716D;
		line-height: 24rpx;
		margin-left: 374rpx;
	}
</style>