eud-gk-share/pages/index/index.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="0">
				<uni-forms-item name="mobilePhone">
					<uni-easyinput type="number" maxlength="11" :clearable="false" v-model="formData.mobilePhone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item name="code">
					<view class="form-code">
						<uni-easyinput type="number" :clearable="false" v-model="formData.code" placeholder="请输入验证码" />
						<view class="code" :class="{'code-disabled': isCanGetCode}" @click="getCode">
							{{codeTips}}
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button class="submit" :class="{'submit-disabled': !formData.code || !formData.mobilePhone}" @click="submit">登录</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, watch } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { sendSmsCode, verifyCode, mobilephoneRegister, prefUser } from '@/api/h5.js'

	const unitCode = ref('')
	const formData = reactive({
		code: '',
		mobilePhone: '',
	})

	const rules = reactive({
		mobilePhone: {
			rules: [{
				required: true,
				errorMessage: '请输入手机号',
			}]
		},
		code: {
			rules: [{
				required: true,
				errorMessage: '请输入验证码',
			}]
		},
	})
	const codeTips = ref("获取验证码")
	const isCanGetCode = ref(false)
	const countDownNumber = ref(60)
	const interval = ref(null)
	const countDown = () => {
		isCanGetCode.value = true
		interval.value = setInterval(() => {
			countDownNumber.value = countDownNumber.value - 1
			codeTips.value = `${countDownNumber.value}秒重新获取`
		}, 1000)
	}
	watch(() => countDownNumber.value, (value) => {
		if (value == 0) {
			clearInterval(interval.value)
			isCanGetCode.value = false
			codeTips.value = "重新获取"
			countDownNumber.value = 60
		}
	
	})
	const getCode = async () => {
		if (!formData.mobilePhone) {
			uni.showToast({
				title: "请输入手机号",
				icon: 'none'
			})
			return
		};
		if (!isCanGetCode.value) {
			uni.showLoading({
				title: '正在获取验证码',
				mask: true
			})
			const res = await sendSmsCode({
				"mobilePhone": formData.mobilePhone
			})
			if (res.code === 200) {
				uni.hideLoading();
				codeTips.value = `${countDownNumber.value}S`
				countDown()
				uni.showToast({
					title: '发送成功',
					icon: 'none'
				})
			}
		} else {
			uni.showToast({
				title: "倒计时结束后再发送",
				icon: 'none'
			})
		}
	}
	const handlePrefUser = async () => {
		const res = await prefUser({
			mobilePhone: formData.mobilePhone,
			prefUnitCode: unitCode.value
		})
		if(res.code === 200) {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if(res.data) {
				const { userCode } = res.data
				setTimeout(() => {
					uni.reLaunch({
						url: `/pages/result/result?provinceCode=${userCode?.slice(0, 2)}`
					})
				}, 800)
			}
		}
	}
	const getMobilephoneRegister = async () => {
		const res = await mobilephoneRegister({mobilePhone: formData.mobilePhone})
		if(res.data) {
			const parameter = encodeURIComponent(JSON.stringify({
				unitCode: unitCode.value,
				mobilePhone: formData.mobilePhone
			}))
			uni.navigateTo({
				url: `/pages/password/password?parameter=${parameter}`
			})
		}else {
			handlePrefUser()
		}
	}
	const form = ref()
	const submit = () => {
		if(formData.code && formData.mobilePhone) {
			form.value.validate().then(async data => {
				const res = await verifyCode(data)
				if(res.code === 200) {
					if(res.data) {
						getMobilephoneRegister()
					}else {
						uni.showToast({
							title: "验证码错误",
							icon: 'none'
						})
					}
				}
			})
		}
	}
	onLoad((options) => {
		unitCode.value = options.unitCode
	})
</script>

<style lang="scss" scoped>
	.form {
		padding: 0 40rpx;

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

		:deep(.uni-easyinput__content-input) {
			background: #F1F5FE;
			height: 112rpx;
			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-code {
			display: flex;
			align-items: center;
			background: #F1F5FE;
			border-top-right-radius: 24rpx;
			border-bottom-right-radius: 24rpx;
			:deep(.uni-easyinput__content-input){
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			.code {
				font-weight: 400;
				font-size: 32rpx;
				color: #3682EA;
				border-radius: 8rpx;
				line-height: 38rpx;
				padding: 0 24rpx;
			}
			
			.code-disabled {
				color: #86909C;
			}
		}
	}
	.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;
	}
</style>