gxd-uni-library-editx 1.0.0

package/src/components/XdOnlineSeatMove/XdOnlineSeatMove.vue

@@ -0,0 +1,1012 @@
+<template>
+  <view class="xd-online-seat">
+    <movable-area
+      v-if="seatInitStatus"
+      class="xd-online-seat__area"
+      scale-area
+    >
+      <!--#ifdef MP-WEIXIN-->
+      <movable-view
+        class="xd-online-seat__view"
+        :style="{
+          minWidth: boxWidth + 'px',
+          padding: '0 0 ' + leftPadding + 'px ' + leftPadding +'px',
+          height: seatHeight + 'px',
+        }"
+        :inertia="true"
+        :scale="scaleStop"
+        :scale-min="1"
+        :scale-max="2"
+        :scale-value="defautScale"
+        direction="all"
+        @scale="onScale"
+        @change="onMove"
+        @touchstart="touchStart"
+        @touchmove="touchMove"
+        @touchend="touchEnd"
+      >
+        <view
+          class="xd-online-seat__stage"
+        >
+          <text>{{seathallNames}} 屏幕</text>
+        </view>
+        <view class="xd-online-seat__tips">
+          <view class="xd-online-seat__tips-item">
+            <view
+              :style="'width:'+seatSize+'px;height:'+seatSize+'px;'"
+              class="xd-online-seat__unselected"
+            ></view>
+            <span>可选</span>
+          </view>
+          <view class="xd-online-seat__tips-item">
+            <view
+              :style="'width:'+seatSize+'px;height:'+seatSize+'px'"
+              class="xd-online-seat__disbaled"
+            ></view>
+            <span>不可选</span>
+          </view>
+          <view class="xd-online-seat__tips-item">
+            <view
+              :style="'width:'+seatSize+'px;height:'+seatSize+'px'"
+              class="xd-online-seat__selected"
+            ></view>
+            <span>选中</span>
+          </view>
+          <view class="xd-online-seat__tips-item">
+            <view
+              :style="'width:'+seatSize+'px;height:'+seatSize+'px'"
+              class="xd-online-seat__lovely"
+            ></view>
+            <span>情侣</span>
+          </view>
+        </view>
+        <view class="xd-online-seat__body">
+          <view
+            class="xd-online-seat__center-line"
+            :style="'height:'+seatRow * (seatMarginBottom/pxNum + seatSize)+'px;border-left:1px dashed '+ $mainColor +';'"
+          ></view>
+          <view
+            v-for="(item,index) in seatArray"
+            :key="index"
+            class="xd-online-seat__item-warper"
+            :style="'width:'+ (seatSize * seatCol) +'px; height:'+(seatSize)+'px;'"
+          >
+            <view
+              v-for="(seat,col) in item"
+              :key="col"
+              class="xd-online-seat__item"
+              :style="'width:'+(seatSize)+'px;height:'+(seatSize)+'px; margin-left:2px;'"
+              @click="(e)=>{
+                handleChooseSeat(e,seat,index,col)
+              }"
+            >
+              <view v-if="seat.type===0" class="xd-online-seat__unselected"></view>
+              <view v-if="seat.type===1" class="xd-online-seat__disbaled"></view>
+              <view v-if="seat.type===2" class="xd-online-seat__selected"></view>
+              <view v-if="seat.type===3" class="xd-online-seat__lovely"></view>
+            </view>
+          </view>
+        </view>
+      </movable-view>
+      <!--#endif-->
+      <!--#ifdef H5-->
+      <movable-view
+        class="xd-online-seat__view"
+        :style="getViewStyle"
+        :inertia="true"
+        :scale="scaleStop"
+        :scale-min="1"
+        :scale-max="2"
+        :scale-value="defautScale"
+        direction="all"
+        @scale="onScale"
+        @change="onMove"
+      >
+        <view
+          class="xd-online-seat__stage"
+        >
+          <text>{{seathallNames}} 屏幕</text>
+        </view>
+        <view class="xd-online-seat__tips">
+          <view class="xd-online-seat__tips-item">
+            <view
+              :style="'width:'+seatSize+'px;height:'+seatSize+'px;'"
+              class="xd-online-seat__unselected"
+            ></view>
+            <span>可选</span>
+          </view>
+          <view class="xd-online-seat__tips-item">
+            <view
+              :style="'width:'+seatSize+'px;height:'+seatSize+'px'"
+              class="xd-online-seat__disbaled"
+            ></view>
+            <span>不可选</span>
+          </view>
+          <view class="xd-online-seat__tips-item">
+            <view
+              :style="'width:'+seatSize+'px;height:'+seatSize+'px'"
+              class="xd-online-seat__selected"
+            ></view>
+            <span>选中</span>
+          </view>
+          <view class="xd-online-seat__tips-item">
+            <view
+              :style="'width:'+seatSize+'px;height:'+seatSize+'px'"
+              class="xd-online-seat__lovely"
+            ></view>
+            <span>情侣</span>
+          </view>
+        </view>
+        <view class="xd-online-seat__body">
+          <view
+            class="xd-online-seat__center-line"
+            :style="'height:'+seatRow * (seatMarginBottom/pxNum + seatSize)+'px;border-left:1px dashed '+ $mainColor +';'"
+          ></view>
+          <view
+            v-for="(item,index) in seatArray"
+            :key="index"
+            class="xd-online-seat__item-warper"
+            :style="'width:'+ (seatSize * seatCol) +'px; height:'+(seatSize)+'px;'"
+          >
+            <view
+              v-for="(seat,col) in item"
+              :key="col"
+              class="xd-online-seat__item"
+              :style="'width:'+(seatSize)+'px;height:'+(seatSize)+'px; margin-left:2px;'"
+              @click="(e)=>{
+                handleChooseSeat(e,seat,index,col)
+              }"
+            >
+              <view v-if="seat.type===0" class="xd-online-seat__unselected"></view>
+              <view v-if="seat.type===1" class="xd-online-seat__disbaled"></view>
+              <view v-if="seat.type===2" class="xd-online-seat__selected"></view>
+              <view v-if="seat.type===3" class="xd-online-seat__lovely"></view>
+            </view>
+          </view>
+        </view>
+      </movable-view>
+      <!--#endif-->
+    </movable-area>
+    <view class="xd-online-seat__natioc">{{seatDom|raw}}</view>
+    <view
+      class="xd-online-seat__left-bar"
+      :style="{
+        top : seatOffsetTop + 'px',
+        width: 30 * scale + 'rpx',
+        background: $mainColor
+      }"
+    >
+      <view
+        class="xd-online-seat__left-bar-body"
+        :style="{
+          height: seatSize*scale + 'px',
+          lineHeight: seatSize*scale + 'px',
+          marginTop: seatMarginBottom + 'rpx',
+          fontSize: 16 * scale + 'rpx'
+        }"
+        v-for="(m,mindex) in seatRowList"
+        :key="mindex">{{m}}</view>
+    </view>
+  </view>
+</template>
+<script>
+  import helper from "@/utils/helper";
+  import XdButton from "@/components/XdButton/XdButton";
+
+  export default {
+    name: 'XdOnlineSeatMove',
+    components: {XdButton},
+    props: {
+      list: {
+        type: Array | Object,
+        default() {
+          return {};
+        }
+      },
+      hallName: {
+        type: String,
+        default: '影厅屏幕'
+      },
+
+      //最大购买格式
+      seatMaxBuyNumber: {
+        type: Number,
+        default: 4
+      }
+    },
+    data() {
+      return {
+        /**页面属性**/
+        boxWidth: null, //屏幕宽度px
+        moveX: 0, //水平移动偏移量
+        leftPadding: 20,
+        scale : 1,
+        defautScale: 0.95,
+        lineBarLeft: 0,
+        srceenType: true, //true -> 竖屏 false->横屏
+        systemInfo: null, //底部tabber
+        height: 0,
+        seatOffsetTop: 0, //座位图在显示区距离顶部域偏移
+        seatOffsetLeft: 0, //座位图在显示区距离顶部域偏移
+        seatWidth: 0, //座位图宽度
+        seatHeight: 0, //座位图高度
+        stageAllHeight: 0, //舞台高度
+        seatDom: {},
+
+        /**影院属性**/
+        //#ifdef MP-WEIXIN
+        stageHeight: 120, //舞台块高度px
+        tipsheight: 76, //提示块高度px
+        //#endif
+        //#ifndef MP-WEIXIN
+        stageHeight: 80, //舞台块高度px
+        tipsheight: 76, //提示块高度px
+        //#endif
+        scaleStop: true, //是否支持双手指放大事件停止
+        disabled: true, //是否禁用拖拽
+
+        /**座位数据**/
+        seatMarginBottom: 0, //座位上边距px
+        seatSize: 25, //座位尺寸
+        seatRow: 0, //影院座位行数
+        seatCol: 0, //影院座位列数
+        seatArray: [], //影院座位的二维数组, -1为非座位，0为可购座位，1为不可购座位, 2为已购座位(平台起作用), 3为情侣座位(LL,LR)，一维行，二维列
+        seatSourceList: null, //接口获取的原始位置
+        seatRowList: [], //排数提示
+        seatUnselectedTotalNumber: 0, //可选座位总数
+        seatInitStatus: false,
+        seathallNames: null, //影片类型
+
+        //提交数据
+        totalPrice: 0, //总价格
+        seatSelected: [], //选中的座位数组。
+        seatError: [],//记录当前选座位是否有错误
+        seatTotalNumber: 0, //座位总数
+
+      };
+    },
+    computed: {
+      getViewStyle() {
+        let height = Math.floor((this.seatSize + this.seatMarginBottom / this.pxNum) * this.seatRow + this.stageHeight / this.pxNum + this.tipsheight / this.pxNum);
+        return {
+          width: this.boxWidth + 'px',
+          height: height + 'px',
+          padding: `0 ${this.leftPadding * this.pxNum}rpx ${this.leftPadding * this.pxNum}rpx`
+        }
+      },
+
+      getFormData() {
+        return {
+          seatSelected: this.seatSelected,
+          seatTotalNumber: this.seatTotalNumber,
+          totalPrice: this.totalPrice,
+          seatSelectTotalNumber: this.seatSelected.length,
+          seatSelectedName: this.$xdUniHelper.getListKeyForValue(this.seatSelected, 'name'),
+          seatError: this.seatError
+        }
+      },
+
+      rpxNum() {
+        return this.$rpxNum
+      },
+      pxNum() {
+        return this.$pxNum
+      },
+    },
+    created() {
+      console.log('created', this.list);
+      this.scale = this.defautScale;
+      this.seathallNames = this.hallName;
+      this.seatInitStatus = false;
+      this.seatSourceList = helper.cloneDeep(this.list);
+
+      this.init();
+    },
+    watch: {
+      list(val) {
+        this.seatInitStatus = false;
+        this.seatSourceList = helper.cloneDeep(val);
+        this.init()
+      },
+      hallName(val) {
+        this.seathallNames = val;
+      },
+    },
+    mounted(){
+      this.setSeatOffset()
+    },
+    methods: {
+      reSelectData(){
+        this.totalPrice = 0;
+        this.seatSelected = [];
+        this.seatError = [];
+        this.seatTotalNumber = 0;
+      },
+
+      touchStart(e){
+        this.scaleStop = false;
+      },
+
+      touchMove(e) {
+        if (e.touches.length > 1) {
+          this.scaleStop = false;
+        }else{
+          this.scaleStop = true;
+        }
+      },
+
+      touchEnd(e) {
+        setTimeout(()=>{
+          this.scaleStop = true;
+        }, 50)
+      },
+
+      setSeatOffset(){
+        this.$nextTick(() => {
+          this.$xdUniHelper.getWindowHeight([
+            '.xd-online-seat__body',
+            '.xd-online-seat__stage',
+            '.xd-online-seat__tips'
+          ], this)
+            .then(res => {
+              let {top, left, width, height} = res['.xd-online-seat__body'];
+              this.seatOffsetTop = top;
+              this.seatOffsetLeft = left;
+              this.seatDom = res['.xd-online-seat__body'];
+              this.seatWidth = width;
+              this.seatHeight = height;
+              this.stageAllHeight = height + res['.xd-online-seat__stage']['height'] +
+                res['.xd-online-seat__tips']['height'];
+            })
+            .catch()
+        })
+      },
+
+      init() {
+        this.systemInfo = getApp().globalData.$systemInfo;
+        this.boxWidth = getApp().globalData.$systemInfo.windowWidth - this.leftPadding - 4*this.scale;
+        this.srceenType = this.$isPortrait;
+        this.reSelectData();
+
+        if (this.seatSourceList && !helper.isEmpty(this.seatSourceList)) {
+          this.initData(this.seatSourceList);
+
+        }
+      },
+
+      update() {
+        this.$emit('input', this.getFormData);
+        this.$emit('select', this.getFormData);
+      },
+
+      /**
+       * @description 初始化座位数据
+       */
+      initData() {
+        /**对象转化为数组**/
+        if (helper.checkVarType(this.seatSourceList) === 'object') {
+          let temp = [];
+          Object.keys(this.seatSourceList).map((key) => {
+            temp.push(this.seatSourceList[key]);
+          });
+          this.seatSourceList = helper.cloneDeep(temp);
+        }
+
+        /**座位排数**/
+        this.seatRow = this.seatSourceList.length;
+
+        /**座位每排座位数**/
+        this.seatCol = this.seatSourceList[0].length;
+
+        this.initSeatArray();
+      },
+
+      /**
+       * @description 影院座位的二维数组,一维行，二维列
+       * @desc cell.type -1为非座位，0为可购座位，1为不可购座位, 2为已购座位(平台起作用), 3为情侣座位(LL,LR)，
+       */
+      initSeatArray() {
+        this.seatSourceList.map((row, posRow) => {
+          row.map((cell, posCell) => {
+
+            //设置位置
+            cell['posRow'] = posRow;
+            cell['posCell'] = posCell;
+
+            //非座位状态
+            if (cell.type === 'G') cell.type = -1;
+
+            //情侣座位状态
+            if (cell.type === 'LL') {
+              cell.type = 3;
+              cell.lovely = 'LL'; //记录左情侣座
+              this.seatTotalNumber++;
+            }
+
+            //记录右情侣座
+            if (cell.type === 'LR') {
+              cell.lovely = 'LR';
+            }
+
+            //可选 or 不可购买座位状态
+            if (cell.type === '0' || cell.type === 'LR') {
+              if (cell.status === 'false') cell.type = 1;
+              else cell.type = 0;
+              this.seatTotalNumber++;
+            }
+          });
+        });
+
+        this.seatArray = helper.cloneDeep(this.seatSourceList);
+
+        /**计算可选座位总数**/
+        this.computedUnselectedTotalNumber();
+
+        /**设置座位大小**/
+        let seatSize = this.boxWidth / (this.seatCol);
+        if (this.seatSize * this.seatCol > this.boxWidth) {
+          this.seatSize = seatSize;
+        }
+
+        this.initNonSeatPlace();
+      },
+
+      /**
+       * @description 初始化排数显示
+       */
+      initNonSeatPlace() {
+        let temp = [];
+        this.seatArray.map((row) => {
+          let rowNum = '';
+          row.map((collapse) => {
+            if (collapse['row_name']) {
+              rowNum = collapse['row_name'];
+            }
+          });
+          temp.push(rowNum);
+        });
+        this.seatRowList = temp;
+        this.seatInitStatus = true;
+      },
+
+      /**
+       * @description 放大缩小事件
+       * @param e
+       */
+      onScale(e) {
+        this.scale = e.detail.scale;
+        this.setSeatOffset()
+      },
+
+      /**
+       * @description 移动事件
+       * @param e
+       */
+      onMove: function (e) {
+        this.moveX = e.detail.x;
+        this.setSeatOffset();
+      },
+
+
+      /**
+       * @description 统一错误提示
+       */
+      seatTips(message = null, callback = null) {
+        if (!message) {
+          message = `每次最多可以购买：${this.seatMaxBuyNumber}个座位。`;
+        }
+        uni.showModal({
+          title: '提示',
+          content: message,
+          showCancel: false,
+          success: function (res) {
+            if (typeof callback === 'function') {
+              callback()
+            }
+          }
+        });
+      },
+
+
+      /**
+       * @description 计算购买座位所需要的总价格
+       */
+      computedPrice() {
+        let totalPrice = 0;
+        this.seatSelected.map((item) => {
+          let price = Number(item['price']['price']);
+          console.log(price);
+          totalPrice = this.$xdUniHelper.addFloatNumber(totalPrice, price);
+        });
+        this.totalPrice = totalPrice;
+        console.log(JSON.stringify(this.seatSelected));
+      },
+
+      /**
+       * @description 计算可选座位数量
+       */
+      computedUnselectedTotalNumber() {
+        this.checkSelectedSeatHasEmpty();
+        this.update();
+      },
+
+      /**
+       * @description 选中 OR 取消座位操作
+       * @param item 当前座位信息
+       * @param type 操作类型 "-" OR "+"
+       */
+      selectSeat(item, type) {
+        if (type === '+') {
+          this.seatSelected.push(item);
+          this.computedPrice();
+          this.computedUnselectedTotalNumber();
+          return
+        }
+        let {id} = item;
+        let index = 0;
+        this.seatSelected.map((it, i) => {
+          if (it['id'] === id) {
+            index = i;
+          }
+        });
+        this.seatSelected.splice(index, 1);
+        this.computedPrice();
+        this.computedUnselectedTotalNumber();
+      },
+
+      /**
+       * @description 检查正负2内的座位是否有错误
+       * cell.type -1为非座位，0为可购座位，1为不可购座位, 2为已购座位(平台起作用), 3为情侣座位(LL,LR)，
+       * @param rows 被检查座位所在行的行数据
+       * @param posCell 被检查的座位所在列位置
+       * @return boolean
+       * false 选中座位附近无隔空座位
+       * true=》选中座位附近有隔空座位
+       */
+      checkSeatStatus(rows, posCell) {
+        console.log(rows[posCell]['name'])
+        let maxCell = rows.length - 1,
+          leftStatus,
+          rightStatus;
+
+        //选中座位为左右边座位，
+        if (posCell === 0 || posCell === maxCell) return false;
+
+        //检查左边座位
+        leftStatus = this.checkNearBySeat(rows, posCell);
+        console.log('leftStatus', leftStatus);
+        if (leftStatus === 0) {
+          console.log('leftStatus', '有隔座留空!');
+          return true;
+        }
+        if (leftStatus === 1) {
+          console.log('leftStatus', '正常！');
+          return false;
+        }
+        console.log('leftStatus', '需要检查右边座位！');
+
+        rightStatus = this.checkNearBySeat(rows, posCell, 1);
+        if (rightStatus === 1) {
+          console.log('rightStatus', '正常！');
+          return false;
+        }
+
+        if (rightStatus === 0) {
+          console.log('rightStatus', '有隔座留空!');
+          return true;
+        }
+
+        if (leftStatus === 3 && rightStatus === 3) {
+          console.log('rightStatus', '正常！');
+          return false;
+        }
+        return true;
+      },
+
+      /**
+       * @description 检查附近座位状态
+       * @param rows 被检查的座位所在行数据
+       * @param posCell  被检查的座位坐在列位置
+       * @param add 检查左边OR右边两个座位 -1左边 1右边
+       * @return number 1=> 不需要检查 , 0=> 不通过, 3=>需要检查右边
+       */
+      checkNearBySeat(rows, posCell, add = -1) {
+        let maxCell = rows.length - 1;
+        let prevSeat = posCell + add;
+        let first = rows[prevSeat];
+
+        //选中在的座位左右座位为边座
+        if (prevSeat === 0 || prevSeat === maxCell) {
+          if (first.type === 0) return 4;
+          else return 1;
+        }
+
+        //不需要检查,直接通过(不可售，地板，已选中)
+        if (first.type === -1 || first.type === 1 || first.type === 2
+        ) {
+          return 1;
+        }
+
+        //检查左右第二个座位状态
+        let second = rows[prevSeat + add];
+
+        if (add === -1) {
+          if (second.type === -1 || second.type === 1 || second.type === 2) {
+            return 4;
+          }
+        } else {
+          //第二个座为（不可售，地板，已选中），直接不通过
+          if (second.type === -1 || second.type === 1 || second.type === 2) {
+            return 0;
+          }
+        }
+
+
+        //需要检查右边座位状态
+        return 3;
+      },
+
+      getObjectLeng(obj) {
+        return Object.keys(obj).length;
+      },
+
+      /**
+       * @description 检查座位是不是边座
+       */
+      checkSelectedSeatHasEmpty() {
+        let error = [];
+        let group = [];
+        let groupObj = {}; //分组对象
+        //行分组
+        this.seatSelected.map((item) => {
+          if (!groupObj[item['row']]) {
+            groupObj[item['row']] = {};
+            groupObj[item['row']][item['column']] = item;
+          } else {
+            groupObj[item['row']][item['column']] = item;
+          }
+        });
+
+        //对连座分在一组
+        Object.keys(groupObj).map((key) => {
+          if (this.getObjectLeng(groupObj[key]) === 1) {
+            Object.keys(groupObj[key]).map(k => {
+              group.push([groupObj[key][k]]);
+            })
+          } else {
+            let splitGroup = (obj) => {
+              console.log('start', JSON.stringify(Object.keys(obj)));
+              let k = Object.keys(obj)[0];
+              let im = obj[k];
+              let nextCell = Number(im['column']) + 1;
+              delete obj[k];
+              let temp = [im];
+              Object.keys(obj).map((item) => {
+                let nowCell = Number(obj[item]['column']);
+                if (nextCell === nowCell) {
+                  nextCell++;
+                  temp.push(obj[item]);
+                  delete obj[item];
+                }
+              });
+              group.push(temp);
+
+              if (this.getObjectLeng(obj) === 1) {
+                Object.keys(obj).map(k => {
+                  group.push([obj[k]]);
+                });
+                return
+              }
+
+              if (this.getObjectLeng(obj) === 0) {
+                return
+              }
+
+              splitGroup(obj);
+            };
+            splitGroup(groupObj[key]);
+          }
+        });
+        console.log('group', group, groupObj);
+
+        //对分组进行判断是否有隔座留空
+        group.map(item => {
+          if (item.length === 1) {
+            let rows = this.seatArray[item[0]['posRow']];
+            let status = this.checkSeatStatus(rows, item[0]['posCell']);
+            if (status) error.push(item[0]['name']);
+            console.log('单座', status ? '有隔座留空!' : '正常');
+          } else {
+            let rows = this.seatArray[item[0]['posRow']];
+            let maxCell = rows.length - 1;
+            let leftstatus, rightstatus;
+
+            //选中座位为左右边座位，
+            if (item[0]['posCell'] === 0) {
+              console.log('连坐左边', '正常')
+              leftstatus = 1;
+            } else {
+              leftstatus = this.checkNearBySeat(rows, item[0]['posCell']);
+              console.log('连坐左边', leftstatus, leftstatus === 0 ? '有隔座留空!' : '正常');
+            }
+
+            if (item[item.length - 1]['posCell'] === maxCell) {
+              console.log('连坐右边', '正常')
+              rightstatus = 1;
+            } else {
+              rightstatus = this.checkNearBySeat(rows, item[item.length - 1]['posCell'], 1);
+              console.log('连坐右边', rightstatus, rightstatus === 0 ? '有隔座留空!' : '正常');
+            }
+
+            if (leftstatus === 1 || rightstatus === 1) {
+              console.log('连座区域结果11：', '正常');
+            } else if (leftstatus === 3 && rightstatus === 3) {
+              console.log('连座区域结果22：', '正常');
+            } else {
+              error.push(item[0]['name']);
+              console.log('连座区域结果：', '有隔座留空!');
+            }
+          }
+        });
+
+        this.seatError = error;
+        if (error.length > 0) {
+          console.log('有隔座留空!', error);
+        } else {
+          console.log('正常!');
+        }
+      },
+
+      /***
+       * @description 选择操作处理
+       * @param ev
+       * @param item
+       * @param posRow
+       * @param posCol
+       */
+      handleChooseSeat: function (ev, item, posRow, posCol) {
+        console.log('handleChooseSeat',ev)
+
+        //如果是不可选，直接返回
+        if (item['type'] === 1 || item['type'] === -1) return;
+
+        //购买数量大于设定购买数量并且是选择操作
+        if (item['type'] === 0 && this.seatSelected.length >= this.seatMaxBuyNumber) {
+          this.seatTips();
+          return;
+        }
+
+
+        //选择当前行数据
+        let row = this.$xdUniHelper.cloneDeep(this.seatArray[posRow]);
+        console.log(item, posRow, posCol, item['type']);
+
+
+        //取消选择中操作
+        if (item['type'] === 2) {
+          console.log('取消选择中操作', item['type']);
+          item['type'] = 0;
+
+
+          //左情侣取消
+          if (item['lovely'] === 'LL') {
+            item['type'] = 3;
+            let lovelyseat = row[posCol + 1];
+            lovelyseat['type'] = 0;
+            this.selectSeat(lovelyseat, '-');
+          }
+
+          //右情侣取消
+          if (item['lovely'] === 'LR') {
+            item['type'] = 0;
+            let lovelyseat = row[posCol - 1];
+            lovelyseat['type'] = 3;
+            this.selectSeat(lovelyseat, '-');
+          }
+
+          this.selectSeat(item, '-');
+        }
+
+        //选择中操作
+        else if (item['type'] === 0 || item['type'] === 3) {
+          console.log('选择中操作', item['type'], item.name);
+          item['type'] = 2;
+          this.selectSeat(item, '+');
+
+          //选中左情侣
+          if (item['lovely'] === 'LL') {
+            row[posCol + 1]['type'] = 2;
+            this.selectSeat(row[posCol + 1], '+');
+          }
+
+          //选中右情侣
+          if (item['lovely'] === 'LR') {
+            row[posCol - 1]['type'] = 2;
+            this.selectSeat(row[posCol - 1], '+');
+          }
+
+        }
+
+        //更新座位图数据
+        row.splice(posCol, 1, item);
+        this.seatArray.splice(posRow, 1, row);
+
+      },
+
+    }
+  }
+
+</script>
+<style lang="less">
+
+  .xd-online-seat {
+    height: 100%;
+    box-sizing: border-box;
+    position: relative;
+
+    /*height: 100vh;*/
+
+    &__disbaled {
+      background-image: url(@xd-bg-disbaled);
+      background-size: 100%;
+      background-position: top left;
+      background-repeat: no-repeat;
+      font-size: 12px;
+    }
+
+    &__selected {
+      background-image: url(@xd-bg-selected);
+      background-size: 100%;
+      background-position: top left;
+      background-repeat: no-repeat;
+      font-size: 12px;
+    }
+
+    &__unselected {
+      background-image: url(@xd-bg-unselected);
+      background-size: 100%;
+      background-position: top left;
+      background-repeat: no-repeat;
+      font-size: 12px;
+    }
+
+    &__lovely {
+      background-image: url(@xd-bg-lovely);
+      background-size: 100%;
+      background-position: top left;
+      background-repeat: no-repeat;
+      font-size: 12px;
+    }
+
+    width: unit(750, rpx);
+
+    &__area {
+      background: #fff;
+      width: 100%;
+      overflow: hidden;
+      height: 100%;
+
+    }
+
+    &__view {
+
+    }
+
+    &__stage {
+      background-image: url(@xd-bg-filmBg);
+      background-size: 100%;
+      background-position: top left;
+      background-repeat: no-repeat;
+      color: @xd-text-color;
+      width: unit(533, rpx);
+      height: unit(50, rpx);
+      font-size: @xd-font-size-base;
+      text-align: center;
+      margin: unit(20, rpx) auto unit(40, rpx);
+      box-sizing: border-box;
+
+      *, text {
+        display: inline-block;
+        padding: unit(30, rpx) 0 0;
+      }
+    }
+
+    &__natioc {
+      display: none;
+      position: fixed;
+      top: unit(300,rpx);
+      left: 0;
+      background: rgba(0,0,0,.5);
+      font-size: unit(18,rpx);
+      z-index: 1000;
+      word-break: break-all;
+      word-wrap: break-word;
+
+    }
+
+    &__tips {
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      height: unit(40, rpx);
+      padding: 0 0 unit(30, rpx);
+
+      &-item {
+        font-size: @xd-font-size-base;
+        margin: 0 unit(10, rpx);
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        align-items: center;
+
+        *, view {
+          margin-right: unit(10, rpx);
+        }
+      }
+    }
+
+    &__item-warper {
+      display: flex;
+      justify-content: center;
+      flex-wrap: nowrap;
+      align-content: center;
+      align-items: center;
+      flex-direction: row;
+      margin-bottom: unit(10, rpx);
+      margin: 0 auto;
+    }
+
+
+    &__body {
+      position: relative;
+    }
+
+    &__center-line {
+      border-left: 1px dashed #e5e5e5;
+      position: absolute;
+      left: 50%;
+      margin-left: 1px;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      top: unit(-10, rpx)
+    }
+
+    &__item {
+      display: flex;
+      justify-content: center;
+      flex-wrap: nowrap;
+      align-content: center;
+      align-items: center;
+      flex-direction: row;
+
+
+      > *, view {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+      }
+    }
+
+    &__left-bar {
+      position: fixed;
+      left: unit(10, rpx);
+      background-color: rgba(0, 0, 0, 0.3);
+      border-radius: unit(14, rpx);
+      overflow: hidden;
+      font-size: unit(20, rpx);
+
+      &-footer {
+        height: unit(30, rpx);
+      }
+
+      &-body {
+        width: 100%;
+        color: @xd-text-color-inverse;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+      }
+    }
+
+  }
+</style>