pointsMall/src/views/HomeView/Index.vue

<template>
    <div class="timeline-container">
        <div class="timeline-content">
            <div class="timeline-entry-list">
                <!-- <img src="@/assets/image/banner4.png" alt="banner" class="banner"> -->
                <div class="hot-list-wrap">
                    <el-empty :image-size="60" v-if="publicizeBanner.length < 1"></el-empty>
                    <el-carousel indicator-position="none" height="120px" :interval="5000" v-if="publicizeBanner.length > 0">
                        <el-carousel-item v-for="(item, index) in publicizeBanner" :key="index">
                            <router-link :to="item.remark">
                                <img style="width: 100%; height: 100%" :src="item.dictValue" class="banner" />
                            </router-link>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="hot-list-wrap">
                    <el-empty :image-size="60" v-if="activityBanner.length < 1"></el-empty>
                    <el-carousel indicator-position="none" height="120px" :interval="5000" v-if="activityBanner.length > 0">
                        <el-carousel-item v-for="(item, index) in activityBanner" :key="index">
                            <router-link :to="item.remark">
                                <img style="width: 100%; height: 100%" :src="item.dictValue" class="banner" />
                            </router-link>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!-- <div class="entry-list-container" style="margin-bottom: 20px;">
                    <div class="tab-header" style="border-bottom:none">
                        <span class="tab-title">特价商品</span>
                    </div>
                    <div class="special-goods-list">
                        <div class="special-goods-item" v-for="(item,index) in specialGoodsList" :key="index">
                            <img width="100%" :src="item.url" alt="">
                            <div class="ctrl-box">
                                <a class="label" :href="item.path">
                                    <span>{{ item.name }}</span>
                                </a>
                                <a class="status" href="/">
                                    <span>已参与</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </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">
                                    {{ item.type==2 ? '生日祝福' : '系统通知'}}
                                </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,dictList } from "@/api/allApi";
import SiderInfo from '@/components/SiderInfo.vue';
import { debounce } from '@/utils/index';
export default{
  components: {
    SiderInfo
  },
  data() {
    return {
        dataInfo:'',
        publicizeBanner:[],
        activityBanner:[],
        bannerList: [],
        specialGoodsList:[
        {
                    id:1,
                    path:'/home/pointsMall/redeem?id=20&name=goodsNotice&type=8',
                    url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
                    name:'特价商品',
                },
                {
                    id:2,
                    path:'/home/pointsMall/redeem?id=19&name=goodsNotice&type=8',
                    url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
                    name:'限时商品',
                },
                {
                    id:3,
                    path:'/home/pointsMall/redeem?id=18&name=goodsNotice&type=8',
                    url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
                    name:'团购商品',
                },
        ],
        dataList:[],
        page:1,
        pages:1,
    };
  },
 created(){
    this.getDataList();
    this.getBannerList();
  },
  methods:{
    getBannerList(){
            dictList({dictType:'publicize_banner'}).then(response=>{
                this.publicizeBanner = response.data.data; 
            })
            dictList({dictType:'activity_banner'}).then(response=>{
                this.activityBanner = response.data.data; 
            })
        },
    handleClickMag(id) {
        this.$router.push({
            path: '/home/index/msgDetail',
            query: {
                id: id,
            }
        });
    },
    getDataList(){
        let data = {
            limit:10,
            page:this.page,
            type:'0,2',
        };
        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 () {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        //滚动条到底部的条件
        console.log("距顶部---"+scrollTop+"可视区高度---"+windowHeight+"滚动条总高度---"+scrollHeight);
        if(scrollHeight - (scrollTop+windowHeight) < 1){
            if(this.page > this.pages){
                return
            }else{
                this.getDataList();
            }
        }
    },
  },
 
  mounted () {
    window.addEventListener('scroll', debounce(this.handleScroll,500));
  },

  destroyed () {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener('scroll', this.handleScroll);
  }
}
</script>
<style scoped>
.banner {
    width: 100%;
    height: 100px;
    background-color: #2c82fe;
    border-radius: 4px;
    margin-bottom: 15px;
    display: block;
}
.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;
}
.special-goods-list{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.special-goods-list .special-goods-item{
    position: relative;
    /* padding: 0 6px; */
    width: 230px;
    height: 169px;
    min-width: 0;
}
.special-goods-item .ctrl-box .label{
    position: absolute;
    left: 20px;
    top: 40px;
    line-height: 32px;
    height: 32px;
    width: 100px;
    text-align: center;
    font-size: 16px;
    z-index: 1;
    color: black;
    background-color: #fff;
    border: 1px solid #fff;
    /* border-radius: 6px; */
    font-weight: 800;
    
}
.special-goods-item .ctrl-box .status{
    position: absolute;
    left: 20px;
    top: 70px;
    line-height: 32px;
    height: 32px;
    width: 100px;
    text-align: center;
    font-size: 16px;
    z-index: 1;
    color: #fff;
    background-color: rgba(0, 0, 0, .2);
    border: 1px solid #fff;
    border-radius: 6px;
    font-weight: 300;
}
/* .special-goods-item .ctrl-box .label:hover {
    background-color: rgba(0, 0, 0, .4);
}
.special-goods-item .ctrl-box .status:hover {
    background-color: rgba(0, 0, 0, .4);
} */
</style>