middleground_H5/pages/login.vue

<template>
  <view class="normal-login-container">
    <view class="logo-content">
      <image
        style="
          width: 330rpx;
          background: #c73b26;
          border-radius: 10px;
          padding: 15px;
        "
        :src="globalConfig.appInfo.logo"
        mode="widthFix"
      ></image>
    </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <u-icon name="account" class="icon" size="20"></u-icon>
        <input
          v-model="loginForm.username"
          class="input"
          type="text"
          placeholder="请输入账号"
          maxlength="30"
        />
      </view>

      <view class="input-item flex align-center">
        <u-icon name="lock" class="icon" size="20"></u-icon>
        <input
          v-model="loginForm.password"
          type="password"
          class="input"
          placeholder="请输入密码"
          maxlength="30"
          @confirm="handleLogin"
        />
      </view>
      <view class="flex">
        <u-checkbox-group v-model="checkboxValue1">
          <u-checkbox
            v-for="(item, index) in checkboxList1"
            :key="index"
            :label="item.name"
            :name="item.key"
          ></u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="action-btn">
        <button
          @click="handleLogin"
          class="login-btn cu-btn block bg-blue lg round"
        >
          登录
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { getCodeImg } from "@/api/login";
import localStorage from "@/utils/localStorage";
import { getUserInfo, setUserInfo } from "@/utils/auth";
export default {
  data() {
    return {
      codeUrl: "",
      captchaEnabled: true,
      globalConfig: getApp().globalData.config,
      loginForm: {
        username: "",
        password: "",
      },
      checkboxList1: [
        {
          name: "记住密码",
          key: 1,
        },
      ],
      checkboxValue1: [],
      selectCompany: false,
      companyList: [], //公司账套
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      let data = localStorage.get("middleGroundNumber");
      if (data != "") {
        this.checkboxValue1 = [1];
        this.loginForm.username = data.username;
        this.loginForm.password = data.password;
      }
      let item = localStorage.get("automaticLogon");
      if (item != "") {
        this.checkboxValue1 = [1];
        this.handleLogin();
      }
    },
    // 登录方法
    async handleLogin() {
      if (this.loginForm.username === "") {
        this.$modal.msgError("请输入您的账号");
      } else if (this.loginForm.password === "") {
        this.$modal.msgError("请输入您的密码");
      } else {
        this.$modal.loading("登录中，请耐心等待...");
        if (this.checkboxValue1.includes(1)) {
          localStorage.set("middleGroundNumber", this.loginForm);
        } else {
          localStorage.remove("middleGroundNumber");
        }
        this.pwdLogin();
      }
    },
    // 密码登录
    async pwdLogin() {
      this.$store
        .dispatch("Login", this.loginForm)
        .then(() => {
          this.$modal.closeLoading();
          uni.switchTab({
            url: "/pages/homePage/index",
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}
.comBtnBox {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.comBtn {
  border: 2rpx solid #f1f1f1;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  border-radius: 6rpx;
  margin: 16rpx 0;
  color: #606266;
}
.comBtnTitle {
  width: 100%;
  font-size: 32rpx;
  color: #666;
  text-align: center;
  margin: 20rpx 0 20rpx 0;
}
.comBtnText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 20rpx 0 0;
}
.normal-login-container {
  width: 100%;

  .logo-content {
    width: 100%;
    font-size: 25px;
    text-align: center;
    padding-top: 15%;

    image {
      border-radius: 4px;
    }

    .title {
      margin-left: 10px;
      display: block;
    }
  }

  .login-form-content {
    text-align: center;
    margin: 20px auto;
    margin-top: 15%;
    width: 80%;

    .input-item {
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 20px;
      padding-left: 20rpx;

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }
    }

    .login-btn {
      margin-top: 40px;
      height: 45px;
    }

    .xieyi {
      color: #333;
      margin-top: 20px;
    }

    .login-code {
      height: 38px;
      float: right;

      .login-code-img {
        height: 38px;
        position: absolute;
        margin-left: 10px;
        width: 200rpx;
      }
    }
  }
}
::v-deep .u-checkbox-label--left {
  margin-right: 40rpx;
}
</style>