great_group/center/resetpass.vue

<template>
	<view class="pages">
		<u-navbar
			title="修改密码"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
			 bgColor="#ED0000"
			 :titleStyle="{color:'#fff'}"
			 leftIconColor="#fff"
		>
		</u-navbar>
		<view class="form-wrap">
			<u--form labelPosition="left" labelWidth="70px" :model="form"  :rules="rules" ref="uForm" >
				<u-form-item label="旧密码" prop="oldPassword" borderBottom ref="oldPassword" >
					<u--input
						v-model="form.oldPassword"
						border="none"
						placeholder="请输入旧密码"
						:customStyle="inputCustomStyle"
					></u--input>
				</u-form-item>
				<u-form-item label="新密码" prop="password" borderBottom ref="password" >
					<u--input
						v-model="form.password"
						border="none"
						:password="true"
						placeholder="请输入新密码"
						:customStyle="inputCustomStyle"
					></u--input>
				</u-form-item>
				<u-form-item label="确认密码" prop="comfpassword" :borderBottom="false" ref="comfpassword" >
					<u--input
						v-model="form.comfpassword"
						border="none"
						:password="true"
						placeholder="请确认新密码"
						:customStyle="inputCustomStyle"
					></u--input>
				</u-form-item>
			</u--form>
		</view>
		<u-button
			@click="submit"
			text="确定" 
			type="primary" 
			shape="circle" 
			:customStyle="{'margin':'60rpx 32rpx',height:'98rpx','box-sizing':'border-box',width:'auto'}"
			color="linear-gradient(90deg, #FF7979 0%, #ED0000 100%)">
		</u-button>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				form:{
					oldPassword:'',
					password:'',
					comfpassword:'',
				},
				
				rules: {
					oldPassword: {
						type: 'string',
						required: true,
						message: '请输入旧密码',
						trigger: ['blur', 'change']
					},
					password: [
						{
							type: 'string',
							required: true,
							message: '请输入新密码',
							trigger: ['blur', 'change']
						},
						{
							min: 6,
							max: 10,
							message: '长度在6-10个字符之间',
							trigger: 'blur',
						},
					],
					comfpassword: [
						{
							type: 'string',
							required: true,
							message: '请确认密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (value === '') {
									callback(new Error('请再次输入密码'));
								} else if (value !== this.form.password) {
									callback(new Error('两次输入密码不一致!'));
								} else {
									callback();
								}
							},
							trigger: 'blur',
						}
					],
				},
				inputCustomStyle:{
					height:'98rpx',
					'border-color':'#eee',
					'padding-left':'30rpx',
					'box-sizing':'border-box',
				}
			}
		},
		onShow() {
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad() {

		},
		methods: {
			chekPass(){
				console.log('chekPass---',this.form);
				return new Promise((resolve, reject)=>{
					if(!password){
						 reject('needAuth');
					}
				})
			},
			async submit(){
				let that = this;
				// console.log('form',this.form);
				this.$refs.uForm.validate().then(res => {
					// let chekPassResult = await this.chekPass();
					// return
					// uni.$u.toast('校验通过')
					const param = {
						oldPassword:this.form.oldPassword,
						newPassword:this.form.password
					}
					this.$u.api.updatePassword(param).then(res=>{
						// console.log('res',res.data);
						this.$u.vuex('vuex_user_info', res.data);
						uni.showToast({
							title:res.msg,
							icon:'success'
						})
						setTimeout(()=>{
							that.redirectToAuth();
						},2000)
						// uni.reLaunch({url: this.backUrl});
					}).catch(err=>{
						console.log('login',err);
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写表单')
				})
			},
			redirectToAuth() {
				try{
					window.location.href = this.$commonConfig.authUrl;
				}catch(e){
					alert(`redirectToAuth e:${e}`)
				}
			    
			},
		}
	}
</script>
<style>
page{
	background-color: #F4F5F7;
}
</style>
<style lang="scss" scoped>
.form-wrap{
	margin: 40rpx 32rpx;
	padding: 20rpx 40rpx;
	background-color: #fff;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(226,226,226,0.5);
	border-radius: 24rpx;
}
</style>