jsh_erp_app/pages/login/change-password.vue

<!-- 修改密码 - changePassword  -->
<template>
	<s-layout title="修改密码" :bgStyle="{color:'#fff'}">
		<view class="content-block">
			<uni-forms ref="changePasswordRef" v-model="state.model" :rules="state.rules" validateTrigger="bind" labelWidth="140"
				labelAlign="left" labelPosition="top">
				<uni-forms-item name="mobile" label="手机号">
					<view class="input-line">
						<uni-easyinput placeholder="请输入手机号" v-model="state.model.mobile" type="number" :inputBorder="false">
						</uni-easyinput>
					</view>
				</uni-forms-item>
				<uni-forms-item name="newPassword" label="新密码">
					<view class="input-line">
						<uni-easyinput type="password" placeholder="请输入密码" v-model="state.model.newPassword" :inputBorder="false">
						</uni-easyinput>
					</view>
				</uni-forms-item>
				<uni-forms-item name="confirmPassword" label="确认密码">
					<view class="input-line">
						<uni-easyinput type="password" placeholder="请输入密码" v-model="state.model.confirmPassword" :inputBorder="false">
						</uni-easyinput>
					</view>
				</uni-forms-item>
				<uni-forms-item name="code" label="验证码">
					<view class="ss-flex ss-row-between">
						<view class="input-line w-370">
							<uni-easyinput placeholder="请输入验证码" v-model="state.model.verificationCode" :inputBorder="false" type="number"
								maxlength="6">
							</uni-easyinput>
						</view>
						<button class="ss-reset-button code-btn code-btn-start" :disabled="getSmsTimer('changePassword') != '获取验证码'"
							:class="{ 'code-btn-end': getSmsTimer('changePassword') != '获取验证码' }"
							@tap="getSmsCode('changePassword', state.model.mobile)">
							{{ getSmsTimer('changePassword') }}
						</button>
					</view>
				</uni-forms-item>
			
			
			</uni-forms>
			
			<button class="ss-reset-button toLoginBtn" @tap="changePasswordSubmit">
				确认
			</button>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		watch,
		ref,
		reactive,
		unref
	} from 'vue';
	import sheep from '@/sheep';
	import {
		code,
		mobile,
		password
	} from '@/sheep/validate/form';
	import {
		getSmsCode,
		getSmsTimer
	} from '@/sheep/hooks/useModal';
	import {Base64} from 'js-base64'

	const changePasswordRef = ref(null);
	const isLogin = computed(() => sheep.$store('user').isLogin);

	// 数据
	const state = reactive({
		isMobileEnd: false, // 手机号输入完毕
		model: {
			mobile: '', //手机号
			verificationCode: '', //验证码
			newPassword: '', //密码
			confirmPassword:'',
		},
		rules: {
			code,
			mobile,
			newPassword:password,
			confirmPassword: {
			  rules: [
			    {
			      required: true,
			      errorMessage: '请确认密码',
			    },
			    {
			      validateFunction: function (rule, value, data, callback) {
			        if (value !== state.model.newPassword) {
			          callback('两次输入的密码不一致');
			        }
			        return true;
			      },
			    },
			  ],
			},
		},
	});

	// 6.更改密码
	const changePasswordSubmit = async () => {
	  const validate = await unref(changePasswordRef)
	    .validate()
	    .catch((error) => {
	      console.log('error: ', error);
	    });
	  if (!validate) return;
		state.model.uuid = sheep.$store('user').getUUID('changePassword')
		const data = Base64.encode(JSON.stringify(state.model))
		console.log(state.model)
	  sheep.$api.user.resetPassword(data).then((res) => {
			if(res.code == 200) {
				sheep.$helper.toast('修改成功')
				setTimeout(()=>{
					uni.navigateBack()
				},1500)
			}
	    // if (res.error === 0) {
	    //   sheep.$store('user').getInfo();
	    //   closeAuthModal();
	    // }
	  });
	}
</script>

<style lang="scss" scoped>
	@import '@/sheep/components/s-auth-modal/index.scss';
	.content-block {
		padding: 0 30rpx;
	}
	.input-line {
		background-color: #F5F7FB;
		border-radius: 16rpx;
		padding-left: 30rpx;
		height: 88rpx;
		box-sizing: border-box;
	}
	.toLoginBtn {
		height: 88rpx;
		background: #F39801;
		border-radius: 16rpx;
		color: #fff;
		margin-bottom: 32rpx;
		margin-top: 30rpx;
	}
	.w-370 {
		width: 370rpx;
	}
</style>