yx 4 gadi atpakaļ
vecāks
revīzija
7653db7ad6
1 mainītis faili ar 77 papildinājumiem un 120 dzēšanām
  1. 77 120
      src/components/floorList.vue

+ 77 - 120
src/components/floorList.vue

@@ -7,13 +7,14 @@
     <div class='floor-box'>
         <div class='floor-list'>
             <div class='icon-top' v-if='floorsArr.length>showNumber'>
-                <!-- :class='{disabled:currentFloorId == floorsArr[0].seq }' -->
-                <img v-repeat-click='increase' :class='{ disabled:currIndex === 0 }' v-if='showT' src='@/assets/imgs/iconBlackTop.png' alt />
-                <img :class='{ disabled:currIndex === 0 }' v-else src='@/assets/imgs/iconLightTop.png' alt />
-                <!-- <img :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else src='@/assets/imgs/iconLightTop.png' alt /> -->
+                <!-- @click='changeFloor(1,currIndex)' -->
+                <!-- @mousedown='mousedown' -->
+                <!-- @mouseup='mouseup' -->
+                <!-- v-repeat-click='increase' -->
+                <img v-if='parseInt(marginTop) !== 0' v-repeat-click='increase' src='@/assets/imgs/iconBlackTop.png' alt />
+                <img class='disabled' v-else src='@/assets/imgs/iconLightTop.png' alt />
             </div>
             <div class='floor-out'>
-                <!-- :style='{ marginTop : marginTop }' -->
                 <!--  放开marginTop样式  -->
                 <div class='floor-center' :style='{ marginTop : marginTop }'>
                     <div
@@ -26,16 +27,9 @@
                 </div>
             </div>
             <div class='icon-bottom' v-if='floorsArr.length>showNumber'>
-                <!-- :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }' -->
-                <img
-                    :class='{disabled:currIndex === floorsArr.length - 1 }'
-                    v-if='showB'
-                    v-repeat-click='decrease'
-                    src='@/assets/imgs/iconBlackBottom.png'
-                    alt
-                />
-                <img :class='{ disabled:currIndex === floorsArr.length - 1 }' v-else src='@/assets/imgs/iconLightBottom.png' alt />
-                <!-- <img :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }' v-else src='@/assets/imgs/iconLightBottom.png' alt /> -->
+                <!-- v-repeat-click='decrease' -->
+                <img v-if='parseInt(marginTop) !== marginTopMax' v-repeat-click='decrease' src='@/assets/imgs/iconBlackBottom.png' alt />
+                <img class='disabled' v-else src='@/assets/imgs/iconLightBottom.png' alt />
             </div>
         </div>
     </div>
@@ -65,10 +59,12 @@ export default {
             },
             currentFloorId: null,
             marginTop: 0,
+            marginTopMax: 0,
             startTime: '',
             endTime: '',
-            showNumber: 8, //需要暂时的楼层数
-            currIndex: 0 //当前楼层在 楼层数组中的下标
+            showNumber: 8, //需要暂时的楼层数   //TODO:
+            height: 32, //一个楼层的高度
+            currIndex: 0 //当前楼层在 楼层数组中的下标,上下箭头使用
         }
     },
     props: {
@@ -87,15 +83,30 @@ export default {
         this.init()
     },
     methods: {
-        // 楼层向上
+        mousedown() {
+            this.startTime = new Date()
+        },
+        mouseup() {
+            this.endTime = new Date()
+            if (this.endTime - this.startTime < 200) {
+                console.log(11111111)
+                this.changeFloor(1, this.currIndex)
+                return false
+            }
+        },
         increase() {
-            this.changeFloor(1, this.currIndex)
+            console.log('increase')
+            let marginTop = parseInt(this.marginTop)
+            marginTop < 0 && this.changeFloor(1, this.currIndex)
         },
-        // 楼层向下
         decrease() {
-            this.changeFloor(-1, this.currIndex)
+            console.log('decrease')
+            let marginTop = Math.abs(parseInt(this.marginTop)),
+                marginTopMax = Math.abs(parseInt(this.marginTopMax))
+            marginTop < marginTopMax && this.changeFloor(-1, this.currIndex)
         },
         init() {
+            // console.log('init')
             if (!this.floorsArr.length) {
                 return false
             }
@@ -110,6 +121,7 @@ export default {
             if (index === -1) {
                 this.currentFloorId = this.floorIdArr[0]
             }
+            this.marginTopMax = -(this.floorIdArr.length - this.showNumber) * this.height
             this.changeFloor(0, index)
         },
         /**
@@ -117,10 +129,8 @@ export default {
          * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
          * @description 点击图例下方的,上下切换按钮
          */
-        changeFloors() {
-            this.changeFloor(-1, this.currIndex)
-        },
         changeFloor(flag, index) {
+            console.log('changeFloor')
             const len = this.floorIdArr.length
             // let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
             this.currIndex = index
@@ -128,84 +138,17 @@ export default {
             if (flag === 1) {
                 index--
                 this.currIndex = index
-                // 点击上下箭头,不进行选中的楼层 状态更新
-                // this.currentFloorId = this.floorIdArr[index]
             } else if (flag === -1) {
                 //点击下箭头
                 index++
                 this.currIndex = index
-                // 点击上下箭头,不进行选中的楼层 状态更新
-                // this.currentFloorId = this.floorIdArr[index]
             }
             // FEAT:  点击上下箭头,不触发cookie更改 , 只有初始化时,才进行选中的楼层 状态更新
             if (flag === 0) {
                 this.handleCookie()
-                // 点击楼层,处理上下箭头禁用逻辑
-                this.handleUpDownStatus(index, len)
-            } else {
-                // 点击上下箭头,处理上下按钮禁用逻辑
-                this.handleUpDownStatus1(index, len)
             }
-            // 楼层位置动画处理
             this.handlePosition(flag, index, len)
         },
-
-        /**
-         * @description 点击楼层时, 处理上下按钮禁用逻辑
-         * @param { Number } index 当前楼层在floorIdArr中的下标
-         * @param { Number } len    floorIdArr的长度
-         */
-        handleUpDownStatus(index, len) {
-            switch (index) {
-                // 第一条的上箭头禁用
-                case 0:
-                    this.currentFloorId = this.floorIdArr[0]
-                    this.showT = false
-                    this.showB = true
-                    break
-                //  最后一条的 下箭头设置为禁用
-                case len - 1:
-                    this.currentFloorId = this.floorIdArr[len - 1]
-                    this.showT = true
-                    this.showB = false
-                    break
-                // 默认都可以点击
-                default:
-                    this.showT = true
-                    this.showB = true
-                    break
-            }
-        },
-        /**
-         * @description 点击上下箭头时,处理上下按钮禁用逻辑
-         * @param { Number } index 当前楼层在floorIdArr中的下标
-         * @param { Number } len    floorIdArr的长度
-         */
-        handleUpDownStatus1(index, len) {
-            switch (index) {
-                // 第一条的上箭头禁用
-                case 0:
-                    // this.currentFloorId = this.floorIdArr[0]
-                    this.showT = false
-                    this.showB = true
-                    break
-                //  最后一条的 下箭头设置为禁用
-                case len - 1:
-                    // this.currentFloorId = this.floorIdArr[len - 1]
-                    this.showT = true
-                    this.showB = false
-                    break
-                // 默认都可以点击
-                default:
-                    this.showT = true
-                    this.showB = true
-                    break
-            }
-        },
-        /**
-         * @name handleCookie
-         * @description cookie数据处理
-         */
         handleCookie() {
             // return true
             let currentFloor = this.floorsArr.filter(item => item.seq == this.currentFloorId)[0]
@@ -221,14 +164,13 @@ export default {
         },
         /**
          * @name tabFloor
-         * @param {Object} 选中的楼层信息
-         * @param {Number} 楼层信息在floorsArr数组中的位置
+         * @param {Object} item 选中的楼层信息
+         * @param {Number} index 楼层信息在floorsArr数组中的位置
          */
         tabFloor(item, index) {
             this.currentFloorId = this.floorIdArr[index]
             this.handleCookie()
-            this.handlePosition(1, index, this.floorIdArr.length)
-            this.handleUpDownStatus(index, this.floorIdArr.length)
+            this.handlePosition(2, index, this.floorIdArr.length)
             this.viewLengend()
         },
         viewLengend() {
@@ -240,33 +182,43 @@ export default {
         },
         /**
          * @description 楼层位置动画处理
-         * @param flag 是否启用动画时长 0:不启用  其他 启动
+         * @param flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理 2:直接点击楼层
          * @param index 楼层 在floorIdArr中的下标
          * @param len floorIdArr长度
          */
         handlePosition(flag, index, len) {
-            // console.log('===============')
-            // console.log(`flag, index, len`,flag, index, len)
-            // console.log( this.marginTop)
-            //楼层位置处理
-            // 页面显示5条,当第五条以上,进行marginTop修改
-            // index从0开始
-            // TODO: 需要修改可以修改这里,配置页面样式,修改showNumber和height
-            // FEAT: 使用8条楼层
-            let showNumber = this.showNumber, //页面中展示的楼层条数
-                height = 39 //一个楼层的div标签高度
-            if (index >= showNumber - 1) {
-                if (index < len - 1) {
-                    this.marginTop = -height * (index - (showNumber - 2)) + 'px'
-                } else if ((index = len - 1)) {
-                    this.marginTop = -height * (index - (showNumber - 1)) + 'px'
-                }
-            } else {
-                // 前 showNumber 条的margin-top设置为0
-                this.marginTop = 0
+            // 取出当前 marginTop
+            let marginTop = parseInt(this.marginTop)
+            switch (flag) {
+                // 初始化进入页面,位置处理
+                case 0:
+                // 直接点击楼层,滚动楼层
+                case 2:
+                    // 将 marginTop 设置为对应的index 应滚动的距离
+                    marginTop = -index * this.height
+                    // marginTop 过大时,取最大值marginTopMax
+                    if (Math.abs(marginTop) >= Math.abs(this.marginTopMax)) {
+                        marginTop = parseInt(this.marginTopMax)
+                    }
+                    // marginTop>0时,取0,防止楼层上边出现空白
+                    marginTop = marginTop >= 0 ? 0 : marginTop
+                    // index为0,marginTop设置为0
+                    index == 0 && (marginTop = 0)
+                    // index为最后一个,设置为最大marginTopMax
+                    index == len - 1 && (marginTop = parseInt(this.marginTopMax))
+                    this.marginTop = marginTop + 'px'
+                    break
+                //  1:向上滚动楼层
+                case 1:
+                    this.marginTop = marginTop + this.height + 'px'
+                    break
+                // -1向下滚动楼层
+                case -1:
+                    this.marginTop = marginTop + this.height * -1 + 'px'
+                    break
+                default:
+                    break
             }
-            // console.log('over', this.marginTop)
-            // console.log('===============')
         }
     }
 }
@@ -276,7 +228,7 @@ export default {
     position: fixed;
     right: 32px;
     top: 172px;
-    z-index: 2;
+    z-index: 99;
     .floor-list {
         width: 44px;
         // height: 212px;
@@ -287,11 +239,16 @@ export default {
         padding: 6px 4px;
         text-align: center;
         .floor-out {
-            max-height: 300px;
+            height: 300px; //TODO:
             overflow: hidden;
             position: relative;
+            overflow-y: auto;
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
             .floor-center {
-                transition: all linear 0.8s;
+                transition: all linear 0.5s;
                 .floor-item {
                     line-height: 28px;
                     height: 28px;