优化

src/components/UserPanel.vue

@@ -7,9 +7,9 @@
         <img class="back" src="@/assets/img/icon/next.svg" alt="">
         <transition name="fade">
           <div class="float-user" v-if="state.floatFixed">
-            <img v-lazy="Utils.$imgPreview(props.currentItem.user.avatar)" class="avatar"/>
+            <img v-lazy="Utils.$imgPreview(props.currentItem.user.avatar_thumb.url_list[0])" class="avatar"/>
-            <img v-if="!props.currentItem.user.is_follow" src="@/assets/img/icon/add-light.png" alt="" class="add">
+            <img v-if="!props.currentItem.user.follow_status" src="@/assets/img/icon/add-light.png" alt="" class="add">
-            <span @click="followButton">{{ props.currentItem.user.is_follow ? '私信' : '关注' }}</span>
+            <span @click="followButton">{{ props.currentItem.user.follow_status ? '私信' : '关注' }}</span>
           </div>
         </transition>
       </div>
@@ -166,7 +166,7 @@
           <img class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt="">
         </div>
         <div class="videos">
-          <Posters v-if="state.videos.my.total !== -1" :list="state.videos.my.list"></Posters>
+          <Posters v-if="props.currentItem.post.length" :list="props.currentItem.post"></Posters>
         </div>
       </template>
     </div>
@@ -193,7 +193,7 @@ const props = defineProps({
     default: {
       user: DefaultUser,
       isRequest: false,
-      videos: [],
+      post: [],
     }
   },
   active: {
@@ -286,7 +286,16 @@ watch(() => props.active,
         let res = await api.user.profile()
         console.log('res', res)
         if (res.code === 200) {
-          emit('update:currentItem', merge(props.currentItem, {user: res.data.user, isRequest: true}))
+          res.data.post = res.data.post.map(v => {
+            return {
+              cover: v.video.cover.url_list[0],
+              digg_count: v.statistics.digg_count,
+              create_time: v.create_time
+            }
+          })
+          //去年保存的老数据有id。现在去网页版复制数据没id了。。。
+          res.data.user.unique_id = props.currentItem.user.unique_id
+          emit('update:currentItem', merge(props.currentItem, {...res.data, isRequest: true}))
         }
       }
     })

src/mock/index.js

@@ -2,6 +2,7 @@ import Mock from 'mockjs'
 import globalMethods from '../utils'
 import resource from "../assets/data/resource.js";
 import users from '@/assets/data/users.json'
+import post from '@/assets/data/post.json'
 import {sample, shuffle} from "lodash";
 
 function getParams(options) {
@@ -28,13 +29,12 @@ let allRecommendVideos = resource.videos.map(v => {
 })
 
 for (let i = 0; i < 50; i++) {
-  allRecommendVideos = allRecommendVideos.concat(
+  allRecommendVideos = allRecommendVideos.concat(shuffle(resource.videos)
-      shuffle(resource.videos)
+      .slice(0, 10)
-          .slice(0, 10)
+      .map(v => {
-          .map(v => {
+        v.type = 'recommend-video'
-            v.type = 'recommend-video'
+        return v
-            return v
+      }))
-          }))
 }
 Mock.mock(/recommended/, options => {
   let page = getPage(options)
@@ -151,13 +151,16 @@ Mock.mock(/user\/friends/, options => {
 Mock.mock(/user\/profile\/other/, options => {
   return Mock.mock({
     // data: sample(users), code: 200, msg: '',
-    data: users[0], code: 200, msg: '',
+    data: {
+      user: users[0].user,
+      post: post
+    }, code: 200, msg: '',
   })
 })
 
 Mock.mock(/aweme\/post/, options => {
   return Mock.mock({
     // data: sample(users), code: 200, msg: '',
-    data: users[0], code: 200, msg: '',
+    data: post, code: 200, msg: '',
   })
 })

src/pages/home/components/FollowSetting.vue

@@ -6,13 +6,13 @@
       :show-heng-gang="false"
       maskMode="dark"
       @cancel="cancel()"
-      height="330rem"
+      height="480rem"
       mode="light">
     <div class="follow-setting-dialog">
       <div class="dialog-header">
         <div class="title-wrapper">
-          <span class="title">成都验证码</span>
+          <span class="title">{{ currentItem.user.nickname }}</span>
-          <span class="subtitle">私信给朋友</span>
+          <span class="subtitle">抖音号：{{ currentItem.user.short_id }}</span>
         </div>
         <dy-back mode="dark" img="close" direction="right" @click="cancel()"></dy-back>
       </div>
@@ -35,12 +35,24 @@
         </div>
       </div>
       <div class="l-rows">
+        <div class="l-row" @click="cancel(e => $emit('showChangeNote'))">
+          <div class="left">设置分组</div>
+          <div class="right">
+            <img src="../../../assets/img/icon/components/follow/write.png" alt="">
+          </div>
+        </div>
         <div class="l-row" @click="cancel(e => $emit('showChangeNote'))">
           <div class="left">设置备注名</div>
           <div class="right">
             <img src="../../../assets/img/icon/components/follow/write.png" alt="">
           </div>
         </div>
+        <div class="l-row">
+          <div class="left">设置更新和开播通知</div>
+          <div class="right">
+            <dy-back mode="dark" direction="right" @click="cancel()"></dy-back>
+          </div>
+        </div>
         <div class="l-row">
           <div class="left">在关注列表中置顶</div>
           <div class="right">
@@ -53,14 +65,20 @@
             <switches v-model="switches1" theme="bootstrap" color="success"></switches>
           </div>
         </div>
+        <div class="l-row " @click="cancel(e => $emit('cancelFollow'))">
+          <div class="left" style="color: red;">取消关注</div>
+          <div class="right">
+            <img src="../../../assets/img/icon/components/follow/reduce.png" alt="">
+          </div>
+        </div>
       </div>
     </div>
   </from-bottom-dialog>
 </template>
 <script>
-
 import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
 import Switches from "../../message/components/swtich/switches";
+import {DefaultUser} from "@/utils/const_var";
 
 export default {
   name: "FollowSetting",
@@ -69,6 +87,14 @@ export default {
     Switches
   },
   props: {
+    currentItem: {
+      type: Object,
+      default: {
+        user: DefaultUser,
+        isRequest: false,
+        post: [],
+      }
+    },
     modelValue: false
   },
   data() {
@@ -166,11 +192,11 @@ export default {
       justify-content: space-between;
       border-bottom: 1px solid rgba(222, 222, 222, 0.42);
 
-      &:nth-child(1) {
+      &:first-child {
         border-radius: 10rem 10rem 0 0;
       }
 
-      &:nth-child(3) {
+      &:last-child {
         border-bottom: none;
         border-radius: 0 0 10rem 10rem;
       }

src/pages/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="test-slide-wrapper">
+  <div class="test-slide-wrapper" id="home-index">
     <SlideHorizontal v-model:index="state.baseIndex">
       <SlideItem>
         <IndicatorHome
@@ -11,10 +11,9 @@
         <div class="slide-content">
           <SlideHorizontal class="first-horizontal-item"
                            name="main"
-                           id="home-index"
                            :change-active-index-use-anim="false"
                            v-model:index="state.navIndex">
-            <Slide0 :cbs="p" :active="state.navIndex === 0 && state.baseIndex === 0"/>
+            <Slide0 :active="state.navIndex === 0 && state.baseIndex === 0"/>
             <SlideItem>
               <Community/>
             </SlideItem>
@@ -32,7 +31,6 @@
             ref="uploader"
             v-model:currentItem="state.currentItem"
             :active="state.baseIndex === 1"
-            :author="state.recommendList[state.itemIndex]?.author"
             @toggleCanMove="e => state.canMove = e"
             @back="state.baseIndex = 0"
             @showFollowSetting="state.showFollowSetting = true"
@@ -72,6 +70,7 @@
     />
 
     <FollowSetting
+        v-model:currentItem="state.currentItem"
         @showChangeNote="delayShowDialog( e => state.showChangeNote = true)"
         @showBlockDialog="delayShowDialog(e => state.showBlockDialog = true)"
         @showShare="delayShowDialog( e => state.isSharing = true)"
@@ -165,7 +164,8 @@ const state = reactive({
   fullScreen: false,
   currentItem: {
     user: DefaultUser,
-    videos: [],
+    isRequest: false,
+    post: [],
   }
 })
 
@@ -185,7 +185,8 @@ function setCurrentItem(item) {
         nickname: item.author.nickname,
         unique_id: item.author.unique_id,
       },
-      videos: [],
+      isRequest: false,
+      post: [],
     }
   }
   console.log('item', item)

src/utils/const_var.js

@@ -44,7 +44,9 @@ export const SlideItemPlayStatus = {
 }
 
 export const DefaultUser = {
+  nickname: '',
   unique_id: '',
+  short_id: '',
   signature: '',//签名
   mplatform_followers_count: '',//粉丝
   following_count: '',//关注