<template>
|
<view class="main">
|
<u-form :model="modelForm"
|
label-position="top"
|
:rules="rules"
|
ref="uForm"
|
label-width="80px">
|
<template v-if="isShowPassword">
|
<u-form-item
|
prop="originalPassword"
|
label="原密码"
|
required
|
borderBottom>
|
<u-input v-if='inputType==="password"'
|
v-model="modelForm.originalPassword"
|
border="surround"
|
placeholder="密码应由8-16位数字、字母、符号组成。"
|
:type='inputType' />
|
<u-input v-else
|
v-model="modelForm.originalPassword"
|
border="surround"
|
placeholder="密码应由8-16位数字、字母、符号组成。"
|
:type='inputType' />
|
</u-form-item>
|
</template>
|
<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="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:[],
|
isShowPassword: true,
|
userInfo: {},
|
checkboxValue: [],
|
inputType: 'password',
|
isFocus: false,
|
modelForm: {
|
originalPassword:'', //原始密码
|
password: '', //新密码
|
secondPassword: '', //二次确认密码
|
userId:''
|
},
|
processLoading: false,
|
rules: {
|
originalPassword: [{
|
type: 'string',
|
required: this.isShowPassword,
|
message: '请填写密码',
|
trigger: ['blur', 'change']
|
}],
|
password: [{
|
required: true,
|
validator: checkPassword,
|
trigger: 'change'
|
}],
|
secondPassword: [{
|
required: true,
|
validator: validatePass,
|
trigger: "blur"
|
}]
|
}
|
}
|
},
|
onLoad(params) {
|
let that=this
|
if (params.id) {
|
this.modelForm.userId = params.id
|
}
|
},
|
onReady() {
|
this.$refs.uForm.setRules(this.rules)
|
},
|
methods: {
|
checkChange(name) {
|
this.inputType = name.length === 0 ? 'password' : ''
|
this.isFocus = true
|
},
|
process() {
|
this.$refs.uForm.validate().then(res => {
|
this.processLoading = true;
|
this.$reqPut('passwordEdit', this.modelForm, 'json').then(result => {
|
if (result.code === 0) {
|
this.processLoading = false;
|
this.$u.toast('修改成功,即将回到首页')
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '/pages/login/login'
|
})
|
}, 800)
|
} else {
|
this.$u.toast(result.msg ? result.msg : '修改失败')
|
}
|
})
|
}).catch(errors => {
|
// uni.$u.toast('校验失败')
|
}).finally(() => {
|
this.processLoading = false;
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss"
|
scoped>
|
.main {
|
width: 94%;
|
margin: vww(10) auto;
|
|
.process-button {
|
width: 30%;
|
margin: vww(20) auto;
|
min-width: 200rpx;
|
}
|
.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>
|
