wanzai_school_app/pages/editPhone/editPhone.vue

<template>
	<view class="container">
		<view class="body">
			<!-- 输入框区域 -->
			<view class="body_row mt-40">
				<view class="row_text">手机号</view>
				<input class="row_input input" type="text" placeholder="请输入手机号" placeholder-style="color:#CCCCCC" v-model="phone" />
				<view class="row_btn" :class="{ active: showBtn }" @click="handleVerify">{{ showBtn ? '获取验证码' : codeTime + 's后重新获取' }}</view>
			</view>

			<view class="body_row mt-30">
				<view class="row_text">验证码</view>
				<input class="row_input" type="number" placeholder="请输入验证码" placeholder-style="color:#CCCCCC" v-model="code" />
			</view>

			<!-- 确定按钮区域 -->
			<view class="body_btn" @click="handleConfirm">确认</view>
		</view>
	</view>
</template>

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

// 手机号
const phone = ref('')
// 验证码
const code = ref('')

// 是否可以点击获取验证码按钮
const showBtn = ref(true)

// 倒计时时间
const codeTime = ref(60)

// 计时器实例
const timer = ref()

onLoad(() => {})

onUnload(() => {
	// 页面卸载时清除定时器
	clearInterval(timer.value)
})

// 获取验证码按钮回调
const handleVerify = () => {
	// 手机号码验证规则
	const regPhone = /^1[3-9]\d{9}$/

	if (showBtn.value) {
		if (!regPhone.test(phone.value)) {
			uni.showToast({
				title: '请输入正确的手机号码',
				icon: 'none'
			})
		} else {
			showBtn.value = false
			countDown()
			// 获取验证码
			getCode()
		}
	} else {
		uni.showToast({
			title: '倒计时结束后再获取',
			icon: 'none'
		})
	}
}

// 获取验证码
const getCode = async () => {
	const res = await myRequest({
		url: '/wanzai/api/wechat/sendChangeMessage',
		data: {
			phone: phone.value
		}
	})
	console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: '验证码已发送',
			icon: 'none'
		})
	}
}

const countDown = () => {
	timer.value = setInterval(() => {
		if (codeTime.value > 0) {
			codeTime.value -= 1
		} else {
			showBtn.value = true
			codeTime.value = 60
			clearInterval(timer.value)
		}
	}, 1000)
}

// 点击确认按钮回调
const handleConfirm = () => {
	const flag = verifyValue()

	if (flag) {
		// 修改手机号码请求
		handleEditPhone()
	}
}

// 修改手机号码请求
const handleEditPhone = async () => {
	const res = await myRequest({
		url: '/wanzai/api/wechat/vertifyChangePhone',
		data: {
			phone: phone.value,
			code: code.value
		}
	})
	console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: '修改成功',
			icon: 'success'
		})

		let userInfo = uni.getStorageSync('userInfo')

		userInfo.phone = phone.value

		uni.setStorageSync('userInfo', userInfo)
		setTimeout(() => {
			uni.navigateBack(1)
		}, 1500)
	}
}

// 验证表格数据是否符合规范
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 (!code.value) {
		uni.showToast({
			title: '请输入验证码',
			icon: 'none'
		})
		return false
	}

	return true
}
</script>

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

	.body {
		position: relative;
		padding: 0 20rpx;
		margin-top: 20rpx;
		height: calc(100vh - 20rpx);
		background-color: #fff;

		.body_row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			font-size: 28rpx;
			border-bottom: 2rpx solid #e5e5e5;

			.row_text {
				flex: 1;
				padding-right: 30rpx;
				text-align-last: justify;
			}

			.row_input {
				box-sizing: border-box;
				padding: 0 30rpx;
				width: 590rpx;
				height: 90rpx;
				border-radius: 15rpx;
				background-color: #fff;
			}

			.input {
				width: 400rpx;
			}

			.row_btn {
				width: 190rpx;
				height: 41rpx;
				color: #ccc;
				text-align: center;
				font-size: 28rpx;
			}

			.active {
				color: #0061ff;
			}
		}

		.mt-40 {
			margin-top: 40rpx;
		}

		.mt-30 {
			margin-top: 30rpx;
		}

		.body_btn {
			position: absolute;
			bottom: 150rpx;
			left: 227rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 297rpx;
			height: 100rpx;
			color: #fff;
			font-size: 32rpx;
			border-radius: 8rpx;
			background-color: #1e7dfb;
		}
	}
}
</style>