分享功能bug修改

nuxt.config.js

@@ -69,6 +69,7 @@ module.exports = {
     /*
     ** You can extend webpack config here
     */
+    vendor: ['external_library'],
     extend(config, { isDev, isClient }) {
 
       // const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader');

package.json

@@ -16,9 +16,11 @@
     "express": "^4.16.3",
     "iview": "^3.1.5",
     "nuxt": "^2.0.0",
+    "qrcode": "^1.3.2",
     "vue-awesome-swiper": "^3.1.3",
     "vue-lazyload": "^1.2.6",
-    "vue-qr": "^1.5.2"
+    "vue-qr": "^1.5.2",
+    "vue-social-sharing": "^2.3.3"
   },
   "devDependencies": {
     "eslint-config-prettier": "^3.1.0",

pages/content/index.vue

@@ -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>

pages/header/index.vue

@@ -268,7 +268,7 @@ export default {
     },
     jump(name){//菜单跳转
         if(name=='1'){
-            this.$router.push({path:'/homePage'})
+            this.$router.push({path:'/'})
             this.$nextTick(()=>{
                 this.activeKey='1';
             })

pages/lists/index.vue

@@ -70,10 +70,10 @@ export default {
             }
         let fun='';
             if(query.id=='search'){
-                params.reqdata.title=this.searchVal
+                params.reqdata.title=query.id;
                 fun=search;
             }else if(['focus','recommend'].includes(query.id)){
-                params.reqdata.type=this.id;
+                params.reqdata.type=query.id;
                 fun=listFocusInfo;
             }else if(parseInt(query.id)){
                 params.reqdata.columnId=parseInt(query.id);

plugins/plugins.js

@@ -1,7 +1,10 @@
 import Vue from 'vue'
 import VueAwesomeSwiper from 'vue-awesome-swiper'
-import VueQr from 'vue-qr'
-Vue.use(VueQr);
+import vueSocialSharing from 'vue-social-sharing'
+import QRCode from 'qrcode'
+
+Vue.use(QRCode)
+Vue.use(vueSocialSharing)
 Vue.use(VueAwesomeSwiper);