Skip to content

C
campSite
Commit 175e252f authored by wuwangwolihui's avatar wuwangwolihui
Browse files
Options

营地2.0-修改

parent 9ab0e461
Hide whitespace changes
Inline Side-by-side
Showing with 146 additions and 73 deletions
src/views/base/active/Active.vue
View file @ 175e252f
......@@ -78,46 +78,59 @@
</div>
</div>
<div class="active-list" v-if="showActiveList.length>0">
<div class="active-list-item" v-for="(item, index) in showActiveList" :key="index"
:style="animationTime(index)">
<div class="inner">
<div class="active-list-item-bg">
<el-image :src="item.activityCover" fit="cover"></el-image>
</div>
<div class="active-list-item-cont">
<div class="active-list-item-cont-header">
<div class="label" v-if="item.activityLabel">
<template v-if="activeList.length>0">
<div class="active-list">
<div class="active-list-item" v-for="(item, index) in activeList" :key="index"
:style="animationTime(index)">
<div class="inner">
<div class="active-list-item-bg">
<el-image :src="item.activityCover" fit="cover"></el-image>
</div>
<div class="active-list-item-cont">
<div class="active-list-item-cont-header">
<div class="label" v-if="item.activityLabel">
<span v-for="(item2, index2) in item.activityLabel.split(',')"
:key="index2">{{item2}}</span>
</div>
<div class="title">{{item.name}}</div>
</div>
<div class="active-list-item-cont-txt1">
<div class="sign-box" v-if="item.schoolName">
<div class="sign"
v-for="(item2, index2) in item.schoolName.split(',')"
:key="index2">{{item2}}
</div>
<div class="title">{{item.name}}</div>
</div>
<div class="sign-box" v-if="item.subjectName">
<div class="sign"
v-for="(item2, index2) in item.subjectName.split(',')"
:key="index2">{{item2}}
<div class="active-list-item-cont-txt1">
<div class="sign-box" v-if="item.schoolName">
<div class="sign"
v-for="(item2, index2) in item.schoolName.split(',')"
:key="index2">{{item2}}
</div>
</div>
<div class="sign-box" v-if="item.subjectName">
<div class="sign"
v-for="(item2, index2) in item.subjectName.split(',')"
:key="index2">{{item2}}
</div>
</div>
</div>
<div class="active-list-item-cont-txt2">{{formatYMD(item.activityStartTime)}} （共{{item.activityTime}}天）
</div>
<div class="active-list-item-cont-txt3">报名截止时间：{{formatYMDChina(item.bmEndTime)}}</div>
</div>
<div class="active-list-item-cont-txt2">{{formatYMD(item.activityStartTime)}} （共{{item.activityTime}}天）
<div class="active-list-item-bottom" @click="$router.push('/active/'+item.id)">
<div>查看详情</div>
<i class="el-icon-right"></i>
</div>
<div class="active-list-item-cont-txt3">报名截止时间：{{formatYMDChina(item.bmEndTime)}}</div>
</div>
<div class="active-list-item-bottom" @click="$router.push('/active/'+item.id)">
<div>查看详情</div>
<i class="el-icon-right"></i>
</div>
</div>
</div>
</div>
<div class="pagination-area">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="queryForm.pageNum"
:page-size="queryForm.pageSize"
layout="total, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<div class="active-list" v-else>
<el-empty description="暂无数据" style="margin: 0 auto;"></el-empty>
</div>
......@@ -138,13 +151,16 @@
isSupport: null,
minDay: null,
maxDay: null,
pageNum: 1,
pageSize: 32,
},
total: 0,
labelList: [],
activeList: [],// 通过后台数据得到的所有数据
showActiveList: [],// 前端页面需要渲染的数据
pageSize: 8, //渲染数据的多少根据实际情况设置
baseSize: 8,// 渲染基础页数
totall: 0, //总数据量
// showActiveList: [],// 前端页面需要渲染的数据
// pageSize: 8, //渲染数据的多少根据实际情况设置
// baseSize: 8,// 渲染基础页数
// totall: 0, //总数据量
statusList: [
{
......@@ -203,57 +219,70 @@
}
}
},
mounted() {
window.addEventListener('scroll', this.dataScroll, true)
},
destroyed() {
window.removeEventListener('scroll', this.dataScroll, true)
},
// mounted() {
// window.addEventListener('scroll', this.dataScroll, true)
// },
// destroyed() {
// window.removeEventListener('scroll', this.dataScroll, true)
// },
methods: {
// // 页面滚动获取数据
// scrollLoadData() {
// //获取滚动条的高度
// let scrollTop = document.documentElement.scrollTop;
// // 获取视口高度
// let windowHeight = window.innerHeight;
// //获取页面内容总高度
// let scrollHeight = document.querySelector('.active-container').scrollHeight;
// // 滚动到指定位置 并且当前显示的数量小于总数
// if ((scrollTop + windowHeight + 100 >= scrollHeight) && (this.pageSize < this.activeList.length)) {
// this.pageSize += this.baseSize;
// this.loadData()
// }
// },
// // 页面滚动方法
// dataScroll() {
// //防抖函数
// this.debounce(this.scrollLoadData, 100)
// },
// // 处理列表渲染数据
// loadData() {
// for (let i = (this.pageSize - this.baseSize); i < this.pageSize; i++) {
// if (this.totall >= this.activeList.length) {
// return false;
// }
// this.showActiveList.push(this.activeList[i]);
// this.totall++;
// }
// },
// 卡片出现的动画时间
animationTime(index) {
let time = 0;
time = index - (this.pageSize / this.baseSize - 1) * this.baseSize + 1;
time = index + 1
// time = index - (this.pageSize / this.baseSize - 1) * this.baseSize + 1;
return {
'-webkit-animation-delay': time * 0.1 + 's',
'imation-delay': time * 0.1 + 's',
}
},
// 页面滚动获取数据
scrollLoadData() {
//获取滚动条的高度
let scrollTop = document.documentElement.scrollTop;
// 获取视口高度
let windowHeight = window.innerHeight;
//获取页面内容总高度
let scrollHeight = document.querySelector('.active-container').scrollHeight;
// 滚动到指定位置 并且当前显示的数量小于总数
if ((scrollTop + windowHeight + 100 >= scrollHeight) && (this.pageSize < this.activeList.length)) {
this.pageSize += this.baseSize;
this.loadData()
}
// 分页-改变每页数量
handleSizeChange(val) {
this.queryForm.pageSize = val;
this.getList(true);
},
// 页面滚动方法
dataScroll() {
//防抖函数
this.debounce(this.scrollLoadData, 100)
},
// 处理列表渲染数据
loadData() {
for (let i = (this.pageSize - this.baseSize); i < this.pageSize; i++) {
if (this.totall >= this.activeList.length) {
return false;
}
this.showActiveList.push(this.activeList[i]);
this.totall++;
}
// 分页-改变页数
handleCurrentChange(val) {
this.queryForm.pageNum = val;
this.getList(true);
},
// 获取列表
getList() {
getList(type = false) {
if (this.loading) {
return false;
}
this.loading = true;
this.activeList = [];
let queryForm = JSON.parse(JSON.stringify(this.queryForm));
// 全选项 置空传值
let flag = true;
......@@ -272,8 +301,12 @@
return this.$message.error(res.data.msg);
}
this.loading = false;
this.activeList = res.data.data;
this.loadData()
this.total = res.data.data.total;
this.activeList = res.data.data.list;
if (type) {
document.body.scrollIntoView(true);
}
// this.loadData()
}).catch(err => {
console.log(err)
this.loading = false;
......@@ -309,15 +342,18 @@
},
// 重置按钮
resetHandle() {
this.pageSize = 8;
this.totall = 0;
this.showActiveList = [];
// this.pageSize = 8;
// this.totall = 0;
// this.showActiveList = [];
this.total = 0;
this.queryForm = {
ids: {},
activityStatus: null,
isSupport: null,
minDay: null,
maxDay: null,
pageNum: 1,
pageSize: 32,
};
for (let key in this.selectIds) {
this.selectIds[key] = [];
......@@ -502,5 +538,42 @@
::v-deep .el-loading-spinner {
top: 200px !important;
}
.pagination-area {
text-align: right;
padding: 20px 0 0;
::v-deep .el-pagination {
.el-pager .number {
&:hover {
color: var(--all_color);
}
&.active {
color: #ffffff;
background-color: var(--all_color);
}
}
.el-input__inner {
&:focus {
border-color: var(--all_color);
}
}
.btn-prev,
.btn-next {
&:hover {
color: var(--all_color);
}
&:disabled {
color: #C0C4CC;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment