fb/fb-app/pages/center/password.vue

<template>
	<view class="wrap">
		<u-navbar title="修改密码" :border-bottom="false">
		</u-navbar>
		<view class="form">
			<view class="app-info">
			    <image class="app-logo" src="/static/bico_safe.png"></image>
			</view>
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item prop="oldpassword">
					<u-input :password-icon="true" :border="border" type="password" v-model="model.oldpassword" placeholder="请输入旧密码"></u-input>
				</u-form-item>
				<u-form-item prop="password">
					<u-input :password-icon="true" :border="border" type="password" v-model="model.password" placeholder="请输入新密码"></u-input>
				</u-form-item>
				<u-form-item prop="rePassword">
					<u-input :border="border" type="password" v-model="model.rePassword" placeholder="请确认密码"></u-input>
				</u-form-item>	
			</u-form>
			<view class="u-p-t-30">
				<u-button type="primary" @click="submit">提交</u-button>
			</view>
			<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				duration: 2000,
				title: '修改密码成功',
				type: 'success',
				model: {
					oldpassword: '',
					password: '',
					rePassword: ''
				},
				rules: {
					oldpassword: [
						{
							required: true,
							message: '请输入新密码',
							trigger: ['change','blur'],
						},
						{
							// 正则不能含有两边的引号
							min: 6, max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: ['change','blur'],
						}
					],
					password: [
						{
							required: true,
							message: '请输入新密码',
							trigger: ['change','blur'],
						},
						{
							min: 6, max: 20,
							message: '长度在 6 到 20 个字符',
							trigger: ['change','blur'],
						}
					],
					rePassword: [
						{
							required: true,
							message: '请重新输入密码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change','blur'],
						}
					],
				},
				errorType: ['message'],
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.api.modifyPassword(this.model).then((res) => {
							console.log(res)
							if(res.code == 200){
								this.title = res.msg;
								this.type = "success";
							}else{
								this.title = res.msg;
								this.type = "error";
							}
							this.showTips();
							setTimeout(()=>{
							   	uni.clearStorageSync()
							   	uni.clearStorage()
							   	this.$u.vuex('vuex_user','');
							   	this.$u.vuex('vuex_token','');
							   	this.$u.route('/pages/login');
							},2000)
						})
					}else{
						console.log("必填验证不通过！");
					}
				});
			},
			showTips() {
				this.$refs.uTips.show({
					duration: this.duration,
					title: this.title,
					type: this.type
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		.form{
			width: 80%;
			margin: 80rpx auto 0;
		}
	}
	.app-info {
	    position: relative;
	    padding: 20px;
	    text-align: center;
	}
	
	.app-info:after {
	    content: " ";
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    height: 1px;
	    color: #E5E5E5;
	    transform-origin: 0 100%;
	    transform: scaleY(0.5);
	}
	
	.app-info .app-logo {
	    display: block;
	    width: 185rpx;
	    height: 185rpx;
	    margin: 0px auto;
	    border-radius: 4px;
	}
</style>