ebike-ui/ebike-user/pages/user/login/phone_login.vue

<template>
	<view class="loginbox">
		<view class="logintop flex justify-center align-center">
			<image  :src="`${imgPath}static/userui/kncxbj.png`" style="width: 100px; height: 100px;" />
		</view>
		<view class="input-fields padding">
			<!-- 输入手机号 -->
			<view class="input-item flex align-center">
				<text class="cuIcon-phone" style="font-size: 20px; color: rgb(173,173,175);margin-right: 10px;"></text>
				<input v-model="phoneNumber" placeholder="请输入手机号" />
			</view>
			<!-- 输入验证码 -->
			<view class="input-item flex align-center">
				<text class="cuIcon-lock" style="font-size: 20px; color: rgb(173,173,175);margin-right: 10px;"></text>
				<input v-model="verificationCode" placeholder="请输入验证码" />
				<!-- 获取验证码文字 -->
				<span @click="getVerificationCode" class="get-code-text">
					{{ isSending ? countdown + '秒' : '获取验证码' }}
				</span>
			</view>
			<!-- 登录按钮 -->
			<view class="  flex flex-direction loginbotton">
				<button @click="phonelogin" class="cu-btn lg bg-green text-white">
					登录
				</button>
			</view>
		</view>
	</view>
	<zero-loading v-if="isloading" color="#c1c1c0" type="wobble" mask="true"></zero-loading>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import * as api from '@/utils/api.js';
	import {
		showModelMessage
	} from '@/utils/tools.js';
	import config from '@/utils/config';
	const imgPath = config.imgPath;

	const isloading = ref(false);
	const phoneNumber = ref('');
	const verificationCode = ref('');
	const isSending = ref(false);
	const countdown = ref(60); // 设置倒计时时间为60秒

	const getVerificationCode = async () => {
		if (!phoneNumber.value) {
			// 提示用户输入手机号
			showModelMessage('请输入手机号'); 
			return;
		}
		if (isSending.value) {
			return;
		}
		isSending.value = true;
		showModelMessage('验证码获取成功【123456】');
		countdown.value = 60; // 开始倒计时
		const timer = setInterval(() => {
			if (countdown.value > 0) {
				countdown.value--;
			} else {
				clearInterval(timer); // 倒计时结束后清除定时器
				isSending.value = false; // 允许重新点击获取验证码
			}
		}, 1000);
	};

	const phonelogin = async () => {
		if (!phoneNumber.value || !verificationCode.value) {
			showModelMessage('手机号和验证码不能为空');
			return;
		}
		const phoneRegex = /^1[3-9]\d{9}$/; // A regex pattern to match Chinese phone numbers (11 digits)
		if (!phoneRegex.test(phoneNumber.value)) {
			showModelMessage('请输入有效的手机号');
			return;
		}
		if (verificationCode.value !== "123456") {
			showModelMessage('验证码不正确!');
			return;
		}
		isloading.value = true;
		api.callOrdereApi("ebikeUser/getInfoByMobile?mobile=" + phoneNumber.value, {},
			"get").then((info) => {
			isloading.value = false;
			if (info.code == 200) { 
				uni.setStorageSync('wechat_user', info.data); 
				// const params = {
				// 	"userId": info.data.userId,
				// 	"openid": info.data.openid,
				// 	"status": 1
				// }
				// api.callOrdereApi("ebikeUser/update", params);
				wxlogin();
			} else {
				showModelMessage('用户信息不存在，请授权登录！');
			}

		})
	};
	const wxlogin = () => {
		// 调用 wx.login 获取登录凭证 code   
		isloading.value = true;
		setTimeout(() => {
			isloading.value = false;
			uni.navigateTo({
				url: "/pages/mine/mine"
			})
		}, 1000);
	};
</script>

<style scoped>
	.loginbox {
		height: 100vh;
		background-color: #fff;
	}

	.logintop {
		height: 280px;
	}

	.input-fields {
		margin-top: 20px;
	}

	.input-item {
		height: 45px;
		margin-bottom: 30px;
		position: relative;
		background: rgb(246, 245, 248);
		padding: 0px 15px;
		border-radius: 20px;
	}

	.input-field {
		width: 100%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.get-code-text {
		margin-left: 10px;
		color: #4caf50;
		font-size: 14px;
		width: 40%;
		cursor: pointer;
		line-height: 40px;
		text-align: right;
	}

	.get-code-text:disabled {
		color: #ccc;
	}

	.get-code-text {
		cursor: pointer;
	}

	.loginbotton {
		font-size: 14px;
	}

	.is-input-border {
		border: none;
	}
</style>