zhywpt-sp/subpackage/personal-center/setting/change-phone-code-ali.vue

<!-- 注册第2步 -->
<template>
	<view class="register-main">
		<!-- <view class="title">请输入验证码</view>
		<view class="hint">验证码已发送至：{{ phone }}</view>
		<view class="input-code">
			<verification-code-input v-model="code"></verification-code-input>
		</view>
		<view class="hint2">
			<view class="green">{{ codeDuration === 0 ? "" : codeDuration }}</view>
			<view class="grey" @click="sendRegisterCode">{{
        codeDuration === 0 ? "重新发送验证码" : "秒后可重新发送验证码"
      }}</view>
		</view> -->
		<view class="title">验证码</view>
		<view class="input-code">
		<input class="input" v-model="code" placeholder="请输入验证码" placeholder-class="form-placeholder"
			maxlength="6" type="number" />
		</view>
	</view>

	<view class="btn">
		<submit-button title="更换手机号" @submit="nextStep"></submit-button>
	</view>
</template>

<script setup lang="ts">
	import {
		msg,
		navTo
	} from "@/utils/utils";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import {
		request
	} from "@/utils/network/request";
	import {
		sendCode,
		changePhone
	} from "@/utils/network/api.js";
	import {
		useUserStore
	} from '@/stores/user';
	const userStore = useUserStore();
	const {
		loginOutNoConfirm
	} = userStore;
	//上个界面传递的电话号码
	const phone = ref("");
	const code = ref(null);

	//倒计时时常
	const codeDuration = ref(0);
	let interval = null;

	onLoad((options) => {
		phone.value = options.phone;
		codeInterval();
	});

	/* 验证码倒计时 */
	const codeInterval = () => {
		codeDuration.value = 60;
		interval = setInterval(() => {
			codeDuration.value--;
			if (codeDuration.value === 0) {
				if (interval) {
					clearInterval(interval);
					interval = null;
				}
			}
		}, 1000);
	};

	/* 发送验证码 */
	const sendRegisterCode = () => {
		if (codeDuration.value !== 0) {
			return;
		}
		const options = {
			type: 2,
			data: {
				mobile: phone.value
			},
			method: "POST",
			showLoading: true,
		};
		request(sendCode, options).then((res) => {
			msg("验证码发送成功！");
			codeInterval();
		});
	};

	/* 下一步 */
	const nextStep = () => {
		if (!code.value) {
			msg("请先输入验证码！");
			return;
		}

		const options = {
			type: 2,
			data: {
				mobile: phone.value,
				verificationCode: code.value
			},
			method: "POST",
			showLoading: true,
		};
		request(changePhone, options).then((res) => {
			msg("更改手机号成功");
			codeInterval();
			var pages = getCurrentPages().length;
			uni.navigateBack({
				delta: pages,
			});
			loginOutNoConfirm()
		});
	};
</script>

<style lang="scss" scoped>
	.register-main {
		border-top: 1rpx solid #dcdcdc;
		padding: 78rpx 30rpx 50rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
		}

		.hint {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}
	}

	.input-code {
		margin: 100rpx -10rpx 0px;
	}

	.hint2 {
		margin-top: 40rpx;
		display: flex;

		.green {
			font-size: 28rpx;
			color: #00b38b;
		}

		.grey {
			font-size: 24rpx;
			color: #999999;
			margin-left: 16rpx;
		}
	}

	.btn {
		margin: 200rpx 40rpx 0px;
	}
</style>