优化分享组件

src/App.vue

@@ -1,14 +1,14 @@
 <template>
-    <router-view v-slot="{ Component }">
-      <transition name="fade">
-        <Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
-      </transition>
-      <transition :name="transitionName">
-<!--        <keep-alive>-->
-          <component :is="Component"/>
-<!--        </keep-alive>-->
-      </transition>
-    </router-view>
+  <router-view v-slot="{ Component }">
+    <transition name="fade">
+      <Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
+    </transition>
+    <transition :name="transitionName">
+      <!--        <keep-alive>-->
+      <component :is="Component"/>
+      <!--        </keep-alive>-->
+    </transition>
+  </router-view>
 
 </template>
 
@@ -46,6 +46,7 @@ export default {
 
       const routeDeep = [
         '/message', '/attention', '/home', '/me', '/publish',
+        '/home/share-to-friend',
         '/country-choose',
         '/edit-userinfo',
         '/edit-userinfo-item',
@@ -88,6 +89,9 @@ export default {
       this.transitionName = toDepth > fromDepth ? 'go' : 'back'
     }
   },
+  mounted() {
+    this.$store.dispatch('getFriends')
+  },
 }
 </script>
 <style lang="less">

src/api/index.js

@@ -1,5 +1,7 @@
 import videos from './videos'
+import user from './user'
 
 export default {
   videos,
+  user
 }

src/api/user.js

@@ -0,0 +1,7 @@
+import request from "../utils/request";
+
+export default {
+  friends(params, data) {
+    return request({url: '/user/friends', method: 'get', params, data})
+  },
+}

src/components/Share.vue

@@ -18,11 +18,11 @@
       </div>
       <div class="line"></div>
       <div class="shares ">
-        <div class="share-to " @click="showShareDialog = true">
+        <div class="share-to " @click="$nav('/home/share-to-friend')">
           <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
           <span>私信朋友</span>
         </div>
-        <div class="share-to ">
+        <div class="share-to" >
           <img src="../assets/img/icon/components/video/torichang.png" alt="">
           <span>分享日常</span>
         </div>

src/pages/home/Index2.vue

@@ -384,7 +384,7 @@ export default {
       this.loading = true
       let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
       this.loading = false
-      if (res.code === this.SUCCESS_CODE) {
+      if (res.code === this.SUCCESS) {
         this.totalSize = res.data.count
         this.videos = this.videos.concat(res.data.list)
         // this.videos = this.$clone(this.localVideos)

src/pages/me/Me.vue

@@ -447,7 +447,7 @@ export default {
           this.loadings['loading' + newVal] = true
           let res = await this.$api.videos.collect({pageNo: this.videos.collect.pageNo, pageSize: this.pageSize,})
           this.loadings['loading' + newVal] = false
-          if (res.code === this.SUCCESS_CODE) this.videos.collect = res.data
+          if (res.code === this.SUCCESS) this.videos.collect = res.data
         }
       } else {
         if (videoOb.total === -1) {
@@ -456,15 +456,15 @@ export default {
           switch (newVal) {
             case 0:
               res = await this.$api.videos.my({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
-              if (res.code === this.SUCCESS_CODE) this.videos.my = res.data
+              if (res.code === this.SUCCESS) this.videos.my = res.data
               break
             case 1:
               res = await this.$api.videos.private({pageNo: this.videos.private.pageNo, pageSize: this.pageSize,})
-              if (res.code === this.SUCCESS_CODE) this.videos.private = res.data
+              if (res.code === this.SUCCESS) this.videos.private = res.data
               break
             case 2:
               res = await this.$api.videos.like({pageNo: this.videos.like.pageNo, pageSize: this.pageSize,})
-              if (res.code === this.SUCCESS_CODE) this.videos.like = res.data
+              if (res.code === this.SUCCESS) this.videos.like = res.data
               break
           }
           this.loadings['loading' + newVal] = false
@@ -521,7 +521,7 @@ export default {
             break
         }
         this.loadings['loading' + this.contentIndex] = false
-        if (res.code === this.SUCCESS_CODE) {
+        if (res.code === this.SUCCESS) {
           videoOb.list = videoOb.list.concat(res.data.list)
         }
       }

src/pages/me/Me3.vue

@@ -426,7 +426,7 @@ export default {
           this.loadings['loading' + newVal] = true
           let res = await this.$api.videos.collect({pageNo: this.videos.collect.pageNo, pageSize: this.pageSize,})
           this.loadings['loading' + newVal] = false
-          if (res.code === this.SUCCESS_CODE) this.videos.collect = res.data
+          if (res.code === this.SUCCESS) this.videos.collect = res.data
         }
       } else {
         if (videoOb.total === -1) {
@@ -435,15 +435,15 @@ export default {
           switch (newVal) {
             case 0:
               res = await this.$api.videos.my({pageNo: this.videos.my.pageNo, pageSize: this.pageSize,})
-              if (res.code === this.SUCCESS_CODE) this.videos.my = res.data
+              if (res.code === this.SUCCESS) this.videos.my = res.data
               break
             case 1:
               res = await this.$api.videos.private({pageNo: this.videos.private.pageNo, pageSize: this.pageSize,})
-              if (res.code === this.SUCCESS_CODE) this.videos.private = res.data
+              if (res.code === this.SUCCESS) this.videos.private = res.data
               break
             case 2:
               res = await this.$api.videos.like({pageNo: this.videos.like.pageNo, pageSize: this.pageSize,})
-              if (res.code === this.SUCCESS_CODE) this.videos.like = res.data
+              if (res.code === this.SUCCESS) this.videos.like = res.data
               break
           }
           this.loadings['loading' + newVal] = false
@@ -500,7 +500,7 @@ export default {
             break
         }
         this.loadings['loading' + this.contentIndex] = false
-        if (res.code === this.SUCCESS_CODE) {
+        if (res.code === this.SUCCESS) {
           videoOb.list = videoOb.list.concat(res.data.list)
         }
       }

src/router/index.js

@@ -43,6 +43,7 @@ import Help from "../pages/login/Help";
 import Test from "../pages/Test";
 import Test2 from "../pages/Test2";
 import Test3 from "../pages/Test3";
+import Share2Friend from "../pages/home/Share2Friend";
 
 const routes = [
   // {path: '', component: Music},
@@ -52,6 +53,7 @@ const routes = [
   {path: '/test2', component: Test2},
   {path: '/test3', component: Test3},
   {path: '/home', component: Index},
+  {path: '/home/share-to-friend', component: Share2Friend},
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},
   {path: '/message', component: Message},

src/store/index.js

@@ -1,5 +1,7 @@
 import * as Vuex from "vuex";
 import enums from '../utils/enums'
+import api from '../api/index'
+import CONST_VAR from "../utils/const_var";
 
 const store = Vuex.createStore({
   state: {
@@ -24,182 +26,29 @@ const store = Vuex.createStore({
         displayType: enums.DISPLAY_TYPE.ALL,
       }
     },
-    friends: [
-      {
-        avatar: require('../assets/img/icon/avatar/1.png'),
-        name: '倒影着稚嫩的少年',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/2.png'),
-        name: '冒安志',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/3.png'),
-        name: '凌依晨',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/4.png'),
-        name: '蔡傲安',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/5.png'),
-        name: '甫韦茹',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/6.png'),
-        name: '马佳婉清',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/7.png'),
-        name: '富察昕昕',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/8.png'),
-        name: '章昊苍',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/9.png'),
-        name: '买易槐',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/10.png'),
-        name: '阎韶丽',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/11.png'),
-        name: '倒影着稚嫩的少年',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/12.png'),
-        name: '思念一直在',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/13.png'),
-        name: '幸福泡泡',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/14.png'),
-        name: '原味青春',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/15.png'),
-        name: '℉阳光下的小情绪',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/16.png'),
-        name: '看，熟悉旳风景',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/17.png'),
-        name: '心若向阳无谓伤悲',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/18.png'),
-        name: '蓝天下的迷彩?',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/19.png'),
-        name: '◇、_保持微笑ゞ',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/20.png'),
-        name: '浅唱↘我们的歌',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/21.png'),
-        name: 'dear°学会微笑',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/22.png'),
-        name: '〤伱的微笑',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/23.png'),
-        name: '一只喵的旅行。',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/24.png'),
-        name: '为你锁住心',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/25.png'),
-        name: '一起走过的日子°',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/26.png'),
-        name: '‘心’之天空',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-      {
-        avatar: require('../assets/img/icon/avatar/27.png'),
-        name: '好◇°我会Yi直在●',
-        lastLoginTime: '2021-08-25 12:12:12',
-        select:false
-      },
-
-    ]
+    friends: []
   },
   mutations: {
     setUserinfo(store, val) {
       store.userinfo = val
     },
+    setFriends(store, val) {
+      store.friends = val
+    },
     setMaskDialog(store, val) {
       store.maskDialog = val.state
       if (val.mode) {
         store.maskDialogMode = val.mode
       }
     }
+  },
+  actions: {
+    async getFriends(context) {
+      let res = await api.user.friends()
+      if (res.code === CONST_VAR.SUCCESS) {
+        context.commit('setFriends', res.data)
+      }
+    }
   }
 })
 

src/utils/mixin.js

@@ -33,7 +33,7 @@ export default {
   },
   data() {
     return {
-      SUCCESS_CODE: 200
+      SUCCESS: 200
     }
   },
   methods: {