初始提交
This commit is contained in:
314
pages/my/modifyPsd/index.vue
Normal file
314
pages/my/modifyPsd/index.vue
Normal file
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<view class="jnpf-wrap jnpf-wrap-workflow">
|
||||
<view class="" style="background-color: #fff">
|
||||
<u-form :model="dataForm" :rules="rules" ref="dataForm" :errorType="['toast']" label-position="left"
|
||||
label-width="150" label-align="left">
|
||||
<view v-if="type == 'mobilePhone'">
|
||||
<view class="u-p-l-20 u-p-r-20">
|
||||
<u-form-item label="新手机" prop="mobilePhone" required>
|
||||
<u-input v-model="dataForm[type]" placeholder="请输入"></u-input>
|
||||
</u-form-item>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="type == 'email'">
|
||||
<view class="u-p-l-20 u-p-r-20">
|
||||
<u-form-item label="新邮箱" prop="email" required>
|
||||
<u-input v-model="dataForm[type]" placeholder="请输入"></u-input>
|
||||
</u-form-item>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="type == 'password'">
|
||||
<view class="u-p-l-20 u-p-r-20">
|
||||
<u-form-item label="旧密码" prop="oldPassword" required>
|
||||
<u-input v-model="dataForm.oldPassword" placeholder="请输入" type="password"></u-input>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="u-p-l-20 u-p-r-20">
|
||||
<u-form-item label="新密码" prop="password" required>
|
||||
<u-input v-model="dataForm.password" placeholder="请输入" type="password"></u-input>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="u-p-l-20 u-p-r-20">
|
||||
<u-form-item label="重复密码" prop="repeatPsd" required>
|
||||
<u-input v-model="dataForm.repeatPsd" placeholder="请输入" type="password"></u-input>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="u-p-l-20 u-p-r-20">
|
||||
<u-form-item label="验证码" prop="code" required>
|
||||
<view class="u-flex">
|
||||
<u-input v-model="dataForm.code" placeholder="请输入"></u-input>
|
||||
<view style="flex: 0.1">
|
||||
<u-image :showLoading="true" :src="baseURL + imgUrl" width="130px" height="38px"
|
||||
@click="changeCode">
|
||||
</u-image>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
</view>
|
||||
</u-form>
|
||||
</view>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="flowBefore-actions">
|
||||
<u-button class="buttom-btn" type="primary" @click.stop="dataFormSubmit">保存</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import md5Libs from "@/uni_modules/vk-uview-ui/libs/function/md5";
|
||||
import {
|
||||
updatePassword,
|
||||
updateUserInfo
|
||||
} from "@/api/common.js";
|
||||
import {
|
||||
useUserStore
|
||||
} from "@/store/modules/user";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
var validatePass = (rule, value, callback) => {
|
||||
// const passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}/
|
||||
//是否包含数字
|
||||
const containsNumbers = /[0-9]+/;
|
||||
//是否包含小写字符
|
||||
const includeLowercaseLetters = /[a-z]+/;
|
||||
//是否包含大写字符
|
||||
const includeUppercaseLetters = /[A-Z]+/;
|
||||
//是否包含字符
|
||||
const containsCharacters = /\W/;
|
||||
if (value === "") {
|
||||
callback(new Error("新密码不能为空"));
|
||||
} else if (this.baseForm.passwordStrengthLimit == 1) {
|
||||
if (this.baseForm.passwordLengthMin) {
|
||||
if (value.length < this.baseForm.passwordLengthMinNumber) {
|
||||
callback(
|
||||
new Error(
|
||||
"新密码长度不能小于" +
|
||||
this.baseForm.passwordLengthMinNumber +
|
||||
"位"
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
if (this.baseForm.containsNumbers) {
|
||||
if (!containsNumbers.test(value)) {
|
||||
callback(new Error("新密码必须包含数字"));
|
||||
}
|
||||
}
|
||||
if (this.baseForm.includeLowercaseLetters) {
|
||||
if (!includeLowercaseLetters.test(value)) {
|
||||
callback(new Error("新密码必须包含小写字母"));
|
||||
}
|
||||
}
|
||||
if (this.baseForm.includeUppercaseLetters) {
|
||||
if (!includeUppercaseLetters.test(value)) {
|
||||
callback(new Error("新密码必须包含大写字字母"));
|
||||
}
|
||||
}
|
||||
if (this.baseForm.containsCharacters) {
|
||||
if (!containsCharacters.test(value)) {
|
||||
callback(new Error("新密码必须包含字符"));
|
||||
}
|
||||
}
|
||||
callback();
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("重复密码不能为空"));
|
||||
} else if (value !== this.dataForm.password) {
|
||||
callback(new Error("两次密码输入不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validatPphone = (rule, value, callback) => {
|
||||
// 手机号正则表达式
|
||||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||||
if (value === "" || !value) {
|
||||
callback(new Error('请输入手机号'));
|
||||
} else if (!phoneRegex.test(value)) {
|
||||
callback(new Error("手机号格式错误"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validateEmail = (rule, value, callback) => {
|
||||
// 邮箱验证正则表达式
|
||||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||
if (value === "" || !value) {
|
||||
callback(new Error("请输入邮箱"));
|
||||
} else if (!emailRegex.test(value)) {
|
||||
callback(new Error("邮箱格式错误"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
imgUrl: "",
|
||||
timestamp: "",
|
||||
dataForm: {
|
||||
oldPassword: "",
|
||||
password: "",
|
||||
repeatPsd: "",
|
||||
code: "",
|
||||
timestamp: "",
|
||||
mobilePhone: "",
|
||||
email: "",
|
||||
},
|
||||
baseForm: {
|
||||
passwordStrengthLimit: 0,
|
||||
passwordLengthMin: false,
|
||||
passwordLengthMinNumber: 0,
|
||||
containsNumbers: false,
|
||||
includeLowercaseLetters: false,
|
||||
includeUppercaseLetters: false,
|
||||
containsCharacters: false,
|
||||
},
|
||||
rules: {
|
||||
oldPassword: [{
|
||||
required: true,
|
||||
message: "旧密码不能为空",
|
||||
trigger: "blur",
|
||||
}, ],
|
||||
password: [{
|
||||
required: true,
|
||||
validator: validatePass,
|
||||
trigger: "blur",
|
||||
}, ],
|
||||
repeatPsd: [{
|
||||
required: true,
|
||||
validator: validatePass2,
|
||||
trigger: "blur",
|
||||
}, ],
|
||||
code: [{
|
||||
required: true,
|
||||
message: "验证码不能为空",
|
||||
trigger: "blur",
|
||||
}, ],
|
||||
mobilePhone: [{
|
||||
required: true,
|
||||
validator: validatPphone,
|
||||
trigger: "blur",
|
||||
}, ],
|
||||
email: [{
|
||||
required: true,
|
||||
validator: validateEmail,
|
||||
trigger: "blur",
|
||||
}, ],
|
||||
},
|
||||
type: "",
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
baseURL() {
|
||||
return this.define.baseURL;
|
||||
},
|
||||
},
|
||||
onLoad(e) {
|
||||
this.loading = false;
|
||||
const config = JSON.parse(decodeURIComponent(e.config));
|
||||
this.type = config.type;
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.type == "mobilePhone" ?
|
||||
"修改手机" : this.type == "email" ?
|
||||
"修改邮箱" : "修改密码",
|
||||
});
|
||||
if (this.type != "password")
|
||||
return (this.dataForm[this.type] = config.vuale);
|
||||
this.changeCode();
|
||||
this.initData();
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.dataForm.setRules(this.rules);
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.$nextTick(() => {
|
||||
const config = uni.getStorageSync("sysConfigInfo") || {};
|
||||
const {
|
||||
passwordLengthMin = false,
|
||||
containsNumbers = false,
|
||||
includeLowercaseLetters = false,
|
||||
includeUppercaseLetters = false,
|
||||
containsCharacters = false,
|
||||
passwordStrengthLimit = 0,
|
||||
passwordLengthMinNumber = 0,
|
||||
} = config;
|
||||
Object.assign(this.baseForm, {
|
||||
passwordLengthMin: !!passwordLengthMin,
|
||||
containsNumbers: !!containsNumbers,
|
||||
includeLowercaseLetters: !!includeLowercaseLetters,
|
||||
includeUppercaseLetters: !!includeUppercaseLetters,
|
||||
containsCharacters: !!containsCharacters,
|
||||
passwordStrengthLimit: Number(passwordStrengthLimit) || 0,
|
||||
passwordLengthMinNumber: Number(passwordLengthMinNumber) || 0,
|
||||
});
|
||||
});
|
||||
},
|
||||
changeCode() {
|
||||
let timestamp = Math.random();
|
||||
this.timestamp = timestamp;
|
||||
this.imgUrl = `/api/file/ImageCode/${timestamp}`;
|
||||
},
|
||||
dataFormSubmit() {
|
||||
this.$refs["dataForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
let query = {};
|
||||
if (this.type == "mobilePhone" || this.type == "email") {
|
||||
query = {
|
||||
[this.type]: this.dataForm[this.type],
|
||||
};
|
||||
updateUserInfo(query)
|
||||
.then((res) => {
|
||||
this.dataForm[this.type] = query[this.type];
|
||||
this.$u.toast(res.msg);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
return;
|
||||
}
|
||||
query = {
|
||||
oldPassword: md5Libs.md5(this.dataForm.oldPassword),
|
||||
password: md5Libs.md5(this.dataForm.password),
|
||||
code: this.dataForm.code,
|
||||
timestamp: this.timestamp,
|
||||
};
|
||||
updatePassword(query)
|
||||
.then((res) => {
|
||||
this.$u.toast(res.msg);
|
||||
this.loading = false;
|
||||
const userStore = useUserStore();
|
||||
userStore.logout().then(() => {
|
||||
uni.reLaunch({
|
||||
url: "/pages/login/index",
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.changeImg();
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.jnpf-wrap.jnpf-wrap-workflow {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.u-form-item) {
|
||||
background-color: #fff;
|
||||
min-height: 112rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user