psy_web_share/newScale/EQtest/paymentPage.vue

<template>
	<view class="payment_bg">
		<view class="payment_info">
			<image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_scale_info.png"
				mode="widthFix">
			</image>
			<image class="pay_btn_sm" @click="createOrder"
				src="https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_button.png"
				mode="widthFix"></image>
		</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="createOrder">
			<image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_button.png"
				mode="widthFix"></image>
		</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: {}
			}
		},
		onLoad(options) {},
		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;
						}
					});
			},

			createOrder() {
				let _this = this;
				_this.orderInfo = uni.getStorageSync('orderInfo');
				let params = {
					resultId: _this.orderInfo.resultId,
					subject: _this.orderInfo.description,
					body: _this.orderInfo.description,
					total_amount: _this.orderInfo.total * 100,
					msgPage: "",
				}
				_this.$request
					.post({
						url: "api/douyin/createOrder",
						loadingTip: "加载中...",
						data: params
					})
					.then((res) => {
						_this.orderNo = res.data.orderNo;
						let imageUrl = 'https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/banner1.png';
						// _this.syncOrder({
						// 	resultId: params.resultId,
						// 	total_amount: params * 100,
						// 	subject: params.subject,
						// 	path: `/newScale/EQtest/testResult?resultId=${_this.orderInfo.resultId}&messageShare=1`,
						// 	orderNo: _this.orderNo,
						// 	openId: uni.getStorageSync("setUerInfo").openId,
						// 	orderStatus: "1",
						// 	imgPath: imageUrl,
						// });
						_this.payToutiao(
							res.data.orderId,
							res.data.orderToken,
							res.data.orderNo
						);
					});
			},
			payToutiao(orderId, orderToken, orderNo) {
				let _this = this;
				tt.pay({
					orderInfo: {
						order_id: orderId,
						order_token: orderToken,
					},
					service: 5,
					success: (response) => {
						_this.timer = setInterval(() => {
							_this.getQueryOrder(orderNo);
						}, 1000);
					},
					fail: (err) => {
						uni.showToast({
							icon: "none",
							name: "支付失败",
						});
					},
				});
			},
			// 订单状态
			getQueryOrder(orderNo) {
				let _this = this;
				_this.$request
					.get({
						url: `api/douyin/queryOrder/${orderNo}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then((res) => {
						if (res.code == "200") {
							if (res.data.statusCode == "SUCCESS") {
								let imageUrl =
									'https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/banner1.png';
								// _this.syncOrder({
								// 	resultId: _this.orderInfo.resultId,
								// 	total_amount: _this.orderInfo.total * 100,
								// 	subject: _this.orderInfo.description.subject,
								// 	path: `/newScale/EQtest/testResult?resultId=${_this.orderInfo.resultId}&messageShare=1`,
								// 	orderNo: _this.orderNo,
								// 	openId: uni.getStorageSync("setUerInfo").openId,
								// 	orderStatus: "2",
								// 	imgPath: imageUrl,
								// });
								uni.navigateTo({
									url: `/newScale/EQtest/testResult?resultId=${_this.orderInfo.resultId}&messageShare=1`
								});

								clearInterval(_this.timer);
								uni.showToast({
									title: "支付成功",
								});
							} else if (res.data.statusCode == "CLOSED") {
								// console.log("订单支付回调成功===========CLOSED》", _this.trade_state_closed );
							} else {
								clearInterval(_this.timer);
								// console.log("订单支付回调成功CLOSED===========》", _this.trade_state_closed);
							}
						} else {
							uni.showToast({
								title: "支付失败",
							});
						}
					});
			},
			// 同步订单
			syncOrder(params) {
				this.$request
					.post({
						url: "api/douyin/pushOrder",
						loadingTip: "加载中...",
						data: params,
					})
					.then((res) => {
						console.log(res);
					})
					.catch((err) => {
						console.log(err);
					});
			}
		}
	}
</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 {
		position: relative;
	}

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

	.payment_info .pay_btn_sm {
		width: 640rpx;
		height: auto;
		position: absolute;
		left: 55rpx;
		bottom: 73rpx;
	}

	.payment_desc image {
		width: 750rpx;
	}

	.pay_btn_lg {
		width: 640rpx;
		margin: 40rpx auto;
	}

	.pay_btn_lg image {
		width: 640rpx;
		height: auto;
	}

	.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;
	}
</style>