微信小程序仿猫眼电影在线选座实现

 select-seat.js

const api = require('../../../utils/api.js')
const app = getApp();
let that;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    height: "",
    seats: [],
    lineTop: 0,
    lineHeight: "",
    lineArray: [],
    reset: false,
    columnNumber: 0,
    selectX: 0,
    selectY: 0,
    selectedSeat: [],
    price:'',
    rowSize: '',
    seatTypeList: [],
    seatArea: '',
    timer: null,
    maxY:'',
    maxX:'',
    loadComplete:false,
    hidden:true
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    that = this;
    let movie = JSON.parse(options.paramsStr);
    let price = movie.sellPrice;
    this.setData({
      price: price,
      movie: movie,
      seatArea: app.globalData.screenHeight - app.globalData.statusBarHeight - (500 * app.globalData.screenWidth / 750),
      rpxToPx: app.globalData.screenWidth / 750
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let seats = [];
    api.post('/api/cinema/trade_seat', { showId: this.data.movie.showId }).then(function (res) {
      seats =that.prosessSeats(res.seatList.rows);
      that.setData({
        seatTypeList: res.seatTypeList,
        seats: seats,
        columnNumber: res.seatList.rowSize
      })
      that.prosessMaxSeat(res.seatList);
      const query = wx.createSelectorQuery()
      query.select('#seatView').boundingClientRect()
      query.exec((r) => {
        let height = r[0].heighrt;
        let newHeight =that.data.seatScaleHeight;
        let top = r[0].top;
        that.setData({
          lineHeight: newHeight,
          lineTop: top-80
        })
      })
    })
  },
  prosessSeats:function(data){
    let seatData=data;
    seatData.forEach(e => {
      e.columns.forEach(j=>{
        if(j.status=="CAN_SELL"){
          j.icon="/assets/icon/seatPre.png";
          j.flag=0;
        }else if(j.status=="EMPTY"){
          j.icon="";
        }else{
          j.flag=1;
          j.icon="/assets/icon/seatDone.png";
        }
      })
    });
    return seatData;
  },
    //计算最大座位数,生成影厅图大小
    prosessMaxSeat: function(value) {
      let seatList = value
      let maxY = seatList.rowSize;
      let maxX = seatList.rows[0]['columns'].length;
      let seatRealWidth = parseInt(maxX) * 70 * this.data.rpxToPx
      let seatRealheight = parseInt(maxY) * 70 * this.data.rpxToPx
      let seatScale = 1;
      let seatScaleX = 1;
      let seatScaleY = 1;
      let seatAreaWidth = 630 * this.data.rpxToPx
      let seatAreaHeight = this.data.seatArea - 200 * this.data.rpxToPx
      if (seatRealWidth > seatAreaWidth) {
        seatScaleX = seatAreaWidth / seatRealWidth
      }
      if (seatRealheight > seatAreaHeight) {
        seatScaleY = seatAreaHeight / seatRealheight
      }
      if (seatScaleX < 1 || seatScaleY < 1) {
        seatScale = seatScaleX < seatScaleY ? seatScaleX : seatScaleY
      }
      this.setData({
        maxY: parseInt(maxY),
        maxX: parseInt(maxX),
        seatScale: seatScale,
        seatScaleHeight: seatScale * 70 * this.data.rpxToPx,
        loadComplete:true
      });
    },
  //解决官方bug
  handleScale: function (e) {
    if (this.data.timer) {
      clearTimeout(this.data.timer)
    }
    let timer = setTimeout(() => {
      this.setData({
        seatArea: this.data.seatArea
      });
    }, 200)
  },

  onScale(e) {
    const query = wx.createSelectorQuery()
    query.select('#seatView').boundingClientRect()
    query.exec((res) => {
      let height = res[0].height;
      let top = res[0].top;
      let newHeight = that.data.seatScaleHeight;
      this.setData({
        lineHeight: newHeight,
        lineTop: top
      })
    })
  },
  selectSeat(e) {
    let rowid = e.currentTarget.dataset.rowid;
    let columnid = e.currentTarget.dataset.columnid;
    let flag = e.currentTarget.dataset.flag;
    let seats=that.data.seats

    if(flag==1){
      for (var a = 0; a < that.data.selectedSeat.length; a++) {
        if (that.data.selectedSeat[a].rowid == rowid&&that.data.selectedSeat[a].columnid==columnid) {
          that.data.selectedSeat.splice(a, 1);
          break;
        }
      }
    }else{
      if(that.data.selectedSeat.length==4){
        wx.showToast({
          title: '最多只能选4个座哦~~',
          icon:'none'
        })
        return;
      }
      let seat = {
        rowid:rowid,
        columnid:columnid
      };
      that.data.selectedSeat.push(seat);
    }
    seats.forEach(e=>{
      e.columns.forEach(c=>{
        if(rowid==e.rowId&&c.columnId==columnid){
          if(c.flag==1){
            c.flag=0;
            c.icon="/assets/icon/seatPre.png";
          }else if(c.flag==0){
            c.flag=1;
            c.icon="/assets/icon/selectIcon.png";
          }
        }
      })
    })
    let hidden=true;
    if(that.data.selectedSeat.length!=0){
       hidden=false;
    }
    that.setData({
      hidden:hidden,
      seats:seats,
      selectedSeat: that.data.selectedSeat,
      totalPrice: that.data.selectedSeat.length*that.data.price
    })
  },
  cancelSeat(e) {
    let rowid = e.currentTarget.dataset.rowid;
    let columnid = e.currentTarget.dataset.columnid;
    let seats=that.data.seats
    for (var a = 0; a < that.data.selectedSeat.length; a++) {
      if (that.data.selectedSeat[a].rowid == rowid&&that.data.selectedSeat[a].columnid==columnid) {
        that.data.selectedSeat.splice(a, 1);
        break;
      }
    }
    seats.forEach(e=>{
      e.columns.forEach(c=>{
        if(rowid==e.rowId&&c.columnId==columnid){
          c.flag=0;
          c.icon="/assets/icon/seatPre.png";
        }
      })
    })
    let hidden=false;
    if(that.data.selectedSeat.length==0){
       hidden=true;
    }
    that.setData({
      hidden:hidden,
      selectedSeat: that.data.selectedSeat,
      totalPrice: that.data.selectedSeat.length*that.data.price,
      seats:seats
    })
  },
  confirmHandle() {
    if(that.data.selectedSeat.length==0){
      wx.showToast({
        title: '至少得选1个座位哦~~',
        icon:'none'
      })
      return;
    }
  }

})

  select-seat.wxml

<!--电影信息-->
<view class='info'>
	<view class='movieName'>{{movie.filmName}}</view>
	<view class='planDetail'>{{movie.startDate}} {{movie.startTime}}</view>
	<!-- 使用时注释dom view class='about' 即可 .about css 在app.wxss中 -->
</view>
<!--座位示例图  -->
<view class="seatDemosBack" wx:if="{{loadComplete}}">
	<view class="seatDemos">
		<block wx:for="{{seatTypeList}}" wx:for-index="index" wx:for-item="seatTypeItem" wx:key="index">
			<view class="seatDemo">
				<image class="seatDemoItem" mode="widthFix" src="{{seatTypeItem.icon}}"></image>
				<view class="seatDemoItem"> {{seatTypeItem.name}}</view>
			</view>
		</block>
	</view>
</view>
<movable-area scale-area="true" class="defaultArea" style="height:{{seatArea}}px; width: 750rpx;">
	<movable-view class='movableOne' bindscale="handleScale" style="height:{{seatArea}}px; width: 750rpx;" scale="true" direction="all" scale-max="2" scale-value="1" out-of-bounds="true">
		<view class='seatArea' id="seatView" style='width:{{seatScaleHeight * maxX}}px;height:{{seatScaleHeight * maxY}}px'>
			<view class='hallName'>
				<text>{{movie.hallName}}</text>
			</view>
			<view class='x' wx:for="{{seats}}" wx:key="keys" wx:for-item="item" wx:for-index="idx">
				<view class='y' wx:for="{{item.columns}}" wx:key="items" wx:for-index="idy" wx:for-item="items" style="left:{{(items.columnId-1)* seatScaleHeight}}px;top:{{(item.rowNum-1) * seatScaleHeight}}px;width: {{seatScaleHeight}}px;height: {{seatScaleHeight}}px">

					<image wx:if="{{items.status!='EMPTY'&&items.status!='CAN_SELL'}}" class="img" src='{{items.icon}}' data-rowid='{{item.rowId}}' data-flag="{{items.flag}}" data-index="{{idy}}" data-columnid='{{items.columnId}}'></image>
					<image wx:elif="{{items.status=='EMPTY'}}" class="img" src=''></image>
					<image wx:elif="{{items.status=='CAN_SELL'}}" class="img" bind:tap='selectSeat' src='{{items.icon}}' data-rowid='{{item.rowId}}'  data-flag="{{items.flag}}"   data-index="{{idy}}" data-columnid='{{items.columnId}}'></image>

				</view>
			</view>
		</view>
	</movable-view>
</movable-area>


<!--下部分座位示例图  -->
<!-- 用户选中的座位详情 -->
<view class='selectSeatInfo' hidden='{{hidden}}'>
	<scroll-view class="scrollSeat" scroll-x style="width: 100%">
		<!-- 普通座位 -->
		<block wx:for="{{selectedSeat}}" wx:key="id" wx:for-item="selectedSeatItem">
			<view class='scrollItem' bindtap='cancelSeat' data-rowid="{{selectedSeatItem.rowid}}" data-columnid="{{selectedSeatItem.columnid}}">
				<view class='scrollTextTop'>
					{{selectedSeatItem.rowid}}排{{selectedSeatItem.columnid}}座
				</view>
				<view class='scrollTextBottom'>
					￥{{price}}
				</view>
				<image src='/assets/images/close.png'></image>
			</view>
		</block>
	</scroll-view>
</view>
<!-- 快速选座 -->
<view class='selectSeatInfo' hidden='{{!hidden}}'>
	<scroll-view class="scrollSeat" scroll-x style="width: 100%">
		<view class='quickItem' bindtap='quickSeat' data-num='1'>
			1人座
		</view>
		<view class='quickItem' bindtap='quickSeat' data-num='2'>
			2人座
		</view>
		<view class='quickItem' bindtap='quickSeat' data-num='3'>
			3人座
		</view>
		<view class='quickItem' bindtap='quickSeat' data-num='4'>
			4人座
		</view>
	</scroll-view>
</view>
<!-- 以下是确认选座 -->
<view class='orderComfirm' style="flex-direction:row;">
	<view class='comfirm' bindtap='confirmHandle'>￥
		<text>{{totalPrice}}</text> 元 确认选座</view>
</view>

select-seat.wxss

/*
*@zenghao 2018-06-12
*/

page {
  background: #eee;
}

/*
*上方影片名称样式
*/
@import "/style/main.wxss";
@import "/style/icon.wxss";
.movieName {
  font-size: 35rpx;
  font-weight: 600;
  margin-bottom: 10rpx;
}

/*
*上方排期信息样式
*/

.planDetail {
  color: #aaa;
  font-size: 27rpx;
}

/*
*上方影片,排期信息的父级
*/

.info {
  width: 100%;
  height: 80rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
  padding: 30rpx 30rpx;
  position: relative;
}

.seatDemosBack {
  background: #fff;
}

/*
*座位样式的父级
*/

.seatDemos {
  color: #aaa;
  background: #fff;
  position: relative;
  margin: 0 auto;
  width: 80%;
  box-sizing: border-box;
  font-size: 25rpx;
  height: 70rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.areaSeatDemos {
  width: 100%;
  height: 80rpx;
  position: fixed;
  bottom: 100rpx;
}

.seatDemosScroll {
  color: #aaa;
  background: #fff;
  width: 100%;
  height: 100%;
  font-size: 25rpx;
  white-space: nowrap;
}

.seatDemosScrollItem {
  height: 90rpx;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 15px;
  display: inline-block;
  align-items: center;
  margin-top: 25rpx;
}

.seatDemosScrollItem.Itemnormal image {
  margin-right: 10rpx;
  width: 40rpx;
  height: 40rpx;
  vertical-align: -30%;
}

/*
*情侣座位的图片样式
*/

.seatDemosScrollItem.Itemlove image {
  margin: 0;
  width: 40rpx;
  height: 40rpx;
  vertical-align: -30%;
}

/*
*情侣座位的字体样式
*/

.seatDemosScrollItem.Itemlove text {
  margin-left: 10rpx;
}

.seatDemo image {
  width: 45rpx;
  height: 45rpx;
}

/*
*普通座位的图片样式
*/

.seatDemoItem {
  white-space: nowrap;
  width: 45rpx;
  display: block;
}

/*
*情侣座位的图片样式
*/

.seatDemo {
  display: flex;
  align-items: center;
}

/*
*情侣座位的字体样式
*/

.loveSeatDemo text {
  margin-left: 10rpx;
}

/*
*影厅图上方显示影厅名字区域
*/

.hallName {
  width: 200rpx;
  height: 0;
  border-top: 40rpx solid #ccc;
  border-right: 20rpx solid transparent;
  border-left: 20rpx solid transparent;
  line-height: 30rpx;
  color: white;
  position: absolute;
  top: -100rpx;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/*
*影厅图上方显示影厅名字区域字体样式
*/

.hallName text {
  font-size: 20rpx;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -35rpx;
}

/*
*所有座位的区域
*/

.seatArea {
  margin: 0 auto;
  font-size: 10rpx;
  position: relative;
}

/*
*中轴线
*/

/* .alignLine {
  position: absolute;
  left: 50%;
  height: 100%;
  border-left: 1px dashed #aaa;
  transform: translateX(-100%);
} */

/*
*选座区域普通座位的图片样式
*/

.normal {
  position: relative;
  /* margin: 10rpx; */
  width: 100%;
  height: 100%;
}

/*
*选座区域情侣座位的图片样式
*/

.LoveSeat {
  position: relative;
  /* margin: 10rpx 0;  */
  width: 70rpx;
  height: 70rpx;
}

/*
*所有座位的图片样式下方透明可点击区域
*/

.seatTap {
  position: absolute;
}

/*
*情侣座位的图片样式下方透明可点击区域
*/

.LoveSeatTap {
  position: absolute;
  top: 0;
  width: 70rpx;
  height: 70rpx;
}

/*
* 座位图限制区域
*/

movable-area {
  background: #eee;
  overflow: hidden;
}

/*
* 座位图可移动区域(座位图)
*/

.movableOne {
  box-sizing: border-box;
  padding: 100rpx 60rpx;
  color: #fff;
}

/*
* 座位图可移动区域(左边座位排号栏)
*/

.movableTwo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 1400rpx;
  width: 30rpx;
  padding: 100rpx 0;
  color: #fff;
}

/*
* (左边座位排号栏整体)
*/

.seatTool {
  width: 30rpx;
  padding: 100rpx 0;
  opacity: 0.5;
}

.seatToolArea {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50rpx;
}

/*
* (左边座位排号栏每一个块)
*/

.seatTag {
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}

/*
*页面最下方确认选座区域
*/

.orderComfirm {
  background: #fff;
  position: fixed;
  display: flex;
  bottom: 0rpx;
  width: 100%;
  line-height: 100rpx;
  z-index: 3;
}

/*
*页面最下方价格区域
*/

.orderPrice {
  text-indent: 30rpx;
  color: black;
  height: 100rpx;
  width: 60%;
}

/*
*页面最下方价格字体样式
*/

.orderPrice text {
  color: red;
}

/*
*页面最下方确认选座区域渐变色
*/

.comfirm {
  font-weight: 900;
  text-align: center;
  color: white;
  width: 100%;
  background: linear-gradient(to right, #C26DFE, #6F50F5); 
  height: 100rpx;
}

/*
*用户选中的座位区域
*/

.selectSeatInfo {
  background: #fff;
  position: fixed;
  bottom: 100rpx;
  height: 80rpx;
  width: 100%;
  padding: 10rpx 0;
}

/*
*用户选中的座位详情滑块
*/

.scrollSeat {
  height: 90rpx;
  white-space: nowrap;
}

/*
*每块用户选中的座位详情
*/

.scrollItem {
  border: 1rpx solid #bbb;
  border-radius: 10rpx;
  width: 180rpx;
  display: inline-block;
  margin-left: 20rpx;
  position: relative;
}

/*
* 快速选座模块
*/

.quickItem {
  border: 1rpx solid #bbb;
  color: #aaa;
  font-size: 28rpx;
  border-radius: 10rpx;
  width: 160rpx;
  height: 75rpx;
  line-height: 75rpx;
  text-align: center;
  display: inline-block;
  margin-left: 20rpx;
  position: relative;
}

/*
*每块用户选中的座位详情上方文字
*/

.scrollTextTop {
  color: #555;
  text-indent: 30rpx;
  line-height: 25rpx;
  font-size: 26rpx;
  height: 25rpx;
  margin-top: 10rpx;
}

/*
*每块用户选中的座位详情下方文字
*/

.scrollTextBottom {
  font-weight: 600;
  font-size: 26rpx;
  color: #ff005a;
  text-indent: 40rpx;
  height: 25rpx;
  line-height: 25rpx;
  margin: 10rpx 0;
}

/*
*每块用户选中的座位详情关闭按钮
*/

.scrollItem image {
  position: absolute;
  z-index: 2;
  width: 30rpx;
  height: 30rpx;
  right: 10rpx;
  top: 50%;
  transform: translateY(-50%);
}

.seatAreaTip {
  position: relative;
  width: 750rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-size: 16rpx;
  color: rgba(0, 0, 0, 0.1);
  border-top: 1rpx dashed rgba(0, 0, 0, 0.1);
}
.x {
  display: flex;
  flex-direction: row;
}

.y {
  display: flex;
  flex-direction: column;
}
.img {
  margin: 5rpx;
  height: 60rpx;
  width: 60rpx;
}

.imgSelect {
  margin: 5rpx;
  height: 60rpx;
  width: 60rpx;
  background: #fd4f68;
}
.line {
  opacity: 0.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  left: 5rpx;
  background: #585656;
}

.text {
  opacity: 0.5;
  margin: 5rpx;
  text-align: center;
  width: 60rpx;
  font-size: auto;
}

.hallTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: fixed;
  
  width: 460rpx;
  background: #e2e2e2;
  border-bottom-left-radius: 90rpx;
  border-bottom-right-radius: 90rpx;
}

.hallTitle text {
  padding: 10rpx;
  font-size: 28rpx;
  color: #666;
  text-align: center;
}

 select-seat.json

{
  "disableScroll": true,
  "navigationBarTitleText": "选座购票"
}

app.js

//app.js
const QQMapWX = require('./assets/libs/qqmap-wx-jssdk.min.js');
let qqmapsdk;
qqmapsdk = new QQMapWX({
  key: '********************************'
});

App({
  onLaunch: function () {
    this.initPage()
  },
  initPage(){
        // 获取用户授权信息信息,防止重复出现授权弹框
        wx.getSetting({
          success: res => {
            //已有权限直接获得信息，否则出现授权弹框
            if (res.authSetting['scope.userLocation']) {
              this.getUserLocation()
            } else {
              this.getUserLocation()
            }
          }
        })
    wx.getSystemInfo({
      success: res => {
        this.globalData.screenHeight = res.screenHeight;
        this.globalData.screenWidth = res.screenWidth;
        this.globalData.statusBarHeight = res.statusBarHeight
      }
    })

  },
  //获取用户的位置信息
  getUserLocation() {
    wx.getLocation({
      //成功授权
      success: (res) => {
        const latitude = res.latitude;
        const longitude = res.longitude;
        // 使用腾讯地图接口将位置坐标转出成名称（为什么弹框出出现两次？）
        qqmapsdk.reverseGeocoder({
          location: {   //文档说location默认为当前位置可以省略，但是还是要手动加上，否则弹框会出现两次，手机端则出现问题
            latitude,
            longitude
          },
          success: (res) => {
            const cityFullname = res.result.address_component.city;
            const location_id=res.result.ad_info.city_code;
         
            const cityInfo = {
              latitude,
              longitude,
              cityName: cityFullname.substring(0, cityFullname.length - 1),
              status:1,
              location_id:location_id.substr(3)
            }
            this.globalData.userLocation = { ...cityInfo}   //浅拷贝对象
            this.globalData.selectCity = { ...cityInfo } //浅拷贝对象
            // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回，所以此处加入 callback 以防止这种情况
            if (this.userLocationReadyCallback) {
              this.userLocationReadyCallback()
            }
          }
        })
      },
      fail:()=>{
        this.globalData.userLocation = {status:0}
        this.globalData.selectCity.location_id=false
        //防止当弹框出现后，用户长时间不选择，
        if (this.userLocationReadyCallback) {
          this.userLocationReadyCallback()
        }
      }
    })
  },
  globalData: {
    userLocation: null, //用户的位置信息
    selectCity: {location_id:150100}, //用户切换的城市
    host:"https://movie.xxx.com",
    screenHeight:null,
    screenWidth:null,
    statusBarHeight:null

  }
})