<template>
<div class="cardBox">
<van-tabs v-model="sort" @click="tabsClick">
<van-tab title="发布时间">发布时间</van-tab>
<van-tab title="点赞量">点赞量</van-tab>
<van-tab title="阅读量">阅读量</van-tab>
</van-tabs>
<div class="contextBox" v-if="newsList.length != 0" @load="getData">
<van-list
v-model="loading"
:finished="finished"
:finished-text="finishedText"
@load="getData"
>
<div
class="new_card"
v-for="(v, i) in newsList"
:key="i"
@click="toDetails(v)"
>
<div class="new_card_pic">
<img :src="v.imgUrl" />
</div>
<div class="new_card_title">{{ v.titleDesc }}</div>
<div class="new_card_bot">
<div class="card_bot_L">{{ v.schoolName }}</div>
<div class="card_bot_R">
<div class="greyTime">
<img src="@/assets/Travel/dz.png" /> {{ v.likeNumber }}
</div>
<div class="greyFont">
<img src="@/assets/Travel/ll.png" /> {{ v.readNumber }}
</div>
</div>
</div>
</div>
</van-list>
<div class="orgBtn" @click="toChoose" v-if="!schoolId">
点击查看更多研学成果
</div>
</div>
<van-empty description="暂无数据" v-else />
<div class="imgPic" @click="toQueryNull" v-if="schoolId">
<img src="@/assets/changeSchool.png" />
</div>
<tabbar active="fruit"></tabbar>
</div>
</template>
<script>
import Tabbar from '@/components/c_Tabbar.vue'
export default {
components: { Tabbar },
data() {
return {
newsList: [],
pageNum: 1,
pageSize: 10,
finished: false,
loading: false,
sort: 0,
};
},
computed: {
schoolId() {
return this.$route.query.schoolId ? this.$route.query.schoolId : "";
},
finishedText() {
return this.$route.query.schoolId ? '没有更多数据了': "";
}
},
methods: {
//详情新闻
toDetails(v) {
this.$router.push({
name: "pageDetails",
query: { schoolId: v.schoolId, dataId: v.id },
});
},
//选择
toChoose() {
this.$router.push({ name: "chooseSchoolOne" });
},
//选择
toQueryNull() {
this.$router.push({ name: "achievementsOne" });
location.reload()
},
tabsClick() {
this.newsList = [];
this.pageNum = 1;
this.pageSize = 10;
this.getData();
},
getData() {
this.loading = true;
// let schoolId = this.$route.query.schoolId
// ? this.$route.query.schoolId
// : "";
let pageSize = this.pageSize;
let pageNum = this.pageNum;
if (!this.schoolId) {
pageSize = 10;
pageNum = 1;
}
this.yxAxios
.get(
`${this.kqUrl}/schoolConsult/consultList?pageNum=${pageNum}&pageSize=${pageSize}&schoolId=` +
this.schoolId +
`&sort=` +
this.sort
)
.then((res) => {
if (res.data.code == 200) {
if (!this.schoolId) {
this.loading = false;
this.newsList = res.data.data.list;
this.finished = true;
return;
}
this.newsList = this.newsList.concat(
res.data.data.list
);
this.loading = false;
if (
this.pageSize * this.pageNum >=
res.data.data.total
) {
this.finished = true;
} else {
this.pageNum++;
}
} else {
this.$toast.fail(res.data.message);
}
});
},
},
mounted() {
this.getData();
this.$zwlogPvGlobal({ loadTime: new Date() });
this.$nextTick(() => {
this.$zwlogPvGlobal({ responseTime: new Date() });
});
},
};
</script>
<style lang="scss" scoped>
.cardBox {
padding: 2vw 0;
box-sizing: border-box;
background-color: #fefefe;
.contextBox {
margin-top: 20px;
margin-bottom: 140px;
.art_card {
padding: 28px;
box-sizing: border-box;
.art_title {
width: 100%;
font-size: 34px;
font-weight: bold;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; //限制行数
overflow: hidden; //超出部分隐藏
text-overflow: ellipsis; //用一个省略号代替超出的内容
}
.art_bot {
padding-top: 22px;
box-sizing: border-box;
display: flex;
align-items: center;
.redSticky {
color: #ff4444;
font-size: 24px;
padding: 2px;
box-sizing: border-box;
border: 1px solid #ff4444;
}
.greyTime {
color: #999;
font-size: 24px;
margin: 0 20px;
}
.greyFont {
color: #999;
font-size: 24px;
}
}
}
// .art_card_pic {
// padding: 28px;
// box-sizing: border-box;
// display: flex;
// justify-content: space-between;
// .art_context {
// height: 180px;
// display: flex;
// align-content: space-between;
// flex-wrap: wrap;
// .art_title {
// width: 100%;
// font-size: 34px;
// font-weight: bold;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 2; //限制行数
// overflow: hidden; //超出部分隐藏
// text-overflow: ellipsis; //用一个省略号代替超出的内容
// }
// .art_bot {
// padding-top: 22px;
// box-sizing: border-box;
// display: flex;
// align-items: center;
// .redSticky {
// color: #ff4444;
// font-size: 24px;
// padding: 2px;
// box-sizing: border-box;
// border: 1px solid #ff4444;
// }
// .greyTime {
// color: #999;
// font-size: 24px;
// margin: 0;
// }
// .greyFont {
// color: #999;
// font-size: 24px;
// margin-left: 20px;
// }
// }
// }
// .art_pic {
// width: 180px;
// height: 180px;
// flex-shrink: 0;
// background-color: #ff4444;
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
.new_card {
margin: 28px;
box-sizing: border-box;
height: 545px;
// margin-bottom: 30px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
border-radius: 25px;
.new_card_pic {
width: 100%;
height: 380px;
border-radius: 25px 25px 0 0;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.new_card_title {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
font-size: 34px;
font-weight: bold;
margin-top: 20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; //限制行数
overflow: hidden; //超出部分隐藏
text-overflow: ellipsis; //用一个省略号代替超出的内容
}
.new_card_bot {
padding: 22px 10px 0 10px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.card_bot_L {
color: #999;
font-size: 24px;
}
.card_bot_R {
display: flex;
.greyTime {
color: #999;
font-size: 24px;
margin: 0;
max-width: 20vw;
white-space: nowrap; //文本强制不换行；
text-overflow: ellipsis; //文本溢出显示省略号；
overflow: hidden; //溢出的部分隐藏；
-webkit-line-clamp: 2;
display: flex;
align-items: center;
img {
width: 24px;
margin-right: 7px;
}
}
.greyFont {
color: #999;
font-size: 24px;
margin-left: 20px;
max-width: 20vw;
white-space: nowrap; //文本强制不换行；
text-overflow: ellipsis; //文本溢出显示省略号；
overflow: hidden; //溢出的部分隐藏；
-webkit-line-clamp: 2;
display: flex;
align-items: center;
img {
width: 25px;
margin-right: 7px;
}
}
}
}
}
.orgBtn {
width: 80vw;
height: 80px;
margin-left: 10vw;
font-size: 33px;
background-color: #ff4444;
background: linear-gradient(to right, #ff3737, #ff6825);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 40px;
margin-bottom: 20px;
}
}
.imgPic {
position: fixed;
right: 2vw;
bottom: 40vw;
width: 26vw;
height: 26vw;
img {
width: 100%;
height: 100%;
}
}
}
</style>