uniapp-app/pages_app/changeMobile/changeMobile.vue

<template>
	<view class="change-mobile-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="更换手机号"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		></uni-nav-bar>

		<!-- 表单区域 -->
		<view class="form-wrapper">
			<!-- 新手机号 -->
			<view class="input-row">
				<view class="left-icon">
					<up-image  :src="phoneImg" width="36rpx" height="36rpx" ></up-image>
				</view>
				<input
					class="text-input"
					type="number"
					maxlength="11"
					v-model="mobile"
					placeholder="请输入新手机号码"
					placeholder-style="color:#c7c7c7"
				/>
			</view>

			<!-- 验证码 -->
			<view class="input-row">
				<view class="left-icon">
					<up-image  :src="smsImg" width="36rpx" height="36rpx" ></up-image>
				</view>
				<input
					class="text-input"
					type="number"
					maxlength="6"
					v-model="code"
					placeholder="请输入验证码"
					placeholder-style="color:#c7c7c7"
				/>
				<button
					class="code-btn"
					:disabled="sending || !canSend"
					@click="sendCode"
				>
					{{ sending ? countdown + 's' : '获取验证码' }}
				</button>
			</view>
		</view>

		<!-- 底部确定按钮 -->
		<view class="bottom-bar">
			<button class="confirm-btn" @click="onConfirm">确定</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onUnmounted,computed } from 'vue';
	import phoneImg from "@/static/phone.png"
	import smsImg from "@/static/sms.png"
const mobile = ref('');
const code = ref('');
const sending = ref(false);
const countdown = ref(60);
let timer = null;

const canSend = computed(() => /^1\d{10}$/.test(mobile.value));

const goBack = () => {
	uni.navigateBack();
};

const startTimer = () => {
	sending.value = true;
	countdown.value = 60;
	timer = setInterval(() => {
		countdown.value -= 1;
		if (countdown.value <= 0) {
			clearInterval(timer);
			timer = null;
			sending.value = false;
		}
	}, 1000);
};

const sendCode = () => {
	if (!canSend.value) {
		uni.showToast({ title: '请先输入正确的手机号', icon: 'none' });
		return;
	}
	if (sending.value) return;
	// TODO: 调用发送验证码接口
	uni.showToast({ title: '验证码已发送', icon: 'success' });
	startTimer();
};

const onConfirm = () => {
	if (!canSend.value) {
		uni.showToast({ title: '手机号格式不正确', icon: 'none' });
		return;
	}
	if (!/^\d{4,6}$/.test(code.value)) {
		uni.showToast({ title: '请输入正确的验证码', icon: 'none' });
		return;
	}
	// TODO: 提交更换手机号
	uni.showToast({ title: '已提交', icon: 'success' });
};

onUnmounted(() => {
	if (timer) clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.change-mobile-page {
	min-height: 100vh;
	background: #ffffff;
}

.form-wrapper {
	padding: 40rpx 30rpx 0; // 顶部导航占位
}

.input-row {
	display: flex;
	align-items: center;
	background: #ffffff;
	border: 2rpx solid #eeeeee;
	border-radius: 16rpx;
	height: 90rpx;
	padding: 0 20rpx;
	margin-bottom: 30rpx;
}

.left-icon {
	width: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10rpx;
}

.text-input {
	flex: 1;
	height: 100%;
	font-size: 30rpx;
	color: #333333;
}

.code-btn {
	width: 200rpx;
	height: 44rpx;
	background-color: #fff;
	border-radius: 50rpx;
	margin-right: 10px;
	display: flex;
	font-size: 25rpx;
	color:#8B2316;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 2rpx solid #8B2316;
	transition: background-color 0.2s ease;
}
.code-btn:disabled {
	opacity: 0.5;
	color:#8B2316;
	background-color: #ccc;
}

.bottom-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 40rpx;
}

.confirm-btn {
	margin: 0 30rpx;
	height: 100rpx;
	border-radius: 20rpx;
	border: 2rpx solid #8B2316;
	background: #ffffff;
	color: #8B2316;
	font-size: 34rpx;
}
</style>