new-zx-front-app/sheep/components/s-auth-modal/components/change-mobile.vue

<!-- 绑定/更换手机号 changeMobile  -->
<template>
	<view>
		<!-- 标题栏 -->
		<view class="head-box ss-m-b-60">
			<view class="head-title ss-m-b-20">
				{{ userInfo.mobile ? t('account.change_phone_number') : t('account.bind_phone_number') }}
			</view>
			<view class="head-subtitle">{{ t('account.security_notice') }}</view>
		</view>

		<!-- 表单项 -->
		<uni-forms ref="changeMobileRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"
			labelWidth="140" labelAlign="center" v-if="!step">
			<uni-forms-item name="mobile" :label="t('account.old_phone_number')">
				<uni-easyinput :placeholder="t('account.enter_old_phone_number')" v-model="state.model.oldMobile" :inputBorder="false" type="number">
					<template v-slot:right>
						<button class="ss-reset-button code-btn-start" :disabled="state.isMobileEnd"
							:class="{ 'code-btn-end': state.isMobileEnd }"
							@tap="getSmsCode('changeMobileOld', state.model.oldMobile)">
							{{ getSmsTimer('changeMobileOld') }}
						</button>
					</template>
				</uni-easyinput>
			</uni-forms-item>

			<uni-forms-item name="code" :label="t('account.verification_code')">
				<uni-easyinput :placeholder="t('account.enter_verification_code')" v-model="state.model.oldCode" :inputBorder="false" type="number"
					maxlength="4">
				</uni-easyinput>
			</uni-forms-item>
			<button class="ss-reset-button login-btn-start" @tap="nextStep">
				{{t('common.next')}}
			</button>
		</uni-forms>
		<uni-forms ref="changeMobileRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"
			labelWidth="140" labelAlign="center" v-else>
			<uni-forms-item name="mobile" :label="t('account.new_phone_number')">
				<uni-easyinput :placeholder="t('account.enter_new_phone_number')" v-model="state.model.mobile" :inputBorder="false" type="number">
					<template v-slot:right>
						<button class="ss-reset-button code-btn-start" :disabled="state.isMobileEnd"
							:class="{ 'code-btn-end': state.isMobileEnd }"
							@tap="getSmsCode('changeMobileNew', state.model.mobile)">
							{{ getSmsTimer('changeMobileNew') }}
						</button>
					</template>
				</uni-easyinput>
			</uni-forms-item>
		
			<uni-forms-item name="code" :label="t('account.verification_code')">
				<uni-easyinput :placeholder="t('account.enter_verification_code')" v-model="state.model.code" :inputBorder="false" type="number"
					maxlength="4">
				</uni-easyinput>
			</uni-forms-item>
			<button class="ss-reset-button login-btn-start" @tap="changeMobileSubmit">
				{{ t('common.confirm') }}
			</button>
		</uni-forms>
		<!-- 微信独有：读取手机号 -->
		<!-- <button
      v-if="'WechatMiniProgram' === sheep.$platform.name"
      class="ss-reset-button type-btn"
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber"
    >
      使用微信手机号
    </button> -->
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		reactive,
		unref
	} from 'vue';
	import sheep from '@/sheep';
	import {
		code,
		mobile
	} from '@/sheep/validate/form';
	import {
		closeAuthModal,
		getSmsCode,
		getSmsTimer
	} from '@/sheep/hooks/useModal';
	import UserApi from '@/sheep/api/member/user';
	import AuthUtil from '@/sheep/api/member/auth';
	import { t } from '@/locale'
	const step = ref(0);
	const changeMobileRef = ref(null);
	const userInfo = computed(() => sheep.$store('user').userInfo);

	// 数据
	const state = reactive({
		isMobileEnd: false, // 手机号输入完毕
		model: {
			oldMobile:'',
			oldCode:'',
			mobile: '', // 手机号
			code: '', // 验证码
		},
		rules: {
			code,
			mobile,
		},
	});
	async function nextStep(){
		const validate = await unref(changeMobileRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) {
			return;
		}
		const {
			code,
			data
		} = await AuthUtil.validatePhone(state.model.oldMobile , state.model.oldCode , 2);
		console.log('下一步的请求校验',data);
		if(data){
			step.value = 1;
		}
		
	}
	// 绑定手机号
	async function changeMobileSubmit() {
		const validate = await unref(changeMobileRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) {
			return;
		}
		// 提交更新请求
		const {
			code
		} = await UserApi.updateUserMobile({'mobile':state.model.mobile,'code': state.model.code});
		if (code !== 0) {
			return;
		}
		uni.showToast({
			icon: 'success',
			title: t('account.login_again'),
		});
		// 成功后，只需要1秒后推出登录关闭弹窗
		setTimeout(function(){
			sheep.$store('user').logout();
			closeAuthModal();
			sheep.$router.go('/pages/index/user')
		},1000)
	}

	// 使用微信手机号
	async function getPhoneNumber(e) {
		if (e.detail.errMsg !== 'getPhoneNumber:ok') {
			return;
		}
		const result = await sheep.$platform.useProvider().bindUserPhoneNumber(e.detail);
		if (result) {
			sheep.$store('user').getInfo();
			closeAuthModal();
		}
	}
</script>

<style lang="scss" scoped>
	@import '../index.scss';

	.login-btn-start {
		width: 100%;
		height: 70rpx;
		line-height: normal;
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		border-radius: 28rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #fff;
	}
</style>