|
|
|
@ -0,0 +1,450 @@
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
|
|
<div style="width: 100%">
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<div class="drma_title" style="font-size: 14px; color: #181818;">
|
|
|
|
|
|
|
|
<div class="pic" @click="getdrama_list(seat_data.prev_show)">
|
|
|
|
|
|
|
|
<img style="width: 30px;height: 30px" :src="require('@/static/images/ui/' +(seat_data.prev_show !== 0 ? 'dram_activeleft.png' : 'dram_left.png'))" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>{{ seat_data.show_info.show_date }}</div>
|
|
|
|
|
|
|
|
<div class="pic" @click="getdrama_list(seat_data.next_show)">
|
|
|
|
|
|
|
|
<img style="width: 30px;height: 30px" :src="require('@/static/images/ui/' +(seat_data.prev_show !== 0 ? 'dram_activeright.png' : 'dram_right.png'))" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="seat_grade">
|
|
|
|
|
|
|
|
<div :class="'seat_grade_info ' + (item.tkt_num == 0 ? 'null_tic' : '') + ' ' + (select_grade == item.grade ? 'select' : '')"
|
|
|
|
|
|
|
|
@click="select_gradeFun(item.tkt_num, item.grade)"
|
|
|
|
|
|
|
|
v-for="(item, index) in seat_data.grade_list" :key="index">
|
|
|
|
|
|
|
|
<img :src="require('@/static/images/seats/'+item.grade+'.png')" style="width:21px;height:21px;margin-left: 5px;" />
|
|
|
|
|
|
|
|
<div style="margin: 4px 5px 0 5px">¥{{ item.price }}</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="canvasView" @click="chooseSeat">
|
|
|
|
|
|
|
|
<canvas width="750" height="1000" type="2d" id="canvas" canvas-id="myCanvas">
|
|
|
|
|
|
|
|
您的浏览器版本过低,不支持canvas,请升级浏览器或使用chrome浏览器
|
|
|
|
|
|
|
|
</canvas>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
|
|
|
<div class="seat_tips" v-if="selected_seats.length > 0">
|
|
|
|
|
|
|
|
<div class="loc" v-for="(item, index) in selected_seats" :key="index">
|
|
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
|
|
|
<img :src="require('@/static/images/seats/' + item.grade + '.png')" style="width: 16px;height: 16px;" />
|
|
|
|
|
|
|
|
<span style="font-size: 12px">{{ item.seat_info }}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<img src="../static/images/ui/close.png" style="width: 16px;height: 16px;" @click="cancel_sel(item.ticket_id)" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="submit">
|
|
|
|
|
|
|
|
<div class="cacu" v-if="total_price">
|
|
|
|
|
|
|
|
<div class="text">共计</div>
|
|
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
|
|
|
<div class="price">
|
|
|
|
|
|
|
|
<div style="font-size: 22px; font-weight: bold">¥{{ total_price }}.00</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="num" v-if="selected_seats.length">已选择{{ selected_seats.length }}个座位</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<button class="button" :disabled="!total_price" @tap="make_order">下一步</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <div>{{scaleNum}}/{{selectedPos.x}},{{selectedPos.y}}/{{currentSeat.x}},{{currentSeat.y}}</div> -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import {getMethod} from "@/request"
|
|
|
|
|
|
|
|
import MinaTouch from './mina-touch';
|
|
|
|
|
|
|
|
import seatImg from './seatImg';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
drama_id: null,
|
|
|
|
|
|
|
|
seat_data: {
|
|
|
|
|
|
|
|
show_info: {
|
|
|
|
|
|
|
|
show_date:'',
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
screenWidth: 412,
|
|
|
|
|
|
|
|
screenHeight: 915,
|
|
|
|
|
|
|
|
canvasTopGap: 175,
|
|
|
|
|
|
|
|
canvasBottomGap: 64,
|
|
|
|
|
|
|
|
ctx: null,
|
|
|
|
|
|
|
|
canvasImg: null,
|
|
|
|
|
|
|
|
select_grade: '',
|
|
|
|
|
|
|
|
selected_seats: [],
|
|
|
|
|
|
|
|
total_price: '',
|
|
|
|
|
|
|
|
max_select: 6,
|
|
|
|
|
|
|
|
//缩放比例（画布宽度适应屏幕）
|
|
|
|
|
|
|
|
scaleNum: 1,
|
|
|
|
|
|
|
|
// 二次放大比例(适应座位位置)
|
|
|
|
|
|
|
|
scaleNumTwice: 1,
|
|
|
|
|
|
|
|
//手动挪动偏移距离
|
|
|
|
|
|
|
|
move: {
|
|
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
scaleShift: {
|
|
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
|
|
y: 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
tapTimeGap: true,
|
|
|
|
|
|
|
|
timer: 0,
|
|
|
|
|
|
|
|
maxCanvasW: 800,
|
|
|
|
|
|
|
|
maxCanvasH: 800,
|
|
|
|
|
|
|
|
multiplier: 1,
|
|
|
|
|
|
|
|
currentSeat: {},
|
|
|
|
|
|
|
|
selectedPos: {}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
this.screenWidth = document.body.clientWidth;
|
|
|
|
|
|
|
|
this.screenHeight = document.body.clientHeight;
|
|
|
|
|
|
|
|
this.initData();
|
|
|
|
|
|
|
|
this.creatCanvas();
|
|
|
|
|
|
|
|
this.initTouch();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
async initData() {
|
|
|
|
|
|
|
|
getMethod('/api/v1/seat-list?drama_id=82459',{}).then(res => {
|
|
|
|
|
|
|
|
console.log(res)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
} 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)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
drawSeat(ctx, x, y, fillColor) {
|
|
|
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
|
|
|
ctx.fillStyle = fillColor
|
|
|
|
|
|
|
|
ctx.fillRect(x * 25, y * 25, 20, 20);
|
|
|
|
|
|
|
|
ctx.fill();
|
|
|
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
initTouch() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
chooseSeat(e) {
|
|
|
|
|
|
|
|
let select_position = {
|
|
|
|
|
|
|
|
x: e.offsetX,
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
|
|
|
if (this.select_grade != '' && v.grade != this.select_grade) {
|
|
|
|
|
|
|
|
this.drawSeat(this.ctx, v.x, v.y, seatImg['00'].color)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.drawSeat(this.ctx, v.x, v.y, seatImg[v.grade].color)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.ctx.restore()
|
|
|
|
|
|
|
|
this.selected_seats.splice(k, 1)
|
|
|
|
|
|
|
|
return true
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})) {
|
|
|
|
|
|
|
|
this.price_cac(this.selected_seats)
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
this.seat_data.seat_list.find(v => {
|
|
|
|
|
|
|
|
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status === 0) {
|
|
|
|
|
|
|
|
// 判断是否超过最大可选
|
|
|
|
|
|
|
|
if (this.selected_seats.length >= this.max_select) {
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.selected_seats.push(v);
|
|
|
|
|
|
|
|
this.ctx.clearRect(v.x, v.y, 60, 50)
|
|
|
|
|
|
|
|
this.drawSeat(this.ctx, v.x, v.y, seatImg['01'].color)
|
|
|
|
|
|
|
|
this.ctx.restore()
|
|
|
|
|
|
|
|
return true
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
this.price_cac(this.selected_seats)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
select_gradeFun(num, grade) {
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
//
|
|
|
|
|
|
|
|
price_cac(selected_seats) {
|
|
|
|
|
|
|
|
const p = [];
|
|
|
|
|
|
|
|
const grade_price = [];
|
|
|
|
|
|
|
|
grade_price.push(this.seat_data.grade_price);
|
|
|
|
|
|
|
|
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.total_price = ii
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
getdrama_list(nextShow) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
|
|
|
if (this.select_grade != '' && v.grade != this.select_grade) {
|
|
|
|
|
|
|
|
this.drawSeat(this.ctx, v.x, v.y, seatImg['00'].color)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.drawSeat(this.ctx, v.x, v.y, seatImg[v.grade].color)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.selected_seats.splice(k, 1)
|
|
|
|
|
|
|
|
return true
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
this.price_cac(this.selected_seats);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
make_order() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
.canvasView {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 540px;
|
|
|
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
|
|
background: #F9F9F9;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.seat_grade {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
color: #7b7b7b;
|
|
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.seat_grade .seat_grade_info {
|
|
|
|
|
|
|
|
width: 20%;
|
|
|
|
|
|
|
|
margin: 5px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
padding: 5px 2.5px;
|
|
|
|
|
|
|
|
border-radius: 26px;
|
|
|
|
|
|
|
|
border: 1px solid #d2d2d2;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.seat_grade .null_tic {
|
|
|
|
|
|
|
|
background: #dddddd;
|
|
|
|
|
|
|
|
border: 1px solid #dddddd;
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.seat_grade .select {
|
|
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
|
|
border: 1px solid #ff1d42;
|
|
|
|
|
|
|
|
color: #181818;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.drma_title {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.drma_title .pic {
|
|
|
|
|
|
|
|
width: 30px;
|
|
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.drma_title .pic image {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bottom {
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bottom .seat_tips {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
/* padding: 5px 10px; */
|
|
|
|
|
|
|
|
width: 95%;
|
|
|
|
|
|
|
|
background: #f8f8f7;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bottom .seat_tips .loc {
|
|
|
|
|
|
|
|
width: 140px;
|
|
|
|
|
|
|
|
height: 25px;
|
|
|
|
|
|
|
|
background: #ffeef3;
|
|
|
|
|
|
|
|
border-radius: 13px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
margin: 5px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bottom .seat_tips .loc .info {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bottom .submit {
|
|
|
|
|
|
|
|
border-top: 1px solid #dddddd;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
height: 64px;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bottom .submit .cacu {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bottom .submit .cacu .text {
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
margin: 0 10px 0 15px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bottom .submit .cacu .info .price {
|
|
|
|
|
|
|
|
color: #ff1d42;
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bottom .submit .cacu .info .num {
|
|
|
|
|
|
|
|
color: #1394f2;
|
|
|
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bottom .submit .button {
|
|
|
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
|
|
height: 36px;
|
|
|
|
|
|
|
|
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
|
|
|
|
|
|
|
|
border-radius: 22px;
|
|
|
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
