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
      "htmlcode">

<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">
   </div>
  </div>
  </div>
</div>


上述的inner-seat类的div就是具体的座位div，v-if说明了如果是-1也就是是过道之类的就不渲染，然后:class一句控制了该座位对应状态的类的值，一个嵌套三目运算符来控制，对于每个座位绑定点击事件 handleChooseSeat(row-1,col-1) 进行状态切换


//处理座位选择逻辑
 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();
 },


这里注意vue中改变data中的二维数组必须先缓存二维数组，修改后，最终将二维数组重新赋值，否则修改不生效，因为Vue无法侦测到数组内的变动。
推荐座位的具体代码
首先给每个推荐座位的按钮绑定事件smartChoose
 


代码如下


//推荐选座,参数是推荐座位数目
 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('无合法位置可选!')
 },


第一步是找到影院座位水平垂直中间位置的后一排，然后调用 this.searchSeatByDirection 进行该方向的搜索，先从中间排往后排搜索，再从中间排往前排搜索。如果任意一个方向搜索到结果，直接返回，否则提示用户无合法位置， chooseSeat 用于改变座位的状态
重点就是 searchSeatByDirection 的实现，代码如下


//向前后某个方向进行搜索的函数,参数是起始行，终止行,推荐座位个数
 searchSeatByDirection: function(fromRow,toRow,num){
 /*
  * 推荐座位规则
  * (1)初始状态从座位行数的一半处的后一排的中间开始向左右分别搜索，取离中间最近的，如果满足条件，
  * 记录下该结果离座位中轴线的距离，后排搜索完成后取距离最小的那个结果作为最终结果，优先向后排进行搜索，
  * 后排都没有才往前排搜，前排逻辑同上
  * (2)只考虑并排且连续的座位，不能不在一排或者一排中间有分隔
  * */

 /*
  * 保存当前方向搜索结果的数组,元素是对象,result是结果数组，offset代表与中轴线的偏移距离
  * {
  * result:Array([x,y])
  * offset:Number
  * }
  */
 let currentDirectionSearchResult = [];
 //确定行数的大小关系，从小到大进行遍历
 let largeRow = fromRow>toRow"text-align: center"> 

我这里采用的是从左往右遍历，如果是推荐5个座位，先判断1-5位置是否合理，如果合理则记录下其中间位置(3号)到中轴线的距离以及座位结果数组，然后再右移一位检查2-6位置是否合理，如果合理则比较2-6位置的中间位置(4号)距离中轴线的距离和之前的距离，取最短的一个，同时更新座位结果数组。 这样遍历下来，该行的最终结果就能确定， 每一行的最佳结果会存放在currentDirectionSearchResult数组中

然后后排方向的所有排遍历完后，就得到了由每一行最佳结果组成的数组currentDirectionSearchResult，再遍历这个数组根据规则取距离中轴线最近的一个作为 最终返回的结果
这个算法可以优化，直接从中间向2边找，找到就返回，不过写起来有点麻烦，但是效率肯定高。需要注意的是前排情况下要 currentDirectionSearchResult.reverse() 反向数组一下，因为对于前排部分是优先选择前排的后面部分的(谁都不想坐第一排!)，同后排相反
最后


这个算法不过有点问题，如下图

最左边的2个绿色座位是最后一次点击推荐选座2人的结果，不过该位置却不如另外一个箭头处那2个位置合理，说明该算法其实不完美，可能上面的分析不到位，其实美团的算法也有问题，如下图

这个推荐的合理位置应该是4个位置往左移动一格，这才是正中央位置，这个推荐的有偏移量，不知道是为啥，网上也没有搜到具体的算法逻辑,只能靠猜想和实验。
总结
以上所述是小编给大家介绍的Vue实现一个美团app的影院推荐选座功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！