web/apps/bigmember_pc/src/components/common/ContentLayout.vue

<template>
  <div class="content-container v-w1200" :class="{ calc: conentCenter }">
    <div class="content-main">
      <slot name="default"></slot>
    </div>
    <div class="content-right ad-container" :class="{ nothing: adShow }">
      <slot name="right">
        <slot name="right-top"></slot>
        <slot name="right-main">
          <div class="ad-list" :id="adCodeMap[routerName] || routerName">
            <div
              class="ad-item-container"
              v-for="(item, index) in adList"
              :key="index"
              :data-exposure="(adCodeMap[routerName] || routerName) + '__' + (item.name || '')"
              data-exposure-loop
            >
              <a
                :href="item.link"
                target="_blank"
                :id="(adCodeMap[routerName] || routerName) + '__' + (item.name || index)"
              >
                <img :src="item.pic" :alt="(adCodeMap[routerName] || routerName) + '__' + (item.name || '')"/>
              </a>
            </div>
          </div>
        </slot>
        <slot name="right-bottom"></slot>
      </slot>
    </div>
  </div>
</template>

<script>
import { fetchJyAdList } from '@/utils/'
import { mapState } from 'vuex'
export default {
  name: 'content-layout',
  props: {
    // 是否需要获取广告位列表(不获取则不会显示广告位)
    needAd: {
      type: Boolean,
      default: true
    },
    adCode: {
      type: String,
      default: ''
    },
    // 如果没有广告位，内容宽度状态(居中/自适应铺满)
    contentWithState: {
      type: String,
      default: 'center' // center/full
    }
  },
  computed: {
    ...mapState({
      loginFlag: (state) => state.user.loginFlag
    }),
    conentCenter() {
      // 已登录广告位无数据则隐藏右侧广告位布局并整体居中，未登录则右侧布局常在可插入相关内容
      return (
        this.adList.length === 0 &&
        this.contentWithState === 'center' &&
        this.loginFlag
      )
    },
    adShow() {
      return this.adList.length === 0 && this.contentWithState && this.loginFlag
    }
  },
  data() {
    return {
      routerName: '',
      adCodeMap: {
        article_detail: 'jy-pccontent-right', // 标讯详情页右侧广告位
        pro_follow_detail: 'jy-pc-bigmember-project-content-right', // 项目详情页右侧广告位code
        ent_portrait: 'jy-pc-bigmember-entportrayal-content-right', // 企业情报详情页右侧广告位code
        ent_report_year: 'jy-pc-bigmember-ent-report-content-right', // 企业年报详情页右侧广告位code
        unit_portrayal: 'jy-pc-bigmember-unitportrayal-content-right', // 采购单位全景分析详情页右侧广告位code
        bigvip_subreport_month: 'jy-pc-bigmember-month-content-right', // 数据月报右侧
        bigvip_subreport_week: 'jy-pc-bigmember-week-content-right', // 数据周报右侧
        ent_ser_portrait: 'jy-pc-bigmember-entportrayal-content-right',
        custom_unit_portrayal: 'jy-pc-bigmember-unitportrayal-content-right',
        business_detail: 'jy-pc-bigmember-businessdetail-content-right' // 商机情报详情页右侧code
      },
      adList: [
        // {
        //   s_link: 'https://web2-jytest.jydev.jianyu360.com/swordfish/docs/',
        //   s_pic: 'https://web2-qmxtest.jydev.jianyu360.com/upload/2021/03/24/20210324164127003068k656W.png'
        // }
      ]
    }
  },
  watch: {
    needAd: {
      immediate: true,
      handler(n) {
        if (n) {
          this.$nextTick(() => {
            this.getAdvertisementList()
          })
        }
      }
    }
  },
  created() {
    this.routerName = this.$route.name
  },
  methods: {
    async getAdvertisementList() {
      const params = {
        code: this.adCode
      }

      if (!params.code) {
        // 先从props中取出参数，如果没取到，就从map中取
        const routeName = this.routerName
        params.code = this.adCodeMap[routeName]
      }

      if (!params.code) return console.warn('请传入adCode参数')

      this.adList = await fetchJyAdList(params.code)
    }
  }
}
</script>

<style lang="scss">
.content-container {
  display: flex;
  margin: 32px auto;
  padding-bottom: 60px;

  &.calc {
    display: block;

    .content-main {
      display: block;
      width: calc(100% - 264px);
      margin: 0 auto;
    }
  }

  .content-main {
    width: 100%;
    flex: 1;
    transition: 0.1s;
  }

  .content-right {
    width: 264px;
    margin-left: 16px;

    &.nothing {
      width: unset;
      margin-left: unset;
    }

    .ad-item-container {
      width: 100%;
      min-height: 120px;
      overflow: hidden;
      border-radius: 4px;

      // background-color: #C4C4C4;
      &:not(:last-of-type) {
        margin-bottom: 16px;
      }

      a,
      img {
        display: block;
        width: 100%;
        cursor: pointer;
      }
    }
  }
}
</style>