移动销售重做楼栋选择页面

src/assets/css/swiper_table.less

@@ -71,6 +71,7 @@
         text-align:center;
         border-top: 1px solid #ccc;
         border-bottom: 1px solid #ccc;
+        border-right: 1px solid #ccc;
         background: white;
         span{
           transition:width .3s ease;
@@ -92,6 +93,42 @@
         }
       }
     }
+
+    #topNav1 {
+      width: 100%;
+      .swiper-wrapper{
+        .swiper-slide {
+          padding: 0 5px;
+          /*letter-spacing:2px;*/
+          width:@nav_height;
+          height: 35px;
+          line-height: 35px;
+          text-align:center;
+          border-top: 1px solid #ccc;
+          border-bottom: 1px solid #ccc;
+          border-right: 1px solid #ccc;
+          background: white;
+          span{
+            transition:width .3s ease;
+            display:block;
+          }
+        }
+        .swiper-slide1 {
+          padding: 0 5px;
+          /*letter-spacing:2px;*/
+          width:@nav_height;
+          text-align:center;
+          height: 35px;
+          line-height: 35px;
+          border-bottom: 1px solid #ccc;
+          flex-shrink: 0;
+          span{
+            transition:width .3s ease;
+            display:block;
+          }
+        }
+      }
+    }
   }
 }
 

src/components/getsabuildingstruct.vue

@@ -30,49 +30,49 @@
           <span >{{keyValue}}</span> 
         </van-col>
     </van-row>
-   
-    <div  ref="wrapper" :style="'width:'+width+'px;'">
-      <table border="1" cellspacing="0" :style="'width:'+getWidth+'px;'">
-          <tr>
-            <td rowspan="2" class="width">楼层</td>
-            <td class="width">单元</td>
-            <td>
-              <template v-if="data!=null&&data.Chambers!=null&&data.Chambers.length>1">
-                <van-col  class="border3"  :span="span" v-for="item in data.Chambers" :key="item.cName" >{{item.cName}}</van-col>
-              </template>
-            </td>
-          </tr>
-           <tr> 
-            <td>室号</td>
-            <td >
-              <template v-if="data!=null&&data.Chambers!=null">                
-                <van-col  class="border3"  :span="span" v-for="item in data.Chambers" :key="item.cName" >
-                    <div  :style="'width:'+CountSpan(data.Chambers.length,item.SubChambers.length)+'px;display:inline-block;'"   class="border3"  v-for="item1 in item.SubChambers" :key="item1.subcName">{{item1.subcName}}</div>
-                </van-col>
-              </template>
-            </td>
-          </tr>
-          <template v-if="data!=null&&data.Rooms!=null">
-          <tr v-for="item1 in data.Floors" :key="item1.fName">
-            <td colspan="2">{{item1.fName}}</td>
-            <td >
-              <template v-if="data!=null&&data.Rooms!=null">                
-                    <van-col  class="border3"  :span="span2" v-for="item in filterArray(data.Rooms,item1.fName)"  :key="item.rID" :style="'background:'+item.rColor+';'">
-                      <router-link :to="{path:'/getsaroominfo',query:{id:item.rID}}"  class="blackColor">{{item.rName}}</router-link> 
-                    </van-col>                
-              </template>
-            </td>
-          </tr>
+      
+     <van-col span="24" >
+        <van-col span="5"  style="padding-top:15px;padding-bottom:15px;">单元</van-col>
+        <van-col span="19" >
+          <template v-if="data!=null&&data.Chambers!=null&&data.Chambers.length>0">
+              <van-col   :span="4" v-for="(item,index) in data.Chambers" :key="item.cName"  >                
+                 <van-button type="default"  @click="showRoom(item.cName,index)"  :class="active==index?'active':''" style="width:70px;" >{{item.cName=='-'?'默认':item.cName}}</van-button>
+              </van-col>
+          </template>
+        </van-col>
+      </van-col>
+
+      <div class="topNav_all" style="width:100%;">
+        <div class="topNav_left">
+          <template v-if="data!=null&&data.Floors!=null&&data.Floors.length>0">  
+          <div class="topNav_title"  v-for="item in data.Floors" :key="item.fName"> 
+                <span class="fix-active">楼层{{item.fName}}</span> 
+          </div>
           </template>
-      </table>
-    </div>
+        </div>
+        <ul id="topNav" class="swiper-container" v-if="data!=null&&data.Floors!=null&&data.Floors.length>0">
+            
+             <li class="swiper-wrapper" v-for="(item,floorIndex) in data.Floors" :key="item.fName+'a1'" >
+                <template v-if="data!=null&&data.Rooms!=null&&filterArray(data.Rooms,floorIndex,unit).length>0">                
+                    <div class="swiper-slide" v-for="item1 in filterArray(data.Rooms,floorIndex,unit)" :key="item1.rName" :style="'background:'+item1.rColor+';'">
+                        <router-link :to="{path:'/getsaroominfo',query:{id:item1.rID}}"  class="blackColor">{{item1.rName}}</router-link> 
+                    </div>
+                </template> 
+                <template v-else>                
+                    <div class="swiper-slide"  >
+ 
+                    </div>
+                </template> 
+             </li>
+        </ul>
+      </div>
+    
       
   </div>
 </template>
 
 <script>
 import { GetSaBuildingStruct } from "@/common/api/loginApi.js";
-import BetterScroll from 'better-scroll'
 import Swiper from 'swiper';
   import 'swiper/swiper.min.css';
 
@@ -83,11 +83,9 @@ export default {
       data: {}, 
       keyId:0,
       keyValue:'',
-      width:'',
-      width1:"",
-      span:"24",
-      span2:"",
-      span3:""
+      unit:'' ,       //单元
+      active:'',
+      rommLen:0       //每行房间数量
     };
   },
   created: function () {
@@ -100,36 +98,27 @@ export default {
     //console.info('created id end');
     this.keyValue=this.$route.query.name;
     this.GetSaBuildingStruct();
-    console.info('getViewportSize',this.$util.getViewportSize());
-    
-    this.width=this.$util.getViewportSize().width;
-   console.info('width',this.width);
+   
   },
   computed: {
-    // 计算属性的 getter
-    getWidth:function(){
-      if(this.data!=null&&this.data.Chambers!=null){
-        if(this.data.Chambers[0].SubChambers.length>0){
-          let width=this.data.Chambers[0].SubChambers.length*40+70;
-          if(this.width>width){
-            return this.width;
-          }
-          else{
-             return width; 
-          }
-        
-        }
-      }
-      return this.width;
-    }
+    
     
   },
     mounted() {
-      this.$nextTick(() => {
-        this.scroll = new BetterScroll(this.$refs.wrapper, {scrollX: true,scrollY:false,click:true})
-      })
+     
     },
   methods: {
+     initTable(){
+        if (this.swiper_ins) {
+          this.swiper_ins.destroy();
+        }
+        this.swiper_ins = new Swiper('#topNav', {
+          freeMode: true,
+          slidesPerView: 'auto',
+          resistanceRatio: 0,
+        });
+        
+      },
     GetSaBuildingStruct: function () {
       var that = this;
       var data = {
@@ -144,19 +133,18 @@ export default {
           that.$toast(res.msg);
           return;
         }
-        //console.info('data.Chambers',res.data.Chambers[0].SubChambers)
+        //console.info('data.Chambers',res.data.Chambers);
         that.data=res.data;
-        if(that.data.Chambers.length>=1){
-          this.span=24/that.data.Chambers.length;
-        }
+      //  console.info('if is',that.data!=null);
+      //  console.info('if is2',that.data!=null&&that.data.Chambers!=null);
+      //  console.info('if is3',that.data.Chambers.length);
+      this.unit=that.data.Chambers[0].cName;
+        this.$nextTick(() => {
+          this.initTable();
+        });
       });
     },
-    CountSpan:function(chlen,col){   //计算行宽
-       let count=chlen*col;
-       let width2=this.width/count;
-       console.info('width2',width2);
-       return width2;
-    },
+  
     // 单选按钮点击事件
     click1: function (event, id) {
       //console.info("click1 event", event);
@@ -172,14 +160,64 @@ export default {
     onClickRight() {
       this.$router.go(0);
     },
-    filterArray: function (arr,name) {      
+    showRoom:function(unit,index){   //显示楼层房间信息
+       this.unit=unit;
+       //console.info('ref',this.$refs.danyuan.div.button);
+       //this.active=true;
+       //console.info('ref',this);
+       this.active=index;
+    },
+     filterArray: function (arr,floorIndex,unit) {        
       //console.info('filterArray',arr);
       //console.info('filterArray name',name);
+      //console.info('filterArray unit',unit);
+      //console.info('data',this.data);
+      let rCoordinateYArr=[];   //房间对应的楼层索引
+      let sumfloor=this.data.Floors.length;
+      this.data.Floors.forEach((item,index,array)=>{
+          rCoordinateYArr.push(sumfloor);
+          sumfloor--;
+      });
+      //console.info('rCoordinateYArr',rCoordinateYArr);
+      let obj={};
+      let start=0;
+      let end=0;
+      let index1=0;
+      let sumUnit=this.data.Chambers.length;   //总单元数
+      this.data.Chambers.filter(function(item,index,self){
+         
+         if(item.cName==unit){
+            obj= item;
+            index1=index;
+            return;
+         }
+        
+        
+      });
+      //console.info('index1',index1);
+      //console.info('sumUnit',sumUnit);
+      start=index1*obj.cRoomNum;
+      
+      end=start+obj.cRoomNum;
+      //console.info('start',start);
+      //console.info('end',end);
       var r=arr.filter(function(item,index,self){
-          return item.rCoordinateY==name;
+          return item.rCoordinateY==rCoordinateYArr[floorIndex];
       });
-      this.span2=24/r.length;
-      //console.info('filterArray r',r);
+      //console.info('rCoordinateYArr',rCoordinateYArr[floorIndex]);
+      //console.info('r',r);
+      //console.info('Chambers',this.data.Chambers.length);
+     if(this.data.Chambers.length>1){  //表示楼栋每层有多个单元
+        if(r.slice(start,end).length>0){
+          this.rommLen=r.slice(start,end).length;
+          console.info('roomlen',this.rommLen);
+        }
+        return r.slice(start,end);
+     }
+      if(r.length>0){
+        this.rommLen=r.length;
+        console.info('roomlen',this.rommLen);
+      }
       return r;
     }
   },
@@ -245,4 +283,8 @@ export default {
 .width{
   width:50px;
 }
+.active{
+    background-color: #048315;
+    color: #fff;
+}
 </style>

src/router/index.js

@@ -30,7 +30,6 @@ import getremindvisittoday from '@/components/getremindvisittoday'
 import getremindallocation from '@/components/getremindallocation'
 import filterclient from '@/components/filterclient'
 import getsaclientlist1 from '@/components/getsaclientlist1'
-
 Vue.use(Router)
 //console.info("获取根目录", window.location.pathname);
 let baseUrl='/'   //base默认值是/ ,若要支持二级虚拟目录。需要设置为 /h5/这种形式。表示该vue项目放入h5虚拟目录下
@@ -94,6 +93,7 @@ export default new Router({
       name: 'getsabuildingstruct',
       component: getsabuildingstruct
     },
+   
     {     //房源信息
       path: '/getsaroominfo',
       name: 'getsaroominfo',