LocalLivingServicesUniapp/pages/topUp/status.vue

<template>
	<view class="page">
		<u-navbar title="储值管理" :autoBack="true" :placeholder="true"></u-navbar>
		<!-- 遮罩弹窗：审核中 / 申请失败 -->
		<view class="mask" v-if="!loading">
			<view class="dialog" @click.stop>
				<!-- 审核中 auditStatus=1 -->
				<template v-if="auditStatus === 1">
					<view class="title">提交申请</view>
					<view class="msg">您已提交申请，请耐心等待平台审核。</view>
					<view class="btn" @click="goHome">我知道了</view>
				</template>

				<!-- 已驳回 auditStatus=3 -->
				<template v-else-if="auditStatus === 3">
					<view class="title">申请失败</view>
					<view class="reason-block" v-if="rejectReason">
						<text class="reason-label">原因：</text>
						<text class="reason-text">{{ rejectReason }}</text>
					</view>
					<view class="reason-block" v-else>
						<text class="reason-text">暂无失败原因说明</text>
					</view>
					<view
						class="btn"
						:class="{ disabled: reapplyStatus === 1 }"
						@click="reApply"
					>
						{{ reapplyStatus === 1 ? '暂不可重新申请' : '重新申请' }}
					</view>
				</template>

				<!-- 异常兜底 -->
				<template v-else>
					<view class="msg">状态异常，请返回重试</view>
					<view class="btn" @click="goBack">返回</view>
				</template>
			</view>
		</view>

		<view class="loading" v-else>
			<u-loading mode="circle" size="48"></u-loading>
		</view>
	</view>
</template>

<script>
	import prepaidApi, { getMerchantId } from '@/api/memberPrepaid.js'

	export default {
		data() {
			return {
				loading: true,
				auditStatus: 1,
				reapplyStatus: 0,
				rejectReason: ''
			};
		},
		onShow() {
			this.loadStatus();
		},
		methods: {
			loadStatus() {
				const merchantId = getMerchantId();
				if (!merchantId) {
					this.loading = false;
					uni.showToast({ title: '未获取到门店信息', icon: 'none' });
					return;
				}
				this.loading = true;
				prepaidApi
					.getFeatureStatus(merchantId)
					.then((res) => {
						if (res.data.code !== 200) {
							uni.showToast({ title: res.data.message || '加载失败', icon: 'none' });
							return;
						}
						const data = res.data.result || {};
						this.auditStatus = Number(data.auditStatus);
						this.reapplyStatus = Number(data.reapplyStatus);
						this.rejectReason = data.rejectReason || '';
						if (this.auditStatus === 0) {
							uni.redirectTo({ url: '/pages/topUp/agreement' });
						} else if (this.auditStatus === 2) {
							uni.redirectTo({ url: '/pages/topUp/manage' });
						}
					})
					.catch(() => {
						uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
					})
					.finally(() => {
						this.loading = false;
					});
			},
			goHome() {
				uni.switchTab({ url: '/pages/index/index' });
			},
			goBack() {
				uni.redirectTo({ url: '/pages/topUp/index' });
			},
			reApply() {
				if (this.reapplyStatus === 1) {
					uni.showToast({ title: '当前不可重新申请', icon: 'none' });
					return;
				}
				uni.redirectTo({ url: '/pages/topUp/agreement?reapply=1' });
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		min-height: 100vh;
		background: #f7f7f7;
	}

	.mask {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.45);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		padding: 0 64rpx;
		box-sizing: border-box;
	}

	.dialog {
		width: 100%;
		background: #fff;
		border-radius: 24rpx;
		padding: 56rpx 48rpx 48rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.loading {
		padding-top: 200rpx;
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
		color: #1a1a1a;
		text-align: center;
		margin-bottom: 28rpx;
	}

	.msg {
		font-size: 28rpx;
		color: #333;
		text-align: center;
		line-height: 1.7;
		margin-bottom: 48rpx;
	}

	.reason-block {
		width: 100%;
		margin-bottom: 48rpx;
		font-size: 28rpx;
		line-height: 1.7;
		color: #333;
		word-break: break-all;
		text-align: left;
	}

	.reason-label {
		color: #333;
	}

	.reason-text {
		color: #333;
	}

	.btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(90deg, #51a2ff 0%, #4ec2ff 100%);
		color: #fff;
		font-size: 32rpx;
		border-radius: 140rpx;

		&.disabled {
			opacity: 0.5;
		}
	}
</style>