消息页面添加loading

src/pages/me/RequestUpdate.vue

@@ -10,7 +10,8 @@
         </div>
       </template>
     </BaseHeader>
-    <div class="content">
+    <Loading v-if="loading"/>
+    <div v-else class="content">
       <div class="none" v-if="false">
         <img src="../../assets/img/icon/none-bg1.webp" alt="">
         <div class="title">暂时还没有粉丝点击“求更新”</div>
@@ -66,6 +67,7 @@ export default {
   data() {
     return {
       isShowOption: false,
+      loading: false,
       openRequestUpdate: true,
     }
   },
@@ -73,8 +75,14 @@ export default {
     ...mapState(['friends'])
   },
   created() {
+    this.getData()
   },
   methods: {
+    async getData() {
+      this.loading = true
+      await this.$sleep(700)
+      this.loading = false
+    },
     toggleRequestUpdate() {
       this.openRequestUpdate = !this.openRequestUpdate
       this.isShowOption = false

src/pages/message/AllMessage.vue

@@ -40,7 +40,9 @@
       </div>
     </transition>
     <div class="content">
+      <Loading v-if="loading"/>
       <Scroll
+          v-else
           ref="scroll"
           :use-refresh="true"
           @refresh="refresh"
@@ -106,9 +108,9 @@
           <img src="../../assets/img/icon/about-gray.png" alt="">
         </div>
         <Peoples v-model:list="recommend"
-                 :loading="loading"
+                 :loading="loadingMore"
                  mode="recommend"/>
-        <Loading :is-full-screen="false" v-if="loading"/>
+        <Loading :is-full-screen="false" v-if="loadingMore"/>
       </Scroll>
     </div>
   </div>
@@ -133,6 +135,7 @@ export default {
   data() {
     return {
       loading: false,
+      loadingMore: false,
       isShowType: false,
       showAll: false,
       recommend: [],
@@ -162,14 +165,20 @@ export default {
     }
   },
   created() {
-    this.recommend = this.$clone(this.friends.all)
+    this.getData()
-    this.fans = this.$clone(this.friends.all)
-    this.recommend.map(v => {
-      v.type = -1
-    })
-    this.messages = this.$clone(resource.videos)
   },
   methods: {
+    async getData() {
+      this.loading = true
+      await this.$sleep(800)
+      this.loading = false
+      this.recommend = this.$clone(this.friends.all)
+      this.fans = this.$clone(this.friends.all)
+      this.recommend.map(v => {
+        v.type = -1
+      })
+      this.messages = this.$clone(resource.videos)
+    },
     toggleShowType(index) {
       this.selectShowType = index
       this.isShowType = false
@@ -183,10 +192,10 @@ export default {
       this.$refs.scroll.refreshEnd()
     },
     async loadData() {
-      if (this.loading) return
+      if (this.loadingMore) return
-      this.loading = true
+      this.loadingMore = true
       await this.$sleep(500)
-      this.loading = false
+      this.loadingMore = false
       let temp = this.$clone(this.friends.all)
       temp.map(v => {
         v.type = -1

src/pages/message/Fans.vue

@@ -6,18 +6,19 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <Scroll @pulldown="loadData">
+      <Loading  v-if="loading"/>
+      <Scroll @pulldown="loadData" v-else>
         <Peoples v-model:list="fans"
-                 :loading="loading"
+                 :loading="loadingMore"
                  mode="fans"/>
         <div class="title">
           <span>朋友推荐</span>
           <img src="../../assets/img/icon/about-gray.png" alt="">
         </div>
         <Peoples v-model:list="recommend"
-                 :loading="loading"
+                 :loading="loadingMore"
                  mode="recommend"/>
-        <Loading :is-full-screen="false" v-if="loading"/>
+        <Loading :is-full-screen="false" v-if="loadingMore"/>
       </Scroll>
     </div>
   </div>
@@ -40,6 +41,7 @@ export default {
   data() {
     return {
       loading: false,
+      loadingMore: false,
       recommend: [],
       fans: [],
     }
@@ -48,22 +50,25 @@ export default {
     ...mapState(['userinfo', 'friends'])
   },
   created() {
-    this.recommend = this.$clone(this.friends.all)
+    this.getData()
-    this.fans = this.$clone(this.friends.all)
-    this.recommend.map(v => {
-      v.type = -1
-    })
   },
   methods: {
-    remove(index) {
+    async getData() {
-      this.$notice('将不会再为你推荐该用户')
-      this.recommend.splice(index, 1)
-    },
-    async loadData() {
-      if (this.loading) return
       this.loading = true
       await this.$sleep(500)
       this.loading = false
+
+      this.recommend = this.$clone(this.friends.all)
+      this.fans = this.$clone(this.friends.all)
+      this.recommend.map(v => {
+        v.type = -1
+      })
+    },
+    async loadData() {
+      if (this.loadingMore) return
+      this.loadingMore = true
+      await this.$sleep(500)
+      this.loadingMore = false
       let temp = this.$clone(this.friends.all)
       temp.map(v => {
         v.type = -1

src/pages/message/Message.vue

@@ -464,6 +464,11 @@ export default {
       v.type = -2
     })
   },
+  mounted() {
+    setTimeout(()=>{
+      // this.isShowRecommend = true
+    },1000)
+  },
   methods: {
     async loadRecommendData() {
       if (this.loading) return

src/pages/message/notice/DouyinHelper.vue

@@ -5,7 +5,8 @@
         <span class="f16">抖音小助手</span>
       </template>
     </BaseHeader>
-    <div class="content" ref="content">
+    <Loading v-if="loading"/>
+    <div class="content" ref="content" v-else>
       <NoMore/>
       <div class="list">
         <!--TODO　超过3行显示全文-->
@@ -30,11 +31,9 @@ import {nextTick} from "vue";
 export default {
   name: "DouyinHelper",
   components: {},
-  props: {
-    modelValue: false
-  },
   data() {
     return {
+      loading:false,
       list: [
         {
           read: false,
@@ -78,14 +77,21 @@ export default {
   },
   computed: {},
   created() {
+    this.getData()
   },
   mounted() {
-    nextTick(() => {
-      let content = this.$refs['content']
-      content.scrollTo({top: content.scrollHeight - content.clientHeight})
-    })
   },
   methods: {
+    async getData(){
+      this.loading = true
+      await this.$sleep(700)
+      this.loading = false
+
+      nextTick(() => {
+        let content = this.$refs['content']
+        content.scrollTo({top: content.scrollHeight - content.clientHeight})
+      })
+    },
     goDetail(item) {
       item.read = true
       this.$no()

src/pages/message/notice/LiveNotice.vue

@@ -8,7 +8,8 @@
         <span class="f14" @click="$nav('/message/notice-setting',{ type : 'LIVE' })">通知设置</span>
       </template>
     </BaseHeader>
-    <div class="content">
+    <Loading v-if="loading"/>
+    <div class="content" v-else>
       <div class="list" ref="content">
         <NoMore/>
         <div class="item" v-for="item in list" @click="goDetail(item)">
@@ -33,6 +34,7 @@ export default {
   },
   data() {
     return {
+      loading:false,
       list: [
         {
           title: '直播举报反馈',
@@ -50,14 +52,19 @@ export default {
   watch: {},
   computed: {},
   created() {
-  },
+    this.getData()
-  mounted() {
-    nextTick(() => {
-      let content = this.$refs['content']
-      content.scrollTo({top: content.scrollHeight - content.clientHeight})
-    })
   },
   methods: {
+    async getData() {
+      this.loading = true
+      await this.$sleep(700)
+      this.loading = false
+
+      nextTick(() => {
+        let content = this.$refs['content']
+        content.scrollTo({top: content.scrollHeight - content.clientHeight})
+      })
+    },
     goDetail(item) {
       item.read = true
       if (item.detail) {

src/pages/message/notice/MoneyNotice.vue

@@ -8,7 +8,8 @@
         <span class="f14" @click="$nav('/message/notice-setting',{ type : 'MONEY' })">通知设置</span>
       </template>
     </BaseHeader>
-    <div class="content">
+    <Loading v-if="loading"/>
+    <div class="content" v-else>
       <div class="list" ref="content">
         <NoMore/>
         <!--TODO　超过3行显示全文-->
@@ -78,6 +79,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       isShowSetting: false,
       openNotice: false,
       list: [
@@ -102,17 +104,21 @@ export default {
       ]
     }
   },
-  watch: {},
-  computed: {},
   created() {
+    this.getData()
   },
-  mounted() {
+  methods: {
-    nextTick(() => {
+    async getData() {
-      let content = this.$refs['content']
+      this.loading = true
-      content.scrollTo({top: content.scrollHeight - content.clientHeight})
+      await this.$sleep(700)
-    })
+      this.loading = false
-  },
+
-  methods: {}
+      nextTick(() => {
+        let content = this.$refs['content']
+        content.scrollTo({top: content.scrollHeight - content.clientHeight})
+      })
+    },
+  }
 }
 </script>
 

src/pages/message/notice/SystemNotice.vue

@@ -8,7 +8,8 @@
         <span class="f14" @click="$nav('/message/notice-setting',{ type : 'SYSTEM' })">通知设置</span>
       </template>
     </BaseHeader>
-    <div class="content">
+    <Loading v-if="loading"/>
+    <div class="content" v-else>
       <div class="list" ref="content">
         <NoMore/>
         <!--TODO　超过3行显示全文-->
@@ -64,11 +65,9 @@ import Mask from "../../../components/Mask";
 export default {
   name: "SystemNotice",
   components: {Mask},
-  props: {
-    modelValue: false
-  },
   data() {
     return {
+      loading: false,
       isShowMask: false,
       isShowLeftHover: false,
       isShowRightHover: false,
@@ -124,14 +123,21 @@ export default {
   },
   computed: {},
   created() {
+    this.getData()
   },
   mounted() {
-    nextTick(() => {
-      let content = this.$refs['content']
-      content.scrollTo({top: content.scrollHeight - content.clientHeight})
-    })
   },
   methods: {
+    async getData() {
+      this.loading = true
+      await this.$sleep(700)
+      this.loading = false
+
+      nextTick(() => {
+        let content = this.$refs['content']
+        content.scrollTo({top: content.scrollHeight - content.clientHeight})
+      })
+    },
     goDetail(item) {
       item.read = true
       if (item.detail) {

src/pages/message/notice/TaskNotice.vue

@@ -8,7 +8,8 @@
         <span class="f14" @click="$nav('/message/notice-setting',{ type : 'TASK' })">通知设置</span>
       </template>
     </BaseHeader>
-    <div class="content">
+    <Loading v-if="loading"/>
+    <div class="content" v-else>
       <div class="list" ref="content">
         <NoMore/>
         <!--TODO　超过3行显示全文-->
@@ -67,6 +68,7 @@ export default {
   },
   data() {
     return {
+      loading:false,
       isShowSetting: false,
       openNotice: false,
       list: [
@@ -90,14 +92,19 @@ export default {
   watch: {},
   computed: {},
   created() {
-  },
+    this.getData()
-  mounted() {
-    nextTick(() => {
-      let content = this.$refs['content']
-      content.scrollTo({top: content.scrollHeight - content.clientHeight})
-    })
   },
   methods: {
+    async getData() {
+      this.loading = true
+      await this.$sleep(700)
+      this.loading = false
+
+      nextTick(() => {
+        let content = this.$refs['content']
+        content.scrollTo({top: content.scrollHeight - content.clientHeight})
+      })
+    },
     goDetail(item) {
       item.read = true
       if (item.detail) {

src/pages/people/components/People.vue

@@ -153,7 +153,7 @@ export default {
 .People {
   transition: all 0.3s ease;
   width: 100%;
-  height: 7rem;
+  height: 8rem;
   display: flex;
   align-items: center;
   position: relative;
@@ -207,11 +207,11 @@ export default {
         border-radius: .2rem;
         background: rgb(58, 58, 67);
         font-size: 1.2rem;
-        padding: .4rem 0;
+        padding: .5rem 0;
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 5.5rem;
+        width: 5.8rem;
 
         &:only-child {
           width: 7rem;