我的

src/main/nine-space/src/assets/svgs/icon_shaixuan_sanjiao.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_shaixuan_sanjiao</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="钱包" transform="translate(-335.000000, -285.000000)" fill="#FFFFFF">
+            <g id="编组-4备份" transform="translate(0.000000, 259.000000)">
+                <g id="编组-5" transform="translate(259.000000, 20.000000)">
+                    <g id="编组-3" transform="translate(76.000000, 6.000000)">
+                        <path d="M7.66926735,6.10053808 L12.0199434,6.75410145 C12.2930218,6.79512358 12.4811405,7.04975235 12.4401184,7.32283072 C12.4242302,7.42859631 12.3748464,7.52648026 12.2992197,7.60210696 L8.60210696,11.2992197 C8.40684482,11.4944818 8.09026233,11.4944818 7.89500018,11.2992197 C7.81937348,11.223593 7.76998967,11.125709 7.75410145,11.0199434 L7.10053808,6.66926735 C7.05951595,6.39618898 7.24763469,6.14156022 7.52071306,6.10053808 C7.56995491,6.09314092 7.62002551,6.09314092 7.66926735,6.10053808 Z" id="矩形" transform="translate(10.000000, 9.000000) rotate(-135.000000) translate(-10.000000, -9.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/nine-space/src/components/creator/CreatorInfo.vue

@@ -35,6 +35,7 @@
           <span>{{ info.followers }}</span>
         </div>
         <van-button
+          v-if="!isFollow"
           @click.prevent="follow"
           :class="{ follow: info.follow }"
           plain
@@ -62,6 +63,10 @@ export default {
         return {};
       },
     },
+    isFollow: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     NOInfo() {

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

@@ -180,6 +180,14 @@ const routes = [
       title: "第九空间",
     },
   },
+  {
+    path: "/minePoint",
+    name: "minePoint",
+    component: () => import("../views/user/Point.vue"),
+    meta: {
+      title: "第九空间",
+    },
+  },
 ];
 
 const router = createRouter({

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

@@ -143,7 +143,7 @@
         </template>
       </van-cell>
 
-      <van-cell title="积分" is-link>
+      <van-cell title="积分" is-link :to="{ path: '/minePoint' }">
         <template #icon>
           <van-icon
             :name="require('../assets/svgs/icon-jifen.svg')"

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

@@ -7,7 +7,7 @@
     </van-sticky>
     <div class="list">
       <template v-for="(item, index) in list" :key="index">
-        <creator-info v-model:info="list[index]"></creator-info>
+        <creator-info isFollow v-model:info="list[index]"></creator-info>
       </template>
       <van-empty v-if="empty" description="还没有任何粉丝关注你哦~" />
     </div>
@@ -30,24 +30,14 @@ export default {
       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);
-      });
+    this.empty = false;
+    this.$http.get("/user/myFollowers").then((res) => {
+      this.list = res;
+      this.empty = res.length === 0;
+      setTimeout(() => {
+        this.bs.value.refresh();
+      }, 500);
+    });
   },
 };
 </script>

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

@@ -6,8 +6,11 @@
       </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 v-for="(item, index) in list" :key="index">
+        <creator-info
+          v-model:info="list[index]"
+          @update:info="init"
+        ></creator-info>
       </template>
       <van-empty v-if="empty" description="你还没有任何关注哦~" />
     </div>
@@ -33,17 +36,23 @@ export default {
     },
   },
   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);
-    });
+    this.init();
+  },
+  methods: {
+    init() {
+      this.$toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+      });
+      this.empty = false;
+      this.$http.get("/user/myFollows").then((res) => {
+        this.list = res;
+        this.empty = res.length === 0;
+        setTimeout(() => {
+          this.bs.value.refresh();
+        }, 500);
+      });
+    },
   },
 };
 </script>

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

@@ -0,0 +1,197 @@
+<template>
+  <div class="wallet">
+    <div class="top">
+      <div class="text1">我的积分</div>
+      <div class="text2">
+        <img src="../../assets/svgs/icon_jiage.svg" alt="" />
+        <span>465.26</span>
+      </div>
+      <img src="../../assets/svgs/topBg.svg" class="top-img" alt="" />
+    </div>
+
+    <div class="title">
+      <span>积分记录</span>
+      <van-popover
+        v-model:show="showPopover"
+        :actions="actions"
+        theme="dark"
+        @select="onSelect"
+      >
+        <template #reference>
+          <van-button
+            class="select"
+            size="mini"
+            color="#1C1E25"
+            icon-position="right"
+            :icon="require('../../assets/svgs/icon_shaixuan_sanjiao.svg')"
+            >2021年9月</van-button
+          >
+        </template>
+      </van-popover>
+    </div>
+    <div class="list">
+      <div class="info">
+        <div class="info-text">
+          <div class="text1">提现</div>
+          <div class="text2">奶盖</div>
+          <div class="text2">09-03 09:56</div>
+        </div>
+        <div class="text3">-320</div>
+      </div>
+      <div class="info">
+        <div class="info-text">
+          <div class="text1">提现</div>
+          <div class="text2">奶盖</div>
+          <div class="text2">09-03 09:56</div>
+        </div>
+        <div class="text3">-320</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+export default {
+  setup() {
+    const showPopover = ref(false);
+
+    // 通过 actions 属性来定义菜单选项
+    const actions = [
+      { text: "选项一" },
+      { text: "选项二" },
+      { text: "选项三" },
+    ];
+
+    return {
+      actions,
+      showPopover,
+    };
+  },
+  methods: {
+    onSelect(action) {
+      console.log(action);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 50px 16px 53px;
+  background-color: @bg3;
+  position: relative;
+  .text1 {
+    font-size: 13px;
+    color: #939599;
+    line-height: 18px;
+  }
+  .text2 {
+    span {
+      font-size: 36px;
+      font-family: DIN;
+      font-weight: bold;
+      color: #fdfb60;
+      line-height: 44px;
+      background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .btns {
+    margin-top: 20px;
+    .van-button {
+      width: 90px;
+
+      &.van-button--primary {
+        border: solid 0px transparent;
+        padding: 1px;
+        background-image: linear-gradient(@bg, @bg),
+          linear-gradient(135deg, #fdfb60, #ff8f3e);
+        background-origin: border-box;
+        box-sizing: border-box;
+        background-clip: content-box, border-box;
+      }
+    }
+
+    .van-button + .van-button {
+      margin-left: 32px;
+    }
+  }
+}
+
+.top-img {
+  display: block;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.title {
+  padding: 20px 16px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 22px;
+  display: flex;
+  justify-content: space-between;
+}
+.select {
+  min-width: 100px;
+  height: 32px;
+  color: #939599 !important;
+
+  /deep/.van-icon__image {
+    width: 20px;
+    height: 20px;
+    display: block;
+  }
+}
+
+.info {
+  display: flex;
+  padding: 0 16px;
+  height: 90px;
+  align-items: center;
+  position: relative;
+  .info-text {
+    flex-grow: 1;
+    .text1 {
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 20px;
+      margin-bottom: 4px;
+    }
+
+    .text2 {
+      font-size: 12px;
+      color: #969799;
+      line-height: 17px;
+      margin-bottom: 2px;
+    }
+  }
+
+  .text3 {
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 24px;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 16px;
+    right: 16px;
+    top: 0;
+    height: 1px;
+    background-color: #202122;
+  }
+}
+</style>

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

@@ -12,11 +12,72 @@
       </div>
       <img src="../../assets/svgs/topBg.svg" class="top-img" alt="" />
     </div>
+
+    <div class="title">
+      <span>收入明细</span>
+      <van-popover
+        v-model:show="showPopover"
+        :actions="actions"
+        theme="dark"
+        @select="onSelect"
+      >
+        <template #reference>
+          <van-button
+            class="select"
+            size="mini"
+            color="#1C1E25"
+            icon-position="right"
+            :icon="require('../../assets/svgs/icon_shaixuan_sanjiao.svg')"
+            >2021年9月</van-button
+          >
+        </template>
+      </van-popover>
+    </div>
+    <div class="list">
+      <div class="info">
+        <div class="info-text">
+          <div class="text1">提现</div>
+          <div class="text2">奶盖</div>
+          <div class="text2">09-03 09:56</div>
+        </div>
+        <div class="text3">-320</div>
+      </div>
+      <div class="info">
+        <div class="info-text">
+          <div class="text1">提现</div>
+          <div class="text2">奶盖</div>
+          <div class="text2">09-03 09:56</div>
+        </div>
+        <div class="text3">-320</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-export default {};
+import { ref } from "vue";
+export default {
+  setup() {
+    const showPopover = ref(false);
+
+    // 通过 actions 属性来定义菜单选项
+    const actions = [
+      { text: "选项一" },
+      { text: "选项二" },
+      { text: "选项三" },
+    ];
+
+    return {
+      actions,
+      showPopover,
+    };
+  },
+  methods: {
+    onSelect(action) {
+      console.log(action);
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -75,4 +136,66 @@ export default {};
   bottom: 0;
   left: 0;
 }
+
+.title {
+  padding: 20px 16px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 22px;
+  display: flex;
+  justify-content: space-between;
+}
+.select {
+  min-width: 100px;
+  height: 32px;
+  color: #939599 !important;
+
+  /deep/.van-icon__image {
+    width: 20px;
+    height: 20px;
+    display: block;
+  }
+}
+
+.info {
+  display: flex;
+  padding: 0 16px;
+  height: 90px;
+  align-items: center;
+  position: relative;
+  .info-text {
+    flex-grow: 1;
+    .text1 {
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 20px;
+      margin-bottom: 4px;
+    }
+
+    .text2 {
+      font-size: 12px;
+      color: #969799;
+      line-height: 17px;
+      margin-bottom: 2px;
+    }
+  }
+
+  .text3 {
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 24px;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 16px;
+    right: 16px;
+    top: 0;
+    height: 1px;
+    background-color: #202122;
+  }
+}
 </style>