ROBOT-APP/code/HBX/pages/webview/changePassword.vue

<template>
	<view class="pages">
		<uni-forms class="form" :value="dataObj" ref="formData" :rules="rules"  :border="true"
			label-width="100">
			<uni-forms-item label="原密码" name="password" :required="true" label-width="100">
				<input :value="dataObj.password" type="password" @input="binddata('password',$event.detail.value)"
					class="uni-input" placeholder="请输入原密码" />
			</uni-forms-item>
			<uni-forms-item label="新密码" name="oldPassword" :required="true" label-width="100">
				<input :value="dataObj.oldPassword" type="password" @input="binddata('oldPassword',$event.detail.value)"
					class="uni-input" placeholder="请输入新密码" />
			</uni-forms-item>
			<uni-forms-item label="确认密码" name="newPassword" :required="true" label-width="100">
				<input :value="dataObj.newPassword" type="password" @input="binddata('newPassword',$event.detail.value)"
					class="uni-input" placeholder="请再输一次新密码" />
			</uni-forms-item>
		</uni-forms>
		<button class="but" type="default" :loading="loading" :disabled="loading" @tap="changePass">确认</button>
	</view>
</template>

<script>
	import {
		updatePassword,
		exit
	} from '@/common/api.js'
	export default {
		data() {
			return {
				dataObj: {
					password: "",
					oldPassword: "",
					newPassword: ""
				},
				loading: false,
				rules: {
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入原密码',
						}, ]
					},
					oldPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入新密码',
						},
						{
							validateFunction: function(rule, value, data, callback) {
								// let reg = /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,20}$/;
								// console.log(value)
                                if (value.length>20||value.length<6) {
								// if (!reg.test(value)) {
									callback('密码长度6-20位')
								}
								return true
							}
						}
						]
					},
					newPassword: {
						rules: [{
								required: true,
								errorMessage: '请再输一次新密码',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (data.newPassword != data.oldPassword) {
										callback('两次密码输入不一致')
									}
									return true
								}
							}
						]
					},
				}
			}
		},
		onReady() {
		        this.$refs.formData.setRules(this.rules)
		    },
		methods: {
			binddata(v, e) {
				this.dataObj[v] = e
			},
			changePass() {
				this.$refs.formData.submit().then(res => {
					this.loading = true
					console.log(this.dataObj)
					console.log(this.$store.state.Token)
					updatePassword({
						...this.dataObj,
						userId:this.$store.state.Token
					}).then(res =>{
						console.log(res)
						this.loading = false
						plus.nativeUI.toast('密码修改成功，请重新登录')
						setTimeout(() =>{
							exit().then(res => {
								this.$store.dispatch('setToken', "")
								this.$store.dispatch('setUsers', "{}")
								uni.reLaunch({
									url: '/pages/native/login'
								});
							}).catch(e => {
								plus.nativeUI.toast('服务退出登录失败，正强制退出...')
								setTimeout(() =>{
									this.$store.dispatch('setToken', "")
									this.$store.dispatch('setUsers', "{}")
									uni.reLaunch({
										url: '/pages/native/login'
									});
								},1000)

							})
						},2000)

					}).catch(e =>{
						console.log(e)
						plus.nativeUI.toast(e.data.msg)
						this.loading = false
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form {
		border-bottom: 1px solid #EEEEEE;
	}
	.uni-input{
		padding: 0 15rpx;
	}
	.but {
		width: 600rpx;
		margin-top: 420rpx;
		background-color: #0099FF;
		color: #fff;
	}
</style>