From 3000ff590b6ee1027bf5221f0726d195005f79cf Mon Sep 17 00:00:00 2001 From: xiaoronghao <1300399510@qq.com> Date: Mon, 10 Apr 2023 15:37:48 +0800 Subject: [PATCH] =?UTF-8?q?=E5=93=88=E5=93=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 2 +- src/assets/css/public.scss | 23 ++ src/store/index.js | 16 +- src/views/index/allSections/AllSections.vue | 6 +- src/views/index/collect/Collect.vue | 232 ++++++++++++++++---- src/views/index/index.vue | 11 + src/views/index/recommend/Recommend.vue | 120 ++++++++-- 7 files changed, 355 insertions(+), 55 deletions(-) diff --git a/src/App.vue b/src/App.vue index 7ea2a0e..54f7211 100755 --- a/src/App.vue +++ b/src/App.vue @@ -35,7 +35,7 @@ export default { flex-direction: column; margin: 0 auto; position: relative; - overflow: hidden; + // overflow: hidden; } a { diff --git a/src/assets/css/public.scss b/src/assets/css/public.scss index 1355673..cc7bb3f 100755 --- a/src/assets/css/public.scss +++ b/src/assets/css/public.scss @@ -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%; diff --git a/src/store/index.js b/src/store/index.js index 60fd4b1..a7460bb 100755 --- a/src/store/index.js +++ b/src/store/index.js @@ -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: { diff --git a/src/views/index/allSections/AllSections.vue b/src/views/index/allSections/AllSections.vue index 92a5ca9..f33af32 100755 --- a/src/views/index/allSections/AllSections.vue +++ b/src/views/index/allSections/AllSections.vue @@ -37,8 +37,9 @@ + -
+
@@ -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() }) }, diff --git a/src/views/index/collect/Collect.vue b/src/views/index/collect/Collect.vue index 3dc37d6..3f1d4cb 100755 --- a/src/views/index/collect/Collect.vue +++ b/src/views/index/collect/Collect.vue @@ -2,10 +2,9 @@
-
+
未收藏
收藏你感兴趣的版块，迅速浏览相应的帖子
-
马上收藏
@@ -16,31 +15,32 @@
-
-
- {{ item.label }} +
+
+ {{ item.name }}
设置 设置
+
设置收藏版块
-
共收藏 {{ list.length - 1 }} 个版块
+
共收藏 {{ favoriteHeadList.length - 1 }} 个版块
添加
-
-
-
{{ item.label }}
+
+
+
{{ item.name }}
@@ -50,12 +50,24 @@
+ - + +
- - + + +
@@ -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: "全部", - }, - { - label: "香港留学", - }, - { - label: "香港留学", - }, - { - label: "香港留学", - }, - ], + plate: { + stairname: "",// 一级版块名称 + subsectionsname: "",// 子版块名称 + }, + favorite: { // 收藏板块 + list: [], + limit: 20, + page: 1, + count: 0 + }, + loading: null, + + }; }, + + 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() + // }) + + }, + immediate: true + }, + + fid: { + handler(newV, oldV) { + if (this.$store.state.homeRequestState && newV) this.handleFavoriteHeadList() + }, + immediate: true + } + }, mounted() { - - }, - components: { - plateNavigation, - indexList + 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 + }, }; @@ -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 { diff --git a/src/views/index/index.vue b/src/views/index/index.vue index f85336a..eae7c9a 100755 --- a/src/views/index/index.vue +++ b/src/views/index/index.vue @@ -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) }) }, } diff --git a/src/views/index/recommend/Recommend.vue b/src/views/index/recommend/Recommend.vue index d442a22..fe02230 100755 --- a/src/views/index/recommend/Recommend.vue +++ b/src/views/index/recommend/Recommend.vue @@ -2,15 +2,21 @@
-
{{ item.name }}
+
{{ item.name }}
-
-