完善直播页面

src/components/slide/BVideo.vue

@@ -299,33 +299,34 @@ export default {
     },
     click({ uniqueId, index, type }) {
       if (this.position.uniqueId === uniqueId && this.position.index === index) {
-        if (this.isLive) {
-          if (type === EVENT_KEY.ITEM_TOGGLE) {
-            bus.emit(EVENT_KEY.NAV, {
-              path: '/home/live',
-              query: { id: this.item.id }
-            })
-          }
-        } else {
-          if (type === EVENT_KEY.ITEM_TOGGLE) {
+        if (type === EVENT_KEY.ITEM_TOGGLE) {
+          if (this.isLive) {
+            if (type === EVENT_KEY.ITEM_TOGGLE) {
+              this.pause()
+              bus.emit(EVENT_KEY.NAV, {
+                path: '/home/live',
+                query: { id: this.item.id }
+              })
+            }
+          }else {
             if (this.status === SlideItemPlayStatus.Play) {
               this.pause()
             } else {
               this.play()
             }
           }
-          if (type === EVENT_KEY.ITEM_STOP) {
-            this.$refs.video.currentTime = 0
-            this.ignoreWaiting = true
-            this.pause()
-            setTimeout(() => (this.ignoreWaiting = false), 300)
-          }
-          if (type === EVENT_KEY.ITEM_PLAY) {
-            this.$refs.video.currentTime = 0
-            this.ignoreWaiting = true
-            this.play()
-            setTimeout(() => (this.ignoreWaiting = false), 300)
-          }
+        }
+        if (type === EVENT_KEY.ITEM_STOP) {
+          this.$refs.video.currentTime = 0
+          this.ignoreWaiting = true
+          this.pause()
+          setTimeout(() => (this.ignoreWaiting = false), 300)
+        }
+        if (type === EVENT_KEY.ITEM_PLAY) {
+          this.$refs.video.currentTime = 0
+          this.ignoreWaiting = true
+          this.play()
+          setTimeout(() => (this.ignoreWaiting = false), 300)
         }
       }
     },

src/pages/home/LivePage.vue

@@ -2,6 +2,7 @@
   <div class="LivePage" ref="page">
     <div class="live-wrapper">
       <video
+        ref="videoEl"
         src="https://www.douyin.com/aweme/v1/play/?video_id=v0d00fg10000cj1lq4jc77u0ng6s1gt0&amp;line=0&amp;file_id=bed51c00899b458cbc5d8280147c22a1&amp;sign=7749aec7bd62a3760065f60e40fc1867&amp;is_play_url=1&amp;source=PackSourceEnum_PUBLISH"
         poster="/images/jwWCPZVTIA4IKM-8WipLF.png"
         preload=""
@@ -200,8 +201,7 @@ export default {
   computed: {
     ...mapState(useBaseStore, ['friends', 'userinfo'])
   },
-  created() {},
-  mounted() {
+  activated() {
     this.page = this.$refs.page
     this.timer1 = setInterval(async () => {
       this.sendGift()
@@ -215,8 +215,9 @@ export default {
     this.timer3 = setInterval(async () => {
       this.sendComment()
     }, 700)
+    this.$refs.videoEl.play()
   },
-  unmounted() {
+  deactivated() {
     clearInterval(this.timer1)
     clearInterval(this.timer2)
     clearInterval(this.timer3)

src/pages/home/slide/Slide0.vue

@@ -47,6 +47,7 @@
     </div>
     <SlideList
       :active="props.active"
+      uniqueId="uniqueId3"
       :style="{
         background: 'black',
         marginTop: state.subTypeVisible ? state.subTypeHeight : 0

src/pages/home/slide/Slide2.vue

@@ -2,7 +2,7 @@
   <SlideItem class="slide-item-class">
     <div class="sub-type" :class="state.subTypeIsTop ? 'top' : ''" ref="subTypeRef">
       <div class="card" @touchmove.capture="stop">
-        <div class="nav-item" :key="j" v-for="(i, j) in store.users">
+        <div class="nav-item" @click="goLive(i)" :key="j" v-for="(i, j) in store.users">
           <img :src="_checkImgUrl(i.avatar_168x168.url_list[0])" alt="" />
           <span>{{ i.nickname }}</span>
         </div>
@@ -18,6 +18,7 @@
     <SlideList
       :cbs="{ isLive: true }"
       :active="props.active"
+      uniqueId="uniqueId2"
       :style="{
         background: 'black',
         marginTop: state.subTypeVisible ? state.subTypeHeight : 0
@@ -77,6 +78,13 @@ function pageClick(e) {
   }
 }
 
+function goLive(item) {
+  bus.emit(EVENT_KEY.NAV, {
+    path: '/home/live',
+    query: { id: item.id }
+  })
+}
+
 onMounted(() => {
   // getData()
 })

src/pages/home/slide/SlideList.vue

@@ -1,9 +1,9 @@
 <template>
   <SlideVerticalInfinite
     ref="listRef"
-    v-love="state.uniqueId"
-    :id="state.uniqueId"
-    :uniqueId="state.uniqueId"
+    v-love="props.uniqueId"
+    :id="props.uniqueId"
+    :uniqueId="props.uniqueId"
     name="main"
     :active="props.active"
     :loading="baseStore.loading"
@@ -46,6 +46,12 @@ const props = defineProps({
     default() {
       return []
     }
+  },
+  uniqueId: {
+    type: String,
+    default() {
+      return 'uniqueId1'
+    }
   }
 })
 
@@ -62,7 +68,6 @@ const listRef = ref(null)
 const state = reactive({
   index: props.index,
   list: props.list,
-  uniqueId: 'uniqueId1',
   totalSize: 0,
   pageSize: 10,
   pageNo: 0
@@ -106,7 +111,7 @@ async function getData(refresh = false) {
 // }
 
 function click(uniqueId) {
-  if (uniqueId !== state.uniqueId) return
+  if (uniqueId !== props.uniqueId) return
   bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
     uniqueId,
     index: state.index,
@@ -115,7 +120,7 @@ function click(uniqueId) {
 }
 
 function updateItem({ position, item }) {
-  if (position.uniqueId === state.uniqueId) {
+  if (position.uniqueId === props.uniqueId) {
     state.list[position.index] = item
   }
 }
@@ -128,4 +133,4 @@ onUnmounted(() => {
   bus.off(EVENT_KEY.SINGLE_CLICK, click)
   bus.on(EVENT_KEY.UPDATE_ITEM, updateItem)
 })
-</script>
+</script>