FE_huoran_client/src/pages/news/index.vue

<template>
  <div class="wrap">
    <el-carousel :interval="6000"
                 :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 :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
               @click="openLink(item)">
            <img :src="item.pic"
                 alt="">
            <p class="banner-name">{{ item.title }}</p>
          </div>
        </el-carousel-item>
      </template>
    </el-carousel>

    <div class="newsTab">
      <ul class="scollBox wow fadeInLeft"
          ref="newsTab">
        <template v-for="(item, i) in modules[1].list">
          <li v-if="item.columnName"
              :class="{active: i == curColumn}"
              :key="i"
              @click="tabChange($event,i)">{{ item.columnName }}</li>
        </template>
      </ul>
    </div>

    <div class="block">
      <div class="inner"
           v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
        <div class="news-banner wow fadeInDown"
             data-wow-delay="0.5s"
             @click="toArtice(curArticle, modules[1].list[curColumn])">
          <img width="50%"
               height="410"
               class="titileImg"
               :src="curArticle.titleImg"
               alt=""
               onerror="javascript:this.src='./images/3.png';">
          <div class="right">
            <h6>{{ curArticle.title }}</h6>
            <div class="des"
                 v-html="curArticle.mainBody"></div>
            <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
            <ul class="inds">
              <li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length"
                  :key="i"
                  :class="{active: curInd == i - 1}"
                  @click.stop="switchCarousel(i - 1)"></li>
            </ul>
          </div>
        </div>

        <ul class="card">
          <template v-for="(item, i) in modules[1].list[curColumn].articles">
            <li v-if="i > 2"
                :key="i"
                class="wow fadeInDown"
                :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
              <img class="pic"
                   :src="item.titleImg"
                   alt="">
              <div class="texts">
                <p class="meta">{{ item.releaseTime }} {{ item.author && ' | ' + item.author }}</p>
                <div class="des">{{ item.title }}</div>
                <img class="arrow"
                     src="@/assets/images/arrow.png"
                     alt=""
                     @click="toArtice(item, modules[1].list[curColumn])">
              </div>
            </li>
          </template>
        </ul>
        <div class="more wow fadeInDown"
             data-wow-delay="0.5s"
             @click="toMore">more ></div>
      </div>
    </div>

    <div class="block gray">
      <div class="inner lg">
        <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
        <p class="intro wow fadeInUp"
           data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
        <div class="shop-shows"
             v-if="articles.length">
          <div class="left wow fadeInLeft"
               data-wow-delay="0.5s"
               @click="toArtice(articles[0], modules[3].form)">
            <img class="pic"
                 width="100%"
                 height="400"
                 :src="articles[0].titleImg"
                 alt=""
                 onerror="javascript:this.src='./images/2.png';">
            <div class="texts">
              <h6>{{ articles[0].title }}</h6>
              <div class="des"
                   v-html="articles[0].mainBody"></div>
            </div>
          </div>
          <div v-if="articles.length > 1"
               class="right wow fadeInRight"
               data-wow-delay="0.5s">
            <ul class="show-card">
              <li v-if="articles[1]"
                  @click="toArtice(articles[1], modules[3].form)">
                <img class="pic"
                     :src="articles[1].titleImg"
                     alt="">
                <div class="text">{{ articles[1].title }}</div>
              </li>
              <li v-if="articles[2]"
                  @click="toArtice(articles[2], modules[3].form)">
                <img class="pic"
                     :src="articles[2].titleImg"
                     alt="">
                <div class="text">{{ articles[2].title }}</div>
              </li>
            </ul>
            <ul class="card-list">
              <template v-for="(item, i) in articles">
                <li v-if="i > 2"
                    :key="i">
                  <img class="pic"
                       :src="item.titleImg"
                       alt="">
                  <div class="texts">
                    <h6>{{ item.title }}</h6>
                    <div class="des"
                         v-html="item.mainBody"></div>
                  </div>
                  <img class="arrow"
                       src="@/assets/images/arrow.png"
                       alt=""
                       @click="toArtice(item, modules[3].form)">
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="all-link m-t-10"
             @click="toAll(modules[3].form)">
          <span>{{$t('column.all')}} <img class="icon"
                 src="@/assets/images/arrow.png"
                 alt=""></span>
        </div>
      </div>
    </div>

    <div class="block conference">
      <div class="inner lg">
        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
        <p class="intro wow fadeInUp"
           data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
        <div class="shows"
             v-if="articles1.length">
          <div class="left wow fadeInLeft"
               data-wow-delay="0.5s"
               @click="toArtice(articles1[0], modules[5].form)">
            <img class="pic"
                 width="100%"
                 height="558"
                 :src="articles1[0].titleImg"
                 alt=""
                 onerror="javascript:this.src='./images/1.png';">
            <div class="texts">
              <div class="meta">
                <p class="date">{{ articles1[0].date }}</p>
                <p class="year">{{ articles1[0].month }}</p>
              </div>
              <div>
                <h6>{{ articles1[0].title }}</h6>
                <div class="des"
                     v-html="articles1[0].mainBody"></div>
              </div>
            </div>
          </div>
          <ul class="card-list wow fadeInRight"
              data-wow-delay="0.5s">
            <template v-for="(item, i) in articles1">
              <li v-if="i"
                  :key="i"
                  @click="toArtice(item, modules[5].form)">
                <img class="pic"
                     :src="item.titleImg"
                     alt="">
                <div class="texts">
                  <h6>{{ item.title }}</h6>
                  <p v-if="item.keynoteSpeaker"
                     class="text">
                    <img class="icon"
                         src="@/assets/images/mine.png"
                         alt="">
                    <span>{{ item.keynoteSpeaker }}</span>
                  </p>
                  <p v-if="item.activityStartTime"
                     class="text">
                    <img class="icon"
                         src="@/assets/images/time.png"
                         alt="">
                    <span>Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}</span>
                  </p>
                  <p v-if="item.onlineLocation"
                     class="text">
                    <img class="icon"
                         src="@/assets/images/online.png"
                         alt="">
                    <span>Onlone: {{ item.onlineLocation }}</span>
                  </p>
                  <p v-if="item.offlineLocation"
                     class="text">
                    <img class="icon"
                         src="@/assets/images/location.png"
                         alt="">
                    <span>Address: {{ item.offlineLocation }}</span>
                  </p>
                </div>
              </li>
            </template>
          </ul>
        </div>
        <div class="all-link m-t-10"
             @click="toAll(modules[5].form)">
          <span style="color: #fff">{{$t('column.all')}} <img class="icon"
                 src="@/assets/images/arrow.png"
                 alt=""></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js'
export default {
  mixins: [mixins],
  data () {
    return {
      curColumn: 0,
      articles: [],
      articles1: [],
      curInd: 0,
      curArticle: {},
      timer: null
    }
  },
  mounted () {
    new WOW().init()
  },
  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'])
          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)

          // 获取文章列表
          const { list } = json[1]
          if (list.length) {
            list.map((e, i) => {
              if (e.site && e.column.length) {
                const id = e.column[e.column.length - 1]
                e.id = id
                if (e.columnTitle === 2) e.columnName = e.columnTitleCustom
                this.$post(`${this.api.queryArticlesByColumnType}?columnId=${id}`).then(({ data }) => {
                  const list = Util.removeTag(data.slice(0, e.articleNum || 6))
                  this.$set(e, 'articles', list)
                  if (list.length && !i) this.curArticle = list[0]
                }).catch(err => { })
              } else {
                this.$set(e, 'articles', [])
              }
            })
          }

          if (json[3].form.column.length) {
            const { column, site, articleNum } = json[3].form
            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
              this.articles = Util.removeTag(data.slice(0, articleNum || 6))
            }).catch(err => { })
          }
          if (json[5].form.column.length) {
            const { column, site, articleNum } = json[5].form
            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
              if (data.length) {
                // 把发布日期分割成年月和日，页面上要展示
                if (data[0].releaseTime) {
                  const date = data[0].releaseTime.split('-')
                  data[0].date = date[2]
                  data[0].month = date[0] + '-' + date[1]
                }
                this.articles1 = Util.removeTag(data.slice(0, articleNum || 5))
              }
            }).catch(err => { })
          }

          this.modules = json
          console.log(this.modules)
          this.carouselInterval()
        }
      }).catch(err => { })
    },
    // 自动轮播
    carouselInterval () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.curInd++
        if (this.curInd > 2) this.curInd = 0
        this.curArticle = this.modules[1].list[this.curColumn].articles[this.curInd] || {}
      }, 5000)
    },
    // 手动轮播切换
    switchCarousel (i) {
      if (this.curInd !== i) {
        this.curInd = i
        this.curArticle = this.modules[1].list[this.curColumn].articles[i] || {}
      }
    },
    // tab回调
    tabChange (e, i) {
      const newsTab = this.$refs.newsTab
      newsTab.scrollLeft = e.target.offsetLeft
      // e.target.offsetLeft
      const { column } = this.modules[1].list[i]
      if (column && column.length) {
        const id = column[column.length - 1]
        // 查询栏目详情
        this.$post(`${this.api.findColumn}?id=${id}`).then(({ data }) => {
          const { typeId } = data
          // 跳转链接
          if (typeId === 2) {
            let href = data.linkAddress
            const cType = data.connectionType
            if (cType !== 2) { // 非站外链接
              const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
              // 站点id：站内链接取当前站点，其他站点链接取siteSelection
              const site = cType === 1 ?
                (this.site) :
                data.siteSelection
              if (ids[1]) { // 文章
                href = '/article?id=' + ids[1]
              } else { // 栏目
                const columnIds = ids[0].split(',')
                href = '/column?id=' + columnIds[columnIds.length - 1]
              }
              href = this.$router.resolve(href + '&siteId=' + site).href
            }
            // 是否新窗口打开
            if (data.isOpen) {
              var userAgent = navigator.userAgent;
              var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
              if (isSafari) {
                window.location.href = href
              } else {
                window.open(href)
              }
            } else {
              location.href = href
            }
          } else if (typeId === 3) {
            // 长页栏目直接获取path
            this.$router.push(`/${data.path}?id=${id}`).catch(err => { })
          } else {
            this.curInd = 0
            this.curColumn = i
            this.curArticle = this.modules[1].list[i].articles[0] || {}
            this.carouselInterval()
          }
        }).catch(err => { })
      } else {
        this.curColumn = i
      }
    },
    // 跳转more
    toMore () {
      const { column } = this.modules[1].list[this.curColumn]
      column.length && this.$router.push(`/column?id=${column[column.length - 1]}`)
    }
  }
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.wrap {
    /deep/ .el-carousel {
        height: 24rem;
        .el-carousel__container {
            height: 24rem;
        }
        img {
            height: 24rem;
        }
    }
}
.banner-item {
    .banner-name {
        font-size: 2.16rem;
    }
}
.block {
    padding: 3.85rem 0;
}
.newsTab {
    box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26);
    .scollBox {
        width: 85.714rem;
        margin: auto;
        display: flex;
        justify-content: center;
    }
    li {
        flex: 1;
        text-align: center;
        padding: 1.25rem 0.95rem;
        margin: 0 10px;
        font-size: 1.1rem;
        color: #333;
        border-bottom: 4px solid transparent;
        text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
        cursor: pointer;
        &.active {
            color: #1583ff;
            border-bottom-color: #1583ff;
        }
    }
}
/deep/.articles {
    width: 50%;
    .el-carousel__indicators--horizontal {
        bottom: 1.25rem;
        left: 50.25rem;
    }
}
.lg {
    .intro {
        margin-bottom: 4rem;
    }
}
.news-banner {
    display: flex;
    cursor: pointer;
    .titileImg {
        height: auto;
    }
    .pic {
        width: 43.75rem;
        height: 23.75rem;
    }
    .right {
        position: relative;
        width: 50%;
        padding: 2.5rem 2.5rem 1.5rem;
        background: #1583ff;
        color: #fff;
        &:hover {
            background: #465f85;
            h6,
            .des,
            .meta {
                color: #fff;
                transform: translateY(15px);
            }
        }
    }
    .inds {
        position: absolute;
        bottom: 2.5rem;
        left: 3.75rem;
        display: flex;
        li {
            width: 0.625rem;
            height: 0.625rem;
            margin-right: 0.75rem;
            background: #ffffff;
            border-radius: 50%;
            transition: 0.2s;
            &.active {
                width: 1.875rem;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 5px;
            }
        }
    }
    h6 {
        font-size: 1.2rem;
        transition: 0.3s;
    }
    .des {
        margin: 1.5rem 0;
        font-size: 0.88rem;
        line-height: 1.3714rem;
        transition: 0.3s;
    }
    .meta {
        font-size: 0.88rem;
        transition: 0.3s;
    }
}
.card {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
    width: 100%;

    li {
        width: 32.5%;
        margin-right: 1%;
        box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
        border-radius: 6px;
        transition: 0.3s;
        &:hover {
            transform: scale(1.05);
        }
        &:last-child {
            margin-right: 0;
        }
    }
    .pic {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .texts {
        padding: 2rem 1.5rem;
    }
    .meta {
        font-size: 0.88rem;
        color: #666;
    }
    .des {
        height: 3.7rem;
        margin: 10px 0;
        font-size: 1.25rem;
        font-family: SFProDisplay;
        font-weight: 500;
        color: #333;
        line-height: 1.7rem;
        -webkit-line-clamp: 2;
    }
    .arrow {
        width: 2.25rem;
    }
}
.more {
    width: 23.375rem;
    margin: 3.625rem auto 0;
    line-height: 64px;
    font-size: 1.875rem;
    text-align: center;
    color: #1583ff;
    border-radius: 35px;
    border: 2px solid #2b6cef;
    cursor: pointer;
}
.shop-shows {
    display: flex;
    .left {
        width: 41.25rem;
        margin-right: 1.25rem;
        background-color: #fff;
        cursor: pointer;
        overflow: hidden;
        .pic {
            transition: 0.3s;
            height: auto;
            object-fit: cover;
            &:hover {
                transform: scale(1.05);
            }
        }
        .texts {
            padding: 2rem 1.5rem;
        }
        h6 {
            font-size: 1.2rem;
            color: #272727;
        }
        .des {
            margin-top: 10px;
            font-size: 0.88rem;
            color: #666;
            line-height: 1.714rem;
        }
    }
    .right {
        width: 60%;
        overflow: hidden;
    }
    .show-card {
        display: flex;
        margin-bottom: 1.25rem;
        li {
            position: relative;
            height: auto;
            overflow: hidden;
            cursor: pointer;

            &:first-child {
                margin-right: 1.375rem;
            }
        }
        .pic {
            width: 25rem;
            height: 12.3125rem;
            transition: 0.3s;
            object-fit: cover;
            &:hover {
                transform: scale(1.05);
            }
        }
        .text {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            font-size: 0.88rem;
            color: #fff;
            padding: 0 1rem;
            line-height: 48px;
            text-align: center;
            @include ellipsis;
            background: rgba(0, 0, 0, 0.49);
            box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
        }
    }
    .card-list {
        padding: 1.5rem 1.3rem;
        background-color: #fff;
        li {
            display: inline-flex;
            align-items: center;
            margin-bottom: 0.9rem;
            transition: 0.3s;
            &:hover {
                transform: scale(1.05);
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
        .pic {
            width: 8rem;
            height: auto;
            margin-right: 1.5rem;
            object-fit: cover;
        }
        .texts {
            width: calc(100% - 15rem);
            margin-right: 3.5rem;
        }
        h6 {
            margin-bottom: 10px;
            font-size: 1rem;
            color: #272727;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .des {
            font-size: 0.7rem;
            color: #666;
            line-height: 1.4rem;
            text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
            -webkit-line-clamp: 2;
        }
        .arrow {
            width: 2rem;
        }
    }
}
.conference {
    background: #072947;
    .b-title,
    .intro {
        color: #fff;
    }
    .shows {
        display: flex;
    }
    .left {
        width: 44.875rem;
        margin-right: 20px;
        overflow: hidden;
        cursor: pointer;
        .pic {
            transition: 0.3s;
            height: auto;
            object-fit: cover;
            &:hover {
                transform: scale(1.05);
            }
        }
        .texts {
            display: flex;
            padding: 3.78rem 1.5rem;
            background-color: #fff;
        }
        .meta {
            padding: 0.5714rem 1.314rem 0.5714rem 0;
            margin-right: 1.828rem;
            text-align: center;
            border-right: 1px solid #ddd;
        }
        .date {
            font-size: 2.5714rem;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #1f1f1f;
            line-height: 2.9714rem;
        }
        .year {
            font-size: 0.9142rem;
            white-space: nowrap;
            color: #666;
        }
        h6 {
            font-size: 1.1428rem;
            color: #272727;
        }
        .des {
            margin-top: 10px;
            font-size: 0.8rem;
            color: #666;
            line-height: 1.3714rem;
        }
    }
    .card-list {
        width: 50%;
        li {
            display: flex;
            padding: 0.8rem;
            margin-bottom: 0.7rem;
            background-color: #fff;
            cursor: pointer;
            align-items: center;
            transition: 0.3s;
            height: 9rem;
            &:last-child {
                margin-bottom: 0;
            }
            &:hover {
                transform: translateX(20px);
            }
        }
        .pic {
            width: 10rem;
            height: auto;
            margin-right: 1.5rem;
            object-fit: cover;
        }
        .texts {
            width: calc(100% - 11.5rem);
        }
        h6 {
            margin-bottom: 5px;
            font-size: 1rem;
            color: #333;
            @include ellipsis();
        }
        .text {
            display: flex;
            align-items: center;
            &:last-child {
                margin-bottom: 0;
            }
            span {
                @include ellipsis();
            }
        }
        .icon {
            margin-right: 5px;
        }
    }
}

@media (max-width: 1200px) {
    .newsTab {
        overflow-x: scroll;
        display: -webkit-box;
    }
    .shop-shows {
        .left {
            width: 50%;
        }
        .right {
            width: 48%;
        }
        .card-list {
            .pic {
                margin-right: 1rem;
            }
            .texts {
                width: calc(100% - 11rem);
                margin-right: 1rem;
            }
        }
    }
}
@media (max-width: 640px) {
    .block {
        padding: 50px 0;
        .inner {
            .more {
                width: 100%;
                margin: 20px auto 0;
            }
            .news-banner {
                flex-direction: column;
                img {
                    width: 100%;
                }
                .right {
                    margin-top: 10px;
                    width: 100%;
                    .inds {
                        left: 50%;
                        margin-left: -43px;
                    }
                }
            }
            .card {
                flex-direction: column;
                .wow {
                    width: 95%;
                    margin: 20px auto;
                }
            }
            .b-title {
                font-size: 20px;
            }
            .intro {
                font-size: 15px;
                margin-bottom: 50px;
            }
        }
    }
    .shop-shows {
        flex-direction: column;
        .left {
            width: 100%;
        }
        .right {
            width: 100%;
            margin: 20px auto;
            .show-card {
                flex-direction: column;
                li {
                    width: 100%;
                    .pic {
                        width: 100%;
                    }
                }
            }
        }
    }
    .conference {
        .shows {
            flex-direction: column;
        }
        .left {
            width: 100%;
            margin-right: 0;
        }
        .card-list {
            width: 100%;
            margin-top: 20px;
            .text {
                margin-bottom: 4px;
            }
        }
    }
}
</style>