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="password"
          maxlength="20"
          class="custom-input"
        >
        </u-input>
      </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 {
    };
  },
  components: {
    navBar,
  },
  computed: {


    // 是否可以下一步
    canNext() {
      return (
        this.canGetCode &&
        this.verificationCode.length === 6 &&
        /^\d{6}$/.test(this.verificationCode)
      );
    },
  },
  methods: {


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

      uni.showLoading({
        title: "验证中...",
        mask: true,
      });

      // 模拟验证码验证
      setTimeout(() => {
        uni.hideLoading();

        // 这里应该是验证码验证逻辑
        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",
          });
        }
      }, 1500);
    },

    // 表单验证
    validateForm() {
      if (!this.password) {
        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;
}
.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>