用Vue實現一個美團app的影院推薦選座功能

時間 2019-11-15

標籤 vue 實現一個 app 推薦功能简体版

原文原文鏈接

簡介

常常用美團app買電影票，不由對它的推薦選座功能產生了好奇，因而打算本身實現一個相似的算法，美團app的推薦選座界面以下html

最多能夠選5個座位，本demo的選座界面以下圖

上圖是點擊 推薦選座5人後選出的座位(綠色)，這個demo和美團app不一樣的地方在於能夠連續進行推薦選座，美團app點擊了推薦選座就必須買票才能繼續選擇。

本demo採用Vue-cli搭建,github地址點此，clone後直接npm start便可進行具體操做vue

算法思考過程

對於這個推薦座位算法，我嘗試了不一樣場次的電影進行推薦選座，總結出如下幾點
(1)推薦算法首先從影院中間排數的後一排的正中間開始搜索
以下圖git

能夠肯定是這個邏輯，試了其餘幾個場次也是同樣

(2)優先向後排方向進行搜索，後排搜索完成後再從中間起始位置向前排搜索
這個大多數狀況是對的，以下圖，偶爾會出現不一樣github

(3)後排搜索完成後，每一行都會有一個結果(每一行的結果是最靠近中軸線的那一組座位)，取這些結果中距離中軸線最小的那個結果做爲最終結果，而不是距離屏幕越近的算法

這一點也是大多數狀況是對的，有些狀況不對，很奇怪npm

(4)只考慮並排且連續的座位，不能不在一排或者一排中間有分隔，好比過道之類的
這一條能夠理解，畢竟坐一排確定觀影體驗好得多數組

影院座位數據結構

能夠確定的是用一個二維數組seatArray表明影院座位，注意到影院座位分佈是不規則的，所以須要肯定一個seatRow和seatCol來肯定影院座位的數組尺寸，分別表明行列數，對於那些沒有座位的地方，seatArray對應的位置填-1，下面是座位具體的值和表明的含義緩存

-1 非座位
0  可選座位   (白色)
1  已選座位   (綠色)
2  已購票座位 (紅色)
複製代碼

而後在mounted中初始化座位，初始值都爲0(可選座位)，以下代碼bash

//初始座位數組
      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;
        }
      }
複製代碼

初始化好以後用一個二重循環來構建html結構，2個v-for嵌套循環出整個結構，以下代碼數據結構

<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>
複製代碼

上述的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?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
  },
複製代碼

代碼有點長，不過邏輯不難，就是前面那幾條規則的實現，對於每一行的搜索，是可能存在多個合理的座位結果的

我這裏採用的是從左往右遍歷，若是是推薦5個座位，先判斷1-5位置是否合理，若是合理則記錄下其中間位置(3號)到中軸線的距離以及座位結果數組，而後再右移一位檢查2-6位置是否合理，若是合理則比較2-6位置的中間位置(4號)距離中軸線的距離和以前的距離，取最短的一個，同時更新座位結果數組。這樣遍歷下來，該行的最終結果就能肯定， 每一行的最佳結果會存放在currentDirectionSearchResult數組中

而後後排方向的全部排遍歷完後，就獲得了由每一行最佳結果組成的數組currentDirectionSearchResult，再遍歷這個數組根據規則取距離中軸線最近的一個做爲最終返回的結果

這個算法能夠優化，直接從中間向2邊找，找到就返回，不過寫起來有點麻煩，可是效率確定高。須要注意的是前排狀況下要currentDirectionSearchResult.reverse()反向數組一下，由於對於前排部分是優先選擇前排的後面部分的(誰都不想坐第一排!)，同後排相反

最後

這個算法不過有點問題，以下圖

最左邊的2個綠色座位是最後一次點擊推薦選座2人的結果，不過該位置卻不如另一個箭頭處那2個位置合理，說明該算法其實不完美，可能上面的分析不到位，其實美團的算法也有問題，以下圖

這個推薦的合理位置應該是4個位置往左移動一格，這纔是正中央位置，這個推薦的有偏移量，不知道是爲啥，網上也沒有搜到具體的算法邏輯,只能靠猜測和實驗

相關標籤/搜索