优化设置密码功能

pages/public/forgetPwd.vue

@@ -28,12 +28,21 @@
 				<view>
 					<u-line-progress class="line-progress" :show-percent="false" :active-color="progressColor"
 						:percent="passwordStrength * 33.3"></u-line-progress>
-					<u-checkbox-group :wrap="true" @change="preventChange">
-						<u-checkbox shape="circle" v-for="(item, index) in list" :key="index" :name="item.name"
-							v-model="item.checked" :readonly="true">
-							{{item.label}}
-						</u-checkbox>
-					</u-checkbox-group>
+					<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>
@@ -68,7 +77,7 @@
 					},
 					{
 						name: 'upper',
-						label: '只要包含一个大写字母',
+						label: '至少包含一个大写字母',
 						checked: false,
 					}
 				],
@@ -148,21 +157,16 @@
 			      item.checked = pwd.length >= 8;
 			      if (item.checked) strength++;
 			    } else if (item.name === 'number') {
-			      item.checked = /[0-9]/.test(pwd) && pwd.length >= 8;
+			      item.checked = /[0-9]/.test(pwd);
 			      if (item.checked) strength++;
 			    } else if (item.name === 'upper') {
-			      item.checked = /[A-Z]/.test(pwd) && pwd.length >= 8;
+			      item.checked = /[A-Z]/.test(pwd);
 			      if (item.checked) strength++;
 			    }
 			  });
 			  this.passwordStrength = strength;
 			  this.valueBackup = this.list.map(i => i.checked);
 			},
-			preventChange() {
-				this.list.forEach((item, index) => {
-					item.checked = this.valueBackup[index];
-				});
-			},
 			navBack() {
 				uni.navigateBack();
 			},
@@ -300,4 +304,59 @@
 			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>

pages/public/register.vue

@@ -60,16 +60,21 @@
         </view>
 		<view v-show="steps == 1">
 			<u-line-progress class="line-progress" :show-percent="false" :active-color="progressColor" :percent="passwordStrength * 33.3"></u-line-progress>
-			<u-checkbox-group :wrap="true" @change="preventChange">
-				<u-checkbox shape="circle"
-					v-for="(item, index) in list" :key="index" 
-					:name="item.name"
-					v-model="item.checked"
-					:readonly="true"
-				>
-					{{item.label}}
-				</u-checkbox>
-			</u-checkbox-group>
+			<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 class="cu-form-group" style="margin-top: 32rpx" v-if="required == '是'">
           <view class="item-label-code">邀请码</view>
@@ -139,7 +144,7 @@ export default {
 	  list: [
 		{ name: 'length', label: '最少8位数',checked: false, },
 		{ name: 'number', label: '至少包含1个数字',checked: false, },
-		{ name: 'upper', label: '只要包含一个大写字母',checked: false, }
+		{ name: 'upper', label: '至少包含一个大写字母',checked: false, }
 	  ],
 	  valueBackup: [],
 	};
@@ -254,21 +259,16 @@ export default {
 	      item.checked = pwd.length >= 8;
 	      if (item.checked) strength++;
 	    } else if (item.name === 'number') {
-	      item.checked = /[0-9]/.test(pwd) && pwd.length >= 8;
+	      item.checked = /[0-9]/.test(pwd);
 	      if (item.checked) strength++;
 	    } else if (item.name === 'upper') {
-	      item.checked = /[A-Z]/.test(pwd) && pwd.length >= 8;
+	      item.checked = /[A-Z]/.test(pwd);
 	      if (item.checked) strength++;
 	    }
 	  });
 	  this.passwordStrength = strength;
 	  this.valueBackup = this.list.map(i => i.checked);
 	},
-	preventChange() {
-		this.list.forEach((item, index) => {
-			item.checked = this.valueBackup[index];
-		});
-	},
     navBack() {
       uni.navigateBack();
     },
@@ -551,4 +551,55 @@ page {
     border-radius: 60px;
   }
 }
+// 密码要求列表
+.rule-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8rpx;
+  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>