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 @@ ...@@ -78,46 +78,59 @@
</div> </div>
</div> </div>
<div class="active-list" v-if="showActiveList.length>0"> <template v-if="activeList.length>0">
<div class="active-list-item" v-for="(item, index) in showActiveList" :key="index" <div class="active-list">
:style="animationTime(index)"> <div class="active-list-item" v-for="(item, index) in activeList" :key="index"
<div class="inner"> :style="animationTime(index)">
<div class="active-list-item-bg"> <div class="inner">
<el-image :src="item.activityCover" fit="cover"></el-image> <div class="active-list-item-bg">
</div> <el-image :src="item.activityCover" fit="cover"></el-image>
<div class="active-list-item-cont"> </div>
<div class="active-list-item-cont-header"> <div class="active-list-item-cont">
<div class="label" v-if="item.activityLabel"> <div class="active-list-item-cont-header">
<div class="label" v-if="item.activityLabel">
<span v-for="(item2, index2) in item.activityLabel.split(',')" <span v-for="(item2, index2) in item.activityLabel.split(',')"
:key="index2">{{item2}}</span> :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>
<div class="title">{{item.name}}</div>
</div> </div>
<div class="sign-box" v-if="item.subjectName"> <div class="active-list-item-cont-txt1">
<div class="sign" <div class="sign-box" v-if="item.schoolName">
v-for="(item2, index2) in item.subjectName.split(',')" <div class="sign"
:key="index2">{{item2}} 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> </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>
<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>
<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> </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> <div class="active-list" v-else>
<el-empty description="暂无数据" style="margin: 0 auto;"></el-empty> <el-empty description="暂无数据" style="margin: 0 auto;"></el-empty>
</div> </div>
...@@ -138,13 +151,16 @@ ...@@ -138,13 +151,16 @@
isSupport: null, isSupport: null,
minDay: null, minDay: null,
maxDay: null, maxDay: null,
pageNum: 1,
pageSize: 32,
}, },
total: 0,
labelList: [], labelList: [],
activeList: [],// 通过后台数据得到的所有数据 activeList: [],// 通过后台数据得到的所有数据
showActiveList: [],// 前端页面需要渲染的数据 // showActiveList: [],// 前端页面需要渲染的数据
pageSize: 8, //渲染数据的多少根据实际情况设置 // pageSize: 8, //渲染数据的多少根据实际情况设置
baseSize: 8,// 渲染基础页数 // baseSize: 8,// 渲染基础页数
totall: 0, //总数据量 // totall: 0, //总数据量
statusList: [ statusList: [
{ {
...@@ -203,57 +219,70 @@ ...@@ -203,57 +219,70 @@
} }
} }
}, },
mounted() { // mounted() {
window.addEventListener('scroll', this.dataScroll, true) // window.addEventListener('scroll', this.dataScroll, true)
}, // },
destroyed() { // destroyed() {
window.removeEventListener('scroll', this.dataScroll, true) // window.removeEventListener('scroll', this.dataScroll, true)
}, // },
methods: { 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) { animationTime(index) {
let time = 0; 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 { return {
'-webkit-animation-delay': time * 0.1 + 's', '-webkit-animation-delay': time * 0.1 + 's',
'imation-delay': time * 0.1 + 's', 'imation-delay': time * 0.1 + 's',
} }
}, },
// 页面滚动获取数据 // 分页-改变每页数量
scrollLoadData() { handleSizeChange(val) {
//获取滚动条的高度 this.queryForm.pageSize = val;
let scrollTop = document.documentElement.scrollTop; this.getList(true);
// 获取视口高度
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() { handleCurrentChange(val) {
//防抖函数 this.queryForm.pageNum = val;
this.debounce(this.scrollLoadData, 100) this.getList(true);
},
// 处理列表渲染数据
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++;
}
}, },
// 获取列表 // 获取列表
getList() { getList(type = false) {
if (this.loading) { if (this.loading) {
return false; return false;
} }
this.loading = true; this.loading = true;
this.activeList = [];
let queryForm = JSON.parse(JSON.stringify(this.queryForm)); let queryForm = JSON.parse(JSON.stringify(this.queryForm));
// 全选项 置空传值 // 全选项 置空传值
let flag = true; let flag = true;
...@@ -272,8 +301,12 @@ ...@@ -272,8 +301,12 @@
return this.$message.error(res.data.msg); return this.$message.error(res.data.msg);
} }
this.loading = false; this.loading = false;
this.activeList = res.data.data; this.total = res.data.data.total;
this.loadData() this.activeList = res.data.data.list;
if (type) {
document.body.scrollIntoView(true);
}
// this.loadData()
}).catch(err => { }).catch(err => {
console.log(err) console.log(err)
this.loading = false; this.loading = false;
...@@ -309,15 +342,18 @@ ...@@ -309,15 +342,18 @@
}, },
// 重置按钮 // 重置按钮
resetHandle() { resetHandle() {
this.pageSize = 8; // this.pageSize = 8;
this.totall = 0; // this.totall = 0;
this.showActiveList = []; // this.showActiveList = [];
this.total = 0;
this.queryForm = { this.queryForm = {
ids: {}, ids: {},
activityStatus: null, activityStatus: null,
isSupport: null, isSupport: null,
minDay: null, minDay: null,
maxDay: null, maxDay: null,
pageNum: 1,
pageSize: 32,
}; };
for (let key in this.selectIds) { for (let key in this.selectIds) {
this.selectIds[key] = []; this.selectIds[key] = [];
...@@ -502,5 +538,42 @@ ...@@ -502,5 +538,42 @@
::v-deep .el-loading-spinner { ::v-deep .el-loading-spinner {
top: 200px !important; 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> </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