campus-errand/miniapp/pages/runner/certification.vue

<template>
	<view class="cert-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<view class="nav-back" @click="goBack">
					<image class="back-icon" src="/static/ic_back.png" mode="aspectFit"></image>
				</view>
				<text class="navbar-title">跑腿认证</text>
				<view class="nav-placeholder"></view>
			</view>
		</view>
		<view :style="{ height: (statusBarHeight + 44) + 'px' }"></view>
		<view class="page-body">
			<!-- 已认证状态 -->
			<view v-if="certStatus === 'Approved'" class="status-card success">
				<text class="status-icon">✓</text>
				<text class="status-text">已通过跑腿认证</text>
			</view>

			<!-- 审核中状态 -->
			<view v-else-if="certStatus === 'Pending'" class="status-card pending">
				<text class="status-icon">⏳</text>
				<text class="status-text">平台审核中</text>
				<text class="status-hint">请耐心等待审核结果</text>
			</view>

			<!-- 未认证/被拒绝，显示认证表单 -->
			<view v-else class="cert-form-section">
				<view class="form-card">
					<text class="form-title">跑腿认证</text>
					<text class="form-desc">完成认证后即可接单赚取佣金</text>

					<view class="form-item">
						<text class="form-label">姓名</text>
						<input class="form-input" v-model="form.realName" placeholder="请输入真实姓名" />
					</view>
					<view class="form-item">
						<text class="form-label">手机号</text>
						<input class="form-input" v-model="form.phone" type="number" placeholder="请输入手机号" maxlength="11" />
					</view>

					<view class="submit-btn" :class="{ disabled: submitting }" @click="submitCert">
						<text>{{ submitting ? '提交中...' : '提交认证' }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getCertificationStatus, submitCertification } from '../../utils/api'

export default {
	data() {
		return {
			certStatus: null,
			form: { realName: '', phone: '' },
			submitting: false,
			statusBarHeight: 0
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 0
		this.loadStatus()
	},
	methods: {
		goBack() { uni.navigateBack() },
		/** 加载认证状态 */
		async loadStatus() {
			try {
				const res = await getCertificationStatus()
				this.certStatus = res?.status || null
			} catch (e) {
				this.certStatus = null
			}
		},

		/** 提交认证 */
		async submitCert() {
			if (this.submitting) return
			if (!this.form.realName.trim()) {
				uni.showToast({ title: '请输入姓名', icon: 'none' })
				return
			}
			if (!this.form.phone.trim() || this.form.phone.length < 11) {
				uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
				return
			}
			this.submitting = true
			try {
				await submitCertification({
					realName: this.form.realName.trim(),
					phone: this.form.phone.trim()
				})
				this.certStatus = 'Pending'
				uni.showToast({ title: '认证已提交', icon: 'success' })
			} catch (e) {
				// 错误已在 request 中处理
			} finally {
				this.submitting = false
			}
		}
	}
}
</script>

<style scoped>
/* 自定义导航栏 */
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	background: #FFB700;
}
.navbar-content {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
}
.nav-back {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.back-icon {
	width: 40rpx;
	height: 40rpx;
}
.navbar-title {
	font-size: 34rpx;
	font-weight: bold;
	color: #363636;
}
.nav-placeholder {
	width: 60rpx;
}
.cert-page {
	height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.page-body {
	flex: 1;
	padding: 40rpx 24rpx;
}

.status-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 80rpx 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.status-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
}

.status-card.success .status-icon {
	color: #52c41a;
}

.status-card.pending .status-icon {
	color: #faad14;
}

.status-text {
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
}

.status-hint {
	font-size: 26rpx;
	color: #999999;
	margin-top: 12rpx;
}

.form-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 40rpx 30rpx;
}

.form-title {
	font-size: 34rpx;
	color: #333333;
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
}

.form-desc {
	font-size: 26rpx;
	color: #999999;
	display: block;
	margin-bottom: 40rpx;
}

.form-item {
	margin-bottom: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	padding-bottom: 16rpx;
}

.form-label {
	font-size: 28rpx;
	color: #333333;
	display: block;
	margin-bottom: 12rpx;
}

.form-input {
	font-size: 28rpx;
	color: #333333;
	height: 64rpx;
}

.submit-btn {
	background-color: #007AFF;
	color: #ffffff;
	text-align: center;
	padding: 24rpx 0;
	border-radius: 12rpx;
	margin-top: 40rpx;
}

.submit-btn.disabled {
	opacity: 0.6;
}

.submit-btn text {
	font-size: 30rpx;
	color: #ffffff;
}
</style>