<template>
|
<div class="password">
|
<div class="password_tip">
|
<img src="@/assets/icon/password_ic_tip@2x.png" alt="" />
|
<span>密码由6-20个英文字母、数字或符号组成</span>
|
</div>
|
<div class="password_list">
|
<div class="password_list_item">
|
<span>原密码</span>
|
<div class="password_list_item_box">
|
<input type="password" v-model="form.originalPassword" maxlength="20" placeholder="请输入原密码">
|
<p @click="forgotPassword">忘记密码</p>
|
</div>
|
</div>
|
<div class="password_list_item">
|
<span>新密码</span>
|
<div class="password_list_item_box">
|
<input type="password" v-model="form.newPassword" maxlength="20" placeholder="请输入新密码">
|
</div>
|
</div>
|
<div class="password_list_item">
|
<span>确认密码</span>
|
<div class="password_list_item_box">
|
<input type="password" v-model="form.confirmPassword" maxlength="20" placeholder="再次输入新密码">
|
</div>
|
</div>
|
</div>
|
<div class="password_footer">
|
<button v-preventReClick class="password_footer_submit" @click="submit">
|
<span>完成</span>
|
</button>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive } from 'vue'
|
import { Toast } from 'vant'
|
import { useRouter } from "vue-router"
|
import { updatePwd } from '@/apis/PersonalAPI'
|
import { passwordVerification } from '@/interface'
|
|
const router = useRouter()
|
|
let form = reactive<passwordVerification>({
|
originalPassword: '',
|
newPassword: '',
|
confirmPassword: ''
|
})
|
|
const forgotPassword = (): void => {
|
|
}
|
|
const submit = (): void => {
|
if (!form.originalPassword) {
|
Toast({ message: '原密码不能为空' })
|
} else if (!form.newPassword) {
|
Toast({ message: '新密码不能为空' })
|
} else if (!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{6,}$/.test(form.newPassword)) {
|
Toast({ message: '密码格式不正确' })
|
} else if (!form.confirmPassword) {
|
Toast({ message: '确认密码不能为空' })
|
} else if (form.newPassword !== form.confirmPassword) {
|
Toast({ message: '两次输入的密码不一致' })
|
} else {
|
updatePwd({
|
newPwd: form.newPassword,
|
oldPwd: form.originalPassword
|
}).then(res => {
|
if (res.code === 200) {
|
Toast.success({ message: '修改成功', duration: 2000, forbidClick: true })
|
setTimeout(() => {
|
router.go(-1)
|
}, 2000)
|
}
|
})
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.password {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
background: white;
|
.password_tip {
|
height: 72px;
|
display: flex;
|
align-items: center;
|
background: #F7F7F7;
|
padding: 0 30px;
|
img {
|
width: 24px;
|
height: 24px;
|
margin-right: 10px;
|
}
|
span {
|
font-size: 24px;
|
font-weight: 400;
|
color: #666666;
|
}
|
}
|
.password_list {
|
padding: 0 30px;
|
.password_list_item {
|
display: flex;
|
align-items: center;
|
height: 90px;
|
border-bottom: 1PX solid #E5E5E5;
|
span {
|
width: 150px;
|
flex-shrink: 0;
|
font-size: 30px;
|
font-weight: 400;
|
color: #222222;
|
}
|
.password_list_item_box {
|
display: flex;
|
justify-content: space-between;
|
flex: 1;
|
input {
|
border: none;
|
font-size: 30px;
|
}
|
input::-webkit-input-placeholder {
|
font-size: 28px;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
p {
|
font-size: 26px;
|
font-weight: 400;
|
color: $nav-color;
|
}
|
}
|
}
|
}
|
.password_footer {
|
margin-top: 80px;
|
padding: 0 30px;
|
.password_footer_submit {
|
width: 100%;
|
height: 88px;
|
border: none;
|
background: #4275FC;
|
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
span {
|
font-size: 30px;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
</style>
|
