gwlz/jp-mobile/pages/user/setting/password/password.vue

<template>
	<view>
		<u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm">
			<u-form-item label="旧密码" borderBottom prop="oldPassword">
				<u--input v-model="inputForm.oldPassword" placeholder="请输入原密码" password border="none"></u--input>
			</u-form-item>
			<u-form-item label="新密码" borderBottom prop="newPassword">
				<u--input v-model="inputForm.newPassword" placeholder="请输入新密码" password border="none"></u--input>
			</u-form-item>
			<u-form-item label="确认新密码" borderBottom prop="confirmNewPassword">
				<u--input v-model="inputForm.confirmNewPassword" placeholder="请确认新密码" password border="none"></u--input>
			</u-form-item>
			<view class="padding-xl">
				<u-button type="primary" @click="formSubmit" text="提交"></u-button>
			</view>
		</u--form>
	</view>
</template>

<script>
  import userService from "@/api/sys/userService"	
  export default {
	data () {
		return {
			loading: false,
			inputForm: {
				oldPassword: '',
				newPassword: '',
				confirmNewPassword: ''
			},
			rules: {
				'oldPassword': [
					{
						required: true,
						message: '旧密码不能为空',
						trigger: ['blur', 'change']
					}
				],
				'newPassword': [
					{
						required: true,
						message: '新密码不能为空',
						trigger: ['blur', 'change']
					}
				],
				'confirmNewPassword': [
					{
						required: true,
						message: '确认密码不能为空',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							if(this.inputForm.newPassword === this.inputForm.confirmNewPassword){
								return true;
							}else{
								return false;
							}
						},
						message: '你两次输入的新密码不同！'
					},
				]
			}
		}
	},

    methods:{
		formSubmit: function(e) {
			//定义表单规则
			this.$refs.inputForm.validate().then(res => {
				uni.showLoading()
				userService.savePwd(this.inputForm).then((data) => {
					uni.showToast({title:data, icon:"success"});
					uni.clearStorage();
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}).catch((e)=>{
					console.log(e)
				})
			})
		}
    }
  }
</script>

<style>
  .btn-logout {
    margin-top: 100upx;
    width: 80%;
    border-radius: 50upx;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(to right, #365fff, #36bbff);
  }

  .btn-logout-hover {
    background: linear-gradient(to right, #365fdd, #36bbfa);
  }
  .cu-form-group .title {
  	min-width: calc(4em + 40px);
  }
</style>