workApp/pages/my/updatePassword.vue

<template>
	<view class="page_body">
		<!-- 导航 -->
		<rp-nav-bar height="88" :showHeaderborder="false" @GoBack="GoBack"></rp-nav-bar>
		<view class="page_module">
			<view class="page_title">修改密码</view>
			<view class="tip">请输入两次相同的密码进行修改</view>
			<uni-forms class="forms_style" :model="state.formData" labelWidth="0rpx">
				<uni-forms-item>
					<uni-easyinput v-model="state.formData.oldPassword" :type="state.showOldPassword?'password':'text'" :clearable="false" :passwordIcon="false" placeholder="请输入原始密码">
						<template #right>
							<!-- 小眼睛 -->
							<image v-if="state.formData.oldPassword && state.showOldPassword" class="password_icon" src="@/static/image/icon/login_eyes.png" @click="OnEyes('old')"></image>
							<image v-if="state.formData.oldPassword && !state.showOldPassword" class="password_icon" src="@/static/image/icon/login_eye.png" @click="OnEyes('old')"></image>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<uni-easyinput v-model="state.formData.newPassword" :type="state.showNewPassword?'password':'text'" :clearable="false" :passwordIcon="false" placeholder="请输入6位以上新密码">
						<template #right>
							<!-- 小眼睛 -->
							<image v-if="state.formData.newPassword && state.showNewPassword" class="password_icon" src="@/static/image/icon/login_eyes.png" @click="OnEyes('new')"></image>
							<image v-if="state.formData.newPassword && !state.showNewPassword" class="password_icon" src="@/static/image/icon/login_eye.png" @click="OnEyes('new')"></image>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<uni-easyinput v-model="state.formData.confirmNewPassword" :type="state.showConfirmNewPassword?'password':'text'" :clearable="false" :passwordIcon="false" placeholder="请再次输入新密码">
						<template #right>
							<!-- 小眼睛 -->
							<image v-if="state.formData.confirmNewPassword && state.showConfirmNewPassword" class="password_icon" src="@/static/image/icon/login_eyes.png" @click="OnEyes('confirmNew')"></image>
							<image v-if="state.formData.confirmNewPassword && !state.showConfirmNewPassword" class="password_icon" src="@/static/image/icon/login_eye.png" @click="OnEyes('confirmNew')"></image>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<button class="btn_submit" type="primary" :loading="state.loading" @click="HandleUpdatePassword">确定</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import rpNavBar from '@/components/nav-bar.vue';
	import uniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
	import uniFormsItem from '@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue';
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
	import { encrypt } from '@/common/crypto.js';
	import user from '@/reqApi/user.js';
	import { useStore } from 'vuex';
	const store = useStore();
	const state = reactive({
		formData: {
			oldPassword: '',
			newPassword: '',
			confirmNewPassword: '',
		},
		showOldPassword:true,
		showNewPassword:true,
		showConfirmNewPassword:true,
		loading: false
	})
	//小眼睛
	const OnEyes = (type) => {
		if(type == 'new') {
			state.showNewPassword = !state.showNewPassword;
		}else if(type == 'old'){
			state.showOldPassword = !state.showOldPassword;
		}else{
			state.showConfirmNewPassword = !state.showConfirmNewPassword;
		}
	}
	//返回
	const GoBack = () => {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
	//修改密码
	const HandleUpdatePassword = () => {
		const passwordLen = state.formData.newPassword.length;
		//不为空限制
		if(!state.formData.oldPassword){
			uni.showToast({
				title: '请输入原始密码!',
				icon: 'none'
			})
			return false
		}
		if(!state.formData.newPassword){
			uni.showToast({
				title: '请输入新密码!',
				icon: 'none'
			})
			return false
		}
		if(!state.formData.confirmNewPassword){
			uni.showToast({
				title: '请再次输入新密码!',
				icon: 'none'
			})
			return false
		}
		if(state.formData.newPassword != state.formData.confirmNewPassword){
			uni.showToast({
				title: '两次输入密码不一致!',
				icon: 'none'
			})
			return false
		}
		state.loading = true;
		user.changeMinePassword({
			oldPassword:encrypt(state.formData.oldPassword),
			newPassword:encrypt(state.formData.newPassword),
			// confirmNewPassword:encrypt(state.formData.confirmNewPassword)
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '修改成功,请重新登录！',
					icon: 'none'
				})
				//清除token 以及登录相关信息
				store.dispatch('logout',true);
				uni.reLaunch({
					url: '/pages/login/index'
				});
			} else {
				uni.showToast({
					title: res.msg || '操作失败！',
					icon: 'none'
				})
			}
		}).finally(() => {
			state.loading = false;
		})
	}
</script>

<style scoped lang="scss">
	.page_body {
		height: 100%;
		background-color: #FFFFFF;
		.page_module {
			padding-top: 0rpx !important;
			padding: 0 48rpx;

			.page_title {
				margin-top: 32rpx;
				display: flex;
				width: 100%;
				color: #000000;
				font-size: 56rpx;
				line-height: 100%;
				font-weight: 500;
			}

			.tip {
				display: flex;
				width: 100%;
				margin-top: 16rpx;
				color: #CCCCCC;
				font-size: 32rpx;
				line-height: 100%;
			}

			.forms_style {
				margin-top: 64rpx;

				:deep(.uni-forms-item) {
					margin-bottom: 48rpx !important;

					&:last-child {
						margin-bottom: 0 !important;
					}

					.uni-forms-item__label {
						display: none;
					}

					.uni-forms-item__content {
						font-size: 32rpx;
						color: #333333;

						//输入框
						.uni-easyinput {
							.is-input-border {
								border: 1px solid #EBEEF5;
								border-radius: 16rpx;
							}

							.uni-easyinput__content-input {
								height: 96rpx;
								font-size: 32rpx;
								font-weight: 400;
								padding-left: 32rpx !important;

								.uni-easyinput__placeholder-class {
									font-size: 32rpx;
									color: #CCCCCC;
								}
							}

							.password_icon {
								width: 32rpx;
								height: 32rpx;
								margin: 0 32rpx;
							}

							.content-clear-icon {
								font-size: 40rpx !important;
								padding: 0 10rpx;
							}
						}
					}
					.btn_submit {
						margin-top: 32rpx;
						width: 100%;
						height: 96rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #2E64FA !important;
						border-radius: 16rpx;
						color: #FFFFFF;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>