epmet-apartment-work-mp/pages/login/login.vue

<template>
  <view class="login-bg">
    <view class="login-welcome">
      <image
        class="login-bg-img"
        src="../../static/img/login-top.png"
        mode="aspectFill"
      ></image>
      <view class="login-welcome-content">
        <text class="login-title">您好！</text>
        <text class="login-title">欢迎使用</text>
      </view>
    </view>
    <view class="login-form-box">
      <view class="login-form-item">
        <text class="login-label">用户名</text>
        <u-input
          v-model="form.username"
          placeholder="请输入用户名"
          type="text"
          border="none"
          shape="circle"
          custom-style="background:#f6f6f6;padding:16rpx 0;padding-left:16px;"
        />
      </view>
      <view class="login-form-item">
        <text class="login-label">密码</text>
        <u-input
          v-model="form.password"
          placeholder="请输入密码"
          type="password"
          border="none"
          shape="circle"
          custom-style="background:#f6f6f6;padding:16rpx 0;padding-left:16px;"
        />
      </view>
      <view class="login-form-item captcha-row">
        <text class="login-label">验证码</text>
        <view class="captcha-flex">
          <u-input
            v-model="form.code"
            placeholder="验证码"
            border="none"
            shape="circle"
            custom-style="background:#f6f6f6;padding:16rpx 0;padding-left:16px;"
          />
          <image
            :src="codeUrl"
            class="captcha-img"
            mode="aspectFit"
            @click="getCaptcha"
          />
        </view>
      </view>
    </view>
    <view class="login-btn-box">
      <u-button
        :hairline="false"
        shape="circle"
        :custom-style="btnStyle"
        @click="handleLogin"
        color="#fff"
        >登录</u-button
      >
    </view>
  </view>
</template>

<script>
import { login, getCodeImg } from "../api";
import { encrypt, decrypt } from "../../utils/jsencrypt";
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        code: "",
        uuid: "",
        rememberMe: false,
      },
      loading: false,
      loginFailCounts: {}, // 记录失败次数
      accountLockTimes: {}, // 记录锁定时间
      codeUrl: "", // 验证码图片base64或url
      btnStyle: {
        width: "60%",
        height: "44px",
        fontSize: "18px",
        margin: "50px",
        marginTop: "200rpx",
        background: "linear-gradient(90deg, #0DC6C6 0%, #13C2C2 100%)",
      },
    };
  },
  methods: {
    async getCaptcha() {
      const res = await getCodeImg();
      this.captchaEnabled =
        res.captchaEnabled === undefined ? true : res.captchaEnabled;
      if (this.captchaEnabled) {
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.form.uuid = res.uuid;
      }
    },
    async handleLogin() {
      const username = String(this.form.username); // 强制转为字符串
      // 1. 检查锁定
      const lockInfo = JSON.parse(
        uni.getStorageSync(`lock_${username}`) || "{}"
      );
      if (lockInfo.lockEndTime) {
        const currentTime = new Date().getTime();
        if (currentTime < lockInfo.lockEndTime) {
          const remainingMinutes = Math.ceil(
            (lockInfo.lockEndTime - currentTime) / (1000 * 60)
          );
          uni.showToast({
            title: `账号被锁定，请${remainingMinutes}分钟后再试`,
            icon: "none",
          });
          return;
        } else {
          uni.removeStorageSync(`lock_${username}`);
        }
      }
      // 2. 校验表单
      if (!this.form.username || !this.form.password || !this.form.code) {
        uni.showToast({ title: "请填写完整信息", icon: "none" });
        return;
      }
      this.loading = true;
      // 3. 记住我
      if (this.form.rememberMe) {
        uni.setStorageSync("username", this.form.username);
        uni.setStorageSync("password", encrypt(this.form.password)); // 如需加密可加密
        uni.setStorageSync("rememberMe", true);
      } else {
        uni.removeStorageSync("username");
        uni.removeStorageSync("password");
        uni.removeStorageSync("rememberMe");
      }
      const res = await login({
        username: String(this.form.username),
        password: encrypt(this.form.password), // 如需加密可加密
        code: this.form.code,
        uuid: this.form.uuid,
        client: "gypc",
      });
      this.loading = false;
      console.log(res);
      
      if (res.code === 200) {
        this.loginFailCounts[username] = 0;
        uni.setStorageSync("token", res.token);
        // uni.showToast({ title: "登录成功", icon: "success" });
        uni.switchTab({ url: "/pages/tabBar/work/index" });
      } else {
        // 失败计数
        this.loginFailCounts[username] =
          (this.loginFailCounts[username] || 0) + 1;
        if (this.loginFailCounts[username] >= 5) {
          const lockEndTime = new Date().getTime() + 10 * 60 * 1000;
          this.accountLockTimes[username] = lockEndTime;
          uni.setStorageSync(
            `lock_${username}`,
            JSON.stringify({ lockEndTime, username })
          );
          uni.showToast({
            title: "账号登录失败次数过多，已锁定10分钟",
            icon: "none",
          });
        } else {
          uni.showToast({ title: res[1].data.msg || "登录失败", icon: "none" });
        }
        this.getCaptcha();
      }
    },
  },
  mounted() {
    this.getCaptcha();
  },
};
</script>

<style scoped>
.login-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7fafd;
  height: 100vh;
}
.login-welcome {
  position: relative;
  width: 100vw;
  padding-top: 244rpx;
  overflow: hidden;
}
.login-bg-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 526px;
  z-index: 1;
}
.login-welcome-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 60rpx;
  margin-bottom: 70rpx;
}
.login-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 10rpx;
}

.login-form-box {
  width: 85%;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
  padding: 40rpx 30rpx 30rpx 30rpx;
  margin-bottom: -46rpx;
}
.login-form-item {
  margin-bottom: 36rpx;
}
.login-label {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 12rpx;
  display: block;
}
.login-btn-box {
  width: 100%;
  display: flex;
  justify-content: center;
}
.captcha-row {
  display: flex;
  flex-direction: column;
}
.captcha-flex {
  display: flex;
  align-items: center;
}
.captcha-img {
  width: 160rpx;
  height: 60rpx;
  margin-left: 16rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  background: #fff;
  box-sizing: border-box;
}
</style>