h5-meike/pages/ticket/paysuccess.vue

<template>
	<view v-if="obj" class="page mm-page">
		<gmy-back-touch></gmy-back-touch>
		<!-- xuchao: 成功状态英雄区 —— 渐变对勾 + 柔光 -->
		<view class="hero mm-fade-up">
			<view class="hero__icon mm-grad">
				<u-icon name="checkmark" color="#ffffff" size="64"></u-icon>
			</view>
			<view class="hero__title mm-display">支付成功</view>
			<view class="hero__sub">门票订单已提交，请留意出票通知</view>
		</view>

		<!-- xuchao: 支付信息卡 -->
		<view class="card mm-card mm-fade-up">
			<view class="row">
				<text class="row__label">支付方式</text>
				<text class="row__val">微信支付</text>
			</view>
			<view class="row">
				<text class="row__label">实付金额</text>
				<view class="row__price">
					<text class="row__cur">¥</text>
					<text class="row__num mm-display mm-grad-text">{{(obj.order.orderAmount/100).toFixed(2)||0}}</text>
				</view>
			</view>
		</view>

		<!-- xuchao: 操作按钮 —— 主操作渐变、次操作描边 -->
		<view class="acts mm-fade-up">
			<view class="mm-btn" @tap="seeOrder()">查看订单</view>
			<view class="mm-btn-ghost" @tap="toMall()">继续逛逛</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	// xuchao: 支付成功页 —— 支付完成后跳入，轮询订单状态直到后端确认
	var that = ''
	import gmyBackTouch from "@/components/gmy-back-touch/gmy-back-touch.vue"
	export default {
		components: {
			'gmy-back-touch': gmyBackTouch
		},
		data() {
			return {
				id: '',
				obj: "",
				// xuchao: 轮询订单状态（等待后端支付回调把订单从"待支付"更新掉）
				pollTimer: null,
				pollTimes: 5
			}
		},
		onLoad(e) {
			that = this
			that.id = e.id
			that.getOrderDetail()
		},
		onUnload() {
			clearInterval(this.pollTimer)
		},
		methods: {
			seeOrder() {
				uni.reLaunch({
					url: 'orderlist'
				})
			},
			// xuchao: "继续逛逛"回到门票列表（旧版指向的商城页已不存在）
			toMall() {
				uni.reLaunch({
					url: '/pages/ticket/scenic'
				})
			},
			getOrderDetail() {
				that.$u.api.getTicketsOrderDetail({
					id: this.id,
				}).then(res => {
					if (res) {
						this.obj = res.data
						// 订单仍为待支付时轮询，最多 5 次（每次间隔 2 秒）
						if (this.obj.order.orderStatus == 'WAITPAY' && this.pollTimes > 0) {
							clearInterval(this.pollTimer)
							this.pollTimer = setInterval(() => {
								this.pollTimes--
								if (this.pollTimes <= 0) {
									clearInterval(this.pollTimer)
									return
								}
								this.getOrderDetail()
							}, 2000)
						} else {
							clearInterval(this.pollTimer)
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		padding: 96rpx 32rpx 60rpx;
	}

	/* ---------- 英雄区 ---------- */
	.hero {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.hero__icon {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: var(--mm-shadow-accent), 0 0 0 24rpx rgba(0, 82, 255, 0.06);
	}

	.hero__title {
		margin-top: 36rpx;
		font-size: 48rpx;
		color: var(--mm-fg);
	}

	.hero__sub {
		margin-top: 12rpx;
		font-size: 24rpx;
		color: var(--mm-muted-fg);
	}

	/* ---------- 支付信息卡 ---------- */
	.card {
		margin-top: 64rpx;
		padding: 8rpx 32rpx;
	}

	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 104rpx;

		&:first-child {
			border-bottom: 2rpx solid var(--mm-muted);
		}
	}

	.row__label {
		font-size: 28rpx;
		color: var(--mm-muted-fg);
	}

	.row__val {
		font-size: 28rpx;
		font-weight: 500;
		color: var(--mm-fg);
	}

	.row__price {
		display: flex;
		align-items: baseline;
	}

	.row__cur {
		font-size: 26rpx;
		font-weight: 600;
		color: var(--mm-accent);
		margin-right: 4rpx;
	}

	.row__num {
		font-size: 44rpx;
		line-height: 1;
	}

	/* ---------- 操作按钮 ---------- */
	.acts {
		margin-top: 64rpx;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}
</style>