优化

src/components/slide/BVideo.vue

@@ -163,7 +163,7 @@ export default {
     }
   },
   mounted() {
-    console.log('video', this.localItem.id)
+    // console.log('video', this.localItem.id)
     // console.log(this.commentVisible)
     this.height = document.body.clientHeight
     this.width = document.body.clientWidth

src/components/slide/SlideVerticalInfinite.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   index: {
     type: Number,
     default: () => {
-      return 0
+      return -1
     }
   },
   render: {
@@ -48,7 +48,7 @@ const props = defineProps({
     default: () => false
   },
 })
-const emit = defineEmits(['update:index', 'loadMore'])
+const emit = defineEmits(['update:index', 'loadMore', 'refresh'])
 
 const appInsMap = new Map()
 const itemClassName = 'slide-item'
@@ -116,13 +116,16 @@ watch(
 watch(
     () => props.active,
     (newVal, oldVal) => {
-      console.log('newVal', newVal, 'oldVal', oldVal)
+      // console.log('newVal', newVal, 'oldVal', oldVal)
+      if (newVal && !props.list.length) {
+        return emit('refresh')
+      }
       bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
         uniqueId: props.uniqueId,
         index: state.localIndex,
         type: newVal === false ? EVENT_KEY.ITEM_STOP : EVENT_KEY.ITEM_PLAY
       })
-    })
+    }, {immediate: true})
 
 onMounted(() => {
   slideInit(wrapperEl.value, state, SlideType.VERTICAL)

src/pages/home/components/IndicatorHome.vue

@@ -17,9 +17,10 @@
           </div>
           <div class="tab" :class="{active:index === 1}" @click.stop="change(1)">
             <span>社区</span>
-            <img src="../../../assets/img/icon/live.webp" class="tab2-img">
           </div>
-          <div class="tab" :class="{active:index === 2}" @click.stop="change(2)"><span>关注</span>
+          <div class="tab" :class="{active:index === 2}" @click.stop="change(2)">
+            <span>关注</span>
+            <img src="../../../assets/img/icon/live.webp" class="tab2-img">
           </div>
           <div class="tab" :class="{active:index === 3}" @click.stop="change(3)"><span>商城</span>
           </div>

src/pages/home/index.vue

@@ -3,7 +3,6 @@
     <SlideHorizontal v-model:index="state.baseIndex">
       <SlideItem>
         <IndicatorHome
-            :isLight="state.subTypeVisible"
             v-if="!state.fullScreen"
             :loading="loading"
             name="main"
@@ -15,34 +14,15 @@
                            id="home-index"
                            :change-active-index-use-anim="false"
                            v-model:index="state.navIndex">
-            <Slide1 :cbs="p" :active="state.navIndex === 0 && state.baseIndex === 0"/>
+            <Slide0 :cbs="p" :active="state.navIndex === 0 && state.baseIndex === 0"/>
             <SlideItem>
               <Community/>
             </SlideItem>
-            <SlideItem class=" gray">
+            <Slide2 :active="state.navIndex === 2 && state.baseIndex === 0"/>
-              <div class="big">关注</div>
-            </SlideItem>
             <SlideItem>
               <Shop/>
             </SlideItem>
-            <SlideItem>
+            <Slide4 :active="state.navIndex === 4 && state.baseIndex === 0"/>
-              <Loading style="position: absolute" v-if="state.slide4.loading && state.slide4.list.length === 0"/>
-              <SlideVerticalInfinite
-                  ref="recommendListRef"
-                  :style="{background: 'black'}"
-                  name="main"
-                  v-model:index="state.slide4.index"
-                  :render="render"
-                  :list="state.slide4.list"
-                  :position="{
-                  baseIndex:0,
-                  navIndex:4,
-                }"
-                  @loadMore="loadSlide4More"
-                  @refresh="() => getSlide4Data(true)"
-              >
-              </SlideVerticalInfinite>
-            </SlideItem>
           </SlideHorizontal>
         </div>
         <Footer v-bind:init-tab="1"/>
@@ -116,19 +96,13 @@
 
 <script setup lang="jsx">
 import SlideHorizontal from '../../components/slide/SlideHorizontal.vue'
-import SlideVerticalInfinite from '../../components/slide/SlideVerticalInfinite.vue'
 import SlideItem from '@/components/slide/SlideItem.vue'
-import SlideAlbum from "../../components/slide/SlideAlbum.vue";
-import SlideUser from "../../components/slide/SlideUser.vue";
-import BVideo from "../../components/slide/BVideo.vue";
 import Comment from "../../components/Comment.vue";
 import Share from "../../components/Share.vue";
 import IndicatorHome from "./components/IndicatorHome.vue";
-import {computed, onMounted, onUnmounted, reactive, ref, watch} from "vue";
+import {computed, onMounted, onUnmounted, reactive} from "vue";
 import bus, {EVENT_KEY} from "../../utils/bus";
 import {useNav} from "@/utils/hooks/useNav";
-import Utils from "@/utils";
-import api from "@/api";
 import {useStore} from "vuex";
 import PlayFeedback from "@/pages/home/components/PlayFeedback.vue";
 import ShareTo from "@/pages/home/components/ShareTo.vue";
@@ -142,66 +116,21 @@ import ShareToFriend from "@/pages/home/components/ShareToFriend.vue";
 import UserPanel from "@/components/UserPanel.vue";
 import Community from "@/pages/home/components/Community.vue";
 import Shop from "@/pages/home/components/Shop.vue";
-import Loading from "@/components/Loading.vue";
+import Slide0 from "@/pages/home/slide/Slide0.vue";
-import Slide1 from "@/pages/home/slide/Slide1.vue";
+import Slide2 from "@/pages/home/slide/Slide2.vue";
+import Slide4 from "@/pages/home/slide/Slide4.vue";
 
 const nav = useNav()
-
-function stop(e) {
-  e.stopPropagation()
-}
-
-const p = {
-  onGoUserInfo() {
-    console.log('parent-goUserInfo')
-  }
-}
-
 const store = useStore()
 const loading = computed(() => store.state.loading)
 const friends = computed(() => store.state.friends)
 const bodyHeight = computed(() => store.state.bodyHeight)
 const bodyWidth = computed(() => store.state.bodyWidth)
 
-const subTypeRef = ref(null)
-const recommendListRef = ref(null)
 const state = reactive({
   baseIndex: 0,
-  navIndex: 0,
+  navIndex: 4,
   test: '',
-  slide1: {
-    loading: false,
-    index: 0,
-    list: [],
-    totalSize: 0,
-    pageSize: 10,
-    pageNo: 0,
-  },
-  slide2: {
-    loading: false,
-    index: 0,
-    list: [],
-    totalSize: 0,
-    pageSize: 10,
-    pageNo: 0,
-  },
-  slide3: {
-    loading: false,
-    index: 0,
-    list: [],
-    totalSize: 0,
-    pageSize: 10,
-    pageNo: 0,
-  },
-  slide4: {
-    loading: false,
-    index: 0,
-    list: [],
-    totalSize: 0,
-    pageSize: 10,
-    pageNo: 0,
-  },
-  slideOneList: [],
   recommendList: [
     // {
     //   type: 'img',
@@ -232,41 +161,7 @@ const state = reactive({
 
   commentVisible: false,
   fullScreen: false,
-  subType: -1,
-  subTypeVisible: false,
-  subTypeHeight: '0',
-  //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
-  subTypeIsTop: false,
 })
-//
-// const loading = computed(() => {
-//   return state[`slide${state.navIndex}`].loading
-// })
-
-
-async function getSlide4Data(refresh = false) {
-  if (state.slide4.loading) return
-  state.slide4.loading = true
-  let res = await api.videos.recommended({pageNo: refresh ? 0 : state.slide4.pageNo, pageSize: state.slide4.pageSize})
-  console.log('getSlide4Data-', 'refresh', refresh, res)
-  state.slide4.loading = false
-  if (res.code === 200) {
-    state.slide4.totalSize = res.data.total
-    if (refresh) {
-      state.slide4.list = []
-    }
-    state.slide4.list = state.slide4.list.concat(res.data.list)
-  } else {
-    state.slide4.pageNo--
-  }
-}
-
-function loadSlide4More() {
-  if (!state.loading) {
-    state.pageNo++
-    getSlide4Data()
-  }
-}
 
 function delayShowDialog(cb) {
   setTimeout(() => {
@@ -274,25 +169,7 @@ function delayShowDialog(cb) {
   }, 400)
 }
 
-function dislike() {
-  recommendListRef.value.dislike(state.recommendList[1])
-  state.recommendList[state.itemIndex] = state.recommendList[1]
-  Utils.$notice('操作成功，将减少此类视频的推荐')
-}
-
-function end() {
-  // this.$notice('暂时没有更多了')
-}
-
 onMounted(() => {
-
-  bus.on('update:item', val => {
-    const {baseIndex, navIndex, itemIndex} = val.position
-    if (navIndex === 5) {
-      state.recommendList[itemIndex] = val.item
-    }
-  })
-
   bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => state.fullScreen = true)
   bus.on(EVENT_KEY.EXIT_FULLSCREEN, (e) => state.fullScreen = false)
   bus.on(EVENT_KEY.OPEN_COMMENTS, (e) => {
@@ -319,32 +196,10 @@ function closeComments() {
   bus.emit(EVENT_KEY.CLOSE_COMMENTS)
 }
 
-function render(item, itemIndex, play, position) {
+function dislike() {
-  // console.log('item', item)
+  // listRef.value.dislike(state.list[1])
-  let node
+  // state.list[state.index] = state.list[1]
-  if (item.type === 'img') {
+  // Utils.$notice('操作成功，将减少此类视频的推荐')
-    node = <img src={item.src} style="height:100%;"/>
-  }
-  if (item.type === 'imgs') {
-    node = <SlideAlbum/>
-  }
-  if (item.type === 'user') {
-    node = <SlideUser/>
-  }
-  if (item.type === 'send-video') {
-    node = <video src={item.src} style="height:100%;"/>
-  }
-  if (item.type === 'recommend-video') {
-    node = <BVideo
-        isPlay={play}
-        item={item}
-        position={{...position, itemIndex}}
-        onGoMusic={e => nav('/home/music')}
-        onShowShare={e => state.isSharing = true}
-        onGoUserInfo={e => state.baseIndex = 1}
-    />
-  }
-  return node
 }
 
 </script>
@@ -358,11 +213,6 @@ function render(item, itemIndex, play, position) {
   height: 100%;
   overflow: hidden;
 
-  .big {
-    font-weight: bold;
-    font-size: 100rem;
-  }
-
   .slide-content {
     width: 100%;
     height: 100%;

src/pages/home/slide/Slide0.vue

@@ -0,0 +1,204 @@
+<template>
+  <SlideItem class="slide-item-class">
+    <div class="sub-type"
+         :class="state.subTypeIsTop?'top':''"
+         ref="subTypeRef">
+      <div class="local">
+        <div class="card" @touchmove.capture="stop">
+          <div class="nav-item">
+            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
+            <span>美食</span>
+          </div>
+          <div class="nav-item">
+            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
+            <span>休闲娱乐</span>
+          </div>
+          <div class="nav-item">
+            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
+            <span>游玩</span>
+          </div>
+          <div class="nav-item">
+            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
+            <span>丽人/美发</span>
+          </div>
+          <div class="nav-item">
+            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
+            <span>住宿</span>
+          </div>
+          <div class="nav-item">
+            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
+            <span>游玩</span>
+          </div>
+          <div class="nav-item">
+            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
+            <span>丽人/美发</span>
+          </div>
+          <div class="nav-item">
+            <img src="@/assets/img/icon/msg-icon9.webp" alt="">
+            <span>住宿</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sub-type-notice"
+         v-if="state.subType===-1 && !state.subTypeVisible"
+         @click="showSubType">附近吃喝玩乐
+    </div>
+    <SlideList
+        :active="props.active"
+        :style="{background: 'black',marginTop:state.subTypeVisible?state.subTypeHeight:0}"
+        :api="api.videos.recommended"
+        @touchstart="pageClick"
+    />
+  </SlideItem>
+</template>
+
+<script setup lang="jsx">
+import SlideItem from '@/components/slide/SlideItem.vue'
+import {onMounted, onUnmounted, reactive, ref, watch} from "vue";
+import bus, {EVENT_KEY} from "@/utils/bus";
+import Utils from "@/utils";
+import api from "@/api";
+import Loading from "@/components/Loading.vue";
+import {useSlideListItemRender} from "@/utils/hooks/useSlideListItemRender";
+import SlideList from './SlideList.vue';
+
+const props = defineProps({
+  cbs: {
+    type: Object,
+    default() {
+      return {}
+    }
+  },
+  active: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits([
+  'update:item',
+  'goUserInfo',
+  'showComments',
+  'showShare',
+  'goMusic',
+])
+
+function stop(e) {
+  e.stopPropagation()
+}
+
+const p = {
+  onShowComments() {
+    console.log('onShowComments')
+  }
+}
+
+const subTypeRef = ref(null)
+const state = reactive({
+  index: 0,
+  subType: -1,
+  subTypeVisible: false,
+  subTypeHeight: '0',
+  //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
+  subTypeIsTop: false,
+})
+
+
+function showSubType(e) {
+  Utils.$stopPropagation(e)
+  console.log('subTypeRef',)
+  state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
+  state.subTypeVisible = true
+  setTimeout(() => state.subTypeIsTop = true, 300)
+  bus.emit(EVENT_KEY.OPEN_SUB_TYPE,)
+}
+
+function pageClick(e) {
+  // console.log('pageClick')
+  if (state.subTypeVisible) {
+    state.subTypeIsTop = state.subTypeVisible = false
+    bus.emit(EVENT_KEY.CLOSE_SUB_TYPE,)
+    Utils.$stopPropagation(e)
+  }
+}
+
+onMounted(() => {
+  // getData()
+})
+onUnmounted(() => {
+})
+
+</script>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+.slide-item-class {
+  position: relative;
+
+  .sub-type {
+    width: 100%;
+    position: absolute;
+    top: 0;
+
+    &.top {
+      z-index: 2;
+    }
+
+    .local {
+      transition: all .3s;
+      font-size: 14rem;
+      color: gray;
+      //background: #f9f9f9;
+      background: linear-gradient(to right, rgb(36, 34, 84), rgb(7, 5, 16));
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .card {
+        margin: 20rem;
+        margin-top: @header-height;
+        padding: 20rem;
+        border-radius: 8rem;
+        width: 100%;
+        //background: white;
+        background: linear-gradient(to right, rgb(53, 51, 110), rgb(29, 21, 66));
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        overflow: auto;
+      }
+
+      .nav-item {
+        @width: 35rem;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        flex-shrink: 0;
+        width: 17vw;
+
+        img {
+          width: @width;
+          height: @width;
+          margin-bottom: 5rem;
+        }
+      }
+    }
+  }
+
+  .sub-type-notice {
+    position: absolute;
+    background: rgba(black, .4);
+    top: 100rem;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 3rem 12rem;
+    border-radius: 10rem;
+    z-index: 3;
+    font-size: 12rem;
+    color: white;
+  }
+}
+</style>

src/pages/home/slide/Slide2.vue

@@ -0,0 +1,149 @@
+<template>
+  <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" v-for="i in 2">
+          <img src="@/assets/img/icon/msg-icon9.webp" alt="">
+          <span>美食美食美食美食美食美食美食</span>
+        </div>
+      </div>
+    </div>
+    <div class="sub-type-notice"
+         v-if="state.subType===-1 && !state.subTypeVisible"
+         @click="showSubType">1个直播
+    </div>
+    <SlideList
+        :active="props.active"
+        :style="{background: 'black',marginTop:state.subTypeVisible?state.subTypeHeight:0}"
+        :api="api.videos.recommended"
+        @touchstart="pageClick"
+    />
+  </SlideItem>
+</template>
+
+<script setup lang="jsx">
+import SlideItem from '@/components/slide/SlideItem.vue'
+import {onMounted, onUnmounted, reactive, ref, watch} from "vue";
+import bus, {EVENT_KEY} from "@/utils/bus";
+import Utils from "@/utils";
+import api from "@/api";
+import Loading from "@/components/Loading.vue";
+import {useSlideListItemRender} from "@/utils/hooks/useSlideListItemRender";
+import SlideList from './SlideList.vue';
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false
+  }
+})
+
+function stop(e) {
+  e.stopPropagation()
+}
+
+const subTypeRef = ref(null)
+const state = reactive({
+  index: 0,
+  subType: -1,
+  subTypeVisible: false,
+  subTypeHeight: '0',
+  //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
+  subTypeIsTop: false,
+})
+
+
+function showSubType(e) {
+  Utils.$stopPropagation(e)
+  console.log('subTypeRef',)
+  state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
+  state.subTypeVisible = true
+  setTimeout(() => state.subTypeIsTop = true, 300)
+  bus.emit(EVENT_KEY.OPEN_SUB_TYPE,)
+}
+
+function pageClick(e) {
+  // console.log('pageClick')
+  if (state.subTypeVisible) {
+    state.subTypeIsTop = state.subTypeVisible = false
+    bus.emit(EVENT_KEY.CLOSE_SUB_TYPE,)
+    Utils.$stopPropagation(e)
+  }
+}
+
+onMounted(() => {
+  // getData()
+})
+onUnmounted(() => {
+})
+
+</script>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+.slide-item-class {
+  position: relative;
+
+  .sub-type {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    font-size: 12rem;
+    color: white;
+
+    &.top {
+      z-index: 2;
+    }
+
+    .card {
+      margin-top: @header-height;
+      padding: 20rem 5rem;
+      width: 100%;
+      background: rgba(black, .4);
+      box-sizing: border-box;
+      display: flex;
+      overflow: auto;
+    }
+
+    .nav-item {
+      @width: 50rem;
+      width: @width + 5rem;
+      margin: 0 5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      flex-shrink: 0;
+
+      span {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      img {
+        width: @width;
+        height: @width;
+        margin-bottom: 5rem;
+      }
+    }
+  }
+
+  .sub-type-notice {
+    position: absolute;
+    background: rgba(black, .4);
+    top: 100rem;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 3rem 12rem;
+    border-radius: 10rem;
+    z-index: 3;
+    font-size: 12rem;
+    color: white;
+  }
+}
+</style>

src/pages/home/slide/Slide3.vue

@@ -94,9 +94,7 @@ const p = {
   }
 }
 
-const render = useSlideListItemRender({...props.cbs, ...p})
 const subTypeRef = ref(null)
-const listRef = ref(null)
 const state = reactive({
   index: 0,
   subType: -1,

src/pages/home/slide/Slide4.vue

@@ -0,0 +1,22 @@
+<template>
+  <SlideItem>
+    <SlideList
+        style="background:#000;"
+        :active="props.active"
+        :api="api.videos.recommended"
+    />
+  </SlideItem>
+</template>
+
+<script setup lang="jsx">
+import SlideItem from '@/components/slide/SlideItem.vue'
+import api from "@/api";
+import SlideList from './SlideList.vue';
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>

src/pages/home/slide/SlideList.vue

@@ -17,11 +17,10 @@
 
 <script setup lang="jsx">
 import SlideVerticalInfinite from '@/components/slide/SlideVerticalInfinite.vue'
-import {computed, onMounted, onUnmounted, reactive, ref, watch} from "vue";
+import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
 import bus, {EVENT_KEY} from "@/utils/bus";
 import Utils from "@/utils";
 import {useSlideListItemRender} from "@/utils/hooks/useSlideListItemRender";
-import Loading from "@/components/Loading.vue";
 import {useStore} from "vuex";
 import {uniqueId} from "lodash";
 
@@ -52,10 +51,6 @@ const emit = defineEmits([
 const store = useStore()
 const loading = computed(() => store.state.loading)
 
-function stop(e) {
-  e.stopPropagation()
-}
-
 const p = {
   onShowComments() {
     console.log('onShowComments')
@@ -122,14 +117,12 @@ function click(uniqueId) {
 }
 
 function updateItem({position, item}) {
-  console.log('po', position)
   if (position.uniqueId === state.uniqueId) {
     state.list[position.index] = item
   }
 }
 
 onMounted(() => {
-  getData()
   bus.on(EVENT_KEY.SINGLE_CLICK, click)
   bus.on(EVENT_KEY.UPDATE_ITEM, updateItem)
 })