366 lines
8.5 KiB
Vue
Executable File
366 lines
8.5 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<div class="allSections" v-if="!twofid">
|
|
<div class="allSections-left">
|
|
<span v-for="(item, index) in list" :class="{ 'active': index == allActive }" :key="index"
|
|
@click="allClick(index, item.fid)">{{ item.name }}</span>
|
|
</div>
|
|
<div class="allSections-right">
|
|
<div class="allSections-right-item" @click="pitchPlate(i.fid, i.name)"
|
|
v-for="(i, k) in list[allActive].data" :key="k">
|
|
<div class="item-content">
|
|
<div class="item-title">{{ i.name }}</div>
|
|
<div v-if="i.description" class="item-text" v-html="i.description.replace(/<[^>]+>/g, '')"></div>
|
|
</div>
|
|
<div class="item-star">
|
|
<img v-if="!i.iscollection" src="~assets/img/allSections/nullStar.png" alt="空星"
|
|
@click.stop="starClick(k, i.fid, 'forumFav')">
|
|
<img v-else src="~assets/img/allSections/star.png" alt="实星"
|
|
@click.stop="starClick(k, i.fid, 'unforumFav')">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-else style="margin:.64rem 0;">
|
|
<div @click.stop="backAll()">
|
|
<plate-navigation :stairname="plate.stairname" :subsectionsname="plate.subsectionsname"></plate-navigation>
|
|
</div>
|
|
|
|
<div style="margin:.4rem 0.35rem">
|
|
<template v-if="invitationList.length != 0">
|
|
<index-list :list="invitationList"></index-list>
|
|
</template>
|
|
<div class="result-empty-box flexcenter shadow" v-else>
|
|
<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div v-if="invitationList.length != 0" class="paging flexcenter">
|
|
<el-pagination small background layout="prev, pager, next" @current-change="currentChange"
|
|
:current-page.sync="invitationPage" :page-size="invitationLimit" :total="invitationCount">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import plateNavigation from '@/components/PlateNavigation'
|
|
import indexList from '@/components/IndexList'
|
|
|
|
export default {
|
|
name: "AllSections",
|
|
data() {
|
|
return {
|
|
allActive: 0,
|
|
// list: [{}],
|
|
list: this.$store.state.allForumList,
|
|
postCollectionState: false, // 收藏的请求的状态
|
|
onefid: 0, // 一级列表的板块id
|
|
twofid: 0, // 是否有选中的板块id
|
|
invitationList: [], // 选中板块帖子的列表
|
|
invitationLimit: 10,
|
|
invitationPage: 1, //
|
|
invitationCount: 1, //
|
|
plate: {
|
|
stairname: "",// 一级版块名称
|
|
subsectionsname: "",// 子版块名称
|
|
},
|
|
loading: null, // 加载状态
|
|
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.$store.subscribe((mutation, state) => {
|
|
if (mutation.type == "setAllForumList") this.list = this.$store.state.allForumList
|
|
});
|
|
|
|
let { onefid, twofid, invitationPage } = this.$route.query
|
|
if (onefid) this.onefid = onefid
|
|
if (twofid) this.twofid = twofid
|
|
if (invitationPage) this.invitationPage = Number(invitationPage)
|
|
|
|
if (Number(onefid) > 0) this.a()
|
|
|
|
|
|
if (Number(twofid) > 0) this.getInvitationList()
|
|
|
|
},
|
|
|
|
methods: {
|
|
a() {
|
|
if (this.list.length >= 2) {
|
|
|
|
let list = this.list
|
|
list.forEach((el, index) => {
|
|
// console.log(this.twofid);
|
|
|
|
if (el.fid == this.onefid) this.allActive = index
|
|
|
|
if (this.twofid) {
|
|
el.data.forEach((element, i) => {
|
|
console.log(element, i);
|
|
if (element.fid == this.twofid) {
|
|
this.plate = {
|
|
stairname: el.name,
|
|
subsectionsname: element.name,
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
})
|
|
|
|
console.log(this.onefid, "onefidonefid");
|
|
|
|
} else {
|
|
setTimeout(() => {
|
|
this.a()
|
|
}, 500)
|
|
}
|
|
|
|
},
|
|
// 点击返回选择一级列表页面
|
|
backAll() {
|
|
this.twofid = 0
|
|
},
|
|
|
|
allClick(index, fid) {
|
|
this.allActive = index
|
|
const params = new URLSearchParams(window.location.search);
|
|
params.set('onefid', fid);
|
|
const newUrl = window.location.pathname + '?' + params.toString();
|
|
window.history.pushState({}, '', newUrl);
|
|
},
|
|
|
|
// 点击收藏
|
|
starClick(k, fid, state) {
|
|
if (this.postCollectionState) return
|
|
let url = ""
|
|
if (state == "forumFav") url = "/api/operation/forumFav"
|
|
else url = "/api/operation/unforumFav"
|
|
this.postCollectionState = true
|
|
this.$http.post(url, {
|
|
fid
|
|
}).then(res => {
|
|
if (res.code != 200) return
|
|
|
|
let list = this.$store.state.allForumList
|
|
list[this.allActive].data[k]['iscollection'] = state == "forumFav" ? 1 : 0
|
|
|
|
this.$store.commit('setAllForumList', list)
|
|
|
|
this.$Message.success(res.message)
|
|
this.$forceUpdate()
|
|
}).finally(() => {
|
|
this.postCollectionState = false
|
|
})
|
|
},
|
|
|
|
// 点击选中板块 并获取列表
|
|
pitchPlate(fid, subsectionsname) {
|
|
this.twofid = fid
|
|
this.plate = {
|
|
stairname: this.list[this.allActive].name,
|
|
subsectionsname,
|
|
}
|
|
this.$router.push({ path: `/allSections`, query: { onefid: this.list[this.allActive].fid, twofid: this.twofid } })
|
|
},
|
|
|
|
// 获取帖子列表
|
|
getInvitationList() {
|
|
this.$startupUnderLoading(this)
|
|
this.$http.post("/api/home/threadList", {
|
|
page: this.invitationPage,
|
|
limit: this.invitationLimit,
|
|
fid: this.twofid
|
|
}).then(res => {
|
|
let data = res.data
|
|
this.invitationList = data.data
|
|
this.invitationCount = data.count
|
|
this.invitationLimit = data.limit
|
|
|
|
document.documentElement.scrollTop = 0;
|
|
document.body.scrollTop = 0;
|
|
}).finally(() => {
|
|
this.$closeUnderLoading(this)
|
|
})
|
|
},
|
|
|
|
// 点击页数
|
|
currentChange() {
|
|
this.$router.push({ path: `/allSections`, query: { onefid: this.list[this.allActive].fid, twofid: this.twofid, invitationPage: this.invitationPage } })
|
|
},
|
|
|
|
},
|
|
|
|
components: {
|
|
plateNavigation,
|
|
indexList
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.result-empty-box {
|
|
height: 10.3333rem;
|
|
}
|
|
|
|
.allSections {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-radius: 0.32rem;
|
|
margin-top: 0.666667rem;
|
|
filter: drop-shadow(0.05rem 0 0.09rem rgba(0, 0, 0, 0.1));
|
|
margin: .64rem 0.35rem;
|
|
|
|
height: calc(100vh - 3rem);
|
|
overflow: auto;
|
|
}
|
|
|
|
.allSections-left {
|
|
width: 35%;
|
|
border-left: 0.013333rem solid #ddd;
|
|
background-color: rgba(235, 235, 235, 0.556862745098039);
|
|
// border-radius: 0.32rem 0 0 0.32rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
|
|
span {
|
|
height: 1.28rem;
|
|
line-height: 1.28rem;
|
|
border-radius: 0.32rem;
|
|
font-size: 0.32rem;
|
|
// padding: 0 0 0 0.2rem;
|
|
position: relative;
|
|
|
|
&.active {
|
|
background-color: #fff;
|
|
font-weight: bolder;
|
|
border-radius: 0.32rem 0 0 0.32rem;
|
|
color: #000;
|
|
width: 105%;
|
|
margin-left: -0.133333rem;
|
|
filter: drop-shadow(0 0 0.08rem rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
&.active::before {
|
|
content: "";
|
|
width: 0.36rem;
|
|
height: 101%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: -100%;
|
|
box-shadow: 0.14rem 0.14rem #fff;
|
|
border-radius: 0 0 0.32rem 0;
|
|
}
|
|
|
|
&.active::after {
|
|
content: "";
|
|
width: 0.36rem;
|
|
height: 101%;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -100%;
|
|
box-shadow: 0.14rem -0.14rem #fff;
|
|
border-radius: 0 0.32rem 0 0;
|
|
}
|
|
|
|
&:first-child.active::before {
|
|
display: none;
|
|
}
|
|
|
|
&:last-child.active::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.allSections-right {
|
|
width: 65%;
|
|
background-color: #fff;
|
|
// border-radius: 0 0.32rem 0.32rem 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 1;
|
|
padding-bottom: 0.4rem;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
|
|
.allSections-right-item {
|
|
padding: 0.4rem 0;
|
|
margin: 0 0.32rem 0 0.7rem;
|
|
border-bottom: 0.013333rem solid #ddd;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
|
|
.item-content {
|
|
width: 80%;
|
|
}
|
|
|
|
.item-title {
|
|
color: #000;
|
|
font-size: 0.32rem;
|
|
}
|
|
|
|
.item-text {
|
|
margin: 0.266667rem 0;
|
|
color: #aaa;
|
|
font-size: 0.28rem;
|
|
}
|
|
|
|
.item-star {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: .48rem;
|
|
height: .46rem;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
width: 0.12rem;
|
|
height: 0.32rem;
|
|
border-radius: 0.16rem;
|
|
position: absolute;
|
|
top: 0.48rem;
|
|
left: -0.35rem;
|
|
background-color: #62b1ff;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.paging {
|
|
margin-top: .48rem;
|
|
|
|
::v-deep {
|
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
background: rgba(98, 177, 255, 1);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.el-pagination .btn-next .el-icon,
|
|
.el-pagination .btn-prev .el-icon {
|
|
font-size: .4rem;
|
|
}
|
|
}
|
|
}
|
|
</style> |