asean_nuxt/pages/content/index.vue

<template>
  <div>
    <div class="auto content">
      <Row>
        <Col :span="15">
          <div class="atc">
            <Breadcrumb v-if="(columnName instanceof Array)">
              <BreadcrumbItem to="/">首页</BreadcrumbItem>
              <BreadcrumbItem :to="{path: '/lists', query:{id:'88'}}">{{columnName[0]}}</BreadcrumbItem>
              <BreadcrumbItem :to="{path: '/lists', query:{id:columnId}}">{{columnName[1]}}</BreadcrumbItem>
            </Breadcrumb>
            <Breadcrumb v-else>
              <BreadcrumbItem to="/">首页</BreadcrumbItem>
              <BreadcrumbItem :to="{path: '/lists', query:{id:columnId}}">{{columnName}}</BreadcrumbItem>
            </Breadcrumb>
            <h2>{{title}}</h2>
            <div class="up-time">
              <Row>
                <Col :span="8">
                  <span>{{upTime}}</span>
                </Col>
                <Col :span="8">
                  <span v-if="srcname">来源：{{srcname}}</span>
                </Col>
                <Col :span="8">
                  <div style="display:flex">
                    <span>分享：</span>
                    <div class="bdsharebuttonbox">
                      <!-- <a href="#" class="bds_more" data-cmd="more"></a> -->
                      <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                      <a class="bds_weixin" @click="showVxCode" title="分享到微信">
                        <Modal
                          title="分享到微信朋友圈"
                          v-model="vxCodeShow"
                          :footer-hide="true"
                          width="300px"
                        >
                          <!-- <div id="code"></div>-->
                          <!-- <canvas id="canvas"></canvas> -->
                          <vue-qr id="vx-qrcode" :text="'http://aseanweb.info666.com/content/'+id" :size="200" :data-bd-imgshare-binded="0"></vue-qr>
                          <p>打开微信，点击底部的“发现”，使用“扫一扫”即可将网页分享至朋友圈。</p>
                        </Modal>
                      </a>
                      <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                      <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                      <a class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
                      <a class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
            <div v-if="type=='2'">
              <div class="con-img-box" v-html="content"></div>
              <div class="keyword" v-if="keywords">
                <span>关键字：</span>
                <span v-for="item in keywords.split(' ')">
                  <a
                    @click="keywordList(item)"
                    class="line-one"
                    style="-webkit-box-orient: vertical;margin: 0 5px"
                  >{{item}}</a>
                </span>
              </div>
              <div class="author">
                <span>【编辑：{{author}}】</span>
              </div>
            </div>
            <div v-if="type=='1'">
              <video width="100%" min-height="420px" controls ref="videoPlayer">
                <!-- <source v-lazy="vurl" type="video/mp4"> -->
                <source :src="vurl" type="video/mp4">您的浏览器不支持 HTML5 video 标签。
              </video>
            </div>
            <div class="lists" v-show="swiperList.length">
              <div class="public-tit clearfix">
                <h4 class="fl wgw-color">相关阅读</h4>
              </div>
              <div>
                <swiper
                  :options="swiperOptionTop"
                  class="swiper-container gallery-top"
                  ref="swiperTop"
                >
                  <swiper-slide v-for="(arr,index) in swiperList" :key="index">
                    <Row>
                      <Col :span="7" v-for="(item,i) in arr" :key="i">
                        <nuxt-link
                          :to="{path: '/content', query:{id:item.infoId}}"
                          tag="a"
                          target="_blank"
                        >
                          <img :src="item.path">
                          <p class="line-two">{{item.title}}</p>
                        </nuxt-link>
                      </Col>
                    </Row>
                  </swiper-slide>
                  <div class="swiper-pagination" slot="pagination"></div>
                  <!-- <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
                  <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>-->
                </swiper>
              </div>
              <!-- <div class="lists-item" v-for="item in listData">
                            <img v-lazy="picPath+item.infoimg" alt="" :key="item.infoId">
                            <div class="content-text">
                                <nuxt-link :to="'/content/'+item.infoId">{{item.title}}</nuxt-link>
                                <p style="-webkit-box-orient: vertical;">{{item.summary}}</p>
                                <div class="source" v-if="item.columnname?item.columnname.includes('—'):false">
                                    <nuxt-link :to="'/lists/'+item.parentcolumnId" class="line-one" style="-webkit-box-orient: vertical;" tag="a" target="_blank">{{item.columnname.split('—')[0]}}</nuxt-link>
                                    <span>—</span>
                                    <nuxt-link :to="'/lists/'+item.columnId" class="line-one" style="-webkit-box-orient: vertical;" tag="a" target="_blank">{{item.columnname.split('—')[1]}}</nuxt-link>
                                    <span>/{{item.uptimeStr}}</span>
                                </div>
                                <div class="source" v-else>
                                    <nuxt-link v-if="item.columnname" :to="'/lists/'+item.columnId" class="line-one" style="-webkit-box-orient: vertical;" tag="a" target="_blank">{{item.columnname}}/</nuxt-link>
                                    <span>{{item.uptimeStr}}</span>
                                </div>
                            </div>
              </div>-->
            </div>
          </div>
        </Col>
        <Col :span="1" style="height:100px"></Col>
        <Col :span="8">
          <div>
            <div class="public-tit clearfix">
              <h4 class="fl wgw-color">推荐阅读</h4>
            </div>
            <ul class="text4adlist">
              <li v-for="item in list" class="line-one">
                <nuxt-link
                  :to="{path: '/content', query:{id:item.infoId}}"
                  tag="a"
                  target="_blank"
                >{{item.title}}</nuxt-link>
              </li>
            </ul>
          </div>
          <!-- <div style="margin-top:30px">
                        <a v-if="imgTo" :href="imgTo">                        
                            <img style="width:333px" v-lazy="'http://pic-asean2.oss-cn-hongkong.aliyuncs.com/'+imgPath" alt="">
                        </a>
                        <img v-else style="width:333px" v-lazy="'http://pic-asean2.oss-cn-hongkong.aliyuncs.com/'+imgPath" alt="">
          </div>-->
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { getInfoDetail } from '~/api/content'
import { getColumnAd } from '~/api/lists'
import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
import Bus from '~/common/bus'
// import VueQr from 'vue-qr'
// import QRCode from 'qrcode'
import { formatTime } from '~/common/publicFun'
export default {
  // components: {
  //   VueQr: VueQr
  // },
  data() {
    return {
      vxCodeShow: false,
      picPath: 'http://pic-asean2.oss-cn-hongkong.aliyuncs.com/',
      suffix:
        '?x-oss-process=image/watermark,image_d2F0ZXJtYXJrL3dtMS5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8zMA==,g_se,x_10,y_10,t_70',
      type: '',
      list: [],
      title: '',
      upTime: '',
      content: '',
      imgPath: '',
      imgTo: '',
      vurl: '',
      columnId: '',
      columnName: '',
      author: '范编辑',
      keywords: '',
      listData: [], //下方相关阅读列表
      srcname: '',
      summary: '',
      id: '',
      swiperList: [],
      swiperOptionTop: {
        // spaceBetween: 10,
        notNextTick: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        loop: true,
        loopedSlides: 5, //looped slides should be the same
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        codes: ''
        // autoplay: {
        //     delay: 2500,
        //     disableOnInteraction: false
        // },
      }
    }
  },
  async asyncData({ query }) {
    let arr = []
    let picPath = 'http://pic-asean2.oss-cn-hongkong.aliyuncs.com/'
    let swiperList = []
    let keywords = ''
    let columnName = ''
    let [conData, imgObj] = await Promise.all([
      getInfoDetail({ reqdata: { infoId: query.id } }),
      getColumnAd({ reqdata: { adPosition: 'column' } })
    ])
    if (process.browser) {
      require('vue-qr')
    }

    conData.object.relateList.map((item, index) => {
      if (index < 12) {
        arr.push({
          path: picPath + item.infoimg,
          infoId: item.infoId,
          title: item.title
        })
        if ((index + 1) % 3 == 0) {
          swiperList.push(arr)
          arr = []
        }
      }
    })
    arr.length ? swiperList.push(arr) : null

    keywords = conData.object.keywords
    if (conData.object.columnName.includes('-')) {
      columnName = conData.object.columnName.split('-')
    } else {
      columnName = conData.object.columnName
    }

    return {
      type: conData.object.infoType,
      content: conData.object.articleContent,
      title: conData.object.title,
      summary: conData.object.summary,
      upTime: conData.object.uptimeStr,
      list: conData.list,
      vurl:
        'http://video-asean2.oss-cn-hongkong.aliyuncs.com/' +
        conData.object.vurl,
      columnId: conData.object.columnId,
      srcname: conData.object.srcname,
      author: conData.object.managerName || '',
      listData: conData.object.relateList || [],
      swiperList,
      keywords,
      columnName,
      imgPath: imgObj.object ? imgObj.object.adimg : '',
      imgTo: imgObj.object ? imgObj.object.adurl : ''
    }
  },
  beforeCreate() {},
  updated() {},
  mounted() {
    this.id = parseInt(this.$route.query.id)
    Bus.$emit('columnId', this.columnId)
    window._bd_share_main = ''
    this.shareArt()
    // this.useqrcode()
    // this.getData(this.id);
  },
  // computed: {
  //   swiperTop () {
  //     return this.$refs.swiperTop.swiper
  //   }
  // },
  watch: {
    // $route() {
    //   this.id = this.$route.params.id;
    //   this.getData(this.id);
    // },
    //更改视频源 videoUrl从弹出框组件传值
    vurl: function(val) {
      if (val != '' && this.$refs.videoPlayer) {
        this.$nextTick(() => {
          this.$refs.videoPlayer.src = val
        })
      }
    }
  },
  methods: {
    // ...mapMutations(["setColumnId"]),
    getData(id) {
      let params = {
        reqdata: {
          infoId: id
        }
      }
      getInfoDetail(params).then(res => {
        let arr = []
        this.type = res.object.infoType
        this.content = res.object.articleContent
        // this.content = this.joinSuffixToContent(res.object.articleContent);
        this.title = res.object.title
        this.summary = res.object.summary
        this.upTime = res.object.uptimeStr
        this.list = res.list
        this.vurl =
          'http://video-asean2.oss-cn-hongkong.aliyuncs.com/' + res.object.vurl
        this.columnId = res.object.columnId
        this.srcname = res.object.srcname
        this.author = res.object.managerName || this.author
        this.listData = res.object.relateList || []
        res.object.relateList.map((item, index) => {
          if (index < 12) {
            arr.push({
              path: this.picPath + item.infoimg,
              infoId: item.infoId,
              title: item.title
            })
            if ((index + 1) % 3 == 0) {
              this.swiperList.push(arr)
              arr = []
            }
          }
        })
        arr.length ? this.swiperList.push(arr) : null

        this.keywords = res.object.keywords
        if (res.object.columnName.includes('-')) {
          this.columnName = res.object.columnName.split('-')
        } else {
          this.columnName = res.object.columnName
        }

        this.shareArt()
        Bus.$emit('columnId', res.object.columnId)
      })
      this.getAd()
    },

    getAd() {
      getColumnAd({ reqdata: { adPosition: 'column' } }).then(res => {
        this.imgPath = res.object.adimg
        this.imgTo = res.object.adurl
      })
    },

    joinSuffixToContent(content) {
      let arr = content.split('http://')
      let arrTag = []
      arr.map(item => {
        if (item.includes('title')) {
          let i = item.indexOf('"')
          let nPath = 'http://' + item.slice(0, i) + this.suffix + item.slice(i)
          arrTag.push(nPath)
        } else {
          arrTag.push(item)
        }
      })
      return arrTag.join('')
    },

    keywordList(keyword) {
      // this.$store.dispatch('saveKeyword',keyword);
      // this.$router.push({ name:'lists'})
      let routeData = this.$router.resolve({
        path: '/lists',
        query: { id: keyword }
      })
      window.open(routeData.href, '_blank')
    },

    shareArt() {
      this.$nextTick(() => {
        window._bd_share_config = {
          common: {
            // onAfterClick:this.setShareConfig,
            // onBeforeClick:this.setAShareConfig,
            bdSnsKey: {},
            bdText: this.title,
            bdDesc: this.summary,
            bdMini: '2',
            bdMiniList: false,
            bdPic: '',
            bdUrl: 'http://aseanweb.info666.com/content/' + this.id,
            bdStyle: '0',
            bdSize: '16'
          },
          share: {},
          image: {
            viewList: ['tsina', 'weixin', 'sqq', 'qzone', 'twi', 'fbook'],
            viewText: '分享到：',
            viewSize: '16'
          },
          selectShare: {
            bdContainerClass: null,
            bdSelectMiniList: [
              'tsina',
              'weixin',
              'sqq',
              'qzone',
              'twi',
              'fbook'
            ]
          }
        }
        const s = document.createElement('script')
        s.type = 'text/javascript'
        s.src =
          'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' +
          ~(-new Date() / 36e5)
        document.body.appendChild(s)
      })
    },
    // setShareConfig (cmd) {
    //   console.log(this.$el.getElementsByTagName('iframe')[1])

    //   // if (cmd === 'weixin') {
    //   //   var t = setTimeout(function () {
    //   //       if (document.getElementById('bdshare_weixin_qrcode_dialog_bg').length > 0) {
    //   //           clearTimeout(t);
    //   //           document.getElementsByClassName('bdshare_weixin_qrcode_dialog_qr').html(document.getElementById('vx-qrcode'));
    //   //           document.getElementById('bdshare_weixin_qrcode_dialog_bg').css('height','auto');
    //   //           var cssText = document.getElementById('bdshare_weixin_qrcode_dialog_bg').attr('style') + ';display:block !important;';
    //   //           document.getElementById('bdshare_weixin_qrcode_dialog_bg').css('cssText', cssText);
    //   //       }
    //   //   },500);
    //   // }
    // },
    // useqrcode() {
    //   console.log(QRCode, 'QRCodeQRCode')
    //   var canvas = document.getElementById('canvas')
    //   let er = 'http://aseanweb.info666.com/content/' + this.id
    //   QRCode.toCanvas(canvas, er, function(error) {
    //     console.log(error, 'error')
    //     if (error) console.error(error)
    //     console.log('success!')
    //   })
    //   console.log(canvas, '1325412345234')
    // },

    showVxCode() {
      // this.useqrcode();
      this.vxCodeShow = !this.vxCodeShow
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding-top: 15px;
  margin-bottom: 123px;
  .atc {
    h2 {
      width: 100%;
      text-align: center;
    }
    .ivu-breadcrumb {
      margin: 0 0 10px 0;
    }
    .up-time {
      margin: 15px 0;
      border-bottom: 1px dashed #ddd;
      width: 100%;
      line-height: 29px;
      // #canvas {
      //   width: 200px !important;
      //   height: 200px !important;
      // }
      .ivu-col-span-8 {
        height: 29px;
      }
    }
    .con-img-box {
      font-size: 18px;
    }
    .keyword {
      margin: 30px 0 0 15px;
      span,
      a {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .author {
      margin: 30px 30px 0 0;
      float: right;
    }
    .lists {
      padding-top: 90px;
      .lists-item {
        display: inline-flex;
        padding: 19px 0;
        border-bottom: 1px solid #ccc;
        width: 100%;
        img {
          width: 35%;
          height: 150px;
          border-radius: 10px;
          margin-right: 10px;
        }
        .content-text {
          position: relative;
          margin-left: 10px;
          width: 62%;
          a {
            font-size: 20px;
            float: left;
            width: 100%;
            margin-bottom: 4px;
          }
          p {
            font-size: 14px;
            margin: 0 0 10px 0;
            color: #aaaaaa;
            width: 100%;
            height: 85px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
          }
          span {
            float: left;
            font-size: 12px;
            margin-top: 15px;
          }
          .source {
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            a {
              font-size: 13px;
              width: auto;
              color: #515a6e;
              margin: auto;
            }
            span {
              float: left;
              font-size: 12px;
              margin: auto;
            }
          }
        }
      }
      .gallery-top {
        width: 100%;
        height: 220px;
        padding-bottom: 20px;
        .swiper-slide {
          display: inline-flex;
          .ivu-col {
            padding: 0 15px;
            img {
              // width: 90%;
              height: 150px;
            }
            p {
              margin-top: 15px;
            }
          }
        }
      }
    }
  }

  .public-tit {
    height: 42px;
    line-height: 42px;
    border-top: 1px solid #cecece;
    h4 {
      font-size: 16px;
      font-weight: normal !important;
      padding: 0 10px;
      border-top: 2px solid;
      margin-top: -1px;
      display: inline-block;
    }
    a {
      color: #999;
      font-size: 15px;
    }
  }
  .text4adlist {
    clear: both;
    li {
      height: 26px;
      padding-left: 10px;
      font-size: 14px;
      line-height: 26px;
      background: url(~/assets/img/blue_ico.jpg) no-repeat left center;
      overflow: hidden;
      a {
        line-height: 26px;
        font-size: 13px;
        color: #393939;
      }
    }
  }
}
.bd_weixin_popup {
  .bd_weixin_popup_main {
    display: none !important;
    table {
    }
  }
}
</style>