154 lines
4.6 KiB
Vue
154 lines
4.6 KiB
Vue
<template>
|
||
<view class="page-wrapper global-wrapper bgF2" v-if="flag">
|
||
<JHeaderTitle title="修改密码" bgColor="#f2f2f2"></JHeaderTitle>
|
||
<view class="origin-pwd">
|
||
<LoginInput
|
||
title="原密码"
|
||
v-model:value="pwdInfo.oldPassword"
|
||
bgColor="#fff"
|
||
pd="30rpx 30rpx 20rpx 30rpx"
|
||
place="请输入原密码"
|
||
:password="!oldPasswordEyes"
|
||
:rules="{ name: 'oldPassword', rule: 'REG_NotNUll' }"
|
||
>
|
||
<view class="right-eyes" @tap="oldPasswordEyes = !oldPasswordEyes">
|
||
<image :src="eyeImg[oldPasswordEyes ? 1 : 0]" mode="scaleToFill" />
|
||
</view>
|
||
</LoginInput>
|
||
<view class="forget" @tap="jumpPage">忘记原密码？</view>
|
||
</view>
|
||
<view class="edit-pwd">
|
||
<LoginInput
|
||
title="新密码"
|
||
v-model:value="pwdInfo.newPassword"
|
||
place="请输入新密码"
|
||
bgColor="#fff"
|
||
pd="50rpx 30rpx 30rpx 30rpx"
|
||
:password="!isOpenEyes"
|
||
:rules="{ name: 'newPassword', rule: 'REG_NotNUll' }"
|
||
>
|
||
<view class="right-eyes" @tap="isOpenEyes = !isOpenEyes">
|
||
<image :src="eyeImg[isOpenEyes ? 1 : 0]" mode="scaleToFill" />
|
||
</view>
|
||
</LoginInput>
|
||
<LoginInput
|
||
title=""
|
||
v-model:value="pwdInfo.confirmPassword"
|
||
place="请再次输入新密码"
|
||
bgColor="#fff"
|
||
pd="0 30rpx"
|
||
:password="!confirmOpenEyes"
|
||
:rules="{ name: 'confirmPassword', rule: 'REG_NotNUll' }"
|
||
>
|
||
<view class="right-eyes" @tap="confirmOpenEyes = !confirmOpenEyes">
|
||
<image :src="eyeImg[confirmOpenEyes ? 1 : 0]" mode="scaleToFill" />
|
||
</view>
|
||
</LoginInput>
|
||
</view>
|
||
<JButton pd="30rpx" @HandleTouch="editPwd.open()">确认修改</JButton>
|
||
</view>
|
||
<JPopup ref="editPwd">
|
||
<JCard @confirm="confirm" title="确认修改" @tap.stop>
|
||
密码修改成功后，当前账号将退出登录。重新登录需使用更新后的密码。</JCard
|
||
>
|
||
<JButton pd="0 30rpx 30rpx 30rpx" bgColor="rgba(255, 255, 255, 0.8)" color="#000" @HandleTouch="editPwd.close()"
|
||
>取消</JButton
|
||
>
|
||
</JPopup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from "vue"
|
||
import { $modifyPwd, $getPasswordRules } from "../../http/apiManager.js"
|
||
import { onShow } from "@dcloudio/uni-app"
|
||
import JMainCard from "@/components//newComponents/JMainCard/JMainCard"
|
||
import LoginInput from "@/components//newComponents/LoginInput/LoginInput"
|
||
import JButton from "@/components//newComponents/JButton/JButton"
|
||
import JPopup from "@/components//newComponents/JPopup/JPopup"
|
||
import JCard from "@/components/newComponents/JCard/JCard"
|
||
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue"
|
||
import user from "@/hooks/user.js"
|
||
import { validateArray, clearRulesArray } from "@/hooks/rules"
|
||
import { Base64 } from "js-base64"
|
||
onShow(() => {
|
||
flag.value = true
|
||
getRules()
|
||
})
|
||
const eyeImg = reactive(["/static/loginImg/login-eye-close.svg", "/static/loginImg/login-eye-open.svg"])
|
||
const isOpenEyes = ref(false)
|
||
const confirmOpenEyes = ref(false)
|
||
const oldPasswordEyes = ref(false)
|
||
const editPwd = ref()
|
||
const pwdInfo = reactive({})
|
||
const flag = ref(true)
|
||
const rules = ref({})
|
||
const getRules = () => {
|
||
$getPasswordRules().then((res) => {
|
||
rules.value.rule = new RegExp(res.bizData.regexpRules)
|
||
rules.value.ruleText = res.bizData.errTips
|
||
})
|
||
}
|
||
const confirm = () => {
|
||
if (validateArray(pwdInfo)) {
|
||
if (pwdInfo.newPassword !== pwdInfo.confirmPassword)
|
||
return uni.showToast({
|
||
title: "两次密码输入不一致",
|
||
icon: "error",
|
||
mask: true,
|
||
})
|
||
if (!rules.value.rule.test(pwdInfo.newPassword))
|
||
return uni.showToast({
|
||
title: rules.value.ruleText,
|
||
icon: "none",
|
||
})
|
||
uni.showLoading({
|
||
title: "修改中",
|
||
mask: true,
|
||
})
|
||
$modifyPwd({
|
||
originalPwd: Base64.encode(pwdInfo.oldPassword),
|
||
confirmPwd: Base64.encode(pwdInfo.newPassword),
|
||
}).then((res) => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: "修改成功",
|
||
icon: "success",
|
||
mask: true,
|
||
})
|
||
clearRulesArray()
|
||
editPwd.value.close()
|
||
user.logout()
|
||
})
|
||
}
|
||
}
|
||
const jumpPage = () => {
|
||
flag.value = false
|
||
uni.navigateTo({ url: "/pages/login/forgetPassword" })
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-wrapper {
|
||
.origin-pwd {
|
||
font-size: 33rpx;
|
||
.forget {
|
||
margin-left: 50rpx;
|
||
font-size: 27rpx;
|
||
color: $primaryColor;
|
||
}
|
||
}
|
||
}
|
||
.right-eyes {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
background-color: transparent;
|
||
}
|
||
image {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
</style>
|