save

src/components/Comment.vue

@@ -1,6 +1,6 @@
 <template>
   <from-bottom-dialog
-      page-id="home-index"
+      :page-id="pageId"
       :modelValue="modelValue"
       @update:modelValue="e=>$emit('update:modelValue',e)"
       @cancel="cancel"
@@ -35,7 +35,8 @@
               <div class="love" @click="loved(item)">
                 <img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
                      class="love-image">
-                <img  v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
+                <img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt=""
+                     class="love-image">
                 <span>{{ formatNumber(item.loveNum) }}</span>
               </div>
             </div>
@@ -136,6 +137,10 @@ export default {
       type: String,
       default: null
     },
+    pageId: {
+      type: String,
+      default: 'home-index'
+    },
     height: {
       type: String,
       default: '70vh'

src/components/slide/BVideo.vue

@@ -217,9 +217,12 @@ export default {
     // eventTester("durationchange", '资源长度改变'); //资源长度改变
     // eventTester("volumechange", '音量改变'); //音量改变
 
+    console.log('mounted')
+    bus.off('singleClickBroadcast')
     bus.on('singleClickBroadcast', this.click)
   },
   unmounted() {
+    console.log('unmounted')
     bus.off('singleClickBroadcast', this.click)
   },
   methods: {

src/main.js

@@ -10,7 +10,7 @@ import mixin from "./utils/mixin";
 import VueLazyload from '@jambonn/vue-lazyload'
 import VConsole from 'vconsole';
 
-const vConsole = new VConsole();
+// const vConsole = new VConsole();
 
 const app = Vue.createApp(App)
 app.config.globalProperties.$api = {...api}

src/pages/slide/IndicatorHome.vue

@@ -12,14 +12,18 @@
       <div class="tab-ctn">
         <div class="tabs" ref="tabs">
           <div class="tab" :class="tabOneClass" @click.stop="change(0)">
-            <span>同城</span>
+            <span>热点</span>
             <img v-show="index === 0" src="../../assets/img/icon/arrow-up-white.png" class="tab1-img">
           </div>
           <div class="tab" :class="{active:index === 1}" @click.stop="change(1)">
-            <span>关注</span>
+            <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>
+          </div>
+          <div class="tab" :class="{active:index === 3}" @click.stop="change(3)"><span>商城</span>
+          </div>
+          <div class="tab" :class="{active:index === 4}" @click.stop="change(4)"><span>推荐</span>
           </div>
         </div>
         <div class="indicator" ref="indicator"></div>
@@ -123,7 +127,6 @@ export default {
     this.initTabs()
     bus.on(this.name + '-moveX', this.move)
     bus.on(this.name + '-moveY', e => {
-      // console.log('moveY', e)
       this.moveY = e
     })
     bus.on(this.name + '-end', this.end)
@@ -162,7 +165,7 @@ export default {
     move(e) {
       this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
       this.$setCss(this.indicatorRef, 'left',
-          this.lefts[this.index] -
+          this.lefts[this.index] +
           e / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px')
     },
     end(index) {
@@ -180,11 +183,11 @@ export default {
 <style scoped lang="less">
 @import "@/assets/less/index";
 
-@height: 6rem;
+@height: 60rem;
 
 .indicator-home {
   position: fixed;
-  font-size: 1.6rem;
+  font-size: 16rem;
   top: 0;
   left: 0;
   z-index: 2;
@@ -206,8 +209,8 @@ export default {
 
   .loading {
     opacity: 0;
-    top: 1.3rem;
-    right: 1.5rem;
+    top: 13rem;
+    right: 15rem;
     position: absolute;
   }
 
@@ -218,13 +221,13 @@ export default {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    padding: 0 1.5rem;
+    padding: 0 15rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
     .tab-ctn {
-      width: 45%;
+      width: 80%;
       position: relative;
 
       .tabs {
@@ -242,16 +245,16 @@ export default {
             @width: 1rem;
             width: @width;
             height: @width;
-            margin-left: .4rem;
+            margin-left: 4rem;
             transition: all .3s;
-            margin-top: .7rem;
+            margin-top: 7rem;
           }
 
           .tab2-img {
             position: absolute;
-            height: 1.5rem;
-            left: 2.4rem;
-            top: -.5rem;
+            height: 15rem;
+            left: 24rem;
+            top: -5rem;
           }
 
           &.open {
@@ -266,38 +269,38 @@ export default {
         }
       }
 
-
       .indicator {
         //transition: left .3s;
         position: absolute;
-        bottom: -0.8rem;
-        height: .2rem;
-        width: 2rem;
+        bottom: -8rem;
+        height: 2rem;
+        width: 20rem;
+        //width: calc(100% / 5);
         background: #fff;
-        border-radius: .5rem;
+        border-radius: 5rem;
       }
     }
 
     .search {
-      width: 2rem;
+      width: 20rem;
     }
   }
 
   .toggle-type {
-    @height: 10rem;
+    @height: 100rem;
     position: absolute;
     height: @height;
     //padding-top: @height;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-bottom: 1rem;
+    padding-left: 10rem;
+    padding-right: 10rem;
+    padding-bottom: 10rem;
     width: 100%;
     background: @main-bg;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     box-sizing: border-box;
-    font-size: 1.2rem;
+    font-size: 12rem;
     top: -@height;
     transition: all .3s;
     opacity: 0;
@@ -309,13 +312,13 @@ export default {
 
     .l-button {
       flex: 1;
-      margin: 0 .3rem;
-      height: 2.8rem;
+      margin: 0 3rem;
+      height: 28rem;
       background: rgb(33, 36, 45);
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 2rem;
+      border-radius: 20rem;
       color: rgb(157, 161, 170);
       transition: all .3s;
 
@@ -325,10 +328,10 @@ export default {
       }
 
       img {
-        @width: .9rem;
+        @width: 9rem;
         width: @width;
         height: @width;
-        margin-left: .8rem;
+        margin-left: 8rem;
       }
     }
 

src/pages/slide/Slide.vue

@@ -11,7 +11,7 @@
         <SlideHorizontal
             name="main"
             v-model:index="baseIndex"
-            style="height: calc(100% - 5rem);"
+            style="height: calc(100% - 50rem);"
         >
           <div class="slide-item">
             <div class="nav-one" :class="{close:closeOne}">
@@ -171,7 +171,7 @@ export default {
             <div class="slide-item" data-index={itemIndex}>
               <BVideo
                   isPlay={play}
-                  video={item}
+                  item={item}
                   prefix={prefix}
                   index={itemIndex}
                   onShowComments={e => this.isCommenting = true}
@@ -293,7 +293,7 @@ export default {
 }
 
 .nav-one {
-  height: 14rem;
+  height: 140rem;
   box-sizing: border-box;
   background: linear-gradient(to right, rgb(36, 34, 84), rgb(7, 5, 16));
   transition: all .3s;
@@ -303,7 +303,7 @@ export default {
   justify-content: space-between;
 
   .nav-item {
-    @width: 3.5rem;
+    @width: 35rem;
     display: flex;
     align-items: center;
     flex-direction: column;
@@ -311,20 +311,20 @@ export default {
     img {
       width: @width;
       height: @width;
-      margin-bottom: .5rem;
+      margin-bottom: 5rem;
     }
   }
 
   &.close {
-    margin-top: -14rem;
+    margin-top: -140rem;
   }
 }
 
-@space-width: 1.5rem;
-@icon-width: 5.2rem;
+@space-width: 15rem;
+@icon-width: 52rem;
 
 .nav-two {
-  height: 18rem;
+  height: 180rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -337,7 +337,7 @@ export default {
     display: flex;
     justify-content: space-between;
     box-sizing: border-box;
-    margin-bottom: 1.5rem;
+    margin-bottom: 15rem;
 
     .right {
       color: gray;
@@ -346,9 +346,9 @@ export default {
     }
 
     img {
-      width: 1rem;
-      height: 1rem;
-      margin-left: .4rem;
+      width: 10rem;
+      height: 10rem;
+      margin-left: 4rem;
     }
   }
 
@@ -361,7 +361,7 @@ export default {
       width: @icon-width;
       position: relative;
       margin-right: @space-width;
-      font-size: 1rem;
+      font-size: 10rem;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -373,7 +373,7 @@ export default {
       }
 
       span {
-        margin-top: .8rem;
+        margin-top: 8rem;
         text-align: center;
         width: @icon-width;
         white-space: nowrap;
@@ -383,17 +383,17 @@ export default {
 
       .tag {
         background: rgb(239, 46, 137);
-        border-radius: .2rem;
-        padding: 0 .2rem;
-        bottom: 1.8rem;
+        border-radius: 2rem;
+        padding: 0 2rem;
+        bottom: 18rem;
         position: absolute;
-        font-size: 1rem;
+        font-size: 10rem;
       }
     }
   }
 
   &.close {
-    margin-top: -18rem;
+    margin-top: -180rem;
   }
 }
 

src/pages/slide/SlideHorizontal.vue

@@ -65,6 +65,7 @@ export default {
 
       if (this.next) {
         bus.emit(this.name + '-moveX', this.moveX)
+
         this.$stopPropagation(e)
         this.$setCss(this.wrapper, 'transform',
             `translate3d(${this.getDistance()

src/pages/slideHooks/H.vue

@@ -12,13 +12,17 @@ const props = defineProps({
       return 0
     }
   },
+  name: {
+    type: String,
+    default: () => ''
+  },
 })
 const emit = defineEmits(['update:index'])
 
 const judgeValue = 20
 const wrapperEl = ref(null)
 const state = reactive({
-  name: 'SlideHorizontal',
+  name: props.name,
   localIndex: props.index,
   needCheck: true,
   next: false,
@@ -39,7 +43,7 @@ watch(
 )
 
 onMounted(() => {
-  slideInit(wrapperEl.value,state,SlideType.HORIZONTAL)
+  slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
 })
 
 function touchStart(e) {
@@ -47,7 +51,7 @@ function touchStart(e) {
 }
 
 function touchMove(e) {
-  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.HORIZONTAL)
+  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.HORIZONTAL)
 }
 
 function touchEnd(e) {

src/pages/slideHooks/VInfinite.vue

@@ -1,9 +1,11 @@
 <script setup lang="jsx">
-import {onMounted, reactive, ref, watch, createApp} from "vue";
+import {onMounted, reactive, ref, watch, createApp, computed} from "vue";
 import GM from '../../utils'
 import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
 import {SlideType} from "../../utils/const_var";
 import SlideItem from './SlideItem'
+import bus from "../../utils/bus";
+import {useStore} from 'vuex'
 
 const props = defineProps({
   index: {
@@ -34,15 +36,18 @@ const props = defineProps({
     type: Number,
     default: () => 5
   },
+  name: {
+    type: String,
+    default: () => ''
+  },
 })
 const emit = defineEmits(['update:index'])
 
 const appInsMap = new Map()
-const judgeValue = 20
 const slideItemClassName = 'slide-item2'
 const wrapperEl = ref(null)
 const state = reactive({
-  name: 'SlideVerticalInfinite',
+  name: props.name,
   localIndex: props.index,
   needCheck: true,
   next: false,
@@ -50,6 +55,9 @@ const state = reactive({
   move: {x: 0, y: 0},
   wrapper: {width: 0, height: 0, childrenLength: 0}
 })
+const store = useStore()
+const homeRefresh = computed(() => store.state.homeRefresh)
+const judgeValue = computed(() => store.state.judgeValue)
 
 watch(
     () => props.index,
@@ -80,8 +88,6 @@ function insertContent(list = props.list) {
     start = end - 5
   }
   if (start < 0) start = 0
-  console.log('start', start)
-  console.log('end', end)
   list.slice(start, end).map(
       (item, index) => {
         //自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
@@ -125,10 +131,15 @@ function touchStart(e) {
 }
 
 function touchMove(e) {
-  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)
+  slideTouchMove(e, wrapperEl.value, state, judgeValue.value, canNext, null, SlideType.VERTICAL)
 }
 
 function touchEnd(e) {
+  let isNext = state.move.y < 0
+  if (state.localIndex === 0 && !isNext && state.move.y > (homeRefresh.value + judgeValue.value)) {
+    console.log('loading')
+    // bus.emit(props.prefix + '-loading')
+  }
   slideTouchEnd(e, state, canNext, (isNext) => {
     if (isNext) {
       let addItemIndex = state.localIndex + 2

src/pages/slideHooks/common.js

@@ -42,11 +42,19 @@ export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type
 
   let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
 
+  let canSlideRes = canSlide(state, judgeValue, type)
+
+  //当
+  if (canSlideRes && state.localIndex === 0 && !isNext && type === SlideType.VERTICAL) {
+    bus.emit(state.name + '-moveY', state.move.y)
+  }
   if (!canNextCb?.(isNext, e)) return
 
-  if (canSlide(state, judgeValue, type)) {
+  if (canSlideRes) {
     nextCb?.()
-    bus.emit(state.name + '-moveX', state.move.x)
+    if (type === SlideType.HORIZONTAL) {
+      bus.emit(state.name + '-moveX', state.move.x)
+    }
     Utils.$stopPropagation(e)
     let t = getSlideDistance(state, type) + (isNext ? judgeValue : -judgeValue)
     let dx1 = 0
@@ -82,9 +90,6 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb, type = Sli
       } else {
         state.localIndex--
       }
-
-
-
       return nextCb?.(isNext)
     }
   }
@@ -97,8 +102,10 @@ export function slideReset(el, state, type, emit) {
   let dx1 = 0
   let dx2 = 0
   if (type === SlideType.HORIZONTAL) {
+    bus.emit(state.name + '-end', state.localIndex)
     dx1 = t
   } else {
+    bus.emit(state.name + '-end',)
     dx2 = t
   }
   Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
@@ -106,7 +113,6 @@ export function slideReset(el, state, type, emit) {
   state.next = false
   state.needCheck = true
   emit?.('update:index', state.localIndex)
-  bus.emit(state.name + '-end', state.localIndex)
 }
 
 export function getSlideDistance(state, type = SlideType.HORIZONTAL) {

src/pages/slideHooks/index.vue

@@ -1,11 +1,16 @@
 <template>
   <div class="test-slide-wrapper" id="slideHook" v-love="'slideHook'">
     <H v-model:index="state.baseIndex">
-      <SlideItem class=" gray">
-        <H class="h" v-model:index="state.navIndex">
-          <SlideItem class=" gray">
-            <div class="big">找红包</div>
-          </SlideItem>
+      <SlideItem>
+        <IndicatorHome
+            v-hide="state.isUp"
+            :loading="state.loading"
+            name="main"
+            v-model:index="state.navIndex"
+        />
+        <H class="h"
+           name="main"
+           v-model:index="state.navIndex">
           <SlideItem class=" gray">
             <div class="big">热点</div>
           </SlideItem>
@@ -18,8 +23,9 @@
           <SlideItem class=" gray">
             <div class="big">商城</div>
           </SlideItem>
-          <SlideItem class="">
+          <SlideItem>
             <VInfinite
+                name="main"
                 v-model:index="state.itemIndex"
                 :render="render"
                 :list="state.recommendVideos"
@@ -48,6 +54,7 @@
       </SlideItem>
     </H>
   </div>
+  <Comment page-id="slideHook" v-model="state.isCommenting"/>
 </template>
 
 <script setup lang="jsx">
@@ -56,6 +63,8 @@ import VInfinite from './VInfinite.vue'
 import SlideItem from './SlideItem'
 import SlideImgs from "../../components/slide/SlideAlbum";
 import BVideo from "../../components/slide/BVideo";
+import Comment from "../../components/Comment";
+import IndicatorHome from "../slide/IndicatorHome";
 
 import resource from "../../assets/data/resource.js";
 import {onMounted, onUnmounted, reactive} from "vue";
@@ -64,7 +73,7 @@ import {useNav} from "../../utils/hooks/useNav";
 
 const nav = useNav()
 
-const videos = resource.videos.slice(0,5).map(v => {
+const videos = resource.videos.slice(0, 6).map(v => {
   v.type = 'recommend-video'
   return v
 })
@@ -72,7 +81,7 @@ const videos = resource.videos.slice(0,5).map(v => {
 
 const state = reactive({
   baseIndex: 0,
-  navIndex: 5,
+  navIndex: 4,
   itemIndex: 0,
   recommendVideos: [
     // {
@@ -89,6 +98,8 @@ const state = reactive({
   isCommenting: false,
   isSharing: false,
   canMove: true,
+  loading: false,
+  isUp: false,
 
   shareType: -1,
 
@@ -118,9 +129,7 @@ onMounted(() => {
       state.recommendVideos[itemIndex] = val.item
     }
   })
-  bus.on('nav', path => {
-    nav(path)
-  })
+  bus.on('nav', path => nav(path))
 })
 onUnmounted(() => {
   bus.offAll()
@@ -136,7 +145,7 @@ function render(item, itemIndex, play, position) {
   }
   if (item.type === 'recommend-video') {
     node = <BVideo
-        isPlay={play}
+        isPlay={false}
         item={item}
         position={{...position, itemIndex}}
         onShowComments={e => state.isCommenting = true}