first
This commit is contained in:
137
pages/userSetUp/accountPwd.vue
Normal file
137
pages/userSetUp/accountPwd.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user