yizhizan-h5/pages/public/forgetPwd.vue

<template>
	<view class="container">
		<navBar title="忘记密码" color="#000" />
		<view class="wrapper">
			<view class="input-content">
				<view class="item-label" v-show="steps == 0">手机号码</view>
				<view class="cu-form-group" v-show="steps == 0">
					<input type="number" :value="phone" placeholder="请输入手机号" maxlength="11" data-key="phone"
						@input="inputChange" />
				</view>

				<view class="item-label" v-show="steps == 0">验证码</view>
				<view class="cu-form-group" v-show="steps == 0">
					<input type="number" :value="code" placeholder="请输入验证码" maxlength="6" data-key="code"
						@input="inputChange" @confirm="toLogin" />
					<text class="send-msg" @click="sendMsg" :disabled="sending">
						{{ sendTime }}
					</text>
				</view>

				<view class="item-label">密码</view>
				<view class="cu-form-group">
					<input :value="password" :password="showPassword" placeholder="请输入新密码" placeholder-class="input-empty"
						maxlength="20" minlength="8" data-key="password" @input="inputChange" @confirm="toLogin" />
					<u-icon @click="changePassword" class="eye" :class="{ 'eye-active': !showPassword }"
						name="eye-fill"></u-icon>
				</view>
				<view>
					<u-line-progress class="line-progress" :show-percent="false" :active-color="progressColor"
						:percent="passwordStrength * 33.3"></u-line-progress>
					<view class="password-rules">
					  <view class="rule-item" v-for="(item, index) in list" :key="index" :class="{ 'rule-valid': item.checked }">
					    <image
					      src="@/static/images/jobApplicant/check.svg"
					      v-if="item.checked"
					      mode="scaleToFill"
					    />
					    <image
					      src="@/static/images/jobApplicant/border.svg"
					      v-else
					      mode="scaleToFill"
					    />
					    <text class="rule-text">{{item.label}}</text>
					  </view>
					</view>
				</view>
			</view>
			<button class="confirm-btn" @click="toLogin">立即找回</button>
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/nav-bar/index.vue";
	export default {
		data() {
			return {
				code: "",
				phone: "",
				password: "",
				sending: false,
				sendTime: "获取验证码",
				count: 60,
				logining: false,
				showPassword:true,
				steps: 0,
				passwordStrength: 0, // 当前满足的条件数
				list: [{
						name: 'length',
						label: '最少8位数',
						checked: false,
					},
					{
						name: 'number',
						label: '至少包含1个数字',
						checked: false,
					},
					{
						name: 'upper',
						label: '至少包含一个大写字母',
						checked: false,
					}
				],
				valueBackup: [],
			};
		},
		components: {
			navBar,
		},
		computed: {
		    progressColor() {
				switch (this.passwordStrength) {
					case 1:
						return 'rgba(214, 44, 1, 1)';
					case 2:
						return 'rgba(250, 174, 22, 1)';
					case 3:
						return 'rgba(1, 107, 246, 1)';
					default:
						return 'rgba(237, 236, 239, 1)';
				}
		    },
		},
		methods: {
			changePassword(){
				this.showPassword = !this.showPassword;
			},
			sendMsg() {
				const {phone} = this;
				if (!phone) {
					this.$queue.showToast("请输入手机号");
				} else if (phone.length !== 11) {
					this.$queue.showToast("请输入正确的手机号");
				} else {
					this.$queue.showLoading("正在发送验证码...");
					this.$Request.getT("/app/Login/sendMsg/" + phone + "/forget").then((res) => {
						if (res.code === 0) {
							this.sending = true;
							this.$queue.showToast("验证码发送成功请注意查收");
							this.countDown();
							uni.hideLoading();
						} else {
							uni.hideLoading();
							uni.showModal({
								showCancel: false,
								title: "短信发送失败",
								content: res.msg ? res.msg : "请一分钟后再获取验证码",
							});
						}
					});
				}
			},
			countDown() {
				const {count} = this;
				if (count === 1) {
					this.count = 60;
					this.sending = false;
					this.sendTime = "获取验证码";
				} else {
					this.count = count - 1;
					this.sending = true;
					this.sendTime = count - 1 + "秒后重新获取";
					setTimeout(this.countDown.bind(this), 1000);
				}
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
				if(key == 'password'){
					this.checkPasswordStrength(this.password);
				}
			},
			checkPasswordStrength(pwd) {
			  let strength = 0;
			  this.list.forEach(item => {
			    if (item.name === 'length') {
			      item.checked = pwd.length >= 8;
			      if (item.checked) strength++;
			    } else if (item.name === 'number') {
			      item.checked = /[0-9]/.test(pwd);
			      if (item.checked) strength++;
			    } else if (item.name === 'upper') {
			      item.checked = /[A-Z]/.test(pwd);
			      if (item.checked) strength++;
			    }
			  });
			  this.passwordStrength = strength;
			  this.valueBackup = this.list.map(i => i.checked);
			},
			navBack() {
				uni.navigateBack();
			},

			navTo(url) {
				uni.navigateTo({
					url,
				});
			},
			toLogin() {
				const {phone,password,code} = this;
				if (!phone) {
					this.$queue.showToast("请输入手机号");
				} else if (!code) {
					this.$queue.showToast("请输入验证码");
				}else if (!password) {
					this.$queue.showToast("请设置密码");
				} else if (password.length < 8) {
					this.$queue.showToast("密码位数必须大于八位");
				} else if (!/(?=.*[A-Z])(?=.*\d)/.test(password)) {
					this.$queue.showToast("密码必须包含至少一个大写字母和一个数字");
				} else {
					this.logining = true;
					this.$queue.showLoading("正在修改密码中...");
					this.$Request
						.post("/app/Login/forgetPwd", {
							pwd: password,
							phone: phone,
							msg: code,
						})
						.then((res) => {
							uni.hideLoading();
							if (res.code === 0) {
								uni.navigateTo({
									url: "/pages/public/loginphone?type=1",
								});
							} else {
								uni.showModal({
									showCancel: false,
									title: "密码找回失败",
									content: res.msg,
								});
							}
						});
				}
			},
		},
	};
</script>

<style lang="scss">
	page {
		background: #ffffff !important;
	}
	::v-deep .input-placeholder,.uni-input-placeholder {
		color: #9ea1a8;
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 400;
		text-align: left;
	}
	::v-deep .u-checkbox__label{
		margin-left: 20rpx;
		color: rgba(76, 74, 83, 1);
		font-family: Roboto;
		font-size: 32rpx;
		font-weight: 400;
	}
	.container {
		padding-top: 32rpx;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #ffffff;
	}
	.wrapper {
		position: relative;
		z-index: 90;
		background: #ffffff;
		padding-bottom: 20px;
	}
	.input-content {
		padding: 32rpx;
		box-sizing: border-box;
	}
	.item-label {
		color: rgba(18, 26, 44, 1);
		font-family: Roboto;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 51.2rpx;
		letter-spacing: 0px;
		text-align: left;
		padding-bottom: 8rpx;
		margin-top: 32rpx;
	}
	.cu-form-group {
		position: relative;
		box-sizing: border-box;
		border: 2rpx solid rgba(158, 161, 168, 1);
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);
		padding: 8rpx 24rpx !important;
		height: 96rpx;
	}
	.send-msg {
		color: rgba(1, 107, 246, 1);
		font-size: 28rpx;
		font-weight: 400;
	}
	.eye{
		position: absolute;
		top: 50%;
		right: 24rpx;
		font-size: 48rpx;
		transform: translateY(-50%);
	}
	.eye-active{
		color: #016bf6;
	}
	.line-progress{
		margin: 32rpx 0;
	}
	.confirm-btn {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 60rpx;
		margin: 0 32rpx;
		background: #016bf6;
		color: #fff;
		font-size: 32rpx;
		font-weight: 400;
		&:after {
			border-radius: 60px;
		}
	}
	// 密码要求列表
	.password-rules {
	  margin-top: 20rpx;
	}
	
	.rule-item {
	  display: flex;
	  align-items: center;
	  margin-bottom: 12rpx;
	  image{
	    width: 32rpx;
	    height: 32rpx;
	    margin-right: 16rpx;
	  }
	}
	
	.rule-text {
	  color: #4c4a53;
	  font-family: Roboto;
	  font-size: 32rpx;
	  font-weight: 400;
	  line-height: 51.2rpx;
	  text-align: left;
	}
	
	.rule-valid .rule-text {
	  color: #4c4a53;
	}
	
	.input-box {
	  position: relative;
	}
	
	.next-btn-active {
	  background: #2979ff;
	}
	
	::v-deep .u-input {
	  text-align: left !important;
	}
	
	.progress-box {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 24rpx;
	  padding-top: 40rpx;
	  box-sizing: border-box;
	  .progress-item {
	    width: 40rpx;
	    height: 8rpx;
	    background-color: #016bf6;
	    border-radius: 40rpx;
	  }
	}
</style>