前言
最近突然看到这个功能了，就想着研究一下如何写，然后在网上看了一些帖子，总结了一下，这里套用了一个别人的数据结构，这个感觉毕竟好用。然后写一个简单的模板放在这，以后可能会再这个基础上修改或者新增功能。
效果图
全景这样的
选座位后点击确定可以拿到座位信息。
代码
简单注释了一下，应该看得懂基本的逻辑
解释一下：
这个选座主要麻烦的是座位的排布，现在的数据结构是这样的，通过后台传过来的数组渲染座位，数组内是每一个座位的信息，包括实际位置信息，和位置X，Y轴位置信息等。我们就是通过这个X和Y轴的位置信息来排列座位的。我们先把这座位的大盒子上一个定位，然后再标签上通过动态style给每一个座位加上top和left的偏移量，因为有后台数组的位置信息，所以可以直接用这个信息来当偏移的位置。而要再乘一个positionDistin也就是偏移距离是为了避免座位都挤在一起，所以我们通过乘一个数字，让这个偏移的距离可以整体被我们控制大小。比如top：10，left：10乘1.1的距离，那就是11了，这样就会让座位间距变得更宽。
<template>
<div>
<div class="title">{
{
cinemaInfo.movieName }}</div>
<div class="titleInfo">
<div>{
{
cinemaInfo.showTime }}</div>
<div>{
{
cinemaInfo.name }}</div>
</div>
<div class="centerInfo">
<div class="centerInfo2">
<span>{
{
cinemaInfo.seatTypeList[0].name }}</span>
<img style="width: 20px" :src="cinemaInfo.seatTypeList[0].icon" />
</div>
<div class="centerInfo2">
<span>{
{
cinemaInfo.seatTypeList[1].name }}</span>
<img style="width: 20px" :src="cinemaInfo.seatTypeList[1].icon" />
</div>
<div class="centerInfo2">
<span>{
{
cinemaInfo.seatTypeList[2].name }}</span>
<img style="width: 20px" :src="cinemaInfo.seatTypeList[2].icon" />
</div>
<div class="centerInfo2">
<span>{
{
cinemaInfo.seatTypeList[3].name }}</span>
<img style="width: 20px" :src="cinemaInfo.seatTypeList[3].icon" />
</div>
</div>
<div class="screen">
<div class="screen-text">屏幕方向</div>
</div>
<div class="box">
<div
v-for="(seatItem, index) in cinemaInfo.seatList"
class="seatClass"
:key="seatItem.id"
@click="clickzuowei(seatItem)"
:style="{
height: height + 'rem',
width: width + 'rem',
top: seatItem.gRow * positionDistin + 'rem',
left: seatItem.gCol * positionDistin + 'rem',
}"
>
<img
class="seatImgClass"
:seatId="seatItem.id"
:seatIndex="index"
:src="cinemaInfo.seatTypeList[seatItem.type].icon"
/>
</div>
</div>
<div class="btn" @click="ok">确 认 选 座</div>
</div>
</template>
<script>
export default {
data() {
return {
//影院 厅信息
cinemaInfo: {
errorCode: 0,
errorMsg: "",
name: "4号厅",
movieName: "白蛇传之白蛇缘起",
showTime: "2019-03-06 周五 16:50",
cinema_name: "惊奇队长影院",
//座位信息
seatList: [
{
//座位id
id: "16879097",
//座位X轴实际位置，去掉过道
row: "1",
//座位Y轴实际位置，去掉过道
col: "1",
//座位X轴位置
gRow: 1,
//座位Y轴位置
gCol: 4,
//类型：区分座位状态，详情看seatTypeList数组，按0,1,2顺序下去代表不同状态，切换图片
type: "0",
flag: "0",
price: "69",
},
{
id: "16879101",
row: "1",
col: "4",
gRow: 1,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879104",
row: "1",
col: "7",
gRow: 1,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879099",
row: "1",
col: "2",
gRow: 1,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879102",
row: "1",
col: "5",
gRow: 1,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879105",
row: "1",
col: "8",
gRow: 1,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879100",
row: "1",
col: "3",
gRow: 1,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879103",
row: "1",
col: "6",
gRow: 1,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879107",
row: "1",
col: "9",
gRow: 1,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879113",
row: "2",
col: "1",
gRow: 2,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879117",
row: "2",
col: "4",
gRow: 2,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879120",
row: "2",
col: "7",
gRow: 2,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879124",
row: "2",
col: "10",
gRow: 2,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879114",
row: "2",
col: "2",
gRow: 2,
gCol: 4,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879118",
row: "2",
col: "5",
gRow: 2,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879121",
row: "2",
col: "8",
gRow: 2,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879125",
row: "2",
col: "11",
gRow: 2,
gCol: 15,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879116",
row: "2",
col: "3",
gRow: 2,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879119",
row: "2",
col: "6",
gRow: 2,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879122",
row: "2",
col: "9",
gRow: 2,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879142",
row: "3",
col: "13",
gRow: 3,
gCol: 15,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879129",
row: "3",
col: "2",
gRow: 3,
gCol: 2,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879133",
row: "3",
col: "5",
gRow: 3,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879136",
row: "3",
col: "8",
gRow: 3,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879139",
row: "3",
col: "11",
gRow: 3,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879143",
row: "3",
col: "14",
gRow: 3,
gCol: 16,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879130",
row: "3",
col: "3",
gRow: 3,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879134",
row: "3",
col: "6",
gRow: 3,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879137",
row: "3",
col: "9",
gRow: 3,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879141",
row: "3",
col: "12",
gRow: 3,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879144",
row: "3",
col: "15",
gRow: 3,
gCol: 17,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879128",
row: "3",
col: "1",
gRow: 3,
gCol: 1,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879131",
row: "3",
col: "4",
gRow: 3,
gCol: 4,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879135",
row: "3",
col: "7",
gRow: 3,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879138",
row: "3",
col: "10",
gRow: 3,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879154",
row: "4",
col: "9",
gRow: 4,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879145",
row: "4",
col: "1",
gRow: 4,
gCol: 1,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879158",
row: "4",
col: "12",
gRow: 4,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879148",
row: "4",
col: "4",
gRow: 4,
gCol: 4,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879161",
row: "4",
col: "15",
gRow: 4,
gCol: 17,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879152",
row: "4",
col: "7",
gRow: 4,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879155",
row: "4",
col: "10",
gRow: 4,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879146",
row: "4",
col: "2",
gRow: 4,
gCol: 2,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879159",
row: "4",
col: "13",
gRow: 4,
gCol: 15,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879150",
row: "4",
col: "5",
gRow: 4,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879153",
row: "4",
col: "8",
gRow: 4,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879156",
row: "4",
col: "11",
gRow: 4,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879147",
row: "4",
col: "3",
gRow: 4,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879160",
row: "4",
col: "14",
gRow: 4,
gCol: 16,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879151",
row: "4",
col: "6",
gRow: 4,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879164",
row: "5",
col: "3",
gRow: 5,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879168",
row: "5",
col: "6",
gRow: 5,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879171",
row: "5",
col: "9",
gRow: 5,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879175",
row: "5",
col: "12",
gRow: 5,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879178",
row: "5",
col: "15",
gRow: 5,
gCol: 17,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879162",
row: "5",
col: "1",
gRow: 5,
gCol: 1,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879165",
row: "5",
col: "4",
gRow: 5,
gCol: 4,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879169",
row: "5",
col: "7",
gRow: 5,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879172",
row: "5",
col: "10",
gRow: 5,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879176",
row: "5",
col: "13",
gRow: 5,
gCol: 15,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879163",
row: "5",
col: "2",
gRow: 5,
gCol: 2,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879167",
row: "5",
col: "5",
gRow: 5,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879170",
row: "5",
col: "8",
gRow: 5,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879173",
row: "5",
col: "11",
gRow: 5,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879177",
row: "5",
col: "14",
gRow: 5,
gCol: 16,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879207",
row: "6",
col: "11",
gRow: 7,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879211",
row: "6",
col: "14",
gRow: 7,
gCol: 16,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879198",
row: "6",
col: "3",
gRow: 7,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879202",
row: "6",
col: "6",
gRow: 7,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879205",
row: "6",
col: "9",
gRow: 7,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879209",
row: "6",
col: "12",
gRow: 7,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879212",
row: "6",
col: "15",
gRow: 7,
gCol: 17,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879196",
row: "6",
col: "1",
gRow: 7,
gCol: 1,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879199",
row: "6",
col: "4",
gRow: 7,
gCol: 4,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879203",
row: "6",
col: "7",
gRow: 7,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879206",
row: "6",
col: "10",
gRow: 7,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879210",
row: "6",
col: "13",
gRow: 7,
gCol: 15,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879197",
row: "6",
col: "2",
gRow: 7,
gCol: 2,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879201",
row: "6",
col: "5",
gRow: 7,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879204",
row: "6",
col: "8",
gRow: 7,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879220",
row: "7",
col: "7",
gRow: 8,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879223",
row: "7",
col: "10",
gRow: 8,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879214",
row: "7",
col: "2",
gRow: 8,
gCol: 2,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879227",
row: "7",
col: "13",
gRow: 8,
gCol: 15,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879218",
row: "7",
col: "5",
gRow: 8,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879221",
row: "7",
col: "8",
gRow: 8,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879224",
row: "7",
col: "11",
gRow: 8,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879215",
row: "7",
col: "3",
gRow: 8,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879228",
row: "7",
col: "14",
gRow: 8,
gCol: 16,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879219",
row: "7",
col: "6",
gRow: 8,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879222",
row: "7",
col: "9",
gRow: 8,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879213",
row: "7",
col: "1",
gRow: 8,
gCol: 1,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879226",
row: "7",
col: "12",
gRow: 8,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879216",
row: "7",
col: "4",
gRow: 8,
gCol: 4,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879229",
row: "7",
col: "15",
gRow: 8,
gCol: 17,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879230",
row: "8",
col: "1",
gRow: 9,
gCol: 1,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879233",
row: "8",
col: "4",
gRow: 9,
gCol: 4,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879237",
row: "8",
col: "7",
gRow: 9,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879240",
row: "8",
col: "10",
gRow: 9,
gCol: 11,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879244",
row: "8",
col: "13",
gRow: 9,
gCol: 15,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879231",
row: "8",
col: "2",
gRow: 9,
gCol: 2,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879235",
row: "8",
col: "5",
gRow: 9,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879238",
row: "8",
col: "8",
gRow: 9,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879241",
row: "8",
col: "11",
gRow: 9,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879245",
row: "8",
col: "14",
gRow: 9,
gCol: 16,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879232",
row: "8",
col: "3",
gRow: 9,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879236",
row: "8",
col: "6",
gRow: 9,
gCol: 7,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879239",
row: "8",
col: "9",
gRow: 9,
gCol: 10,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879243",
row: "8",
col: "12",
gRow: 9,
gCol: 14,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879246",
row: "8",
col: "15",
gRow: 9,
gCol: 17,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879256",
row: "9",
col: "9",
gRow: 10,
gCol: 10,
type: "3",
flag: "0",
price: "69",
},
{
id: "16879260",
row: "9",
col: "12",
gRow: 10,
gCol: 14,
type: "3",
flag: "0",
price: "69",
},
{
id: "16879263",
row: "9",
col: "15",
gRow: 10,
gCol: 17,
type: "2",
flag: "0",
price: "69",
},
{
id: "16879247",
row: "9",
col: "1",
gRow: 10,
gCol: 1,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879250",
row: "9",
col: "4",
gRow: 10,
gCol: 4,
type: "2",
flag: "0",
price: "69",
},
{
id: "16879254",
row: "9",
col: "7",
gRow: 10,
gCol: 8,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879257",
row: "9",
col: "10",
gRow: 10,
gCol: 11,
type: "2",
flag: "0",
price: "69",
},
{
id: "16879261",
row: "9",
col: "13",
gRow: 10,
gCol: 15,
type: "2",
flag: "0",
price: "69",
},
{
id: "16879248",
row: "9",
col: "2",
gRow: 10,
gCol: 2,
type: "2",
flag: "0",
price: "69",
},
{
id: "16879252",
row: "9",
col: "5",
gRow: 10,
gCol: 6,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879255",
row: "9",
col: "8",
gRow: 10,
gCol: 9,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879258",
row: "9",
col: "11",
gRow: 10,
gCol: 12,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879262",
row: "9",
col: "14",
gRow: 10,
gCol: 16,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879249",
row: "9",
col: "3",
gRow: 10,
gCol: 3,
type: "0",
flag: "0",
price: "69",
},
{
id: "16879253",
row: "9",
col: "6",
gRow: 10,
gCol: 7,
type: "2",
flag: "0",
price: "69",
},
],
seatTypeList: [
{
name: "可选",
type: "0",
seats: 1,
icon: "https://www.xollipop.top/可选.png",
isShow: "1",
position: "up",
},
{
name: "已选",
type: "0-1",
seats: 1,
icon: "https://www.xollipop.top/已选.png",
isShow: "1",
position: "up",
},
{
name: "已售",
type: "0-2",
seats: 1,
icon: "https://www.xollipop.top/已售.png",
isShow: "1",
position: "up",
},
{
name: "维修",
type: "0-3",
seats: 1,
icon: "https://www.xollipop.top/维修.png",
isShow: "1",
position: "up",
},
{
name: "情侣首座可选",
type: "1",
seats: 1,
icon: "https://www.xollipop.top/情侣首座可选.png",
isShow: "0",
position: "up",
},
{
name: "情侣首座已选",
type: "1-1",
seats: 1,
icon: "https://www.xollipop.top/情侣首座已选.png",
isShow: "0",
position: "up",
},
{
name: "情侣首座已售",
type: "1-2",
seats: 1,
icon: "https://www.xollipop.top/情侣首座已售.png",
isShow: "0",
position: "up",
},
{
name: "情侣首座维修",
type: "1-3",
seats: 1,
icon: "https://www.xollipop.top/情侣首座维修.png",
isShow: "0",
position: "up",
},
{
name: "情侣次座可选",
type: "2",
seats: 1,
icon: "https://www.xollipop.top/情侣次座可选.png",
isShow: "0",
position: "up",
},
{
name: "情侣次座已选",
type: "2-1",
seats: 1,
icon: "https://www.xollipop.top/情侣次座已选.png",
isShow: "0",
position: "up",
},
{
name: "情侣次座已售",
type: "2-2",
seats: 1,
icon: "https://www.xollipop.top/情侣次座已售.png",
isShow: "0",
position: "up",
},
{
name: "情侣次座维修",
type: "2-3",
seats: 1,
icon: "https://www.xollipop.top/情侣次座维修.png",
isShow: "0",
position: "up",
},
{
name: "情侣座",
type: "5",
seats: 2,
icon: "https://www.xollipop.top/情侣座.png",
isShow: "1",
position: "up",
},
],
},
width: 1.4, // 每个座位的宽
height: 1.4, // 每个座位的高
positionDistin: 1.1, // 每个座位偏移距离
};
},
methods: {
//点击座位的时候切换图片。
clickzuowei(val) {
console.log(val, "座位信息");
//循环影厅内座位信息
this.cinemaInfo.seatList.forEach((item) => {
//判断：选中座位和数组内的id是否一致
if (item.id == val.id) {
//一致就判断他的状态是不是0,0代表未选中，如果是未选中，那就改为1,1就是选中状态。
if (item.type == 0) {
item.type = 1;
//如果状态是1，也就是已经选中的状态，点击就会变成未选中
} else if (item.type == 1) {
item.type = 0;
//如果状态2，也就是已经出售的座位，就提示从新选座
} else if (item.type == 2) {
alert("此座位已出售，请从新选座");
//如果状态3，代表座位损坏，也是提示维修中。
} else if (item.type == 3) {
alert("此座位损坏，正在维修中！");
}
}
});
},
//确认选座
ok() {
//筛选出选择的座位
let info = this.cinemaInfo.seatList.filter((item) => {
return item.type == 1;
});
let list = [];
//筛选出选择的座位排和列
info.forEach((item) => {
list.push(item.row + " 排 " + item.col + " 座 ");
});
console.log("选中的座位信息:", info);
//有选中的时候显示选中信息和确认购买。没有选中的时候提醒先选座
if (info.length == 0) {
alert("请先选择座位，再确认购买！");
} else {
alert("当前选中座位:" + list.toString());
}
},
},
};
</script>
<style scoepd>
.seatClass {
position: absolute;
}
.box {
position: relative;
margin-top: -40px;
}
.seatImgClass {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.title {
width: 100%;
height: 35px;
background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
text-align: center;
line-height: 35px;
color: #fff;
letter-spacing: 2px;
}
.titleInfo {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #ccc;
margin-top: 10px;
padding: 0 10px 0 10px;
}
.centerInfo {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 10px;
}
.centerInfo2 {
display: flex;
align-items: center;
}
.screen {
width: 250px;
border: 30px solid #ccc;
border-color: #ccc transparent transparent transparent;
height: 20px;
margin: auto;
margin-top: 10px;
}
.screen-text {
text-align: center;
white-space: nowrap;
font-size: 20px;
font-weight: 600;
color: #fff;
margin-top: -30px;
}
.btn {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 35px;
background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
text-align: center;
line-height: 35px;
color: #fff;
}
</style>