|
|
@@ -1,91 +1,107 @@
|
|
|
<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 href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
|
|
|
- <a href="#" class="bds_weixin" @click="showVxCode" title="分享到微信">
|
|
|
- <Modal
|
|
|
- title="分享到微信朋友圈"
|
|
|
- v-model="vxCodeShow"
|
|
|
- :footer-hide="true"
|
|
|
- width="300px">
|
|
|
- <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 href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
|
|
|
- <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
|
|
|
- <a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
|
|
|
- <a href="#" 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">
|
|
|
+ <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>
|
|
|
+ <!-- <no-ssr><vue-qr id="vx-qrcode" :text="'http://aseanweb.info666.com/content/'+id" :size="200" :data-bd-imgshare-binded="0"></vue-qr></no-ssr> -->
|
|
|
+ <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>
|
|
|
@@ -101,152 +117,158 @@
|
|
|
<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">
|
|
|
+ </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>-->
|
|
|
+ </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 { 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 {formatTime} from '~/common/publicFun'
|
|
|
+import QRCode from 'qrcode'
|
|
|
+import { formatTime } from '~/common/publicFun'
|
|
|
export default {
|
|
|
- // components: {
|
|
|
- // VueQr
|
|
|
- // },
|
|
|
+ components: {
|
|
|
+ QRCode: QRCode
|
|
|
+ },
|
|
|
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: "",
|
|
|
+ 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:"",
|
|
|
+ title: '',
|
|
|
+ upTime: '',
|
|
|
+ content: '',
|
|
|
+ imgPath: '',
|
|
|
+ imgTo: '',
|
|
|
+ vurl: '',
|
|
|
+ columnId: '',
|
|
|
+ columnName: '',
|
|
|
+ author: '范编辑',
|
|
|
+ keywords: '',
|
|
|
+ listData: [], //下方相关阅读列表
|
|
|
+ srcname: '',
|
|
|
+ summary: '',
|
|
|
id: '',
|
|
|
- swiperList:[],
|
|
|
+ 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'
|
|
|
- },
|
|
|
- // autoplay: {
|
|
|
- // delay: 2500,
|
|
|
- // disableOnInteraction: false
|
|
|
- // },
|
|
|
- },
|
|
|
- };
|
|
|
+ // 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" } }),
|
|
|
- ]);
|
|
|
+ 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' } })
|
|
|
+ ])
|
|
|
|
|
|
- conData.object.relateList.map((item,index)=>{
|
|
|
- if(index<12){
|
|
|
+ conData.object.relateList.map((item, index) => {
|
|
|
+ if (index < 12) {
|
|
|
arr.push({
|
|
|
path: picPath + item.infoimg,
|
|
|
infoId: item.infoId,
|
|
|
- title:item.title
|
|
|
+ title: item.title
|
|
|
})
|
|
|
- if((index+1)%3==0){
|
|
|
- swiperList.push(arr);
|
|
|
- arr=[];
|
|
|
+ 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("-");
|
|
|
+ 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;
|
|
|
+ columnName = conData.object.columnName
|
|
|
}
|
|
|
|
|
|
- return{
|
|
|
- type : conData.object.infoType,
|
|
|
- content : conData.object.articleContent,
|
|
|
- title : conData.object.title,
|
|
|
+ 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||[],
|
|
|
+ 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:''
|
|
|
+ imgPath: imgObj.object ? imgObj.object.adimg : '',
|
|
|
+ imgTo: imgObj.object ? imgObj.object.adurl : ''
|
|
|
}
|
|
|
},
|
|
|
- beforeCreate(){
|
|
|
- },
|
|
|
- updated(){
|
|
|
-
|
|
|
- },
|
|
|
+ beforeCreate() {},
|
|
|
+ updated() {},
|
|
|
mounted() {
|
|
|
-
|
|
|
- this.id = parseInt( this.$route.query.id )
|
|
|
- Bus.$emit("columnId", this.columnId);
|
|
|
- window._bd_share_main = "";
|
|
|
- this.shareArt();
|
|
|
+ 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: {
|
|
|
@@ -261,10 +283,10 @@ export default {
|
|
|
// },
|
|
|
//更改视频源 videoUrl从弹出框组件传值
|
|
|
vurl: function(val) {
|
|
|
- if (val != "" && this.$refs.videoPlayer) {
|
|
|
+ if (val != '' && this.$refs.videoPlayer) {
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs.videoPlayer.src = val;
|
|
|
- });
|
|
|
+ this.$refs.videoPlayer.src = val
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -275,80 +297,84 @@ export default {
|
|
|
reqdata: {
|
|
|
infoId: id
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
getInfoDetail(params).then(res => {
|
|
|
- let arr=[];
|
|
|
- this.type = res.object.infoType;
|
|
|
- this.content = res.object.articleContent;
|
|
|
+ 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){
|
|
|
+ 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=[];
|
|
|
+ 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("-");
|
|
|
+ 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.columnName = res.object.columnName
|
|
|
}
|
|
|
-
|
|
|
- this.shareArt();
|
|
|
- Bus.$emit("columnId", res.object.columnId);
|
|
|
- });
|
|
|
- // this.getAd();
|
|
|
+
|
|
|
+ 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;
|
|
|
- });
|
|
|
+ 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);
|
|
|
+ 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('');
|
|
|
+ return arrTag.join('')
|
|
|
},
|
|
|
|
|
|
- keywordList(keyword){
|
|
|
+ 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');
|
|
|
+ let routeData = this.$router.resolve({
|
|
|
+ path: '/lists',
|
|
|
+ query: { id: keyword }
|
|
|
+ })
|
|
|
+ window.open(routeData.href, '_blank')
|
|
|
},
|
|
|
|
|
|
- shareArt(){
|
|
|
- this.$nextTick(()=>{
|
|
|
+ shareArt() {
|
|
|
+ this.$nextTick(() => {
|
|
|
window._bd_share_config = {
|
|
|
common: {
|
|
|
// onAfterClick:this.setShareConfig,
|
|
|
@@ -356,33 +382,42 @@ export default {
|
|
|
bdSnsKey: {},
|
|
|
bdText: this.title,
|
|
|
bdDesc: this.summary,
|
|
|
- bdMini: "2",
|
|
|
+ bdMini: '2',
|
|
|
bdMiniList: false,
|
|
|
- bdPic: "",
|
|
|
- bdUrl: "http://aseanweb.info666.com/#/content/"+this.id,
|
|
|
- bdStyle: "0",
|
|
|
- bdSize: "16"
|
|
|
+ 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"
|
|
|
+ viewList: ['tsina', 'weixin', 'sqq', 'qzone', 'twi', 'fbook'],
|
|
|
+ viewText: '分享到：',
|
|
|
+ viewSize: '16'
|
|
|
},
|
|
|
selectShare: {
|
|
|
bdContainerClass: null,
|
|
|
- bdSelectMiniList: ["tsina", "weixin", "sqq", "qzone", "twi", "fbook"]
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ 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) {
|
|
|
@@ -395,11 +430,23 @@ export default {
|
|
|
// // },500);
|
|
|
// // }
|
|
|
// },
|
|
|
- showVxCode(){
|
|
|
- this.vxCodeShow=!this.vxCodeShow;
|
|
|
+ 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.vxCodeShow = !this.vxCodeShow
|
|
|
}
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -407,8 +454,8 @@ export default {
|
|
|
padding-top: 15px;
|
|
|
margin-bottom: 123px;
|
|
|
.atc {
|
|
|
- h2{
|
|
|
- width:100%;
|
|
|
+ h2 {
|
|
|
+ width: 100%;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.ivu-breadcrumb {
|
|
|
@@ -419,16 +466,21 @@ export default {
|
|
|
border-bottom: 1px dashed #ddd;
|
|
|
width: 100%;
|
|
|
line-height: 29px;
|
|
|
- .ivu-col-span-8{
|
|
|
+ #canvas {
|
|
|
+ width: 200px !important;
|
|
|
+ height: 200px !important;
|
|
|
+ }
|
|
|
+ .ivu-col-span-8 {
|
|
|
height: 29px;
|
|
|
}
|
|
|
}
|
|
|
- .con-img-box{
|
|
|
+ .con-img-box {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
- .keyword{
|
|
|
+ .keyword {
|
|
|
margin: 30px 0 0 15px;
|
|
|
- span,a{
|
|
|
+ span,
|
|
|
+ a {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
@@ -437,57 +489,57 @@ export default {
|
|
|
margin: 30px 30px 0 0;
|
|
|
float: right;
|
|
|
}
|
|
|
- .lists{
|
|
|
+ .lists {
|
|
|
padding-top: 90px;
|
|
|
- .lists-item{
|
|
|
+ .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;
|
|
|
+ img {
|
|
|
+ width: 35%;
|
|
|
+ height: 150px;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
- .content-text{
|
|
|
+ .content-text {
|
|
|
position: relative;
|
|
|
margin-left: 10px;
|
|
|
width: 62%;
|
|
|
- a{
|
|
|
+ a {
|
|
|
font-size: 20px;
|
|
|
float: left;
|
|
|
width: 100%;
|
|
|
- margin-bottom:4px;
|
|
|
+ margin-bottom: 4px;
|
|
|
}
|
|
|
- p{
|
|
|
+ p {
|
|
|
font-size: 14px;
|
|
|
margin: 0 0 10px 0;
|
|
|
color: #aaaaaa;
|
|
|
width: 100%;
|
|
|
height: 85px;
|
|
|
overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 4;
|
|
|
}
|
|
|
- span{
|
|
|
+ span {
|
|
|
float: left;
|
|
|
font-size: 12px;
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
- .source{
|
|
|
+ .source {
|
|
|
position: absolute;
|
|
|
bottom: 0px;
|
|
|
left: 0px;
|
|
|
width: 100%;
|
|
|
- a{
|
|
|
+ a {
|
|
|
font-size: 13px;
|
|
|
width: auto;
|
|
|
color: #515a6e;
|
|
|
margin: auto;
|
|
|
}
|
|
|
- span{
|
|
|
+ span {
|
|
|
float: left;
|
|
|
font-size: 12px;
|
|
|
margin: auto;
|
|
|
@@ -495,23 +547,22 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .gallery-top{
|
|
|
+ .gallery-top {
|
|
|
width: 100%;
|
|
|
height: 220px;
|
|
|
padding-bottom: 20px;
|
|
|
- .swiper-slide{
|
|
|
+ .swiper-slide {
|
|
|
display: inline-flex;
|
|
|
- .ivu-col{
|
|
|
+ .ivu-col {
|
|
|
padding: 0 15px;
|
|
|
- img{
|
|
|
+ img {
|
|
|
// width: 90%;
|
|
|
height: 150px;
|
|
|
}
|
|
|
- p{
|
|
|
+ p {
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -536,7 +587,6 @@ export default {
|
|
|
}
|
|
|
.text4adlist {
|
|
|
clear: both;
|
|
|
- display: inline-grid;
|
|
|
li {
|
|
|
height: 26px;
|
|
|
padding-left: 10px;
|
|
|
@@ -552,13 +602,11 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.bd_weixin_popup{
|
|
|
- .bd_weixin_popup_main{
|
|
|
+.bd_weixin_popup {
|
|
|
+ .bd_weixin_popup_main {
|
|
|
display: none !important;
|
|
|
- table{
|
|
|
-
|
|
|
+ table {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
</style>
|
