优化分享

src/App.vue

@@ -48,6 +48,9 @@ export default {
     },
   },
   mounted() {
+    window.onresize=()=>{
+      location.reload()
+    }
     // this.$store.dispatch('getFriends')
     try {
       navigator.control.gesture(false);

src/components/Search.vue

@@ -6,7 +6,7 @@
       <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/components/gray-close-full2.png"
+        <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/components/gray-close-full3.png"
              @click.stop="clear">
       </div>
     </div>

src/components/Video.vue

@@ -218,34 +218,34 @@ export default {
         if (e === 'playing') this.loading = false
         if (e === 'progress') this.loading = true
         if (e === 'waiting') this.loading = true
-        console.log((new Date()).getTime(), e, t)
+        //
       }, false);
     }
 
 
-    eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
+    // eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
-    eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起）
+    // eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起）
-    eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
+    // eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
-    // eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据
+    eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据
-    // eventTester("suspend", '延迟下载'); //延迟下载
+    // // eventTester("suspend", '延迟下载'); //延迟下载
-    eventTester("abort", '客户端主动终止下载（不是因为错误引起），'); //客户端主动终止下载（不是因为错误引起），
+    // eventTester("abort", '客户端主动终止下载（不是因为错误引起），'); //客户端主动终止下载（不是因为错误引起），
-    eventTester("error", '请求数据时遇到错误'); //请求数据时遇到错误
+    // eventTester("error", '请求数据时遇到错误'); //请求数据时遇到错误
-    eventTester("stalled", '网速失速'); //网速失速
+    // eventTester("stalled", '网速失速'); //网速失速
-    eventTester("play", 'play()和autoplay开始播放时触发'); //play()和autoplay开始播放时触发
+    // eventTester("play", 'play()和autoplay开始播放时触发'); //play()和autoplay开始播放时触发
-    eventTester("pause", 'pause()触发'); //pause()触发
+    // eventTester("pause", 'pause()触发'); //pause()触发
-    eventTester("loadedmetadata", '成功获取资源长度'); //成功获取资源长度
+    // eventTester("loadedmetadata", '成功获取资源长度'); //成功获取资源长度
-    eventTester("loadeddata"); //
+    // eventTester("loadeddata"); //
     eventTester("waiting", '等待数据，并非错误'); //等待数据，并非错误
     eventTester("playing", '开始回放'); //开始回放
-    eventTester("canplay", '/可以播放，但中途可能因为加载而暂停'); //可以播放，但中途可能因为加载而暂停
+    // eventTester("canplay", '/可以播放，但中途可能因为加载而暂停'); //可以播放，但中途可能因为加载而暂停
-    eventTester("canplaythrough", '可以播放，歌曲全部加载完毕'); //可以播放，歌曲全部加载完毕
+    // eventTester("canplaythrough", '可以播放，歌曲全部加载完毕'); //可以播放，歌曲全部加载完毕
-    eventTester("seeking", '寻找中'); //寻找中
+    // eventTester("seeking", '寻找中'); //寻找中
-    eventTester("seeked", '寻找完毕'); //寻找完毕
+    // eventTester("seeked", '寻找完毕'); //寻找完毕
-    // eventTester("timeupdate",'播放时间改变'); //播放时间改变
+    // // eventTester("timeupdate",'播放时间改变'); //播放时间改变
-    eventTester("ended", '播放结束'); //播放结束
+    // eventTester("ended", '播放结束'); //播放结束
-    eventTester("ratechange", '播放速率改变'); //播放速率改变
+    // eventTester("ratechange", '播放速率改变'); //播放速率改变
-    eventTester("durationchange", '资源长度改变'); //资源长度改变
+    // eventTester("durationchange", '资源长度改变'); //资源长度改变
-    eventTester("volumechange", '音量改变'); //音量改变
+    // eventTester("volumechange", '音量改变'); //音量改变
 
     let videoWrapper = new Dom(this.$refs.videoWrapper)
     videoWrapper.on('play', this.play)

src/pages/home/components/ShareToFriend.vue

@@ -10,7 +10,7 @@
         <Search
             :isShowRightText="isShowRightText"
             @click="isShowRightText = true;height = '100vh';"
-            @notice="isShowRightText = false;height = '70vh';"
+            @notice="isShowRightText = false;searchKey = '';height = '70vh';"
             rightText="取消"
             rightTextColor="gray"
             placeholder="搜索"

src/pages/home/components/VideoShare.vue

@@ -0,0 +1,288 @@
+<template>
+  <from-bottom-dialog
+      :page-id="pageId"
+      v-model="modelValue"
+      @cancel="closeShare"
+      :touch-moved="false"
+      maskMode="light"
+      height="60vh"
+      mode="light">
+    <div class="video-share">
+      <div class="shares">
+        <div class="to" @click="closeShare($emit('share2WeChat'))">
+          <img src="@/assets/img/icon/components/share/wechat.webp" alt="">
+          <span>微信</span>
+        </div>
+        <div class="to" @click="closeShare($emit('showShare2WeChatZone'))">
+          <img src="@/assets/img/icon/components/share/wechatquan.png" alt="">
+          <span>朋友圈</span>
+        </div>
+        <div class="to" @click="closeShare($emit('share2QQZone'))">
+          <img src="@/assets/img/icon/components/share/qq.webp" alt="">
+          <span>QQ</span>
+        </div>
+        <div class="to" @click="canDownload && closeShare($emit('download'))"
+             :style="{ opacity : canDownload ? '1' : '0.5' }">
+          <img src="@/assets/img/icon/components/share/download.png" alt="">
+          <span>保存本地</span>
+        </div>
+        <div class="to" @click="$nav('/home/report',{mode:this.mode})">
+          <img src="@/assets/img/icon/components/share/warning.png" alt="">
+          <span>举报</span>
+        </div>
+        <div class="to" @click="copyLink">
+          <img src="@/assets/img/icon/components/share/copy.png" alt="">
+          <span>复制口令</span>
+        </div>
+        <div class="to" @click="toggleCollect">
+          <img v-if="isCollect" src="@/assets/img/icon/components/share/collect-yellow.png" alt="">
+          <img v-else src="@/assets/img/icon/components/share/collect.png" alt="">
+          <span>收藏</span>
+        </div>
+        <div class="to" @click="$no">
+          <img src="@/assets/img/icon/components/video/comeonlook.webp" alt="">
+          <span>一起看</span>
+        </div>
+        <div class="to" @click="copyLink">
+          <img src="@/assets/img/icon/components/share/link.png" alt="">
+          <span>复制链接</span>
+        </div>
+        <div class="to" @click="$no">
+          <img src="@/assets/img/icon/components/video/dou.webp" alt="">
+          <span>帮上热门</span>
+        </div>
+        <template v-if="isShowMore">
+          <div class="to" @click="closeShare($emit('showShareDuoshan'))">
+            <img src="@/assets/img/icon/components/video/duoshan.png" alt="">
+            <span>多闪</span>
+          </div>
+          <div class="to" @click="$no">
+            <img src="@/assets/img/icon/components/video/totoutiao.webp" alt="">
+            <span>今日头条</span>
+          </div>
+        </template>
+        <template v-else>
+          <div class="to" @click="$no">
+            <img src="@/assets/img/icon/components/share/share.png" alt="">
+            <span>更多分享</span>
+          </div>
+        </template>
+        <!--        todo-->
+        <div class="to" @click="closeShare($emit('dislike'))">
+          <img src="@/assets/img/icon/components/share/dislike.png" alt="">
+          <span>不感兴趣</span>
+        </div>
+        <div class="to" @click="$no">
+          <img src="@/assets/img/icon/components/video/bizhi.webp" alt="">
+          <span>动态壁纸</span>
+        </div>
+
+        <div class="to" @click="closeShare($emit('showDouyinCode'))">
+          <img src="@/assets/img/icon/components/video/qrcode.png" alt="">
+          <span>抖音码</span>
+        </div>
+
+
+        <template v-if="false">
+          <div class="to" @click="$no">
+            <img src="@/assets/img/icon/components/video/torichang.png" alt="">
+            <span>分享日常</span>
+          </div>
+          <div class="to" @click="closeShare($emit('ShareToFriend'))">
+            <img src="@/assets/img/icon/components/video/tofriend.webp" alt="">
+            <span>私信朋友</span>
+          </div>
+
+          <div class="to" @click="closeShare($emit('share2Webo'))">
+            <img src="@/assets/img/icon/components/video/toweibo.webp" alt="">
+            <span>微博</span>
+          </div>
+          <div class="to" @click="$no">
+            <img src="@/assets/img/icon/components/video/comeonplay.png" alt="">
+            <span>合拍</span>
+          </div>
+          <div class="to" @click="closeShare($emit('play-feedback'))">
+            <img src="@/assets/img/icon/components/video/feedback.webp" alt="">
+            <span>播放反馈</span>
+          </div>
+        </template>
+      </div>
+      <div class="friends">
+        <div class="item" v-for="item in friends.all">
+          <img class="left" v-lazy="$imgPreview(item.avatar)" alt="">
+          <div class="right">
+            <span>{{ item.name }}</span>
+            <b-button size="small" :type="item.shared?'dark':'primary'"
+                      @click="item.shared = true">
+              {{ item.shared ? '已' : '' }}分享
+            </b-button>
+          </div>
+        </div>
+        <div class="more" @click="closeShare($nav('/message/share-to-friend'))">
+          <img class="left" src="../../../assets/img/icon/components/video/more-dark.png">
+          <span>更多朋友</span>
+        </div>
+      </div>
+    </div>
+  </from-bottom-dialog>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+// import DouyinCode from "./DouyinCode";
+
+export default {
+  name: "Share",
+  components: {
+    FromBottomDialog,
+    // DouyinCode
+  },
+  props: {
+    modelValue: false,
+    videoId: {
+      type: String,
+      default: null
+    },
+    pageId: {
+      type: String,
+      default: 'home-index'
+    },
+    canDownload: {
+      type: Boolean,
+      default: true
+    },
+  },
+  computed: {
+    ...mapState(['friends']),
+  },
+  data() {
+    return {
+      isCollect: false,
+      isShowMore: false,
+    }
+  },
+  methods: {
+    async copyLink() {
+      this.closeShare()
+      this.$showLoading()
+      await this.$sleep(500)
+      this.$hideLoading()
+      this.$notice('复制成功')
+    },
+    toggleCollect() {
+      this.closeShare()
+      if (this.isCollect) {
+        this.$notice('取消收藏成功')
+      } else {
+        this.$notice('收藏成功')
+      }
+      this.isCollect = !this.isCollect
+    },
+    toggleCall(item) {
+      item.select = !item.select
+    },
+    closeShare() {
+      // this.$emit("update:modelValue", false)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "@/assets/less/index";
+
+.video-share {
+  height: 60vh;
+  width: 100%;
+  border-radius: 1rem 1rem 0 0;
+  color: white;
+  box-sizing: border-box;
+
+  .friends {
+    border-radius: 1rem;
+    margin: 1rem;
+    padding: 0 @padding-page;
+    @avatar-width: 3.8rem;
+    font-size: 1.4rem;
+    background: white;
+
+    @item-width: 5.5rem;
+
+    .item {
+      height: @item-width;
+      color: black;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #f3f3f3;
+
+      .left {
+        width: @avatar-width;
+        height: @avatar-width;
+        border-radius: 50%;
+        margin-right: 1.5rem;
+      }
+
+      .right {
+        font-size: 1.4rem;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        img {
+          height: 2rem;
+        }
+      }
+    }
+
+    .more {
+      height: @item-width;
+      color: black;
+      background: white;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #f3f3f3;
+
+      .left {
+        width: 2rem;
+        height: 2rem;
+        border-radius: 50%;
+        margin-left: 1rem;
+        margin-right: 2rem;
+      }
+    }
+  }
+
+  .shares {
+    @space-width: 1.5rem;
+    @icon-width: 3.8rem;
+
+    overflow-x: scroll;
+    display: flex;
+    padding-right: @space-width * 2;
+
+    .to {
+      margin-left: @space-width;
+      margin-bottom: @space-width;
+
+      img {
+        background: white;
+        padding: 1rem;
+        width: @icon-width;
+        height: @icon-width;
+        border-radius: 1.5rem;
+      }
+
+      span {
+        margin-top: .2rem;
+        color: black;
+        font-size: 1rem;
+        display: block;
+        text-align: center;
+      }
+    }
+  }
+}
+
+</style>

src/pages/test/Test2.vue

@@ -16,77 +16,95 @@ export default {
     return {
       comment: '12',
       item: {
-        "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
+        "id": "08a90c93-807b-4a7a-aad3-68f75d65a9c8",
-        "cover": "https://p11.douyinpic.com/img/tos-cn-p-0015/48e513ae1df94a6cb0e23eabdacfdb64~c5_300x400.webp?from=4257465056_large",
+        video: 'http://douyin.ttentau.top/3.mp4',
-        "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-p-0015/80e3288d63094603beaaf2f0e1568e19_1577426215?from=4257465056_large",
+        "video_data_size": 12371092,
-        "origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/be6a2e67b69646778749e932c6d456b6_1577426215~tplv-dy-360p.webp?from=4257465056&s=&se=false&sh=&sc=&l=202108311459040102120742003404DFC4&biz_tag=feed_cover",
+        "duration": 139652,
-        video:  'http://qy9rc9xff.hn-bkt.clouddn.com/0.mp4',
+        "desc": "秋天来了，新疆的可可托海~",
-        "video_data_size": 26829508,
+        "allow_download": 1,
-        "duration": 427780,
-        "desc": "几人到深山探险，发现里面一只动物昆虫都没有，知道原因后都怕了 #看电影",
-        "allow_download": 0,
         "allow_duet": 0,
         "allow_react": 0,
         "allow_music": 1,
         "allow_douplus": 1,
         "allow_share": 1,
-        "digg_count": 381,
+        "digg_count": 167000,
-        "comment_count": 20,
+        "comment_count": 8152,
-        "download_count": 6,
+        "download_count": 0,
         "play_count": 0,
-        "share_count": 2,
+        "share_count": 30000,
         "forward_count": 0,
-        "collect_count": 3,
+        "collect_count": 2,
-        "sort": 195,
+        "sort": 74,
-        "is_top": 0,
+        city: '阿勒泰',
-        "city": "",
+        address: '可可托海景区（5A）',
-        "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
+        "musicId": "6e1325da-1af4-4d5e-8a33-3a4a69ff50a3",
-        "create_time": "1630423555",
+        "create_time": "1630392893",
-        "creator_id": "93864497380",
+        "creator_id": "54884802577",
         "status": 1,
         "topics": [
           {
-            "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
+            "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
-            "name": "看电影",
+            "name": "旅行大玩家",
-            "creator_id": "93864497380",
+            "creator_id": "54884802577",
-            "create_time": "1630423555",
+            "create_time": "1630391758",
             "status": 1
-          }
+          },
+          {
+            "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
+            "name": "旅行推荐官",
+            "creator_id": "54884802577",
+            "create_time": "1630391758",
+            "status": 1
+          },
+          {
+            "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
+            "name": "抖音旅行",
+            "creator_id": "54884802577",
+            "create_time": "1630391758",
+            "status": 1
+          },
         ],
         "music": {
-          "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
+          "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
-          "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
+          "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
-          "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
+          "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
-          "title": "@穷电影创作的原声",
+          "title": "@旅行家 ~ 七哥创作的原声 - 旅行家 ~ 七哥",
-          "creator_id": "93864497380",
+          "creator_id": "54884802577",
-          "create_time": "1630423555",
+          "create_time": "1630391758",
           "status": 1
         },
         "author": {
-          "id": "93864497380",
+          school: {
+            name: '',
+            department: '',
+            joinTime: '',
+            education: '',
+            displayType: '',
+          },
+          "id": "3",
           "unique_id_modify_time": "1630393144",
-          "unique_id": "dyg141319",
+          "unique_id": "travels520",
-          "favoriting_count": 0,
+          "favoriting_count": 54,
-          "avatar": "https://p26.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_1080x1080.jpeg?from=116350172",
+          "avatar": new URL('../img/icon/avatar/11.png', import.meta.url).href,
           "city": "",
-          "province": null,
+          "province": '',
           "country": "",
-          "location": "",
+          "birthday": "",
-          "birthday": "1990-01-01",
           "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
-          "following_count": 0,
+          "following_count": 15,
-          "follower_count": 0,
+          "follower_count": 302000,
-          "aweme_count": 0,
+          "aweme_count": 4007000,
-          "nickname": "穷电影",
+          "nickname": "旅行家 ~ 七哥",
+          certification: '',
           "phone": "",
-          "sex": "0",
+          "sex": "",
           "last_login_time": "1630423555",
           "create_time": "1630423555",
           "status": 1,
-          "desc": null,
+          "desc": "谢谢关注\n浅谈&合作v：a1231231234\n旅行&报名v: 1231231891242\n新疆 西藏 四川摄影旅拍路线规划与设计",
           "is_private": 0
         }
-      }
+      },
     }
   },
   computed: {},

src/pages/test/Test4.vue

@@ -1,20 +1,23 @@
 <template>
-  <div class="Test">
+  <div id="Test">
     <base-button type="primary" @click="t = true">test</base-button>
-    <ShareToFriend v-model="t"/>
+<!--    <ShareToFriend pageId="Test" v-model="t"/>-->
+    <VideoShare v-model="t" page-id="Test"/>
   </div>
 </template>
 <script>
 import ShareToFriend from "../home/components/ShareToFriend";
 import BaseButton from "../../components/BaseButton";
 import Search from "../../components/Search";
+import VideoShare from "../home/components/VideoShare";
 
 export default {
   name: "Test4",
   components: {
     BaseButton,
     ShareToFriend,
-    Search
+    Search,
+    VideoShare
   },
   props: {
     text: {
@@ -36,7 +39,7 @@ export default {
 <style scoped lang="less">
 @import "../../assets/less/index";
 
-.Test {
+#Test {
   position: fixed;
   left: 0;
   right: 0;