security_study_h5/center/resetpass.vue

<template>
	<view class="pages">
		<u-navbar
			title="修改密码"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-wrap">
			<u--form labelPosition="left" :model="form"  :rules="rules" ref="uForm" >
				<u-form-item label="" prop="oldPassword" :borderBottom="false" 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="false" 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>
			<u-button
				@click="submit"
				text="确认" 
				type="primary" 
				shape="circle" 
				:customStyle="{'margin-top':'60rpx',height:'98rpx','box-sizing':'border-box'}"
				>
			</u-button>
		</view>
	</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',
					'background-color': '#F5F9FC',
					'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(){
				// 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,
						password: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(()=>{
							uni.$u.route('/pages/login/login');
						},2000)
						// uni.reLaunch({url: this.backUrl});
					}).catch(err=>{
						console.log('login',err);
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写表单')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-wrap{
	.u-form-item{
		margin-bottom: 40rpx;
	}
	/deep/ .u-form-item__body{
		background-color:#F5F9FC;
		border-radius: 16rpx;
	}
}

</style>