From f6d0df905ab59f2d2926be4ad4af75ab0d106534 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 7 Feb 2023 02:17:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dialog/FromBottomDialog.vue |   2 +-
 src/components/slide/BVideo.vue            |  22 ++-
 src/pages/slideHooks/index.vue             | 156 +++++++++++++++++++--
 src/utils/bus.js                           |   3 +
 4 files changed, 166 insertions(+), 17 deletions(-)

diff --git a/src/components/dialog/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue
index 97570ad..6d9094c 100644
--- a/src/components/dialog/FromBottomDialog.vue
+++ b/src/components/dialog/FromBottomDialog.vue
@@ -170,7 +170,7 @@ export default {
       this.$setCss(this.$refs.dialog, 'transition-duration', `250ms`)
       if (Math.abs(this.moveYDistance) > clientHeight / 2) {
         this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${clientHeight}px,0)`)
-        bus.emit('dialogEnd', {tag: this.tag, isClose: true})
+        bus.emit(EVENT_KEY.DIALOG_END, {tag: this.tag, isClose: true})
         setTimeout(this.hide, 250)
       } else {
         this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,0,0)`)
diff --git a/src/components/slide/BVideo.vue b/src/components/slide/BVideo.vue
index 890e86d..235a12c 100644
--- a/src/components/slide/BVideo.vue
+++ b/src/components/slide/BVideo.vue
@@ -13,7 +13,7 @@
     <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">
-        <template v-if="!commentVisible">
+        <template v-if="!commentVisible && !isMarginTop">
           <ItemToolbar v-model:item="localItem"
                        :position="position"
                        v-bind="$attrs"
@@ -165,6 +165,7 @@ export default {
       videoScreenHeight: 0,
       videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
       commentVisible: false,
+      isMarginTop: false,
     }
   },
   mounted() {
@@ -223,21 +224,32 @@ export default {
 
     console.log('mounted')
     // bus.off('singleClickBroadcast')
-    bus.on('singleClickBroadcast', this.click)
+    bus.on(EVENT_KEY.SINGLE_CLICK_BROADCAST, this.click)
     bus.on(EVENT_KEY.DIALOG_MOVE, this.onDialogMove)
     bus.on(EVENT_KEY.DIALOG_END, this.onDialogEnd)
     bus.on(EVENT_KEY.OPEN_COMMENTS, this.onOpenComments)
     bus.on(EVENT_KEY.CLOSE_COMMENTS, this.onCloseComments)
+    bus.on(EVENT_KEY.OPEN_SUB_TYPE, this.onOpenSubType)
+    bus.on(EVENT_KEY.CLOSE_SUB_TYPE, this.onCloseSubType)
   },
   unmounted() {
     console.log('unmounted')
-    bus.off('singleClickBroadcast', this.click)
+    bus.off(EVENT_KEY.SINGLE_CLICK_BROADCAST, this.click)
     bus.off(EVENT_KEY.DIALOG_MOVE, this.onDialogMove)
     bus.off(EVENT_KEY.DIALOG_END, this.onDialogEnd)
     bus.off(EVENT_KEY.OPEN_COMMENTS, this.onOpenComments)
     bus.off(EVENT_KEY.CLOSE_COMMENTS, this.onCloseComments)
+    bus.off(EVENT_KEY.OPEN_SUB_TYPE, this.onCloseSubType)
   },
   methods: {
+    onOpenSubType({index, height}) {
+      this.isMarginTop = true
+      Utils.$setCss(this.$refs.video, 'margin-top', `${height}px`)
+    },
+    onCloseSubType({index}) {
+      this.isMarginTop = false
+      Utils.$setCss(this.$refs.video, 'margin-top', `0px`)
+    },
     onDialogMove({tag, e}) {
       if (this.commentVisible && tag === 'comment') {
         Utils.$setCss(this.$refs.video, 'transition-duration', `0ms`)
@@ -344,7 +356,6 @@ export default {
 
 .video-wrapper {
   position: relative;
-  background: black;
   font-size: 14rem;
   width: 100%;
   height: 100%;
@@ -352,7 +363,8 @@ export default {
   video {
     width: 100%;
     height: 100%;
-    transition: height .3s;
+    transition: height, margin-top .3s;
+    background: black;
     /*position: absolute;*/
   }
 
diff --git a/src/pages/slideHooks/index.vue b/src/pages/slideHooks/index.vue
index 6ba6f5e..267b8de 100644
--- a/src/pages/slideHooks/index.vue
+++ b/src/pages/slideHooks/index.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="test-slide-wrapper" id="slideHook" v-love="'slideHook'">
+  <div class="test-slide-wrapper" id="slideHook"
+       @click="pageClick"
+       v-love="'slideHook'">
     <H v-model:index="state.baseIndex">
       <SlideItem>
         <IndicatorHome
@@ -9,6 +11,50 @@
             name="main"
             v-model:index="state.navIndex"
         />
+        <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"
+             @click="showSubType">附近吃喝玩乐
+        </div>
         <H class="h"
            name="main"
            v-model:index="state.navIndex">
@@ -70,9 +116,10 @@ import Comment from "../../components/Comment";
 import IndicatorHome from "../slide/IndicatorHome";
 
 import resource from "../../assets/data/resource.js";
-import {onMounted, onUnmounted, provide, reactive} from "vue";
+import {onMounted, onUnmounted, provide, reactive, ref} from "vue";
 import bus, {EVENT_KEY} from "../../utils/bus";
 import {useNav} from "../../utils/hooks/useNav";
+import Utils from "@/utils";
 
 const nav = useNav()
 
@@ -81,6 +128,12 @@ const videos = resource.videos.slice(0, 16).map(v => {
   return v
 })
 
+function stop(e) {
+  e.stopPropagation()
+}
+
+
+const subTypeRef = ref(null)
 const state = reactive({
   baseIndex: 0,
   navIndex: 4,
@@ -97,7 +150,6 @@ const state = reactive({
     ...videos
   ],
 
-  isCommenting: false,
   isSharing: false,
   canMove: true,
   loading: false,
@@ -118,16 +170,40 @@ const state = reactive({
 
   commentVisible: false,
   fullScreen: false,
-  style: '100%'
+  subType: -1,
+  //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
+  subTypeIsTop: false,
 })
 
+function showSubType(e) {
+  Utils.$stopPropagation(e)
+  console.log('subTypeRef',)
+  state.subType = 0
+  setTimeout(() => {
+    state.subTypeIsTop = true
+  }, 300)
+  bus.emit(EVENT_KEY.OPEN_SUB_TYPE, {
+    index: 0,
+    height: subTypeRef.value.getBoundingClientRect().height
+  })
+}
+
+function pageClick(e) {
+  if (state.subType !== -1) {
+    state.subType = -1
+    state.subTypeIsTop = false
+    bus.emit(EVENT_KEY.CLOSE_SUB_TYPE, {index: 0,})
+    Utils.$stopPropagation(e)
+  }
+}
+
 onMounted(() => {
   bus.on('singleClick', () => {
     let id = ''
-    if (state.navIndex === 5) {
+    if (state.navIndex === 4) {
       id = state.recommendVideos[state.itemIndex].id
     }
-    bus.emit('singleClickBroadcast', id)
+    bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, id)
   })
   bus.on('update:item', val => {
     const {baseIndex, navIndex, itemIndex} = val.position
@@ -210,16 +286,74 @@ function render(item, itemIndex, play, position) {
 <style scoped lang="less">
 @import "@/assets/less/index";
 
+.sub-type {
+  width: 100%;
+  position: fixed;
+  top: 0;
+
+  &.top {
+    z-index: 1;
+  }
+
+  .local {
+    transition: all .3s;
+    font-size: 14rem;
+    color: gray;
+    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: red;
+      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: fixed;
+  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;
+}
+
 .test-slide-wrapper {
   font-size: 14rem;
   width: 100%;
   height: 100%;
 
-  span {
-    color: white;
-    font-size: 24rem;
-  }
-
   .big {
     font-weight: bold;
     font-size: 100rem;
diff --git a/src/utils/bus.js b/src/utils/bus.js
index fb9e822..3280fa2 100644
--- a/src/utils/bus.js
+++ b/src/utils/bus.js
@@ -39,6 +39,7 @@ export default {
 }
 
 export const EVENT_KEY = {
+  SINGLE_CLICK_BROADCAST: 'SINGLE_CLICK_BROADCAST',
   ENTER_FULLSCREEN: 'ENTER_FULLSCREEN',
   EXIT_FULLSCREEN: 'EXIT_FULLSCREEN',
   TOGGLE_FULLSCREEN: 'TOGGLE_FULLSCREEN',
@@ -47,4 +48,6 @@ export const EVENT_KEY = {
   CLOSE_COMMENTS: 'CLOSE_COMMENTS',
   DIALOG_MOVE: 'DIALOG_MOVE',
   DIALOG_END: 'DIALOG_END',
+  OPEN_SUB_TYPE: 'OPEN_SUB_TYPE',
+  CLOSE_SUB_TYPE: 'CLOSE_SUB_TYPE',
 }