feat:密码校验静态页面

pages/my/jobApplicant/password.vue

@@ -15,12 +15,77 @@
           placeholder="请输入密码"
           v-model="password"
           clearable
-          type="password"
+          :type="showPassword ? 'text' : 'password'"
           maxlength="20"
           class="custom-input"
+          @input="validatePassword"
         >
+          <template v-slot:suffix>
+            <u-icon
+              :name="showPassword ? 'eye-fill' : 'eye-off'"
+              size="32rpx"
+              color="#999"
+              @click="showPassword = !showPassword"
+            ></u-icon>
+          </template>
         </u-input>
+
+        <!-- 密码验证进度条 -->
+        <view class="password-progress">
+          <view class="progress-bar">
+            <view
+              class="progress-fill"
+              :class="progressClass"
+              :style="{ width: progressWidth }"
+            ></view>
+          </view>
+          <view class="progress-text">{{ progressText }}</view>
+        </view>
+
+        <!-- 密码要求列表 -->
+        <view class="password-rules">
+          <view class="rule-item" :class="{ 'rule-valid': hasMinLength }">
+            <image
+              src="@/static/images/jobApplicant/check.svg"
+              v-if="hasMinLength"
+              mode="scaleToFill"
+            />
+            <image
+              src="@/static/images/jobApplicant/border.svg"
+              v-else
+              mode="scaleToFill"
+            />
+            <text class="rule-text">最少8位数</text>
+          </view>
+          <view class="rule-item" :class="{ 'rule-valid': hasNumber }">
+            <image
+              src="@/static/images/jobApplicant/check.svg"
+              v-if="hasNumber"
+              mode="scaleToFill"
+            />
+            <image
+              src="@/static/images/jobApplicant/border.svg"
+              v-else
+              mode="scaleToFill"
+            />
+            <text class="rule-text">至少包含1个数字</text>
+          </view>
+          <view class="rule-item" :class="{ 'rule-valid': hasUpperCase }">
+            <image
+              src="@/static/images/jobApplicant/check.svg"
+              v-if="hasUpperCase"
+              mode="scaleToFill"
+            />
+            <image
+              src="@/static/images/jobApplicant/border.svg"
+              v-else
+              mode="scaleToFill"
+            />
+            <text class="rule-text">至少包含1个大写字母</text>
+          </view>
+        </view>
       </view>
+
       <u-button
         type="primary"
         :disabled="!canNext"
@@ -43,25 +108,79 @@ import navBar from "@/components/nav-bar/index.vue";
 export default {
   data() {
     return {
+      password: "",
+      showPassword: false,
+      hasMinLength: false,
+      hasNumber: false,
+      hasUpperCase: false,
+      validCount: 0,
     };
   },
   components: {
     navBar,
   },
   computed: {
+    // 计算满足的条件数量
+    satisfiedCount() {
+      let count = 0;
+      if (this.hasMinLength) count++;
+      if (this.hasNumber) count++;
+      if (this.hasUpperCase) count++;
+      return count;
+    },
+
+    // 进度条宽度
+    progressWidth() {
+      return (this.satisfiedCount / 3) * 100 + "%";
+    },
+
+    // 进度条颜色类
+    progressClass() {
+      switch (this.satisfiedCount) {
+        case 1:
+          return "progress-red";
+        case 2:
+          return "progress-orange";
+        case 3:
+          return "progress-blue";
+        default:
+          return "";
+      }
+    },
 
+    // 进度文本
+    progressText() {
+      switch (this.satisfiedCount) {
+        case 0:
+          return "密码强度：弱";
+        case 1:
+          return "密码强度：弱";
+        case 2:
+          return "密码强度：中";
+        case 3:
+          return "密码强度：强";
+        default:
+          return "密码强度：弱";
+      }
+    },
 
     // 是否可以下一步
     canNext() {
-      return (
-        this.canGetCode &&
-        this.verificationCode.length === 6 &&
-        /^\d{6}$/.test(this.verificationCode)
-      );
+      return this.satisfiedCount === 3;
     },
   },
   methods: {
+    // 密码验证
+    validatePassword() {
+      // 验证最小长度
+      this.hasMinLength = this.password.length >= 8;
 
+      // 验证是否包含数字
+      this.hasNumber = /\d/.test(this.password);
+
+      // 验证是否包含大写字母
+      this.hasUpperCase = /[A-Z]/.test(this.password);
+    },
 
     // 下一步
     handleNext() {
@@ -70,34 +189,23 @@ export default {
       }
 
       uni.showLoading({
-        title: "验证中...",
+        title: "设置中...",
         mask: true,
       });
 
-      // 模拟验证码验证
       setTimeout(() => {
         uni.hideLoading();
+        uni.showToast({
+          title: "密码设置成功",
+          icon: "success",
+        });
 
-        // 这里应该是验证码验证逻辑
-        if (this.verificationCode === "123456") {
-          // 模拟固定验证码
-          uni.showToast({
-            title: "验证成功",
-            icon: "success",
-          });
-
-          // 跳转到下一步（注册2/2）
-          setTimeout(() => {
-            uni.navigateTo({
-              url: `/pages/my/jobApplicant/password?phone=${this.phoneNumber}`,
-            });
-          }, 1000);
-        } else {
-          uni.showToast({
-            title: "验证码错误",
-            icon: "none",
+        // 跳转到下一步
+        setTimeout(() => {
+          uni.navigateTo({
+            url: `/pages/my/jobApplicant/password?phone=${this.phoneNumber}`,
           });
-        }
+        }, 1000);
       }, 1500);
     },
 
@@ -111,10 +219,17 @@ export default {
         return false;
       }
 
+      if (!this.canNext) {
+        uni.showToast({
+          title: "请满足所有密码要求",
+          icon: "none",
+        });
+        return false;
+      }
+
       return true;
     },
   },
-
 };
 </script>
 
@@ -155,6 +270,73 @@ export default {
   background: rgba(255, 255, 255, 1);
   padding: 8rpx 24rpx !important;
 }
+
+// 密码验证进度条
+.password-progress {
+  margin-top: 32rpx;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 16rpx;
+  background: #f0f0f0;
+  border-radius: 40rpx;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 40rpx;
+  transition: all 0.3s ease;
+}
+
+.progress-red {
+  background: #d62c01;
+}
+
+.progress-orange {
+  background: #faae16;
+}
+.progress-blue {
+  background: #016bf6;
+}
+
+.progress-text {
+  font-size: 24rpx;
+  color: #666;
+  margin-top: 8rpx;
+  text-align: right;
+}
+
+// 密码要求列表
+.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;
 }
@@ -162,9 +344,11 @@ export default {
 .next-btn-active {
   background: #2979ff;
 }
+
 ::v-deep .u-input {
   text-align: left !important;
 }
+
 .progress-box {
   display: flex;
   justify-content: center;