From 03bda164b6ed62f3b29870e31b01840aa9551a87 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 26 Mar 2022 18:50:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/icon/newicon/eim.webp | Bin 1362 -> 0 bytes
 src/assets/img/icon/newicon/el1.webp | Bin 1698 -> 0 bytes
 src/pages/slide/IndicatorHome.vue    |  97 ++++++++++++++++++++++-----
 src/pages/slide/Slide.vue            |  10 +--
 src/pages/slide/SlideHorizontal.vue  |  18 ++---
 src/pages/slide/SlideVertical.vue    |  33 ++++++---
 src/store/index.js                   |   4 +-
 src/utils/mixin.js                   |  16 +++++
 8 files changed, 135 insertions(+), 43 deletions(-)
 delete mode 100644 src/assets/img/icon/newicon/eim.webp
 delete mode 100644 src/assets/img/icon/newicon/el1.webp

diff --git a/src/assets/img/icon/newicon/eim.webp b/src/assets/img/icon/newicon/eim.webp
deleted file mode 100644
index 5b7b59f9a7e75a822785ce17fb8e2398e16963ec..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1362
zcmV-Y1+Ds0Nk&FW1pok7MM6+kP&il$0000G0001e001}u06|PpNO%AM00CeWNm8WN
zF@YwOj3a#D1sfpXhF|S>BZ6Vuwqc~U+YRyuIt`vn>kwPX9`w{w$C>OwtQ}~L7v7=z
z`QNcdNmjX3lTrtp6gt}AY&^5cg-vN};J5$4+u)bpi|DP4-U;cA6yAsFZ5+M}z&8>2
z9`pfQnBY6009H^qAglxc0B{!oodGI-0672x05m1A0~QlQTwX4io3vm{(O%l0FdxG|
zw|>TZ#(!@8fcGcoGt>d-0s86bz3h|wq5F63jhKzvhxiW%`q7^y`d$!rmj4sJ;gqqD
z|1;u|vR<KI_B_~qN?>bA$P`EAC4io@7a(=;L?xEv-(9CyW-nkn(+C8*Ee6OSdJ8rK
zI|1%=^7D#7wWkn1%Q)AOqZ)&Kn>TtroA!o2bPU+PNkbjnm<}CniyKP=myGp4LeLzj
zxNT%UKmh*e+8h@0H?&sj6A5LwrAit_i9bL1W%!W0N9ob<`WDCa)dm#~)T$PLdehu&
zOzqYbIpxg@!k3`$y~8KuY`~1y{dxT#wISS&v2BrD0;THjoi>vPgHc+cx+obPcfEPb
z5ehYZcSh(Na;vD2AI>>mD*xt#N&C#eR5`zSc(!sfR&>pa8DKi1W$}&~?6M>0f^`In
zPgd(aloB7#pSZmH<gY`X(=O;wFd=QiP~67ee6AGf$GnSf_jvh7iAmwSXB5Hzp}=|Z
znD~z5^F_9lv_E+vV6;Z#%qoCAC&196gkbFpga0@WKFvr5N*n3%<2yp>FOuSqIGm%s
zbaQVb@`aj-zNMk10j{A(vD4{`%vP8baDkN>yH{+mYvrt;FB(fHLNVUQ$EZno=kphP
ze>y+jAqX@Q59-{ArVpI%dbieZ<A?+IqCV@Cco|88Al=@sYyz(UD-W}{x1KxOPFSo)
zR>$t>jYFej((Oo^(V<QNU@%R>by2YRGl^UL#GVHe+zH_XG62Ba*)dFOEPv`l>!T>k
zjrqz)(>9MswPo;dl6d5*;><n7*%-}b_gjJ87oNR)%0EBPHi)j(ajLCdvGPY5U7sSK
zV{_y+4>R~K?!sTWqtos4WPiy*yQi>KpAj8zGylst@OH#%@Fm;iT(K$aEyHq3WTP_6
zJEPCgiMe-<vF<4QiM4E{n4uq`0qD|$w782C$#M5I-SA0~8gn;Jq;w^g_Oj%e^3O~^
z2Z!7!<Peb}>B?(H3B1lteveI+kbKM`4Zal}W6+p1!LRtcj#7*Wwm~X%!w>d01wEx=
z<2X$fu^7>-0%ohBbNs%-;oCNjTLk%0RKPQN-*L2*rNYuZY^=Hb-50PCn1aa`%#|{$
zIssEsDjxh%;P|pZP#!~n%iZgEt9p!7iF7;3MNXv91aS6&e98)V?t~ipAh8vzaof;M
zW5eZQoK<8X=k{NdRsk$rLU5Ef@Jzj~;V`hMt#E9*?F-~W-l0zXjJj5iBxj!@B|{`b
zd_9Jbgj^BH`PC->tNo-?2BY|*k~UKX*8vvkHI3`_vNwcwP&YTp5T97@N*_@xcgTMx
z#dXk8nHln?K9WIV?hg5UMI|k^iTp>{IM3|%N9Ra6*G680D>lOgO0ut3ZTJ88pWX5i
zXg&FTPMXY94w0s5t5&~IBM95KpTpm+yWb#51@g<rUF^k?Z^l*8Ina9DQdg}dQgfjm
zqze{<pv$6+pZVb{y?AdxK^Z)CC~?ShE;~5b0r|Nd&8TtGt>=9;4dZ>VRMylBW%Td4
UK*hEmZjD@-b*&9YCH#c|05R^T9RL6T

diff --git a/src/assets/img/icon/newicon/el1.webp b/src/assets/img/icon/newicon/el1.webp
deleted file mode 100644
index 3f2252fa064dddaf38e18f105286ee37b00373d4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1698
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

diff --git a/src/pages/slide/IndicatorHome.vue b/src/pages/slide/IndicatorHome.vue
index 47910f2..8100210 100644
--- a/src/pages/slide/IndicatorHome.vue
+++ b/src/pages/slide/IndicatorHome.vue
@@ -3,24 +3,29 @@
     <transition name="fade">
       <div class="mask" v-if="open" @click="open = false"></div>
     </transition>
-    <div class="notice"><span>下拉刷新内容</span></div>
-    <div class="toolbar" ref="toolbar">
-      <div class="left" @click="$nav('/home/live')">直播</div>
+    <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
+    <div class="toolbar" ref="toolbar" :style="toolbarStyle">
+      <img src="../../assets/img/icon/scan.png"
+           class="search"
+           @click="$nav('/home/live')"
+           style="margin-top: .5rem;">
       <div class="tab-ctn">
         <div class="tabs" ref="tabs">
           <div class="tab" :class="tabOneClass" @click.stop="change(0)">
             <span>同城</span>
-            <img v-show="index === 0" src="../../assets/img/icon/arrow-up-white.png" alt="">
+            <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>
+            <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>
         </div>
         <div class="indicator" ref="indicator"></div>
       </div>
-      <img src="../../assets/img/icon/search-gray.png" alt=""
+      <img v-hide="!loading" src="../../assets/img/icon/search-light.png"
+           class="search"
            @click="$nav('/home/search')"
            style="margin-top: .5rem;">
     </div>
@@ -33,12 +38,13 @@
       <div class="l-button" :class="{active:type === 2}" @click="toggleType(2)">热点</div>
     </div>
 
-    <Loading class="loading" style="width: 4rem;" :is-full-screen="false"/>
+    <Loading :style="loadingStyle" class="loading" style="width: 4rem;" :is-full-screen="false"/>
   </div>
 </template>
 <script>
 import Loading from "../../components/Loading";
 import bus from "../../utils/bus";
+import {mapState} from "vuex";
 
 export default {
   name: "IndicatorHome",
@@ -63,25 +69,72 @@ export default {
       lefts: [],
       indicatorSpace: 0,
       open: false,
-      type: 1
+      loading: false,
+      type: 1,
+      moveY: 0
     }
   },
   computed: {
+    ...mapState(['judgeValue', 'homeRefresh']),
     tabOneClass() {
       return {active: this.index === 0, open: this.open}
+    },
+    transform() {
+      return `translate3d(0, ${this.moveY - this.judgeValue > this.homeRefresh ? this.homeRefresh : this.moveY - this.judgeValue}px, 0)`
+    },
+    toolbarStyle() {
+      if (this.loading) {
+        return {opacity: 1, 'transition-duration': '300ms', transform: `translate3d(0, 0, 0)`,}
+      }
+      if (this.moveY) {
+        return {
+          opacity: 1 - (this.moveY - this.judgeValue) / (this.homeRefresh / 2),
+          transform: this.transform
+        }
+      }
+      return {opacity: 1, 'transition-duration': '300ms', transform: `translate3d(0, 0, 0)`,}
+    },
+    noticeStyle() {
+      if (this.loading) {
+        return {opacity: 0,}
+      }
+      if (this.moveY) {
+        return {
+          opacity: (this.moveY - this.judgeValue) / (this.homeRefresh / 2) - .5,
+          transform: this.transform
+        }
+      }
+      return {opacity: 0,}
+    },
+    loadingStyle() {
+      if (this.loading) {
+        return {opacity: 1, 'transition-duration': '300ms',}
+      }
+      if (this.moveY) {
+        return {
+          opacity: (this.moveY - this.judgeValue) / (this.homeRefresh / 2) - .5,
+          transform: this.transform
+        }
+      }
     }
   },
-  watch: {
-    // index(newVal) {
-    //   this.end()
-    // }
-  },
   created() {
   },
   mounted() {
     this.initTabs()
-    bus.on(this.name + '-move', this.move)
+    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)
+    bus.on(this.name + '-loading', () => {
+      console.log('loading')
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 3000)
+    })
   },
   methods: {
     toggleType(type) {
@@ -118,9 +171,10 @@ export default {
       this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
       this.$setCss(this.indicatorRef, 'left',
           this.lefts[this.index] -
-          e.x.distance / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px')
+          e / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px')
     },
     end(index) {
+      this.moveY = 0
       this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
       this.$setCss(this.indicatorRef, 'left', this.lefts[index] + 'px')
       setTimeout(() => {
@@ -190,7 +244,7 @@ export default {
           color: rgb(156, 158, 165);
           position: relative;
 
-          img {
+          .tab1-img {
             position: absolute;
             @width: 1rem;
             width: @width;
@@ -200,8 +254,15 @@ export default {
             margin-top: .7rem;
           }
 
+          .tab2-img {
+            position: absolute;
+            height: 1.5rem;
+            left: 2.4rem;
+            top: -.5rem;
+          }
+
           &.open {
-            img {
+            .tab1-img {
               transform: rotate(180deg);
             }
           }
@@ -223,6 +284,10 @@ export default {
         border-radius: .5rem;
       }
     }
+
+    .search {
+      width: 2rem;
+    }
   }
 
   .toggle-type {
diff --git a/src/pages/slide/Slide.vue b/src/pages/slide/Slide.vue
index f22ce64..0ebe8c0 100644
--- a/src/pages/slide/Slide.vue
+++ b/src/pages/slide/Slide.vue
@@ -34,9 +34,9 @@
                 <span>住宿</span>
               </div>
             </div>
-            <SlideVertical>
-              <div class="item" style="background: tan">
-                <p style="padding: 1rem;" v-for="i in 50">
+            <SlideVertical name="main">
+              <div class="item">
+                <p style="padding: 1rem;" v-for="i in 5">
                   r2222222222222222222222222222222222222222222222222222222
                 </p>
               </div>
@@ -60,14 +60,14 @@
                 </div>
               </div>
             </div>
-            <SlideVertical>
+            <SlideVertical name="main">
               <div class="item">r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1</div>
               <div class="item">r2222222222222222222222222222222222222222222222222222222</div>
               <div class="item">r333333333333333333333333333333333333333333333333333333</div>
             </SlideVertical>
           </div>
           <div class="item">
-            <SlideVertical>
+            <SlideVertical name="main">
               <div class="item">r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1r1</div>
               <div class="item">r2222222222222222222222222222222222222222222222222222222</div>
               <div class="item">r333333333333333333333333333333333333333333333333333333</div>
diff --git a/src/pages/slide/SlideHorizontal.vue b/src/pages/slide/SlideHorizontal.vue
index 7575111..2619e21 100644
--- a/src/pages/slide/SlideHorizontal.vue
+++ b/src/pages/slide/SlideHorizontal.vue
@@ -1,5 +1,6 @@
 <script lang="jsx">
 import bus from "../../utils/bus";
+import {mapState} from "vuex";
 
 export default {
   props: {
@@ -25,9 +26,11 @@ export default {
       startY: 0,
       needCheck: true,
       next: false,
-      judgeValue: 20
     }
   },
+  computed: {
+    ...mapState(['judgeValue'])
+  },
   mounted() {
     this.wrapper = this.$refs.wrapper
     this.total = this.wrapper.children.length
@@ -59,9 +62,7 @@ export default {
       this.checkDirection(e)
 
       if (this.next) {
-        bus.emit(this.name + '-move', {
-          x: {distance: this.moveX, isRight},
-        })
+        bus.emit(this.name + '-moveX', this.moveX)
         this.$stopPropagation(e)
         this.$setCss(this.wrapper, 'transform',
             `translate3d(${this.getDistance()
@@ -74,12 +75,7 @@ export default {
       if (!this.needCheck) return
       if (Math.abs(this.moveX) > this.judgeValue || Math.abs(this.moveY) > this.judgeValue) {
         let angle = (Math.abs(this.moveX) * 10) / (Math.abs(this.moveY) * 10)
-        if (angle > 1) {
-          this.next = true
-          // console.log('横划')
-        } else {
-          // console.log('竖划')
-        }
+        this.next = angle > 1;
         // console.log(angle)
         return this.needCheck = false
       }
@@ -104,12 +100,12 @@ export default {
       this.$emit('update:index', this.lIndex)
 
       this.reset()
-      bus.emit(this.name + '-end', this.lIndex)
     },
     reset() {
       this.moveX = 0
       this.next = false
       this.needCheck = true
+      bus.emit(this.name + '-end', this.lIndex)
     },
     getDistance() {
       return -this.lIndex * this.wrapperWidth
diff --git a/src/pages/slide/SlideVertical.vue b/src/pages/slide/SlideVertical.vue
index d28c6cc..3106e4d 100644
--- a/src/pages/slide/SlideVertical.vue
+++ b/src/pages/slide/SlideVertical.vue
@@ -1,5 +1,14 @@
 <script lang="jsx">
+import bus from "../../utils/bus";
+import {mapState} from "vuex";
+
 export default {
+  props: {
+    name: {
+      type: String,
+      default: () => ''
+    },
+  },
   data() {
     return {
       wrapper: null,
@@ -13,9 +22,11 @@ export default {
       startY: 0,
       needCheck: true,
       next: false,
-      judgeValue: 20
     }
   },
+  computed: {
+    ...mapState(['judgeValue','homeRefresh'])
+  },
   mounted() {
     this.wrapper = this.$refs.wrapper
     this.total = this.wrapper.children.length
@@ -29,14 +40,18 @@ export default {
       this.startY = e.touches[0].pageY
     },
     touchMove(e) {
-      console.log('move',e.touches[0].pageY)
       this.moveX = e.touches[0].pageX - this.startX
       this.moveY = e.touches[0].pageY - this.startY
 
       let isDown = this.moveY < 0
+      this.checkDirection(e)
+
+      if (this.index === 0 && !isDown && this.next) {
+        bus.emit(this.name + '-moveY', this.moveY)
+      }
+
       if ((this.index === 0 && !isDown) || (this.index === this.total - 1 && isDown)) return
 
-      this.checkDirection(e)
 
       if (this.next) {
         this.$stopPropagation(e)
@@ -55,12 +70,7 @@ export default {
       }
       if (Math.abs(this.moveX) > this.judgeValue || Math.abs(this.moveY) > this.judgeValue) {
         let angle = (Math.abs(this.moveX) * 10) / (Math.abs(this.moveY) * 10)
-        if (angle > 1) {
-          // console.log('横划')
-        } else {
-          this.next = true
-          // console.log('竖划')
-        }
+        this.next = angle <= 1;
         // console.log(angle)
         return this.needCheck = false
       }
@@ -68,6 +78,9 @@ export default {
     },
     touchEnd(e) {
       let isDown = this.moveY < 0
+      if (this.index === 0 && !isDown && this.moveY > (this.homeRefresh + this.judgeValue)) {
+        bus.emit(this.name + '-loading')
+      }
       let next = true
       if ((this.index === 0 && !isDown) || (this.index === this.total - 1 && isDown)) next = false
 
@@ -88,12 +101,12 @@ export default {
       this.moveX = 0
       this.next = false
       this.needCheck = true
+      bus.emit(this.name + '-end', this.index)
     },
     getDistance() {
       return -this.index * this.wrapperHeight
     },
   },
-
   render(createElement, context) {
     return (
         <div className="slide">
diff --git a/src/store/index.js b/src/store/index.js
index ef77733..2ffb994 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -42,7 +42,9 @@ const store = Vuex.createStore({
       "is_private": 1
     },
     friends: resource.users,
-    excludeRoutes: []
+    excludeRoutes: [],
+    judgeValue: 20,
+    homeRefresh: 60,
   },
   mutations: {
     setUserinfo(store, val) {
diff --git a/src/utils/mixin.js b/src/utils/mixin.js
index e541756..ce2f778 100644
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@@ -93,6 +93,22 @@ export default {
         el.addEventListener("touchend", cancel);
         el.addEventListener("touchcancel", cancel);
       }
+    },
+    hide: {
+      beforeMount: function (el, binding, vNode) {
+        if (binding.value) {
+          el.style.opacity = 1
+        } else {
+          el.style.opacity = 0
+        }
+      },
+      updated: function (el, binding, vNode) {
+        if (binding.value) {
+          el.style.opacity = 1
+        } else {
+          el.style.opacity = 0
+        }
+      }
     }
   },
 }
\ No newline at end of file