pointsMall/src/views/HomeView/Index.vue

<template>
    <div class="timeline-container">
        <div class="timeline-content">
            <div class="timeline-entry-list">
                <div class="hot-list-wrap">
                    <el-empty :image-size="200" v-if="bannerList.length < 1"></el-empty>
                    <el-carousel arrow="never" indicator-position="none" height="207px" :interval="5000" v-if="bannerList.length > 0">
                        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                            <!-- <router-link to="/productTrials"> -->
                                <img style="width: 100%; height: 100%" :src="item.url" />
                            <!-- </router-link> -->
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="entry-list-container">
                    <div class="tab-header">
                        <span class="tab-title">最新通知</span>
                    </div>
                    <el-empty v-if="dataList.length==0" :image-size="200"></el-empty>
                    <div v-else class="entry-list">
                        <div v-for="(item,index) in dataList" :key="index" @click="handleClickMag(item.msgId)" class="list-item">
                            <div class="meta-container">
                                <div class="user-message">
                                        系统通知
                                </div> 
                                <div class="dividing"></div> 
                                <div class="date">{{ item.createTime }}</div>
                            </div>
                            <div class="main">
                                <div class="info-box">
                                    <div class="title">
                                        {{ item.title }}
                                    </div> 
                                    <div class="description">
                                        {{ item.subTitle }}
                                    </div>
                                </div> 
                                <img v-if="item.imgUrl" :src="item.imgUrl" :alt="item.title" class="lazy thumb">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <SiderInfo></SiderInfo>
        </div>
    </div>
</template>
<script scoped>
import { msgList } from "@/api/allApi";
import SiderInfo from '@/components/SiderInfo.vue'
export default{
  components: {
    SiderInfo
  },
  data() {
    return {
        bannerList: [
            {
                url: require('@/assets/image/banner.png')
            },
            {
                url: require('@/assets/image/banner.jpg')
            },
        ],
        dataList:[],
        page:1,
        pages:1,
    };
  },
  created(){
    this.getDataList();
  },
  methods:{
    handleClickMag(id) {
        this.$router.push({
            path: '/home/index/msgDetail',
            query: {
                id: id,
            }
        });
    },
    getDataList(){
        let data = {
            limit:10,
            page:this.page,
            type:0,
        };
        msgList(data).then(response=>{
            if(this.page==1){
                this.dataList = response.data.data.list;
                this.page = response.data.data.pageNum;
                this.pages = response.data.data.pages;
            }else{
                this.dataList = [
                    ...this.dataList,
                    ...response.data.data.list
                ]
            }
            ++this.page  
        })
    },
     // 保存滚动值，这是兼容的写法
     handleScroll () {
        if((document.documentElement.scrollTop + window.innerHeight) == document.body.offsetHeight){
            if(this.page > this.pages){
                return
            }else{
                this.getDataList();
            }
        }
    },
  },
 
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },

  destroyed () {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style scoped>
.timeline-container{
    margin: 0 auto;
}
.timeline-entry-list{
    margin-right: 17.5rem;
    border-radius: 2px;
    width: 720px;
    position: relative;
}
.entry-list-container{
    background-color: #fff;
    border-radius: 4px;
}
.entry-list-container .tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #e5e6eb;
    overflow: hidden;
}

.tab-header .tab-title {
    white-space: nowrap;
    font-size: 18px;
    font-weight: 600;
}
.entry-list{
    width: 100%;
    background-color: #fff;
    position: relative;
}
.list-item:hover {
    background: #fafafa;
}
.list-item{
    position: relative;
    cursor: pointer;
    padding: 12px 20px 0;
}
.list-item .meta-container{
    display: flex;
    align-items: center;
}
.list-item .meta-container .user-message{
    max-width: 162px;
    font-size: 13px;
    line-height: 22px;
    color: #4e5969;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
.list-item .meta-container .dividing{
    line-height: 22px;
    width: 1px;
    height: 14px;
    background: #e5e6eb;
    margin: 0 8px;
}
.list-item .meta-container .date{
    line-height: 22px;
    font-size: 13px;
    color: #86909c;
}
.list-item .main{
    margin-top: 6px;
    padding-bottom: 12px;
    display: flex;
    border-bottom: 1px solid #e5e6eb;
}
.list-item .main .info-box{
    flex-grow: 1;
}
.list-item .main .info-box .title:visited {
    color: #86909c;
}
.list-item .main .info-box .title{
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #1d2129;
    margin-bottom: 8px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.list-item .main .info-box .description{
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: #86909c;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.list-item .thumb{
    flex: 0 0 auto;
    width: 120px;
    height: 80px;
    margin-left: 24px;
    border-radius: 2px;
}
</style>