From 881eb98bc10c28a0df879175855679a13794d8ae Mon Sep 17 00:00:00 2001
From: hhh <you@example.com>
Date: Mon, 23 Jan 2023 03:54:35 +0800
Subject: [PATCH] save

---
 pnpm-lock.yaml                                |   2 +-
 src/assets/less/color.less                    |   1 +
 src/components/Footer.vue                     |  12 +-
 src/components/slide/ItemDesc.vue             |   2 +-
 .../slide/{SlideImgs.vue => SlideAlbum.vue}   | 289 +++++++++++-------
 src/main.js                                   |   3 +-
 src/pages/slideHooks/common.js                |  13 +-
 src/pages/slideHooks/index.vue                |   6 +-
 src/pages/test/Test.vue                       |   2 +-
 src/pages/test/TestSlide.vue                  |   2 +-
 src/router/routes.js                          |   5 +-
 src/utils/const_var.js                        |  16 +-
 12 files changed, 220 insertions(+), 133 deletions(-)
 rename src/components/slide/{SlideImgs.vue => SlideAlbum.vue} (72%)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24e9703..9706722 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ specifiers:
   pinyin: 2.11.1
   vconsole: ^3.15.0
   vite: 4.0.4
-  vue: ^3.2.45
+  vue: 3.2.45
   vue-router: 4.0.14
   vue-switches: 2.0.1
   vuex: 4.0.2
diff --git a/src/assets/less/color.less b/src/assets/less/color.less
index 916f94c..a644ae0 100644
--- a/src/assets/less/color.less
+++ b/src/assets/less/color.less
@@ -5,6 +5,7 @@
 @second-btn-color-tran: rgba(58, 58, 70, .4);
 @line-color: rgb(37, 45, 66);
 @line-color2: rgb(56, 54, 67);
+@footer-color:#020202;
 
 @primary-btn-color: rgb(252, 47, 86);
 @disable-primary-btn-color: rgba(252, 47, 86, .5);
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 716fc9c..a54c6e0 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="footer">
+  <div v-if="visible" class="footer">
     <div class="l-button" @click="refresh(1)">
       <span v-if="!isRefresh1" :class="{active:currentTab===1}">首页</span>
       <img v-if="isRefresh1 " src="../assets/img/icon/refresh1.png" alt="" class="refresh">
@@ -26,6 +26,8 @@
 </template>
 
 <script>
+import bus from "../utils/bus";
+
 export default {
   name: "Footer",
   props: ['initTab'],
@@ -34,8 +36,14 @@ export default {
       isRefresh1: false,
       isRefresh2: false,
       currentTab: this.initTab,
+      visible: true
     }
   },
+  created() {
+    bus.on('setFooterVisible', (e) => this.visible = e)
+    bus.on('enterFullscreen', (e) => this.visible = false)
+    bus.on('exitFullscreen', (e) => this.visible = true)
+  },
   methods: {
     tab(index) {
       switch (index) {
@@ -84,7 +92,7 @@ export default {
   // 会使footer的bottom：0失效，不能准确定位
   top: calc(100vh - @footer-height);
   //bottom: 0;
-  background: #020202;
+  background: @footer-color;
   color: white;
   display: flex;
   //justify-content: space-between;
diff --git a/src/components/slide/ItemDesc.vue b/src/components/slide/ItemDesc.vue
index 7b5d9f6..7353f6e 100644
--- a/src/components/slide/ItemDesc.vue
+++ b/src/components/slide/ItemDesc.vue
@@ -52,7 +52,7 @@ const state = reactive({
 </script>
 <template>
   <div class="item-desc">
-    <div class="content ml1r mb2r" v-if="!isMy">
+    <div class="content ml1r mb1r" v-if="!isMy">
       <div class="location-wrapper" v-if=" item.city || item.address">
         <div class="location">
           <img src="../../assets/img/icon/location.webp" alt="">
diff --git a/src/components/slide/SlideImgs.vue b/src/components/slide/SlideAlbum.vue
similarity index 72%
rename from src/components/slide/SlideImgs.vue
rename to src/components/slide/SlideAlbum.vue
index 89586ab..29d769f 100644
--- a/src/components/slide/SlideImgs.vue
+++ b/src/components/slide/SlideAlbum.vue
@@ -1,6 +1,5 @@
 <template>
-  <!--不知为啥touch事件，在下部20px的空间内不触发，加上click事件不好了  -->
-  <div id="SlideImgs">
+  <div id="SlideAlbum">
     <div class="img-slide-wrapper">
       <div class="img-slide-list"
            ref="wrapperEl"
@@ -13,42 +12,54 @@
         </div>
       </div>
     </div>
-    <template v-if="!state.isPreview">
-      <template v-if="false">
-        <ItemToolbar :item="props.modelValue"
-                     :index="0"
-                     prefix="sadfa"
-        />
-        <ItemDesc
-            :item="props.modelValue"
-            :index="0"
-            prefix="sadfa"
-        />
-      </template>
-      <div class="progress-bar"
-           @touchstart="progressBarTouchStart"
-           @touchmove="progressBarTouchMove"
-           @touchend="progressBarTouchMEnd"
-      >
-        <div class="bar" v-for="(img,index) in modelValue.imgs">
-          <div class="progress"
-               :style="getProgressWidth(index)"></div>
-        </div>
-      </div>
-
+    <template v-if=" state.operationStatus === SlideAlbumOperationStatus.Normal">
+      <ItemToolbar :item="props.modelValue"
+                   :index="0"
+                   prefix="sadfa"
+      />
+      <ItemDesc
+          :item="props.modelValue"
+          :index="0"
+          prefix="sadfa"
+      />
     </template>
-    <div class="preview" v-if="state.isPreview">
-      <div class="preview-wrapper">
-        <img :src="img"
-             :class="{'preview-img':index === state.localIndex}"
-             v-for="(img,index) in props.modelValue.imgs"
-             :ref="e=>setItemRef(e,'previewImgs')"
-        >
-      </div>
-      <div class="indicator">
-        <span class="index">{{ state.localIndex + 1 }}</span>&nbsp;/&nbsp;{{ props.modelValue.imgs.length }}
+    <!--不知为啥touch事件，在下部20px的空间内不触发，加上click事件不好了  -->
+    <div class="progress-bar"
+         v-if="!state.isPreview && state.operationStatus!== SlideAlbumOperationStatus.Zooming"
+         @click="null"
+         @touchstart="progressBarTouchStart"
+         @touchmove="progressBarTouchMove"
+         @touchend="progressBarTouchMEnd"
+    >
+      <div class="bar" v-for="(img,index) in modelValue.imgs">
+        <div class="progress"
+             :style="getProgressWidth(index)"></div>
       </div>
     </div>
+    <Teleport to="#slideHook" v-if="state.isPreview">
+      <div class="preview">
+        <div class="preview-wrapper">
+          <img :src="img"
+               :class="{'preview-img':index === state.localIndex}"
+               v-for="(img,index) in props.modelValue.imgs"
+               :ref="e=>setItemRef(e,'previewImgs')"
+          >
+        </div>
+        <div class="indicator">
+          <span class="index">{{ state.localIndex + 1 }}</span>&nbsp;/&nbsp;{{ props.modelValue.imgs.length }}
+        </div>
+      </div>
+    </Teleport>
+    <Teleport to="#slideHook" v-if="state.operationStatus === SlideAlbumOperationStatus.Detail">
+      <div class="album-toolbar">
+        <div class="left">关闭</div>
+        <div class="right">
+          <div class="option">评论</div>
+          <div class="option">切换</div>
+          <div class="option">下载</div>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -56,7 +67,7 @@
 import enums from "../../utils/enums";
 import Utils from '../../utils'
 import {mat4} from 'gl-matrix'
-import {onMounted, onBeforeUpdate, reactive, ref, watch} from "vue";
+import {onMounted, onBeforeUpdate, reactive, ref, watch, computed} from "vue";
 import {
   getSlideDistance,
   slideInit,
@@ -65,15 +76,12 @@ import {
   slideTouchMove,
   slideTouchStart
 } from "../../pages/slideHooks/common";
-import {SlideType} from "../../utils/const_var";
+import {SlideAlbumOperationStatus, SlideType} from "../../utils/const_var";
 import ItemToolbar from "./ItemToolbar";
 import ItemDesc from "./ItemDesc";
 import GM from "../../utils";
 import {cloneDeep} from "lodash";
-
-function c() {
-  console.log('console.log()')
-}
+import bus from "../../utils/bus";
 
 let out = new Float32Array([
   0, 0, 0, 0,
@@ -199,7 +207,8 @@ const state = reactive({
   localIndex: 0,
   needCheck: true,
   isPreview: false,
-  isTwo: true,
+  isZoom: false,
+  operationStatus: SlideAlbumOperationStatus.Normal,
   next: false,
   wrapper: {width: 0, height: 0, childrenLength: 0},
   last: {
@@ -258,6 +267,21 @@ watch(
     }
 )
 
+watch(
+    () => state.operationStatus,
+    (newVal) => {
+      if (newVal === SlideAlbumOperationStatus.Zooming) {
+        bus.emit('enterFullscreen')
+      } else {
+        bus.emit('exitFullscreen')
+      }
+    }
+)
+
+const isZooming = computed(() => {
+  return state.operationStatus === SlideAlbumOperationStatus.Zooming
+})
+
 function calcCurrentIndex(e) {
   state.isPreview = true
   let x = e.touches[0].pageX
@@ -277,39 +301,26 @@ function calcCurrentIndex(e) {
 }
 
 function progressBarTouchStart(e) {
-  console.log('progressBarTouchStart')
   Utils.$stopPropagation(e)
 }
 
 function progressBarTouchMove(e) {
-  console.log('progressBarTouchMove')
-  let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-  // let rect = wrapperEl.value.getBoundingClientRect()
-  // if (rect.height - 15 < current1.y && current1.y < rect.height) {
-  //   console.log('在')
-  //   state.isPreview = true
-  //   // Utils.$stopPropagation(e)
-  // }
-
-  // calcCurrentIndex(e)
+  Utils.$stopPropagation(e)
+  calcCurrentIndex(e)
 }
 
 function progressBarTouchMEnd(e) {
-  console.log('progressBarTouchEnd')
-  if (state.isPreview){
-    Utils.$stopPropagation(e)
-  }
+  Utils.$stopPropagation(e)
   state.isPreview = false
 }
 
 function touchStart(e) {
   console.log('start', e.touches.length)
   if (e.touches.length === 1) {
-    state.isTwo = false
     slideTouchStart(e, wrapperEl.value, state)
   } else {
-    if (state.isTwo) return
-    state.isTwo = true
+    if (isZooming.value) return
+    state.operationStatus = SlideAlbumOperationStatus.Zooming
     state.itemRefs[state.localIndex].style['transition-duration'] = '0ms';
     state.last.point1 = state.start.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY};
     state.last.point2 = state.start.point2 = {x: e.touches[1].pageX, y: e.touches[1].pageY};
@@ -318,9 +329,10 @@ function touchStart(e) {
 }
 
 function touchMove(e) {
-  console.log('move', e.touches.length)
+  console.log('move', e.touches.length,)
   let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
-  if (state.isTwo && e.touches.length === 1) {
+  if (isZooming.value && e.touches.length === 1) {
+    console.log('m1')
     state.status = 'pause'
     Utils.$stopPropagation(e)
 
@@ -334,16 +346,19 @@ function touchMove(e) {
     state.last.point1 = current1
   } else {
     if (e.touches.length === 1) {
-      state.isTwo = false
-      if (state.isPreview) {
-        // Utils.$stopPropagation(e)
-      }else {
-        slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, () => {
-          state.status = 'pause'
-        }, SlideType.HORIZONTAL)
-      }
+      console.log('m2')
+      slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,
+          () => {
+            state.status = 'pause'
+          }, SlideType.HORIZONTAL,
+          () => {
+            if (state.operationStatus === SlideAlbumOperationStatus.Detail) {
+              Utils.$stopPropagation(e)
+            }
+          })
     } else {
-      state.isTwo = true
+      console.log('m3')
+      state.operationStatus = SlideAlbumOperationStatus.Zooming
       Utils.$stopPropagation(e)
       state.status = 'pause'
 
@@ -398,13 +413,14 @@ function touchMove(e) {
 
 function touchEnd(e) {
   state.isPreview = false
-  // console.log('end', e.touches.length, state.isTwo)
+  console.log('end', e.touches.length, state.operationStatus)
   //双指缩放，但只松开了一只手
-  if (state.isTwo && e.touches.length === 1) {
+  if (isZooming.value && e.touches.length === 1) {
     Utils.$stopPropagation(e)
     state.last.point1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
   } else {
-    if (state.isTwo) {
+    if (isZooming.value) {
+      state.operationStatus = SlideAlbumOperationStatus.Detail
       ov = origin
       Utils.$stopPropagation(e)
       state.itemRefs[state.localIndex].style['transition-duration'] = '300ms';
@@ -416,6 +432,8 @@ function touchEnd(e) {
             state.progress = (state.localIndex + 1) * 100
           },
           () => {
+            console.log('notNextCb')
+            state.operationStatus = SlideAlbumOperationStatus.Normal
             if (state.status !== 'custom') {
               state.status = 'play'
               requestAnimationFrame(state.cycleFn)
@@ -436,16 +454,21 @@ function setItemRef(el, key) {
   el && state[key].push(el)
 }
 
-function canNext(isNext) {
-  return !((state.localIndex === 0 && !isNext) || (state.localIndex === props.modelValue.imgs.length - 1 && isNext));
+function canNext(isNext, e) {
+  let res = !((state.localIndex === 0 && !isNext) || (state.localIndex === props.modelValue.imgs.length - 1 && isNext));
+  if (!res && state.operationStatus === SlideAlbumOperationStatus.Detail && e) {
+    Utils.$stopPropagation(e)
+  }
+  return res
 }
 
 </script>
 
 <style scoped lang="less">
-#SlideImgs {
+@import "@/assets/less/index";
+
+#SlideAlbum {
   position: relative;
-  background: blue;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -488,8 +511,8 @@ function canNext(isNext) {
     padding: 0 5rem;
     @h: 4rem;
     //height: @h;
-    height: 30rem;
-    background-color: red;
+    height: 10rem;
+    //background-color: red;
     align-items: flex-end;
     justify-content: space-between;
 
@@ -498,7 +521,7 @@ function canNext(isNext) {
       flex: 1;
       margin: 0 2rem;
       height: @h;
-      background: gray;
+      background: rgba(#000, .5);
       position: relative;
       overflow: hidden;
 
@@ -512,41 +535,85 @@ function canNext(isNext) {
     }
   }
 
-  .preview {
-    transition: opacity .3s;
-    position: fixed;
-    bottom: 20rem;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
+}
+</style>
+<style lang="less">
+@import "@/assets/less/index";
 
-    .preview-wrapper {
-      img {
-        transition: width .3s;
-        margin: 0 5rem;
-        width: 30rem;
-        height: 50rem;
-        background-color: black;
-        object-fit: contain;
-        border-radius: 3rem;
-        overflow: hidden;
+.preview {
+  transition: opacity .3s;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 
-        &.preview-img {
-          width: 40rem;
-        }
-      }
-    }
+  .preview-wrapper {
+    img {
+      transition: width .3s;
+      margin: 0 5rem;
+      width: 30rem;
+      height: 50rem;
+      background-color: black;
+      object-fit: contain;
+      border-radius: 3rem;
+      overflow: hidden;
 
-    .indicator {
-      margin-top: 10rem;
-      color: gray;
-
-      .index {
-        color: white;
+      &.preview-img {
+        width: 40rem;
       }
     }
   }
+
+  .indicator {
+    background: @footer-color;
+    width: 100%;
+    height: @footer-height;
+    color: gray;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .index {
+      color: white;
+    }
+  }
 }
+
+.album-toolbar {
+  position: absolute;
+  bottom: 0;
+  background: @footer-color;
+  width: 100%;
+  box-sizing: border-box;
+  height: @footer-height;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10rem;
+
+  @padding: 12rem;
+
+  .left {
+    height: 34rem;
+    background-color: gray;
+    border-radius: 6rem;
+    padding: 0 @padding;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .right {
+    .left;
+
+    .option {
+      margin: 0 5rem;
+    }
+  }
+
+}
+
 </style>
diff --git a/src/main.js b/src/main.js
index 8191d4e..3a9df6b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,14 +9,13 @@ import store from "./store";
 import mixin from "./utils/mixin";
 import VueLazyload from '@jambonn/vue-lazyload'
 import VConsole from 'vconsole';
+
 const vConsole = new VConsole();
 
 const app = Vue.createApp(App)
 app.config.globalProperties.$api = {...api}
 
-
 const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
-
 app.provide('mitt', mitt())
 app.mixin(mixin)
 app.use(VueLazyload, {
diff --git a/src/pages/slideHooks/common.js b/src/pages/slideHooks/common.js
index a9bbb41..faf36b5 100644
--- a/src/pages/slideHooks/common.js
+++ b/src/pages/slideHooks/common.js
@@ -36,13 +36,13 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
   return state.next
 }
 
-export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL) {
+export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL,notNextCb) {
   state.move.x = e.touches[0].pageX - state.start.x
   state.move.y = e.touches[0].pageY - state.start.y
 
   let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
 
-  if (!canNextCb?.(isNext)) return
+  if (!canNextCb?.(isNext, e)) return
 
   if (canSlide(state, judgeValue, type)) {
     nextCb?.()
@@ -58,6 +58,8 @@ export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type
     }
     Utils.$setCss(el, 'transition-duration', `0ms`)
     Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
+  }else {
+    notNextCb?.()
   }
 }
 
@@ -65,7 +67,7 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb, type = Sli
   let isHorizontal = type === SlideType.HORIZONTAL;
   let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
 
-  if (!canNextCb?.(isNext)) return
+  if (!canNextCb?.(isNext)) return notNextCb?.()
   if (state.next) {
     Utils.$stopPropagation(e)
     let endTime = Date.now()
@@ -80,11 +82,10 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb, type = Sli
       } else {
         state.localIndex--
       }
-      nextCb?.()
-    } else {
-      notNextCb?.()
+      return nextCb?.()
     }
   }
+  notNextCb?.()
 }
 
 export function slideReset(el, state, type, emit) {
diff --git a/src/pages/slideHooks/index.vue b/src/pages/slideHooks/index.vue
index 415a2b1..a54497d 100644
--- a/src/pages/slideHooks/index.vue
+++ b/src/pages/slideHooks/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="test-slide-wrapper">
+  <div class="test-slide-wrapper" id="slideHook">
     <H v-model:index="state.baseIndex">
       <SlideItem class=" gray">
         <H class="h" v-model:index="state.navIndex">
@@ -54,7 +54,7 @@ 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/SlideImgs";
+import SlideImgs from "../../components/slide/SlideAlbum";
 import BVideo from "../../components/slide/BVideo";
 
 import resource from "../../assets/data/resource.js";
@@ -235,6 +235,8 @@ function render(item, itemIndex, play,prefix) {
 </script>
 
 <style scoped lang="less">
+@import "@/assets/less/index";
+
 .test-slide-wrapper {
   font-size: 14rem;
   width: 100%;
diff --git a/src/pages/test/Test.vue b/src/pages/test/Test.vue
index fe64b81..2aaca7c 100644
--- a/src/pages/test/Test.vue
+++ b/src/pages/test/Test.vue
@@ -15,7 +15,7 @@
 
 import TestSlide from "./TestSlide";
 import SlideUser from "../../components/slide/SlideUser";
-import SlideImgs from "../../components/slide/SlideImgs";
+import SlideImgs from "../../components/slide/SlideAlbum";
 import TestImg from "./TestImg";
 import slideHooks from '../slideHooks'
 import {mat4} from "gl-matrix";
diff --git a/src/pages/test/TestSlide.vue b/src/pages/test/TestSlide.vue
index 4a02725..74b6e9a 100644
--- a/src/pages/test/TestSlide.vue
+++ b/src/pages/test/TestSlide.vue
@@ -30,7 +30,7 @@
 import Slide from "./slide.jsx";
 import SlideVideo from "../../components/slide/SlideVideo";
 import SlideUser from "../../components/slide/SlideUser";
-import SlideImgs from "../../components/slide/SlideImgs";
+import SlideImgs from "../../components/slide/SlideAlbum";
 import resource from "../../assets/data/resource.js";
 import CONST_VAR from "../../utils/const_var";
 import Dom from "../../utils/dom";
diff --git a/src/router/routes.js b/src/router/routes.js
index d993a80..b171e7b 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -67,10 +67,7 @@ import Uploader from "../pages/me/Uploader";
 import Slide from "../pages/slide/Slide";
 
 const routes = [
-  {
-    path: '/',
-    redirect: '/test'
-  },
+  {path: '/', redirect: '/test'},
   {path: '/slide', component: Slide},
   {path: '/test', component: Test},
   {path: '/test4', component: Test4},
diff --git a/src/utils/const_var.js b/src/utils/const_var.js
index 72e27ab..ddf4ec5 100644
--- a/src/utils/const_var.js
+++ b/src/utils/const_var.js
@@ -20,6 +20,18 @@ export default {
   }
 }
 export const SlideType = {
-  HORIZONTAL:0,
-  VERTICAL:1,
+  HORIZONTAL: 0,
+  VERTICAL: 1,
+}
+
+/*图集操作状态*/
+export const SlideAlbumOperationStatus = {
+  Normal: 'Normal',
+  Zooming: 'Zooming',
+  Detail: 'Detail',
+}
+/*图集播放状态*/
+export const SlideAlbumPlayStatus = {
+  HORIZONTAL: 0,
+  VERTICAL: 1,
 }