添加关注和粉丝页面

README.md

@@ -26,33 +26,10 @@
 -- 添加朋友|☑
 -- 我的音乐|☑
 -- 抖音商城|0
--- 收藏视频\音乐|50%
+-- 收藏视频\音乐|☑
 -- 右侧菜单子页面|10%
 -- 设置|☑
--- -- 子页面|☑
+-- -- 具体设置页面|0
 登录\注册|☑
 首页|
-
+ 
-## 目标功能
-
-- [x] 首页
-- [x] 直播
-- [x] 登录、注册
-- [x] 密码找回
-- [x] 修改个人资料
-- [x] 个人信息浏览（已发布、点赞的视频）
-- [x] 上传头像
-- [x] 发送邮件验证
-- [x] 视频浏览
-- [x] 关注与粉丝
-- [x] 视频点赞、评论点赞
-- [x] 视频评论、回复评论
-- [x] 评论@用户
-- [x] 关注动态浏览
-- [x] 好友（互相关注）间私信
-- [x] 发布动态
-- [x] 搜索视频，用户（根据视频描述，根据昵称或id）
-- [x] 私信、被关注、被评论、被@、被点赞、关注人发布动态的消息提醒
-- [ ] 删除评论
-- [ ] 删除视频
-- [ ] 分享

src/App.vue

@@ -66,7 +66,10 @@ export default {
         '/choose-location',
         '/choose-province',
         '/choose-city',
-        '/find-acquaintance',
+
+        '/people/follow-and-fans',
+        '/people/find-acquaintance',
+
         '/address-list',
         '/video-detail',
         '/my-card',

src/pages/home/Index2.vue

@@ -122,6 +122,7 @@
 
     <Share v-model="isSharing"
            ref="share"
+           page-id="home-index"
            @dislike="dislike"
            :videoId="videos[videoActiveIndex]?.id"
            :canDownload="videos[videoActiveIndex]?.canDownload"

src/pages/me/Me.vue

@@ -33,17 +33,17 @@
                 <img src="../../assets/img/icon/avatar/2.png" class="head-image"
                      @click="previewImg = require('../../assets/img/icon/avatar/2.png')">
                 <div class="heat">
-                  <div class="text">
+                  <div class="text" @click="isShowStarCount = true">
                     <span>获赞</span>
-                    <span class="num">{{ $likeNum(localAuthor.aweme_count) }}</span>
+                    <span class="num">{{ $likeNum(userinfo.aweme_count) }}</span>
                   </div>
-                  <div class="text">
+                  <div class="text" @click="$nav('/people/follow-and-fans',{type:0})">
                     <span>关注</span>
-                    <span class="num">{{ $likeNum(localAuthor.following_count) }}</span>
+                    <span class="num">{{ $likeNum(userinfo.following_count) }}</span>
                   </div>
-                  <div class="text">
+                  <div class="text" @click="$nav('/people/follow-and-fans',{type:1})">
                     <span>粉丝</span>
-                    <span class="num">{{ $likeNum(localAuthor.follower_count) }}</span>
+                    <span class="num">{{ $likeNum(userinfo.follower_count) }}</span>
                   </div>
                 </div>
               </div>
@@ -103,7 +103,7 @@
                 <div class="button" @click="$nav('/edit-userinfo')">
                   <span>主页访客</span>
                 </div>
-                <div class="button" @click="$nav('/find-acquaintance')">
+                <div class="button" @click="$nav('/people/find-acquaintance')">
                   <span>添加朋友</span>
                   <div class="not-read"></div>
                 </div>
@@ -323,6 +323,19 @@
         <img class="download" src="../../assets/img/icon/components/video/download.png" alt="" @click.stop="$no">
       </div>
     </transition>
+
+    <ConfirmDialog
+        v-model:visible="isShowStarCount"
+        :subtitle='`"${userinfo.nickname}"共获得${this.$likeNum(userinfo.aweme_count)}个赞`'
+        okText="确认"
+        cancelText="取消"
+        @ok="isShowStarCount = false"
+        @cancel="isShowStarCount = false"
+    >
+      <template v-slot:header>
+        <img style="width: 100%;" src="../../assets/img/icon/star-bg.png" alt="">
+      </template>
+    </ConfirmDialog>
   </div>
 </template>
 <script>
@@ -332,16 +345,18 @@ import Indicator from '../../components/slide/Indicator'
 import {nextTick} from 'vue'
 import {mapState} from "vuex";
 import bus from "../../utils/bus";
+import ConfirmDialog from "../../components/dialog/ConfirmDialog";
 
 export default {
   name: "Me",
-  components: {Posters, Footer, Indicator},
+  components: {Posters, Footer, Indicator, ConfirmDialog},
   data() {
     return {
       previewImg: '',
       contentIndex: 0,
       baseActiveIndex: 0,
       tabContents: [],
+      isShowStarCount: false,
       floatFixed: false,
       floatShowName: false,
       isScroll: false,

src/pages/me/MyCard.vue

@@ -2,7 +2,7 @@
   <div id='MyCard'>
     <div class="header">
       <back mode="light" @click="$back"/>
-<!--      todo 差一-->
+      <!--      todo 差一-->
       <img class="share" src="../../assets/img/icon/share-white.png" @click="isSharing = true">
     </div>
     <div class="content">
@@ -15,7 +15,7 @@
       <span class="notice">抖音扫一扫，立即关注我</span>
     </div>
     <div class="footer">
-<!--      <div class="btn" @click="$nav('/scan')">-->
+      <!--      <div class="btn" @click="$nav('/scan')">-->
       <div class="btn" @click="$no">
         <div class="wrapper">
           <img src="../../assets/img/icon/scan.png" alt="">
@@ -33,33 +33,9 @@
     <Share v-model="isSharing"
            mode="qrcode"
            ref="share"
-           @showDouyinCode="showDouyinCode = true"
+           page-id="MyCard"
-           @showShare2WeChatZone="shareType = 2"
-           @share2WeChat="shareType = 3"
-           @share2QQZone="shareType = 4"
-           @share2QQ="shareType = 5"
-           @share2Webo="shareType = 8"
-           @ShareToFriend="delayShowDialog( e => this.shareToFriend = true)"
     />
 
-
-    <ConfirmDialog
-        v-model:visible="showSharePassword"
-        title="你的口令已复制"
-        subtitle="0F.:/ a【风就应该自由要什么归宿】长按复制此条消息，打开抖音搜索，聆听音乐##kwu3VCixHl8##[抖音口令]"
-        :okText="okText"
-        cancelText="不分享了"
-        @ok="shareType = -1"
-        @cancel="shareType = -1"
-    >
-      <template v-slot:header>
-        <img style="width: 100%;" src="../../assets/img/icon/share-password.webp" alt="">
-      </template>
-    </ConfirmDialog>
-
-    <ShareToFriend v-model="shareToFriend"/>
-
-
   </div>
 </template>
 <script>
@@ -71,8 +47,6 @@ export default {
   name: "MyCard",
   components: {
     Share,
-    ConfirmDialog,
-    ShareToFriend
   },
   data() {
     return {

src/pages/me/Uploader.vue

@@ -133,7 +133,7 @@
                 <span>你可能感兴趣</span>
                 <img src="../../assets/img/icon/about-gray.png">
               </div>
-              <div class="right" @click="$nav('/find-acquaintance')">
+              <div class="right" @click="$nav('/people/find-acquaintance')">
                 <span>查看更多</span>
                 <back direction="right"></back>
               </div>
@@ -150,7 +150,7 @@
                   <back img="close" scale=".6"></back>
                 </div>
               </div>
-              <div class="more" @click="$nav('/find-acquaintance')">
+              <div class="more" @click="$nav('/people/find-acquaintance')">
                 <div class="notice">
                   <div>点击查看</div>
                   <div>更多好友</div>

src/pages/me/collect/MusicCollect.vue

@@ -34,7 +34,7 @@
       <div class="process" :style="{width : process + 'px'}"></div>
       <div class="music-wrapper">
         <div class="music">
-          <div class="cover-wrapper">
+          <div class="cover-wrapper"  @click="togglePlay(currentItem,list)">
             <img v-lazy="$imgPreview(currentItem.cover)" alt="" class="cover">
             <img v-if="!currentItem.is_play" src="@/assets/img/icon/play-white.png" alt="" class="play">
             <img v-if="currentItem.is_play" src="@/assets/img/icon/pause-white.png" alt="" class="play">

src/pages/message/Message.vue

@@ -222,7 +222,7 @@ export default {
     createChatSearchKey(newVal) {
       if (newVal) {
         //TODO　搜索时仅仅判断是否包含了对应字符串，抖音做了拼音判断的
-        this.searchFriends = this.friends.filter(v => {
+        this.searchFriends = this.friends.all.filter(v => {
           if (v.name.includes(newVal)) return true
           return v.account.includes(newVal);
         })
@@ -259,6 +259,7 @@ export default {
   color: white;
 
   .create-chat-wrapper {
+    min-height: 70vh;
     padding-bottom: 6rem;
 
     .joined-chat {
@@ -424,6 +425,7 @@ export default {
   }
 
   .joined-chat-wrapper {
+    min-height: 70vh;
 
     .nav {
       font-size: 1.7rem;

src/pages/people/FollowAndFans.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="FollowAndFans" id="FollowAndFans">
+    <BaseHeader backMode="light">
+      <template v-slot:center>
+        <span class="f14">{{ userinfo.nickname }}</span>
+      </template>
+      <template v-slot:right>
+        <div>
+          <img src="../../assets/img/icon/people/add-user.png" style="width: 2rem;"
+               @click="$nav('/people/find-acquaintance')">
+        </div>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div class="indicator-wrapper">
+        <Indicator
+            tabStyleWidth="50%"
+            :tabTexts="['关注','粉丝']"
+            v-model:active-index="currentSlideItemIndex">
+        </Indicator>
+      </div>
+      <SlideRowList v-model:active-index="currentSlideItemIndex" style="height: calc(100vh - 11.1rem)">
+        <SlideItem class="tab1">
+          <Search v-model="searchKey" placeholder="搜索用户备注或名字" :is-show-text="false"/>
+          <div class="is-search" v-if="searchKey">
+            <div class="search-result" v-if="searchFriends.length">
+              <People v-for="item in searchFriends " :people="item"></People>
+            </div>
+            <div class="no-result" v-else>
+              <img src="../../assets/img/icon/no-result.png" alt="">
+              <span class="n1">搜索结果为空</span>
+              <span class="n2">没有搜索到相关内容</span>
+            </div>
+          </div>
+          <div class="no-search" v-else>
+            <div class="title">我的关注</div>
+            <People v-for="item in friends.all" :people="item"></People>
+          </div>
+
+        </SlideItem>
+        <SlideItem class="tab2">
+          <People v-for="item in friends.all" :people="item"></People>
+          <NoMore/>
+        </SlideItem>
+      </SlideRowList>
+    </div>
+  </div>
+</template>
+<script>
+import People from './components/People'
+import Search from '../../components/Search'
+import Indicator from '../../components/slide/Indicator'
+import FromBottomDialog from "../../components/dialog/FromBottomDialog";
+import {mapState} from "_vuex@4.0.2@vuex";
+
+export default {
+  name: "FindAcquaintance",
+  components: {
+    People,
+    Search,
+    Indicator,
+    FromBottomDialog
+  },
+  data() {
+    return {
+      findAddressListDialog: false,
+      moreOptionDialog: false,
+      outWebImgAccountDialog: false,
+      indicatorFixed: false,
+      isShowText: false,
+      isSearch: false,
+      searchKey: '',
+
+      currentSlideItemIndex: 0,
+      list: [
+        {
+          type: 1,
+        },
+        {
+          type: 2,
+        },
+        {
+          type: 3,
+        },
+        {
+          type: 4,
+        },
+        {
+          type: 5,
+        },
+      ],
+      searchFriends: []
+    }
+  },
+  computed: {
+    ...mapState(['userinfo', 'friends'])
+  },
+  watch: {
+    searchKey(newVal) {
+      if (newVal) {
+        //TODO　搜索时仅仅判断是否包含了对应字符串，抖音做了拼音判断的
+        this.searchFriends = this.friends.all.filter(v => {
+          if (v.name.includes(newVal)) return true
+          return v.account.includes(newVal);
+        })
+      } else {
+        this.searchFriends = []
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    async search() {
+      this.$showLoading()
+      await this.$sleep(500)
+      this.$hideLoading()
+      this.isSearch = true
+    },
+    back() {
+      if (this.isShowText) {
+        this.isShowText = false
+      } else {
+        this.$back()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/less/index";
+
+.FollowAndFans {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding-top: @header-height;
+
+    .indicator-wrapper {
+      padding: 0 @padding-page;
+    }
+
+    .search-ctn {
+      z-index: 9;
+      left: 0;
+      background: @main-bg;
+      position: fixed;
+      width: 100vw;
+      box-sizing: border-box;
+      padding: 1rem @padding-page 0 @padding-page;
+    }
+  }
+
+  .tab1, .tab2 {
+    overflow: auto;
+    padding: 0 @padding-page;
+    box-sizing: border-box;
+  }
+
+  .tab1 {
+    .title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 1rem;
+      color: @second-text-color;
+      font-size: 1.2rem;
+    }
+
+    .no-search {
+      padding-top: 6rem;
+    }
+
+    .is-search {
+      padding-top: 5rem;
+
+      .no-result {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        img {
+          margin-top: 15rem;
+          height: 15rem;
+        }
+
+        .n1 {
+          margin-top: 4rem;
+          font-size: 1.6rem;
+        }
+
+        .n2 {
+          margin-top: 2rem;
+          font-size: 1.2rem;
+          color: @second-text-color;
+        }
+      }
+    }
+  }
+
+}
+</style>

src/pages/people/components/People.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="People">
     <img v-if="people.type === 6" src="../../../assets/img/icon/add-light.png" alt="" class="add">
-    <img v-else src="../../../assets/img/icon/msg-icon1.png" alt="" class="head-image pull-left">
+    <img v-else :src="$imgPreview(people.avatar)" alt="" class="head-image pull-left">
     <div class="content">
       <div class="left">
         <div class="name">{{ people.name }}</div>

src/router/index.js

@@ -56,6 +56,7 @@ import Test5 from "../pages/Test5";
 import MusicCollect from "../pages/me/collect/MusicCollect";
 import VideoCollect from "../pages/me/collect/VideoCollect";
 import MyMusic from "../pages/me/MyMusic";
+import FollowAndFans from "../pages/people/FollowAndFans";
 
 const routes = [
   // {path: '', component: Music},
@@ -98,7 +99,10 @@ const routes = [
   {path: '/choose-location', component: ChooseLocation},
   {path: '/choose-province', component: ChooseProvince},
   {path: '/choose-city', component: ChooseCity},
-  {path: '/find-acquaintance', component: FindAcquaintance},
+
+  {path: '/people/find-acquaintance', component: FindAcquaintance},
+  {path: '/people/follow-and-fans', component: FollowAndFans},
+
   {path: '/service-protocol', component: ServiceProtocol},
   {path: '/address-list', component: AddressList},
   {path: '/scan', component: Scan},