property-resident-side/property-uniapp-project/pageSubPack/my/changePhone.vue

<template>
	<view class="contentStyle">
		<view class="status-bar"></view>
		<uni-nav-bar 
			title="更改手机号码" 
			left-icon="left" 
			@click-left="goBack" 
			background-color="transparent" 
			:border="false"
		>
		</uni-nav-bar>

		<scroll-view class="page" scroll-y>
			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 手机号输入框（带+86前缀） -->
				<view class="input-group phone-input">
					<image class="iconStyle" src="http://47.104.199.163:9090/images/propertyImgs/phoneIcon.png"></image>
					<input 
						class="input-item" 
						type="number" 
						v-model="phone" 
						placeholder="请输入手机号码"
						placeholder-class="input-placeholder" 
						maxlength="11" 
					/>
				</view>

				<!-- 验证码输入框（带获取验证码按钮） -->
				<view class="input-group code-input" style="padding: 0 0 0 20rpx;">
					<image class="iconStyle" src="http://47.104.199.163:9090/images/propertyImgs/codeIcon.png"></image>
					<input 
						class="input-item code-item" 
						type="number" 
						v-model="code" 
						placeholder="请输入验证码"
						placeholder-class="input-placeholder" 
						maxlength="6" 
					/>
					<button 
						class="code-btn" 
						:disabled="countdown > 0" 
						@click="getCode"
					>
						{{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
					</button>
				</view>
			</view>
		</scroll-view>
		
		<view class="bottom-btn">
			<button class="submit-btn" @click="onSubmit">确定</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { getAuthSendSmsCode, getUserChangePhone } from '../api/apiSub.js'

// 响应式数据
const statusBarHeight = ref(20)
const phone = ref('')
const code = ref('')
const countdown = ref(0)
let timer = null // 定时器无需响应式，用普通变量

// 获取验证码
const getCode = () => {
	const phoneReg = /^1[3-9]\d{9}$/
	if (!phone.value) {
		uni.showToast({ title: '请输入手机号', icon: 'none' })
		return
	}
	if (!phoneReg.test(phone.value)) {
		uni.showToast({ title: '手机号格式不正确', icon: 'none' })
		return
	}

	uni.showLoading({ title: '发送中...' })
	getAuthSendSmsCode({ phone: phone.value, scene: 'register' }).then(res => {
		uni.hideLoading()
		if (res.code === 200) {
			uni.showToast({ title: '验证码已发送', icon: 'none' })

			// 60秒倒计时
			countdown.value = 60
			timer = setInterval(() => {
				if (countdown.value <= 1) {
					clearInterval(timer)
					countdown.value = 0
					return
				}
				countdown.value--
			}, 1000)
		} else {
			uni.showToast({ title: res.msg || '发送失败', icon: 'none' })
		}
	}).catch(() => {
		uni.hideLoading()
		uni.showToast({ title: '发送失败', icon: 'none' })
	})
}

// 提交修改
const onSubmit = () => {
	const phoneReg = /^1[3-9]\d{9}$/
	if (!phone.value) {
		uni.showToast({ title: '请输入手机号', icon: 'none' })
		return
	}
	if (!phoneReg.test(phone.value)) {
		uni.showToast({ title: '手机号格式不正确', icon: 'none' })
		return
	}
	if (!code.value) {
		uni.showToast({ title: '请输入验证码', icon: 'none' })
		return
	}
	
	uni.showLoading({ title: '更换中...', mask: true })
	getUserChangePhone({ newPhone: phone.value, smsCode: code.value,scene:'change_phone' }).then(res => {
		uni.hideLoading()
		if (res.code === 200) {
			uni.showToast({ title: '更换成功', icon: 'success' })
			setTimeout(() => goBack(), 1500)
		} else {
			uni.showToast({ title: res.msg || '更换失败', icon: 'none' })
		}
	}).catch(() => {
		uni.hideLoading()
		uni.showToast({ title: '更换失败', icon: 'none' })
	})
}

// 返回
const goBack = () => {
	uni.navigateTo({
		url: '/pageSubPack/my/settingIndex'
	})
}

// 页面卸载清除定时器
onUnmounted(() => {
	if (timer) clearInterval(timer)
})
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
</style>

<style scoped>
.contentStyle {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f9f9f9;
}

.page {
	flex: 1;
	overflow-y: auto;
	padding: 0px 40rpx;
	box-sizing: border-box;
}

/* 底部按钮 */
.bottom-btn {
	padding: 20rpx 30rpx 40rpx;
}

/* 表单容器 */
.form-container {}

/* 输入框组（手机号+验证码行） */
.input-group {
	display: flex;
	align-items: center;
	height: 88rpx;
	border-radius: 8rpx;
	margin-bottom: 30rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	background-color: #fff;
}

.iconStyle {
	width: 50rpx;
	height: 50rpx;
}

.phone-input .input-item {
	flex: 1;
	height: 100%;
	line-height: 88rpx;
	border: none;
	padding-left: 20rpx;
}

/* 验证码输入框 */
.code-input .code-item {
	flex: 1;
	height: 100%;
	line-height: 88rpx;
	border: none;
	font-size: 30rpx;
}

.code-btn {
	position: absolute;
	right: 10rpx;
	top: 13%;
	transform: translateY(-50%);
	width: 200rpx;
	height: 66rpx;
	line-height: 66rpx;
	background-color: #2F77FD;
	color: #fff;
	border-radius: 35rpx;
	font-size: 28rpx;
	padding: 0;
	margin: 0;
}

.code-btn[disabled] {
	color: #999;
}

/* 通用输入框样式 */
.input-item {
	font-size: 30rpx;
	color: #333;
	background-color: #fff;
	padding-left: 20rpx;
}

.input-placeholder {
	color: #999;
	font-size: 30rpx;
}

/* 确定按钮 */
.submit-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #1677ff;
	color: #fff;
	font-size: 32rpx;
	border-radius: 8rpx;
	border: none;
	margin-top: 20rpx;
}

.status-bar {
	width: 100vw;
	height: 46px;
}
</style>