exam/exam-06173-vue/src/views/login/components/third-login.vue

<template>
  <div
    v-if="false && (siteData.wechatLogin || siteData.faceLogin)"
    style="line-height: 35px; margin-top: 10px"
  >
    <div class="title-line">其它方式登录</div>
    <div style="display: flex">
      <a v-if="siteData.wechatLogin" class="third-item wechat-icon">
        <svg-icon icon-class="wechat" @click="wechatLogin" />
        <div>微信登录</div>
      </a>

      <a v-if="siteData.faceLogin" class="third-item face-icon">
        <svg-icon icon-class="face-id" @click="faceLogin" />
        <div>人脸登录</div>
      </a>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { apiGetWechatUrl } from "@/api/ability/login";

export default {
  name: "ThirdLogin",

  data() {
    return {
      loading1: false,
      loading2: false,
      loginForm: {},
    };
  },
  computed: {
    ...mapGetters(["siteData"]),
  },
  methods: {
    wechatLogin() {
      // 获得跳转地址并跳转
      apiGetWechatUrl({ state: "pc" }).then((res) => {
        window.location = res.data.url;
      });
    },

    faceLogin() {
      this.$router.push({ name: "FaceLogin" });
    },
  },
};
</script>

<style scoped>
.third-item {
  margin-right: 10px;
  color: #888;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.third-item .svg-icon {
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.third-item div {
  font-size: 12px;
}

.wechat-icon :hover {
  color: #1aac1a;
}

.face-icon :hover {
  color: #ff8000;
}
</style>