优化分享朋友弹窗

src/App.vue

@@ -4,9 +4,10 @@
       <Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
     </transition>
     <transition :name="transitionName">
-      <keep-alive>
+<!--      <keep-alive>-->
+<!--      </keep-alive>-->
       <component :is="Component"/>
-      </keep-alive>
+
     </transition>
   </router-view>
 
@@ -51,10 +52,10 @@ export default {
 
       const routeDeep = [
         '/message', '/attention', '/home', '/me', '/publish',
-        '/home/report',
         '/home/submit-report',
         '/home/music',
         '/home/music-rank-list',
+        '/home/report',
 
 
         '/message/share-to-friend',

src/components/Share.vue

@@ -25,14 +25,16 @@
       </div>
       <div class="line"></div>
       <div class="shares ">
-        <div class="share-to" @click="closeShare($nav('/message/share-to-friend'))">
+        <template v-if="mode === 'video'">
-          <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
-          <span>私信朋友</span>
-        </div>
           <div class="share-to" @click="$no">
             <img src="../assets/img/icon/components/video/torichang.png" alt="">
             <span>分享日常</span>
           </div>
+        </template>
+        <div class="share-to" @click="closeShare($nav('/message/share-to-friend'))">
+          <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
+          <span>站内私信</span>
+        </div>
         <div class="share-to" @click="closeShare($emit('showShare2WeChatZone'))">
           <img src="../assets/img/icon/components/video/towechat.webp" alt="">
           <span>朋友圈</span>
@@ -49,6 +51,7 @@
           <img src="../assets/img/icon/components/video/toqq.webp" alt="">
           <span>QQ好友</span>
         </div>
+        <template v-if="mode === 'video'">
           <div class="share-to" @click="closeShare($emit('showShareDuoshan'))">
             <img src="../assets/img/icon/components/video/duoshan.png" alt="">
             <span>多闪</span>
@@ -57,17 +60,33 @@
             <img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
             <span>今日头条</span>
           </div>
+        </template>
         <div class="share-to" @click="closeShare($emit('share2Webo'))">
           <img src="../assets/img/icon/components/video/toweibo.webp" alt="">
           <span>微博</span>
         </div>
       </div>
       <div class="toolbar ">
+        <template v-if="mode === 'music'">
+          <div class="tool" @click="copyLink">
+            <img src="../assets/img/icon/components/video/link.png" alt="">
+            <span>复制链接</span>
+          </div>
+          <div class="tool" @click="$nav('/home/report',{type:this.mode})">
+            <img src="../assets/img/icon/components/video/warring.png" alt="">
+            <span>举报音乐</span>
+          </div>
+          <div class="tool" @click="closeShare($emit('showDouyinCode'))">
+            <img src="../assets/img/icon/components/video/qrcode.png" alt="">
+            <span>抖音码</span>
+          </div>
+        </template>
+        <template v-if="mode === 'video'">
           <div class="tool" @click="$no">
             <img src="../assets/img/icon/components/video/comeonlook.webp" alt="">
             <span>一起视频</span>
           </div>
-        <div class="tool" @click="$nav('/home/report')">
+          <div class="tool" @click="$nav('/home/report',{type:this.mode})">
             <img src="../assets/img/icon/components/video/warring.png" alt="">
             <span>举报</span>
           </div>
@@ -110,6 +129,7 @@
             <img src="../assets/img/icon/components/video/feedback.webp" alt="">
             <span>播放反馈</span>
           </div>
+        </template>
       </div>
 
       <div class="share2friend" v-if="selectFriends.length">
@@ -152,6 +172,10 @@ export default {
       type: Boolean,
       default: true
     },
+    mode: {
+      type: String,
+      default: 'video'//music
+    },
   },
   computed: {
     ...mapState(['friends']),

src/components/dialog/ConfirmDialog.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="ConfirmDialog " @click="$emit('dismiss')" v-if="visible">
     <div class="content" @click.stop="stop">
+      <slot name="header"></slot>
       <div class="body">
         <div class="title" v-if="title">{{ title }}</div>
         <div class="subtitle" :class="subtitleColor" v-if="subtitle">{{ subtitle }}</div>
@@ -14,6 +15,7 @@
   </div>
 </template>
 <script>
+/*TODO 单独使用时，没有mark*/
 export default {
   name: "ConfirmDialog",
   props: {

src/pages/Test4.vue

@@ -1,21 +1,19 @@
 <template>
   <div class="Test">
-    <div class="content1">
+    <base-button type="primary" @click="t = true">test</base-button>
-      <BaseMarquee :is-play="true" :text="text" style="width: 150px;"/>
+    <ShareToFriend v-model="t"/>
-      <BaseButton @click="triggerPause">pause</BaseButton>
-      <BaseButton @click="triggerStart">start</BaseButton>
-    </div>
   </div>
 </template>
 <script>
-
+import ShareToFriend from "./home/components/ShareToFriend";
 import BaseButton from "../components/BaseButton";
-import BaseMarquee from "../components/BaseMarquee";
-import Dom from "../utils/dom";
 
 export default {
   name: "Test4",
-  components: {BaseButton, BaseMarquee},
+  components: {
+    BaseButton,
+    ShareToFriend
+  },
   props: {
     text: {
       type: String,
@@ -24,20 +22,10 @@ export default {
   },
   data() {
     return {
-      timer: null,
+      t: false,
-      contentWidth: 0,
-      transformX: 0,
-      $marqueeContent: null,
     }
   },
-  methods: {
+  methods: {},
-    triggerPause() {
-      new Dom('.text').trigger('pause')
-    },
-    triggerStart() {
-      new Dom('.text').trigger('start')
-    },
-  },
   mounted() {
   }
 }
@@ -55,12 +43,5 @@ export default {
   overflow: auto;
   font-size: 1.4rem;
   color: white;
-
-  .content1 {
-    padding-top: 6rem;
-
-  }
-
-
 }
 </style>

src/pages/home/Music.vue

@@ -14,7 +14,7 @@
           <img class="star" v-else src="../../assets/img/icon/star-white.png" @click.stop="toggleCollect()">
         </template>
         <div class="logo" v-if="!isFixed" @click="$nav('/home/music-rank-list')">抖音音乐榜</div>
-        <img class="share" src="../../assets/img/icon/share-white.png" alt="">
+        <img class="share" src="../../assets/img/icon/share-white.png" @click="isSharing = true">
       </div>
     </div>
     <div class="content">
@@ -23,16 +23,21 @@
               @fixed="e => this.isFixed = e"
               @pulldown="loadData">
         <div class="desc">
-          <img class="logo" src="../../assets/img/poster/src1-bg.png" alt="">
+          <div class="cover-wrapper" @click="togglePlay()">
+            <img class="cover" src="../../assets/img/poster/src1-bg.png" alt="">
+            <img v-if="!isPlay" src="../../assets/img/icon/play-white.png" alt="" class="play">
+            <img v-if="isPlay" src="../../assets/img/icon/pause-white.png" alt="" class="play">
+          </div>
           <div class="info">
             <div class="name">MT创作的原声</div>
             <div>
-              <div class="user">NT ></div>
+              <div class="user">NT</div>
-              <div class="peoples">>1 人使用</div>
+              <div class="peoples">>5585 人使用</div>
             </div>
-            <div class="collection">
+            <div class="collection" @click.stop="toggleCollect()">
-              <img src="../../assets/img/icon/star-white.png" alt="">
+              <img v-if="isCollect" src="../../assets/img/icon/star-yellow.png">
-              <span>收藏</span>
+              <img v-else src="../../assets/img/icon/star-white.png">
+              <span>{{ isCollect ? '已' : '' }}收藏</span>
             </div>
           </div>
         </div>
@@ -50,21 +55,75 @@
         <span>拍同款</span>
       </div>
     </div>
+
+    <Share v-model="isSharing"
+           mode="music"
+           ref="share"
+           @showDouyinCode="showDouyinCode = true"
+           @showShare2WeChatZone="shareType = 2"
+           @share2WeChat="shareType = 3"
+           @share2QQZone="shareType = 4"
+           @share2QQ="shareType = 5"
+           @share2Webo="shareType = 8"
+    />
+
+    <DouyinCode v-model="showDouyinCode"/>
+
+
+    <ConfirmDialog
+        v-model:visible="showSharePassword"
+        title="你的口令已复制"
+        subtitle="0F.:/ a【风就应该自由要什么归宿】长按复制此条消息，打开抖音搜索，聆听音乐##kwu3VCixHl8##[抖音口令]"
+        :okText="okText"
+        cancelText="不分享了"
+    >
+      <template v-slot:header>
+        <img style="width: 100%;" src="../../assets/img/icon/share-password.webp" alt="">
+      </template>
+    </ConfirmDialog>
+
   </div>
 </template>
 <script>
 import Posters from "../../components/Posters";
 import Scroll from "../../components/Scroll";
 import Loading from "../../components/Loading";
+import Share from "../../components/Share";
+import DouyinCode from "../../components/DouyinCode";
+import ConfirmDialog from "../../components/dialog/ConfirmDialog";
 
 export default {
   name: "Music",
-  components: {Scroll, Posters, Loading},
+  components: {
+    Scroll,
+    Posters,
+    Loading,
+    Share,
+    DouyinCode,
+    ConfirmDialog
+  },
   data() {
     return {
+      loading: false,
       isFixed: false,
       isCollect: false,
-      loading: false,
+      isPlay: false,
+      isSharing: false,
+      okText: '',
+
+      showSharePassword: false,
+      shareType: -1,
+
+      showPlayFeedback: false,
+      showShareDuoshan: false,
+      showShareDialog: false,
+      showShare2WeChatZone: false,
+      showDouyinCode: false,
+      showFollowSetting: false,
+      showFollowSetting2: false,
+      showBlockDialog: false,
+      showChangeNote: false,
+
       videos: [
         {
           "id": "ac78850c-1497-43bb-bdf8-219f3262b690",
@@ -2423,6 +2482,22 @@ export default {
       ]
     }
   },
+  watch: {
+    shareType(newVal, oldVal) {
+      if (newVal === -1) return
+      this.showSharePassword = true
+      switch (newVal) {
+        case 2:
+        case 3:
+          return this.okText = '去微信粘贴'
+        case 4:
+        case 5:
+          return this.okText = '去QQ粘贴'
+        case 8:
+          return this.okText = '去微博粘贴'
+      }
+    }
+  },
   created() {
     this.videos = this.videos.concat(this.videos2).concat(this.videos3)
   },
@@ -2436,6 +2511,9 @@ export default {
       await this.$sleep(1500)
       this.videos = this.videos.concat(this.videos2)
       this.loading = false
+    },
+    togglePlay() {
+      this.isPlay = !this.isPlay
     }
   },
   mounted() {
@@ -2509,15 +2587,28 @@ export default {
     }
 
     .desc {
-      padding: 3rem 1.5rem;
+      padding: 1rem 1.5rem 3rem 1.5rem;
       display: flex;
       height: 12rem;
 
-      .logo {
+      .cover-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .play {
+          width: 4rem;
+          height: 4rem;
+          position: absolute;
+        }
+
+        .cover {
           width: 12rem;
           height: 100%;
           border-radius: .3rem;
         }
+      }
 
       .info {
         margin-left: 1.5rem;

src/pages/home/Report.vue

@@ -2,7 +2,9 @@
   <div class="Report">
     <BaseHeader backMode="light">
       <template v-slot:center>
-        <span class="f16">视频举报</span>
+        <span class="f16">
+          <template v-if="type === 'video'">视频</template>
+          <template v-if="type === 'music'">音乐</template>举报</span>
       </template>
     </BaseHeader>
     <div class="content">
@@ -106,11 +108,16 @@ export default {
   name: "Report",
   props: {},
   data() {
-    return {}
+    return {
+      type: 'video'
+    }
   },
   computed: {},
   created() {
   },
+  activated() {
+    this.type = this.$route.query.type
+  },
   methods: {}
 }
 </script>

src/pages/home/components/ShareToFriend.vue

@@ -0,0 +1,371 @@
+<template>
+  <from-bottom-dialog
+      v-model="modelValue"
+      @cancel="cancel"
+      height="70vh">
+    <div class="create-chat-wrapper" v-if="!showJoinedChat">
+      <Search :isShowText="isShowText"
+              @click="isShowText = true"
+              @notice="isShowText = false;"
+              @clear="isShowText = false"
+              class="ml2r mr2r" placeholder="搜索" v-model="createChatSearchKey"></Search>
+      <template v-if="createChatSearchKey">
+        <div class="search-result" v-if="searchFriends.length">
+          <div class="search-result-item" v-for="item in searchFriends"
+               @click="item.select = !item.select;createChatSearchKey = ''">
+            <img class="left" src="../../../assets/img/icon/head-image.jpeg" alt="">
+            <div class="right">
+              <div class="info">
+                <span class="name">{{ item.name }}</span>
+                <span class="account">{{ item.account ? '抖音号:' + item.account : '' }}</span>
+              </div>
+              <b-button type="primary">分享</b-button>
+            </div>
+          </div>
+        </div>
+        <div class="no-result" v-else>
+          <div class="notice-h1">
+            搜索结果为空
+          </div>
+          <div class="notice-h2">
+            没有搜索到相关的联系人
+          </div>
+        </div>
+      </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 class="friend-list">
+          <div class="index">所有朋友</div>
+          <div class="friend-item" v-for="item in friends.all" @click="item.select = !item.select">
+            <img class="left" :src="$imgPreview(item.avatar)" alt="">
+            <div class="right">
+              <span>{{ item.name }}</span>
+              <b-button type="primary">分享</b-button>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="joined-chat-wrapper" v-if="showJoinedChat">
+      <div class="nav">
+        <back @click="showJoinedChat = false" mode="light" scale="1.2"></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.length > 20 ? text.substr(0, 20) + '...' : text }}</div>
+              <div class="num">(3)</div>
+            </div>
+            <back direction="right" mode="light"></back>
+          </div>
+        </div>
+      </div>
+      <NoMore></NoMore>
+    </div>
+  </from-bottom-dialog>
+</template>
+<script>
+import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+import {mapState} from "vuex";
+import Search from "../../../components/Search";
+import Check from "../../../components/Check";
+
+export default {
+  name: "ShareTo",
+  components: {
+    FromBottomDialog,
+    Search,
+    Check
+  },
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {
+      showDialog: false,
+      showJoinedChat: false,
+      isShowText: false,
+      createChatSearchKey: '',
+      localFriends: [],
+      searchFriends: []
+    }
+  },
+  watch: {
+    createChatSearchKey(newVal) {
+      if (newVal) {
+        //TODO　搜索时仅仅判断是否包含了对应字符串，抖音做了拼音判断的
+        this.searchFriends = this.friends.filter(v => {
+          if (v.name.includes(newVal)) return true
+          return v.account.includes(newVal);
+        })
+      } else {
+        this.searchFriends = []
+      }
+    }
+  },
+  computed: {
+    ...mapState(['friends']),
+    selectFriends() {
+      return this.friends.all.filter(v => v.select).length
+    }
+  },
+  created() {
+  },
+  methods: {
+    cancel() {
+      this.$emit('update:modelValue', false)
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../../assets/scss/index";
+
+.button {
+  width: 6.4rem;
+  height: 2.6rem;
+}
+
+.create-chat-wrapper {
+  padding-bottom: 4rem;
+  background: @main-bg;
+
+  .joined-chat {
+    border-bottom: 1px solid @line-color;
+    height: 5rem;
+    padding: 0 2rem;
+    display: flex;
+    align-items: center;
+
+    .left {
+      width: 2.2rem;
+      height: 2.2rem;
+      margin-left: 1rem;
+      margin-right: 2rem;
+    }
+
+    .right {
+      font-size: 1.4rem;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  .friend-list {
+    padding: 0 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 {
+  background: @main-bg;
+
+  .nav {
+    font-size: 1.7rem;
+    padding: 2rem;
+    display: flex;
+    justify-content: space-between;
+
+    img {
+      height: 2rem;
+    }
+  }
+
+  .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;
+      }
+
+      &: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;
+
+        .title {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+
+          .name {
+          }
+
+          .num {
+            margin-left: .5rem;
+            color: @second-text-color;
+          }
+        }
+
+        img {
+          height: 1.5rem;
+        }
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -60,10 +60,12 @@ const routes = [
   {path: '/test3', component: Test3},
   {path: '/test4', component: Test4},
   {path: '/home', component: Index},
-  {path: '/home/report', component: Report},
   {path: '/home/submit-report', component: SubmitReport},
   {path: '/home/music', component: Music},
   {path: '/home/music-rank-list', component: MusicRankList},
+  {path: '/home/report', component: Report},
+
+
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},
   {path: '/message', component: Message},