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
}
})