再进行删除或取关操作时重新查询

Author: Longgererer

src/views/user/cycle-bin.vue

@@ -6,21 +6,23 @@
       <v-icon class="pointer" @click="showTip=false">mdi-close</v-icon>
     </v-card>
     <div class="cycle-bin-list">
-      <v-skeleton-loader type="list-item-two-line" v-show="loading" v-for="item in 10" :key="item"></v-skeleton-loader>
-      <v-card elevation="0" color="#272727" class="instance d-flex flex-ai" v-show="!loading" v-for="item in list"
-        :key="item.exampleId">
+      <v-skeleton-loader type="list-item-two-line" v-show="loading" v-for="item in 12" :key="item"></v-skeleton-loader>
+      <v-card elevation="0" color="#272727" class="instance flex-ai" v-show="!loading"
+        v-for="(item, index) in list" :key="item.exampleId">
         <div class="d-flex flex-clo">
           <span class="instance-title">{{item.exampleName}}</span>
           <span class="delete-time text-describe text-sm">删除日期：{{item.updateTime}}</span>
         </div>
         <v-spacer></v-spacer>
-        <v-btn color="#333333" class="restore-btn" @click="restore(item.exampleId)" :loading="restoreLoading">恢复</v-btn>
-        <v-btn color="error" class="delete-btn" @click="perDelete(item.exampleId)" :loading="deleteLoading">永久删除</v-btn>
+        <v-btn color="#333333" class="restore-btn" @click="restore(item.exampleId,index)"
+          :loading="restoreLoading&&curIndex===index">恢复</v-btn>
+        <v-btn color="error" class="delete-btn" @click="perDelete(item.exampleId,index)"
+          :loading="deleteLoading&&curIndex===index">永久删除</v-btn>
       </v-card>
     </div>
     <div class="cycle-tip" v-show="showNothing">
       <div class="d-flex flex-clo flex-jcc flex-ai">
-        <span class="title-xl">🗑</span>
+        <span class="icon-cycle">🗑</span>
         <span class="text-describe text-sm">回收站空空如也</span>
       </div>
     </div>
@@ -36,6 +38,7 @@ export default {
       loading: true,
       deleteLoading: false,
       restoreLoading: false,
+      curIndex: null,
       list: [],
       showNothing: false,
     }
@@ -46,7 +49,7 @@ export default {
       !this.loginState ||
       this.curUserDetail.username !== this.loginInfo.username
     ) {
-      // this.$router.replace({ name: '404' })
+      this.$router.replace('/404')
     }
     this.getRecycle()
   },
@@ -57,19 +60,22 @@ export default {
     async getRecycle() {
       this.loading = true
       try {
-        const res = await this.$http.searchCycleBin()
-        if (res.state) {
-          this.list = res.data
-          this.showNothing = res.data.length === 0
+        const { state, data } = await this.$http.searchCycleBin()
+        if (state) {
+          this.list = data
+          this.showNothing = data.length === 0
+          this.$emit('setPageConn', true, true)
+          this.$emit('updateNum', 'cycleBin', data.length)
           this.$message.success('查询成功！')
         } else {
           this.$message.error('查询失败！')
         }
       } catch (err) {}
       this.loading = false
     },
-    async restore(exampleId) {
+    async restore(exampleId, index) {
       this.restoreLoading = true
+      this.curIndex = index
       try {
         const res = await this.$http.resumeDelWork({
           username: this.loginInfo.username,
@@ -82,15 +88,17 @@ export default {
           this.$message.error('恢复失败！')
         }
       } catch (err) {}
+      this.curIndex = null
       this.restoreLoading = false
     },
-    async perDelete(exampleId) {
+    async perDelete(exampleId, index) {
       const confRes = await this.$alert({
         content: '该实例永久删除后将不可恢复！',
         okText: '确认并继续',
         okColor: 'error',
       })
       if (confRes) {
+        this.curIndex = index
         this.deleteLoading = true
         try {
           const res = await this.$http.permanentDelWork({
@@ -106,6 +114,7 @@ export default {
         } catch (err) {
           console.log(err)
         }
+        this.curIndex = null
         this.deleteLoading = false
       }
     },
@@ -135,6 +144,7 @@ export default {
     grid-gap: 15px;
     grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
     .instance {
+      display: flex;
       padding: 10px;
       margin-bottom: 15px;
       .restore-btn {
@@ -144,6 +154,9 @@ export default {
   }
   .cycle-tip {
     margin: 50px 0 100px;
+    .icon-cycle {
+      font-size: 48px;
+    }
   }
 }
 </style>

src/views/user/followers.vue

@@ -1,61 +1,94 @@
 <template>
   <div id="followers">
-    <div class="follower-list">
+    <div class="follower-list" v-show="!nothing">
       <div class="skeleton-list-item" v-for="(item, index) in 20" :key="index" v-show="loading">
         <follow-skeleton></follow-skeleton>
       </div>
-      <div class="follower-list-item" v-for="item in followersList" :key="item" v-show="!loading">
-        <follow-card></follow-card>
+      <div class="follower-list-item" v-for="(item, index) in followersList" :key="item.username" v-show="!loading">
+        <follow-card :cardIndex="index" @setFollow="setFollow" :userInfo="item"></follow-card>
       </div>
     </div>
-    <div class="page-opt d-flex flex-jcc">
-      <v-btn class="before-btn" @click="switchPage(-1)" :disabled="p<=1">上一页</v-btn>
-      <v-btn color="primary" class="after-btn" @click="switchPage(1)">下一页</v-btn>
+    <div class="followers-tip flex-jcc" v-show="showNothingTip">
+      <div class="tip-content d-flex flex-clo flex-ai" v-if="isSelfProfile">
+        <span class="text-describe">你还没有粉丝...</span>
+        <span class="text-describe">创造优秀作品，提升你在社区的影响力！</span>
+        <router-link to="/newWork">
+          <v-btn color="primary">
+            <v-icon left>mdi-plus</v-icon>新建实例
+          </v-btn>
+        </router-link>
+      </div>
+      <div class="tip-content d-flex flex-clo flex-ai" v-else>
+        <span class="title-lg">🍃</span>
+        <span class="title-sm text-describe">这里空空如也...</span>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState, mapGetters } from 'vuex'
 import FollowSkeleton from '@components/skeleton/followSkeleton'
 import FollowCard from '@components/followCard'
+import * as p2b from '@utils/paramsToBase64'
 export default {
+  name: 'Followers',
   data() {
     return {
-      p: 1,
       followersList: [],
       loading: true,
+      nothing: true,
+      showNothingTip: false,
     }
   },
   created() {
-    this.followersList = Array.from({ length: 20 }, (_, i) => i + 20)
-    let p = this.$route.query.p
-    if (p) {
-      p = parseInt(p)
-      this.p = p > 1 ? p : 1
-    } else {
-      this.p = 1
-    }
-    this.search()
+    this.init()
+  },
+  computed: {
+    ...mapState(['curUserDetail']),
+    ...mapGetters(['isSelfProfile']),
   },
   methods: {
-    switchPage(changeNum) {
-      this.$router.push({
-        path: 'following',
-        query: { p: (this.p += changeNum) },
-      })
-      this.search()
+    init() {
+      let page = 1
+      let f = this.$route.query.f
+      if (f) {
+        ;({ page } = p2b.decode(f))
+        page = parseInt(page)
+      }
+      this.search(page)
     },
-    search(p) {
-      p = p || this.p
+    async search(page) {
       this.loading = true
-      setTimeout(() => {
-        this.loading = false
-      }, 5000)
+      this.nothing = false
+      try {
+        const { state, data } = await this.$http.searchFollowers({
+          currentPage: page,
+          username: this.curUserDetail.username,
+        })
+        if (state) {
+          const { isFirstPage, isLastPage, list, total } = data
+          this.nothing = list.length === 0
+          this.showNothingTip = list.length === 0
+          this.followersList = list
+          this.$emit('setPageConn', isFirstPage, isLastPage)
+          this.$emit('updateNum', 'followers', total)
+          this.$message.success('查询成功！')
+        } else {
+          this.$message.error('查询失败！')
+        }
+      } catch (err) {
+        console.log(err)
+      }
+      this.loading = false
+    },
+    setFollow(isFollow, index) {
+      this.followersList[index].myFollow = isFollow
     },
   },
   components: {
-    'follow-skeleton': FollowSkeleton,
-    'follow-card': FollowCard,
+    FollowSkeleton,
+    FollowCard,
   },
 }
 </script>
@@ -73,6 +106,18 @@ export default {
       margin-right: 15px;
     }
   }
+  .followers-tip {
+    display: flex;
+    padding: 50px 0 150px 0;
+    .tip-content {
+      background-color: $deep-4;
+      padding: 25px 50px;
+      border-radius: 5px;
+      span {
+        margin-bottom: 10px;
+      }
+    }
+  }
 }
 @include Mobile {
   #followers {