zyejMAll-mobile/pages/pay/result.vue

<!-- 支付结果页面 -->
<template>
	<s-layout title="支付结果" :bgStyle="{ color: '#FFF' }">
		<view class="main">
			<image
				src="https://zysc.fjptzykj.com:3000/shangcheng/7bab925772a5b878b75dcc35e5ebd1d6e6c2e776752554526a71ecd1371c24db.png"
				class="img" mode=""></image>
			<view class="title" v-if="payResult === 'success'">订单支付成功</view>
			<view class="title" v-if="payResult === 'failed'">支付失败</view>
			<view class="title" v-if="payResult === 'closed'">该订单已关闭</view>
			<view class="title" v-if="payResult === 'waiting'">检测支付结果...</view>
			<!-- <view class="title">订单支付成功</view> -->
			<view class="fgx"></view>
			<view class="ddxx">
				<view class="l">
					订单号
				</view>
				<view class="r">
					{{ state.orderInfo.no }}
				</view>
			</view>
			<view class="ddxx">
				<view class="l">
					下单时间
				</view>
				<view class="r">
					{{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
				</view>
			</view>
			<view class="ddxx">
				<view class="l">
					支付方式
				</view>
				<view class="r">
					支付余额
				</view>
			</view>
			<view class="ddxx">
				<view class="l">
					支付余额
				</view>
				<view class="r">
					￥{{ fen2yuan(state.orderInfo.price) }}
				</view>
			</view>
			<view class="fgx"></view>
			<view class="ck-detail" v-if="payResult === 'failed'" @tap="sheep.$router.redirect('/pages/pay/index', { id: state.id, orderType: state.orderType })">
				重新支付
			</view>
			<view class="ck-detail" v-if="payResult === 'success' && state.tradeOrder.type === 3" @tap="sheep.$router.redirect('/pages/activity/groupon/order')">
				我的拼团
			</view>
			<view class="ck-detail" v-if="payResult === 'success'" @tap="onOrder">
				查看订单
			</view>
			<view class="bk-home" @click="sheep.$router.go('/pages/index/index');">
				返回首页
			</view>
			
			<!-- TODO 芋艿：订阅 -->
			<!-- #ifdef MP -->
			<view class="subscribe-box ss-flex ss-m-t-44">
				<image class="subscribe-img" :src="sheep.$url.static('/static/img/shop/order/cargo.png')" />
				<view class="subscribe-title ss-m-r-48 ss-m-l-16">获取实时发货信息与订单状态</view>
				<view class="subscribe-start" @tap="subscribeMessage">立即订阅</view>
			</view>
			<!-- #endif -->
		</view>
	</s-layout>
</template>

<script setup>
	import {
		onLoad,
		onHide,
		onShow
	} from '@dcloudio/uni-app';
	import {
		reactive,
		computed
	} from 'vue';
	import {
		isEmpty
	} from 'lodash';
	import sheep from '@/sheep';
	import PayOrderApi from '@/sheep/api/pay/order';
	import {
		fen2yuan
	} from '../../sheep/hooks/useGoods';
	import OrderApi from '@/sheep/api/trade/order';

	const state = reactive({
		id: 0, // 支付单号
		orderType: 'goods', // 订单类型
		result: 'unpaid', // 支付状态
		orderInfo: {}, // 支付订单信息
		tradeOrder: {}, // 商品订单信息，只有在 orderType 为 goods 才会请求。目的：【我的拼团】按钮的展示
		counter: 0, // 获取结果次数
	});

	// 支付结果 result => payResult
	const payResult = computed(() => {
		if (state.result === 'unpaid') {
			return 'waiting';
		}
		if (state.result === 'paid') {
			return 'success';
		}
		if (state.result === 'failed') {
			return 'failed';
		}
		if (state.result === 'closed') {
			return 'closed';
		}
	});

	// 获得订单信息
	async function getOrderInfo(id) {
		state.counter++;
		// 1. 加载订单信息
		const {
			data,
			code
		} = await PayOrderApi.getOrder(id);
		if (code === 0) {
			state.orderInfo = data;
			if (!state.orderInfo || state.orderInfo.status === 30) {
				// 支付关闭
				state.result = 'closed';
				return;
			}
			if (state.orderInfo.status !== 0) {
				// 非待支付，可能是已支付，可能是已退款
				state.result = 'paid';
				// #ifdef MP
				subscribeMessage();
				// #endif
				// 特殊：获得商品订单信息
				if (state.orderType === 'goods') {
					const {
						data,
						code
					} = await OrderApi.getOrder(state.orderInfo.merchantOrderId);
					if (code === 0) {
						state.tradeOrder = data;
					}
				}
				return;
			}
		}
		// 2.1 情况三一：未支付，且轮询次数小于三次，则继续轮询
		if (state.counter < 3 && state.result === 'unpaid') {
			setTimeout(() => {
				getOrderInfo(id);
			}, 1500);
		}
		// 2.2 情况二：超过三次检测才判断为支付失败
		if (state.counter >= 3) {
			state.result = 'failed';
		}
	}

	function onOrder() {
		// TODO 芋艿：待测试
		if (state.orderType === 'recharge') {
			sheep.$router.redirect('/pages/pay/recharge-log');
		} else {
			sheep.$router.redirect('/pages/order/list');
		}
	}

	// TODO 芋艿：待测试
	// #ifdef MP
	function subscribeMessage() {
		let event = ['order_dispatched'];
		if (state.tradeOrder.type === 3) {
			event.push('groupon_finish');
			event.push('groupon_fail');
		}
		sheep.$platform.useProvider('wechat').subscribeMessage(event);
	}
	// #endif

	onLoad(async (options) => {
		// 支付订单号
		if (options.id) {
			state.id = options.id;
		}
		// 订单类型
		if (options.orderType) {
			state.orderType = options.orderType;
		}

		// 支付结果传值过来是失败，则直接显示失败界面
		if (options.payState === 'fail') {
			state.result = 'failed';
		} else {
			// 轮询三次检测订单支付结果
			await getOrderInfo(state.id);
		}
	});

	onShow(() => {
		if (isEmpty(state.orderInfo)) {
			return;
		}
		getOrderInfo(state.id);
	});

	onHide(() => {
		state.result = 'unpaid';
		state.counter = 0;
	});
</script>
<style lang="scss" scope>
	.main {
		background: white;
		width: 85%;
		padding: 15px;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 12px;

		.img {
			width: 80px;
			height: 80px;
			display: block;
			margin: 0 auto;
			margin-top: -52px;
		}

		.title {
			text-align: center;
			font-size: 18px;
			margin: 15px 0;
			font-weight: 700;
		}

		.ddxx {
			display: flex;
			justify-content: space-between;
			margin: 10px 0;

			.l {
				font-size: 17px;
			}

			.r {
				font-size: 16px;
				color: rbga(102, 102, 102);
			}
		}

		.fgx {
			margin: 20px 0;
			height: 1px;
			width: 100%;
			background: rgba(239, 239, 239);
		}

		.ck-detail {
			// background: rgba(254,92,45);
			background: rgba(230, 50, 34);
			padding: 10px 0;
			color: white;
			font-size: 19px;
			text-align: center;
			width: 100%;
			margin-bottom: 15px;
			border-radius: 31px;
		}

		.bk-home {
			border: 1px solid rgba(230, 50, 34);
			padding: 10px 0;
			color: rgba(230, 50, 34);
			font-size: 19px;
			text-align: center;
			width: 100%;
			border-radius: 31px;
		}

	}
</style>