789

2025-08-25 14:24:59 +08:00
parent 979c332454
commit ad85572062
53 changed files with 7076 additions and 30 deletions
@@ -0,0 +1,193 @@
+<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>