mall-front-app/sheep/components/s-auth-modal/components/change-password.vue

<!-- 修改密码（登录时）  -->
<template>
	<view>
		<!-- 标题栏 -->
		<view class="head-box ss-m-b-60">
			<view class="head-title ss-m-b-20">修改密码</view>
			<view class="head-subtitle">如密码丢失或未设置,请点击忘记密码重新设置</view>
		</view>

		<!-- 表单项 -->
		<uni-forms ref="changePasswordRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"
			labelWidth="140" labelAlign="center">
			<uni-forms-item name="code" label="验证码">
				<uni-easyinput placeholder="请输入验证码" v-model="state.model.code" type="number" maxlength="4"
					:inputBorder="false">
					<template v-slot:right>
						<button class="ss-reset-button code-btn code-btn-start" :disabled="state.isMobileEnd"
							:class="{ 'code-btn-end': state.isMobileEnd }" @tap="getSmsCode('changePassword')">
							{{ getSmsTimer('changePassword') }}
						</button>
					</template>
				</uni-easyinput>
			</uni-forms-item>

			<uni-forms-item name="reNewPassword" label="密码">
				<uni-easyinput type="password" placeholder="请输入密码" v-model="state.model.password" :inputBorder="false">
					<template v-slot:right>
						<button class="ss-reset-button login-btn-start" @tap="changePasswordSubmit">
							确认
						</button>
					</template>
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>

		<button class="ss-reset-button type-btn" @tap="closeAuthModal">
			取消修改
		</button>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		ref,
		reactive,
		unref
	} from 'vue';
	import {
		code,
		password
	} from '@/sheep/validate/form';
	import {
		closeAuthModal,
		getSmsCode,
		getSmsTimer
	} from '@/sheep/hooks/useModal';
	import UserApi from '@/sheep/api/member/user';

	const changePasswordRef = ref(null);

	// 数据
	const state = reactive({
		isMobileEnd: false, // 手机号输入完毕
		model: {
			
			mobile: '', // 手机号
			code: '', // 验证码
			password: '', // 密码
		},
		rules: {
			code,
			password,
		},
	});

	// 更改密码
	async function changePasswordSubmit() {

		if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/.test(state.model.password)) {
			console.log(123)
			uni.showToast({
				icon: 'error',
				title: "需包含字母和数字,长度在6-12之间",
			});
		}
		// 参数校验
		const validate = await unref(changePasswordRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) {
			return;
		}
		// 发起请求
		const {
			code
		} = await UserApi.updateUserPassword(state.model);
		if (code !== 0) {
			return;
		}
		uni.showToast({
			icon: 'success',
			title: "修改成功",
		});
		
		// 成功后，只需要1秒后推出登录关闭弹窗
		setTimeout(function(){
			
			closeAuthModal();
			
		},1000)
		
	}
</script>

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