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

<template>
  <view class="login-container">
    <navBar title="登录" color="#000" />
    <view class="login-content">
      <!-- 标题 -->
      <view class="login-header">
        <view text="登录" size="36rpx" color="#333" bold></view>
      </view>

      <!-- 表单区域 -->
      <view class="login-form">
        <!-- 手机号码输入 -->
        <view class="form-item">
          <view class="item-label"> 手机号码 </view>
          <u-input
            placeholder="请输入登录的手机号码"
            v-model="phoneNumber"
            clearable
            class="custom-input"
            :customStyle="{ padding: '8rpx 24rpx ' }"
          >
            <template #prefix>
              <u-icon name="phone" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
            </template>
          </u-input>
        </view>

        <!-- 密码输入 -->
        <view class="form-item">
          <view class="item-label"> 登录密码 </view>
          <u-input
            placeholder="请输入密码"
            v-model="password"
            clearable
            type="password"
            class="custom-input"
            :customStyle="{ padding: '8rpx 24rpx ' }"
          >
            <template #prefix>
              <u-icon name="lock" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
            </template>
          </u-input>
          <!-- 忘记密码 -->
          <view class="forgot-password">
            <view @click="forgotPassword">忘记密码</view>
          </view>
        </view>

        <!-- 登录按钮 -->
        <u-button
          type="primary"
          @click="handleLogin"
          :customStyle="{
            marginTop: '80rpx',
            height: '90rpx',
            fontSize: '32rpx',
            borderRadius: '100rpx',
          }"
          :disabled="!canLogin"
          >登录</u-button
        >

        <!-- 注册链接 -->
        <view class="register-section">
          <view @click="goToRegister">注册</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
export default {
  data() {
    return {
      phoneNumber: "", // 手机号码
      password: "", // 密码
    };
  },
  components: {
    navBar,
  },
  computed: {
    // 判断是否可以登录
    canLogin() {
      return this.phoneNumber.length >= 11 && this.password.length >= 6;
    },
  },
  methods: {
    // 处理登录
    handleLogin() {
      if (!this.validateForm()) {
        return;
      }

      uni.showLoading({
        title: "登录中...",
      });

      // 模拟登录请求
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: "登录成功",
          icon: "success",
        });

        // 登录成功后的操作，比如跳转到首页
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/index/index",
          });
        }, 1500);
      }, 2000);
    },

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

      if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          icon: "none",
        });
        return false;
      }

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

      if (this.password.length < 6) {
        uni.showToast({
          title: "密码长度不能少于6位",
          icon: "none",
        });
        return false;
      }

      return true;
    },

    // 忘记密码
    forgotPassword() {
      uni.navigateTo({
        url: "/pages/forgot-password/forgot-password",
      });
    },

    // 跳转到注册页面
    goToRegister() {
      uni.navigateTo({
        url: "/pages/register/register",
      });
    },

    // 微信登录
    wechatLogin() {
      uni.showToast({
        title: "微信登录",
        icon: "none",
      });
    },

    // QQ登录
    qqLogin() {
      uni.showToast({
        title: "QQ登录",
        icon: "none",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.login-container {
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  .login-content {
    padding: 32rpx;
    box-sizing: border-box;
  }
}

.login-header {
  text-align: center;
  margin-bottom: 100rpx;
  margin-top: 60rpx;
}

.login-form {
}

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

.forgot-password {
  text-align: left;
  margin-top: 8rpx;
  color: rgba(102, 112, 133, 1);
  font-family: Inter;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 40rpx;
}

.register-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32rpx;
  color: #016bf6;

  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: right;
  text-decoration-line: underline;
}

.other-login {
  margin-top: 100rpx;
}

.divider-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60rpx;
}

.line {
  flex: 1;
  height: 1rpx;
  background: #e0e0e0;
}
::v-deep .u-input {
  text-align: left !important;
}
</style>