wanzai_school_app/pages/login/login.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="number" placeholder="手机号" placeholder-style="color:#CCCCCC;" v-model="phone" />
		</view>

		<!-- 验证码区域 -->
		<view class="code">
			<input class="code_input" type="number" 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('')

onLoad(() => {})

// 获取验证码按钮点击回调
const getCode = async () => {
	// 手机号码验证规则
	const regPhone = /^1[3-9]\d{9}$/
	if (!phone.value) {
		uni.showToast({
			title: '请先输入手机号码',
			icon: 'none'
		})
		return
	}
	if (!regPhone.test(phone.value)) {
		uni.showToast({
			title: '手机号码格式错误',
			icon: 'none'
		})
		return
	}

	if (codeDom.value.canGetCode) {
		const res = await myRequest({
			url: '/wanzai/api/wechat/sendMessage',
			data: {
				phone: phone.value
			}
		})
		// console.log(res)
		if (res.code == 200) {
			uni.showToast({
				title: '验证码已发送',
				icon: 'none'
			})
			codeDom.value.start()
		}
	} else {
		uni.showToast({
			title: '倒计时结束后再发送',
			icon: 'none'
		})
	}
}

// 登录按钮回调
const handleLogin = () => {
	const flag = verifyValue()
	if (flag) {
		uni.login({
			success: (res) => {
				// console.log(res)
				getBind(res.code)
			}
		})
	}
}

const getBind = async (wxcode) => {
	const res = await myRequest({
		url: '/wanzai/api/wechat/vertifyMessage',
		data: {
			phone: phone.value,
			code: codeValue.value,
			wxcode
		}
	})
	// console.log(res)

	// 1 代表家长  2 代表学生  3 代表老师
	uni.setStorageSync('token', res.data.token)
	uni.setStorageSync('userInfo', res.data.user)
	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>