save

src/components/BaseMarquee.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="marquee" :class="name+'-marquee'" ref="marquee">
+  <div class="marquee" ref="marquee">
     <span class="text" ref="marqueeText">
       {{ text }}<span class="space"></span>
       {{ text }}<span class="space"></span>
@@ -18,17 +18,6 @@ export default {
       type: String,
       default: ''
     },
-    name: {
-      type: String,
-      default: ''
-    },
-    //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
-    isPlay: {
-      type: Boolean,
-      default: () => {
-        return true
-      }
-    },
   },
   data() {
     return {

src/components/BaseMusic.vue

@@ -1,83 +1,28 @@
 <template>
-  <div class="music-wrapper" :class="name+'-music'" ref="musicWrapper">
+  <div class="music-wrapper">
-    <template v-if="!isStop">
+    <img class="music1" :style="style" src="../assets/img/icon/home/music1.png" alt="">
-      <img class="music1" src="../assets/img/icon/home/music1.png" alt="">
+    <img class="music2" :style="style" src="../assets/img/icon/home/music2.png" alt="">
-      <img class="music2" src="../assets/img/icon/home/music2.png" alt="">
+    <div class="music-bg" :style="style" @click.stop="bus.emit('nav','/home/music')">
-    </template>
+      <img class="music" :src="props.cover">
-    <div class="music-bg" ref="musicBg">
-      <img class="music" :src="cover">
     </div>
   </div>
 </template>
-<script>
+<script setup>
-import Dom from "../utils/dom";
+import {computed, inject} from "vue";
-import {nextTick} from "vue";
+import bus from "../utils/bus";
-import BaseButton from "./BaseButton";
 
-export default {
+const props = defineProps({
-  name: "BaseMusic",
+  cover: {
-  components: {
+    type: String,
-    BaseButton
+    default: ''
   },
-  props: {
+})
-    cover: {
+const isPlaying = inject('isPlaying')
-      type: String,
+
-      default: ''
+const style = computed(() => {
-    },
+  return {webkitAnimationPlayState: isPlaying.value ? 'running' : 'paused'}
-    name: {
+})
-      type: String,
-      default: ''
-    },
-    //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
-    isPlay: {
-      type: Boolean,
-      default: () => {
-        return true
-      }
-    },
-  },
-  data() {
-    return {
-      isStop: false,
-      musicBg: null,
-    }
-  },
-  methods: {
-    // triggerPause() {
-    //   new Dom('.music-wrapper').trigger('pause')
-    // },
-    // triggerStart() {
-    //   new Dom('.music-wrapper').trigger('start')
-    // },
-    pause() {
-      this.isStop = true
-      this.musicBg.css('webkitAnimationPlayState', 'isZooming.value')
-    },
-    stop() {
-      this.isStop = true
-      this.musicBg.css('webkitAnimationPlayState', 'paused')
-    },
-    start() {
-      this.isStop = false
-      this.musicBg.css('webkitAnimationPlayState', 'running')
-    }
-  },
-  mounted() {
-    nextTick(() => {
-      //直接document.querySelectorAll，找不到dom，必须用$refs的方式
-      this.musicBg = new Dom(this.$refs.musicBg)
 
-      new Dom(this.$refs.musicWrapper).on('pause', this.pause)
-      new Dom(this.$refs.musicWrapper).on('start', this.start)
-      new Dom(this.$refs.musicWrapper).on('stop', this.stop)
-      if (this.isPlay) {
-        this.start()
-      } else {
-        this.stop()
-      }
-    })
-  }
-}
 </script>
 
 <style lang="less">

src/components/slide/BVideo.vue

@@ -10,16 +10,16 @@
            :autoplay="isPlay" loop>
       <p> 您的浏览器不支持 video 标签。</p>
     </video>
-    <img src="../../assets/img/icon/play-white.png" class="pause" v-if="paused">
+    <img src="../../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
     <div class="float" :style="{opacity: isUp?0:1}">
       <div :style="{opacity:isMove ? 0:1}" class="normal">
         <ItemToolbar v-model:item="localItem"
-                     :index="index"
                      :position="position"
+                     v-bind="$attrs"
         />
         <ItemDesc
             v-model:item="localItem"
-            :index="index"
+            :position="position"
         />
         <div v-if="isMy" class="comment-status">
           <div class="comment">
@@ -68,6 +68,9 @@ import Dom from "../../utils/dom";
 import Loading from "../Loading";
 import ItemToolbar from "./ItemToolbar";
 import ItemDesc from "./ItemDesc";
+import bus from "../../utils/bus";
+import {SlideItemPlayStatus} from "../../utils/const_var";
+import {computed} from "vue";
 
 export default {
   name: "BVideo",
@@ -76,6 +79,12 @@ export default {
     ItemToolbar,
     ItemDesc
   },
+  provide() {
+    return {
+      // isPlaying: computed(() => this.status)
+      isPlaying: computed(() => this.isPlaying)
+    }
+  },
   props: {
     item: {
       type: Object,
@@ -128,12 +137,16 @@ export default {
     },
     positionName() {
       return 'item-' + Object.values(this.position).join('-')
+    },
+    isPlaying() {
+      return this.status === SlideItemPlayStatus.Play
     }
   },
   data() {
     return {
       loading: false,
       paused: false,
+      status: this.isPlay ? SlideItemPlayStatus.Play : SlideItemPlayStatus.Pause,
       duration: 0,
       step: 0,
       currentTime: -1,
@@ -142,20 +155,16 @@ export default {
       last: {x: 0, time: 0},
       height: 0,
       width: 0,
-      isPlaying: this.isPlay,
-      isAttention: false,
       isMove: false,
       isSingleClick: false,
       test: [1, 2],
       localItem: this.item,
       progressBarRect: {},
       videoScreenHeight: 0,
-      videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`
+      videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
     }
   },
   mounted() {
-    console.log('position',this.position)
-    console.log('item',this.item)
     this.height = document.body.clientHeight
     this.width = document.body.clientWidth
     let video = this.$refs.video
@@ -208,67 +217,42 @@ export default {
     // eventTester("durationchange", '资源长度改变'); //资源长度改变
     // eventTester("volumechange", '音量改变'); //音量改变
 
-    //这里不能用this.name，因为class可能还没绑上去。可以找不到dom
+    bus.on('singleClickBroadcast', this.click)
-    let videoWrapper = new Dom(this.$refs.videoWrapper)
+  },
-    videoWrapper.on('play', this.play)
+  unmounted() {
-    videoWrapper.on('stop', this.stop)
+    bus.off('singleClickBroadcast', this.click)
-    videoWrapper.on('singleClick', () => {
-      if (this.isPlaying) {
-        this.pause()
-      } else {
-        this.play()
-        //这里playg事件，触发之后，会马上触发一次waiting事件。就很烦，会出现点完播放之后闪一下loading的情况，所以用一个变量来规避一下
-        this.isSingleClick = true
-        setTimeout(() => {
-          this.isSingleClick = false
-        }, 300)
-      }
-      this.loading = false
-    })
   },
   methods: {
+    click(val) {
+      if (this.item.id === val) {
+        if (this.status === SlideItemPlayStatus.Play) {
+          this.pause()
+        } else {
+          this.play()
+          //这里playg事件，触发之后，会马上触发一次waiting事件。就很烦，会出现点完播放之后闪一下loading的情况，所以用一个变量来规避一下
+          // this.isSingleClick = true
+          setTimeout(() => {
+            // this.isSingleClick = false
+          }, 300)
+        }
+        this.loading = false
+      }
+    },
     play() {
-      new Dom(`.${this.tag}-marquee`).trigger('start')
+      this.status = SlideItemPlayStatus.Play
-      new Dom(`.${this.tag}-music`).trigger('start')
-      // console.log('trigger-play')
-      this.isPlaying = true
-      this.paused = false
       if (this.currentTime !== -1) {
         this.$refs.video.currentTime = this.currentTime
       }
       this.$refs.video.volume = 1
       this.$refs.video.play()
     },
-    stop() {
-      new Dom(`.${this.tag}-marquee`).trigger('stop')
-      new Dom(`.${this.tag}-music`).trigger('stop')
-      // console.log('trigger-stop')
-      this.$refs.video.pause()
-      this.paused = false
-      this.isPlaying = false
-      this.$refs.video.currentTime = 0
-    },
     pause() {
-      new Dom(`.${this.tag}-marquee`).trigger('pause')
+      this.status = SlideItemPlayStatus.Pause
-      new Dom(`.${this.tag}-music`).trigger('pause')
-      // console.log('trigger-pause')
       this.$refs.video.pause()
-      this.paused = true
-      this.isPlaying = false
     },
     formatNumber(v) {
       return Utils.formatNumber(v)
     },
-    $duration(v) {
-      return Utils.$duration(v)
-    },
-    attention() {
-      let option = this.$refs['attention-option']
-      option.classList.add('attention')
-      setTimeout(() => {
-        this.isAttention = true
-      }, 1000)
-    },
     touchstart(e) {
       Utils.$stopPropagation(e)
       this.start.x = e.touches[0].pageX

src/components/slide/ItemDesc.vue

@@ -2,18 +2,19 @@
 
 import {reactive} from "vue";
 import BaseMarquee from "../BaseMarquee";
+import bus from "../../utils/bus";
 
-const {item, index, isMy, isUp, isPlay} = defineProps({
+const props = defineProps({
   item: {
     type: Object,
     default: () => {
       return {}
     }
   },
-  index: {
+  position: {
-    type: Number,
+    type: Object,
     default: () => {
-      return -1
+      return {}
     }
   },
   isMy: {
@@ -22,19 +23,6 @@ const {item, index, isMy, isUp, isPlay} = defineProps({
       return false
     }
   },
-  isUp: {
-    type: Boolean,
-    default: () => {
-      return false
-    }
-  },
-  //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
-  isPlay: {
-    type: Boolean,
-    default: () => {
-      return true
-    }
-  },
 })
 
 const state = reactive({
@@ -45,28 +33,24 @@ const state = reactive({
 </script>
 <template>
   <div class="item-desc">
-    <div class="content ml1r mb1r" v-if="!isMy">
+    <div class="content ml1r mb1r" v-if="!props.isMy">
-      <div class="location-wrapper" v-if=" item.city || item.address">
+      <div class="location-wrapper" v-if=" props.item.city || item.address">
         <div class="location">
           <img src="../../assets/img/icon/location.webp" alt="">
-          <span>{{ item.city }}</span>
+          <span>{{ props.item.city }}</span>
-          <template v-if="item.address">
+          <template v-if="props.item.address">
             <div class="gang"></div>
           </template>
-          <span>{{ item.address }}</span>
+          <span>{{ props.item.address }}</span>
         </div>
       </div>
-      <div class="name mb1r fb" @click.stop="$emit('goUserInfo')">@{{ item.author.nickname }}</div>
+      <div class="name mb1r fb" @click.stop="$emit('goUserInfo')">@{{ props.item.author.nickname }}</div>
       <div class="description mb1r">
-        {{ item.desc }}
+        {{ props.item.desc }}
       </div>
-      <div class="music" @click.stop="$nav('/music')">
+      <div class="music" @click.stop="bus.emit('nav','/home/music')">
         <img src="../../assets/img/icon/music.svg" alt="" class="music-image">
-        <BaseMarquee :key="state.name"
+        <BaseMarquee :text="props.item.music.title"/>
-                     :name="state.name"
-                     :isPlay="isPlay"
-                     :text="item.music.title"
-                     @click.stop="$emit('goMusic')"/>
       </div>
     </div>
     <div v-else class="comment-status">

src/components/slide/ItemToolbar.vue

@@ -1,23 +1,15 @@
 <script setup>
 import BaseMusic from "../BaseMusic";
 import Utils from "../../utils";
-import {reactive} from "vue";
+import {reactive,} from "vue";
-import bus from "../../utils/bus";
-import {cloneDeep} from "lodash";
 
-const {item, index, isMy, isUp, isPlay, position} = defineProps({
+const props = defineProps({
   item: {
     type: Object,
     default: () => {
       return {}
     }
   },
-  index: {
-    type: Number,
-    default: () => {
-      return -1
-    }
-  },
   position: {
     type: Object,
     default: () => {
@@ -30,38 +22,25 @@ const {item, index, isMy, isUp, isPlay, position} = defineProps({
       return false
     }
   },
-  isUp: {
-    type: Boolean,
-    default: () => {
-      return false
-    }
-  },
-  //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
-  isPlay: {
-    type: Boolean,
-    default: () => {
-      return true
-    }
-  },
-})
-const emit = defineEmits(['update:item'])
-const state = reactive({
-  isAttention: false,
 })
+const emit = defineEmits([
+  'update:item',
+  'goUserInfo',
+  'showComments',
+  'showShare',
+  'goMusic',
+])
+const state = reactive({})
 
-function loved(e, index) {
+function loved() {
-  let old = cloneDeep(item)
+  Utils.updateItem(props, 'isLoved', !props.item.isLoved, emit)
-  old.isLoved = !old.isLoved
-  emit('update:item', old)
-  // bus.emit('update:item', {position, item: old})
 }
 
-function attention() {
+function attention(e) {
-  // let option = this.$refs['attention-option']
+  e.currentTarget.classList.add('attention')
-  // option.classList.add('attention')
+  setTimeout(() => {
-  // setTimeout(() => {
+    Utils.updateItem(props, 'isAttention', true, emit)
-  //   this.isAttention = true
+  }, 1000)
-  // }, 1000)
 }
 
 </script>
@@ -69,10 +48,10 @@ function attention() {
 <template>
   <div class="toolbar mb1r">
     <div class="avatar-ctn mb4r">
-      <img class="avatar" :src="item.author.avatar" alt=""
+      <img class="avatar" :src="props.item.author.avatar" alt=""
            @click.stop="$emit('goUserInfo')">
       <transition name="fade">
-        <div v-if="!state.isAttention" @click.stop="attention" class="options" ref="attention-option">
+        <div v-if="!props.item.isAttention" @click.stop="attention" class="options">
           <img class="no" src="../../assets/img/icon/add-light.png" alt="">
           <img class="yes" src="../../assets/img/icon/ok-red.png" alt="">
         </div>
@@ -81,32 +60,34 @@ function attention() {
     </div>
     <div class="love mb2r" @click.stop="loved($event)">
       <div>
-        <img src="../../assets/img/icon/love.svg" class="love-image" v-if="!item.isLoved">
+        <img src="../../assets/img/icon/love.svg" class="love-image" v-if="!props.item.isLoved">
-        <img src="../../assets/img/icon/loved.svg" class="love-image" v-if="item.isLoved">
+        <img src="../../assets/img/icon/loved.svg" class="love-image" v-if="props.item.isLoved">
       </div>
-      <span>{{ Utils.formatNumber(item.digg_count) }}</span>
+      <span>{{ Utils.formatNumber(props.item.digg_count) }}</span>
     </div>
     <div class="message mb2r" @click.stop="$emit('showComments')">
-      <!--            <div class="message mb15p" @click.stop="showComment">-->
       <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
-      <span>{{ Utils.formatNumber(item.comment_count) }}</span>
+      <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
+    </div>
+    <div class="message mb2r" @click.stop="$emit('showComments')">
+      <img src="../../assets/img/icon/star-white.png" alt="" class="message-image">
+      <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
     </div>
     <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
       <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
-      <span>{{ Utils.formatNumber(item.share_count) }}</span>
+      <span>{{ Utils.formatNumber(props.item.share_count) }}</span>
     </div>
     <div v-else class="share mb4r" @click.stop="$emit('showShare')">
-      <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
+      <img src="../../assets/img/icon/menu-white.png" alt="" class="share-image">
     </div>
+    <!--    <BaseMusic-->
+    <!--        :cover="props.item.music.cover"-->
+    <!--        @click.stop="$nav('/home/music')"-->
+    <!--    /> -->
     <BaseMusic
-        :cover="item.music.cover"
+        :cover="props.item.music.cover"
-        :key="state.name"
-        :name="state.name"
-        :isPlay="isPlay"
-        @click.stop="$emit('goMusic')"
     />
   </div>
-
 </template>
 
 <style scoped lang="less">

src/main.js

@@ -14,7 +14,7 @@ const vConsole = new VConsole();
 
 const app = Vue.createApp(App)
 app.config.globalProperties.$api = {...api}
-
+app.config.unwrapInjectedRef = true
 const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
 app.provide('mitt', mitt())
 app.mixin(mixin)

src/pages/slideHooks/VInfinite.vue

@@ -195,6 +195,7 @@ function canNext(isNext) {
   <div class="slide">
     <div class="slide-list flex-direction-column"
          ref="wrapperEl"
+         @click="null"
          @touchstart="touchStart"
          @touchmove="touchMove"
          @touchend="touchEnd"

src/pages/slideHooks/index.vue

@@ -52,19 +52,23 @@
 
 <script setup lang="jsx">
 import H from './H'
-import V from './V'
 import VInfinite from './VInfinite.vue'
 import SlideItem from './SlideItem'
-import SlideVideo from "../../components/slide/SlideVideo";
-import SlideUser from "../../components/slide/SlideUser";
 import SlideImgs from "../../components/slide/SlideAlbum";
 import BVideo from "../../components/slide/BVideo";
 
 import resource from "../../assets/data/resource.js";
 import {onMounted, onUnmounted, reactive} from "vue";
-import enums from "../../utils/enums";
 import bus from "../../utils/bus";
-import Dom from "../../utils/dom";
+import {useNav} from "../../utils/hooks/useNav";
+
+const nav = useNav()
+
+const videos = resource.videos.slice(0,5).map(v => {
+  v.type = 'recommend-video'
+  return v
+})
+
 
 const state = reactive({
   baseIndex: 0,
@@ -79,522 +83,7 @@ const state = reactive({
     //   type: 'imgs',
     //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
     // },
-    {
+    ...videos
-      type: 'recommend-video',
-      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
-      video: 'http://douyin.ttentau.top/0.mp4',
-      "video_data_size": 26829508,
-      "duration": 427780,
-      "desc": "我不管我们宿舍第一好看",
-      "allow_download": 0,
-      "allow_duet": 0,
-      "allow_react": 0,
-      "allow_music": 1,
-      "allow_douplus": 1,
-      "allow_share": 1,
-      "digg_count": 10480000,
-      "comment_count": 79000,
-      "download_count": 6,
-      "play_count": 0,
-      "share_count": 119000,
-      "forward_count": 0,
-      "collect_count": 3,
-      "sort": 195,
-      "is_top": 0,
-      "city": "北京",
-      address: '中央戏剧学院',
-      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
-      "create_time": "1630423555",
-      "creator_id": "93864497380",
-      "status": 1,
-      "topics": [
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "敬礼变装",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        },
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "宿舍",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        }
-      ],
-      "music": {
-        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
-        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
-        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
-        "title": "@穷电影创作的原声-小高快起来跳舞",
-        "creator_id": "93864497380",
-        "create_time": "1630423555",
-        "status": 1
-      },
-      "author": {
-        "id": "1",
-        "unique_id_modify_time": "1630393144",
-        "unique_id": "10040050",
-        "favoriting_count": 143,
-        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
-        school: {
-          name: '中央戏剧学院',
-          department: null,
-          joinTime: null,
-          education: null,
-          displayType: enums.DISPLAY_TYPE.ALL,
-        },
-        "city": "",
-        "province": '北京',
-        "country": "",
-        "location": "",
-        "birthday": "2002-01-01",
-        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
-        "following_count": 66,
-        "follower_count": 235000,
-        "aweme_count": 1796000,
-        "nickname": "我是小睿耶",
-        certification: '',
-        "phone": "",
-        "sex": "",
-        "last_login_time": "1630423555",
-        "create_time": "1630423555",
-        "status": 1,
-        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
-        "is_private": 0
-      }
-    },
-    {
-      type: 'recommend-video',
-      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
-      video: 'http://douyin.ttentau.top/0.mp4',
-      "video_data_size": 26829508,
-      "duration": 427780,
-      "desc": "我不管我们宿舍第一好看",
-      "allow_download": 0,
-      "allow_duet": 0,
-      "allow_react": 0,
-      "allow_music": 1,
-      "allow_douplus": 1,
-      "allow_share": 1,
-      "digg_count": 10480000,
-      "comment_count": 79000,
-      "download_count": 6,
-      "play_count": 0,
-      "share_count": 119000,
-      "forward_count": 0,
-      "collect_count": 3,
-      "sort": 195,
-      "is_top": 0,
-      "city": "北京",
-      address: '中央戏剧学院',
-      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
-      "create_time": "1630423555",
-      "creator_id": "93864497380",
-      "status": 1,
-      "topics": [
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "敬礼变装",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        },
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "宿舍",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        }
-      ],
-      "music": {
-        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
-        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
-        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
-        "title": "@穷电影创作的原声-小高快起来跳舞",
-        "creator_id": "93864497380",
-        "create_time": "1630423555",
-        "status": 1
-      },
-      "author": {
-        "id": "1",
-        "unique_id_modify_time": "1630393144",
-        "unique_id": "10040050",
-        "favoriting_count": 143,
-        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
-        school: {
-          name: '中央戏剧学院',
-          department: null,
-          joinTime: null,
-          education: null,
-          displayType: enums.DISPLAY_TYPE.ALL,
-        },
-        "city": "",
-        "province": '北京',
-        "country": "",
-        "location": "",
-        "birthday": "2002-01-01",
-        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
-        "following_count": 66,
-        "follower_count": 235000,
-        "aweme_count": 1796000,
-        "nickname": "我是小睿耶",
-        certification: '',
-        "phone": "",
-        "sex": "",
-        "last_login_time": "1630423555",
-        "create_time": "1630423555",
-        "status": 1,
-        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
-        "is_private": 0
-      }
-    },
-    {
-      type: 'recommend-video',
-      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
-      video: 'http://douyin.ttentau.top/0.mp4',
-      "video_data_size": 26829508,
-      "duration": 427780,
-      "desc": "我不管我们宿舍第一好看",
-      "allow_download": 0,
-      "allow_duet": 0,
-      "allow_react": 0,
-      "allow_music": 1,
-      "allow_douplus": 1,
-      "allow_share": 1,
-      "digg_count": 10480000,
-      "comment_count": 79000,
-      "download_count": 6,
-      "play_count": 0,
-      "share_count": 119000,
-      "forward_count": 0,
-      "collect_count": 3,
-      "sort": 195,
-      "is_top": 0,
-      "city": "北京",
-      address: '中央戏剧学院',
-      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
-      "create_time": "1630423555",
-      "creator_id": "93864497380",
-      "status": 1,
-      "topics": [
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "敬礼变装",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        },
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "宿舍",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        }
-      ],
-      "music": {
-        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
-        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
-        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
-        "title": "@穷电影创作的原声-小高快起来跳舞",
-        "creator_id": "93864497380",
-        "create_time": "1630423555",
-        "status": 1
-      },
-      "author": {
-        "id": "1",
-        "unique_id_modify_time": "1630393144",
-        "unique_id": "10040050",
-        "favoriting_count": 143,
-        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
-        school: {
-          name: '中央戏剧学院',
-          department: null,
-          joinTime: null,
-          education: null,
-          displayType: enums.DISPLAY_TYPE.ALL,
-        },
-        "city": "",
-        "province": '北京',
-        "country": "",
-        "location": "",
-        "birthday": "2002-01-01",
-        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
-        "following_count": 66,
-        "follower_count": 235000,
-        "aweme_count": 1796000,
-        "nickname": "我是小睿耶",
-        certification: '',
-        "phone": "",
-        "sex": "",
-        "last_login_time": "1630423555",
-        "create_time": "1630423555",
-        "status": 1,
-        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
-        "is_private": 0
-      }
-    },
-    {
-      type: 'recommend-video',
-      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
-      video: 'http://douyin.ttentau.top/0.mp4',
-      "video_data_size": 26829508,
-      "duration": 427780,
-      "desc": "我不管我们宿舍第一好看",
-      "allow_download": 0,
-      "allow_duet": 0,
-      "allow_react": 0,
-      "allow_music": 1,
-      "allow_douplus": 1,
-      "allow_share": 1,
-      "digg_count": 10480000,
-      "comment_count": 79000,
-      "download_count": 6,
-      "play_count": 0,
-      "share_count": 119000,
-      "forward_count": 0,
-      "collect_count": 3,
-      "sort": 195,
-      "is_top": 0,
-      "city": "北京",
-      address: '中央戏剧学院',
-      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
-      "create_time": "1630423555",
-      "creator_id": "93864497380",
-      "status": 1,
-      "topics": [
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "敬礼变装",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        },
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "宿舍",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        }
-      ],
-      "music": {
-        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
-        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
-        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
-        "title": "@穷电影创作的原声-小高快起来跳舞",
-        "creator_id": "93864497380",
-        "create_time": "1630423555",
-        "status": 1
-      },
-      "author": {
-        "id": "1",
-        "unique_id_modify_time": "1630393144",
-        "unique_id": "10040050",
-        "favoriting_count": 143,
-        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
-        school: {
-          name: '中央戏剧学院',
-          department: null,
-          joinTime: null,
-          education: null,
-          displayType: enums.DISPLAY_TYPE.ALL,
-        },
-        "city": "",
-        "province": '北京',
-        "country": "",
-        "location": "",
-        "birthday": "2002-01-01",
-        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
-        "following_count": 66,
-        "follower_count": 235000,
-        "aweme_count": 1796000,
-        "nickname": "我是小睿耶",
-        certification: '',
-        "phone": "",
-        "sex": "",
-        "last_login_time": "1630423555",
-        "create_time": "1630423555",
-        "status": 1,
-        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
-        "is_private": 0
-      }
-    },
-    {
-      type: 'recommend-video',
-      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
-      video: 'http://douyin.ttentau.top/0.mp4',
-      "video_data_size": 26829508,
-      "duration": 427780,
-      "desc": "我不管我们宿舍第一好看",
-      "allow_download": 0,
-      "allow_duet": 0,
-      "allow_react": 0,
-      "allow_music": 1,
-      "allow_douplus": 1,
-      "allow_share": 1,
-      "digg_count": 10480000,
-      "comment_count": 79000,
-      "download_count": 6,
-      "play_count": 0,
-      "share_count": 119000,
-      "forward_count": 0,
-      "collect_count": 3,
-      "sort": 195,
-      "is_top": 0,
-      "city": "北京",
-      address: '中央戏剧学院',
-      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
-      "create_time": "1630423555",
-      "creator_id": "93864497380",
-      "status": 1,
-      "topics": [
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "敬礼变装",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        },
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "宿舍",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        }
-      ],
-      "music": {
-        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
-        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
-        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
-        "title": "@穷电影创作的原声-小高快起来跳舞",
-        "creator_id": "93864497380",
-        "create_time": "1630423555",
-        "status": 1
-      },
-      "author": {
-        "id": "1",
-        "unique_id_modify_time": "1630393144",
-        "unique_id": "10040050",
-        "favoriting_count": 143,
-        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
-        school: {
-          name: '中央戏剧学院',
-          department: null,
-          joinTime: null,
-          education: null,
-          displayType: enums.DISPLAY_TYPE.ALL,
-        },
-        "city": "",
-        "province": '北京',
-        "country": "",
-        "location": "",
-        "birthday": "2002-01-01",
-        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
-        "following_count": 66,
-        "follower_count": 235000,
-        "aweme_count": 1796000,
-        "nickname": "我是小睿耶",
-        certification: '',
-        "phone": "",
-        "sex": "",
-        "last_login_time": "1630423555",
-        "create_time": "1630423555",
-        "status": 1,
-        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
-        "is_private": 0
-      }
-    },
-    {
-      type: 'recommend-video',
-      "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
-      video: 'http://douyin.ttentau.top/0.mp4',
-      "video_data_size": 26829508,
-      "duration": 427780,
-      "desc": "我不管我们宿舍第一好看",
-      "allow_download": 0,
-      "allow_duet": 0,
-      "allow_react": 0,
-      "allow_music": 1,
-      "allow_douplus": 1,
-      "allow_share": 1,
-      "digg_count": 10480000,
-      "comment_count": 79000,
-      "download_count": 6,
-      "play_count": 0,
-      "share_count": 119000,
-      "forward_count": 0,
-      "collect_count": 3,
-      "sort": 195,
-      "is_top": 0,
-      "city": "北京",
-      address: '中央戏剧学院',
-      "musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
-      "create_time": "1630423555",
-      "creator_id": "93864497380",
-      "status": 1,
-      "topics": [
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "敬礼变装",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        },
-        {
-          "id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
-          "name": "宿舍",
-          "creator_id": "93864497380",
-          "create_time": "1630423555",
-          "status": 1
-        }
-      ],
-      "music": {
-        "id": "cde50af2-628c-4d28-b9c6-67237a62518e",
-        "cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
-        "mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
-        "title": "@穷电影创作的原声-小高快起来跳舞",
-        "creator_id": "93864497380",
-        "create_time": "1630423555",
-        "status": 1
-      },
-      "author": {
-        "id": "1",
-        "unique_id_modify_time": "1630393144",
-        "unique_id": "10040050",
-        "favoriting_count": 143,
-        "avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
-        school: {
-          name: '中央戏剧学院',
-          department: null,
-          joinTime: null,
-          education: null,
-          displayType: enums.DISPLAY_TYPE.ALL,
-        },
-        "city": "",
-        "province": '北京',
-        "country": "",
-        "location": "",
-        "birthday": "2002-01-01",
-        "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
-        "following_count": 66,
-        "follower_count": 235000,
-        "aweme_count": 1796000,
-        "nickname": "我是小睿耶",
-        certification: '',
-        "phone": "",
-        "sex": "",
-        "last_login_time": "1630423555",
-        "create_time": "1630423555",
-        "status": 1,
-        "desc": `一个普普通通学表演的\n看到的人都能开开心心`,
-        "is_private": 0
-      }
-    },
   ],
 
   isCommenting: false,
@@ -617,15 +106,21 @@ const state = reactive({
 
 onMounted(() => {
   bus.on('singleClick', () => {
-    new Dom(`.v-${state.baseIndex}-${state.navIndex}-${state.itemIndex}-item`).trigger('singleClick')
+    let id = ''
+    if (state.navIndex === 5) {
+      id = state.recommendVideos[state.itemIndex].id
+    }
+    bus.emit('singleClickBroadcast', id)
   })
   bus.on('update:item', val => {
-    console.log('val', val)
     const {baseIndex, navIndex, itemIndex} = val.position
     if (navIndex === 5) {
-      // state.recommendVideos[itemIndex] = val.item
+      state.recommendVideos[itemIndex] = val.item
     }
   })
+  bus.on('nav', path => {
+    nav(path)
+  })
 })
 onUnmounted(() => {
   bus.offAll()
@@ -646,7 +141,7 @@ function render(item, itemIndex, play, position) {
         position={{...position, itemIndex}}
         onShowComments={e => state.isCommenting = true}
         onShowShare={e => state.isSharing = true}
-        onGoUserInfo={e => state.baseActiveIndex = 1}
+        onGoUserInfo={e => state.baseIndex = 1}
     />
   }
   return node
@@ -705,6 +200,7 @@ function render(item, itemIndex, play, position) {
 .h {
   width: 90vw;
   height: 80vh;
+  //height: calc(100vh - @footer-height);
   overflow: hidden;
 
   .red {

src/utils/bus.js

@@ -7,12 +7,24 @@ export default {
     } else {
       cbs = [cb]
     }
+    if (cbs.length > 10) {
+      console.error('eventMap', this.eventMap)
+    }
     this.eventMap.set(eventType, cbs)
   },
-  off(eventType) {
+  off(eventType, fn) {
     let cbs = this.eventMap.has(eventType);
     if (cbs) {
-      this.eventMap.delete(eventType);
+      if (fn) {
+        let cbs = this.eventMap.get(eventType)
+        let rIndex = cbs.findIndex(v => v === fn)
+        if (rIndex > -1) {
+          cbs.splice(rIndex, 1)
+        }
+        this.eventMap.set(eventType, cbs)
+      } else {
+        this.eventMap.delete(eventType);
+      }
     }
   },
   offAll() {

src/utils/const_var.js

@@ -35,3 +35,10 @@ export const SlideAlbumPlayStatus = {
   HORIZONTAL: 0,
   VERTICAL: 1,
 }
+
+/*播放状态*/
+export const SlideItemPlayStatus = {
+  Play: 'Play',
+  Stop: 'Stop',
+  Pause: 'Pause',
+}

src/utils/hooks/useNav.js

@@ -0,0 +1,9 @@
+import {useRouter} from "vue-router";
+
+export function useNav() {
+  const router = useRouter()
+  return (path, query = {}) => {
+    router.push({path, query})
+  }
+}
+

src/utils/index.jsx

@@ -7,6 +7,7 @@ import Config from '../config'
 import NoticeDialog from "../components/dialog/NoticeDialog";
 import dayjs from 'dayjs'
 import bus from "./bus";
+import {cloneDeep} from "lodash";
 
 export default {
   require2(url) {
@@ -372,4 +373,10 @@ export default {
   getDistance(start, stop) {
     return Math.hypot(stop.x - start.x, stop.y - start.y);
   },
+  updateItem(props, key, val, emit) {
+    let old = cloneDeep(props.item)
+    old[key] = val
+    emit('update:item', old)
+    bus.emit('update:item', {position: props.position, item: old})
+  }
 }