learning-system-mobile/pages/login/next.vue

<template>
	<view>
		<page-title :showBack="true">修改密码</page-title>
		<view class="pass">
			<u--form ref="ruleForm" labelPosition="bottom" :model="model" :rules="rules" :labelWidth="100" labelAlign="left" :label-style="{'font-size':'14px'}">
				<u-form-item label="当前密码: " borderBottom>
					<u--input v-model="model.oldPass" placeholder="请输入当前密码" placeholder-style="color: rgba(153, 153, 153, 1);font-size: 12px;" type="password" border="none"></u--input>
				</u-form-item>
				<u-form-item label="设置新密码: " prop="newPass" borderBottom>
					<u--input v-model="model.newPass" placeholder="请输入新密码" placeholder-style="color: rgba(153, 153, 153, 1);font-size: 12px;" type="password" border="none"></u--input>
				</u-form-item>
				<u-form-item label="确认新密码: " prop="confirmPass" borderBottom>
					<u--input v-model="model.confirmPass" placeholder="请确认密码" placeholder-style="color: rgba(153, 153, 153, 1);font-size: 12px;" type="password" border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>

		<u-button type="primary" text="提交" @click="submit"></u-button>

		<view class="" style="display: flex;margin-top: 30px;margin-left: 15px;">
			<!-- <u-icon name="phone"></u-icon> -->
			<view @click="showHelp = true" style="color: rgba(51, 51, 51, 1);font-size: 14px;">如有问题联系管理员</view>
		</view>
		<view v-if="showHelp" style="display: flex;margin-top: 2px;">
			<view>
				<u--form labelPosition="left" :labelWidth="52" labelAlign="right" :label-style="{'font-size':'14px','color':'rgba(153, 153, 153, 1)'}">
					<u-form-item label="姓名: ">李玉冰<u-form-item label="工号: ">0000 4409</u-form-item></u-form-item>
					<u-form-item label="电话: ">0106 0965 462</u-form-item>
				</u--form>
			</view>
		</view>
	</view>
</template>

<script>
import accountApi from '@/api/account';
import apiLogin from '@/api/boe/login.js';
import apiUserBasic from '@/api/boe/userbasic.js'
import JSEncrypt from '@/utils/jsencrypt.js';
export default {
	data() {
		var testPassword = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,16}$/;
		//testPassword=/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{1,9}$/;
		var validatePass = (rule, value, callback) => {
			if (!value) {
				callback(new Error('请输入旧密码'));
			} else if (!testPassword.test(value)) {
				callback(new Error('请输入由8-16位大写字母、小写字母、数字或符号任意三种的组合密码'));
			} else {
		 	if (this.passwordForm.newPass !== '') {
					this.$refs.form.validateField('newPass');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (!value) {
				callback(new Error('请输入新密码'));
			} else if (!testPassword.test(value)) {
				callback(new Error('请输入由8-16位大写字母、小写字母、数字或符号任意三种的组合密码'));
			} else {
				if (this.passwordForm.confirmPass !== '') {
					this.$refs.form.validateField('confirmPass');
				}
				callback(true);
			}
		};
		var validatePass3 = (rule, value, callback) => {
			if (!value) {
				callback(new Error('请再次输入新密码'));
			} else if (!testPassword.test(value)) {
				callback(new Error('请输入由8-16位大写字母、小写字母、数字或符号任意三种的组合密码'));
			} else if (value != this.passwordForm.newPass) {
				callback(new Error('新密码和再次确认密码不一致!'));
			} else {
				callback(true);
			}
		};
		return {
			model: {
				oldPass: '',
				newPass: '',
				confirmPass: ''
			},
			showHelp: true,
			res: {},
			rules: {
				newPass: [{ validator: validatePass2, trigger: ['change'] }],
				confirmPass: [{ validator: validatePass3, trigger: ['change']  }]
			}
		};
	},
	methods: {
		calladmin() {
			uni.navigateTo({
				url: './administrator'
			});
		},
		submit() {
			let $this=this;
			this.$refs.ruleForm.validate().then(res => {
					// let params = {
					// 	oldPassword: this.model.oldPass,
					// 	newPassword: this.model.newPass,
					// 	confirmPassword: this.model.confirmPass
					// };
					apiLogin.getRsaPublicKey().then(krs=>{
					   if(krs.code=='0'){
					      let publicKey=krs.data.list.publickey;
					      let encryptor = new JSEncrypt();
					      let rsa ='-----BEGIN PUBLIC KEY-----'+publicKey+'-----END PUBLIC KEY-----';
					      encryptor.setPublicKey(rsa);
					      let mpdata={
					          oldPassword:$this.model.oldPass,
					          newPassword:encryptor.encrypt($this.model.newPass),
					          confirmPassword:encryptor.encrypt($this.model.confirmPass)
					      }
					      apiUserBasic.modifyPassword(mpdata).then(res=>{
					        if(res.status==200){
								let loginPath = this.$config.loginPath;
					          	uni.showToast({ title: '修改成功,请重新登录', duration: 2000 });
								setTimeout(() => { location.href = loginPath; }, 2000);
					        }else{
								uni.showToast({ title: res.message, icon: 'none' });
					        }
					      })
					    }else{
						   uni.showToast({ title: '获取公钥错误', icon: 'none' });
					    }
					})
					//apiLogin 修改为 apiUserBasic
					// apiUserBasic.modifyPassword(params).then(res => {
					// 	if (res.status == 200) {
					// 		let loginPath = this.$config.loginPath;

					// 		uni.showToast({
					// 			title: '修改成功,请重新登录',
					// 			duration: 2000
					// 		});
					// 		setTimeout(() => {
					// 			location.href = loginPath;
					// 		}, 2000);
					// 	} else {
					// 		uni.showToast({
					// 			title: res.message,
					// 			icon: 'none'
					// 		});
					// 	}
					// });
				}).catch(errors => {
					uni.$u.toast('校验失败:' + errors);
				});
		}
	},
	onLoad() {
		if (this.$route.query.value) {
			this.res = JSON.parse(decodeURIComponent(this.$route.query.value));
		}
	}
};
</script>

<style lang="scss" scoped>
.pass {
	padding: 0 30upx;
	background-color: #fefefe;
	margin: 50upx 0;
	/deep/.u-form-item__body {
		flex-direction: row !important;
	}
	// .pass_te {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	padding-bottom: 30upx;
	// 	.label{
	// 		flex:1;
	// 		text-align: right;
	// 	}
	// 	.inputContent{
	// 		flex:3.2;
	// 		position: relative;
	// 		.tip{
	// 			position: absolute;
	// 			padding-left: 18upx;
	// 			left:0;
	// 			bottom: 0;
	// 			color: red;
	// 			font-size: 12upx;
	// 			margin-bottom: -25upx;
	// 		}
	// 	}
	// 	&:last-of-type{
	// 		margin-bottom:20upx;
	// 	}
	// }
}

.u-button {
	width: 350px;
	background-color: rgba(0, 125, 255, 1);
	border-radius: 23px;
}



</style>