dev/dcp-app-gate/pages/profile/profileSetUp/changePassword.vue

<template>
	<view style="margin: 20upx 40upx 0;">
		<u-navbar :back-text="i18n('Back')" title-width="300" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff" :background="background"
		:title="i18n('ChangePassword')"></u-navbar>
		<!-- <uni-forms ref="form" @submit="submit">
			<uni-forms-item  label="原密码:" name="possWorld" >
				<input class="input" type="text" placeholder="请输入原密码" @input="binddata('possWorld',$event.detail.value)"  />
			</uni-forms-item>
			<uni-forms-item  label="新密码:" name="newPossWorld" >
				<input class="input" type="text" placeholder="请设置6-20位登录密码" @input="binddata('newPossWorld',$event.detail.value)"  />
			</uni-forms-item>
			<uni-forms-item  label="确认密码:" name="possWorldActive" >
				<input class="input" type="text" placeholder="请再次输入登录密码" @input="binddata('possWorldActive',$event.detail.value)"  />
			</uni-forms-item>
		 </uni-forms> -->
		<u-form :model="form" ref="uForm">
			<u-form-item :label="i18n('originalPassword')" :label-width="160">
				<u-input v-model="form.possWorld" type="password" maxlength="20" :password-icon="true" :placeholder="$i18n.locale=='zh'?'请输入原密码':'Please Enter old Password'" />
			</u-form-item>
			<u-form-item :label="i18n('newPassword')" :label-width="160">
				<u-input v-model="form.newPossWorld" type="password" maxlength="20" :password-icon="true" :placeholder="$i18n.locale=='zh'?'请设置8-20位密码':'Please Set new password of 8 to 20 digits'" />
			</u-form-item>
			<u-form-item :label="i18n('confirmPassword')" :label-width="160">
				<u-input v-model="form.possWorldActive" type="password" maxlength="20" :password-icon="true" :placeholder="$i18n.locale=='zh'?'请再次输入密码':'Please Enter new Password again'" />
			</u-form-item>
		</u-form>
		<view class="next">
			<u-button type="primary" @click="pwdSetting">{{i18n('submit')}}</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import listCell from '@/components/JumpBox';
	export default {
		components: {
			listCell
		},
		data() {
			return {
				form: {
					possWorld: '',
					newPossWorld: '',
					possWorldActive: ''
				},
				token: '',
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
			};
		},
		onShow() {
			this.token = uni.getStorageSync('Auth-Token');

		},
		methods: {
			submit(e) {
				const {
					validate,
					value
				} = e;
				console.log('表单数据：', value);
			},
			async pwdSetting() {
				if (this.form.possWorld == "" || this.form.possWorld == null) {
					this.msg(this.$i18n.locale == 'zh' ? '原密码不能为空' : 'The old password cannot be empty', "warning");
					return;
				}
				if (this.form.newPossWorld == "" || this.form.newPossWorld == null) {
					this.msg(this.$i18n.locale == 'zh' ? '新密码不能为空' : 'New password cannot be empty', "warning");
					return;
				}
				if (this.form.possWorldActive == "" || this.form.possWorldActive == null) {
					this.msg(this.$i18n.locale == 'zh' ? '确认密码不能为空' : 'Confirm password cannot be empty', "warning");
					return;
				}
				//判断两次密码是否一致
				if (this.form.newPossWorld != this.form.possWorldActive) {
					this.msg('新密码与确认密码不一致', "warning");
					return;
				}
				//校验密码格式
				var message = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,20}$/.test(this.form.possWorldActive) ?
					"" : this.$i18n.locale == 'zh' ? '请输入8到20位密码，大小写字母，数字，特殊符号至少三项' :'Please input 8 to 20 digits password, at least 3 items of upper and lower case letters, numbers and special symbols';
				if (message != "") {
					return this.msg(message, "warning");
				}
				let Storage_data = JSON.parse(uni.getStorageSync('user'));
				let param = JSON.stringify({
					id: Storage_data.umsUser.id,
					password: this.form.possWorldActive,
					Authorization: this.token
				});
				const res = await this.$myRequest({
					url: '/ums/umsUsers/changePassword',
					data: {
						param
					},
					method: 'post'
				});
				if (res.status == '200') {
					this.$refs.uToast.show({          
						title: this.$i18n.locale == 'zh' ? '密码修改成功，请使用新密码重新登录系统！' : 'Password modified successfully, please use the new password to login the system again!',
						type: "success",
					})
					setTimeout(() => {
						this.navTo('/pages/public/login');
					}, 2000);
					return;
				} else {
					this.msg('error');
				}
			},
			msg(msg, type) {
				if (msg == 'error') {
					msg = this.i18n('ThesystemisbusyPleasetryagainlater') + "！" //系统繁忙，请稍后再试
				}
				return this.$refs.uToast.show({
					title: msg,
					type: type,
					// url: '/pages/user/index'
				})
			},
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body.pages-profile-profileSetUp-setUp uni-page-body {
		background-color: #fff !important;

		.uni-input-placeholder,
		.uni-input-form,
		.uni-input-wrapper,
		uni-input {
			text-align: right;
		}

		.next {
			margin-top: 100upx;
		}
	}
</style>