优化uploader页面

src/config/index.js

@@ -1,8 +1,8 @@
 export default {
-  baseUrl: 'http://192.168.0.105/index.php/v1',
+  // baseUrl: 'http://192.168.0.105/index.php/v1',
-  filePreview:'http://192.168.0.105/static/uploads/',
+  // filePreview:'http://192.168.0.105/static/uploads/',
-  // baseUrl: 'http://192.168.10.164//index.php/v1',
+  baseUrl: 'http://192.168.10.164//index.php/v1',
-  // filePreview:'http://192.168.10.164/static/uploads/'
+  filePreview:'http://192.168.10.164/static/uploads/'
   // baseUrl: 'http://localhost//index.php/v1',
   // filePreview:'http://localhost/static/uploads/'
 }

src/pages/Test.vue

@@ -6,42 +6,39 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <Share  v-model="test"/>
+      <div class="my-buttons">
+        <div class="follow-display">
+          <div class="follow-wrapper" :class="isFollowed ? 'follow-wrapper-followed' : ''">
+            <div class="no-follow" @click="isFollowed = true">
+              <img src="../assets/img/icon/add-white.png" alt="">
+              <span>关注</span>
+            </div>
+            <div class="followed">
+              <div class="l-button" @click="isFollowed = false">
+                <span>已关注</span>
+                <img src="../assets/img/icon/arrow-up-white.png" alt="">
+              </div>
+              <div class="l-button">
+                <span>私信</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="option" @click="isFollowed = !isFollowed">
+          <img src="../assets/img/icon/arrow-up-white.png" alt="">
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
-import SlideColumnList from "../components/slide/SlideColumnList";
-import SlideRowList from "../components/slide/SlideRowList";
-import Video1 from "../components/Video";
-import Comment from "../components/Comment";
-import Share from "../components/Share";
-import Me from "./me/Me";
 
 export default {
   name: "Test",
   props: {},
-  components: {SlideColumnList, SlideRowList, Video1, Comment, Share, Me},
   data() {
     return {
-      videos: [
+      isFollowed: true
-        {
-          "id": "d2f55373-80dd-4c14-93a7-7a40e9cbf049",
-          "posterUrl": "images/20210815/0.png",
-          "videoUrl": "http://qy9rc9xff.hn-bkt.clouddn.com/9.mp4",
-          "title": "",
-          "likeNum": null,
-          "commentNum": null,
-          "sharedNum": null,
-          "duration": null,
-          "musicId": "126f9654-450b-466c-8003-085199a7f9b9",
-          "browseCount": 0,
-          "createTime": "1629683008",
-          "createBy": "3e301843-e8bb-41c0-8240-9c4b42a17341",
-          "status": 1
-        }
-      ],
-      test:true
     }
   },
   computed: {},
@@ -65,6 +62,103 @@ export default {
 
   .content {
     padding-top: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .my-buttons {
+      margin-top: 2rem;
+      overflow: hidden;
+      width: 80%;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      @width: 3.6rem;
+
+      .follow-display {
+        flex: 1;
+        overflow: hidden;
+
+        .follow-wrapper {
+          width: 200%;
+          display: flex;
+          flex-wrap: nowrap;
+          transition: all .3s ease;
+
+          &.follow-wrapper-followed {
+            transform: translate3d(-50%, 0, 0);
+          }
+
+          .no-follow {
+            width: calc(100% - 0.5rem);
+            color: white;
+            border-radius: .2rem;
+            background: @primary-btn-color;
+            height: @width;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: .5rem;
+            box-sizing: border-box;
+
+            span {
+              margin-left: .2rem;
+            }
+          }
+
+          .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);
+              }
+            }
+          }
+        }
+
+      }
+
+
+      .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;
+      }
+
+      img {
+        @width: 1.6rem;
+        width: @width;
+        height: @width;
+      }
+
+    }
+
   }
 }
 </style>

src/pages/home/Index2.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="home-index">
-    <SlideRowList v-model:active-index="baseActiveIndex">
+    <SlideRowList
+        name="baseSlide"
+        v-model:active-index="baseActiveIndex">
       <SlideItem>
         <SlideRowList
             v-model:active-index="activeIndex"
@@ -103,7 +105,7 @@
         <Footer v-bind:init-tab="1"/>
       </SlideItem>
       <SlideItem style="font-size: 40px;overflow:auto;">
-        <Uploader></Uploader>
+        <Uploader/>
       </SlideItem>
     </SlideRowList>
 

src/pages/me/Me.vue

@@ -430,6 +430,12 @@ export default {
     bus.on('baseSlide-end', () => this.canScroll = true)
   },
   methods: {
+    setLoadingFalse() {
+      this.loadings.loading0 = false
+      this.loadings.loading1 = false
+      this.loadings.loading2 = false
+      this.loadings.loading3 = false
+    },
     click(e) {
       if (this.baseActiveIndex === 0) return
       if (this.baseActiveIndex === 1) {
@@ -467,7 +473,6 @@ export default {
         if (videoOb.video.total === -1) {
           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) this.videos.collect = res.data
         }
       } else {
@@ -488,9 +493,9 @@ export default {
               if (res.code === this.SUCCESS) this.videos.like = res.data
               break
           }
-          this.loadings['loading' + newVal] = false
         }
       }
+      this.setLoadingFalse()
       let scrollAreaHeight = await this.getScrollAreaHeight(newVal)
 
       if (oldVal !== null) {

src/pages/me/Uploader.less

@@ -11,6 +11,10 @@
   opacity: 0;
 }
 
+
+
+
+
 .Uploader {
   position: fixed;
   background: @main-bg;
@@ -358,16 +362,32 @@
       }
 
       .my-buttons {
+        margin-top: 2rem;
+        overflow: hidden;
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         align-items: center;
         @width: 3.6rem;
 
+        .follow-display {
+          flex: 1;
+          overflow: hidden;
+
+          .follow-wrapper {
+            width: 200%;
+            display: flex;
+            flex-wrap: nowrap;
+            transition: all .3s ease;
+
+            &.follow-wrapper-followed {
+              transform: translate3d(-50%, 0, 0);
+            }
+
             .no-follow {
+              width: calc(100% - 0.5rem);
               color: white;
               border-radius: .2rem;
               background: @primary-btn-color;
-          flex: 1;
               height: @width;
               display: flex;
               align-items: center;
@@ -381,7 +401,7 @@
             }
 
             .followed {
-          flex: 1;
+              width: 100%;
               display: flex;
               justify-content: space-around;
               align-items: center;
@@ -407,6 +427,10 @@
                 }
               }
             }
+          }
+
+        }
+
 
         .option {
           position: relative;

src/pages/me/Uploader.vue

@@ -52,10 +52,7 @@
               <img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
             </div>
             <div class="signature f12">
-              <template v-if="!userinfo.desc">
+              <span class="text">{{ userinfo.desc }}</span>
-                <span>点击添加介绍，让大家认识你...</span>
-                <img src="../../assets/img/icon/me/write-gray.png" alt="">
-              </template>
             </div>
             <div class="more">
               <div class="age item" v-if="userinfo.birthday">
@@ -89,12 +86,14 @@
             </div>
           </div>
           <div class="my-buttons">
-            <div class="no-follow" v-if="false">
+            <div class="follow-display">
+              <div class="follow-wrapper" :class="isFollowed ? 'follow-wrapper-followed' : ''">
+                <div class="no-follow" @click="isFollowed = true">
                   <img src="../../assets/img/icon/add-white.png" alt="">
                   <span>关注</span>
                 </div>
-            <div class="followed" v-else>
+                <div class="followed">
-              <div class="l-button">
+                  <div class="l-button" @click="isFollowed = false">
                     <span>已关注</span>
                     <img src="../../assets/img/icon/arrow-up-white.png" alt="">
                   </div>
@@ -102,7 +101,9 @@
                     <span>私信</span>
                   </div>
                 </div>
-            <div class="option">
+              </div>
+            </div>
+            <div class="option" @click="isFollowed = !isFollowed">
               <img src="../../assets/img/icon/arrow-up-white.png" alt="">
             </div>
           </div>
@@ -162,6 +163,7 @@ export default {
   components: {Posters, Indicator},
   data() {
     return {
+      isFollowed: false,
       previewImg: '',
       contentIndex: 0,
       baseActiveIndex: 0,
@@ -231,7 +233,7 @@ export default {
       return this.$store.state.bodyWidth
     },
     videoSlideRowListStyle() {
-      return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 14.6rem)'}
+      return {height: this.refs.videoSlideHeight !== 0 ? this.refs.videoSlideHeight + 'px' : 'calc(100vh - 9.6rem)'}
     },
     SlideItemStyle() {
       if (this.tempScroll || this.isScroll) return {overflow: 'auto'}
@@ -252,7 +254,7 @@ export default {
       this.refs.headerHeight = this.$refs.header.offsetHeight
       this.refs.descHeight = this.$refs.desc.offsetHeight
       this.refs.maxSlideHeight = this.$refs.videoSlideRowList.wrapperHeight
-      this.initSlideHeight = this.bodyHeight - 50 - this.refs.descHeight - 50
+      this.initSlideHeight = this.bodyHeight - 50 - this.refs.descHeight
       this.canTransformY = this.refs.descHeight - this.floatHeight
       this.changeIndex(0, null)
     })
@@ -261,6 +263,12 @@ export default {
     bus.on('baseSlide-end', () => this.canScroll = true)
   },
   methods: {
+    setLoadingFalse() {
+      this.loadings.loading0 = false
+      this.loadings.loading1 = false
+      this.loadings.loading2 = false
+      this.loadings.loading3 = false
+    },
     click(e) {
       if (this.baseActiveIndex === 0) return
       if (this.baseActiveIndex === 1) {
@@ -298,7 +306,6 @@ export default {
         if (videoOb.video.total === -1) {
           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) this.videos.collect = res.data
         }
       } else {
@@ -319,9 +326,10 @@ export default {
               if (res.code === this.SUCCESS) this.videos.like = res.data
               break
           }
-          this.loadings['loading' + newVal] = false
         }
       }
+      this.setLoadingFalse()
+
       let scrollAreaHeight = await this.getScrollAreaHeight(newVal)
 
       if (oldVal !== null) {