138 lines
4.8 KiB
Vue
138 lines
4.8 KiB
Vue
<template>
|
|
<view class="account-pwd">
|
|
<uni-forms ref="formRef" label-align="left" :model="vdata.formData" :rules="rules">
|
|
<uni-forms-item label="原密码" name="originalPwd">
|
|
<uni-easyinput class='jeepay-easyinput' :inputBorder="false" :type="vdata.isShowOriginalPwd ? 'text' : 'password'" v-model="vdata.formData.originalPwd" :clearable="false" placeholder="请输入登录密码" >
|
|
<template #suffixIcon> <view class='show-tips' style="color: rgba(88,132,204,1);font-weight: 400;font-size: 32rpx;" @tap="vdata.isShowOriginalPwd = !vdata.isShowOriginalPwd ">{{ vdata.isShowOriginalPwd ? '隐藏' : '显示' }}</view> </template>
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
<view class="forget-pwd" @tap="phone.open({
|
|
tips: '为了您的账户安全，您需要使用短信验证码重置密码，是否发送验证码到：',
|
|
phone: vdata.userInfo.telphone,
|
|
confirmText: '发送短信验证码'
|
|
})">
|
|
<text>忘记原密码？去找回 ></text>
|
|
</view>
|
|
<uni-forms-item label="新密码" name="newPwd">
|
|
<uni-easyinput class='jeepay-easyinput' :inputBorder="false" :type="vdata.isShowNewPwd ? 'text' : 'password'" v-model="vdata.formData.newPwd" :clearable="false" placeholder="请输入登录密码" >
|
|
<template #suffixIcon> <view class='show-tips' style="color: rgba(88,132,204,1);font-weight: 400;font-size: 32rpx;" @tap="vdata.isShowNewPwd = !vdata.isShowNewPwd ">{{ vdata.isShowNewPwd ? '隐藏' : '显示' }}</view> </template>
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="确认新密码" name="confirmPwd">
|
|
<uni-easyinput class='jeepay-easyinput' :inputBorder="false" :type="vdata.isShowConfirmPwd ? 'text' : 'password'" v-model="vdata.formData.confirmPwd" :clearable="false" placeholder="请输入登录密码" >
|
|
<template #suffixIcon> <view class='show-tips' style="color: rgba(88,132,204,1);font-weight: 400;font-size: 32rpx;" @tap="vdata.isShowConfirmPwd = !vdata.isShowConfirmPwd ">{{ vdata.isShowConfirmPwd ? '隐藏' : '显示' }}</view> </template>
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<button class="confirm flex-center" hover-class="touch-button" @click="modifyPwd">确认修改</button>
|
|
</view>
|
|
<CallPhone ref="phone" @callPhone="callPhone" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted } from 'vue'
|
|
import { $modifyPwd, $getPasswordRules } from "@/http/apiManager.js"
|
|
import storageManage from '@/commons/utils/storageManage.js'
|
|
import go from '@/commons/utils/go.js'
|
|
import infoBox from "@/commons/utils/infoBox.js"
|
|
import formUtil from '@/commons/utils/formUtil.js'
|
|
import CallPhone from './components/CallPhone.vue'
|
|
|
|
const rules = {
|
|
originalPwd: {
|
|
rules:[ formUtil.rules.requiredInputShowToast('原密码') ],
|
|
},
|
|
newPwd: {
|
|
rules:[ formUtil.rules.requiredInputShowToast('新密码') ],
|
|
},
|
|
confirmPwd: {
|
|
rules:[ formUtil.rules.requiredInputShowToast('确认新密码') ],
|
|
}
|
|
}
|
|
|
|
const formRef = ref()
|
|
const phone = ref()
|
|
const vdata = reactive({
|
|
formData: {
|
|
originalPwd: '',
|
|
newPwd: '',
|
|
confirmPwd: ''
|
|
},
|
|
userInfo: storageManage.userInfo(),
|
|
passwordRules: /^$/, //密码规则
|
|
passwordRulesText: '',//密码规则提示文字
|
|
})
|
|
|
|
onMounted(() => {
|
|
getPasswordRules()
|
|
})
|
|
|
|
const getPasswordRules = () => {
|
|
$getPasswordRules().then(({bizData}) => {
|
|
vdata.passwordRules = new RegExp(bizData.regexpRules)
|
|
vdata.passwordRulesText = bizData.errTips
|
|
})
|
|
}
|
|
|
|
const modifyPwd = () => {
|
|
formUtil.validate(formRef.value).then(() => {
|
|
let { newPwd, confirmPwd } = vdata.formData;
|
|
if(!vdata.passwordRules.test(newPwd) || !vdata.passwordRules.test(confirmPwd)) {
|
|
return infoBox.showToast(vdata.passwordRulesText)
|
|
}
|
|
if (newPwd !== confirmPwd) {
|
|
return infoBox.showToast('两次密码输入不一致')
|
|
}
|
|
$modifyPwd(vdata.formData).then(() => {
|
|
infoBox.showToast('修改成功')
|
|
storageManage.token() && storageManage.token(null, true)
|
|
go.to('PAGES_LOGIN', {}, 'redirect')
|
|
})
|
|
})
|
|
}
|
|
|
|
const callPhone = () => {
|
|
go.to('PAGES_FORGET_PASSWORD', {isRetrieve: 1 })
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.account-pwd {
|
|
min-height: 100vh;
|
|
background-color: $v-color-bgrey;
|
|
::v-deep.uni-forms-item.is-direction-left {
|
|
padding: 0 40rpx;
|
|
.uni-forms-item__label {
|
|
width: 190rpx !important;
|
|
font-size: 32rpx !important;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
color: rgba(102,102,102,1);
|
|
text-indent: 0 !important;
|
|
|
|
}
|
|
.uni-easyinput__placeholder-class {
|
|
font-size: 32rpx !important;
|
|
font-weight: 400 !important;
|
|
}
|
|
}
|
|
.forget-pwd {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 90rpx;
|
|
text-indent: 30rpx;
|
|
color: #2980fd;
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
}
|
|
.confirm {
|
|
margin: 30rpx;
|
|
height: 110rpx;
|
|
border-radius: 20rpx;
|
|
color: #fff;
|
|
background: $jeepay-bg-primary;
|
|
}
|
|
}
|
|
</style>
|