优化分享朋友弹窗

src/components/BaseButton.vue

@@ -117,6 +117,7 @@ export default {
 
   &.dark {
     background: @second-btn-color;
+    color: @second-text-color;
   }
 
   &.dark2 {

src/components/Search.vue

@@ -2,7 +2,7 @@
   <div class="search-ctn" :class="mode">
     <div class="search">
       <img v-if="isShowSearchIcon" class="search-icon" src="../assets/img/icon/search-gray.png" alt="">
-      <input type="text" :placeholder="placeholder" v-model="value">
+      <input type="text" :placeholder="placeholder" v-model="value" >
       <div class="suffix">
         <slot v-if="$slots.default"></slot>
         <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/close.svg" @click.stop="clear">

src/components/dialog/FromBottomDialog.vue

@@ -28,6 +28,8 @@
 
 </template>
 <script>
+import Dom from "../../utils/dom";
+
 export default {
   name: "FromBottomDialog",
   props: {
@@ -122,7 +124,7 @@ export default {
         this.$setCss(el, 'transform', `translate3d(0,0,0)`)
       }, 0)
       setTimeout(() => {
-        this.$setCss(el, 'transition-duration', `0ms`)
+        // this.$setCss(el, 'transition-duration', `0ms`)
         this.$setCss(el, 'transform', `none`)
         done()
       }, 200)
@@ -134,7 +136,9 @@ export default {
       this.$setCss(el, 'transform', `translate3d(0,0,0)`)
     },
     leave(el, done) {
-      this.$setCss(el, 'transform', `translate3d(0,${this.height},0)`)
+      //ref获取不到
+      let maxHeight = new Dom('.FromBottomDialog').css('max-height')
+      this.$setCss(el, 'transform', `translate3d(0,${maxHeight},0)`)
       setTimeout(done, 200)
     },
     afterLeave() {
@@ -156,12 +160,14 @@ export default {
       if (this.$refs.dialog.scrollTop !== 0) return
       this.moveYDistance = e.touches[0].pageY - this.startLocationY
       if (this.moveYDistance > 0) {
+        this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
         this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${this.moveYDistance}px,0)`)
       }
     },
     end(e) {
       if (!this.touchMoved) return;
       //点击
+
       if (Date.now() - this.startTime < 150) return
 
       //滑动
@@ -175,7 +181,7 @@ export default {
         this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,0,0)`)
         setTimeout(() => {
           this.$setCss(this.$refs.dialog, 'transform', 'none')
-          this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
+          // this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
         }, 300)
       }
     }
@@ -196,6 +202,7 @@ export default {
   left: 0;
   box-sizing: border-box;
   border-radius: .5rem .5rem 0 0;
+  transition: all .3s;
 
   &.dark {
     background: @main-bg;

src/pages/Test4.vue

@@ -1,13 +1,7 @@
 <template>
   <div class="Test">
     <base-button type="primary" @click="t = true">test</base-button>
-    <Search
-        class="ml2r mr2r"
-        placeholder="搜索"
-        v-model="createChatSearchKey"/>
     <ShareToFriend v-model="t"/>
-
-    {{createChatSearchKey}}
   </div>
 </template>
 <script>
@@ -31,7 +25,6 @@ export default {
   data() {
     return {
       t: false,
-      createChatSearchKey: ''
     }
   },
   methods: {},

src/pages/home/components/ShareToFriend.vue

@@ -2,77 +2,92 @@
   <from-bottom-dialog
       v-model="modelValue"
       @cancel="cancel"
-      height="70vh">
+      :height="height">
-    <div class="create-chat-wrapper" v-show="!showJoinedChat">
+    <div class="content" :style="{minHeight:height}">
-      <Search
+      <div class="create-chat-wrapper" v-show="!showJoinedChat">
-          :isShowText="isShowText"
+        <Search
-          @click="isShowText = true"
+            :isShowText="isShowText"
-          @notice="isShowText = false;"
+            @click="isShowText = true;height = '100vh';"
-          @clear="isShowText = false"
+            @notice="isShowText = false;height = '70vh';"
-          class="ml2r mr2r"
+            showText="取消"
-          placeholder="搜索"
+            notice="gray"
-          v-model="createChatSearchKey"/>
+            class="ml2r mr2r"
-      <template v-if="createChatSearchKey">
+            placeholder="搜索"
-        <div class="search-result" v-if="searchFriends.length">
+            v-model="searchKey"/>
-          <div class="search-result-item" v-for="item in searchFriends"
+        <template v-if="searchKey">
-               @click="item.select = !item.select;createChatSearchKey = ''">
+          <div class="friend-list" v-if="searchResult.length">
-            <img class="left" src="../../../assets/img/icon/head-image.jpeg" alt="">
+            <div class="friend-item" v-for="item in searchResult"
-            <div class="right">
+                 @click="item.select = !item.select;searchKey = ''">
-              <div class="info">
+              <img class="left" :src="$imgPreview(item.avatar)" alt="">
-                <span class="name">{{ item.name }}</span>
+              <div class="right">
-                <span class="account">{{ item.account ? '抖音号:' + item.account : '' }}</span>
+                <div class="info">
+                  <span class="name">
+                     <span v-if="item.name.indexOf(searchKey) > -1">
+                       {{ item.name.substr(0, item.name.indexOf(searchKey)) }}<span style="color: #fc2f56">{{
+                         searchKey
+                       }}</span>{{ item.name.substr(item.name.indexOf(searchKey) + searchKey.length) }}
+                      </span>
+                      <span v-else>{{ item.name }}</span>
+                  </span>
+                </div>
+                <b-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
+                  {{ item.shared ? '已' : '' }}分享
+                </b-button>
               </div>
-              <b-button type="primary">分享</b-button>
             </div>
           </div>
-        </div>
+          <div class="no-result" v-else>
-        <div class="no-result" v-else>
+            <div class="notice-h1">
-          <div class="notice-h1">
+              搜索结果为空
-            搜索结果为空
+            </div>
+            <div class="notice-h2">
+              没有搜索到相关的联系人
+            </div>
           </div>
-          <div class="notice-h2">
+        </template>
-            没有搜索到相关的联系人
+        <template v-else>
+          <div class="joined-chat" @click="showJoinedChat = true">
+            <img class="left" src="../../../assets/img/icon/people-gray.png" alt="">
+            <div class="right">
+              <span>已加入的群聊</span>
+              <back direction="right" mode="gray" scale=".7"/>
+            </div>
           </div>
-        </div>
+          <div class="friend-list">
-      </template>
+            <div class="index">所有朋友</div>
-      <template v-else>
+            <div class="friend-item" v-for="item in localFriends">
-        <div class="joined-chat" @click="showJoinedChat = true">
+              <img class="left" :src="$imgPreview(item.avatar)" alt="">
-          <img class="left" src="../../../assets/img/icon/people-gray.png" alt="">
+              <div class="right">
-          <div class="right">
+                <span>{{ item.name }}</span>
-            <span>已加入的群聊</span>
+                <b-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
-            <back direction="right" mode="gray" scale=".7"/>
+                  {{ item.shared ? '已' : '' }}分享
+                </b-button>
+              </div>
+            </div>
           </div>
+        </template>
+      </div>
+      <div class="joined-chat-wrapper" v-show="showJoinedChat">
+        <div class="nav">
+          <back @click="showJoinedChat = false" mode="light" scale="1"></back>
+          <span>已加入的群聊</span>
+          <span>&nbsp;</span>
         </div>
-        <div class="friend-list">
+
-          <div class="index">所有朋友</div>
+        <div class="chat-list">
-          <div class="friend-item" v-for="item in friends.all" @click="item.select = !item.select">
+          <div class="chat-item" v-for="item in localFriends">
             <img class="left" :src="$imgPreview(item.avatar)" alt="">
             <div class="right">
-              <span>{{ item.name }}</span>
+              <div class="title">
-              <b-button type="primary">分享</b-button>
+                <div class="name">{{ text }}</div>
+                <div class="num">(3)</div>
+              </div>
+              <b-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
+                {{ item.shared ? '已' : '' }}分享
+              </b-button>
             </div>
           </div>
         </div>
-      </template>
-    </div>
-    <div class="joined-chat-wrapper" v-show="showJoinedChat">
-      <div class="nav">
-        <back @click="showJoinedChat = false" mode="light" scale="1"></back>
-        <span>已加入的群聊</span>
-        <span>&nbsp;</span>
-      </div>
-
-      <div class="chat-list">
-        <div class="chat-item" v-for="item in 15">
-          <img class="left" src="../../../assets/img/icon/head-image.jpeg" alt="">
-          <div class="right">
-            <div class="title">
-              <div class="name">{{ text }}</div>
-              <div class="num">(3)</div>
-            </div>
-            <b-button type="primary">分享</b-button>
-          </div>
-        </div>
       </div>
     </div>
   </from-bottom-dialog>
@@ -97,38 +112,49 @@ export default {
   },
   data() {
     return {
-      showDialog: false,
+      height: '70vh',
       showJoinedChat: false,
       isShowText: false,
-      createChatSearchKey: '',
+      text:'AAAAAAA、BBBBBBBB、CCCCCCCCCCCCC',
-      text: 'AAAAAAAAA、BBBBBBBBBBBBB、CCCCCCCC',
       localFriends: [],
-      searchFriends: []
+      searchResult: [],
+      searchKey: '',
     }
   },
   watch: {
-    createChatSearchKey(newVal) {
+    searchKey(newVal) {
       if (newVal) {
-        //TODO　搜索时仅仅判断是否包含了对应字符串，抖音做了拼音判断的
+        let temp = this.$clone(this.localFriends)
-        this.searchFriends = this.friends.all.filter(v => {
+        this.searchResult = temp.filter(v => {
-          if (v.name.includes(newVal)) return true
+          return v.name.includes(newVal) || v.account.includes(newVal);
-          return v.account.includes(newVal);
         })
       } else {
-        this.searchFriends = []
+        this.searchResult = []
+      }
+    },
+    modelValue(newVal) {
+      if (newVal) {
+        this.localFriends = this.$clone(this.friends.all)
+        this.localFriends.map(v => v.shared = false)
+      } else {
+        this.searchKey = ''
+        this.height = '70vh'
+        this.isShowText = false
+        this.showJoinedChat = false
       }
     }
   },
   computed: {
     ...mapState(['friends']),
     selectFriends() {
-      return this.friends.all.filter(v => v.select).length
+      return this.localFriends.filter(v => v.shared)
     }
   },
   created() {
   },
   methods: {
     cancel() {
+      this.height = '70vh'
       this.$emit('update:modelValue', false)
     },
   }
@@ -143,22 +169,31 @@ export default {
   height: 2.6rem;
 }
 
-.create-chat-wrapper {
+.friend-list {
-  padding-bottom: 4rem;
+  padding: 0 2rem;
-  background: @main-bg;
 
-  .joined-chat {
+  .index {
-    border-bottom: 1px solid @line-color;
+    color: @second-text-color;
-    height: 5rem;
+    height: 6rem;
-    padding: 0 2rem;
+    line-height: 6rem;
+    font-size: 1.3rem;
+  }
+
+  .friend-item {
+    margin-bottom: 2rem;
     display: flex;
     align-items: center;
+    //background: #fff;
+
+    &:nth-child(1) {
+      margin-top: 1rem;
+    }
 
     .left {
-      width: 2.2rem;
+      width: 3.8rem;
-      height: 2.2rem;
+      height: 3.8rem;
-      margin-left: 1rem;
+      border-radius: 50%;
-      margin-right: 2rem;
+      margin-right: 1rem;
     }
 
     .right {
@@ -167,178 +202,32 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-    }
-  }
 
-  .friend-list {
+      img {
-    padding: 0 2rem;
+        height: 2rem;
-
-    .index {
-      color: @second-text-color;
-      height: 6rem;
-      line-height: 6rem;
-      font-size: 1.3rem;
-    }
-
-    .friend-item {
-      margin-bottom: 2rem;
-      display: flex;
-      align-items: center;
-      //background: #fff;
-
-      &:nth-child(1) {
-        margin-top: 1rem;
-      }
-
-      .left {
-        width: 3.8rem;
-        height: 3.8rem;
-        border-radius: 50%;
-        margin-right: 1rem;
-      }
-
-      .right {
-        font-size: 1.4rem;
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        img {
-          height: 2rem;
-        }
       }
     }
   }
-
-  .btn-wrapper {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: @main-bg;
-    //background: red;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .btn {
-      margin-bottom: 2rem;
-      width: calc(100% - 4rem);
-      height: 4rem;
-      display: flex;
-      align-items: center;
-      font-size: 1.4rem;
-      justify-content: center;
-      background: #3f445c;
-      border-radius: .2rem;
-
-      &.primary {
-        background: @primary-btn-color;
-      }
-    }
-  }
-
-  .search-result {
-    padding: 0 2rem;
-
-    .search-result-item {
-      margin-bottom: 2rem;
-      display: flex;
-      align-items: center;
-
-      &:nth-child(1) {
-        margin-top: 1rem;
-      }
-
-      .left {
-        width: 4.8rem;
-        height: 4.8rem;
-        border-radius: 50%;
-        margin-right: 1rem;
-      }
-
-      .right {
-        font-size: 1.4rem;
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .info {
-          display: flex;
-          flex-direction: column;
-
-          .name {
-            font-size: 1.4rem;
-          }
-
-          .account {
-            font-size: 1.3rem;
-            color: @second-text-color;
-          }
-        }
-
-        img {
-          height: 2rem;
-        }
-      }
-    }
-  }
-
-  .no-result {
-    height: 50vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-
-    .notice-h1 {
-      font-size: 1.6rem;
-    }
-
-    .notice-h2 {
-      margin-top: 1rem;
-      font-size: 1.4rem;
-      color: @second-text-color;
-    }
-
-  }
 }
 
-.joined-chat-wrapper {
+.content {
-  background: @main-bg;
 
-  .nav {
+  .create-chat-wrapper {
-    font-size: 1.6rem;
+    padding-bottom: 4rem;
-    padding: 2rem;
+    background: @main-bg;
-    display: flex;
-    justify-content: space-between;
-  }
 
-  .chat-list {
+    .joined-chat {
-    padding: 0 2rem;
+      border-bottom: 1px solid @line-color;
-
+      height: 5rem;
-    .chat-item {
+      padding: 0 2rem;
-      margin-bottom: 2rem;
       display: flex;
       align-items: center;
-      position: relative;
-      overflow: hidden;
-
-      &:nth-last-child(1) {
-        margin-bottom: 0;
-      }
-
-      &:nth-child(1) {
-        margin-top: 1rem;
-      }
 
       .left {
-        width: 3.8rem;
+        width: 2.2rem;
-        height: 3.8rem;
+        height: 2.2rem;
-        border-radius: 50%;
+        margin-left: 1rem;
-        margin-right: 1rem;
+        margin-right: 2rem;
       }
 
       .right {
@@ -347,28 +236,122 @@ export default {
         display: flex;
         align-items: center;
         justify-content: space-between;
+      }
+    }
 
-        .title {
-          width: 55vw;
-          overflow: hidden;
-          box-sizing: border-box;
-          display: flex;
-          align-items: center;
 
-          .name {
+    .btn-wrapper {
-            white-space: nowrap;
+      position: fixed;
-            text-overflow: ellipsis;
+      bottom: 0;
-            overflow: hidden;
+      left: 0;
-          }
+      right: 0;
+      background: @main-bg;
+      //background: red;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-          .num {
+      .btn {
-            margin-left: .5rem;
+        margin-bottom: 2rem;
-            color: @second-text-color;
+        width: calc(100% - 4rem);
-          }
+        height: 4rem;
+        display: flex;
+        align-items: center;
+        font-size: 1.4rem;
+        justify-content: center;
+        background: #3f445c;
+        border-radius: .2rem;
+
+        &.primary {
+          background: @primary-btn-color;
+        }
+      }
+    }
+
+    .no-result {
+      height: 50vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+
+      .notice-h1 {
+        font-size: 1.6rem;
+      }
+
+      .notice-h2 {
+        margin-top: 1rem;
+        font-size: 1.4rem;
+        color: @second-text-color;
+      }
+
+    }
+  }
+
+  .joined-chat-wrapper {
+    background: @main-bg;
+
+    .nav {
+      font-size: 1.6rem;
+      padding: 2rem;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .chat-list {
+      padding: 0 2rem;
+
+      .chat-item {
+        margin-bottom: 2rem;
+        display: flex;
+        align-items: center;
+        position: relative;
+        overflow: hidden;
+
+        &:nth-last-child(1) {
+          margin-bottom: 0;
         }
 
-        img {
+        &:nth-child(1) {
-          height: 1.5rem;
+          margin-top: 1rem;
+        }
+
+        .left {
+          width: 3.8rem;
+          height: 3.8rem;
+          border-radius: 50%;
+          margin-right: 1rem;
+        }
+
+        .right {
+          font-size: 1.4rem;
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .title {
+            width: 55vw;
+            overflow: hidden;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+
+            .name {
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+
+            .num {
+              margin-left: .5rem;
+              color: @second-text-color;
+            }
+          }
+
+          img {
+            height: 1.5rem;
+          }
         }
       }
     }