|
|
// pages/make_order/choose_sit/choose_sit.js
|
|
|
import {
|
|
|
httpUtil,
|
|
|
http
|
|
|
} from '../../../utils/util'
|
|
|
import MinaTouch from 'mina-touch'; // 1. 引入mina-touch
|
|
|
|
|
|
Page({
|
|
|
|
|
|
/**
|
|
|
* 页面的初始数据
|
|
|
*/
|
|
|
data: {
|
|
|
selected_seats: [],
|
|
|
max_select: 6,
|
|
|
baseSpace: {
|
|
|
x: 10,
|
|
|
y: 10
|
|
|
}, //座位间的距离
|
|
|
baseSize: {
|
|
|
x: 22,
|
|
|
y: 20
|
|
|
}, //图片默认尺寸
|
|
|
scaleNum: 1, //默认缩放比例（画布宽度适应屏幕）
|
|
|
newScale: 1, //手动缩放比例
|
|
|
move: {
|
|
|
x: 0,
|
|
|
y: 0
|
|
|
}, //手动挪动偏移距离
|
|
|
},
|
|
|
|
|
|
select_grade(e) {
|
|
|
if (e.currentTarget.dataset.num !== 0) {
|
|
|
if (this.data.select_grade == e.currentTarget.dataset.select_grade) {
|
|
|
this.setData({
|
|
|
select_grade: ''
|
|
|
})
|
|
|
} else {
|
|
|
this.setData({
|
|
|
select_grade: e.currentTarget.dataset.select_grade
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
this.init1()
|
|
|
},
|
|
|
|
|
|
// 计算票总价 '含多买折扣'
|
|
|
price_cac(selected_seats) {
|
|
|
const p = []
|
|
|
const grade_price = []
|
|
|
|
|
|
grade_price.push(this.data.data1.grade_price)
|
|
|
// Object.prototype.fun = () => {};
|
|
|
// console.log(Object.values(grade_price[0]))
|
|
|
for (var x in grade_price[0]) {
|
|
|
let a = 0
|
|
|
let arr = []
|
|
|
for (let i of selected_seats) {
|
|
|
if (i.grade == x) {
|
|
|
a++
|
|
|
arr.push({
|
|
|
row: i.row,
|
|
|
col: i.col,
|
|
|
floor: i.floor
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
if (grade_price[0][x][a]) {
|
|
|
p.push({
|
|
|
tkt_grade: x,
|
|
|
tkt_num: a,
|
|
|
tkt_pirce: grade_price[0][x][a],
|
|
|
tkt_loc: arr
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
let ii = 0
|
|
|
for (let i in p) {
|
|
|
ii += parseInt(p[i].tkt_pirce)
|
|
|
}
|
|
|
this.setData({
|
|
|
total_price_list: p,
|
|
|
total_price: ii
|
|
|
})
|
|
|
},
|
|
|
|
|
|
|
|
|
init1() {
|
|
|
const ctx = wx.createCanvasContext('myCanvas');
|
|
|
const baseSpace = this.data.baseSpace
|
|
|
const baseSize = this.data.baseSize
|
|
|
const maxCanvasW = (baseSize.x + baseSpace.x) * (this.data.data1.max_x + 1); //画布最大宽度
|
|
|
const maxCanvasH = (baseSize.y + baseSpace.y) * (this.data.data1.max_y + 1); //画布最大高度
|
|
|
this.setData({
|
|
|
maxCanvasW,
|
|
|
maxCanvasH
|
|
|
})
|
|
|
if (this.screenWidth < maxCanvasW) {
|
|
|
var scaleNum = this.screenWidth / maxCanvasW //缩放比例
|
|
|
this.setData({
|
|
|
scaleNum
|
|
|
})
|
|
|
ctx.scale(scaleNum, scaleNum)
|
|
|
|
|
|
}
|
|
|
const img = {
|
|
|
"00": {
|
|
|
name: 'default',
|
|
|
url: '/images/seats/00.png'
|
|
|
},
|
|
|
"01": {
|
|
|
name: 'checked',
|
|
|
url: '/images/seats/01.png'
|
|
|
},
|
|
|
"A": {
|
|
|
name: 'A',
|
|
|
url: '/images/seats/A.png'
|
|
|
},
|
|
|
"B": {
|
|
|
name: 'B',
|
|
|
url: '/images/seats/B.png'
|
|
|
},
|
|
|
"C": {
|
|
|
name: 'C',
|
|
|
url: '/images/seats/C.png'
|
|
|
},
|
|
|
"D": {
|
|
|
name: 'D',
|
|
|
url: '/images/seats/D.png'
|
|
|
},
|
|
|
"E": {
|
|
|
name: 'E',
|
|
|
url: '/images/seats/E.png'
|
|
|
},
|
|
|
"F": {
|
|
|
name: 'F',
|
|
|
url: '/images/seats/F.png'
|
|
|
},
|
|
|
"G": {
|
|
|
name: 'G',
|
|
|
url: '/images/seats/G.png'
|
|
|
},
|
|
|
"H": {
|
|
|
name: 'H',
|
|
|
url: '/images/seats/H.png'
|
|
|
},
|
|
|
"I": {
|
|
|
name: 'I',
|
|
|
url: '/images/seats/I.png'
|
|
|
},
|
|
|
"J": {
|
|
|
name: 'J',
|
|
|
url: '/images/seats/J.png'
|
|
|
},
|
|
|
"K": {
|
|
|
name: 'K',
|
|
|
url: '/images/seats/K.png'
|
|
|
},
|
|
|
"L": {
|
|
|
name: 'L',
|
|
|
url: '/images/seats/L.png'
|
|
|
},
|
|
|
"M": {
|
|
|
name: 'M',
|
|
|
url: '/images/seats/M.png'
|
|
|
},
|
|
|
"N": {
|
|
|
name: 'N',
|
|
|
url: '/images/seats/N.png'
|
|
|
},
|
|
|
"O": {
|
|
|
name: 'O',
|
|
|
url: '/images/seats/O.png'
|
|
|
},
|
|
|
"P": {
|
|
|
name: 'P',
|
|
|
url: '/images/seats/P.png'
|
|
|
},
|
|
|
"Q": {
|
|
|
name: 'Q',
|
|
|
url: '/images/seats/Q.png'
|
|
|
},
|
|
|
"R": {
|
|
|
name: 'R',
|
|
|
url: '/images/seats/R.png'
|
|
|
},
|
|
|
"S": {
|
|
|
name: 'S',
|
|
|
url: '/images/seats/S.png'
|
|
|
},
|
|
|
"T": {
|
|
|
name: 'T',
|
|
|
url: '/images/seats/T.png'
|
|
|
},
|
|
|
"U": {
|
|
|
name: 'U',
|
|
|
url: '/images/seats/U.png'
|
|
|
},
|
|
|
"V": {
|
|
|
name: 'V',
|
|
|
url: '/images/seats/V.png'
|
|
|
},
|
|
|
"W": {
|
|
|
name: 'W',
|
|
|
url: '/images/seats/W.png'
|
|
|
},
|
|
|
"X": {
|
|
|
name: 'X',
|
|
|
url: '/images/seats/X.png'
|
|
|
},
|
|
|
"Y": {
|
|
|
name: 'Y',
|
|
|
url: '/images/seats/Y.png'
|
|
|
},
|
|
|
"Z": {
|
|
|
name: 'Z',
|
|
|
url: '/images/seats/Z.png'
|
|
|
},
|
|
|
} //默认图片
|
|
|
|
|
|
|
|
|
|
|
|
ctx.scale(this.data.newScale, this.data.newScale)
|
|
|
|
|
|
this.data.data1.seat_list.forEach((item) => {
|
|
|
|
|
|
// 可售座位颜色处理
|
|
|
if (this.data.select_grade) {
|
|
|
if (item.select == 1) {
|
|
|
ctx.drawImage(img["01"].url, 0, 0, baseSize.x, baseSize.y, item.x * (baseSize.x + baseSpace.x), item.y * (baseSize.y + baseSpace.y),
|
|
|
baseSize.x, baseSize.y);
|
|
|
} else if (item.grade == this.data.select_grade) {
|
|
|
if (item.ticket_status === 0) {
|
|
|
ctx.drawImage(img[item.grade].url, 0, 0, baseSize.x, baseSize.y, item.x * (baseSize.x + baseSpace.x), item.y * (baseSize.y + baseSpace.y), baseSize.x, baseSize.y);
|
|
|
} else {
|
|
|
ctx.drawImage(img["00"].url, 0, 0, baseSize.x, baseSize.y, item.x * (baseSize.x + baseSpace.x), item.y * (baseSize.y + baseSpace.y), baseSize.x, baseSize.y);
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
if (item.select == 1) {
|
|
|
ctx.drawImage(img["01"].url, 0, 0, baseSize.x, baseSize.y, item.x * (baseSize.x + baseSpace.x), item.y * (baseSize.y + baseSpace.y),
|
|
|
baseSize.x, baseSize.y);
|
|
|
} else {
|
|
|
if (item.ticket_status === 0) {
|
|
|
ctx.drawImage(img[item.grade].url, 0, 0, baseSize.x, baseSize.y, item.x * (baseSize.x + baseSpace.x), item.y * (baseSize.y + baseSpace.y), baseSize.x, baseSize.y);
|
|
|
} else {
|
|
|
ctx.drawImage(img["00"].url, 0, 0, baseSize.x, baseSize.y, item.x * (baseSize.x + baseSpace.x), item.y * (baseSize.y + baseSpace.y), baseSize.x, baseSize.y);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* if (this.data.selected_seats) {
|
|
|
this.data.selected_seats.forEach((item) => {
|
|
|
ctx.drawImage(img["01"].url, 0, 0, baseSize.x, baseSize.y, item.x * (baseSize.x + baseSpace.x) - maxCanvasW / 2, item.y * (baseSize.y + baseSpace.y) - maxCanvasH / 2,
|
|
|
baseSize.x, baseSize.y);
|
|
|
|
|
|
// ( Math.floor( item.x / ( baseSize.x + baseSpace.x ) ) + Math.floor( maxCanvasW / 2 * ( 1 - 1 / this.data.newScale ) / ( baseSize.x + baseSpace.x ) ) ) *(baseSize.x+baseSpace.x)-maxCanvasW/2
|
|
|
})
|
|
|
} */
|
|
|
})
|
|
|
|
|
|
ctx.draw(false,(e)=>{
|
|
|
wx.canvasToTempFilePath({
|
|
|
canvasId: 'myCanvas',
|
|
|
success: res => {
|
|
|
this.setData({
|
|
|
canvasTemImg: res.tempFilePath
|
|
|
})
|
|
|
}
|
|
|
}, this);
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
make_order() {
|
|
|
var selected_seats = this.data.selected_seats
|
|
|
var tid = ""
|
|
|
selected_seats.forEach((v, k) => {
|
|
|
tid = tid + ',' + String(v.ticket_id)
|
|
|
})
|
|
|
tid = tid.substring(1)
|
|
|
wx.navigateTo({
|
|
|
url: '../make_order/make_order?tid=' + tid + '&drama_id=' + this.data.drama_id
|
|
|
})
|
|
|
},
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/
|
|
|
onLoad: function (options) {
|
|
|
let drama_id = options.drama_id
|
|
|
let _this = this;
|
|
|
wx.getSystemInfo({
|
|
|
success(res) {
|
|
|
//获取屏幕的宽成功
|
|
|
_this.screenWidth = res.screenWidth
|
|
|
_this.screenHeight = res.screenHeight
|
|
|
}
|
|
|
})
|
|
|
this.setData({
|
|
|
drama_id
|
|
|
})
|
|
|
httpUtil("/api/v1/seat-list", "get", {
|
|
|
drama_id: 75787
|
|
|
}).then(res => {
|
|
|
this.setData({
|
|
|
data1: res
|
|
|
})
|
|
|
this.init1()
|
|
|
})
|
|
|
|
|
|
// 2. onload实例化mina-touch
|
|
|
//会创建this.touch1指向实例对象
|
|
|
new MinaTouch(this, 'touch1', {
|
|
|
touchStart: function () {},
|
|
|
touchMove: function () {},
|
|
|
touchEnd: function () {},
|
|
|
touchCancel: function () {},
|
|
|
multipointStart: function () {
|
|
|
console.log('multipointStart');
|
|
|
_this.setData({
|
|
|
scaleListen: true
|
|
|
})
|
|
|
}, //一个手指以上触摸屏幕触发
|
|
|
multipointEnd: function () {
|
|
|
console.log('multipointEnd');
|
|
|
let newScale = _this.data.newScale
|
|
|
if (_this.data.scaleListen == 1) {
|
|
|
debugger
|
|
|
newScale = newScale + 1
|
|
|
} else if (_this.data.scaleListen == -1) {
|
|
|
debugger
|
|
|
newScale = newScale - 1
|
|
|
}
|
|
|
_this.setData({
|
|
|
scaleListen: false
|
|
|
})
|
|
|
if (newScale >= 1) {
|
|
|
_this.setData({
|
|
|
newScale
|
|
|
})
|
|
|
}
|
|
|
}, //当手指离开，屏幕只剩一个手指或零个手指触发(一开始只有一根手指也会触发)
|
|
|
tap: function () {
|
|
|
console.log('Tap');
|
|
|
}, //点按触发，覆盖下方3个点击事件，doubleTap时触发2次
|
|
|
doubleTap: function () {
|
|
|
// _this.setData({scaleNum:2})
|
|
|
console.log('doubleTap');
|
|
|
}, //双击屏幕触发
|
|
|
longTap: function () {
|
|
|
console.log('longTap');
|
|
|
}, //长按屏幕750ms触发
|
|
|
singleTap: function (e) {
|
|
|
console.log('singleTap：选座');
|
|
|
|
|
|
let seat_list = _this.data.data1.seat_list
|
|
|
let selected_seats = _this.data.selected_seats
|
|
|
let scaleNum = _this.data.scaleNum
|
|
|
let newScale = _this.data.newScale
|
|
|
let move = _this.data.move
|
|
|
let maxCanvasW = _this.data.maxCanvasW
|
|
|
let maxCanvasH = _this.data.maxCanvasH
|
|
|
let baseSize = _this.data.baseSize
|
|
|
let baseSpace = _this.data.baseSpace
|
|
|
let max_select = _this.data.max_select
|
|
|
let select_position = {
|
|
|
x: e.changedTouches[0].pageX,
|
|
|
y: e.changedTouches[0].pageY
|
|
|
}
|
|
|
let x = (select_position.x - move.x) / scaleNum
|
|
|
let y = (select_position.y - move.y - 200) / scaleNum
|
|
|
let cur_seat = {
|
|
|
x: Math.floor(x / (baseSize.x + baseSpace.x)),
|
|
|
y: Math.floor(y / (baseSize.y + baseSpace.y))
|
|
|
}
|
|
|
|
|
|
|
|
|
/* 选座 */
|
|
|
// 判断是否已选中
|
|
|
let a = 0
|
|
|
selected_seats.forEach((v, k) => {
|
|
|
if (cur_seat.x == v.x && cur_seat.y == v.y) {
|
|
|
selected_seats.splice(k, 1)
|
|
|
v.select = 0
|
|
|
a = 1
|
|
|
return
|
|
|
}
|
|
|
})
|
|
|
|
|
|
if (a == 0) {
|
|
|
// 将坐标放入选中座位的数组中
|
|
|
seat_list.forEach((v, k) => {
|
|
|
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status == 0) {
|
|
|
// 判断是否超过最大可选
|
|
|
if (selected_seats.length >= max_select) {
|
|
|
selected_seats.splice(max_select)
|
|
|
wx.showToast({
|
|
|
title: '单次最多选座6个',
|
|
|
icon: 'error',
|
|
|
duration: 1000
|
|
|
})
|
|
|
} else {
|
|
|
selected_seats.push(v)
|
|
|
v.select = 1
|
|
|
}
|
|
|
return
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
_this.price_cac(selected_seats)
|
|
|
_this.init1()
|
|
|
}, //单击屏幕触发，包括长按
|
|
|
rotate: function (evt) {
|
|
|
//evt.angle代表两个手指旋转的角度
|
|
|
console.log('rotate:' + evt.angle);
|
|
|
},
|
|
|
pinch: function (evt) {
|
|
|
//evt.zoom代表两个手指缩放的比例(多次缩放的累计值),evt.singleZoom代表单次回调中两个手指缩放的比例
|
|
|
let singleZoom = evt.singleZoom
|
|
|
let newScale = _this.data.newScale
|
|
|
if (_this.data.scaleListen == true) {
|
|
|
if (singleZoom > 1.6) {
|
|
|
_this.data.scaleListen = 1
|
|
|
} else if (singleZoom < 0.6) {
|
|
|
_this.data.scaleListen = -1
|
|
|
}
|
|
|
}
|
|
|
|
|
|
},
|
|
|
pressMove: function (evt) {
|
|
|
//evt.deltaX和evt.deltaY代表在屏幕上移动的距离,evt.target可以用来判断点击的对象
|
|
|
_this.setData({
|
|
|
move: {
|
|
|
x: (_this.data.move.x + evt.deltaX),
|
|
|
y: (_this.data.move.y + evt.deltaY)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
swipe: function (evt) {
|
|
|
//在touch结束触发，evt.direction代表滑动的方向 ['Up','Right','Down','Left']
|
|
|
console.log('swipe:' + evt.direction);
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
*/
|
|
|
onReady: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
*/
|
|
|
onShow: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
*/
|
|
|
onHide: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
*/
|
|
|
onUnload: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
*/
|
|
|
onPullDownRefresh: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
*/
|
|
|
onReachBottom: function () {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 用户点击右上角分享
|
|
|
*/
|
|
|
onShareAppMessage: function () {
|
|
|
|
|
|
}
|
|
|
}) |
