wanzai_school_app/pages/index/index.vue

<template>
	<view class="container">
		<img class="img" src="@/static/images/school-logo.jpg" />
		<view class="logo_name">万载三中</view>

		<!-- 手机号码输入框区域 -->
		<view class="phone">
			<input class="phone_input" type="text" placeholder="手机号" placeholder-style="color:#CCCCCC;" v-model="phone" />
		</view>

		<!-- 验证码区域 -->
		<view class="code">
			<input class="code_input" type="text" placeholder="验证码" placeholder-style="color:#CCCCCC;" v-model="codeValue" />

			<uv-code uniqueKey="login" keepRunning ref="codeDom" @change="codeChange"></uv-code>
			<view class="code_box" @click="getCode">{{ tips }}</view>
		</view>

		<!-- 登录按钮区域 -->
		<view class="loginBtn" :class="{ active: btnFlag }" @click="handleLogin">登录</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { myRequest } from '@/utils/api.js'

// 手机号码
const phone = ref('')
// 验证码
const codeValue = ref('')
// 验证码Dom
const codeDom = ref(null)
// 登录按钮是否高亮
const btnFlag = computed(() => {
	// 手机号码验证规则
	const regPhone = /^1[3-9]\d{9}$/
	if (phone.value && regPhone.test(phone.value) && codeValue.value) {
		return true
	} else {
		return false
	}
})

// 提示语
const tips = ref('')

// 家长
const plist = ref(['学生轨迹', '消息通知', '访客预约', '校园预警'])

// 老师
const tlist = ref(['学生轨迹', '消息通知', '访客预约', '校园预警', '通讯录'])

onLoad(() => {})

// 获取验证码按钮点击回调
const getCode = () => {
	// 手机号码验证规则
	const regPhone = /^1[3-9]\d{9}$/
	if (phone.value && regPhone.test(phone.value)) {
		if (codeDom.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码'
			})
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '验证码已发送',
					icon: 'none'
				})
				codeDom.value.start()
			}, 2000)
		} else {
			uni.showToast({
				title: '倒计时结束后再发送',
				icon: 'none'
			})
		}
	} else {
		uni.showToast({
			title: '请先输入正确的手机号码',
			icon: 'none'
		})
	}
}

// 登录按钮回调
const handleLogin = () => {
	// const flag = verifyValue()
	// if (flag) {
	// 	uni.setStorageSync('userId', 25)
	// 	uni.setStorageSync('userType', 1)
	// 	uni.navigateTo({
	// 		url: '/pages/home/home'
	// 	})
	// }
	// 0 代表家长  1 代表老师
	let userType = 1
	uni.setStorageSync('userType', userType)
	if (userType == 0) {
		uni.setStorageSync('appList', plist.value)
		uni.setStorageSync('userId', 25)
	} else {
		uni.setStorageSync('appList', tlist.value)
		uni.setStorageSync('userId', 26)
	}
	uni.navigateTo({
		url: '/pages/home/home'
	})
}

// 验证表格数据是否符合规范
const verifyValue = () => {
	// 手机号码验证规则
	const regPhone = /^1[3-9]\d{9}$/

	if (!phone.value) {
		uni.showToast({
			title: '请输入手机号',
			icon: 'none'
		})
		return false
	}

	if (!regPhone.test(phone.value)) {
		uni.showToast({
			title: '手机号码格式错误',
			icon: 'none'
		})
		return false
	}

	if (!codeValue.value) {
		uni.showToast({
			title: '请输入验证码',
			icon: 'none'
		})
		return false
	}
	return true
}

const codeChange = (text) => {
	tips.value = text
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	background-color: #f8f8fa;

	.img {
		margin-top: 120rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.logo_name {
		margin-top: 25rpx;
		font-size: 36rpx;
	}

	.phone {
		box-sizing: border-box;
		margin-top: 80rpx;
		padding: 0 20rpx;
		width: 538rpx;
		height: 80rpx;
		border-radius: 8rpx;
		box-shadow: 0 0 10rpx #ccc;
		background-color: #fff;

		.phone_input {
			height: 100%;
		}
	}

	.code {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		margin-top: 40rpx;
		padding: 0 20rpx;
		width: 538rpx;
		height: 80rpx;
		border-radius: 8rpx;
		box-shadow: 0 0 10rpx #ccc;
		background-color: #fff;

		.code_input {
			width: 55%;
			height: 100%;
		}

		.code_box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 35%;
			height: 80rpx;
			color: #3c9cff;
			font-size: 26rpx;
		}
	}

	.loginBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		width: 538rpx;
		height: 80rpx;
		color: #a0a1a4;
		border-radius: 8rpx;
		background-color: #e5e6eb;
	}

	.active {
		color: #fff;
		background-color: #0061ff;
	}
}
</style>