From ccaf2f5aaac19a2b20d002d62327e0c8c15a7676 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 9 Sep 2021 01:53:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96uploader=E9=A1=B5=E9=9D=A2,In?=
 =?UTF-8?q?dicator.vue=E6=B7=BB=E5=8A=A0render=E4=BC=A0=E5=8F=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.js              |   3 +
 src/assets/img/icon/b8z.png  | Bin 634 -> 0 bytes
 src/components/Indicator.vue |  59 ++++--
 src/components/Video.vue     |  29 +--
 src/config/index.js          |   8 +-
 src/pages/Test.vue           |  19 +-
 src/pages/home/Index2.vue    |   3 +-
 src/pages/me/Uploader.less   | 365 ++++++++++++++++++-----------------
 src/pages/me/Uploader.vue    | 210 ++++++++++++++------
 9 files changed, 410 insertions(+), 286 deletions(-)
 delete mode 100644 src/assets/img/icon/b8z.png

diff --git a/src/api/user.js b/src/api/user.js
index debe906..38ee466 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -4,4 +4,7 @@ export default {
   friends(params, data) {
     return request({url: '/user/friends', method: 'get', params, data})
   },
+  author(params, data) {
+    return request({url: '/user/author', method: 'get', params, data})
+  },
 }
\ No newline at end of file
diff --git a/src/assets/img/icon/b8z.png b/src/assets/img/icon/b8z.png
deleted file mode 100644
index baccb74d5add55d5b0f0f5715cce6e9b16d9f358..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 634
zcmV-=0)_pFP)<h;3K|Lk000e1NJLTq001oj001or0{{R34a5?t00004XF*Lt006O%
z3;baP00001b5ch_0Itp)=>Px#oKQ?uMMrQ<w6wSH@9&V1mYbcS|NsC0|Nn}Mk;=-=
z<>lqAt+I-Xk+QP4zP`Ze>FL?o-NVDi|NsBDx4V>-nW3VmudlSj!^o<tuc4u*ud%eF
zrKrx%(c|Okou8wstgoe|s-~x`prNM6$Ia*G=diG}sHm-zl$g4@zU%Ajw6wV2-`~E#
z!<m|%l$4s9o1u%0laY~^-{0iK#L0?_k@lG;egFUfGjvi;Qviq{$+QFu)L}A{(1>#+
zL~I9v!l{sKnyHYbS}(AdqMoc_D~y`LdMJfCbGN><(8f7v$!MeK0003!Nkl<ZNXO+>
z*LH(23}x7OumXXsj&$$M|NmQ&Q%=E_sQaAzCg~!C#w7@j6I{tWTW7gc{7<f`m)(G6
zt!BA}7Tp*^7c_a5b~e%#!A-V5iABtIEFO$)f|56fXd@$IN3uCQu)*l939)kIDw*-M
zE_nfoL|9FnRcO3U?FD?GSl~%gyE7VI86pLS5YX08AO))sb_KPI>6mJ8m1tv2NK{XD
z1IFDDb7)`*#yg{+I7zT21eN6w5y6gxl`8M;m|UN@kLDvggN~4F=t?%S*S)<X*|&Z4
z+&j1YSKVA{$$fj`UgKQ9-FMB+(#6c4V5N{dh=Sa2TuF%AA%Nax^8E4giPDjqe|qaZ
zuiQ&dPA-j}qzSH7?XOnt&+Z0Ad?agkb@2U*`)lmQgSURi;kD<#;pYD8ln2L&Z!W+*
Ud{<diQvd(}07*qoM6N<$g5thMiU0rr

diff --git a/src/components/Indicator.vue b/src/components/Indicator.vue
index eafd513..b05a80f 100644
--- a/src/components/Indicator.vue
+++ b/src/components/Indicator.vue
@@ -1,19 +1,3 @@
-<template>
-  <div class="indicator-ctn" :class="fixed?'fixed':''">
-    <div class="tabs" ref="tabs">
-      <div class="tab"
-           :style="{width : tabStyleWidth}"
-           v-for="(item,index) in tabTexts"
-           :class="currentSlideItemIndex === index?'active':''"
-           @click="changeIndex(index)">
-        <span>{{ item }}</span></div>
-    </div>
-    <div class="indicator"
-         ref="indicator"
-         :style="{width : tabStyleWidth}"
-    ></div>
-  </div>
-</template>
 <script>
 import bus from "../utils/bus";
 
@@ -36,6 +20,10 @@ export default {
       type: Array,
       default: () => []
     },
+    tabRender: {
+      type: Function,
+      default: null
+    },
     //用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
     name: {
       type: String,
@@ -51,6 +39,38 @@ export default {
     }
   },
   computed: {},
+  render() {
+    /*
+    *   <div class="tabs" ref="tabs">
+            <div class="tab"
+            style="{width : tabStyleWidth}"
+            v-for="(item,index) in tabTexts"
+            :class="currentSlideItemIndex === index?'active':''"
+            @click="changeIndex(index)">
+            <span>{{ item }}</span></div>
+        </div>
+    * */
+    return (
+        <div className={this.fixed ? 'fixed indicator-ctn' : 'indicator-ctn'}>
+          {this.tabRender ?
+              this.tabRender() :
+              <div className="tabs" ref="tabs">
+                {
+                  this.tabTexts.map((item, index) => {
+                    return (
+                        <div className={this.currentSlideItemIndex === index ? 'active tab' : 'tab'}
+                             style={{width: this.tabStyleWidth}}>
+                          < span> {item}</span>
+                        </div>
+                    )
+                  })
+                }
+              </div>
+          }
+          <div className="indicator" ref="indicator" style={{width: this.tabStyleWidth}}/>
+        </div>
+    )
+  },
   mounted() {
     this.initTabs()
     bus.on(this.name + '-moved', this.move)
@@ -125,6 +145,13 @@ export default {
       &.active {
         color: white;
       }
+
+      img {
+        margin-left: .5rem;
+        @width: 1.2rem;
+        width: @width;
+        height: @width;
+      }
     }
   }
 
diff --git a/src/components/Video.vue b/src/components/Video.vue
index 2988089..f2df4a9 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -5,8 +5,8 @@
 <!--</template>-->
 <template>
   <div class="bg-video" v-bind:style="{'height':height+'px'}">
-<!--    <video :src="video.videoUrl" poster="../assets/img/icon/components/video/loading.gif" ref="video" muted :autoplay="play" loop>-->
-<!--    poster="../assets/img/poster/1.jpg"-->
+    <!--    <video :src="video.videoUrl" poster="../assets/img/icon/components/video/loading.gif" ref="video" muted :autoplay="play" loop>-->
+    <!--    poster="../assets/img/poster/1.jpg"-->
 
     <video :src="video.video"
            :poster="video.origin_cover"
@@ -24,7 +24,7 @@
         <div :style="{opacity:isMove?0:1}" class="normal">
           <div class="toolbar mb1r">
             <div class="avatar-ctn mb2r">
-              <img class="avatar" src="../assets/img/icon/head-image.jpeg" alt=""
+              <img class="avatar" :src="lVideo.author.avatar"  alt=""
                    @click.stop="$emit('goUserInfo')">
               <transition name="fade">
                 <div v-if="!isAttention" @click.stop="attention" class="options" ref="attention-option">
@@ -43,16 +43,16 @@
                 <!--                <transition name="loved">-->
                 <!--                </transition>-->
               </div>
-              <span>{{ $likeNum(lVideo.likeNum) }}</span>
+              <span>{{ $likeNum(lVideo.digg_count) }}</span>
             </div>
             <div class="message mb2r" @click.stop="$emit('showComments')">
               <!--            <div class="message mb15p" @click.stop="showComment">-->
               <img src="../assets/img/icon/message.svg" alt="" class="message-image">
-              <span>{{ $likeNum(lVideo.commentNum) }}</span>
+              <span>{{ $likeNum(lVideo.comment_count) }}</span>
             </div>
             <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
               <img src="../assets/img/icon/share.svg" alt="" class="share-image">
-              <span>{{ $likeNum(lVideo.sharedNum) }}</span>
+              <span>{{ $likeNum(lVideo.share_count) }}</span>
             </div>
             <div v-else class="share mb4r" @click.stop="$emit('showShare')">
               <img src="../assets/img/icon/share.svg" alt="" class="share-image">
@@ -61,19 +61,20 @@
               <img class="music1" src="../assets/img/icon/home/music1.png" alt="">
               <img class="music2" src="../assets/img/icon/home/music2.png" alt="">
               <div class="music-bg">
-                <img class="music" src="../assets/img/icon/head-image.jpeg" alt="" @click.stop="globalMethods.$nav('/music')">
+                <img class="music" :src="lVideo.music.cover" alt=""
+                     @click.stop="globalMethods.$nav('/music')">
               </div>
             </div>
           </div>
           <div class="content ml1r mb1r" v-if="!isMy">
-            <div class="name mb1r">@TTentau</div>
+            <div class="name mb1r">{{ lVideo.author.name }}</div>
             <div class="description mb1r">
-              吴三二的光年之外, 您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
+              {{ lVideo.desc }}
             </div>
             <div class="music " @click.stop="$nav('/music')">
               <img src="../assets/img/icon/music.svg" alt="" class="music-image">
               <!--              <marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>-->
-              <div behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</div>
+              <div behavior=scroll direction=left align=middle scrollamount=4> {{ lVideo.music.title }}</div>
             </div>
           </div>
           <div v-else class="comment-status">
@@ -153,7 +154,7 @@ export default {
   },
   data() {
     return {
-      globalMethods:globalMethods,
+      globalMethods: globalMethods,
       duration: 0,
       step: 0,
       currentTime: 0,
@@ -196,7 +197,7 @@ export default {
     })
   },
   methods: {
-    $likeNum(v){
+    $likeNum(v) {
       return globalMethods.$likeNum(v)
     },
     $duration(v) {
@@ -278,7 +279,7 @@ export default {
       this.pageX = e.touches[0].pageX
     },
     move(e) {
-      if (this.isPlaying)return
+      if (this.isPlaying) return
       this.isMove = true
       let video = this.$refs.video
       video.pause()
@@ -288,7 +289,7 @@ export default {
       globalMethods.$stopPropagation(e)
     },
     end(e) {
-      if (this.isPlaying)return
+      if (this.isPlaying) return
       console.log('end', e)
       setTimeout(() => {
         this.isMove = false
diff --git a/src/config/index.js b/src/config/index.js
index 839c41b..d8a9f81 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,8 +1,8 @@
 export default {
-  baseUrl: 'http://192.168.0.103/index.php/v1',
-  filePreview:'http://192.168.0.103/static/uploads/',
-  // baseUrl: 'http://192.168.10.164//index.php/v1',
+  baseUrl: 'http://192.168.0.105/index.php/v1',
+  filePreview:'http://192.168.0.105/static/uploads/',
+  // baseUrl: 'http://192.168.10.164/index.php/v1',
   // filePreview:'http://192.168.10.164/static/uploads/'
-  // baseUrl: 'http://localhost//index.php/v1',
+  // baseUrl: 'http://localhost/index.php/v1',
   // filePreview:'http://localhost/static/uploads/'
 }
\ No newline at end of file
diff --git a/src/pages/Test.vue b/src/pages/Test.vue
index d1032a2..0c0d9ce 100644
--- a/src/pages/Test.vue
+++ b/src/pages/Test.vue
@@ -1,31 +1,18 @@
 <template>
   <div class="Test">
-    <BaseHeader>
-      <template v-slot:center>
-        <span class="f16">申报学校信息</span>
-      </template>
-    </BaseHeader>
-    <div class="content">
-      <ConfirmDialog
-          title="设置备注名"
-          ok-text="确认"
-          v-model:visible="showFollowSetting"
-      >
-        <Search mode="light" v-model="t" :isShowSearchIcon="false"/>
-      </ConfirmDialog>
-    </div>
+    <Uploader/>
   </div>
 </template>
 <script>
 
 import ConfirmDialog from "../components/dialog/ConfirmDialog";
 import Search from "../components/Search";
+import Uploader from "./me/Uploader";
 
 export default {
   name: "Test",
   components: {
-    ConfirmDialog,
-    Search
+    Uploader
   },
   props: {},
   data() {
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index 1f74741..f1e6c3a 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -107,6 +107,8 @@
       </SlideItem>
       <SlideItem style="font-size: 40px;overflow:auto;">
         <Uploader
+            :isOnThisPage="baseActiveIndex === 1"
+            :author="this.videos[this.videoActiveIndex]?.author"
             @toggleCanMove="e => this.canMove = e"
             @back="baseActiveIndex = 0"
             @showFollowSetting="showFollowSetting = true"
@@ -446,7 +448,6 @@ export default {
 
       test: '',
 
-
       videoActiveIndex: 0,
       baseActiveIndex: 0,
       activeIndex: 1,
diff --git a/src/pages/me/Uploader.less b/src/pages/me/Uploader.less
index a2aa500..9a73602 100644
--- a/src/pages/me/Uploader.less
+++ b/src/pages/me/Uploader.less
@@ -11,16 +11,6 @@
   opacity: 0;
 }
 
-.recommend-enter-active,
-.recommend-leave-active {
-  transition: all 0.3s ease;
-}
-
-.recommend-enter-from,
-.recommend-leave-to {
-  transform: translateY(-100%);
-}
-
 .FromBottomDialog {
   left: inherit;
 }
@@ -297,11 +287,9 @@
       color: white;
       height: 12rem;
       background-image: url('../../assets/img/header-bg.png');
-      //background-image: url('data:image/jpeg;base64,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');
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
-
       box-sizing: border-box;
     }
 
@@ -311,241 +299,268 @@
       border-radius: 1rem 1rem 0 0;
 
       .detail-wrapper {
-        padding: 0 2rem 0 2rem;
-      }
+        padding: 0 2rem 1.5rem 2rem;
 
-      .head {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        box-sizing: border-box;
-        transform: translateY(-2rem);
-
-        .head-image {
-          background: black;
-          padding: 2px;
-          border-radius: 50%;
-          width: 8rem;
-          height: 8rem;
-        }
-
-        .heat {
-          margin-top: 1rem;
-          width: calc(100% - 12rem);
-          color: @second-text-color;
+        .head {
+          width: 100%;
           display: flex;
-          align-items: center;
           justify-content: space-between;
-
-          .num {
-            margin-top: .5rem;
-            color: white;
-            font-size: 1.6rem;
-            font-weight: bold;
-            margin-right: 3px;
+          align-items: center;
+          box-sizing: border-box;
+          transform: translateY(-2rem);
+
+          .head-image {
+            background: black;
+            padding: 2px;
+            border-radius: 50%;
+            width: 8rem;
+            height: 8rem;
           }
 
-          .text {
-            font-size: 1.2rem;
-            margin-right: 10px;
+          .heat {
+            margin-top: 1rem;
+            width: calc(100% - 12rem);
+            color: @second-text-color;
             display: flex;
             align-items: center;
-            flex-direction: column;
-
-          }
-        }
-
-      }
+            justify-content: space-between;
 
-      .description {
-        font-size: 1.2rem;
-        color: white;
-        transform: translateY(-2rem);
+            .num {
+              margin-top: .5rem;
+              color: white;
+              font-size: 1.6rem;
+              font-weight: bold;
+              margin-right: 3px;
+            }
 
-        .number {
-          color: @second-text-color;
-          padding-bottom: 2rem;
-          border-bottom: 1px solid @line-color;
-          display: flex;
-          align-items: center;
+            .text {
+              font-size: 1.2rem;
+              margin-right: 10px;
+              display: flex;
+              align-items: center;
+              flex-direction: column;
 
-          img {
-            width: 1.6rem;
-            margin-left: .5rem;
+            }
           }
         }
 
-      }
+        .description {
+          font-size: 1.2rem;
+          color: white;
+          transform: translateY(-2rem);
 
-      .signature {
-        color: @second-text-color;
-        display: flex;
-        align-items: center;
-        margin-bottom: .5rem;
+          .number {
+            color: @second-text-color;
+            padding-bottom: 2rem;
+            border-bottom: 1px solid @line-color;
+            display: flex;
+            align-items: center;
 
-        img {
-          height: 1.2rem;
-          margin-left: .6rem;
-        }
-      }
+            img {
+              width: 1.6rem;
+              margin-left: .5rem;
+            }
+          }
 
-      .more {
-        color: @second-text-color;
-        display: flex;
+        }
 
-        .item {
-          padding: .2rem .5rem;
-          border-radius: .2rem;
-          background: @second-btn-color-tran;
-          font-size: 1rem;
+        .signature {
+          color: white;
           display: flex;
           align-items: center;
-          margin-right: .5rem;
+          margin-bottom: .5rem;
 
           img {
-            height: 1rem;
-            margin-right: .2rem;
+            height: 1.2rem;
+            margin-left: .6rem;
           }
         }
-      }
 
-      .other {
-        display: flex;
-        margin-bottom: 2rem;
-
-        .item {
-          margin-right: 2.5rem;
+        .more {
+          color: @second-text-color;
           display: flex;
 
-          img {
-            margin-right: .8rem;
-            border-radius: .4rem;
+          .item {
+            padding: .2rem .5rem;
+            border-radius: .2rem;
             background: @second-btn-color-tran;
-            padding: .8rem;
-            height: 2.2rem;
-          }
-
-          .right {
+            font-size: 1rem;
             display: flex;
-            justify-content: space-between;
-            flex-direction: column;
-
-            .top {
-              color: white;
-              font-size: 1.4rem;
-            }
+            align-items: center;
+            margin-right: .5rem;
 
-            .bottom {
-              color: @second-text-color;
-              font-size: 1.2rem;
+            img {
+              height: 1rem;
+              margin-right: .2rem;
             }
           }
         }
-      }
-
-      .my-buttons {
-        margin-top: 2rem;
-        overflow: hidden;
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        @width: 3.6rem;
 
-        .follow-display {
-          flex: 1;
-          overflow: hidden;
+        .other {
+          display: flex;
+          margin-bottom: 2rem;
 
-          .follow-wrapper {
-            width: 200%;
+          .item {
+            margin-right: 2.5rem;
             display: flex;
-            flex-wrap: nowrap;
-            transition: all .3s ease;
 
-            &.follow-wrapper-followed {
-              transform: translate3d(-50%, 0, 0);
+            img {
+              margin-right: .8rem;
+              border-radius: .4rem;
+              background: @second-btn-color-tran;
+              padding: .8rem;
+              height: 2.2rem;
             }
 
-            .no-follow {
-              width: calc(100% - 0.5rem);
-              color: white;
-              border-radius: .2rem;
-              background: @primary-btn-color;
-              height: @width;
+            .right {
               display: flex;
-              align-items: center;
-              justify-content: center;
-              margin-right: .5rem;
-              box-sizing: border-box;
+              justify-content: space-between;
+              flex-direction: column;
 
-              span {
-                margin-left: .2rem;
+              .top {
+                color: white;
+                font-size: 1.4rem;
+              }
+
+              .bottom {
+                color: @second-text-color;
+                font-size: 1.2rem;
               }
             }
+          }
+        }
 
-            .followed {
-              width: 100%;
+        .my-buttons {
+          margin-top: 2rem;
+          overflow: hidden;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          @width: 3.6rem;
+
+          .follow-display {
+            flex: 1;
+            overflow: hidden;
+
+            .follow-wrapper {
+              width: 200%;
               display: flex;
-              justify-content: space-around;
-              align-items: center;
+              flex-wrap: nowrap;
+              transition: all .3s ease;
+
+              &.follow-wrapper-followed {
+                transform: translate3d(-50%, 0, 0);
+              }
 
-              .l-button {
+              .no-follow {
+                width: calc(100% - 0.5rem);
                 color: white;
                 border-radius: .2rem;
-                background: @second-btn-color;
+                background: @primary-btn-color;
                 height: @width;
-                width: 50%;
-                margin-right: .5rem;
-                box-sizing: border-box;
                 display: flex;
                 align-items: center;
                 justify-content: center;
+                margin-right: .5rem;
+                box-sizing: border-box;
 
                 span {
                   margin-left: .2rem;
                 }
+              }
 
-                img {
-                  transform: rotate(180deg);
+              .followed {
+                width: 100%;
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+
+                .l-button {
+                  color: white;
+                  border-radius: .2rem;
+                  background: @second-btn-color;
+                  height: @width;
+                  width: 50%;
+                  margin-right: .5rem;
+                  box-sizing: border-box;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+
+                  span {
+                    margin-left: .2rem;
+                  }
+
+                  img {
+                    transform: rotate(180deg);
+                  }
                 }
               }
             }
+
+            img {
+              @width: 1.4rem;
+              width: @width;
+              height: @width;
+            }
           }
-        }
 
 
-        .option {
-          position: relative;
-          width: @width;
-          height: @width;
-          font-size: 1.2rem;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: .2rem;
-          background: @second-btn-color;
-          color: white;
+          .option {
+            position: relative;
+            width: @width;
+            height: @width;
+            font-size: 1.2rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: .2rem;
+            background: @second-btn-color;
+            color: white;
 
-          &.option-recommend {
-            img {
-              transform: rotate(0deg);
+            &.option-recommend {
+              .arrow {
+                transform: rotate(0deg);
+              }
             }
           }
-        }
 
-        img {
-          transform: rotate(180deg);
-          @width: 1.6rem;
-          width: @width;
-          height: @width;
-        }
+          .loading {
+            @width: 1.2rem;
+            width: @width;
+            height: @width;
+            animation: rotate .6s linear infinite;
+
+            @keyframes rotate {
+              from {
+                transform: rotate(0deg)
+              }
+              to {
+                transform: rotate(360deg)
+              }
+            }
+          }
+
+          .arrow {
+            transition: transform .3s ease;
+            transform: rotate(180deg);
+            @width: 1.6rem;
+            width: @width;
+            height: @width;
+          }
+
 
+        }
       }
 
       .recommend {
         transition: all .3s ease;
         height: 22rem;
-        margin-top: 1.5rem;
+        overflow: hidden;
+
+        &.hidden {
+          height: 0;
+        }
 
         .title {
           padding: 0 2rem 0 2rem;
diff --git a/src/pages/me/Uploader.vue b/src/pages/me/Uploader.vue
index ef78e5d..6a82998 100644
--- a/src/pages/me/Uploader.vue
+++ b/src/pages/me/Uploader.vue
@@ -10,8 +10,8 @@
         </div>
       </transition>
       <transition name="fade">
-        <div class="follow-btn" :class="{followed:isFollowed}" v-if="floatFixed" @click="followButton">
-          {{ isFollowed ? '私信' : '关注' }}
+        <div class="follow-btn" :class="{followed:localAuthor.is_follow}" v-if="floatFixed" @click="followButton">
+          {{ localAuthor.is_follow ? '私信' : '关注' }}
         </div>
       </transition>
       <div class="right">
@@ -30,49 +30,50 @@
          @touchmove="touchMove($event)"
          @touchend="touchEnd($event)">
       <div ref="desc" class="desc">
-        <header ref="header" @click="previewImg = require('../../assets/img/header-bg.png')"></header>
+        <header ref="header"
+                :style='{backgroundImage: `url(${localAuthor.cover})`}'
+                @click="previewImg = localAuthor.cover"></header>
         <div class="detail">
           <div class="detail-wrapper">
             <div class="head">
-              <img src="../../assets/img/icon/avatar/2.png" class="head-image"
-                   @click="previewImg = require('../../assets/img/icon/avatar/2.png')">
+              <img :src="localAuthor.avatar" class="head-image"
+                   @click="previewImg = localAuthor.avatar">
               <div class="heat">
                 <div class="text">
                   <span>获赞</span>
-                  <span class="num">18</span>
+                  <span class="num">{{ localAuthor.favoriting_count }}</span>
                 </div>
                 <div class="text">
                   <span>粉丝</span>
-                  <span class="num">62</span>
+                  <span class="num">{{ localAuthor.follower_count }}</span>
                 </div>
                 <div class="text">
                   <span>关注</span>
-                  <span class="num">8</span>
+                  <span class="num">{{ localAuthor.following_count }}</span>
                 </div>
               </div>
 
             </div>
             <div class="description">
-              <p class="name f22 mt1r mb1r">ttentau</p>
+              <p class="name f22 mt1r mb1r">{{ localAuthor.nickname }}</p>
               <div class="number mb1r">
-                <span class="mr1r">私密账号</span>
-                <span>抖音号：605128307</span>
+                <span>抖音号：{{ localAuthor.unique_id }}</span>
                 <img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
               </div>
-              <div class="signature f12">
-                <span class="text">{{ userinfo.desc }}</span>
+              <div class="signature f12" v-if="localAuthor.desc">
+                <span class="text">{{ localAuthor.desc }}</span>
               </div>
               <div class="more">
-                <div class="age item" v-if="userinfo.birthday">
-                  <img v-if="userinfo.sex === '女'" src="../../assets/img/icon/me/woman.png" alt="">
-                  <img v-if="userinfo.sex === '男'" src="../../assets/img/icon/me/man.png" alt="">
-                  <span>{{ filterAge(userinfo.birthday) }}岁</span>
+                <div class="age item" v-if="localAuthor.birthday">
+                  <img v-if="localAuthor.sex === '0'" src="../../assets/img/icon/me/woman.png" alt="">
+                  <img v-if="localAuthor.sex === '1'" src="../../assets/img/icon/me/man.png" alt="">
+                  <span>{{ filterAge(localAuthor.birthday) }}岁</span>
                 </div>
-                <div class="item" v-if="userinfo.location">
-                  {{ userinfo.location }}
+                <div class="item" v-if="localAuthor.location">
+                  {{ localAuthor.location }}
                 </div>
-                <div class="item" v-if="userinfo.school.name">
-                  {{ userinfo.school.name }}
+                <div class="item" v-if="localAuthor.school?.name">
+                  {{ localAuthor.school?.name }}
                 </div>
               </div>
 
@@ -95,8 +96,8 @@
             </div>
             <div class="my-buttons">
               <div class="follow-display">
-                <div class="follow-wrapper" :class="isFollowed ? 'follow-wrapper-followed' : ''">
-                  <div class="no-follow" @click="isFollowed = true">
+                <div class="follow-wrapper" :class="localAuthor.is_follow ? 'follow-wrapper-followed' : ''">
+                  <div class="no-follow" @click="localAuthor.is_follow = true">
                     <img src="../../assets/img/icon/add-white.png" alt="">
                     <span>关注</span>
                   </div>
@@ -114,49 +115,49 @@
               <div class="option"
                    :class="isShowRecommend?'option-recommend':''"
                    @click="toggleRecommend">
-                <img src="../../assets/img/icon/arrow-up-white.png" alt="">
+                <img v-if="loadings.showRecommend" class="loading" src="../../assets/img/icon/loading-gray.png" alt="">
+                <img v-else class="arrow" src="../../assets/img/icon/arrow-up-white.png" alt="">
               </div>
             </div>
           </div>
-          <transition name="recommend">
-            <div class="recommend" v-if="isShowRecommend">
-              <div class="title">
-                <div class="left">
-                  <span>你可能感兴趣</span>
-                  <img src="../../assets/img/icon/about-gray.png">
-                </div>
-                <div class="right" @click="$nav('/find-acquaintance')">
-                  <span>查看更多</span>
-                  <back direction="right"></back>
-                </div>
+          <div class="recommend" :class="{hidden:!isShowRecommend}">
+            <div class="title">
+              <div class="left">
+                <span>你可能感兴趣</span>
+                <img src="../../assets/img/icon/about-gray.png">
               </div>
-              <div class="friends"
-                   @touchstart="friendsTouchStart"
-                   @touchend="friendsTouchEnd">
-                <div class="friend" v-for="item in friends.all">
-                  <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
-                  <span class="name">{{ item.name }}</span>
-                  <span class="tips">可能感兴趣的人</span>
-                  <b-button type="primary">关注</b-button>
-                  <div class="close">
-                    <back img="close" scale=".6"></back>
-                  </div>
+              <div class="right" @click="$nav('/find-acquaintance')">
+                <span>查看更多</span>
+                <back direction="right"></back>
+              </div>
+            </div>
+            <div class="friends"
+                 @touchstart="friendsTouchStart"
+                 @touchend="friendsTouchEnd">
+              <div class="friend" v-for="item in friends.all">
+                <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
+                <span class="name">{{ item.name }}</span>
+                <span class="tips">可能感兴趣的人</span>
+                <b-button type="primary">关注</b-button>
+                <div class="close">
+                  <back img="close" scale=".6"></back>
                 </div>
-                <div class="more" @click="$nav('/find-acquaintance')">
-                  <div class="notice">
-                    <div>点击查看</div>
-                    <div>更多好友</div>
-                  </div>
+              </div>
+              <div class="more" @click="$nav('/find-acquaintance')">
+                <div class="notice">
+                  <div>点击查看</div>
+                  <div>更多好友</div>
                 </div>
               </div>
             </div>
-          </transition>
+          </div>
+
         </div>
       </div>
       <Indicator
           name="videoList"
           tabStyleWidth="50%"
-          :tabTexts="['作品','喜欢']"
+          :tabRender="tabRender"
           v-model:active-index="contentIndex">
       </Indicator>
       <SlideRowList
@@ -207,10 +208,33 @@ import FromBottomDialog from "../../components/dialog/FromBottomDialog";
 export default {
   name: "Me",
   components: {FromBottomDialog, Posters, Indicator},
+  props: {
+    author: {
+      type: Object,
+      default: {}
+    },
+    isOnThisPage: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
-      isFollowed: false,
-      isShowRecommend: false,
+      tabRender: () => {
+        return (
+            <div className="tabs" ref="tabs">
+              <div className={this.contentIndex === 0 ? 'active tab' : 'tab'} style="width:50%">
+                <span>作品 {this.localAuthor.video_count}</span>
+              </div>
+              <div className={this.contentIndex === 1 ? 'active tab' : 'tab'} style="width:50%">
+                <span>喜欢</span>
+                <img src={require('../../assets/img/icon/components/follow/lock.png')} alt=""/>
+              </div>
+            </div>
+        )
+      },
+      isShowRecommend: false,//是否显示推荐
+      isLoadRecommendFriends: false,//是否已经加载了显示推荐，直接判断friends.all数据长度的话，没有一开始的加载动画
       previewImg: '',
       contentIndex: 0,
       baseActiveIndex: 0,
@@ -266,11 +290,13 @@ export default {
         loading1: false,
         loading2: false,
         loading3: false,
+        showRecommend: false
       },
       tempScroll: false,
       acceleration: 1.2,
       sprint: 15,
-      canScroll: true
+      canScroll: true,
+      localAuthor: {}
     }
   },
   computed: {
@@ -296,6 +322,40 @@ export default {
     contentIndex(newVal, oldVal) {
       this.changeIndex(newVal, oldVal)
     },
+    'author.id'(newVal) {
+      this.localAuthor = this.author
+      console.log('变了', newVal)
+      this.videos = {
+        my: {
+          list: [],
+          total: -1,
+          pageNo: 0
+        },
+        private: {
+          list: [],
+          total: -1
+        },
+        like: {
+          list: [],
+          total: -1
+        },
+        collect: {
+          video: {
+            list: [],
+            total: -1,
+          },
+          audio: {
+            list: [],
+            total: -1,
+          }
+        },
+      }
+    },
+    isOnThisPage(newVal) {
+      if (newVal) {
+        this.getAuthor()
+      }
+    }
   },
   mounted() {
     setTimeout(() => {
@@ -305,15 +365,44 @@ export default {
       this.refs.maxSlideHeight = this.$refs.videoSlideRowList.wrapperHeight
       this.initSlideHeight = this.bodyHeight - 50 - this.refs.descHeight
       this.canTransformY = this.refs.descHeight - this.floatHeight
-      this.changeIndex(0, null)
+      this.getAuthor()
     })
     this.videoItemHeight = this.bodyWidth / 3 * 1.2 + 2
     bus.on('baseSlide-moved', () => this.canScroll = false)
     bus.on('baseSlide-end', () => this.canScroll = true)
   },
   methods: {
+    async getAuthor() {
+      this.changeIndex(0, null)
+      // let res = await this.$api.user.author({id: this.author.id})
+      let res = await this.$api.user.author({id: '54884802577'})
+      if (res.code === this.SUCCESS) {
+        this.localAuthor = {...this.localAuthor, ...res.data}
+        this.refreshDescHeight()
+      }
+    },
     toggleRecommend() {
-      this.isShowRecommend = !this.isShowRecommend
+      if (this.isLoadRecommendFriends) {
+        this.isShowRecommend = !this.isShowRecommend
+        this.refreshDescHeight()
+      } else {
+        this.loadings.showRecommend = true
+        setTimeout(() => {
+          this.loadings.showRecommend = false
+          this.isLoadRecommendFriends = true
+          this.isShowRecommend = !this.isShowRecommend
+          this.refreshDescHeight()
+        }, 1000)
+      }
+    },
+    refreshDescHeight() {
+      //这里nextTick不生效
+      setTimeout(() => {
+        let desc = $('.desc')
+        this.refs.descHeight = desc.height()
+        this.initSlideHeight = this.bodyHeight - 50 - this.refs.descHeight
+        this.canTransformY = this.refs.descHeight - this.floatHeight
+      }, 300)
     },
     friendsTouchStart() {
       this.$emit('toggleCanMove', false)
@@ -322,10 +411,10 @@ export default {
       this.$emit('toggleCanMove', true)
     },
     followButton() {
-      if (this.isFollowed) {
+      if (this.localAuthor.is_follow) {
         this.$nav('/message/chat')
       } else {
-        this.isFollowed = true
+        this.localAuthor.is_follow = true
       }
     },
     setLoadingFalse() {
@@ -685,6 +774,7 @@ export default {
       return transformY
     },
     filterAge(age) {
+      if (!age) return
       let date = new Date(age)
       return new Date().getFullYear() - date.getFullYear()
     }