<template>
|
<view class="main">
|
<u-form :model="modelForm"
|
label-position="top"
|
:rules="rules"
|
ref="uForm"
|
label-width="80px">
|
<u-form-item prop="originalPassword"
|
label="原密码"
|
required
|
borderBottom>
|
<u-input v-if='inputType==="password"'
|
v-model="modelForm.originalPassword"
|
border="surround"
|
placeholder="请输入密码(仅支持数字字母下划线)"
|
:type='inputType' />
|
<u-input v-else
|
v-model="modelForm.originalPassword"
|
border="surround"
|
placeholder="请输入密码(仅支持数字字母下划线)"
|
:type='inputType' />
|
</u-form-item>
|
<u-form-item prop="password"
|
label="新密码"
|
required
|
borderBottom>
|
<u-input v-if='inputType==="password"'
|
v-model="modelForm.password"
|
border="surround"
|
placeholder="请输入密码(仅支持数字字母下划线)"
|
:type='inputType' />
|
<u-input v-else
|
v-model="modelForm.password"
|
border="surround"
|
placeholder="请输入密码(仅支持数字字母下划线)"
|
:type='inputType' />
|
</u-form-item>
|
<view class="intensity">
|
<view class="psdText">密码强度</view>
|
<view
|
class="line"
|
:class="[level.includes('low') ? 'low' : '']"></view>
|
<view
|
class="line"
|
:class="[level.includes('middle') ? 'middle' : '']"></view>
|
<view
|
class="line"
|
:class="[level.includes('high') ? 'high' : '']"></view>
|
<div class="warningtext">
|
密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码
|
</div>
|
</view>
|
<u-form-item prop="secondPassword"
|
label="确认密码"
|
required
|
borderBottom>
|
<u-input v-if='inputType==="password"'
|
v-model="modelForm.secondPassword"
|
border="surround"
|
placeholder="请再次输入密码(仅支持数字字母下划线)"
|
type='password' />
|
<u-input v-else
|
v-model="modelForm.secondPassword"
|
border="surround"
|
placeholder="请再次输入密码(仅支持数字字母下划线)"
|
type='text' />
|
</u-form-item>
|
<u-form-item>
|
<view class="process-button">
|
<u-button type="primary"
|
text="确定"
|
:loading="processLoading"
|
@click.stop="process"></u-button>
|
</view>
|
</u-form-item>
|
<u-form-item prop="checkboxValue">
|
<u-checkbox-group v-model="checkboxValue"
|
@change="checkChange">
|
<u-checkbox label="显示密码"
|
name="显示"
|
iconSize="32"
|
label-size="32"
|
size="40"
|
shape="circle">
|
</u-checkbox>
|
</u-checkbox-group>
|
</u-form-item>
|
</u-form>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
const validatePass = (rule, value, callback) => {
|
if (this.modelForm.password !== "") {
|
if (value !== this.modelForm.password) {
|
callback(new Error("两次输入密码不一致!"));
|
} else {
|
callback();
|
}
|
} else {
|
callback();
|
}
|
};
|
const checkPassword = (rule, value, callback) => {
|
// let roles = this.$store.getters.roles;//当前用户角色id
|
// let passL = 8;
|
// if (roles.concat(1)){
|
// passL = 10
|
// }
|
let passL = 8;
|
this.level = []
|
if(!value) {
|
return callback('密码不能为空')
|
}
|
if(value.length < passL) {
|
return callback(`密码不能少于${passL}位`)
|
}
|
if(value.length > 16) {
|
return callback('密码不能大于16位')
|
}
|
//校验是数字
|
const regex1 = /^\d+$/
|
// 校验字母
|
const regex2 = /^[A-Za-z]+$/
|
// 校验符号
|
const regex3 =
|
/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/
|
if(regex1.test(value)) {
|
this.level.push('low')
|
return callback('密码强度过低')
|
}else if(regex2.test(value)) {
|
this.level.push('low')
|
return callback('密码强度过低')
|
}else if(regex3.test(value)) {
|
this.level.push('low')
|
return callback('密码强度过低')
|
}else if(/^[A-Za-z\d]+$/.test(value)) {
|
this.level.push('low')
|
this.level.push('middle')
|
return callback('密码强度过低')
|
}else if(
|
/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
|
value
|
)
|
) {
|
this.level.push('low')
|
this.level.push('middle')
|
return callback('密码强度过低')
|
}else if(
|
/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
|
value
|
)
|
) {
|
this.level.push('low')
|
this.level.push('middle')
|
return callback('密码强度过低')
|
} else if (
|
/^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
|
value
|
)
|
) {
|
this.level.push('low')
|
this.level.push('middle')
|
this.level.push('high')
|
}
|
return callback()
|
};
|
return {
|
level:[], //密码强度数组
|
userInfo: {},
|
checkboxValue: [],
|
inputType: 'password',
|
isFocus: false,
|
modelForm: {
|
originalPassword:'', //原始密码
|
password: '', //新密码
|
secondPassword: '' //二次确认密码
|
},
|
processLoading: false,
|
rules: {
|
originalPassword: [{
|
type: 'string',
|
required: true,
|
message: '请填写密码',
|
trigger: ['blur', 'change']
|
}
|
],
|
password:[{
|
required: true,
|
validator: checkPassword,
|
trigger: 'change'
|
}],
|
secondPassword: [{
|
required: true,
|
validator: validatePass,
|
trigger: "blur"
|
}]
|
}
|
}
|
},
|
computed: {
|
roleType() {
|
return uni.getStorageSync('roleType')
|
},
|
userId() {
|
console.log(uni.getStorageSync('userId'),'userId=========')
|
return uni.getStorageSync('userId')
|
}
|
},
|
onLoad(params) {
|
if (this.roleType === 3) {
|
this.userInfo = JSON.parse(params.userInfo)
|
} else {
|
this.getUserInfo(params.phone, params.idCard)
|
}
|
|
},
|
onReady() {
|
this.$refs.uForm.setRules(this.rules)
|
},
|
methods: {
|
getClass() {
|
// [level.includes('low') ? 'low' : '']
|
if(this.level.includes('low')) {
|
return 'low'
|
}else {
|
return ''
|
}
|
},
|
getUserInfo(phone, idCard) {
|
this.$reqGet('phoneAndCard', { phone, idCard }).then(res => {
|
if (res.code === 0) {
|
this.userInfo = res.data
|
} else {
|
uni.$u.toast('加载失败')
|
}
|
})
|
|
},
|
checkChange(name) {
|
this.inputType = name.length === 0 ? 'password' : ''
|
this.isFocus = true
|
},
|
process() {
|
console.log(this.userInfo,'userInfo======')
|
if(!this.level.includes('middle') && !this.level.includes('high')) {
|
return this.$u.toast('密码强度太弱')
|
}
|
this.$refs.uForm.validate().then(res => {
|
this.processLoading = true;
|
let params = Object.assign({},this.modelForm, {userId:this.userId.toString()})
|
console.log(params,'params=====')
|
this.$reqAllJson('appUpdateById', params, { method: 'PUT', 'Content-type': 'application/json' }).then(res => {
|
this.processLoading = false;
|
if (res.code === 0) {
|
this.$u.toast('修改成功,即将回到首页')
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '/pages/login/login'
|
})
|
}, 800)
|
} else {
|
this.$u.toast(res.msg ? res.msg : '修改失败')
|
}
|
}).catch(e => {
|
// uni.$u.toast('校验失败')
|
}).finally(() => {
|
this.processLoading = false;
|
})
|
}).catch(errors => {
|
uni.$u.toast('请填写完整信息')
|
})
|
|
// }).catch(errors => {
|
// uni.$u.toast('校验失败')
|
// })
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss"
|
scoped>
|
.main {
|
width: 100%;
|
padding: vww(20);
|
box-sizing: border-box;
|
|
.process-button {
|
margin-top: vww(20);
|
}
|
.intensity {
|
width: 100%;
|
margin-top: 10rpx;
|
.psdText {
|
font-size: 14px;
|
margin-right: 10px;
|
}
|
|
.line {
|
display: inline-block;
|
width: 70rpx;
|
height: 8rpx;
|
background: #d8d8d8;
|
border-radius: 6rpx;
|
margin-right: 16rpx;
|
|
&.low {
|
background: #f4664a;
|
}
|
|
&.middle {
|
background: #ffb700;
|
}
|
|
&.high {
|
background: #2cbb79;
|
}
|
}
|
|
.level {
|
margin: 0 32rpx 0 16rpx;
|
}
|
|
.warningtext {
|
color: #5a5a5a;
|
font-size: 24rpx;
|
margin-top: 10rpx;
|
}
|
}
|
}
|
</style>
|
