dev/dcp-web-gate/src_old/views/conferenceServices/modelView/news.vue

<template>
  <div>
      <ul class="conference-news-list">
        <template v-for="(newItem, n) in newsData">
            <li :key="n" @click="toView('NewsDetail', newItem.id)" v-if="newItem.languageType == $i18n.locale">
                <p>{{lang=='en'? newItem.titleEn: newItem.title}}</p>
                <span>{{formatDate(newItem.createDate)}}</span>
            </li>
            </template>
        </ul>
         <div class="pagination">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                layout=" prev, pager, next"
                :total="$i18n.locale=='en'? newsNumEn: newsNumZh">
            </el-pagination>
        </div>
  </div>
</template>

<script>
import { getConfrenceDetail } from "@/api/meeting/meetingOutInfo";
export default {
    data(){
        return {
            newsData: [],
            originalData: [],
            pageSize: 10,
            lang: '',
            newsNumEn: 0,
            newsNumZh: 0,
        }
    },
    created(){
        this.lang = this.$i18n.locale;
    },
    watch: {
        '$i18n.locale'(val){
            this.lang = val;
        }
    },
    mounted(){
        getConfrenceDetail(this.$route.query.key).then((res) => {
            this.originalData = res.data.meetingOutInfo.news;
            this.newsData = this.originalData.slice(0, this.pageSize);
            this.newsNumEn = 0;
            this.newsNumZh = 0;
            this.originalData.forEach(item=>{
                if(item.languageType=='en'){
                    this.newsNumEn++
                }else if(item.languageType=='zh'){
                    this.newsNumZh++
                }
            })
            
            console.log('新闻',this.newsData)
        });
    },
    methods: {
        toView(router, json) {
            this.$router.push({ path: router, query: { key: json } });
        },
        handleCurrentChange(p){
            this.newsData = this.originalData.slice((p-1)*this.pageSize, p*this.pageSize)
        }
    }
}
</script>

<style scoped>
.conference-news-list {
  padding: 0 20px;
  font-size: 16px;
  color: #666;
}
.conference-news-list li {
  cursor: pointer;
  display: flex;
  border-bottom: 1px solid #999;
  padding: 16px 0;
}
.conference-news-list li p {
  line-height: 28px;
  margin: 0;
  flex: 1;
  margin-right: 20px;
}
.conference-news-list li:hover > p{
  color: #dd511b;
}
.conference-news-list li span {
  color: #666;
  font-size: 16px;
  display: inline-block;
  padding-bottom: 10px;
  width: 100px;
  text-align: right;
}
.pagination{
    text-align: center;
    margin-top: 40px;
}
</style>