FE_IASF_client/src/layouts/footer/index.vue

<template>
  <div class="footer">
    <div class="info">
      <div class="left">
        <img class="logo" src="@/assets/images/logo3.png" alt="">
        <div class="texts">
          <div class="line">
            <img class="icon" src="@/assets/images/address.png" alt="">
            深圳市光明区新湖街道圳园路268号A3栋
          </div>
          <div class="line">
            <img class="icon" src="@/assets/images/tel.png" alt="">
            {{ site == 1 ?
              '0755-21096026' :
              site == 5 || site == 6 ?
                '0755-21096067' :
                site == 3 || site == 4 ?
                  '0755-21096052' :
                  '0755-21096000' }}
          </div>
          <div class="line">
            <img class="icon" src="@/assets/images/mail.png" alt="">
            {{ site == 1 ?
              'std@mail.iasf.ac.cn' :
              site == 5 || site == 6 ?
                'srgcb@mail.iasf.ac.cn' :
                site == 3 || site == 4 ?
                  'FEL@mail.iasf.ac.cn' :
                  'gad@mail.iasf.ac.cn' }}
          </div>
        </div>
      </div>
      <div v-if="site == 1 || site == 2" class="qrcodes">
        <div class="item">
          <img class="qrcode" src="@/assets/images/officialAccount.jpg" alt="">
          <p class="text">官方公众号</p>
        </div>
        <!-- <div class="item">
          <img class="qrcode" src="@/assets/images/qrcode.png" alt="">
          <p class="text">官方微信</p>
        </div> -->
      </div>
    </div>
    <div class="copyright">Copyright ©深圳综合粒子设施研究院 粤ICP备2020131940号-1 粤公网安备44031102000586号</div>
  </div>
</template>
<script>
import mixins from '@/mixins/article'
import Util from '@/libs/util'
export default {
  mixins: [mixins],
  data () {
    return {
      isIasf: false,
      showDefaultPath: ['/home', '/iasf', '/estate/index'], // 展示默认页脚的页面
      showContactPath: ['/news', '/sfel', '/talent', '/about', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面
      columns: [],
      modules: []
    };
  },
  computed: {
    // 是否是sfel网站
    isSfel () {
      const id = this.$route.query.siteId || this.$store.state.content.site
      return id == 3
    }
  },
  watch: {
    '$route': {
      handler () {
        if (this.$route.path === '/iasf') {
          this.isIasf = true
          this.getInfo()
        }
      },
      deep: true,
      immediate: true
    },
  },
  mounted () {
    this.getColumn()
  },
  methods: {
    // 资讯
    getColumn () {
      this.$post(this.api.listWithTreeMenuVisible, Util.rsa({
        siteId: this.$route.query.siteId || this.$store.state.content.site,
        columnName: '',
        templateId: '',
        typeId: '',
        isSort: 1
      })).then(({ data }) => {
        // this.columns = data.slice(0, 5)
        this.columns = data
      }).catch(err => { })
    },
    // 获取iasf中文首页应用模块数据
    getInfo () {
      // 预览/详情
      this.$post(this.api[this.preview ? 'getRedisCache' : 'findPage'], Util.rsa(this.$route.query.id)).then(({ data }) => {
        if (data.length) {
          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
          const json = JSON.parse(this.preview ?
            data :
            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])

          this.modules = json
        }
      }).catch(err => { })
    },
    // 判断是否有添加链接
    isLink (linkName) {
      return linkName !== '无' && linkName !== ''
    },
    // 打开链接
    async openLink (item) {
      const { link } = item
      if (link.linkName === '无' || link.linkName === '') return false
      let href = link.linkAddress
      const type = link.connectionType
      if (type === 1) { // 站内链接
        if (link.articleId) { // 文章
          // 查询文章详情。禁用的文章要提示
          const data = await this.$post(this.api.findArticle, Util.rsa(link.articleId))
          if (data.data.isDisable) {
            return Util.errorMsg('该文章已禁用！')
          } else {
            href = '/article?articleId=' + link.articleId
          }
        } else { // 栏目
          href = '/column?id=' + link.columnId[link.columnId.length - 1]
        }
        href += '&siteId=' + (this.site)
        if (!link.articleId) href = this.$router.resolve(href).href
      } else if (type === 3) { // 站外链接
        if (link.otherArticleId) { // 文章
          // 查询文章详情。禁用的文章要提示
          const data = await this.$post(this.api.findArticle, Util.rsa(link.otherArticleId))
          if (data.data.isDisable) {
            return Util.errorMsg('该文章已禁用！')
          } else {
            href = '/article?articleId=' + link.otherArticleId
          }
        } else { // 栏目
          href = '/column?id=' + link.otherColumnId[link.otherColumnId.length - 1]
        }
        href += '&siteId=' + link.site
        if (!link.otherArticleId) href = this.$router.resolve(href).href
      }
      // 如果是站内/站外链接，并且选择的是文章，则要获取当前长页名称传到文章详情里，面包屑点返回的时候需要返回到当前长页
      if ((type === 1 && link.articleId) || (type === 3 && link.otherArticleId)) {
        this.$post(this.api.findColumn, Util.rsa(this.id)).then(({ data }) => {
          href = this.$router.resolve(href + '&id=' + this.id + '&columnName=' + data.columnName + '&path=' + this.$route.path.replace('/', '')).href
          this.toHref(link.isOpen, href)
        }).catch(res => { })
      } else {
        this.toHref(link.isOpen, href)
      }
    },
    // 跳转地址
    toHref (isOpen, href) {
      if (isOpen) {
        var userAgent = navigator.userAgent;
        var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
        if (isSafari) {
          window.location.href = href
        } else {
          window.open(href)
        }
      } else {
        window.location.href = href
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.footer {
  z-index: 2;
  position: relative;
  background-color: #091733;
  border-top: 10px solid #2870ff;

  .logo {
    width: 180px;
  }

  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    padding: 20px 0;
    margin: 0 auto;
    color: #fff;
  }

  .left {
    display: inline-flex;
    align-items: center;
  }

  .texts {
    padding: 30px;
    margin-left: 20px;
    border-left: 2px solid #ccc;

    .line {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-size: 14px;
      color: #fff;

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

      img {
        margin-right: 8px;
      }
    }
  }

  .qrcodes {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 12px;

    .item {
      margin-right: 15px;
    }

    .qrcode {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
    }
  }

  .copyright {
    padding: 16px 0;
    font-size: 14px;
    color: #c3c3c3;
    text-align: center;
    background-image: linear-gradient(to bottom, rgb(16, 41, 93), rgb(10, 24, 54) 40%);
  }
}

@media (max-width: 1200px) {
  .footer {
    .info {
      flex-direction: column;
      width: 90%;
    }

    .left {
      flex-direction: column;
      margin-bottom: 20px;
    }

    .texts {
      border-left: 0;
    }

    .copyright {
      padding: 16px;
    }
  }
}
</style>