|
|
|
|
@ -19,9 +19,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="canvasView" @click="chooseSeat">
|
|
|
|
|
<canvas width="750" height="1000" type="2d" id="canvas" canvas-id="myCanvas">
|
|
|
|
|
<canvas :width="canvasWidth" :height="canvasHeight" type="2d" id="canvas" canvas-id="myCanvas">
|
|
|
|
|
您的浏览器版本过低,不支持canvas,请升级浏览器或使用chrome浏览器
|
|
|
|
|
</canvas>
|
|
|
|
|
</div>
|
|
|
|
|
@ -54,9 +53,7 @@
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {getMethod} from "@/request"
|
|
|
|
|
import MinaTouch from './mina-touch';
|
|
|
|
|
import seatImg from './seatImg';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
@ -64,7 +61,8 @@ export default {
|
|
|
|
|
seat_data: {
|
|
|
|
|
show_info: {
|
|
|
|
|
show_date:'',
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
seat_list: [],
|
|
|
|
|
},
|
|
|
|
|
screenWidth: 412,
|
|
|
|
|
screenHeight: 915,
|
|
|
|
|
@ -76,10 +74,6 @@ export default {
|
|
|
|
|
selected_seats: [],
|
|
|
|
|
total_price: '',
|
|
|
|
|
max_select: 6,
|
|
|
|
|
//缩放比例（画布宽度适应屏幕）
|
|
|
|
|
scaleNum: 1,
|
|
|
|
|
// 二次放大比例(适应座位位置)
|
|
|
|
|
scaleNumTwice: 1,
|
|
|
|
|
//手动挪动偏移距离
|
|
|
|
|
move: {
|
|
|
|
|
x: 0,
|
|
|
|
|
@ -91,124 +85,66 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
tapTimeGap: true,
|
|
|
|
|
timer: 0,
|
|
|
|
|
maxCanvasW: 800,
|
|
|
|
|
maxCanvasH: 800,
|
|
|
|
|
multiplier: 1,
|
|
|
|
|
currentSeat: {},
|
|
|
|
|
selectedPos: {}
|
|
|
|
|
selectedPos: {},
|
|
|
|
|
canvasWidth: 1500,
|
|
|
|
|
canvasHeight: 1500,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.screenWidth = document.body.clientWidth;
|
|
|
|
|
this.screenHeight = document.body.clientHeight;
|
|
|
|
|
getMethod('/api/v1/seat-list'+'?drama_id='+this.$route.query.id,{}).then(res => {
|
|
|
|
|
this.canvasWidth = res.data.max_x * 21;
|
|
|
|
|
this.canvasHeight = res.data.max_y * 22;
|
|
|
|
|
})
|
|
|
|
|
this.initData();
|
|
|
|
|
this.creatCanvas();
|
|
|
|
|
this.initTouch();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async initData() {
|
|
|
|
|
getMethod('/api/v1/seat-list?drama_id=82459',{}).then(res => {
|
|
|
|
|
console.log(res)
|
|
|
|
|
getMethod('/api/v1/seat-list'+'?drama_id='+this.$route.query.id,{}).then(res => {
|
|
|
|
|
if(res.status == 200) {
|
|
|
|
|
this.seat_data = res.data;
|
|
|
|
|
this.drama_id = res.data.show_info.drama_id;
|
|
|
|
|
this.creatCanvas();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
let seat_data = {
|
|
|
|
|
grade_list: [
|
|
|
|
|
{grade: "E", price: 80, isVIP: 0, remark: "", tkt_num: 0, is_discount: 0},
|
|
|
|
|
{grade: "D", price: 180, isVIP: 0, remark: "", tkt_num: 8, is_discount: 1},
|
|
|
|
|
{grade: "C", price: 280, isVIP: 0, remark: "", tkt_num: 50, is_discount: 1},
|
|
|
|
|
{grade: "B", price: 380, isVIP: 0, remark: "", tkt_num: 30, is_discount: 1},
|
|
|
|
|
{grade: "A", price: 480, isVIP: 0, remark: "", tkt_num: 21, is_discount: 1}
|
|
|
|
|
],
|
|
|
|
|
grade_price: {
|
|
|
|
|
A: {1: "480.00", 2: "720.00", 3: "1200.00", 4: "1440.00", 5: "1920.00", 6: "2160.00"},
|
|
|
|
|
B: {1: "380.00", 2: "570.00", 3: "950.00", 4: "1140.00", 5: "1520.00", 6: "1710.00"},
|
|
|
|
|
C: {1: "280.00", 2: "420.00", 3: "700.00", 4: "840.00", 5: "1120.00", 6: "1260.00"},
|
|
|
|
|
D: {1: "180.00", 2: "270.00", 3: "450.00", 4: "540.00", 5: "720.00", 6: "810.00"},
|
|
|
|
|
E: {1: "80.00", 2: "160.00", 3: "240.00", 4: "320.00", 5: "400.00", 6: "480.00"}
|
|
|
|
|
},
|
|
|
|
|
info: "180以上价位第二张半价！",
|
|
|
|
|
is_one: 1,
|
|
|
|
|
max_x: 29,
|
|
|
|
|
max_y: 18,
|
|
|
|
|
next_show: 82460,
|
|
|
|
|
prev_show: 82458,
|
|
|
|
|
seat_list: [
|
|
|
|
|
{ticket_id: 20745128, drama_id: 82459, x: 15, y: 1, row: 1, col: 1, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排1号",ticket_status: 0},
|
|
|
|
|
{ticket_id: 20745129, drama_id: 82459, x: 14, y: 1, row: 1, col: 3, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排3号",ticket_status: 0},
|
|
|
|
|
{ticket_id: 20745130, drama_id: 82459, x: 13, y: 1, row: 1, col: 5, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排5号",ticket_status: 0},
|
|
|
|
|
{ticket_id: 20745131, drama_id: 82459, x: 12, y: 1, row: 1, col: 7, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排7号",ticket_status: 0},
|
|
|
|
|
{ticket_id: 20745132, drama_id: 82459, x: 11, y: 1, row: 1, col: 9, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排9号",ticket_status: 0},
|
|
|
|
|
{ticket_id: 20745133, drama_id: 82459, x: 10, y: 1, row: 1, col: 11, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排11号",ticket_status: 0},
|
|
|
|
|
{ticket_id: 20745134, drama_id: 82459, x: 9, y: 1, row: 1, col: 13, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排13号",ticket_status: 0},
|
|
|
|
|
{ticket_id: 20745135, drama_id: 82459, x: 8, y: 1, row: 1, col: 15, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层1排15号",ticket_status: 0},
|
|
|
|
|
{ticket_id: 20745142, drama_id: 82459, x: 15, y: 2, row: 2, col: 1, floor: 0, f_remark: "观众席一层",authority: 15,grade: 'A',isPKG: 0,isVIP: 0,price: "480.00",s_remark:'',seat_info: "观众席一层2排1号",ticket_status: 0}
|
|
|
|
|
],
|
|
|
|
|
show_info: {
|
|
|
|
|
cycle_id: 4957,
|
|
|
|
|
drama_id: 82459,
|
|
|
|
|
show_date: "2022.10.22 周六 14:30",
|
|
|
|
|
theater_id: 466,
|
|
|
|
|
third_event_id: 11934007015306
|
|
|
|
|
},
|
|
|
|
|
theater_info: {
|
|
|
|
|
abb_id: 246,
|
|
|
|
|
city_id: 383,
|
|
|
|
|
cycle: 2,
|
|
|
|
|
is_assistant_stage: 0,
|
|
|
|
|
stage_direction: 1,
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
let maxCanvasW = 45 * (seat_data.max_x + 1);
|
|
|
|
|
let maxCanvasH = 45 * (seat_data.max_y + 1);
|
|
|
|
|
if (this.screenWidth < maxCanvasW) {
|
|
|
|
|
this.scaleNum = (this.screenWidth / maxCanvasW).toFixed(3) //缩放比例
|
|
|
|
|
this.scaleNumTwice = (this.screenWidth / 45 / 20).toFixed(3)
|
|
|
|
|
};
|
|
|
|
|
this.drama_id = 82459;
|
|
|
|
|
this.seat_data = seat_data;
|
|
|
|
|
this.maxCanvasW = maxCanvasW;
|
|
|
|
|
this.maxCanvasH = maxCanvasH;
|
|
|
|
|
this.selected_seats = [];
|
|
|
|
|
this.total_price = '';
|
|
|
|
|
this.select_grade = '';
|
|
|
|
|
},
|
|
|
|
|
async creatCanvas() {
|
|
|
|
|
var canvas = document.getElementById('canvas');
|
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
|
// ctx.width = this.maxCanvasW;
|
|
|
|
|
// ctx.height = this.maxCanvasH;
|
|
|
|
|
// canvas.width = this.maxCanvasW;
|
|
|
|
|
// canvas.height = this.maxCanvasH;
|
|
|
|
|
// ctx.scale(this.scaleNum * window.devicePixelRatio * 1.75, this.scaleNum * window.devicePixelRatio * 1.75)
|
|
|
|
|
this.ctx = ctx;
|
|
|
|
|
this.initCanvas(ctx);
|
|
|
|
|
},
|
|
|
|
|
async initCanvas(ctx) {
|
|
|
|
|
this.seat_data.seat_list.forEach((item) => {
|
|
|
|
|
if (this.select_grade != '') {
|
|
|
|
|
if (item.ticket_status === 0 && this.select_grade === item.grade) {
|
|
|
|
|
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg[item.grade].color)
|
|
|
|
|
} else {
|
|
|
|
|
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg['00'].color)
|
|
|
|
|
}
|
|
|
|
|
if (this.select_grade != '') {
|
|
|
|
|
if (item.ticket_status === 0 && this.select_grade === item.grade) {
|
|
|
|
|
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg[item.grade].color)
|
|
|
|
|
} else {
|
|
|
|
|
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg['00'].color)
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if (item.ticket_status === 0) {
|
|
|
|
|
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg[item.grade].color)
|
|
|
|
|
} else {
|
|
|
|
|
if (item.ticket_status === 0) {
|
|
|
|
|
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg[item.grade].color)
|
|
|
|
|
} else {
|
|
|
|
|
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg['00'].color)
|
|
|
|
|
}
|
|
|
|
|
this.drawSeat(ctx, item.x * this.multiplier, item.y * this.multiplier, seatImg['00'].color)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (this.selected_seats.length > 0) {
|
|
|
|
|
this.selected_seats.forEach((v, k) => {
|
|
|
|
|
ctx.clearRect(v.x * this.multiplier, v.y * this.multiplier, 60, 50)
|
|
|
|
|
this.drawSeat(this.ctx, v.x * this.multiplier, v.y * this.multiplier, seatImg['01'].color)
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
this.selected_seats.forEach((v, k) => {
|
|
|
|
|
// ctx.clearRect(v.x * this.multiplier, v.y * this.multiplier, 20, 20)
|
|
|
|
|
this.drawSeat(this.ctx, v.x * this.multiplier, v.y * this.multiplier, seatImg['01'].color)
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
drawSeat(ctx, x, y, fillColor) {
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.fillStyle = fillColor
|
|
|
|
|
ctx.fillRect(x * 25, y * 25, 20, 20);
|
|
|
|
|
ctx.fillRect(x * 20, y * 20, 16, 16);
|
|
|
|
|
ctx.fill();
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
},
|
|
|
|
|
@ -221,14 +157,14 @@ export default {
|
|
|
|
|
y: e.offsetY
|
|
|
|
|
};
|
|
|
|
|
let cur_seat = {
|
|
|
|
|
x: Math.floor((select_position.x - this.move.x) / 25),
|
|
|
|
|
y: Math.floor((select_position.y - this.move.y) / 25)
|
|
|
|
|
x: Math.floor((select_position.x - this.move.x) / 20),
|
|
|
|
|
y: Math.floor((select_position.y - this.move.y) / 20)
|
|
|
|
|
};
|
|
|
|
|
this.selectedPos = select_position;
|
|
|
|
|
this.currentSeat = cur_seat;
|
|
|
|
|
if (this.selected_seats.find((v, k) => {
|
|
|
|
|
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status === 0) {
|
|
|
|
|
this.ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
|
|
|
|
|
// this.ctx.clearRect(v.x, v.y, 20, 20)
|
|
|
|
|
if (this.select_grade != '' && v.grade != this.select_grade) {
|
|
|
|
|
this.drawSeat(this.ctx, v.x, v.y, seatImg['00'].color)
|
|
|
|
|
} else {
|
|
|
|
|
@ -249,7 +185,7 @@ export default {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.selected_seats.push(v);
|
|
|
|
|
this.ctx.clearRect(v.x, v.y, 60, 50)
|
|
|
|
|
// this.ctx.clearRect(v.x, v.y, 20, 20)
|
|
|
|
|
this.drawSeat(this.ctx, v.x, v.y, seatImg['01'].color)
|
|
|
|
|
this.ctx.restore()
|
|
|
|
|
return true
|
|
|
|
|
@ -261,11 +197,6 @@ export default {
|
|
|
|
|
if (num !== 0) {
|
|
|
|
|
this.select_grade = (this.select_grade === grade) ? '' : grade;
|
|
|
|
|
this.initCanvas(this.ctx)
|
|
|
|
|
// this.scaleNum = (this.screenWidth / this.maxCanvasW).toFixed(3)
|
|
|
|
|
// this.move = {
|
|
|
|
|
// x: 0,
|
|
|
|
|
// y: 0
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//
|
|
|
|
|
@ -302,12 +233,24 @@ export default {
|
|
|
|
|
this.total_price = ii
|
|
|
|
|
},
|
|
|
|
|
getdrama_list(nextShow) {
|
|
|
|
|
|
|
|
|
|
if (nextShow == 0) {
|
|
|
|
|
return
|
|
|
|
|
};
|
|
|
|
|
getMethod('/api/v1/seat-list'+'?drama_id='+nextShow,{}).then(res => {
|
|
|
|
|
if(res.status == 200) {
|
|
|
|
|
this.canvasWidth = res.data.max_x * 21;
|
|
|
|
|
this.canvasHeight = res.data.max_y * 22;
|
|
|
|
|
this.seat_data = res.data;
|
|
|
|
|
this.drama_id = res.data.show_info.drama_id;
|
|
|
|
|
this.creatCanvas();
|
|
|
|
|
console.log(true);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
cancel_sel(cancelId) {
|
|
|
|
|
this.selected_seats.find((v, k) => {
|
|
|
|
|
if (v.ticket_id === cancelId) {
|
|
|
|
|
this.ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
|
|
|
|
|
// this.ctx.clearRect(v.x, v.y, 20, 20)
|
|
|
|
|
if (this.select_grade != '' && v.grade != this.select_grade) {
|
|
|
|
|
this.drawSeat(this.ctx, v.x, v.y, seatImg['00'].color)
|
|
|
|
|
} else {
|
|
|
|
|
|
