WechatApp/pages/personal/setPhone.vue

<template>
	<!-- 更换手机号 -->
	<view class="content">
		<view class="form-container">
			<!-- 标题 -->
			<view class="title">请输入你要更换的新手机号,并进行验证</view>

			<!-- 手机号输入框 -->
			<view class="input-wrapper">
				<view class="input-left">
					<text class="country-code">+86</text>
					<text class="icon-envelope">✉</text>
				</view>
				<input v-model="phone" type="number" class="input-field" placeholder="手机号"
					placeholder-style="color: #999;" maxlength="11" />
			</view>

			<!-- 验证码输入框 -->
			<view class="input-wrapper">
				<input v-model="code" type="number" class="input-field code-input" placeholder="输入验证码"
					placeholder-style="color: #999;" maxlength="6" />
				<view class="code-btn" :class="{ disabled: countdown > 0 || !canGetCode }" @click="handleGetCode">
					{{ countdown > 0 ? `${countdown}秒` : '获取验证码' }}
				</view>
			</view>

		</view>

		<!-- 修改按钮 - 固定在底部 -->
		<view class="submit-btn-wrapper">
			<view class="submit-btn" @click="handleSubmit" hover-class="hover-active">
				修改
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue';
import { useUserStore } from '@/store/user.js';
import { LoginSendCode } from '@/api/login.js';
import { isPhone } from '@/utils/is.js';
import { go } from '@/utils/utils.js';

const userStore = useUserStore();

// 表单数据
const phone = ref('');
const code = ref('');
const countdown = ref(0);
let countdownTimer = null;

// 是否可以获取验证码
const canGetCode = computed(() => {
	return isPhone(phone.value);
});

// 是否可以提交
const canSubmit = computed(() => {
	return isPhone(phone.value) && code.value.length >= 4;
});

// 获取验证码
const handleGetCode = async () => {
	if (countdown.value > 0 || !canGetCode.value) {
		return;
	}

	try {
		const res = await LoginSendCode({
			phone: phone.value
		});

		uni.showToast({
			title: '验证码已发送',
			icon: 'success'
		});

		// 开始倒计时
		countdown.value = 60;
		countdownTimer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				clearInterval(countdownTimer);
				countdownTimer = null;
			}
		}, 1000);
	} catch (error) {
		console.error('发送验证码失败:', error);
		uni.showToast({
			title: error?.msg || '发送验证码失败',
			icon: 'none'
		});
	}
};

// 提交修改
const handleSubmit = async () => {
	if (!canSubmit.value) {
		return;
	}

	// TODO: 调用修改手机号接口
	// 这里需要根据实际API接口来实现
	try {
		// const res = await UpdatePhone({
		//   phone: phone.value,
		//   code: code.value
		// });

		uni.showToast({
			title: '修改成功',
			icon: 'success'
		});

		// 延迟返回上一页
		setTimeout(() => {
			go(-1);
		}, 1500);
	} catch (error) {
		console.error('修改手机号失败:', error);
		uni.showToast({
			title: error?.msg || '修改失败，请重试',
			icon: 'none'
		});
	}
};

// 清理定时器
onUnmounted(() => {
	if (countdownTimer) {
		clearInterval(countdownTimer);
	}
});
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	min-height: 100vh;
	background-color: #F5F5F5;
	box-sizing: border-box;
	padding: 40rpx 30rpx 160rpx;
	/* 底部增加空间，避免被固定按钮遮挡 */
	position: relative;
}

.form-container {
	width: 100%;
}

.title {
	font-size: 27rpx;
	color: #151515;
	font-weight: 400;
	margin-bottom: 60rpx;
	line-height: 1.5;
}

.input-wrapper {
	width: 100%;
	height: 88rpx;
	background-color: #fff;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;

	.input-left {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-right: 20rpx;

		.country-code {
			font-size: 28rpx;
			color: #333;
			font-weight: 400;
		}

		.icon-envelope {
			font-size: 24rpx;
			color: #999;
		}
	}

	.input-field {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		height: 100%;
	}

	.code-input {
		flex: 1;
	}

	.code-btn {
		font-size: 28rpx;
		color: #F47D1F;
		padding: 8rpx 20rpx;
		margin-left: 20rpx;
		cursor: pointer;
		white-space: nowrap;

		&.disabled {
			color: #999;
			cursor: not-allowed;
			font-size: 27rpx;
			color: #151515;
		}
	}
}

.submit-btn-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #F5F5F5;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
	/* iOS 11.2+ */
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	/* iOS 11.2+ */
	box-sizing: border-box;
	z-index: 100;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(35deg, #FCB73F 0%, #FC733D 100%);
	border-radius: 23rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 31rpx;
	color: #FFFFFF;
	box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(255, 107, 53, 0.3);
}
</style>