dajiankang-uniapp/pages/mine/mobile.vue

<template>
	<view class="page-container">
		<!-- 旧手机号输入区 -->
		<view class="form-group">
			<text class="label">旧手机号：</text>
			<input class="input" type="number" placeholder="请输入旧手机号" disabled :value="userInfo.mobile" maxlength="11" />
		</view>

		<!-- 短信验证码区 -->
		<view class="form-group code-group">
			<text class="label">短信验证码：</text>
			<input class="input" type="number" placeholder="请输入短信验证码" v-model="formData.oldCode" maxlength="6" />
			<view class="code-btn" @click="getCode1">{{ current1.seconds || codeIngo1 }}</view>
		</view>

		<!-- 新手机号输入区 -->
		<view class="form-group">
			<text class="label">新手机号：</text>
			<input class="input" type="number" placeholder="请输入新手机号" v-model="formData.mobile" maxlength="11" />
		</view>

		<!-- 短信验证码区 -->
		<view class="form-group code-group">
			<text class="label">短信验证码：</text>
			<input class="input" type="number" placeholder="请输入短信验证码" v-model="formData.code" maxlength="6" />
			<view class="code-btn" @click="getCode2">{{ current2.seconds || codeIngo2 }}</view>
		</view>

		<!-- 确定按钮 -->
		<button class="confirm-btn" @click="handleSubmit">确定</button>

		<!-- 温馨提示 -->
		<view class="tips">
			<text class="tips-title">温馨提醒：</text>
			<text class="tips-item">1. 一个手机号只能作为一个账户的登录名；</text>
			<text class="tips-item">2. 手机号修改成功后，原手机号将不支持登录。</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { toast } from '@/utils/fun.js';
import { useCountDown } from '@/uni_modules/wot-design-uni';
import api from '@/api/index';
import { Store } from '@/store';
import { onShow } from '@dcloudio/uni-app';
const store = Store();




const userInfo = computed(
	() =>
		store.userInfo || {
			inviteCode: '',
			nickname: '',
			mobile: '',
			avatar: '',
			paywallet: {
				balance: 0
			}
		}
);

onShow(async () => {
	await store.usersGetInfo();
});

const codeIngo1 = ref('获取验证码');
const codeIngo2 = ref('获取验证码');

const formData = ref({
	code: '',
	mobile: '',
	oldCode: ''
});

const {
	start: start1,
	pause: pause1,
	reset: reset1,
	current: current1
} = useCountDown({
	time: 60 * 1000,
	onChange(current) {},
	onFinish() {
		codeIngo1.value = '重新发送';
	}
});

const {
	start: start2,
	pause: pause2,
	reset: reset2,
	current: current2
} = useCountDown({
	time: 60 * 1000,
	onChange(current) {},
	onFinish() {
		codeIngo2.value = '重新发送';
	}
});

// 获取验证码方法
const getCode1 = (e) => {
	if (!userInfo.value.mobile) {
		toast('请输入旧手机号');
		return;
	}

	if (current1.value.seconds) {
		toast('请等待倒计时结束');
		return;
	}

	api.smsCode({
		mobile: userInfo.value.mobile,
		scene: 2
	})
		.then((res) => {
			start1();
			toast('验证码发送成功');
		})
		.catch((err) => {
			console.log(err);
			toast('验证码发送失败');
		});
};

// 获取验证码方法
const getCode2 = (e) => {
	if (!formData.value.mobile) {
		toast('请输入旧手机号');
		return;
	}

	if (current2.value.seconds) {
		toast('请等待倒计时结束');
		return;
	}

	api.smsCode({
		mobile: formData.value.mobile,
		scene: 2
	})
		.then((res) => {
			start2();
			toast('验证码发送成功');
		})
		.catch((err) => {
			console.log(err);
			toast('验证码发送失败');
		});
};

const handleSubmit = () => {
	api.updateMobile(formData.value).then((res) => {
		uni.showModal({
			title: '提示',
			content: '修改成功',
			showCancel: false,
			success: async () => {
				await store.usersGetInfo();
				uni.navigateBack();
			}
		});
	});
};
</script>

<style scoped>
.page-container {
	padding: 30rpx;
	background-color: #fff;
}

/* 表单组通用样式 */
.form-group {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.label {
	font-size: 26rpx;
	color: #333;
	width: 180rpx; /* 固定标签宽度，保证输入框对齐 */
	font-weight: bold;
}

.input {
	flex: 1;
	height: 60rpx;
	line-height: 60rpx;
	border-bottom: 1px solid #eee; /* 底部下划线 */
	font-size: 28rpx;
	color: #666;
}

/* 验证码按钮组 */
.code-group {
	justify-content: space-between; /* 输入框与按钮左右分布 */
}

.code-btn {
	width: 175rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	color: #5d7a4e;
	border: 1rpx solid #5d7a4e;
	text-align: center;
	border-radius: 14rpx 14rpx 14rpx 14rpx;
}

/* 确定按钮 */
.confirm-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 32rpx;
	color: #fff;
	background-color: #5d7a4e; /* 深绿 */
	border-radius: 10rpx;
	margin-top: 50rpx;
}

/* 温馨提示 */
.tips {
	margin-top: 60rpx;
	font-size: 26rpx;
	color: #999;
	line-height: 44rpx;
}

.tips-title {
	display: block;
	margin-bottom: 20rpx;
	font-weight: 500;
}

.tips-item {
	display: block;
}
</style>