熟人页面

src/App.vue

@@ -36,7 +36,7 @@ export default {
         '/find-acquaintance',
         '/service-protocol',
         '/address-list',
-        '',
+        '/video-detail',
         '',
       ];
       const toDepth = routeDeep.indexOf(to.path)

src/components/Indicator.vue

@@ -36,6 +36,11 @@ export default {
       type: Array,
       default: () => []
     },
+    //用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件
+    name: {
+      type: String,
+      default: () => ''
+    },
   },
   data() {
     return {
@@ -48,8 +53,8 @@ export default {
   computed: {},
   mounted() {
     this.initTabs()
-    bus.on('move', this.move)
-    bus.on('end', this.end)
+    bus.on(this.name + 'move', this.move)
+    bus.on(this.name + 'end', this.end)
   },
   methods: {
     changeIndex(index) {
@@ -95,10 +100,11 @@ export default {
 
 .indicator-ctn {
   width: 100%;
+  height: 6rem;
   top: 0;
   left: 0;
   right: 0;
-  z-index: 999;
+  z-index: 2;
   background: $main-bg;
 
   .tabs {
@@ -107,7 +113,7 @@ export default {
     font-weight: bold;
 
     .tab {
-      height: 40px;
+      height: 5.5rem;
       width: 45%;
       display: flex;
       justify-content: center;

src/components/Mask.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="Mask"></div>
+</template>
+<script>
+export default {
+  name: "Mask",
+}
+</script>
+
+<style scoped lang="scss">
+
+.Mask {
+  z-index: 2;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #000000bb;
+}
+</style>

src/components/NoMore.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="NoMore">
+    {{ notice }}
+  </div>
+</template>
+<script>
+export default {
+  name: "NoMore",
+  props: {
+    notice: {
+      type: String,
+      default: '暂时没有更多了'
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@import "../assets/scss/index";
+
+.NoMore {
+  font-size: 1.2rem;
+  height: 6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $second-text-color;
+}
+</style>

src/components/Posters.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="posters">
-    <div class="poster-item" v-for="i in list" @click="$nav('/VideoDetail')">
+    <div class="poster-item" v-for="i in list" @click="$nav('/video-detail')">
       <img class="poster" src="../assets/img/poster/2.jpg" alt="">
       <div class="num">
         <img class="love" src="../assets/img/icon/love.svg" alt="">

src/components/Search.vue

@@ -2,7 +2,7 @@
   <div class="search">
     <img src="../assets/img/icon/pause.svg" alt="">
     <input type="text" :placeholder="placeholder" v-model="value">
-    <img v-if="modelValue.length" class="close" src="../assets/img/icon/close.svg" @click="clear">
+    <img v-if="value.length" class="close" src="../assets/img/icon/close.svg" @click="clear">
   </div>
 </template>
 

src/components/slide/SlideRowList.vue

@@ -20,7 +20,6 @@
       </div>
       <div class="loading" :style="loadingStyle">AA</div>
     </div>
-    <slot name="indicator"></slot>
     <div id="base-slide-list" ref="slideList"
          :style="{'flex-direction':'row',marginTop:indicatorFixed?'42px':'0'}"
          @touchstart="touchStart($event)"
@@ -61,6 +60,10 @@ export default {
       type: Number,
       default: () => 0
     },
+    name: {
+      type: String,
+      default: () => ''
+    },
   },
   computed: {
     toolbarStyle() {
@@ -137,7 +140,6 @@ export default {
     await this.checkChildren(true)
     this.showIndicator && this.initTabs()
     this.changeIndex(true)
-    console.log(this.$slots.indicator)
   },
   methods: {
     changeIndex(init = false, index = null, e) {
@@ -215,7 +217,7 @@ export default {
         //禁止在最后页面的时候，向右划
         if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
 
-        bus.emit('move', {
+        bus.emit(this.name + 'move', {
           x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight},
         })
 
@@ -269,7 +271,7 @@ export default {
       this.resetConfig()
       this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
       this.$attrs['onEnd'] && this.$emit('end')
-      bus.emit('end', this.currentSlideItemIndex)
+      bus.emit(this.name + 'end', this.currentSlideItemIndex)
     },
     resetConfig() {
       this.isCanRightWiping = false

src/main.js

@@ -16,6 +16,8 @@ import store from "./store";
 import globalMethods from './utils/global-methods'
 import SlideRowList from "./components/slide/SlideRowList";
 import SlideColumnList from "./components/slide/SlideColumnList";
+import Mask from "./components/Mask";
+import NoMore from "./components/NoMore";
 
 const mixin = {
   methods: {
@@ -32,6 +34,8 @@ app.component('SlideColumnList', SlideColumnList)
 app.component('SlideItem', SlideItem)
 app.component('Video1', Video)
 app.component('Footer', Footer)
+app.component('Mask', Mask)
+app.component('NoMore', NoMore)
 app.mixin(mixin)
 app.use(router)
 app.use(store)

src/pages/me/Me.vue

@@ -59,12 +59,14 @@
         </div>
         <div ref="content" style="margin-bottom: 60px;">
           <Indicator
+              name="videoList"
               :fixed="indicatorFixed"
               tabStyleWidth="33%"
               :tabTexts="['作品','私密','喜欢']"
               v-model:active-index="contentIndex">
           </Indicator>
           <SlideRowList
+              name="videoList"
               @end="end"
               :indicator-fixed="indicatorFixed"
               v-model:active-index="contentIndex">

src/pages/people/FindAcquaintance.vue

@@ -1,42 +1,69 @@
 <template>
   <div class="FindAcquaintance">
     <div class="header">
-      <img src="../../assets/img/icon/back.png" alt="" class="back">
+      <img src="../../assets/img/icon/back.png" alt="" class="back" @click="$back">
       <Indicator
+          style="width: 50%;"
           tabStyleWidth="40%"
           :tabTexts="['熟人列表','发现熟人']"
           v-model:active-index="currentSlideItemIndex">
       </Indicator>
-      <img src="../../assets/img/icon/back.png" alt="" class="option">
+      <img src="../../assets/img/icon/back.png" alt="" class="option" @click="moreOptionDialog = true">
     </div>
-    <SlideRowList v-model:active-index="currentSlideItemIndex">
+    <SlideRowList v-model:active-index="currentSlideItemIndex" :style="{opacity : moreOptionDialog ? .5:1}">
       <SlideItem>
-        <Search class="vue"></Search>
+        <Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search>
+        <div class="title">我的好友（互相关注）</div>
         <People v-for="item in list " :people="item"></People>
+        <NoMore></NoMore>
       </SlideItem>
       <SlideItem>
-        <Search class="vue"></Search>
-        <Search class="vue" @click="findAddressListDialog = true"></Search>
+        <Search :key="1"></Search>
       </SlideItem>
     </SlideRowList>
-    <div v-if="findAddressListDialog" class="dialog find-address-list">
-      <div class="content">
-        <div class="body">
-          <div>
-            <img src="../../assets/img/icon/head-image.jpeg" alt="">
-          </div>
-          <span class="title">发现通讯录好友</span>
-          <span class="desc">
+
+
+    <transition name="fade">
+      <div v-if="findAddressListDialog" class="dialog find-address-list" @click="findAddressListDialog = false">
+        <div class="content" @click.stop="null">
+          <div class="body">
+            <div>
+              <img src="../../assets/img/icon/head-image.jpeg" alt="">
+            </div>
+            <span class="title">发现通讯录好友</span>
+            <span class="desc">
             授权通讯录，看看哪些好友在使用抖音。具体使用场景及撤回授权方式详见
             <span class="link" @click="$nav('/service-protocol')">《隐私政策》</span>
         </span>
+          </div>
+          <div class="footer">
+            <div @click="findAddressListDialog = false">暂时不要</div>
+            <div @click="$nav('/address-list')">发现好友</div>
+          </div>
         </div>
-        <div class="footer">
-          <div @click="findAddressListDialog = false">暂时不要</div>
-          <div @click="$nav('/address-list')">发现好友</div>
+      </div>
+    </transition>
+    <transition name="fade">
+      <Mask v-if="moreOptionDialog" @click="moreOptionDialog = false"></Mask>
+    </transition>
+    <transition name="from-bottom">
+      <div class="more-option-dialog" v-if="moreOptionDialog">
+        <div class="row">
+          <span>站外好友口令</span>
+        </div>
+        <div class="row">
+          <span>扫一扫加好友</span>
+        </div>
+        <div class="row" style="border-bottom: none;">
+          <span>面对面加好友</span>
+        </div>
+        <div class="space"></div>
+        <div class="row" @click="moreOptionDialog = false">
+          取消
         </div>
       </div>
-    </div>
+    </transition>
+
   </div>
 </template>
 <script>
@@ -54,6 +81,7 @@ export default {
   data() {
     return {
       findAddressListDialog: false,
+      moreOptionDialog: true,
       indicatorFixed: false,
       currentSlideItemIndex: 1,
       list: [
@@ -85,6 +113,16 @@ export default {
 <style scoped lang="scss">
 @import "../../assets/scss/index";
 
+.from-bottom-enter-active,
+.from-bottom-leave-active {
+  transition: transform 0.2s ease;
+}
+
+.from-bottom-enter-from,
+.from-bottom-leave-to {
+  transform: translate3d(0, 50vh, 0);
+}
+
 .FindAcquaintance {
   position: fixed;
   left: 0;
@@ -93,52 +131,26 @@ export default {
   top: 0;
   color: white;
 
-  .content {
-
-  }
-
   .header {
+    height: 6rem;
+    font-size: 1.4rem;
+    padding: 0 2rem;
     display: flex;
     justify-content: space-between;
-  }
-
-  .indicator-ctn {
-    width: 50%;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 999;
-    background: $main-bg;
-
-    .tabs {
-      display: flex;
-      justify-content: space-between;
-      font-weight: bold;
-
-      .tab {
-        height: 40px;
-        width: 45%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: gray;
-        transition: color .3s;
-
-        &.active {
-          color: white;
-        }
-      }
-    }
+    align-items: center;
+    border-bottom: 1px solid $line-color;
 
-    .indicator {
-      height: 2px;
-      background: gold;
-      width: 45%;
-      position: relative;
-      transition: all .3s;
+    img {
+      height: 2rem;
     }
   }
 
+  .title {
+    margin-left: 2rem;
+    margin-top: 2rem;
+    color: $second-text-color;
+    font-size: 1.2rem;
+  }
 
   .dialog {
     z-index: 10;
@@ -215,5 +227,36 @@ export default {
     }
 
   }
+
+
+  .more-option-dialog {
+    z-index: 9;
+    position: fixed;
+    width: 100%;
+    max-height: 50vh;
+    overflow: auto;
+    bottom: 0;
+    background: white;
+    box-sizing: border-box;
+    border-radius: 5px 5px 0 0;
+
+    .space {
+      height: 1rem;
+      background: whitesmoke;
+    }
+
+    .row {
+      font-size: 1.6rem;
+      color: black;
+      background: white;
+      box-sizing: border-box;
+      padding: 1.8rem;
+      width: 100%;
+      //border-bottom: 1px solid ghostwhite;
+      border-bottom: 1px solid gainsboro;
+      text-align: center;
+
+    }
+  }
 }
 </style>