我的页面

src/main/nine-space/src/router/index.js

@@ -148,6 +148,30 @@ const routes = [
       title: "第九空间",
     },
   },
+  {
+    path: "/mineFollows",
+    name: "mineFollows",
+    component: () => import("../views/user/Follows.vue"),
+    meta: {
+      title: "第九空间",
+    },
+  },
+  {
+    path: "/mineFollowers",
+    name: "mineFollowers",
+    component: () => import("../views/user/Followers.vue"),
+    meta: {
+      title: "第九空间",
+    },
+  },
+  {
+    path: "/mineLikes",
+    name: "mineLikes",
+    component: () => import("../views/user/Likes.vue"),
+    meta: {
+      title: "第九空间",
+    },
+  },
 ];
 
 const router = createRouter({

src/main/nine-space/src/views/Mine.vue

@@ -34,11 +34,11 @@
         </div>
 
         <div class="btns">
-          <div class="collect">
+          <div class="collect" @click="$router.push('/mineFollows')">
             <div class="text1">{{ userInfo.follows }}</div>
             <div class="text2">关注</div>
           </div>
-          <div class="collect">
+          <div class="collect" @click="$router.push('/mineFollowers')">
             <div class="text1">{{ userInfo.followers }}</div>
             <div class="text2">粉丝</div>
           </div>
@@ -151,7 +151,7 @@
           />
         </template>
       </van-cell>
-      <van-cell title="我赞过的" is-link>
+      <van-cell title="我赞过的" :to="{ path: '/mineLikes' }" is-link>
         <template #icon>
           <van-icon
             :name="require('../assets/svgs/icon-dianzan.svg')"

src/main/nine-space/src/views/user/Followers.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="follow">
+    <van-sticky>
+      <div class="top">
+        <div class="name">我的粉丝</div>
+      </div>
+    </van-sticky>
+    <div class="list">
+      <template v-for="(item, index) in list" :key="index">
+        <creator-info v-model:info="list[index]"></creator-info>
+      </template>
+      <van-empty v-if="empty" description="还没有任何粉丝关注你哦~" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CreatorInfo from "../../components/creator/CreatorInfo.vue";
+export default {
+  components: { CreatorInfo },
+  inject: ["bs"],
+  data() {
+    return {
+      list: [],
+      empty: false,
+    };
+  },
+  mounted() {
+    this.$toast.loading({
+      message: "加载中...",
+      forbidClick: true,
+    });
+    this.$http
+      .post(
+        "/follow/all",
+        {
+          query: {
+            userId: this.$store.state.userInfo.id,
+          },
+          sort: "createdAt,desc",
+        },
+        { body: "json" }
+      )
+      .then((res) => {
+        this.list = res.content;
+        this.empty = res.empty;
+        setTimeout(() => {
+          this.bs.value.refresh();
+        }, 500);
+      });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.follow {
+  background-color: #0f0f0f;
+}
+.top {
+  background-color: #181818;
+  padding: 0 16px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  .name {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
+  }
+}
+</style>

src/main/nine-space/src/views/user/Follows.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="follow">
+    <van-sticky>
+      <div class="top">
+        <div class="name">我关注的</div>
+      </div>
+    </van-sticky>
+    <div class="list">
+      <template v-for="(item, index) in showList" :key="index">
+        <creator-info v-model:info="showList[index]"></creator-info>
+      </template>
+      <van-empty v-if="empty" description="你还没有任何关注哦~" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CreatorInfo from "../../components/creator/CreatorInfo.vue";
+export default {
+  components: { CreatorInfo },
+  inject: ["bs"],
+  data() {
+    return {
+      list: [],
+      empty: false,
+    };
+  },
+  computed: {
+    showList() {
+      return [...this.list].filter((item) => {
+        return item.follow;
+      });
+    },
+  },
+  mounted() {
+    this.$toast.loading({
+      message: "加载中...",
+      forbidClick: true,
+    });
+    this.$http.get("/user/myFollows").then((res) => {
+      this.list = res;
+      this.empty = res.length === 0;
+      setTimeout(() => {
+        this.bs.value.refresh();
+      }, 500);
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.follow {
+  background-color: #0f0f0f;
+}
+.top {
+  background-color: #181818;
+  padding: 0 16px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  .name {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
+  }
+}
+</style>

src/main/nine-space/src/views/user/Likes.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="follow">
+    <van-sticky>
+      <div class="top">
+        <div class="name">我赞过的</div>
+      </div>
+    </van-sticky>
+    <div class="list">
+      <template v-for="(item, index) in showList" :key="index">
+        <creator-info v-model:info="showList[index]"></creator-info>
+      </template>
+      <van-empty v-if="empty" description="你还没有任何关注哦~" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CreatorInfo from "../../components/creator/CreatorInfo.vue";
+export default {
+  components: { CreatorInfo },
+  inject: ["bs"],
+  data() {
+    return {
+      list: [],
+      empty: false,
+    };
+  },
+  computed: {
+    showList() {
+      return [...this.list].filter((item) => {
+        return item.follow;
+      });
+    },
+  },
+  mounted() {
+    this.$toast.loading({
+      message: "加载中...",
+      forbidClick: true,
+    });
+    this.$http.get("/user/myFollows").then((res) => {
+      this.list = res;
+      this.empty = res.length === 0;
+      setTimeout(() => {
+        this.bs.value.refresh();
+      }, 500);
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.follow {
+  background-color: #0f0f0f;
+}
+.top {
+  background-color: #181818;
+  padding: 0 16px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  .name {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
+  }
+}
+</style>