FE_huoran_client/src/pages/singlePage/index.vue

<template>
  <div class="wrap">
    <template v-if="modules.length">
      <el-carousel class="carousel fadeInUp" :interval="6000" height="330px"
        :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
        :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
        <template v-for="(item, i) in modules[0].list">
          <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
            <div v-if="!item.mediaType || isImg(item.mediaType)" class="pic"
              :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div>
            <video v-else class="pic" width="100%" height="100%" autoplay muted loop>
              <source :src="item.pic" type="video/mp4">
              您的浏览器不支持 video 标签。
            </video>
            <div class="text-wrap">
              <div v-if="item.weixinPic1 || item.weixinPic2" class="qrcodes fadeInUp">
                <div v-if="item.weixinPic1" class="qrcode">
                  <img width="103" :src="item.weixinPic1" alt="">
                  <p v-if="item.weixinText1" class="text">{{ item.weixinText1 }}</p>
                </div>
                <div v-if="item.weixinPic2" class="qrcode m-l-30">
                  <img width="103" :src="item.weixinPic2" alt="">
                  <p v-if="item.weixinText2" class="text">{{ item.weixinText2 }}</p>
                </div>
              </div>
              <div class="text" v-html="item.des"></div>
            </div>
          </el-carousel-item>
        </template>
      </el-carousel>

      <div class="block-bg">
        <div class="block">
          <div class="inner column-wrap">
            <div class="item m-r-20">
              <div class="title wow fadeInUp">
                <h5>
                  {{ modules[1].form.title }}
                  <span class="sub">{{ modules[1].form.subTitle }}</span>
                </h5>
                <span class="more" @click="toAll(modules[2].form)">MORE</span>
              </div>
              <ul class="columns">
                <li v-for="(item, i) in articles" :key="i">
                  <p class="column-name" @click="toArtice(item, modules[2].form)">{{ item.title }}</p>
                  <span class="meta">{{ item.releaseTime }}</span>
                </li>
              </ul>
            </div>
            <div class="item">
              <div class="title wow fadeInUp">
                <h5>
                  {{ modules[3].form.title }}
                  <span class="sub">{{ modules[3].form.subTitle }}</span>
                </h5>
                <span class="more" @click="toAll(modules[4].form)">MORE</span>
              </div>
              <ul class="columns">
                <li v-for="(item, i) in articles1" :key="i">
                  <p class="column-name" @click="toArtice(item, modules[4].form)">{{ item.title }}</p>
                  <span class="meta">{{ item.releaseTime }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="block m-t-10 m-b-10">
          <div class="inner">
            <ul class="entry">
              <template v-for="(item, i) in modules[5].list">
                <li v-if="item.isEnable" :key="i" :class="{ 'cursor-pointer': isLink(item.link.linkName) }"
                  @click="openLink(item, i)">
                  <img class="icon" :src="item.pic" alt="">
                  <p class="text">{{ item.title }}</p>
                </li>
              </template>
            </ul>
          </div>
        </div>

        <div class="block">
          <div class="inner links-inner">
            <h6 class="link-title">友情链接</h6>
            <ul class="links">
              <template v-for="(item, i) in modules[6].list">
                <li v-if="item.isEnable" :key="i">
                  <el-link class="link" type="primary" @click="openLink(item, i)">{{ item.title }}</el-link>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js'
import $ from 'jquery'
export default {
  mixins: [mixins],
  data () {
    return {
      isImg: Util.isImg,
      articles: [],
      articles1: [],
    }
  },
  mounted () { },
  methods: {
    // 获取文章详情
    getInfo () {
      // 预览/详情
      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.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
          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)

          const promises = []
          // 获取文章列表
          if (json[2].form.column.length) {
            const { column, articleNum } = json[2].form
            promises.push(new Promise((resolve) => {
              this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
                this.articles = data.slice(0, articleNum || 5)
                resolve()
              }).catch(err => { })
            }))
          }

          if (json[4].form.column.length) {
            const { column, articleNum } = json[4].form
            promises.push(new Promise((resolve) => {
              this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
                this.articles1 = data.slice(0, articleNum || 5)
                resolve()
              }).catch(err => { })
            }))
          }

          // 恢复上次从本页面跳转出去时的位置
          Promise.all(promises).then(_ => {
            this.$nextTick(() => {
              const { scrollTop } = this.$store.state.content
              if (scrollTop) {
                this.hide = true
                $(window).scrollTop(scrollTop)
                this.$store.commit('content/setScrollTop', 0)
              }
            })
          })
          // this.carouselInterval()
        }
      }).catch(err => { })
    },
  }
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';

.carousel {
  .pic {
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /deep/.el-carousel__container {
    height: 100%;
  }

  .text-wrap {
    position: absolute;
    top: 55%;
    left: 12%;
    display: flex;
    align-items: center;
    color: #fff;
    transform: translateY(-50%);
  }

  .qrcodes {
    display: flex;
    margin-right: 50px;
  }

  .qrcode {
    text-align: center;

    .text {
      margin-top: 10px;
      font-size: 12px;
      color: #fff;
      white-space: nowrap;
    }
  }
}


.block {
  padding: 10px 0;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 0.5rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid #ddd;
    align-items: center;

    h5 {
      padding-left: 6px;
      font-size: 1.2rem;
      font-weight: 500;
      color: #333;
      line-height: 1;
      border-left: 3px solid #2b96ef;
    }

    .sub {
      font-size: 0.88rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #afb7bf;
    }

    .more {
      font-size: 0.6rem;
      color: #666;
      cursor: pointer;
    }
  }
}

.block-bg {
  min-height: calc(100vh - 420px);
  background: url(../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
}

.column-wrap {
  display: flex;

  .item {
    width: 590px;
    padding: 14px;
    background-color: #fff;
    box-shadow: 0 0 7px rgba(239, 239, 239, .8);
  }

  li {
    display: flex;
    justify-content: space-between;
    padding: 5px 15px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #cbcbcb;
  }

  .column-name {
    max-width: calc(100% - 90px);
    font-size: .9rem;
    color: #333;
    cursor: pointer;
    @include ellipsis;

    &:hover {
      color: $main-color;
    }
  }

  .meta {
    font-size: .8rem;
    white-space: nowrap;
  }
}

.links-inner {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fbfbfb;
  border-radius: 4px;

  .link-title {
    position: relative;
    padding: 10px 12px;
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    background-color: $main-color;

    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 100%;
      border: 18px solid transparent;
      border-left-color: $main-color;
    }
  }

  .links {
    display: inline-flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 20px;
    font-size: .9rem;

    // &>li {
    //   width: 20%;
    //   margin-bottom: 5px;
    // }

    .link {
      display: block;
      max-width: 200px;
      @include ellipsis;
    }
  }
}

.inner {
  width: 1200px;
}

.entry {
  position: relative;
  display: flex;
  justify-content: space-between;

  li {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  img {
    max-width: 60px;
    object-fit: cover;
  }

  .text {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #48525e;
  }
}


@media (max-width: 1200px) {
  .carousel .texts {
    left: 5%;
    right: 5%;
  }

  .inner {
    width: 95%;
  }

  .column-wrap {
    flex-direction: column;

    .item {
      width: 100%;
      margin: 0 0 20px 0;
    }
  }

  .entry {
    // flex-direction: column;
    flex-wrap: wrap;

    li {
      width: 48% !important;
      margin-bottom: 30px;
    }
  }
}

@media (max-width: 1200px) {
  .carousel {
    .text-wrap {
      left: 0;
      padding: 0 20px;
    }
  }
}
</style>