asean_nuxt/pages/lists/index.vue

<template>
    <div>
        <div class="auto lists">
            <Row>
                <Col :span="15">
                    <div class="lists-item" v-for="item in listData">
                        <nuxt-link class="img-a" :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank"><img v-lazy="picPath+item.infoimg" alt="" :key="item.infoId"></nuxt-link>
                        <div class="content-text">
                            <nuxt-link style="-webkit-box-orient: vertical;" :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">{{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="{path: '/lists', query:{id:item.parentcolumnId}}" style="-webkit-box-orient: vertical;" tag="a" target="_blank">{{item.columnname.split('—')[0]}}</nuxt-link>
                                <span>—</span>
                                <nuxt-link :to="{path: '/lists', query:{id:item.columnId}}" 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="{path: '/lists', query:{id:item.columnId}}" style="-webkit-box-orient: vertical;" tag="a" target="_blank">{{item.columnname}}/</nuxt-link>
                                <span>{{item.uptimeStr}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="page-nation">                    
                        <Page :total="total" size="small" show-elevator show-sizer show-total :page-size="pageNation.rows" :current="pageNation.page" @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
                    </div>
                </Col>
                <Col :span="1" style="height:100px"></Col>
                <Col :span="8">
                    <div>
                        <!-- <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 {getColumnInfoList,getColumnAd,search,listKeywordInfo} from '~/api/lists'
import {listFocusInfo} from '~/api/homePage'
import {formatTime} from '~/common/publicFun'
import Bus from "~/common/bus";
import { mapState } from 'vuex'
export default {
    
    data(){
        return {
            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',
            listData:[],
            pageNation:{
                "page": 1, 
                "rows": 20
            },
            total:0,
            imgPath:'',
            imgTo:'',
            id:'',
            fromSearch:false,
            // keyword:this.$store.getters.keyword,
        }
    },
    async asyncData ({query}) { 
        let params={
                "page": 1, 
                "rows": 20,
                "reqdata":{}
            }
        let fun='';
            if(query.id=='search'){
                params.reqdata.title=query.id;
                fun=search;
            }else if(['focus','recommend'].includes(query.id)){
                params.reqdata.type=query.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();
        Bus.$emit("columnId", this.id);
    },
    computed:{
        searchVal:function() {  //通过方法访问
            return this.$store.getters.searchVal;
        },
        // keyword:function() {  //关键字
        //     return this.$store.getters.keyword;
        // },
    },
    watch:{
        // $route(){
        //     if(['focus','recommend'].includes(this.$route.params.id)){
        //         this.id = this.$route.params.id
        //     }else{
        //         this.id = this.$route.params.id
        //     }
        // },
        // searchVal(){
        //     this.fromSearch=true;
        //     this.getData()
        // },
        // keyword(){
        //     this.fromSearch=false;
        //     this.id = this.keyword
        //     this.getData()
        // },
        // id() {
        //     this.fromSearch=false;
        //     this.getData()
        // },
    },
    head() {
        return {
            title: '东盟头条—聚焦东盟 关注中国 放眼世界',
            meta: [{
                name: 'keywords',
                content: '东盟头条,aseantop,柬埔寨,文莱,印尼,新加坡,越南,缅甸,菲律宾,老挝,泰国,马来西亚'
            },{
                name: 'description',
                content: '东盟头条新闻社（ASEAN TOP NEWS）旗下另一个重要媒体平台东盟头条新闻网（www.aseantop.com；www.aseantop.net）。东盟头条新闻网设有要闻聚焦、东盟动态、中国政情、环球瞭望、头条观察、高端访谈、看中国、华侨华人、文化生活等多个特色板块，网站秉持“独立、客观、公正、专业”的新闻理念，平实报道和评论东盟各国以及中国的重要动态，为各界人士提供可靠可信可读的有价值信息。'
            }],
        }
    },
    methods:{
        getData(){
            let params={
                "page": this.pageNation.page, 
                "rows": this.pageNation.rows,
                "reqdata":{}
            }
            if(this.fromSearch){
                params.reqdata.title=this.searchVal
                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
                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)
                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;
                listKeywordInfo(params).then(res=>{
                    if(res.status==100){
                        this.listData=res.list;
                        this.total=res.totalrecords
                        this.pageNation.page=res.currpage;
                    }
                })
            }
        },
        pageChange(page){
            this.pageNation.page=page;
            this.getData();
        },
        pageSizeChange(pageSize){
            this.pageNation.rows=pageSize;
            this.getData();
        },
    }
}
</script>

<style lang="scss" scoped>
.lists{
    padding-top: 15px;
    margin-bottom: 123px;
    .lists-item{
        display: inline-flex;
        padding: 19px 0;
        border-bottom: 1px solid #ccc;
        width: 100%;
        .img-a{
                width: 35%;
            img{
                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: 95px;
            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;
            }
          }
        }
    }
    .page-nation{
        height: 50px;
        line-height: 50px;
        input{
            height: 2px;
        }
    }
}
 
</style>