f

assets/style/homePage.scss

@@ -431,6 +431,9 @@
                             }
                         }
                         .cul-top{
+                            img{
+                                height: 229.19px;
+                            }
                             a{
                                 display: inline-block;
                                 margin: 10px 0;

nuxt.config.js

@@ -39,6 +39,7 @@ module.exports = {
   plugins: [
     { src: '~plugins/iview.js', ssr: true },
     { src: '~plugins/lazy.js', ssr: true },
+    { src: '~assets/iconfont/iconfont.js', ssr: false },
     { src: '~plugins/plugins.js', ssr: false },
   ],
 

pages/content/index.vue

@@ -34,7 +34,7 @@
                                     v-model="vxCodeShow"
                                     :footer-hide="true"
                                     width="300px">
-                                    <VueQr id="vx-qrcode" :text="'http://aseanweb.info666.com/#/content/'+id" :size="200" :data-bd-imgshare-binded="0"></VueQr>
+                                    <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>
@@ -51,7 +51,10 @@
                           <div class="con-img-box" v-html="content"></div>
                           <div class="keyword" v-if="keywords">
                             <span>关键字：</span>
-                            <a v-for="item in keywords.split(' ')" @click="keywordList(item)" class="line-one" style="-webkit-box-orient: vertical;margin: 0 5px">{{item}}</a>
+                            <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>
@@ -181,9 +184,57 @@ export default {
       },
     };
   },
-  async asyncData ({ query }) { 
-    console.log(query,'query')
-    // this.id = parseInt( query.id )
+  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){
+        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(){
   },
@@ -193,8 +244,10 @@ export default {
   mounted() {
     
     this.id = parseInt( this.$route.query.id )
+    Bus.$emit("columnId", this.columnId);
     window._bd_share_main = "";
-    this.getData(this.id);
+    this.shareArt();
+    // this.getData(this.id);
   },
   // computed: {
   //   swiperTop () {
@@ -218,7 +271,6 @@ export default {
   methods: {
     // ...mapMutations(["setColumnId"]),
     getData(id) {
-      console.log(id, "id_+_+___________");
       let params = {
         reqdata: {
           infoId: id
@@ -252,7 +304,6 @@ export default {
           }
         })
         arr.length?this.swiperList.push(arr):null;
-        console.log(this.swiperList,"this.swiperList")
         
         this.keywords = res.object.keywords;
         if (res.object.columnName.includes("-")) {
@@ -292,7 +343,7 @@ export default {
     keywordList(keyword){
       // this.$store.dispatch('saveKeyword',keyword);
       // this.$router.push({ name:'lists'})
-      let routeData = this.$router.resolve({name:'lists',params:{id:keyword}});
+      let routeData = this.$router.resolve({path:'/lists',query:{id:keyword}});
       window.open(routeData.href, '_blank');
     },
 

pages/header/index.vue

@@ -242,12 +242,10 @@ export default {
     searchData(val){
         if(val!=""){
             this.$store.dispatch('saveSearchVal',val);
-            this.$router.push({ name:'lists'})
+            this.$router.push({ path:'/lists',query:{id:'search'}})
         }else{
             this.$Message.warning('请输入搜索内容！')
         }
-        
-        
     },
     getId(){
         if(this.$route.name=="content"){

pages/lists/index.vue

@@ -62,64 +62,43 @@ export default {
             // keyword:this.$store.getters.keyword,
         }
     },
-    async asyncData () { 
+    async asyncData ({query}) { 
         let params={
-            "page": this.pageNation.page, 
-            "rows": this.pageNation.rows,
-            "reqdata":{}
-        }
-        let fun=''
-        if(this.fromSearch){
-            params.reqdata.title=this.searchVal
-            fun=search
-            // search(params).then(res=>{
-            //     if(res.status==100){
-            //         this.listData=res.list;
-            //         this.total=res.totalrecords
-            //         this.pageNation.page=res.currpage;
-            //     }
-            // })
-        }else if(['focus','recommend'].includes(this.id)){
-            params.reqdata.type=this.id
-            fun=listFocusInfo
-            // listFocusInfo(params).then(res=>{
-            //     if(res.status==100){
-            //         this.listData=res.list;
-            //         this.total=res.totalrecords
-            //         this.pageNation.page=res.currpage;
-            //     }
-            // });
-        }else if(parseInt(this.id)){
-            params.reqdata.columnId=parseInt(this.id)
-            fun=getColumnInfoList
-            // getColumnInfoList(params).then(res=>{
-            //     if(res.status==100){
-            //         this.listData=res.list;
-            //         this.total=res.totalrecords
-            //         this.pageNation.page=res.currpage;
-            //     }
-                
-            // });
-        }else{
-            params.reqdata.keyword=this.id;
-            fun=listKeywordInfo
-            // listKeywordInfo(params).then(res=>{
-            //     if(res.status==100){
-            //         this.listData=res.list;
-            //         this.total=res.totalrecords
-            //         this.pageNation.page=res.currpage;
-            //     }
-            // })
-        }
-        let [] = await Promise.all([
-            fun({params}),
+                "page": 1, 
+                "rows": 20,
+                "reqdata":{}
+            }
+        let fun='';
+            if(query.id=='search'){
+                params.reqdata.title=this.searchVal
+                fun=search;
+            }else if(['focus','recommend'].includes(query.id)){
+                params.reqdata.type=this.id;
+                fun=listFocusInfo;
+            }else if(parseInt(query.id)){
+                params.reqdata.columnId=parseInt(query.id);
+                fun=getColumnInfoList;
+            }else{
+                params.reqdata.keyword=query.id;
+                fun=listKeywordInfo;
+            }
+        let [dataObj,imgObj] = await Promise.all([
+            fun(params),
             getColumnAd({ "reqdata": { "adPosition": "column" }})
-        ])
+        ]);
+        let page=dataObj.currpage;
+        return{
+            listData:dataObj.list,
+            total:dataObj.totalrecords,
+            pageNation:{page},
+            imgPath:imgObj.object?imgObj.object.adimg:'',
+            imgTo:imgObj.object?imgObj.object.adurl:''
+        }
     },
     mounted(){
         this.id=this.$route.query.id;
         console.log(this.id,'this.id')
-        this.getData();
+        // this.getData();
         Bus.$emit("columnId", this.id);
     },
     computed:{
@@ -197,17 +176,6 @@ export default {
                     }
                 })
             }
-            
-            this.getAd()
-        },
-        getAd(){
-            getColumnAd({ "reqdata": { "adPosition": "column" }}).then(res=>{
-                if(res.list){
-                    this.imgPath=res.object.adimg;
-                    this.imgTo=res.object.adurl;
-                }
-                
-            })
         },
         pageChange(page){
             this.pageNation.page=page;

plugins/plugins.js

@@ -1,8 +1,7 @@
 import Vue from 'vue'
 import VueAwesomeSwiper from 'vue-awesome-swiper'
 import VueQr from 'vue-qr'
-
-Vue.use(VueQr)
+Vue.use(VueQr);
 Vue.use(VueAwesomeSwiper);
 
 

plugins/vueqr.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueQr from 'vue-qr'
+
+Vue.use(VueQr);

static/dm/about_en.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="agreement">
+    <!--<div class="b" style="margin-bottom:0.5rem ">About us</div>-->
+
+    <p>ASEAN TOP(App) is a comprehensive electronic information service platform which is founded by Guangxi Zhongxin Wenchuang Internet Media Co., Ltd. and proudly cooperated with related organizations and governmental departments of ASEAN countries. ASEAN TOP actively takes part in the construction of China-ASEAN information harbor and "The Belt and Road". The launching ceremony of the first on-line trial program is holding on Jan 16th, 2018 in Phnom Penh, Cambodia.
+    </p>
+    <p>With the increasing popularization and application of the Internet, ASEAN Top is making efforts to become a significant Internet portal of China-ASEAN Information Harbor, aiming at breaking information barrier and eliminating digital division. ASEAN TOP timely shares information about economics&finance, education&technology, health&hygiene and warning of natural disaster, letting the information harbor construction benefit people from both ASEAN nations and China.
+    </p>
+    <p>ASEAN Top(App) supports IOS and Android system, containing service of news, we-media, film&television, tourism, online games, e-commerce and mobile payment. ASEAN Top supports numerous languages, such as Chinese, English, Khmer, Vietnamese and Thai etc. We offer various service and the most convenient online service of mobile phone to people from ASEAN nations, China and others countries.
+    </p>
+    <p>The construction period of ASEAN TOP electronic information platform project is 3 years (May 2016-May 2019). By the completion of the project construction, it will cover 1 billion people in China, ASEAN countries and other countries as an excellent platform to "Understand China, Connect with ASEAN, Join the World".
+    </p>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'home',
+    props:[],
+    components: {
+
+    },
+    data () {
+      return {
+
+      }
+    },
+    watch:{
+
+    },
+    mounted(){
+      document.title = 'About us';
+    },
+    activated () {
+
+    },
+    methods:{
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+
+</style>
+<style lang="less" scoped>
+  body{
+    background-color: white;
+  }
+
+  .agreement{
+    background-color: white;
+    font-size: 0.65rem;
+    padding: 0.5rem;
+    p{
+      margin-bottom: 0.5rem;
+      line-height: 1.1rem;
+      /*text-indent:1.3rem;*/
+      /*text-align: justify;*/
+    }
+    .b{
+      font-weight: bold;
+      font-size: 0.8rem;
+    }
+    .title{
+      text-align: center;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+</style>

store/getters.js

@@ -0,0 +1,6 @@
+const getters = {
+    columnId: state => state.contentStore.columnId,
+    searchVal: state => state.listsStore.searchVal,
+    keyword: state => state.listsStore.keyword,
+}
+export default getters

store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import getters from './getters'
+import contentStore from './modules/content'
+import listsStore from './modules/lists'
+Vue.use(Vuex)
+
+const store = () => new Vuex.Store({
+    modules: {
+        contentStore,
+        listsStore
+    },
+    getters
+})
+export default store

store/modules/content.js

@@ -0,0 +1,17 @@
+const contentStore = {
+    state: {
+        columnId: '111111111111111'
+    },
+    mutations: {
+        setColumnId: (state, columnId) => {
+            state.columnId = columnId,
+                console.log(columnId, state.columnId, 'columnId/state')
+        }
+    },
+    // actions: {
+    //     saveColumnId: ({ commit, state }, columnId) => { 
+    //         commit('setColumnId', columnId)
+    //     }
+    // }
+}
+export default contentStore;

store/modules/lists.js

@@ -0,0 +1,23 @@
+const listsStore = {
+    state: {
+        searchVal: '',
+        keyword:''
+    },
+    mutations: {
+        setSearchVal: (state, searchVal) => {
+            state.searchVal = searchVal
+        },
+        setKeyword: (state, keyword) => {
+            state.keyword = keyword
+        },
+    },
+    actions: {
+        saveSearchVal: ({ commit, state }, searchVal) => { 
+            commit('setSearchVal', searchVal)
+        },
+        saveKeyword: ({ commit, state }, keyword) => {
+            commit('setKeyword', keyword)
+        },
+    }
+}
+export default listsStore;