yxe-mp/pages/auth/login.vue

<template>
	<view class="login-page">
		<view class="page-hero">
			<AppNavbar class="page-navbar" title="微信一键登录"/>
			<view class="intro-card">
				<view class="card-title">
					<view class="title-bar"></view>
					<text>微信一键登录</text>
				</view>
				<text class="intro-text">需勾选用户协议与隐私协议，并授权手机号。身份认证需身份证正反面，职业资格证可额外上传。</text>
				<view class="hero-tags">
					<view class="chip">微信授权</view>
					<view class="chip">手机号授权</view>
					<view class="chip">身份认证</view>
				</view>
			</view>
		</view>

		<view class="card block">
			<view class="section-title">授权登录</view>
			<view class="agreements">
				<label class="agreement">
					<checkbox :checked="agreeUser" color="#2563eb" @tap.stop="toggleAgreement('user')" />
					<text>我已阅读并同意《用户协议》</text>
				</label>
				<label class="agreement">
					<checkbox :checked="agreePrivacy" color="#2563eb" @tap.stop="toggleAgreement('privacy')" />
					<text>我已阅读并同意《隐私协议》</text>
				</label>
			</view>
			<button type="primary" class="btn" :disabled="!canLogin" @tap="doLogin">微信一键登录</button>
			<button class="btn ghost" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</button>
			<view class="hint">微信规定：收集个人信息需用户勾选同意并授权手机号。</view>
		</view>

		<view class="card block">
			<view class="section-title">实名认证</view>
			<view class="upload-row" @tap="upload('front')">
				<view>
					<view class="upload-title">身份证人像面</view>
					<view class="upload-meta">{{ uploads.front ? '已上传' : '点击上传' }}</view>
				</view>
				<view class="chip">必填</view>
			</view>
			<view class="upload-row" @tap="upload('back')">
				<view>
					<view class="upload-title">身份证国徽面</view>
					<view class="upload-meta">{{ uploads.back ? '已上传' : '点击上传' }}</view>
				</view>
				<view class="chip">必填</view>
			</view>
			<view class="upload-row" @tap="upload('certificate')">
				<view>
					<view class="upload-title">职业资格证书</view>
					<view class="upload-meta">{{ uploads.certificate ? '已上传' : '可选上传' }}</view>
				</view>
				<view class="chip">加分项</view>
			</view>
			<view class="primary-btn submit" :class="{'disabled': !canSubmit}" @tap="submitCertification">提交认证</view>
		</view>
	</view>
</template>

<script>
import AppNavbar from "@/components/AppNavbar.vue";

export default {
	components: {AppNavbar},
		data() {
			return {
				agreeUser: false,
				agreePrivacy: false,
				phoneAuthorized: false,
				uploads: {
					front: '',
					back: '',
					certificate: ''
				}
			}
		},
		computed: {
			canLogin() {
				return this.agreeUser && this.agreePrivacy
			},
			canSubmit() {
				return this.uploads.front && this.uploads.back
			}
		},
		methods: {
			toggleAgreement(type) {
				if (type === 'user') this.agreeUser = !this.agreeUser
				if (type === 'privacy') this.agreePrivacy = !this.agreePrivacy
			},
			doLogin() {
				if (!this.canLogin) return
				uni.showToast({
					title: '已触发微信登录',
					icon: 'success'
				})
			},
			getPhoneNumber() {
				this.phoneAuthorized = true
				uni.showToast({
					title: '手机号授权成功',
					icon: 'success'
				})
			},
			upload(type) {
				uni.chooseImage({
					count: 1,
					success: res => {
						this.uploads[type] = res.tempFilePaths[0]
						this.$forceUpdate()
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						})
					}
				})
			},
			submitCertification() {
				if (!this.canSubmit) {
					uni.showToast({
						title: '请先上传身份证正反面',
						icon: 'none'
					})
					return
				}
				uni.showToast({
					title: '认证已提交，等待审核',
					icon: 'success'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		min-height: 100vh;
		padding: 0 20rpx 40rpx;
		background: #f5f5f5;
	}

	.page-hero {
		padding: 30rpx 6rpx 18rpx;
		background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
			top center / 100% auto;
	}

	.page-navbar {
		padding: 0 6rpx;
	}

	.intro-card {
		margin-top: 18rpx;
		padding: 20rpx 18rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.card-title {
		display: flex;
		align-items: center;
		gap: 12rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #1f2937;
	}

	.title-bar {
		width: 6rpx;
		height: 30rpx;
		border-radius: 999rpx;
		background: #2fc6a7;
	}

	.intro-text {
		margin-top: 12rpx;
		font-size: 26rpx;
		color: #6b7280;
		line-height: 1.6;
	}

	.hero-tags {
		display: flex;
		gap: 12rpx;
		margin-top: 12rpx;
	}

	.block {
		margin-top: 18rpx;
	}

	.agreements {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		margin-bottom: 12rpx;
	}

	.agreement {
		display: flex;
		align-items: center;
		gap: 8rpx;
		color: var(--text-main);
	}

	.btn {
		margin: 10rpx 0;
	}

	.ghost {
		border: 1rpx solid var(--brand-primary);
		color: var(--brand-primary);
		background: #e9f1ff;
	}

	.hint {
		color: var(--text-sub);
		font-size: 24rpx;
		margin-top: 6rpx;
	}

	.upload-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 0;
		border-bottom: 1rpx solid #edf1f7;
	}

	.upload-row:last-child {
		border-bottom: none;
	}

	.upload-title {
		font-weight: 700;
	}

	.upload-meta {
		color: var(--text-sub);
		font-size: 24rpx;
	}

	.submit {
		margin-top: 16rpx;
		padding: 14rpx;
	}

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