subject_gxj/xj_project_app/pages/login/changePass/index.vue

<template>
	<view class="container">
		<view class="back-btn" @click="backToBefore()">
			<u-icon name="arrow-left" color="#fff" size="20" customStyle="margin:0 auto"></u-icon>

			<text class="back-text">密码修改</text>
		</view>

		<view class="change-content">
			<view class="pass-item">
				<view class="pass-item-name">账号</view>
				<input type="text" class="pass-item-content" v-model="loginName" />
			</view>

			<view class="pass-item">
				<view class="pass-item-name">验证码</view>
				<input type="text" class="pass-item-content" v-model="checkcode" />
			</view>

			<view class="pass-item">
				<view class="pass-item-name">新密码</view>
				<input :type="newPassType" class="pass-item-content" v-model="newPass" placeholder="含大小写数字与特殊符号" />
				<view class="pass-item-icon" :class="newPassType === 'text' ? 'pass-item-hide' :''">
					<image :src="newPassIcon" @click="changeInputType('new')"></image>
				</view>
			</view>

			<view class="pass-item">
				<view class="pass-item-name">确认密码</view>
				<input :type="checkPassType" class="pass-item-content" v-model="checkPass" placeholder="需与新密码一致" />
				<view class="pass-item-icon" :class="checkPassType === 'text' ? 'pass-item-hide' :''">
					<image :src="checkPassIcon" @click="changeInputType('check')"></image>
				</view>
			</view>
		</view>

		<view class="confirm-btn" @click="confirmChange()">
			确定修改
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	import {
		onLoad
	} from "@dcloudio/uni-app"

	import {
		verfiyChcekcodeWithName,
		changePass
	} from "@/api/login.js"

	import passSee from "@/static/pass-see.svg"
	import passHide from "@/static/pass-hide.svg"

	function backToBefore() {
		uni.navigateBack({})
	};

	let loginName = ref(null)
	let doneText = ref(null)
	let checkcode = ref(null)

	let newPassType = ref("password")
	let newPassIcon = ref(passHide)
	let newPass = ref('')

	let checkPassType = ref("password")
	let checkPassIcon = ref(passHide)
	let checkPass = ref('')

	function changeInputType(type) {
		if (type === "new") {
			newPassType.value = newPassType.value === "password" ? "text" : "password"
			newPassIcon.value = newPassType.value === "password" ? passHide : passSee
		} else {
			checkPassType.value = checkPassType.value === "password" ? "text" : "password"
			checkPassIcon.value = checkPassType.value === "password" ? passHide : passSee
		}
	}

	let emailAddress = null

	function confirmChange() {
		if (newPass.value !== checkPass.value) {
			return uni.showToast({
				title: "两次输入密码不一致",
				icon: "error",
				duration: 2000
			})
		}

		let reg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[~!@#$%^&*)(_+}{|:?><]).{8,16}$/
		let isValid = reg.test(newPass.value)
		if (!isValid) {
			return uni.showToast({
				title: "密码强度过低。",
				icon: "error",
				duration: 2000
			})
		}


		let params = {
			login: loginName.value,
			email: emailAddress,
			code: checkcode.value
		}
		verfiyChcekcodeWithName(params).then(res => {
			if (res.code === 200 && res.data) {
				let passParams = {
					id: res.data.id,
					password: newPass.value,
					passwordCheck: checkPass.value
				}

				changePass(passParams).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: doneText.value,
							icon: "success",
							duration: 2000
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}, 2000)
					}
				})
			}
		})
	}

	onLoad((option) => {
		emailAddress = option.email
		doneText.value = option.login === "done" ? "密码修改完成,请重新登录。" : "密码修改完成。"
	})
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #EAF0FA;
	}

	.container {
		position: relative;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #1869F6 0%, #EAF0FA 64%, #EAF0FA 100%);

		.back-btn {
			position: absolute;
			top: 8%;
			left: 4%;
			display: flex;
			font-size: 40rpx;
			font-weight: 500;
			color: #FFF;

			.back-text {
				margin-left: 28rpx;
			}
		}

		.change-content {
			position: absolute;
			top: 226rpx;
			left: 4%;
			width: 92%;
			height: 358rpx;
			padding: 19rpx 28rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 40rpx;

			.pass-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 80rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #9E9E9E;

				.pass-item-name {
					flex: 2;
				}

				.pass-item-content {
					flex: 6;
					text-align: right;
					font-size: 32rpx;
					color: #343437;
				}

				.pass-item-icon {
					flex: 1;
					height: 100%;
					line-height: 80rpx;
					text-align: right;

					image {
						width: 36rpx;
						height: 18rpx;
					}
				}

				.pass-item-hide {
					image {
						width: 36rpx;
						height: 28rpx;
					}
				}
			}
		}

		.confirm-btn {
			position: absolute;
			top: 640rpx;
			left: 4%;
			width: 92%;
			height: 84rpx;
			line-height: 84rpx;
			font-size: 36rpx;
			color: #fff;
			text-align: center;
			background: #1869F6;
			border-radius: 16rpx;
		}
	}
</style>