mechanicStore-app/pages/login/merchantRecuitment.uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view class="page-scroll">
	<!-- #endif -->
		<view class="page">
			<image class="page-bg" src="/static/other/shzm-bg.png" mode="widthFix"></image>
			<image class="page-banner" src="/static/other/shzm-jrwm.png" mode="widthFix"></image>
			<view class="hero-card">
				<text class="hero-title">商户招募</text>
				<text class="hero-desc">请填写基础信息，提交后等待平台审核。</text>
			</view>

			<view class="form-card">
				<view class="field-block">
					<text class="field-label">邀请人专属码</text>
					<input v-model="form.inviteCode" class="field-input" placeholder="选填" />
				</view>
				<view class="field-block">
					<text class="field-label">真实姓名</text>
					<input v-model="form.realName" class="field-input" placeholder="请输入本人姓名" />
				</view>
				<view class="field-block">
					<text class="field-label">工作艺名</text>
					<input v-model="form.nickname" class="field-input" placeholder="选填，四字以内" :maxlength="4" />
				</view>
				<view class="field-block">
					<text class="field-label">性别</text>
					<view class="gender-row">
						<view class="gender-chip" :class="form.gender == 0 ? 'gender-chip-active' : 'gender-chip-idle'" @click="setGender(0)">
							<text class="gender-chip-text">男</text>
						</view>
						<view class="gender-chip" :class="form.gender == 1 ? 'gender-chip-active' : 'gender-chip-idle'" @click="setGender(1)">
							<text class="gender-chip-text">女</text>
						</view>
					</view>
				</view>
				<view class="field-block">
					<text class="field-label">手机号</text>
					<input v-model="form.mobile" class="field-input" type="number" :maxlength="11" placeholder="请输入手机号" />
				</view>
				<view class="field-block">
					<text class="field-label">验证码</text>
					<view class="code-row">
						<input v-model="form.code" class="field-input code-input" type="number" :maxlength="6" placeholder="请输入验证码" />
						<view class="code-button" :class="canSendCode ? 'code-button-active' : 'code-button-disabled'" @click="sendCode">
							<text class="code-button-text">{{ codeButtonText }}</text>
						</view>
					</view>
				</view>
				<view class="field-block">
					<text class="field-label">年龄</text>
					<input v-model="form.age" class="field-input" type="number" :maxlength="2" placeholder="18 岁以上" />
				</view>
				<view class="field-block">
					<text class="field-label">合作城市</text>
					<input v-model="form.intentionCity" class="field-input" placeholder="请输入意向合作城市" />
				</view>
			</view>

			<view class="submit-button" @click="submitForm">
				<text class="submit-button-text">提交审核</text>
			</view>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="uts">
	import { computed, reactive, ref } from 'vue'
	import { onUnload } from '@dcloudio/uni-app'
	import { fetchSendcode } from '@/utils/api/login.uts'
	import { submitQualification } from '@/utils/api/masterInfoApi.uts'

	type FormState = {
		inviteCode: string
		realName: string
		nickname: string
		gender: number
		mobile: string
		code: string
		age: string
		intentionCity: string
	}

	const form = reactive<FormState>({
		inviteCode: '',
		realName: '',
		nickname: '',
		gender: 0,
		mobile: '',
		code: '',
		age: '',
		intentionCity: '',
	})

	const countdown = ref<number>(0)
	let timerId : number | null = null

	const canSendCode = computed(() : boolean => {
		return form.mobile.length == 11 && countdown.value == 0
	})

	const codeButtonText = computed(() : string => {
		return countdown.value > 0 ? `${countdown.value}s后重试` : '获取验证码'
	})

	const setGender = (gender : number) : void => {
		form.gender = gender
	}

	const stopTimer = () : void => {
		const currentTimer = timerId
		if (currentTimer != null) {
			clearInterval(currentTimer)
			timerId = null
		}
	}

	const sendCode = async () : Promise<void> => {
		if (!canSendCode.value) {
			return
		}
		try {
			await fetchSendcode({ mobile: form.mobile } as UTSJSONObject)
			countdown.value = 60
			stopTimer()
			timerId = setInterval(() => {
				if (countdown.value > 0) {
					countdown.value = countdown.value - 1
				}
				if (countdown.value <= 0) {
					stopTimer()
				}
			}, 1000)
			uni.showToast({ title: '验证码已发送', icon: 'none' })
		} catch (error) {
			uni.showToast({ title: '验证码发送失败', icon: 'none' })
		}
	}

	const submitForm = async () : Promise<void> => {
		if (form.realName.length == 0 || form.mobile.length == 0 || form.code.length == 0 || form.age.length == 0 || form.intentionCity.length == 0) {
			uni.showToast({ title: '请完整填写必要信息', icon: 'none' })
			return
		}
		try {
			const payload = {
				invite_code: form.inviteCode,
				real_name: form.realName,
				nickname: form.nickname,
				gender: `${form.gender}`,
				mobile: form.mobile,
				code: form.code,
				age: parseInt(form.age),
				intention_city: form.intentionCity,
			} as UTSJSONObject
			const response = await submitQualification(payload) as UTSJSONObject
			const code = (response['code'] as number | null) ?? -1
			uni.showToast({ title: code == 0 || code == 200 ? '提交成功' : '提交失败', icon: 'none' })
		} catch (error) {
			uni.showToast({ title: '提交失败，请重试', icon: 'none' })
		}
	}

	onUnload(() => {
		stopTimer()
	})
</script>

<style>
	.page-scroll {
		flex: 1;
	}
	.page {
		position: relative;
		min-height: 1000rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #fef9cf;
		flex-direction: column;
	}
	.page-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.page-banner {
		position: absolute;
		top: 110rpx;
		left: 88rpx;
		width: 312rpx;
		height: 122rpx;
	}
	.hero-card {
		margin-top: 300rpx;
		padding: 28rpx;
		border-radius: 24rpx;
		background-color: rgba(255, 255, 255, 0.84);
		flex-direction: column;
	}
	.hero-title {
		font-size: 38rpx;
		font-weight: 700;
		color: #372f21;
	}
	.hero-desc {
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #5c513e;
	}
	.form-card {
		margin-top: 20rpx;
		padding: 24rpx;
		border-radius: 24rpx;
		background-color: rgba(255,255,255,0.88);
		flex-direction: column;
	}
	.field-block {
		margin-bottom: 18rpx;
		flex-direction: column;
	}
	.field-label {
		font-size: 26rpx;
		color: #3a3330;
	}
	.field-input {
		margin-top: 10rpx;
		height: 88rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-radius: 18rpx;
		background-color: #fffdd7;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	.gender-row {
		margin-top: 10rpx;
		flex-direction: row;
	}
	.gender-chip {
		padding: 16rpx 28rpx;
		margin-right: 16rpx;
		border-radius: 999rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.gender-chip-active {
		background-color: #ffdb5a;
	}
	.gender-chip-idle {
		background-color: #fffdd7;
	}
	.gender-chip-text {
		font-size: 26rpx;
		color: #3a3330;
	}
	.code-row {
		margin-top: 10rpx;
		flex-direction: row;
		align-items: center;
	}
	.code-input {
		flex: 1;
	}
	.code-button {
		margin-left: 16rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: 88rpx;
		border-radius: 18rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.code-button-active {
		background-color: #ffdb5a;
	}
	.code-button-disabled {
		background-color: #e3e3e3;
	}
	.code-button-text {
		font-size: 24rpx;
		color: #3a3330;
	}
	.submit-button {
		margin-top: 20rpx;
		height: 96rpx;
		border-radius: 24rpx;
		background-color: #ffdb5a;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.submit-button-text {
		font-size: 32rpx;
		font-weight: 700;
		color: #3a3330;
	}
</style>