logpm/pagesUser/pages/securitySettings/securitySettings.vue

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