Kaynağa Gözat

楼层组件修改: 点击上下箭头,只进行楼层列表 marginTop的修改
不进行楼层选中

yunxing 4 yıl önce
ebeveyn
işleme
506d4a4a62
1 değiştirilmiş dosya ile 76 ekleme ve 25 silme
  1. 76 25
      src/components/floorList.vue

+ 76 - 25
src/components/floorList.vue

@@ -6,21 +6,24 @@
 <template>
     <div class='floor-box'>
         <div class='floor-list'>
-            <div class='icon-top' v-if='floorsArr.length>8'>
+            <div class='icon-top' v-if='floorsArr.length>showNumber'>
+                    <!-- :class='{disabled:currentFloorId == floorsArr[0].seq }' -->
                 <img
-                    :class='{disabled:currentFloorId == floorsArr[0].seq }'
+                    :class='{ disabled:currIndex === 0 }'
                     v-if='showT'
-                    @click='changeFloor(1)'
+                    @click='changeFloor(1,currIndex)'
                     @mousedown='mousedown'
                     @mouseup='mouseup'
                     src='@/assets/imgs/iconBlackTop.png'
                     alt
                 />
-                <img :class='{disabled:currentFloorId == floorsArr[0].seq }' v-else src='@/assets/imgs/iconLightTop.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 /> -->
             </div>
             <div class='floor-out'>
                 <!-- :style='{ marginTop : marginTop }' -->
-                <div class='floor-center'>
+                <!--  放开marginTop样式  -->
+                <div class='floor-center' :style='{ marginTop : marginTop }'>
                     <div
                         class='floor-item'
                         :class='item.seq == currentFloorId?"isActive":""'
@@ -30,15 +33,17 @@
                     >{{item.code}}</div>
                 </div>
             </div>
-            <div class='icon-bottom' v-if='floorsArr.length>8'>
+            <div class='icon-bottom' v-if='floorsArr.length>showNumber'>
+                    <!-- :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }' -->
                 <img
-                    :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }'
+                    :class='{disabled:currIndex === floorsArr.length - 1 }'
                     v-if='showB'
-                    @click='changeFloor(-1)'
+                    @click='changeFloor(-1,currIndex)'
                     src='@/assets/imgs/iconBlackBottom.png'
                     alt
                 />
-                <img :class='{disabled:currentFloorId == floorsArr[floorsArr.length-1].seq }' v-else src='@/assets/imgs/iconLightBottom.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 /> -->
             </div>
         </div>
     </div>
@@ -64,7 +69,9 @@ export default {
             currentFloorId: null,
             marginTop: 0,
             startTime: '',
-            endTime: ''
+            endTime: '',
+            showNumber: 8,   //需要暂时的楼层数
+            currIndex:  0,    //当前楼层在 楼层数组中的下标
         }
     },
     props: {
@@ -93,6 +100,7 @@ export default {
             }
         },
         init() {
+            // console.log('init')
             if (!this.floorsArr.length) {
                 return false
             }
@@ -107,37 +115,49 @@ export default {
             if (index === -1) {
                 this.currentFloorId = this.floorIdArr[0]
             }
-            this.changeFloor(0)
+            this.changeFloor(0,index)
         },
         /**
          * @name changeFloor
          * @param {Number} flag 1:向上滚动楼层, -1向下滚动 , 0:进入页面初始化时,执行位置处理
          * @description 点击图例下方的,上下切换按钮
          */
-        changeFloor(flag) {
+        changeFloor(flag,index) {
+            // console.log('changeFloor')
             const len = this.floorIdArr.length
-            let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
+            // let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
+            this.currIndex = index
             // 点击上箭头
             if (flag === 1) {
                 index--
-                this.currentFloorId = this.floorIdArr[index]
+                this.currIndex = index
+                // 点击上下箭头,不进行选中的楼层 状态更新 
+                // this.currentFloorId = this.floorIdArr[index]
             } else if (flag === -1) {
                 //点击下箭头
                 index++
-                this.currentFloorId = this.floorIdArr[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.handleCookie()
             // 楼层位置动画处理
             this.handlePosition(flag, index, len)
-            // 处理上下按钮禁用逻辑
-            this.handleUpDownStatus(index, len)
+          
         },
 
         /**
-         * @name handleUpDownStatus
+         * @description 点击楼层时, 处理上下按钮禁用逻辑
          * @param { Number } index 当前楼层在floorIdArr中的下标
          * @param { Number } len    floorIdArr的长度
-         * @description 处理上下按钮禁用逻辑
          */
         handleUpDownStatus(index, len) {
             switch (index) {
@@ -161,6 +181,32 @@ export default {
             }
         },
         /**
+         * @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数据处理
          */
@@ -203,15 +249,16 @@ export default {
          * @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
-            let showNumber = 5, //页面中展示的楼层条数
-                height = 32, //一个楼层的div标签高度
-                timer = 500 //动画时长
-            // flag 为0时,timer设置为0
-            flag === 0 && (timer = 0)
+            // FEAT: 使用8条楼层
+            let showNumber = this.showNumber, //页面中展示的楼层条数
+                height = 32 //一个楼层的div标签高度
             if (index >= showNumber - 1) {
                 if (index < len - 1) {
                     this.marginTop = -height * (index - (showNumber - 2)) + 'px'
@@ -222,6 +269,8 @@ export default {
                 // 前 showNumber 条的margin-top设置为0
                 this.marginTop = 0
             }
+            // console.log('over', this.marginTop)
+            // console.log('===============')
         }
     }
 }
@@ -276,6 +325,7 @@ export default {
         }
 
         .icon-top {
+            cursor: pointer;
             height: 18px;
             img {
                 width: 18px;
@@ -284,6 +334,7 @@ export default {
             }
         }
         .icon-bottom {
+            cursor: pointer;
             height: 18px;
             img {
                 width: 18px;