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>
|