用户关系功能开发

src/api/user/user.js

@@ -3,6 +3,9 @@ import $axios from '../index'
 const userApi = {
   myInfoApi: '/api/user/info/my',
   userInfoApi: '/api/user/info',
+  followUserApi: '/api/user/relation/follow',
+  unfollowUserApi: '/api/user/relation/unfollow',
+  checkRelationApi: '/api/user/relation/check',
   vipPlanApi: '/api/user/vip/plan',
   vipOrderApi: '/api/user/vip/order',
   vipPayApi: '/api/user/vip/pay'
@@ -16,6 +19,20 @@ export function getUserInfo(userId) {
   return $axios.get(userApi.userInfoApi + '?userId=' + userId)
 }
 
+// 关注用户
+export function followUser(followingId) {
+  return $axios.post(userApi.followUserApi + '/' + followingId)
+}
+
+// 取消关注用户
+export function unfollowUser(followingId) {
+  return $axios.post(userApi.unfollowUserApi + '/' + followingId)
+}
+
+export function checkRelation(userId) {
+  return $axios.get(userApi.checkRelationApi + '/' + userId)
+}
+
 export function getVipPlan() {
   return $axios.get(userApi.vipPlanApi)
 }

src/components/player/player.vue

@@ -59,17 +59,17 @@
       </v-form>
     </v-dialog>
     <v-snackbar
-        v-model="showMessage"
-        :top="true"
-        :timeout="1000"
+      v-model="showMessage"
+      :top="true"
+      :timeout="1000"
     >
       {{ message }}
       <template v-slot:action="{ attrs }">
         <v-btn
-            color="pink"
-            text
-            v-bind="attrs"
-            @click="showMessage = false"
+          color="pink"
+          text
+          v-bind="attrs"
+          @click="showMessage = false"
         >
           关闭
         </v-btn>

src/views/user/user-home.vue

@@ -33,7 +33,10 @@
             class="hidden-sm-and-down ml-0 pl-4"
           >
             <!--<v-btn color="primary" @click="goToSetting">自定义频道</v-btn> <v-btn color="primary" @click="goToStudio">创作中心</v-btn>-->
-            <v-btn color="primary" @click="followUser">关注TA</v-btn>
+            <v-btn color="primary" @click="followUserWrapper">
+              <span v-if="isFollowed">已关注</span>
+              <span v-if="!isFollowed">关注TA</span>
+            </v-btn>
           </v-col>
         </v-row>
         <v-row>
@@ -81,13 +84,41 @@
         </v-row>
       </v-card>
     </div>
+    <v-dialog
+      v-model="showDialog"
+      persistent
+      max-width="600px"
+    >
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">已关注, 确定要取消关注?</span>
+        </v-card-title>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="showDialog = false"
+          >
+            取消
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="unfollowUserWrapper"
+          >
+            确定
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script>
 import Power from '@/utils/check-power.vue'
 import TimeUtil from '@/utils/time-util.vue'
-import { getUserInfo } from '@/api/user/user'
+import { getUserInfo, followUser, unfollowUser, checkRelation } from '@/api/user/user'
 import { userRecentlyVideoList } from '@/api/media/video'
 import VideoCard from '@/components/card/video-card.vue'
 
@@ -105,7 +136,9 @@ export default {
       userInfo: {},
       cardList: [],
       page: 1,
-      type: 1
+      type: 1,
+      isFollowed: false,
+      showDialog: false
     }
   },
   created() {
@@ -120,6 +153,7 @@ export default {
       this.userId = parseInt(userIdStr)
       this.getUserInfo1(this.userId)
     }
+    this.checkRelationWrapper()
     this.getVideoList(this.page)
   },
   methods: {
@@ -175,8 +209,42 @@ export default {
     goToSetting() {
       this.$router.push('/user/account')
     },
-    followUser() {
-      console.log('关注用户')
+    checkRelationWrapper() {
+      checkRelation(this.userId).then(res => {
+        if (res.code === 0) {
+          this.isFollowed = res.data
+        } else {
+          alert(res.data)
+        }
+      })
+    },
+    followUserWrapper() {
+      if (this.isFollowed) {
+        this.showDialog = true
+        return
+      }
+
+      followUser(this.userId).then(res => {
+        if (res.code === 0) {
+          this.isFollowed = true
+          this.message = '已关注'
+          this.showMessage = true
+        }
+      })
+    },
+    unfollowUserWrapper() {
+      if (!this.isFollowed) {
+        return
+      }
+
+      this.showDialog = false
+      unfollowUser(this.userId).then(res => {
+        if (res.code === 0) {
+          this.isFollowed = false
+          this.message = '已取消关注'
+          this.showMessage = true
+        }
+      })
     }
   }
 }

src/views/video/video.vue

@@ -254,8 +254,9 @@
                 <span v-text="videoData.username" />
               </router-link>
               <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
-              <v-btn small outlined color="primary" @click="followingUser">
-                <span>关注</span>
+              <v-btn small outlined color="primary" @click="followUserWrapper">
+                <span v-if="isFollowed">已关注</span>
+                <span v-if="!isFollowed">关注</span>
                 <span v-html="'&nbsp;&nbsp;'" />
                 <span v-text="videoData.followerCount" />
               </v-btn>
@@ -286,6 +287,34 @@
         </v-col>
       </v-row>
     </v-container>
+    <v-dialog
+      v-model="showUnfollowDialog"
+      persistent
+      max-width="600px"
+    >
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">已关注, 确定要取消关注?</span>
+        </v-card-title>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="showUnfollowDialog = false"
+          >
+            取消
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="unfollowUserWrapper"
+          >
+            确定
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     <v-snackbar
       v-model="showMessage"
       :top="true"
@@ -309,6 +338,7 @@
 <script>
 import { similarVideo, videoInfo, getDisplayedVideoList } from '@/api/media/video'
 import { collectVideo } from '@/api/media/collection'
+import { followUser, unfollowUser, checkRelation } from '@/api/user/user'
 import ItemCard from '@/components/card/item-card.vue'
 import CommentCard from '@/components/card/comment-card.vue'
 import VideoPlayer from '@/components/player/player.vue'
@@ -346,6 +376,9 @@ export default {
       vidProp: null,
       benched: 0,
       switch1: true,
+      isFollowed: false,
+      showUnfollowDialog: false,
+      userId: null,
       showMessage: false,
       message: ''
     }
@@ -388,6 +421,8 @@ export default {
             this.videoData = vidData
             document.title = vidData.title
 
+            this.userId = res.data.userId
+            this.checkRelationWrapper(this.userId)
             const vidProp = {}
             vidProp.videoId = vidData.videoId
             vidProp.coverUrl = vidData.coverUrl
@@ -428,8 +463,43 @@ export default {
           console.error(error.message)
         })
     },
-    followingUser() {
-      console.log('关注 UP 主')
+    checkRelationWrapper(userId) {
+      checkRelation(userId).then(res => {
+        if (res.code === 0) {
+          this.isFollowed = res.data
+        } else {
+          alert(res.data)
+        }
+      })
+    },
+    followUserWrapper() {
+      console.log(this.isFollowed)
+      if (this.isFollowed) {
+        this.showUnfollowDialog = true
+        return
+      }
+
+      followUser(this.userId).then(res => {
+        if (res.code === 0) {
+          this.isFollowed = true
+          this.message = '已关注'
+          this.showMessage = true
+        }
+      })
+    },
+    unfollowUserWrapper() {
+      if (!this.isFollowed) {
+        return
+      }
+
+      this.showUnfollowDialog = false
+      unfollowUser(this.userId).then(res => {
+        if (res.code === 0) {
+          this.isFollowed = false
+          this.message = '已取消关注'
+          this.showMessage = true
+        }
+      })
     },
     likeVideo() {
       console.log('点赞 ' + this.videoId)