yizhizan-h5/pages/my/jobApplicant/password.vue

<template>
  <view class="register-container">
    <!-- 标题和进度 -->
    <navBar title="创建账号密码2/2" color="#000" />
    <view class="progress-box">
      <view class="progress-item"></view>
      <view class="progress-item"></view>
    </view>
    <!-- 表单区域 -->
    <view class="register-form">
      <!-- 密码输入 -->
      <view class="form-item">
        <view class="item-label"> 密码 </view>
        <u-input
          placeholder="请输入密码"
          v-model="password"
          clearable
          :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"
        @click="handleNext"
        :customStyle="{
          marginTop: '32rpx',
          height: '90rpx',
          fontSize: '32rpx',
          borderRadius: '100rpx',
        }"
      >
        继续
      </u-button>
    </view>
  </view>
</template>

<script>
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.satisfiedCount === 3;
    },
  },
  methods: {
    // 密码验证
    validatePassword() {
      // 验证最小长度
      this.hasMinLength = this.password.length >= 8;

      // 验证是否包含数字
      this.hasNumber = /\d/.test(this.password);

      // 验证是否包含大写字母
      this.hasUpperCase = /[A-Z]/.test(this.password);
    },

    // 下一步
    handleNext() {
      if (!this.validateForm()) {
        return;
      }

      uni.showLoading({
        title: "设置中...",
        mask: true,
      });

      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: "密码设置成功",
          icon: "success",
        });

        // 跳转到下一步
        setTimeout(() => {
          uni.navigateTo({
            url: `/pages/my/jobApplicant/registerSuccess?phone=${this.phoneNumber}`,
          });
        }, 1000);
      }, 1500);
    },

    // 表单验证
    validateForm() {
      if (!this.password) {
        uni.showToast({
          title: "请输入密码",
          icon: "none",
        });
        return false;
      }

      if (!this.canNext) {
        uni.showToast({
          title: "请满足所有密码要求",
          icon: "none",
        });
        return false;
      }

      return true;
    },
  },
};
</script>

<style scoped lang="scss">
.register-container {
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.register-form {
  padding: 32rpx;
  box-sizing: border-box;
}

.form-item {
  margin-bottom: 32rpx;
}

.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: 6rpx;
}

.custom-input {
  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;
}

// 密码验证进度条
.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;
}

.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>