JHAndroid/src/views/Login/Login.vue

<template>
  <div class="login">
    <div id="udb_login">
      <div class="title">
        登录
        <Back />
      </div>
      <div class="login_input" @keyup.enter="login">
        <!-- 手机号/账号 -->
        <div class="login_username">
          <!-- <i class="iconfont icon-ziyuan"></i> -->
          <input
            class="login_input_username"
            placeholder="请输入手机号/账号登录"
            compositionstart="compositionnstartInput"
            @input="passportKeyup"
            @focus="onAccountFocus"
            v-model="account"
          />
          <!-- 记住密码的所有账密列表 -->
          <ul
            class="account_list"
            v-show="isShowAccount && !account && accountList.length > 0"
          >
            <li v-for="(item, index) in accountList" :key="index">
              <span @click="selectAccount(item.account, item.pwd)">
                {{ item.account }}
              </span>
              <i
                class="iconfont icon-baseline-close-px"
                @click="deleteAccount(index)"
              ></i>
            </li>
          </ul>
        </div>
        <!-- 密码 -->
        <div class="login_password">
          <!-- <i class="iconfont icon-mima"></i> -->
          <input
            class="login_input_password"
            type="password"
            password="true"
            maxlength="20"
            oninput="value=value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/ig,'');"
            placeholder="请输入密码"
            v-model="password"
          />
        </div>
      </div>
      <!-- 记住密码 -->
      <div class="login_other">
        <p class="login_remember">
          <input
            id="is_remember"
            class="login_input_remember"
            type="checkbox"
            v-model="isChecked"
            value="true"
          />
          <label for="is_remember">记住密码</label>
        </p>
        <!-- <div @click="onForgetClick" class="login_forget">忘记密码</div> -->
      </div>
      <!-- 登录按钮 -->
      <div v-if="canLogin" class="login_true" @click="login">登录</div>
      <div v-else class="login_true gray">正在登录</div>

      <!-- 联系客服 -->
      <span class="service" @click="onService">遇到问题? 联系客服</span>

      <!-- 其他 -->
      <div class="other">
        <span class="left" @click="onVisitor">快速登录</span>
        <span class="right" @click="onReg">没有账号?去注册</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import Back from "@/components/Inner/Back"; // 返回
export default {
  name: "Login",
  components: {
    Back,
  },
  inject: [
    "checkCode",
    "getFinance",
    "routeLink",
    "onQuickHandler",
    "loginUtil",
  ],
  data() {
    return {
      isChecked: true, //记住密码是否选中
      account: "", //获取用户名的值
      password: "", //获取密码的值
      isShowAccount: false, // 是否显示账密列表
      accountList: [], // 账密列表
      accountLocal: [], // 本地存储的账密
      canLogin: true, // 登录按钮防抖
    };
  },
  computed: {
    ...mapState(["query", "appid", "platform"]),
  },
  watch: {},
  created() {},
  mounted() {
    //   初始化操作
    this.init();
  },
  methods: {
    ...mapActions(["userInfoAction"]),
    // 初始化操作
    init() {
      // 初始化账密列表内容
      this.initAccountList();
    },

    // ios中文输入
    compositionstartInput() {
      this.account = "";
    },

    // 账号 输入
    passportKeyup() {
      this.account = this.account.replace(
        /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/gi,
        ""
      );
    },

    // 初始化账密列表
    initAccountList() {
      //   const accountLocal = JSON.parse(localStorage.getItem("jhremember"));
      let accountLocal = this.$utils.readStorage("", "jhremember");
      accountLocal = accountLocal && JSON.parse(accountLocal);

      accountLocal &&
        accountLocal.length &&
        accountLocal.map((ele) => {
          const _account = ele.split("&&")[0];
          const _pwd = ele.split("&&")[1];
          const account = this.$utils.decrypt(_account);
          const pwd = this.$utils.decrypt(_pwd);
          this.accountList.push({
            account,
            pwd,
          });
        });
      // 填充账号密码
      if (accountLocal && accountLocal.length) {
        this.account = this.accountList[0].account;
        this.password = this.accountList[0].pwd;
      }
    },

    //登录
    login() {
      const { account, password } = this;
      // 1. 账号校验
      if (!account) {
        this.$toast.text("账号不能为空");
        return;
      }
      // 2. 密码是否为空
      if (!password) {
        this.$toast.text("密码不能为空");
        return;
      }
      // 3. 登录接口
      this.onLogin();
    },

    // 忘记密码
    onForgetClick() {
      this.routeLink("Forget");
    },

    // 账密格式正确, 进行登录
    onLogin() {
      // 登录接口
      const { account, password, isChecked } = this;
      if (!this.canLogin) {
        return;
      }
      this.canLogin = false;
      this.$api
        .login({
          passport: account,
          password,
        })
        .then((res) => {
          this.checkCode(res);
          this.canLogin = true;
          const { data, code } = res.data;
          // 错误
          if (code) {
            return;
          }
          // 成功
          // 存储信息
          this.$utils.writeStorage("", "userInfo", JSON.stringify(data));
          this.userInfoAction(data);

          // 1. 记住密码
          if (isChecked) {
            this.rememberFun(account, password);
          }
          // 根据当前环境去做不同事情的登录工具函数
          this.loginUtil(data);
        });
    },

    // 账号/手机号 聚焦
    onAccountFocus() {
      this.isShowAccount = true;
    },

    // 选择登录账号
    selectAccount(account, pwd) {
      this.account = account;
      this.password = pwd;
    },

    // 删除账号密码
    deleteAccount(accountIndex) {
      this.accountList.splice(accountIndex, 1);
      //   const accountLocal = JSON.parse(localStorage.getItem("jhremember"));
      let accountLocal = this.$utils.readStorage("", "jhremember");
      accountLocal = JSON.parse(accountLocal);
      accountLocal.splice(accountIndex, 1);
      //   localStorage.setItem("jhremember", JSON.stringify(accountLocal));

      this.$utils.writeStorage("", "jhremember", JSON.stringify(accountLocal));
    },

    // 快速登录
    onVisitor() {
      this.onQuickHandler();
    },

    // 注册
    onReg() {
      this.routeLink("Reg");
    },

    // 登录成功
    toHome() {
      this.routeLink("Home");
    },

    // 记住密码
    rememberFun(account, password) {
      this.accountList = this.$utils.rememberFun(account, password);
    },

    // 联系客服
    onService() {
      this.$emit("showInnerControl", "service");
    },
  },
};
</script>

<style lang="less">
.login {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

#udb_login {
  width: 700 / @rem;
  height: 600 / @rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -350 / @rem;
  margin-top: -300 / @rem;
  font-size: 32 / @rem;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;

  input {
    outline: none;
  }

  .title {
    height: 100 / @rem;
    line-height: 100 / @rem;
    background-color: #3faeed;
    color: #fff;
    font-size: 36 / @rem;
  }

  .login_input,
  .login_other,
  .login_true,
  .other {
    padding: 0 / @rem 30 / @rem;
    box-sizing: border-box;
  }

  .login_input {
    width: 100%;
    margin-top: 20 / @rem;
  }
  .login_username,
  .login_password {
    width: 100%;
    height: 90 / @rem;
    position: relative;
  }
  .login_username {
    .account_list {
      width: 100%;
      max-height: 305 / @rem;
      position: absolute;
      top: 100%;
      z-index: 5;
      margin-top: -1px;
      background-color: #e4e4e4;
      border: 1px solid #cecece;
      box-sizing: border-box;
      overflow-y: auto;

      li {
        height: 60 / @rem;
        line-height: 60 / @rem;
        padding: 0 20 / @rem;
        border-bottom: 1px solid #dadada;

        &:last-child {
          border-bottom: 0;
        }

        span {
          float: left;
          width: 80%;
        }
        i {
          float: right;
        }
      }
    }
  }
  .icon-ziyuan,
  .icon-mima {
    width: 50 / @rem;
    height: 90 / @rem;
    line-height: 90 / @rem;
    position: absolute;
    left: 5 / @rem;
    z-index: 5;
  }
  .login_password {
    margin-top: 20 / @rem;
  }
  .login_input_username,
  .login_input_password {
    width: 100%;
    height: 100%;
    border: 1 / @rem solid #d6d6d6;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    z-index: 4;
    font-size: 32 / @rem;
    padding-left: 20 / @rem;
  }
  input::-webkit-input-placeholder {
    color: #888;
  }
  .login_other {
    width: 100%;
    height: 50 / @rem;
    margin-top: 20 / @rem;
  }
  .login_remember,
  .login_forget {
    color: #3faeed;
    font-size: 30 / @rem;
    width: 290 / @rem;
    height: 40 / @rem;
    line-height: 40 / @rem;
    display: inline-block;
  }
  .login_input_remember {
    position: relative;
    top: 4 / @rem;
    -webkit-appearance: checkbox;
  }
  .login_true {
    width: 80%;
    height: 80 / @rem;
    line-height: 80 / @rem;
    margin: auto;
    margin-top: 5 / @rem;
    border-radius: 20 / @rem;
    background-color: #3faeed;
    color: #ffffff;
  }
  .login_username_check,
  .login_password_check {
    font-size: 28 / @rem;
    color: #e43633;
    position: absolute;
  }
  .is_hide_username,
  .is_hide_password {
    display: none;
  }

  .service {
    margin-top: 15 / @rem;
    font-size: 28 / @rem;
    color: #3faeed;
    display: inline-block;
    border-bottom: 1px solid #3faeed;
  }

  .other {
    margin-top: 10 / @rem;
    color: #3faeed;
    font-size: 34 / @rem;
    .left {
      float: left;
    }
    .right {
      float: right;
    }
  }
}
//  横屏
@media screen and (orientation: landscape),
  /**竖屏 */ all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad */ all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  #udb_login {
    width: 350 / @rem;
    height: 300 / @rem;
    margin-left: -175 / @rem;
    margin-top: -150 / @rem;
    font-size: 16 / @rem;
    overflow-y: auto;

    .title {
      height: 50 / @rem;
      line-height: 50 / @rem;
      font-size: 18 / @rem;
    }

    .login_input,
    .login_other,
    .login_true,
    .other {
      padding: 0 / @rem 15 / @rem;
    }

    .login_input {
      margin-top: 10 / @rem;
    }
    .login_username,
    .login_password {
      height: 45 / @rem;
    }
    .login_username {
      .account_list {
        max-height: 152.5 / @rem;

        li {
          height: 30 / @rem;
          line-height: 30 / @rem;
          padding: 0 10 / @rem;
        }
      }
    }
    .login_password {
      margin-top: 10 / @rem;
    }
    .login_input_username,
    .login_input_password {
      border: 1 / @rem solid #d6d6d6;
      font-size: 16 / @rem;
      padding-left: 10 / @rem;
    }
    .login_other {
      height: 25 / @rem;
      margin-top: 10 / @rem;
    }
    .login_remember,
    .login_forget {
      width: 145 / @rem;
      height: 20 / @rem;
      line-height: 20 / @rem;
      font-size: 15 / @rem;
    }
    .login_input_remember {
      top: 2 / @rem;
    }
    .login_true {
      height: 40 / @rem;
      line-height: 40 / @rem;
      margin-top: 5 / @rem;
      border-radius: 10 / @rem;
    }
    .login_username_check,
    .login_password_check {
      font-size: 14 / @rem;
    }

    .service {
      margin-top: 5 / @rem;
      font-size: 14 / @rem;
    }

    .other {
      margin-top: 5 / @rem;
      font-size: 16 / @rem;
    }
  }
}
</style>