5 changed files with 313 additions and 134 deletions
@ -0,0 +1,275 @@
|
||||
<template> |
||||
<view class="container"> |
||||
<u-navbar title="安全设置" bgColor='#D3832A' leftIconColor='#ffffff' titleStyle='color:#ffffff' placeholder |
||||
:autoBack="true" leftIconSize='35'></u-navbar> |
||||
<view class="list"> |
||||
<!-- 设置密码 --> |
||||
<view class="list_item" style="display: flex;" @click="showEditPwd"> |
||||
<view class="uni-list-cell-left"> |
||||
<u-icon class="margin-right-10" name="setting-fill" color="#47beff"></u-icon> |
||||
<view> |
||||
设置密码： |
||||
</view> |
||||
</view> |
||||
<u-icon name="arrow-right" color="#000"></u-icon> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 弹出层 -- 设置密码 --> |
||||
<PopUp ref="EditPwdPop"> |
||||
<!-- 原密码 --> |
||||
<view class="flex-c-sb"> |
||||
<view class="EditPwdPop-title"> |
||||
原密码： |
||||
</view> |
||||
<u-input placeholder="原密码" border="none" :input="handleTrim('oldPwd')" v-model="editPwdForm.oldPwd" |
||||
:password="!ShowPwdObj.oldPwd" clearable> |
||||
<template #suffix> |
||||
<view @click="isShowPwd('oldPwd')"> |
||||
<u-icon v-if="ShowPwdObj.oldPwd" name="eye-off" size="40"></u-icon> |
||||
<u-icon v-else name="eye-fill" size="40"></u-icon> |
||||
</view> |
||||
</template> |
||||
</u-input> |
||||
</view> |
||||
|
||||
<!-- 新密码 --> |
||||
<view class="flex-c-sb"> |
||||
<view class="EditPwdPop-title"> |
||||
新密码： |
||||
</view> |
||||
<u-input placeholder="新密码" border="none" :input="handleTrim('newPwd1')" |
||||
onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" v-model="editPwdForm.newPwd1" |
||||
:password="!ShowPwdObj.newPwd1" clearable> |
||||
<template #suffix> |
||||
<view @click="isShowPwd('newPwd1')"> |
||||
<u-icon v-if="ShowPwdObj.newPwd1" name="eye-off" size="40"></u-icon> |
||||
<u-icon v-else name="eye-fill" size="40"></u-icon> |
||||
</view> |
||||
</template> |
||||
</u-input> |
||||
</view> |
||||
|
||||
<!-- 确认新密码 --> |
||||
<view class="flex-c-sb"> |
||||
<view class="EditPwdPop-title"> |
||||
确认新密码： |
||||
</view> |
||||
<u-input placeholder="确认新密码" border="none" :input="handleTrim('newPwd2')" v-model.trim="editPwdForm.newPwd2" |
||||
:password="!ShowPwdObj.newPwd2" clearable> |
||||
<template #suffix> |
||||
<view @click="isShowPwd('newPwd2')"> |
||||
<u-icon v-if="ShowPwdObj.newPwd2" name="eye-off" size="40"></u-icon> |
||||
<u-icon v-else name="eye-fill" size="40"></u-icon> |
||||
</view> |
||||
</template> |
||||
</u-input> |
||||
</view> |
||||
|
||||
</PopUp> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { |
||||
onShow, |
||||
onLoad, |
||||
onHide, |
||||
onPullDownRefresh |
||||
} from '@dcloudio/uni-app' |
||||
import { reactive, ref, toRefs } from 'vue'; |
||||
import { editPassword } from '@/api/user.js'; |
||||
import { |
||||
hexMD5 |
||||
} from '@/utils/md5.js' |
||||
|
||||
onPullDownRefresh(() => { |
||||
const timer = setTimeout(() => { |
||||
// 关闭下拉刷新 |
||||
uni.stopPullDownRefresh() |
||||
clearTimeout(timer) |
||||
}, 500) |
||||
}) |
||||
|
||||
const details = reactive({ |
||||
// |
||||
scanStateList: [], |
||||
// 选中的索引 -- 默认为关闭 |
||||
scanStateChooseIndex: 0 |
||||
}) |
||||
|
||||
// 组件实例 |
||||
/** 修改密码 */ |
||||
const EditPwdPop = ref() |
||||
|
||||
const ShowPwdObj = reactive({ |
||||
oldPwd: false, |
||||
newPwd1: false, |
||||
newPwd2: false, |
||||
}) |
||||
|
||||
const editPwdForm = reactive({ |
||||
oldPwd: '', |
||||
newPwd1: '', |
||||
newPwd2: '', |
||||
}) |
||||
|
||||
/** 退出登录 */ |
||||
function removeall() { |
||||
const res = uni.getStorageInfoSync(); |
||||
res.keys.map(item => { |
||||
if (item == 'loginuser' || item == 'HistoryDate' || item == 'setip' || item == 'checkname' || item.indexOf('IMAGE_CACHE_INFO') != -1) { |
||||
return |
||||
} |
||||
uni.removeStorageSync(item) |
||||
}) |
||||
uni.reLaunch({ |
||||
url: '/pages/login/login' |
||||
}) |
||||
console.log(res.currentSize); |
||||
console.log(String(res.limitSize)); |
||||
} |
||||
|
||||
/** 显示设置密码弹窗 */ |
||||
const showEditPwd = () => { |
||||
EditPwdPop.value.setDetails({ |
||||
title: '设置密码', |
||||
showPopUp: true, |
||||
async success() { |
||||
console.log('editPwdForm :>> ', editPwdForm); |
||||
let _isReturn = false |
||||
// 循环验证密码是否符合规则 |
||||
for (let key in editPwdForm) { |
||||
if (editPwdForm[key].length < 6) { |
||||
_isReturn = true |
||||
uni.showToast({ |
||||
title: '请输入6位以上密码', |
||||
icon: 'none' |
||||
}) |
||||
// 退出循环 |
||||
break |
||||
} |
||||
} |
||||
|
||||
if (_isReturn) return |
||||
|
||||
// 原密码 |
||||
let { password } = <{ password : string; tenantId : string; username : string }>uni.getStorageSync('loginuser') |
||||
if (editPwdForm.oldPwd !== password) { |
||||
uni.showToast({ |
||||
title: '密码与原密码不一致', |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
|
||||
// 两次密码比对 |
||||
if (editPwdForm.newPwd1 !== editPwdForm.newPwd2) { |
||||
uni.showToast({ |
||||
title: '确认密码与新密码不一致', |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
|
||||
/** 加密密码 */ |
||||
const submitData = { |
||||
oldPassword: hexMD5(editPwdForm.oldPwd), |
||||
newPassword: hexMD5(editPwdForm.newPwd1), |
||||
newPassword1: hexMD5(editPwdForm.newPwd2), |
||||
} |
||||
|
||||
const response = await editPassword(submitData) |
||||
|
||||
console.log('response :>> ', response); |
||||
if (response.msg) uni.showToast({ |
||||
title: response.msg, |
||||
icon: 'none' |
||||
}) |
||||
if (response.code !== 200) return |
||||
removeall() |
||||
} |
||||
}) |
||||
} |
||||
|
||||
/** 处理文本输入 -- 去除收尾空格 */ |
||||
const handleTrim = (item) => { |
||||
editPwdForm[item] = uni.$u.trim(editPwdForm[item].trim(), 'all') |
||||
} |
||||
|
||||
/** 是否显示密码 */ |
||||
const isShowPwd = (item) => { |
||||
ShowPwdObj[item] = !ShowPwdObj[item] |
||||
} |
||||
|
||||
const { } = toRefs(details) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.container { |
||||
width: 100vw; |
||||
height: 100vh; |
||||
// background: #fff; |
||||
} |
||||
|
||||
.list {} |
||||
|
||||
.list_item { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 20upx; |
||||
border-bottom: 2upx solid #eee; |
||||
background: #fff; |
||||
position: relative; |
||||
|
||||
.uni-list-cell-db { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
padding: 20upx; |
||||
width: 100%; |
||||
height: 100%; |
||||
text-align: right; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
&:last-child { |
||||
border-bottom: 0px; |
||||
} |
||||
|
||||
.uni-list-cell-left { |
||||
display: inline-flex; |
||||
} |
||||
} |
||||
|
||||
.margin-right-10 { |
||||
margin-right: 10upx; |
||||
} |
||||
|
||||
// 修改密码弹窗 |
||||
.EditPwdPop-title { |
||||
position: relative; |
||||
width: 200upx; |
||||
flex: none; |
||||
|
||||
&::after { |
||||
right: 20upx; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
position: absolute; |
||||
content: ''; |
||||
display: block; |
||||
width: 2upx; |
||||
height: 40upx; |
||||
background: #000; |
||||
} |
||||
} |
||||
|
||||
.flex-c-sb { |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 20upx 0 10upx; |
||||
border-bottom: 1upx solid #aaa; |
||||
padding: 20upx 0 10upx; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue