哈哈

src/App.vue

@@ -35,7 +35,7 @@ export default {
 	flex-direction: column;
 	margin: 0 auto;
 	position: relative;
-	overflow: hidden;
+	// overflow: hidden;
 }
 
 a {

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%;

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: {

src/views/index/allSections/AllSections.vue

@@ -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()
 			})
 		},
 

src/views/index/collect/Collect.vue

@@ -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-box" v-if="favoriteHeadList.length != 0">
-        <div class="hot-label" :class="{ active: hotActive == index }" v-for="(item, index) in list" :key="index"
+        <div class="hot-label" :class="{ active: fid == item.fid }" v-for="(item, index) in favoriteHeadList" :key="index"
-          @click="hotLabelClick(index)">
+          @click="hotLabelClick(item.fid)">
-          {{ item.label }}
+          {{ 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-for="(item, index) in favoriteHeadList" :key="index">
-                <div v-if="index != 0" class="setting-item" @click.stop="cancelFavoritesSection(index)">
+                <div v-if="index != 0" class="setting-item" @click.stop="cancelFavoritesSection(item.fid, index)">
-                  <div class="setting-item-title">{{ item.label }}</div>
+                  <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> -->
+        <template v-if="favorite.list.length != 0 || loading">
-        <index-list></index-list>
+          <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: [
+      plate: {
-        //版块
+        stairname: "",// 一级版块名称
-        {
+        subsectionsname: "",// 子版块名称
-          label: "全部",
       },
-        {
+      favorite: { // 收藏板块
-          label: "香港留学",
+        list: [],
+        limit: 20,
+        page: 1,
+        count: 0
       },
-        {
+      loading: null,
-          label: "香港留学",
+
-        },
+
-        {
-          label: "香港留学",
-        },
-      ],
     };
   },
-  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: {
+      immediate: true
-    plateNavigation,
-    indexList
     },
+
+    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) {
+    cancelFavoritesSection(fid, index) {
-      this.list.splice(index, 1)
+      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 {

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)
       })
     },
   }

src/views/index/recommend/Recommend.vue

@@ -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"
+			<div class="hot-label" :class="{ 'active': item.fid == fid }" v-for="(item, index) in hotList" :key="index"
-				@click="hotLabelClick(index, item.fid)">{{ item.name }}</div>
+				@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">
+			<template v-if="list.length != 0 || loading">
-				<index-list></index-list>
+				<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) {
+		init() {
-			console.log(fid);
+			this.$startupUnderLoading(this)
-			this.fid = fid
+			this.$http.post("/api/home/threadList", {
-			this.hotActive = index
+				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>