哈哈
This commit is contained in:
xiaoronghao
parent
6466a55896
commit
3000ff590b
@ -35,7 +35,7 @@ export default {
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@ -231,6 +231,29 @@ section {
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.el-pagination.is-background.el-pagination--small .btn-next,
|
||||
.el-pagination.is-background.el-pagination--small .btn-prev,
|
||||
.el-pagination.is-background.el-pagination--small .el-pager li {
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-empty-box {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@ -7,7 +7,9 @@ export default new Vuex.Store({
|
||||
state: {
|
||||
historicalSearch: [],
|
||||
allForumList: [{}], // 全部板块数据
|
||||
|
||||
homeRequestState: false, // 首页推荐和收藏接口的数据请求状态
|
||||
favoriteList: [],
|
||||
recommendList: [],
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
@ -26,6 +28,18 @@ export default new Vuex.Store({
|
||||
state.allForumList = payload
|
||||
},
|
||||
|
||||
setHomeRequestState(state, payload) {
|
||||
state.homeRequestState = payload
|
||||
},
|
||||
|
||||
setFavoriteList(state, payload) {
|
||||
state.favoriteList = payload
|
||||
},
|
||||
|
||||
setRecommendList(state, payload) {
|
||||
state.recommendList = payload
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
actions: {
|
||||
|
||||
@ -37,8 +37,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- .paging-box { -->
|
||||
|
||||
<div v-if="invitationList.length != 0" class="paging flexcenter">
|
||||
<div v-if="invitationList.length != 0" class="paging-bo paging flexcenter">
|
||||
<el-pagination small background layout="prev, pager, next" @current-change="currentChange"
|
||||
:current-page.sync="invitationPage" :page-size="invitationLimit" :total="invitationCount">
|
||||
</el-pagination>
|
||||
@ -86,7 +87,6 @@ export default {
|
||||
|
||||
if (Number(onefid) > 0) this.handQuery()
|
||||
|
||||
|
||||
if (Number(twofid) > 0) this.getInvitationList()
|
||||
|
||||
},
|
||||
@ -151,6 +151,8 @@ export default {
|
||||
this.$forceUpdate()
|
||||
}).finally(() => {
|
||||
this.postCollectionState = false
|
||||
this.$store.commit('setHomeRequestState', false)
|
||||
this.$parent.init()
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -2,10 +2,9 @@
|
||||
<!-- 收藏版块 -->
|
||||
<div class="collect">
|
||||
<!-- 未收藏 -->
|
||||
<div v-if="collect.length == 0" class="notCollect">
|
||||
<div v-if="favoriteHeadList.length == 0" class="notCollect">
|
||||
<img class="notCollect-img" src="~assets/img/collect/notCollect.png" alt="未收藏" />
|
||||
<div class="collect-text">收藏你感兴趣的版块，迅速浏览相应的帖子</div>
|
||||
<!-- <div class="collect-btn"> -->
|
||||
<router-link to="/allSections" class="flexcenter collect-btn">
|
||||
|
||||
<div class="collect-btn-text">马上收藏</div>
|
||||
@ -16,31 +15,32 @@
|
||||
<!-- 已收藏 -->
|
||||
<div v-else>
|
||||
<!-- 热门版块 -->
|
||||
<div class="hot-box">
|
||||
<div class="hot-label" :class="{ active: hotActive == index }" v-for="(item, index) in list" :key="index"
|
||||
@click="hotLabelClick(index)">
|
||||
{{ item.label }}
|
||||
<div class="hot-box" v-if="favoriteHeadList.length != 0">
|
||||
<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> {{ list.length - 1 }} </b>个版块</div>
|
||||
<div class="setting-num">共收藏<b> {{ favoriteHeadList.length - 1 }} </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 list" :key="index">
|
||||
<div v-if="index != 0" class="setting-item" @click.stop="cancelFavoritesSection(index)">
|
||||
<div class="setting-item-title">{{ item.label }}</div>
|
||||
<div v-for="(item, index) in favoriteHeadList" :key="index">
|
||||
<div v-if="index != 0" class="setting-item" @click.stop="cancelFavoritesSection(item.fid, index)">
|
||||
<div class="setting-item-title">{{ item.name }}</div>
|
||||
<div class="setting-star"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -50,12 +50,24 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 路径 -->
|
||||
<plate-navigation stairname="寄托学术类备" subsectionsname="SAT、AP考试、海外本科申…"></plate-navigation>
|
||||
<template v-if="fid != 0">
|
||||
<plate-navigation :stairname="plate.stairname" :subsectionsname="plate.subsectionsname"></plate-navigation>
|
||||
</template>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<section>
|
||||
<!-- <index-list :list=""></index-list> -->
|
||||
<index-list></index-list>
|
||||
<template v-if="favorite.list.length != 0 || loading">
|
||||
<index-list :list="favorite.list"></index-list>
|
||||
<div class="paging flexcenter">
|
||||
<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>
|
||||
@ -69,37 +81,155 @@ export default {
|
||||
name: "Collect",
|
||||
data() {
|
||||
return {
|
||||
hotActive: 0, //热门版块活跃点击
|
||||
allForumList: [], // 所有板块得数据
|
||||
favoriteHeadList: [],
|
||||
// favoriteHeadIdList: [],
|
||||
favoriteHeadIdList: this.$parent.favorite,
|
||||
fid: 0, // 选中的收藏板块
|
||||
collect: [1],
|
||||
settingShow: false, //弹窗显示
|
||||
settingStar: false,
|
||||
list: [
|
||||
//版块
|
||||
{
|
||||
label: "全部",
|
||||
plate: {
|
||||
stairname: "",// 一级版块名称
|
||||
subsectionsname: "",// 子版块名称
|
||||
},
|
||||
{
|
||||
label: "香港留学",
|
||||
favorite: { // 收藏板块
|
||||
list: [],
|
||||
limit: 20,
|
||||
page: 1,
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
label: "香港留学",
|
||||
},
|
||||
{
|
||||
label: "香港留学",
|
||||
},
|
||||
],
|
||||
loading: null,
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
watch: {
|
||||
"$store.state.homeRequestState": {
|
||||
handler(newV, oldV) {
|
||||
console.log("newVnewV", newV);
|
||||
// if (!newV) return
|
||||
// this.$nextTick(() => {
|
||||
// this.favoriteHeadIdList = this.$parent.favorite || []
|
||||
// this.getAllForumList()
|
||||
|
||||
// if (this.fid) this.handleFavoriteHeadList()
|
||||
// })
|
||||
|
||||
},
|
||||
components: {
|
||||
plateNavigation,
|
||||
indexList
|
||||
immediate: true
|
||||
},
|
||||
|
||||
fid: {
|
||||
handler(newV, oldV) {
|
||||
if (this.$store.state.homeRequestState && newV) this.handleFavoriteHeadList()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let { page, fid } = this.$route.query
|
||||
if (page) this.favorite.page = Number(page)
|
||||
if (fid) this.fid = fid
|
||||
|
||||
this.getCollectList()
|
||||
|
||||
if (this.favoriteHeadIdList.length != 0) this.getAllForumList()
|
||||
|
||||
this.$store.subscribe((mutation, state) => {
|
||||
if (mutation.type == "setHomeRequestState" && mutation.payload) {
|
||||
if (!this.$store.state.homeRequestState) return
|
||||
this.$nextTick(() => {
|
||||
this.favoriteHeadIdList = this.$parent.favorite || []
|
||||
this.getAllForumList()
|
||||
|
||||
if (this.fid) this.handleFavoriteHeadList()
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
hotLabelClick(index) {
|
||||
this.hotActive = index;
|
||||
// 获取收藏列表数据
|
||||
getCollectList() {
|
||||
this.$startupUnderLoading(this)
|
||||
this.$http.post("/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)
|
||||
})
|
||||
},
|
||||
|
||||
// 获取全部板块数据
|
||||
getAllForumList() {
|
||||
let allForumList = this.$store.state.allForumList
|
||||
if (allForumList.length == 1) {
|
||||
setTimeout(() => {
|
||||
this.getAllForumList()
|
||||
}, 500);
|
||||
} else {
|
||||
this.allForumList = allForumList
|
||||
this.handleFavoriteHeadList()
|
||||
}
|
||||
},
|
||||
|
||||
// 处理获取收藏板块的值
|
||||
handleFavoriteHeadList() {
|
||||
let allForumList = this.allForumList
|
||||
let favoriteHeadIdList = this.favoriteHeadIdList
|
||||
let favoriteHeadList = [{
|
||||
name: "全部",
|
||||
fid: 0
|
||||
}]
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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() {
|
||||
@ -110,11 +240,36 @@ export default {
|
||||
this.settingShow = false;
|
||||
},
|
||||
// 处理取消收藏板块
|
||||
cancelFavoritesSection(index) {
|
||||
this.list.splice(index, 1)
|
||||
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
|
||||
console.log(list, "list");
|
||||
// list[this.allActive].data[k]['iscollection'] = state == "forumFav" ? 1 : 0
|
||||
|
||||
this.$store.commit('setAllForumList', list)
|
||||
|
||||
this.favoriteHeadList.splice(index, 1)
|
||||
|
||||
this.$Message.success(res.message)
|
||||
}).finally(() => {
|
||||
this.$store.commit('setHomeRequestState', false)
|
||||
this.$parent.init()
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
components: {
|
||||
plateNavigation,
|
||||
indexList
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -314,6 +469,7 @@ export default {
|
||||
|
||||
.paging {
|
||||
margin-top: .48rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
::v-deep {
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
|
||||
@ -42,10 +42,21 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let homeRequestState = this.$store.state.homeRequestState
|
||||
if (homeRequestState) {
|
||||
let { favoriteList, recommendList } = this.$store.state
|
||||
this.favorite = favoriteList
|
||||
this.recommend = recommendList
|
||||
return
|
||||
}
|
||||
|
||||
this.$http.post("/api/home").then(res => {
|
||||
let data = res.data
|
||||
this.favorite = data.favorite
|
||||
this.recommend = data.recommend
|
||||
this.$store.commit('setHomeRequestState', true)
|
||||
this.$store.commit('setFavoriteList', data.favorite)
|
||||
this.$store.commit('setRecommendList', data.recommend)
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
@ -2,15 +2,21 @@
|
||||
<div class="recommend">
|
||||
<!-- 热门版块 -->
|
||||
<div class="hot-box">
|
||||
<div class="hot-label" :class="{ 'active': hotActive == index }" v-for="(item, index) in hotList" :key="index"
|
||||
@click="hotLabelClick(index, item.fid)">{{ item.name }}</div>
|
||||
<div class="hot-label" :class="{ 'active': item.fid == fid }" v-for="(item, index) in hotList" :key="index"
|
||||
@click="hotLabelClick(item.fid)">{{ item.name }}</div>
|
||||
</div>
|
||||
<!-- 路径 -->
|
||||
<plate-navigation v-if="fid != 0" :stairname="plate.subsectionsname"
|
||||
<plate-navigation v-if="fid != 0" :stairname="plate.stairname"
|
||||
:subsectionsname="plate.subsectionsname"></plate-navigation>
|
||||
<section>
|
||||
<template v-if="list.length == 0">
|
||||
<index-list></index-list>
|
||||
<template v-if="list.length != 0 || loading">
|
||||
<index-list :list="list"></index-list>
|
||||
|
||||
<div class="paging flexcenter">
|
||||
<el-pagination small background layout="prev, pager, next" @current-change="currentChange"
|
||||
:current-page.sync="page" :page-size="limit" :total="count">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<div class="result-empty-box flexcenter shadow" v-else>
|
||||
<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
|
||||
@ -23,38 +29,106 @@
|
||||
import plateNavigation from '@/components/PlateNavigation.vue'
|
||||
import indexList from '@/components/IndexList'
|
||||
export default {
|
||||
name: "Recommend",//推荐阅读444kljjkli
|
||||
name: "Recommend",//推荐阅读
|
||||
data() {
|
||||
return {
|
||||
hotActive: -1,//热门版块活跃点击
|
||||
hotList: [],
|
||||
list: [],
|
||||
count: 0, // 总数
|
||||
limit: 20, // 列表
|
||||
page: 1, // 页数
|
||||
fid: 0, // 板块id
|
||||
plate: {
|
||||
stairname: "",// 一级版块名称
|
||||
subsectionsname: "",// 子版块名称
|
||||
},
|
||||
|
||||
loading: null,
|
||||
allForumList: this.$store.state.allForumList,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
"$parent.recommend": {
|
||||
handler(newV, oldV) {
|
||||
console.log(newV);
|
||||
this.hotList = newV
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
|
||||
"$store.state.allForumList": {
|
||||
handler(newV, oldV) {
|
||||
this.allForumList = newV
|
||||
this.handleForumFid()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$parent.recommend);
|
||||
let { page, fid } = this.$route.query
|
||||
if (page) this.page = Number(page)
|
||||
if (fid) {
|
||||
this.fid = fid
|
||||
this.handleForumFid()
|
||||
}
|
||||
|
||||
this.init()
|
||||
},
|
||||
|
||||
methods: {
|
||||
hotLabelClick(index, fid) {
|
||||
console.log(fid);
|
||||
this.fid = fid
|
||||
this.hotActive = index
|
||||
init() {
|
||||
this.$startupUnderLoading(this)
|
||||
this.$http.post("/api/home/threadList", {
|
||||
limit: this.limit,
|
||||
type: "recommend",
|
||||
page: this.page,
|
||||
fid: this.fid,
|
||||
}).then(res => {
|
||||
console.log(res, "ffff");
|
||||
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
this.list = data.data
|
||||
this.limit = data.limit
|
||||
this.page = data.page
|
||||
this.count = data.count
|
||||
}).finally(() => {
|
||||
this.$closeUnderLoading(this)
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
// 初始化板块的头部
|
||||
handleForumFid() {
|
||||
let allForumList = this.allForumList
|
||||
if (!Array.isArray(allForumList) || allForumList.length <= 1) return
|
||||
allForumList.forEach((el, index) => {
|
||||
if (!Array.isArray(el['data'])) return
|
||||
el.data.forEach(element => {
|
||||
if (element['fid'] == this.fid) {
|
||||
this.plate.subsectionsname = element.name
|
||||
this.plate.stairname = el.name
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
currentChange() {
|
||||
let query = {
|
||||
page: this.page,
|
||||
}
|
||||
if (this.fid) query['fid'] = this.fid
|
||||
|
||||
this.$router.push({ path: `/recommend`, query })
|
||||
},
|
||||
|
||||
hotLabelClick(fid) {
|
||||
let query = {
|
||||
page: 1,
|
||||
fid
|
||||
}
|
||||
this.$router.push({ path: `/recommend`, query })
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@ -65,8 +139,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.path-box {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.paging {
|
||||
margin-top: .48rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
::v-deep {
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
@ -78,10 +157,25 @@ export default {
|
||||
.el-pagination .btn-prev .el-icon {
|
||||
font-size: .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.is-background.el-pagination--small .el-pager li {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.el-pagination.is-background.el-pagination--small .btn-next,
|
||||
.el-pagination.is-background.el-pagination--small .btn-prev,
|
||||
.el-pagination.is-background.el-pagination--small .el-pager li {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
section {
|
||||
padding-top: 0;
|
||||
height: 10.3333rem;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user