Skip to content

C
campSite
Commit 402f8751 authored by wuwangwolihui's avatar wuwangwolihui
Browse files
Options

营地2.0-整合修改

parent 8a9794ef
Hide whitespace changes
Inline Side-by-side
Showing with 249 additions and 92 deletions
src/views/base/Index.vue
View file @ 402f8751
<template>
<el-container>
<el-container id="baseId">
<el-header height="80px">
<Header :typeFu="1"></Header>
</el-header>
......@@ -35,7 +35,6 @@
};
},
created() {
console.log('created');
},
mounted() {
window.addEventListener('scroll', this.handleScrollY, true);
......
src/views/base/active/Active.vue
View file @ 402f8751
......@@ -61,12 +61,9 @@
</div>
</div>
<div class="active-list" v-if="activeList.length>0"left-area>
<div class="active-list-item" v-for="(item, index) in activeList" :key="index"
:style="{
'-webkit-animation-delay': (index+1)*0.1+'s',
'imation-delay': (index+1)*0.1+'s',
}">
<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>
......@@ -94,7 +91,8 @@
</div>
</div>
</div>
<div class="active-list-item-cont-txt2">{{formatYMD(item.activityStartTime)}} （共{{item.activityTime}}天）</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 class="active-list-item-cont-bottom" @click="$router.push('/active/'+item.id)">
<div>查看详情</div>
......@@ -125,7 +123,12 @@
maxDay: null,
},
labelList: [],
activeList: [],
activeList: [],// 通过后台数据得到的所有数据
showActiveList: [],// 前端页面需要渲染的数据
pageSize: 6, //渲染数据的多少根据实际情况设置
baseSize: 6,// 渲染基础页数
totall: 0, //总数据量
supportList: [
{
lableId: 2,
......@@ -146,60 +149,63 @@
this.getLabelType();
this.getList();
},
methods: {
// 确定按钮
searchHandle() {
this.getList();
},
// 重置按钮
resetHandle() {
this.queryForm = {
ids: {},
isSupport: null,
minDay: null,
maxDay: null,
};
for (let key in this.selectIds) {
this.selectIds[key] = [];
computed: {
// 防抖
debounce() {
let timer = ''
return function (func, wait) {
let context = this;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func.apply(context);
}, wait)
}
for (let key in this.checkAll) {
this.checkAll[key] = false;
}
},
mounted() {
window.addEventListener('scroll', this.dataScroll, true)
},
destroyed() {
window.removeEventListener('scroll', this.dataScroll, true)
},
methods: {
// 卡片出现的动画时间
animationTime(index) {
let time = 0;
time = index - (this.pageSize / this.baseSize - 1) * this.baseSize + 1;
return {
'-webkit-animation-delay': time * 0.1 + 's',
'imation-delay': time * 0.1 + 's',
}
this.isSupport = [];
this.checkAllSupp = false;
console.log(this.checkAll)
this.getList();
},
// 全部-标签操作
handleCheckAllChange(val, type = 1, list = [], idx = 0) {
let lableIdArr = list.map(item => item.lableId);
let arr = val ? lableIdArr : [];
if (type == 1) {
this.selectIds[idx] = arr;
if (arr.length > 0) {
this.queryForm.ids[idx] = arr;
} else {
delete this.queryForm.ids[idx]
}
} else {
this.isSupport = arr;
this.queryForm.isSupport = arr.join(',');
// 页面滚动获取数据
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.baseSize;
this.loadData()
}
},
// 单个-标签操作
handleCheckedItemChange(val, type = 1, list = [], idx = 0) {
let lableIdArr = list.map(item => item.lableId);
let checkedCount = val.length;
if (type == 1) {
this.checkAll[idx] = checkedCount === lableIdArr.length;
if (checkedCount > 0) {
this.queryForm.ids[idx] = val;
} else {
delete this.queryForm.ids[idx]
// 页面滚动方法
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;
}
} else {
this.checkAllSupp = checkedCount === lableIdArr.length;
this.queryForm.isSupport = val.join(',');
this.showActiveList.push(this.activeList[i]);
this.totall++;
}
},
// 获取列表
......@@ -226,6 +232,7 @@
}
this.loading = false;
this.activeList = res.data.data;
this.loadData()
}).catch(err => {
console.log(err)
this.loading = false;
......@@ -251,7 +258,62 @@
}).catch(err => {
console.log(err)
})
}
},
// 确定按钮
searchHandle() {
this.getList();
},
// 重置按钮
resetHandle() {
this.queryForm = {
ids: {},
isSupport: null,
minDay: null,
maxDay: null,
};
for (let key in this.selectIds) {
this.selectIds[key] = [];
}
for (let key in this.checkAll) {
this.checkAll[key] = false;
}
this.isSupport = [];
this.checkAllSupp = false;
console.log(this.checkAll)
this.getList();
},
// 全部-标签操作
handleCheckAllChange(val, type = 1, list = [], idx = 0) {
let lableIdArr = list.map(item => item.lableId);
let arr = val ? lableIdArr : [];
if (type == 1) {
this.selectIds[idx] = arr;
if (arr.length > 0) {
this.queryForm.ids[idx] = arr;
} else {
delete this.queryForm.ids[idx]
}
} else {
this.isSupport = arr;
this.queryForm.isSupport = arr.join(',');
}
},
// 单个-标签操作
handleCheckedItemChange(val, type = 1, list = [], idx = 0) {
let lableIdArr = list.map(item => item.lableId);
let checkedCount = val.length;
if (type == 1) {
this.checkAll[idx] = checkedCount === lableIdArr.length;
if (checkedCount > 0) {
this.queryForm.ids[idx] = val;
} else {
delete this.queryForm.ids[idx]
}
} else {
this.checkAllSupp = checkedCount === lableIdArr.length;
this.queryForm.isSupport = val.join(',');
}
},
}
}
</script>
......@@ -259,6 +321,7 @@
<style lang="scss" scoped>
@import "a/scss/common";
@import "a/scss/active/activeList";
.active-container {
padding: 50px;
color: #333333;
......
src/views/base/active/ActiveInfo.vue
View file @ 402f8751
......@@ -56,20 +56,22 @@
</div>
</div>
<div class="active-area">
<div class="left-area card-box">
<ul v-if="activeContent==1 && anchorList.length>0">
<li v-for="(item,index) in anchorList" :key="index">
<a @click="anchorSkip(item.id)">{{item.name}}</a>
</li>
</ul>
<ul v-else-if="activeContent==2 && anchorList2.length>0">
<li v-for="(item,index) in anchorList2" :key="index">
<a @click="anchorSkip(item.id)">{{item.name}}</a>
</li>
</ul>
<ul v-else>
<li>暂无锚点</li>
</ul>
<div class="left-area card-box" ref="left-area">
<div class="left-area-box" :style="leftAreaBoxStyle">
<ul v-if="activeContent==1 && anchorList.length>0">
<li v-for="(item,index) in anchorList" :key="index">
<a @click="anchorSkip(item.id)">{{item.name}}</a>
</li>
</ul>
<ul v-else-if="activeContent==2 && anchorList2.length>0">
<li v-for="(item,index) in anchorList2" :key="index">
<a @click="anchorSkip(item.id)">{{item.name}}</a>
</li>
</ul>
<ul v-else>
<li>暂无锚点</li>
</ul>
</div>
</div>
<div class="center-area card-box" :style="{
'min-height':minHeight+'px'
......@@ -204,6 +206,7 @@
anchorList2: [],
activeContent: 1,
minHeight: '339',
leftAreaBoxStyle: {}
}
},
created() {
......@@ -213,12 +216,53 @@
}
this.getInfo()
},
mounted() {
window.addEventListener('scroll', this.handleScrollY, true);
},
destroyed() {
window.removeEventListener('scroll', this.handleScrollY, true);
},
methods: {
handleScrollY() {
// active-area距离顶部的高度
let activeAreaToTop = document.querySelector('.active-area').offsetTop;
// left-area的宽度
let leftAreaWidth = document.querySelector('.left-area').offsetWidth;
// footer的高度
let footerHeight = document.querySelector('.footer').offsetHeight;
// 页面滚动高度
let scrollTop = document.documentElement.scrollTop;
// left-area-box的高度
let Height = document.querySelector('.left-area-box').offsetHeight;
// active-info-container的高度
let contentHeight = document.querySelector('.active-info-container').offsetHeight;
// body的高度
let bodyHeight = document.body.offsetHeight;
if (scrollTop >= (activeAreaToTop - 20)) {
if (scrollTop >= (contentHeight - bodyHeight + 180) &&
bodyHeight <= (footerHeight + Height + 80)) {
this.leftAreaBoxStyle = {
position: 'absolute',
bottom: '0px',
width: leftAreaWidth + 'px',
}
return false;
}
this.leftAreaBoxStyle = {
position: 'fixed',
top: '100px',
width: leftAreaWidth + 'px',
}
} else {
this.leftAreaBoxStyle = {}
}
},
// 立即报名按钮
signUp() {
let allToken = window.localStorage.getItem('index-token-all');
if (allToken) {
this.$store.commit('setIndexIdentity',this.activeInfo.identity)
this.$store.commit('setIndexIdentity', this.activeInfo.identity)
this.$router.push('/signUp/examInfo?code=' + this.activeInfo.identity);
} else {
this.$router.push('/baseLogin');
......@@ -241,7 +285,7 @@
},
// 分离获取html中的锚点
getAnchor(content) {
if(!content) return [];
if (!content) return [];
let attrAndValueArr = content.match(/<a id=\"(.*?)\"><\/a>/g);
let valueArr = [] // 放所有该属性的值
let anchorList = [];
......@@ -466,12 +510,19 @@
flex-flow: row;
align-items: self-start;
justify-content: space-between;
position: relative;
.left-area {
flex: 1;
min-width: 200px;
.left-area-box {
border-radius: 4px;
background-color: #ffffff;
}
ul {
margin: 0;
padding: 20px 10px;
}
......
src/views/index/recruit/Index.vue
View file @ 402f8751
<template>
<el-container>
<el-header height="104px">
<el-header height="118px">
<Header :typeFu="2"></Header>
<div class="notify flex" v-if="$store.state.isDisplay_num == 1">
<div class="flex">
......@@ -19,14 +19,16 @@
<!-- </div>-->
<div class="active-area">
<div class="left-area card-box">
<ul class="left" v-if="anchorList.length>0">
<li :key="index" v-for="(item,index) in anchorList">
<a @click="anchorSkip(item.id)">{{item.name}}</a>
</li>
</ul>
<ul v-else>
<li>暂无锚点</li>
</ul>
<div class="left-area-box" :style="leftAreaBoxStyle">
<ul class="left" v-if="anchorList.length>0">
<li :key="index" v-for="(item,index) in anchorList">
<a @click="anchorSkip(item.id)">{{item.name}}</a>
</li>
</ul>
<ul v-else>
<li>暂无锚点</li>
</ul>
</div>
</div>
<div :style="{
'min-height':minHeight+'px'
......@@ -54,13 +56,14 @@
info: {},
anchorList: [],
minHeight: '339',
leftAreaBoxStyle: {}
};
},
created() {
this.info = this.$store.state.info;
setTimeout(()=>{
setTimeout(() => {
this.anchorList = this.getAnchor(this.info.student_recruitment_brochure);
},1000)
}, 1000)
let code = this.$store.state.indexIdentity;
//判断是否关闭了营地(关闭了不需要调用setlog)
let isCloseCamp = this.$store.state.info.on_off;
......@@ -74,8 +77,44 @@
},
mounted() {
window.addEventListener('scroll', this.handleScrollY, true);
},
destroyed() {
window.removeEventListener('scroll', this.handleScrollY, true);
},
methods: {
handleScrollY() {
// left-area的宽度
let leftAreaWidth = document.querySelector('.left-area').offsetWidth;
// footer的高度
let footerHeight = document.querySelector('.footer').offsetHeight;
// 页面滚动高度
let scrollTop = document.documentElement.scrollTop;
// left-area-box的高度
let Height = document.querySelector('.left-area-box').offsetHeight;
// index-container的高度
let contentHeight = document.querySelector('.index-container').offsetHeight;
// body的高度
let bodyHeight = document.body.offsetHeight;
if (scrollTop >= (98)) {
if (scrollTop >= (contentHeight - bodyHeight + 218) &&
bodyHeight <= (footerHeight + Height + 188)) {
this.leftAreaBoxStyle = {
position: 'absolute',
bottom: '0px',
width: leftAreaWidth + 'px',
}
return false;
}
this.leftAreaBoxStyle = {
position: 'fixed',
top: '138px',
width: leftAreaWidth + 'px',
}
} else {
this.leftAreaBoxStyle = {}
}
},
toLogin() {
let code = this.$store.state.indexIdentity;
if (!window.localStorage.getItem("index-token-all")) {
......@@ -93,7 +132,6 @@
},
// 分离获取html中的锚点
getAnchor(content) {
console.log(content)
if (!content) return [];
let attrAndValueArr = content.match(/<a id=\"(.*?)\"><\/a>/g);
let valueArr = [] // 放所有该属性的值
......@@ -105,10 +143,7 @@
.replace(/\"/g, '')
.replace(/><\/a>/g, ''));
}
console.log(valueArr)
valueArr.forEach((item, index) => {
console.log(item)
console.log(document.getElementById(item).parentNode)
let father = document.getElementById(item).parentNode;
let value = father.innerHTML.replace(/<(.*?)>/g, '').replace(/<\/(.*?)>/g, '');
if (value && value.length < 10) {
......@@ -167,10 +202,11 @@
width: 100%;
display: flex;
flex-flow: column;
margin-top: 104px;
margin-top: 118px;
.index-container {
flex: 1;
padding-bottom: 50px;
.title {
padding: 52px 0 20px 0;
......@@ -238,14 +274,21 @@
flex-flow: row;
align-items: self-start;
justify-content: space-between;
position: relative;
.left-area {
flex: 1;
min-width: 200px;
background-color: #ffffff;
border-radius: 8px;
.left-area-box {
border-radius: 8px;
background-color: #ffffff;
}
ul {
padding: 20px ;
padding: 20px;
}
li {
......@@ -282,6 +325,7 @@
width: calc(100% - 100px);
border-radius: 8px;
background-color: #ffffff;
.center-area-title {
text-align: center;
font-size: 22px;
......
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