JHAndroid/src/views/Login/LoginBox.vue

<template>
  <!-- 登录box -->
  <div class="login_box">
    <!-- 账号/手机号登录 -->
    <Login v-if="showInner == ''" @showInnerControl="showInnerControl" />

    <!-- 选择登录方式 -->
    <SelectLogin
      v-if="showInner == 'selectLogin'"
      @showInnerControl="showInnerControl"
    />

    <!-- 联系客服 -->
    <MenuService
      v-if="showInner == 'service'"
      @showInnerControl="showInnerControl"
    />
  </div>
</template>

<script>
import SelectLogin from "@/views/Login/SelectLogin"; // 选择登录方式页
import Login from "@/views/Login/Login"; // 账号/手机号登录页
import MenuService from "@/components/Menu/MenuService"; // 联系客服
import { mapActions, mapState } from "vuex";
export default {
  name: "LoginBox",
  components: {
    SelectLogin,
    Login,
    MenuService,
  },
  provide() {
    return {
      // 游客登录工具函数
      onQuickHandler: this.onQuickHandler,
      // 登录成功工具函数
      loginUtil: this.loginUtil,
    };
  },
  data() {
    return {
      showInner: "", // 控制显示哪个组件
      canQucikLogin: true, // 是否能够快速登录
    };
  },
  inject: ["checkCode", "getFinance", "routeLink"],
  computed: {
    ...mapState(["platform"]),
  },
  watch: {},
  created() {},
  mounted() {
    // const jhremember = JSON.parse(localStorage.getItem("jhremember"));
    let jhremember = this.$utils.readStorage("", "jhremember");
    jhremember = jhremember && JSON.parse(jhremember);

    const isRemember = jhremember && jhremember.length > 0;
    // 没有登录, 并且记住了密码 显示账号/手机号登录页面
    this.showInner = !this.isLogin && isRemember ? "" : "selectLogin";
  },
  methods: {
    ...mapActions(["userInfoAction"]),

    // 控制显示哪个组件
    showInnerControl(showInner) {
      this.showInner = showInner;
    },

    // 游客登录工具函数

    onQuickHandler() {
      const { canQucikLogin } = this;
      if (!canQucikLogin) {
        return;
      }

      this.canQucikLogin = false;
      const promoCode = this.$utils.getQueryString("promoCode");
      const { appid } = this;
      return this.$api.quickRegist({ promoCode, appId: appid }).then((res) => {
        this.canQucikLogin = true;
        this.checkCode(res);
        const { data, code } = res.data;
        // 错误
        if (code) {
          return;
        }
        // 成功
        // 记住密码
        const jhremember = this.$utils.rememberFun(
          data.passport,
          data.password
        );

        if (window.android) {
          this.getFinance();
        }

        // 存储用户信息
        // localStorage.setItem("userInfo", JSON.stringify(data));
        this.$utils.writeStorage("", "userInfo", JSON.stringify(data));
        this.userInfoAction(data);
        this.routeLink("Visitor", {
          userInfo: data,
          jhremember,
        });
      });
    },

    // 登录工具函数
    loginUtil(data, routeName, params) {
      if (window.android) {
        this.androidLogin(routeName, params);
      }
      if (this.platform === "wcfml") {
        this.wcfmlLogin(data);
      }
    },

    // android 安卓登录工具函数
    androidLogin(routeName, params) {
      // 获取鸿币余额
      this.getFinance();
      this.routeLink(routeName, params);
    },

    // wcfml 忘川伏魔录登录工具函数
    wcfmlLogin(data) {
      // 记住密码 todo
      const savedata = this.$utils.getQueryString("data");

      // 跳转对应登录链接
      const query = this.$utils.queryStringUtil({
        uid: data.uid,
        data: encodeURIComponent(savedata),
      });
      // window.open(`${this.$CONFIG.wcfmlLoginUrl}?${query}`);  这个没法
      window.location.href = `${this.$CONFIG.wcfmlLoginUrl}?${query}`;
    },
  },
};
</script>

<style lang='less' scoped>
</style>