Vue实现美团app的影院推荐选座功能【推荐】

//初始座位数组  initSeatArray: function(){  let seatArray = Array(this.seatRow).fill(0).map(()=>Array(this.seatCol).fill(0));  this.seatArray = seatArray;  //均分父容器宽度作为座位的宽度  this.seatSize = this.$refs.innerSeatWrapper      ? parseInt(parseInt(window.getComputedStyle(this.$refs.innerSeatWrapper).width,10) / this.seatCol,10)      :0;  //初始化不是座位的地方  this.initNonSeatPlace();  },    //初始化不是座位的地方  initNonSeatPlace: function(){  for(let i=0;i<9;i++){   this.seatArray[i][0]=-1;  }  for(let i=0;i<8;i++){   this.seatArray[i][this.seatArray[0].length-1]=-1;   this.seatArray[i][this.seatArray[0].length-2]=-1;  }  for(let i=0;i<9;i++){   this.seatArray[i][this.seatArray[0].length-3]=-1;  }  for(let i=0;i<this.seatArray[0].length;i++){   this.seatArray[2][i]=-1;  }  }

<div class="inner-seat-wrapper" ref="innerSeatWrapper" >  <div v-for="row in seatRow">  <!--这里的v-if很重要，如果没有则会导致报错，因为seatArray初始状态为空-->  <div v-for="col in seatCol"    v-if="seatArray.length>0"    class="seat"    :style="{width:seatSize+'px',height:seatSize+'px'}">   <div class="inner-seat"    @click="handleChooseSeat(row-1,col-1)"    v-if="seatArray[row-1][col-1]!==-1"    :class="seatArray[row-1][col-1]===2?'bought-seat':(seatArray[row-1][col-1]===1?'selected-seat':'unselected-seat')">   </div>  </div>  </div></div>

//处理座位选择逻辑 handleChooseSeat: function(row,col){ let seatValue = this.seatArray[row][col]; let newArray = this.seatArray;  //如果是已购座位，直接返回  if(seatValue===2) return  //如果是已选座位点击后变未选  if(seatValue === 1){   newArray[row][col]=0  }else if(seatValue === 0){   newArray[row][col]=1  }  //必须整体更新二维数组，Vue无法检测到数组某一项更新,必须slice复制一个数组才行  this.seatArray = newArray.slice(); },

//推荐选座,参数是推荐座位数目 smartChoose: function(num){  //找到影院座位水平垂直中间位置的后一排  let rowStart = parseInt((this.seatRow-1)/2,10)+1;  //先从中间排往后排搜索  let backResult = this.searchSeatByDirection(rowStart,this.seatRow-1,num);  if(backResult.length>0){   this.chooseSeat(backResult);   return  }  //再从中间排往前排搜索  let forwardResult = this.searchSeatByDirection(rowStart-1,0,num);  if(forwardResult.length>0) {   this.chooseSeat(forwardResult);   return  }  //提示用户无合法位置可选  alert('无合法位置可选!') },

//向前后某个方向进行搜索的函数,参数是起始行，终止行,推荐座位个数 searchSeatByDirection: function(fromRow,toRow,num){ /*  * 推荐座位规则  * (1)初始状态从座位行数的一半处的后一排的中间开始向左右分别搜索，取离中间最近的，如果满足条件，  * 记录下该结果离座位中轴线的距离，后排搜索完成后取距离最小的那个结果作为最终结果，优先向后排进行搜索，  * 后排都没有才往前排搜，前排逻辑同上  * (2)只考虑并排且连续的座位，不能不在一排或者一排中间有分隔  * */ /*  * 保存当前方向搜索结果的数组,元素是对象,result是结果数组，offset代表与中轴线的偏移距离  * {  * result:Array([x,y])  * offset:Number  * }  */ let currentDirectionSearchResult = []; //确定行数的大小关系，从小到大进行遍历 let largeRow = fromRow>toRow?fromRow:toRow,  smallRow = fromRow>toRow?toRow:fromRow; //逐行搜索 for(let i=smallRow;i<=largeRow;i++){  //每一排的搜索,找出该排里中轴线最近的一组座位  let tempRowResult = [],   minDistanceToMidLine=Infinity;  for(let j=0;j<=this.seatCol - num;j++){  //如果有合法位置  if(this.checkRowSeatContinusAndEmpty(i,j,j+num-1)){   //计算该组位置距离中轴线的距离:该组位置的中间位置到中轴线的距离   let resultMidPos = parseInt((j+num/2),10);   let distance = Math.abs(parseInt(this.seatCol/2) - resultMidPos);   //如果距离较短则更新   if(distance<minDistanceToMidLine){   minDistanceToMidLine = distance;   //该行的最终结果   tempRowResult = this.generateRowResult(i,j,j+num-1)   }  }  }  //保存该行的最终结果  currentDirectionSearchResult.push({  result:tempRowResult,  offset:minDistanceToMidLine  }) } //处理后排的搜索结果:找到距离中轴线最短的一个 //注意这里的逻辑需要区分前后排，对于后排是从前往后，前排则是从后往前找 let isBackDir = fromRow < toRow; let finalReuslt = [],minDistanceToMid = Infinity; if(isBackDir){  //后排情况,从前往后  currentDirectionSearchResult.forEach((item)=>{  if(item.offset < minDistanceToMid){   finalReuslt = item.result;   minDistanceToMid = item.offset;  }  }); }else{  //前排情况，从后往前找  currentDirectionSearchResult.reverse().forEach((item)=>{  if(item.offset < minDistanceToMid){   finalReuslt = item.result;   minDistanceToMid = item.offset;  }  }) } //直接返回结果 return finalReuslt },