485 lines
12 KiB
Vue
Executable File
485 lines
12 KiB
Vue
Executable File
<template>
|
|
<!-- 收藏版块 -->
|
|
<div class="collect">
|
|
<!-- 未收藏 -->
|
|
<div v-if="favoriteHeadList.length == 0" class="notCollect">
|
|
<img class="notCollect-img" src="~assets/img/collect/notCollect.png" alt="未收藏" />
|
|
<div class="collect-text">收藏你感兴趣的版块，迅速浏览相应的帖子</div>
|
|
<router-link to="/allSections" class="flexcenter collect-btn">
|
|
|
|
<div class="collect-btn-text">马上收藏</div>
|
|
<svg-icon icon-class="collect-btn" class-name="icon-collect"></svg-icon>
|
|
</router-link>
|
|
</div>
|
|
<!-- 已收藏 -->
|
|
<div v-else>
|
|
<!-- 热门版块 -->
|
|
<div class="hot-box" v-if="favoriteHeadList.length > 0">
|
|
<div class="hot-label" :class="{ active: fid == 0 }" @click="hotLabelClick(0)">全部</div>
|
|
<div class="hot-label" :class="{ active: fid == item.fid }" v-for="(item, index) in favoriteHeadList" :key="index"
|
|
@click="hotLabelClick(item.fid)">
|
|
{{ item.name }}
|
|
</div>
|
|
<!-- 设置按钮 -->
|
|
<div class="setting flexcenter" @click="settingClick">
|
|
<img src="~assets/img/icon/setting.png" alt="设置" />
|
|
设置
|
|
</div>
|
|
|
|
<!-- 设置 收藏版块弹窗 -->
|
|
<div class="setting-window" :class="{ 'setting-show': settingShow == true }" @click="settingClose">
|
|
<div class="setting-container" @click.stop>
|
|
<div class="setting-title">设置收藏版块</div>
|
|
<div class="setting-total">
|
|
<div class="setting-num">共收藏<b> {{ favoriteHeadList.length }} </b>个版块</div>
|
|
<router-link to="/allSections" class="flexcenter setting-add">
|
|
<svg-icon icon-class="settingAdd" class-name="setting-add-img"></svg-icon>添加
|
|
</router-link>
|
|
</div>
|
|
<!-- 弹窗收藏版块内容 -->
|
|
<div class="setting-sections">
|
|
<div v-for="(item, index) in favoriteHeadList" :key="index">
|
|
<div class="setting-item" @click.stop="cancelFavoritesSection(item.fid, index)">
|
|
<div class="setting-item-title one-line">{{ item.name }}</div>
|
|
<div class="setting-star"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 关闭弹窗 -->
|
|
<div class="setting-close" @click="settingClose">关闭</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 路径 -->
|
|
<template v-if="fid != 0">
|
|
<plate-navigation :fid="plate.fid" :stairname="plate.stairname"
|
|
:subsectionsname="plate.subsectionsname"></plate-navigation>
|
|
</template>
|
|
|
|
<!-- 内容区域 -->
|
|
<section>
|
|
<template v-if="favorite.list.length != 0 || loading">
|
|
<index-list :list="favorite.list"></index-list>
|
|
<div class="paging flexcenter" v-if="!loading">
|
|
<el-pagination small background layout="prev, pager, next" @current-change="currentChange"
|
|
:current-page.sync="favorite.page" :page-size="favorite.limit" :total="favorite.count">
|
|
</el-pagination>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import plateNavigation from '@/components/PlateNavigation'
|
|
import indexList from '@/components/IndexList'
|
|
|
|
export default {
|
|
name: "Collect",
|
|
data() {
|
|
return {
|
|
allForumList: [], // 所有板块得数据
|
|
favoriteHeadList: [],
|
|
favoriteHeadIdList: [],
|
|
fid: 0, // 选中的收藏板块
|
|
collect: [1],
|
|
settingShow: false, //弹窗显示
|
|
settingStar: false,
|
|
plate: {
|
|
stairname: "",// 一级版块名称
|
|
subsectionsname: "",// 子版块名称
|
|
fid: 0, // 一级板块的id
|
|
},
|
|
favorite: { // 收藏板块
|
|
list: [],
|
|
limit: 20,
|
|
page: 1,
|
|
count: 0
|
|
},
|
|
loading: null,
|
|
|
|
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
"$store.state.allForumList": {
|
|
handler(newV, oldV) {
|
|
if (!Array.isArray(newV)) return
|
|
this.allForumList = newV
|
|
if (this.favoriteHeadList.length != 0) this.handleFavoriteHeadList()
|
|
},
|
|
immediate: true
|
|
},
|
|
|
|
favoriteHeadIdList: {
|
|
handler(newV, oldV) {
|
|
if (!Array.isArray(newV)) return
|
|
this.favoriteHeadList = newV
|
|
if (this.allForumList.length != 0) this.handleFavoriteHeadList()
|
|
|
|
},
|
|
immediate: true
|
|
},
|
|
},
|
|
mounted() {
|
|
let { page, fid } = this.$route.query
|
|
if (page) this.favorite.page = Number(page)
|
|
if (fid) this.fid = fid
|
|
|
|
this.init()
|
|
},
|
|
|
|
methods: {
|
|
init() {
|
|
let { homeRequestState, favoriteList } = this.$store.state
|
|
if (!homeRequestState) {
|
|
setTimeout(() => {
|
|
this.init()
|
|
}, 300);
|
|
} else {
|
|
this.favoriteHeadIdList = favoriteList
|
|
this.getCollectList()
|
|
}
|
|
|
|
},
|
|
|
|
// 获取收藏列表数据
|
|
getCollectList() {
|
|
if (this.favoriteHeadIdList.length == 0) return
|
|
let favoriteHeadIdList = this.favoriteHeadIdList
|
|
|
|
if (!favoriteHeadIdList.includes(Number(this.fid))) {
|
|
this.fid = 0
|
|
}
|
|
this.$startupUnderLoading(this)
|
|
this.$http.get("/api/home/threadList", {
|
|
limit: this.favorite.limit,
|
|
page: this.favorite.page,
|
|
fid: this.fid,
|
|
type: "fav"
|
|
}).then(res => {
|
|
if (res.code != 200) return
|
|
let data = res.data
|
|
|
|
this.favorite.list = data.data
|
|
this.favorite.page = data.page
|
|
this.favorite.limit = data.limit
|
|
this.favorite.count = data.count
|
|
|
|
}).finally(() => {
|
|
this.$closeUnderLoading(this)
|
|
})
|
|
},
|
|
|
|
// 处理获取收藏板块的值
|
|
handleFavoriteHeadList() {
|
|
let allForumList = this.allForumList
|
|
let favoriteHeadIdList = this.favoriteHeadIdList
|
|
|
|
let favoriteHeadList = []
|
|
|
|
|
|
|
|
allForumList.forEach((el, index) => {
|
|
if (!Array.isArray(el.data)) return
|
|
el.data.forEach(elememt => {
|
|
if (elememt.fid == this.fid) {
|
|
this.plate.stairname = el.name
|
|
this.plate.subsectionsname = elememt.name
|
|
this.plate.fid = el.fid
|
|
}
|
|
|
|
if (favoriteHeadIdList.includes(elememt.fid)) {
|
|
favoriteHeadList.push({
|
|
fid: elememt.fid,
|
|
name: elememt.name,
|
|
})
|
|
}
|
|
})
|
|
|
|
})
|
|
|
|
this.favoriteHeadList = favoriteHeadList
|
|
},
|
|
|
|
currentChange() {
|
|
let query = {
|
|
page: this.favorite.page,
|
|
}
|
|
if (this.fid) query['fid'] = this.fid
|
|
|
|
this.$router.push({ path: `/collect`, query })
|
|
},
|
|
|
|
hotLabelClick(fid) {
|
|
let query = {
|
|
page: 1,
|
|
fid
|
|
}
|
|
this.$router.push({ path: `/collect`, query })
|
|
},
|
|
// 点击显示弹窗
|
|
settingClick() {
|
|
this.settingShow = true;
|
|
},
|
|
// 点击弹窗以外区域隐藏按钮、关闭弹窗
|
|
settingClose() {
|
|
this.settingShow = false;
|
|
},
|
|
// 处理取消收藏板块
|
|
cancelFavoritesSection(fid, index) {
|
|
let url = "/api/operation/unforumFav"
|
|
|
|
this.$http.post(url, {
|
|
fid
|
|
}).then(res => {
|
|
if (res.code != 200) return
|
|
|
|
let list = this.$store.state.allForumList
|
|
|
|
this.$store.commit('setAllForumList', list)
|
|
|
|
if (this.fid == fid) {
|
|
this.fid = 0
|
|
this.getCollectList()
|
|
this.$updateURLSearchParams({ page: 1, fid: 0 })
|
|
}
|
|
|
|
this.favoriteHeadList.splice(index, 1)
|
|
|
|
this.$Message.success(res.message)
|
|
}).finally(() => {
|
|
this.$store.commit('setHomeRequestState', false)
|
|
this.$store.dispatch('getUserInfo', this)
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
},
|
|
components: {
|
|
plateNavigation,
|
|
indexList
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.setting {
|
|
width: 1.44rem;
|
|
height: 0.72rem;
|
|
border-radius: 2.56rem;
|
|
border: 0.013333rem solid rgba(127, 127, 127, 1);
|
|
font-size: 0.3rem;
|
|
color: #333;
|
|
|
|
img {
|
|
width: 0.32rem;
|
|
height: 0.32rem;
|
|
}
|
|
}
|
|
|
|
//设置弹窗
|
|
.setting-window {
|
|
display: none;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 7;
|
|
|
|
// 显示设置弹窗
|
|
&.setting-show {
|
|
display: block;
|
|
}
|
|
|
|
.setting-container {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
max-height: 90%;
|
|
min-height: 28%;
|
|
border-radius: 0.8rem 0.8rem 0 0;
|
|
overflow: hidden;
|
|
display: inline-grid;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
//弹窗标题
|
|
.setting-title {
|
|
text-align: center;
|
|
padding: .64rem 0 1.06rem;
|
|
font-size: 0.48rem;
|
|
font-weight: bolder;
|
|
color: #000;
|
|
}
|
|
|
|
// 设置收藏弹窗版块量
|
|
.setting-total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
// margin: 0.25rem 0.4rem 0 0.5rem;
|
|
// margin: 0 0.4rem 0 0.5rem;
|
|
margin-right: .32rem;
|
|
margin-left: .64rem;
|
|
|
|
b {
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
|
|
.setting-num,
|
|
.setting-add {
|
|
font-size: 0.32rem;
|
|
color: #000;
|
|
font-weight: 400;
|
|
color: #333;
|
|
font-size: .32rem;
|
|
}
|
|
|
|
.setting-add-img {
|
|
width: 0.4rem;
|
|
height: 0.4rem;
|
|
margin-right: .16rem;
|
|
}
|
|
|
|
// 设置收藏内容区域
|
|
.setting-sections {
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
// display: inherit;
|
|
// margin-top: 0.45rem;
|
|
margin-top: .8rem;
|
|
max-height: 58vh;
|
|
margin-bottom: .7733rem;
|
|
|
|
.setting-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
// margin-left: 0.87rem;
|
|
margin-left: 1.04rem;
|
|
border-bottom: 0.013333rem solid #eee;
|
|
position: relative;
|
|
// padding: 0.5rem 0;
|
|
padding: .58rem 0;
|
|
font-size: .36rem;
|
|
|
|
&::before {
|
|
content: "";
|
|
width: 0.12rem;
|
|
height: 0.32rem;
|
|
border-radius: 0.16rem;
|
|
position: absolute;
|
|
// top: 0.6rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: -0.4rem;
|
|
background-color: #62b1ff;
|
|
}
|
|
|
|
.setting-item-title {
|
|
font-size: 0.36rem;
|
|
}
|
|
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
|
|
.setting-star {
|
|
width: 0.48rem;
|
|
height: 0.48rem;
|
|
background-size: contain;
|
|
background-image: url("assets/img/allSections/star.png");
|
|
background-repeat: no-repeat;
|
|
margin-right: 0.4rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.setting-close {
|
|
width: 50%;
|
|
margin: 0 auto .72rem;
|
|
border: 0.013333rem solid #ccc;
|
|
height: 1.28rem;
|
|
line-height: 1.28rem;
|
|
border-radius: 0.67rem;
|
|
text-align: center;
|
|
// position: fixed;
|
|
// bottom: 0;
|
|
// left: 25%;
|
|
}
|
|
}
|
|
|
|
// 未收藏样式
|
|
.notCollect {
|
|
height: 80vh;
|
|
border-radius: 0.32rem;
|
|
box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0.67rem 0.35rem;
|
|
background-color: #fff;
|
|
|
|
.notCollect-img {
|
|
width: 2.04rem;
|
|
margin: 4rem 0 0.5rem 0;
|
|
}
|
|
|
|
.collect-text {
|
|
font-size: 0.3rem;
|
|
color: #7f7f7f;
|
|
}
|
|
|
|
.collect-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
|
|
.collect-btn-text {
|
|
color: #000;
|
|
font-weight: 650;
|
|
font-size: 0.4rem;
|
|
}
|
|
|
|
//图标
|
|
.icon-collect {
|
|
width: 0.48rem;
|
|
height: 0.48rem;
|
|
margin-left: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.paging {
|
|
margin-top: .48rem;
|
|
padding-bottom: 1rem;
|
|
|
|
::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>
|