eud-gk-share/pages/register/register.vue

<template>
	<view>
		<view class="logo">
			<image src="../../static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="form">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" :label-width="90" label-align="right">
				<uni-forms-item label="所在地" name="provinceCode">
					<view class="form-item">
						<uni-data-select :clear="false" v-model="formData.provinceCode" placeholder="请选择您所在的省市"
							:localdata="provinces"></uni-data-select>
						<view class="des-text">省/市</view>
					</view>
				</uni-forms-item>
				<!-- <uni-forms-item label="学校" name="name">
					<uni-easyinput type="text" :clearable="false" v-model="formData.mobile" placeholder="请输入所在学校" />
				</uni-forms-item> -->
				<uni-forms-item label="高考年份" name="enrollYear">
					<view class="form-item">
						<uni-data-select :clear="false" v-model="formData.enrollYear" placeholder="请选择您的高考年份"
							:localdata="years"></uni-data-select>
						<view class="des-text"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="姓名" name="name">
					<view class="form-item">
						<uni-easyinput type="text" :clearable="false" v-model="formData.name" placeholder="请输入姓名" />
						<view class="des-text"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="性别" name="gender">
					<view class="form-item">
						<uni-data-checkbox v-model="formData.gender" :localdata="genders"></uni-data-checkbox>
						<view class="des-text"></view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button class="submit" :class="{'submit-disabled': !isDisabled}" @click="submit">提交</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getFutureYears } from '@/utils/index'
	import { provincesList, registerUser, prefUser } from '@/api/h5.js'

	const unitCode = ref('')
	const isDisabled = computed(() => {
		return formData.enrollYear && formData.gender && formData.name && formData.provinceCode
	})
	const formData = reactive({
		enrollYear: '',
		mobilePhone: '',
		gender: '',
		name: '',
		password: '',
		provinceCode: '',
	})

	const rules = reactive({
		enrollYear: {
			rules: [{
				required: true,
				errorMessage: '请选择您的高考年份',
			}]
		},
		gender: {
			rules: [{
				required: true,
				errorMessage: '请选择性别',
			}]
		},
		name: {
			rules: [{
				required: true,
				errorMessage: '请输入姓名',
			}]
		},
		provinceCode: {
			rules: [{
				required: true,
				errorMessage: '请选择您所在的省市',
			}]
		},
	})
	const genders = ref([
		{ "value": '男', "text": "男" },
		{ "value": '女', "text": "女" }
	])
	const years = ref([])
	const provinces = ref([])
	const getProvincesList = async () => {
		const res = await provincesList({})
		if (res.code === 200) {
			provinces.value = Object.keys(res.data)?.map((item, index) => {
				return {
					value: item,
					text: res.data[item]
				}
			})?.filter(item => item.value != '65')
		}
	}
	const handlePrefUser = async () => {
		const res = await prefUser({
			mobilePhone: formData.mobilePhone,
			prefUnitCode: unitCode.value
		})
		if(res.code === 200) {
			// uni.showToast({
			// 	title: res.message,
			// 	icon: 'none'
			// })
			setTimeout(() => {
				uni.reLaunch({
					url: `/pages/result/result?provinceCode=${formData.provinceCode}`
				})
			}, 800)
		}
	}
	const form = ref()
	const submit = () => {
		if(isDisabled.value) {
			form.value.validate().then(async data => {
				const res = await registerUser(formData)
				if(res.code === 200) {
					handlePrefUser()
				}
			})
		}
	}
	onLoad((options) => {
		const parameter = JSON.parse(decodeURIComponent(options.parameter));
		unitCode.value = parameter.unitCode
		formData.mobilePhone = parameter.mobilePhone
		formData.password = parameter.password
		years.value = getFutureYears(3)?.map(item => {
			return {
				value: item,
				text: item
			}
		})
		getProvincesList()
	})
</script>

<style lang="scss" scoped>

	.form {
		padding: 0 40rpx;

		:deep(.uni-easyinput__content) {
			border: none;
		}

		:deep(.uni-forms-item__label) {
			height: 88rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #1D2129;
			line-height: 38rpx;
		}

		:deep(.uni-stat__select) {
			height: 88rpx;
			border-radius: 24rpx;
			background: #F1F5FE;

			.uni-stat-box {
				height: 88rpx;

				.uni-select {
					height: 100%;
					border: none;

					.uni-select__input-text {
						font-weight: 500;
						font-size: 32rpx;
						color: #1D2129;
					}

					.uni-select__input-placeholder {
						font-weight: 400;
						font-size: 32rpx;
						color: #86909C;
						line-height: 38rpx;
					}

					.uni-icons {
						font-size: 32rpx !important;
						margin-right: 10rpx;
					}
				}
			}
		}

		:deep(.uni-data-checklist) {
			height: 88rpx;
			display: flex;
			align-items: center;

			.radio__inner {
				width: 32rpx !important;
				height: 32rpx !important;
			}

			.radio__inner-icon {
				width: 16rpx !important;
				height: 16rpx !important;
			}

			.checklist-text {
				font-weight: 400;
				font-size: 36rpx !important;
				color: #1D2129;
			}
		}

		:deep(.uni-easyinput__content-input) {
			background: #F1F5FE;
			height: 88rpx;
			border-radius: 24rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #1D2129;
			line-height: 38rpx;
		}

		:deep(.uni-input-placeholder) {
			font-weight: 400;
			font-size: 32rpx;
			color: #86909C;
			line-height: 38rpx;
		}

		.form-area {
			width: 100%;
			background: #F1F5FE;
			border-radius: 24rpx;
			height: 88rpx;

			:deep(.input-block) {
				width: calc(100% - 10px);
				height: 88rpx;
				padding-left: 10px;
			}
		}

		.submit {
			height: 112rpx;
			background: #3682EA;
			border-radius: 24rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 128rpx;
		}

		.submit-disabled {
			background: #B0CDFF;
		}

		.form-item {
			display: flex;
			align-items: center;

			.des-text {
				width: 80rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #4E5969;
				margin-left: 20rpx;
			}
		}
	}
</style>