proginn-frontend/components/credit/_social.vue

<template>
  <!--  <div class="creditIndex">-->
  <section class="app__bg_w app__mt_10">
    <div class="app__f_r app__al_c app__h_50 app__pl_20 app__pr_20 app__fs_15" v-for="social in socials">
      <img :src="social.icon" class="app__img_xs"/>
      <a :href="social.targetUrl" class="app__f_g_1">
        <a class="app__ml_10 app__fc_666 app__cursor_point">{{social.name}}</a>
        <a class=" app__ml_20">{{social.account}}</a>
      </a>

      <button class="app__w_70 app__h_30 app__f_r app__al_c app__jf_c app_fc_w app_br_5" @click="goBind(social)"
              v-bind:class="!social.account ? 'app_bg_919AA7' : 'app__bg_308EFF'" v-if="social.tag !='jishuin'">{{social.account ?"已绑定":"未绑定"}}
      </button>
    </div>

  </section>
  <!--  </div>-->
</template>

<script>
  import CreditCommonTitle from '@/components/credit/header.vue'
  import data from '../../components/credit/data'


  /**
   * 首页
   */
  export default {
    layout: "opacity_header",
    components: {CreditCommonTitle},
    head() {
      return {
        title: '程序员客栈技术信用-程序员技术开发能力认证，企业程序员背调专用数据平台',
        meta: [{
          'name': 'keywords',
          'content': '技术信用,程序员背调,程序员技术能力认证'
        }, {
          'name': 'description',
          'content': '程序员客栈技术信用平台依托多年的程序员数据，提供程序员技能等级认证，服务口碑，就业情况数据核实。为每一位入驻的程序员提供真实有效符合自身能力的技术信用认证，给用工单位提供所录用的程序员以往从业经历或者服务历史口碑的准确报告；对接程序员和用工企业，找出最适合程序员发展的平台，为用工单位提供最合适的程序员人选。程序员技术信用认证、程序员背景调查，请认准程序员客栈技术信用平台！'
        }, {
          'name': 'h1',
          'content': '技术信用'
        }]
      }
    },
    data() {
      return {
        socials: []
      }
    },
    mounted() {
      this.needLogin();
      this.socials = data.socialLines;
      console.log("socials", this.socials);

      this.getData();
    },
    methods: {
      jumpTo(url) {
        location.href = url
      },
      goBind(social) {
        console.log("social", social);
        //未绑定
        switch (social.tag) {
          case "wechat":
            break;
          case "jishuin":
            location.href = social.targetUrl;
            break;
          default:
            if (!social.account) {
              location.href = `${this.$store.state.domainConfig.siteUrl}/setting/snsimport`;
            } else {
              location.href = social.targetUrl;
            }
            break;

        }

      },
      /**
       * 获取社区数据
       * @return {Promise<void>}
       */
      async getData() {
        const res = await this.$axios.$post("/api/SocialNetwork/getList");
        console.log(res);
        if (res.status == 1) {
          const data = !res.data ? [] : res.data;
          this.socials.forEach(so => {
            so.account = data[so.tag] || "";
            switch (so.tag) {
              case"wechat":

                break;
              case "jishuin":
                const {userinfo} = this.$store.state || {};
                //检查登录
                if (!userinfo || !userinfo.uid) {
                  this.$message.info("请先登录！");
                  location.href =
                    "/?loginbox=show&next=" + encodeURIComponent(location.href);
                }
                so.targetUrl = this.$store.state.domainConfig.jishuinUrl + "/u/" + userinfo.uid;
                console.log("jishuin target url", so.targetUrl);
                break;
              default:
                so.targetUrl = so.account ? so.targetUrl + so.account : "javascript:void(0)";
                break;

            }
          });
        }
        console.log(this.socials);
      },
    }
  }
</script>

<style scope lang="scss">
  @import "../../assets/css/public.css";
  @import "../../assets/css/credit/pages/index.scss";
</style>