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号3号楼
          </div>
          <div class="line">
            <img class="icon"
                 src="@/assets/images/tel.png"
                 alt="">
            0755-21096000
          </div>
          <div class="line">
            <img class="icon"
                 src="@/assets/images/mail.png"
                 alt="">
            gad@mail.iasf.ac.cn
          </div>
        </div>
      </div>
      <div class="qrcodes">
        <div class="item">
          <img class="qrcode"
               src="@/assets/images/qrcode.png"
               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号 粤公安网34565432456765432号</div>
  </div>
</template>
<script>
import mixins from '@/mixins/article'
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, {
        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']}?columnId=${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}?id=${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}?id=${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}?id=${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;
    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%);
    }
}
</style>