|
|
@@ -0,0 +1,1186 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container app-container-me">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="80px">
|
|
|
+ <el-form-item label="演出厅" prop="auditoriumId">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.auditoriumId"
|
|
|
+ placeholder="演出厅"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ @change="changeTime($event,'auditoriumId')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in merchantTheatreAuditoriumListS"
|
|
|
+ :key="dict.id"
|
|
|
+ :label="dict.name"
|
|
|
+ :value="dict.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="场次时间" prop="performDate">
|
|
|
+ <el-date-picker
|
|
|
+ type="date"
|
|
|
+ placeholder="选择场次时间"
|
|
|
+ v-model="queryParams.performDate"
|
|
|
+ @change="changeTime($event,'performDate')"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="场次" prop="timeId">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.timeId"
|
|
|
+ placeholder="场次"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ @change="changeTime($event,'timeId')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in merchantPerformTimeListS"
|
|
|
+ :key="dict.id"
|
|
|
+ :label="dict.timeSnapshot+'('+dict.performTimeStart+'-'+dict.performTimeEnd+')'"
|
|
|
+ :value="dict.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="票务类型" prop="goodsId">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.goodsId"
|
|
|
+ placeholder="票务类型"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ @change="changeTime($event,'goodsId')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in goodsPageListS"
|
|
|
+ :key="dict.id"
|
|
|
+ :label="dict.goodsName"
|
|
|
+ :value="dict.id"
|
|
|
+ :disabled="dict.status==1 || dict.goodsPerform.channelWindow != 0"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button :loading="loading" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button :loading="loading" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="seat-tool-box">
|
|
|
+ <span class="demonstration">座位大小</span>
|
|
|
+ <div class="seat-tool-box-slider">
|
|
|
+ <el-slider
|
|
|
+ v-model="scaleNum"
|
|
|
+ :min="30"
|
|
|
+ :max="100"
|
|
|
+ @change="scaleNumChange"
|
|
|
+ ></el-slider>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;margin-left: 20px;" v-if="seatMapList&&JSON.stringify(seatMapList) != '{}'">
|
|
|
+ <div>各类型座位的剩余数量：</div>
|
|
|
+ <div
|
|
|
+ :key="index"
|
|
|
+ v-for="(item,index) in seatTypeList"
|
|
|
+ style="margin-left: 10px;align-items: center;"
|
|
|
+ >
|
|
|
+ <span :style="{color: item.color?item.color:'none'}">{{item.name ? (item.name+'(剩余:'+ (item.num||0) +')') : '暂未命名'}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="seat-box" :style="{'--scaleNum': scaleNum/100}">
|
|
|
+ <!-- 选择座位 -->
|
|
|
+ <div
|
|
|
+ class="seat-list-box"
|
|
|
+
|
|
|
+ v-loading="loading">
|
|
|
+ <!-- 座位排版 -->
|
|
|
+ <div
|
|
|
+ id="sm-scroll-box"
|
|
|
+ ref="seatbox"
|
|
|
+ class="dialog"
|
|
|
+ @mousedown="mousedownFun"
|
|
|
+ @mouseleave="mouseleaveFun"
|
|
|
+ @scroll="scrollFun"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="dialog-box"
|
|
|
+ :style="{width: width*(scaleNum/100) + 'px', margin: justifyContent ? 'auto' : 'unset'}"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="width: 100%;position: absolute;"
|
|
|
+ class="seat-box-class clearfix"
|
|
|
+ v-if="seatMapList"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+
|
|
|
+ class="seat-item-class-box"
|
|
|
+ v-for="(item1, index1) in seatMapListKey"
|
|
|
+ :key="item1.key"
|
|
|
+ >
|
|
|
+ <div class="seat-item-class seat-box-class-row" style="">{{ index1 != 0 ?((index1) + '排') :'' }}</div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'seat-item-class',
|
|
|
+ item1.key == 'my_column'?'seat-item-class-column':
|
|
|
+ item.occupyStatus==0?item.occupyOrderId?'order-occupy-status':item.occupyStatus==0&&item.isSelect?'occupy-status-select occupy-status':'occupy-status': item.occupyStatus==1?'occupy-status-no':item.isDisabled || item.status != 1 ? 'disabled-class' : item.isSelect ? 'select-class' : ''
|
|
|
+ ]"
|
|
|
+ v-for="(item, index) in seatMapList[item1.key]"
|
|
|
+ :style="{backgroundColor: item.color && !(item.isDisabled || item.status != 1) ? item.color : 'none'}"
|
|
|
+ @click.stop="seatClick(item)"
|
|
|
+ @mouseenter="lockOrUnLockDeatilFun($event,item)"
|
|
|
+ @mouseleave="lockOrUnLockDeatilFun1"
|
|
|
+ :dragSelectId="item.id"
|
|
|
+ :index="item1.key +'_'+ index"
|
|
|
+ :key="index">
|
|
|
+ <p
|
|
|
+ v-if="item1.key != 'my_column'"
|
|
|
+ class="text-class"
|
|
|
+ >{{ item.status != 1 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
|
|
|
+ <p v-else>{{ (index+1) + '号' }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 鼠标拖拽出的遮罩 （定位为 position:absolute）-->
|
|
|
+ <!-- 遮罩最好是在绑定了mouseover事件的元素内部，并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面，依然可以利用冒泡执行父元素的mouseover事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过） -->
|
|
|
+ <div id="moveSelected"></div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 5px; margin-left: 30px;display: flex;">
|
|
|
+ <div style="flex-shrink: 0;">
|
|
|
+ <span>已勾选可售座位：{{ seatSelectList.length }}</span>
|
|
|
+ ，
|
|
|
+ <span>已勾选锁定座位：{{ seatSelectListNo.length }}</span>
|
|
|
+ <el-button size="mini" type="warning" @click="clearSeatSelectListAll">清空已选座位</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;display: flex;justify-content: center;height: 30px;">
|
|
|
+ <el-button size="mini" v-hasPermi="['officesale:ticketingSales:lock']" type="warning" :loading="lockOrUnLockLoading" @click="lockOrUnLockFun(0)">{{ seatSelectListNo.length>0?'解锁':'锁定' }}</el-button>
|
|
|
+ <el-button size="mini" v-hasPermi="['officesale:ticketingSales:buy']" type="primary" @click="increaseViewersFun">预约</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="seat-select-box">
|
|
|
+ <div class="seat-select-box-top">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClickTab">
|
|
|
+ <el-tab-pane label="已选座位" name="first"></el-tab-pane>
|
|
|
+ <!-- <el-tab-pane label="座位图例" name="second"></el-tab-pane> -->
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="seat-select-info" v-if="activeName=='first'">
|
|
|
+ <div
|
|
|
+ class="seat-select-item"
|
|
|
+ :key="index"
|
|
|
+ v-for="(item,index) in seatSelectList">
|
|
|
+ <div>
|
|
|
+ <span>{{item.name ? item.name : '暂未命名'}}</span>
|
|
|
+ <span>{{ setSeatTypeShow(item.seatTypeId) }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span @click="delSeatSelect(item)">删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="seat-select-info" v-if="activeName=='second'">
|
|
|
+ <div
|
|
|
+ class="seat-select-color-item"
|
|
|
+ :key="index"
|
|
|
+ v-for="(item,index) in seatTypeList">
|
|
|
+ <span :style="{backgroundColor: item.color?item.color:'none'}"></span>
|
|
|
+ <span>{{item.name ? item.name : '暂未命名'}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 锁座备注 -->
|
|
|
+ <lock-seat ref="lockSeat" @querySeatListFun="querySeatListFun" />
|
|
|
+ <!-- 添加观影人 -->
|
|
|
+ <increaseViewers ref="increaseViewers" @clearDialogVisible="clearDialogVisible" />
|
|
|
+
|
|
|
+ <!-- 提示信息 -->
|
|
|
+ <div :style="lockStyle" v-if="isLcokShow" class="lock-style-box">
|
|
|
+ <div><span>锁定人：</span><span>{{ lockObj.auth }}</span></div>
|
|
|
+ <div><span>锁定原因：</span><span>{{ lockObj.remark }}</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import {
|
|
|
+ querySeatList,
|
|
|
+ merchantPerformTimeList,
|
|
|
+ lockOrUnLock,
|
|
|
+ merchantTheatreAuditoriumList,
|
|
|
+ goodsPageList,
|
|
|
+ getGoodsPerformApi,
|
|
|
+ lockOrUnLockApi
|
|
|
+ } from '@/api/windowTicketSales/ticketingSales'
|
|
|
+ //import increaseViewers from "./model/increaseViewers"
|
|
|
+ import increaseViewers from "./model/increaseViewers"
|
|
|
+ import moment from "moment"
|
|
|
+ import { pageList as getSeatType } from '@/api/seatTypeMr/seatTypeMr'
|
|
|
+ import selectListMixin from "./mixins/selectList"
|
|
|
+import LockSeat from './model/lockSeat.vue'
|
|
|
+ export default {
|
|
|
+ name: "TicketingSales",
|
|
|
+ components: {
|
|
|
+ increaseViewers,
|
|
|
+ LockSeat
|
|
|
+ },
|
|
|
+ mixins: [selectListMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ timeId: '',
|
|
|
+ performDate: null,
|
|
|
+ auditoriumId: null,
|
|
|
+ goodsId: null,
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ auditoriumId: [
|
|
|
+ { required: true, message: '请选择演出厅', trigger: ['blur','change'] }
|
|
|
+ ],
|
|
|
+ performDate: [
|
|
|
+ { required: true, message: '请选择时间', trigger: ['blur','change'] }
|
|
|
+ ],
|
|
|
+ timeId: [
|
|
|
+ { required: true, message: '请选择场次', trigger: ['blur','change'] }
|
|
|
+ ],
|
|
|
+ goodsId: [
|
|
|
+ { required: true, message: '请选择票务类型', trigger: ['blur','change'] }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ merchantTheatreAuditoriumListS: [], // 演出厅
|
|
|
+ merchantPerformTimeListS: [], // 场次
|
|
|
+ querySeatListS: [], // 座位
|
|
|
+ goodsPageListS: [], // 票务
|
|
|
+ goodsPageListSAll: [], // 票务全部
|
|
|
+ setList: [],
|
|
|
+ seatMapList: {},
|
|
|
+ seatMapListKey: [], // key
|
|
|
+ seatSelectList: [],
|
|
|
+ seatSelectListNo: [], // 锁定的座位
|
|
|
+
|
|
|
+ lockOrUnLockLoading: false,
|
|
|
+
|
|
|
+ performId: '',// 剧目ID
|
|
|
+ scaleNum: 30,
|
|
|
+
|
|
|
+ width: 0,
|
|
|
+ justifyContent: false,
|
|
|
+ activeName: 'first',
|
|
|
+ seatTypeList: [],
|
|
|
+
|
|
|
+ // 限购条件
|
|
|
+ ifRealUser: 0,// 散客是否实名:0-否 1-是
|
|
|
+ ifRealTeam: 0,// 团购是否实名:0否 1-是
|
|
|
+ oneMany: 0,// 证件要求: 1一证一票，2一证多票
|
|
|
+ personnelNum: 0,// 人员要求:0-表示不限制 其他数字表示限制人数
|
|
|
+
|
|
|
+ isLcokShow: false,
|
|
|
+ lckTime: null,
|
|
|
+ seatId: null,
|
|
|
+ lockStyle: {
|
|
|
+
|
|
|
+ },
|
|
|
+ lockObj: {
|
|
|
+ auth: '',
|
|
|
+ remark: ''
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.merchantTheatreAuditoriumListFun()
|
|
|
+ this.goodsPageListFun()
|
|
|
+ this.getSeatTypeList()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$set(this.queryParams,'performDate',moment().format("yyyy-MM-DD"))
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ moment,
|
|
|
+ /** 票务信息 */
|
|
|
+ async goodsPageListFun(){
|
|
|
+ try {
|
|
|
+ let res = await goodsPageList({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 999,
|
|
|
+ classifyId: 1,
|
|
|
+ goodsType: 2,
|
|
|
+ })
|
|
|
+ if(res.code == 200){
|
|
|
+ this.goodsPageListSAll = res.data.rows
|
|
|
+ // let list = []
|
|
|
+ // res.data.rows.forEach((item,index)=>{
|
|
|
+ // if(item.status != 1) {
|
|
|
+ // list.push(item)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // this.goodsPageListS = list
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 获取演出厅 */
|
|
|
+ async merchantTheatreAuditoriumListFun(){
|
|
|
+ try {
|
|
|
+ let res = await merchantTheatreAuditoriumList({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 999
|
|
|
+ })
|
|
|
+ if(res.code == 200){
|
|
|
+ this.merchantTheatreAuditoriumListS = res.data.rows
|
|
|
+ if(this.merchantTheatreAuditoriumListS.length>0){
|
|
|
+ this.$set(this.queryParams,'auditoriumId',this.merchantTheatreAuditoriumListS[0].id)
|
|
|
+ this.changeTime(this.queryParams.auditoriumId,'auditoriumId')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 获取场次 */
|
|
|
+ async merchantPerformTimeListFun(){
|
|
|
+ try {
|
|
|
+ let param = this.queryParams;
|
|
|
+ param.status = 1;
|
|
|
+ let res = await merchantPerformTimeList(param)
|
|
|
+ if(res.code == 200){
|
|
|
+ console.log('merchantPerformTimeListS',res.data.rows);
|
|
|
+ this.merchantPerformTimeListS = res.data.rows
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 座位锁定/解锁 */
|
|
|
+ async lockOrUnLockFun(type){
|
|
|
+ try {
|
|
|
+ let listS = this.seatSelectListNo.length>0 ? this.seatSelectListNo : this.seatSelectList
|
|
|
+ if(listS.length<=0) {
|
|
|
+ this.$message.error(`请选择锁定的座位!!!`);
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.seatSelectListNo.length == 0) {
|
|
|
+ this.$refs.lockSeat.open(this.seatSelectListNo,this.seatSelectList,this.queryParams.auditoriumId,this.queryParams.timeId)
|
|
|
+ }else {
|
|
|
+ this.lockOrUnLockLoading = true
|
|
|
+ let list = []
|
|
|
+ listS.forEach((item,index)=>{
|
|
|
+ list.push({
|
|
|
+ "auditoriumId": this.queryParams.auditoriumId,
|
|
|
+ "seatId": item.id,
|
|
|
+ "timeId": this.queryParams.timeId
|
|
|
+ })
|
|
|
+ })
|
|
|
+ let res = await lockOrUnLock({
|
|
|
+ type: this.seatSelectListNo.length>0 ? 1 : 0,
|
|
|
+ seatList: list
|
|
|
+ })
|
|
|
+ this.lockOrUnLockLoading = false
|
|
|
+ if(res.code) {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: res.msg,
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.querySeatListFun(true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ this.lockOrUnLockLoading = false
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: "操作失败!!!",
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ console.error('error===',error)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 获取座位 */
|
|
|
+ async querySeatListFun(type){
|
|
|
+ try {
|
|
|
+ this.loading = true
|
|
|
+ this.performId = ''
|
|
|
+ this.screenTop = 0
|
|
|
+ this.scrollLeft = 0
|
|
|
+ if(type) { // 是否清除已选
|
|
|
+ this.seatSelectList = []
|
|
|
+ this.seatSelectListNo = []
|
|
|
+ }
|
|
|
+ this.seatMapList = {}
|
|
|
+ this.seatList = []
|
|
|
+ let res = await querySeatList({
|
|
|
+ ...this.queryParams
|
|
|
+ })
|
|
|
+ if(res.code == 200){
|
|
|
+ this.querySeatListS = res.data;
|
|
|
+ this.setList = res.data;
|
|
|
+ if(this.setList && this.setList.length > 0) {
|
|
|
+ this.setSeatMapList(this.setList);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ } catch (error) {
|
|
|
+ this.loading = false
|
|
|
+ console.error("error===",error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 设置座位集合
|
|
|
+ setSeatMapList(list) {
|
|
|
+ if(list && list.length > 0) {
|
|
|
+ let listCopy = {}
|
|
|
+ let lisyCopy1 = {}
|
|
|
+ let listNum = JSON.parse(JSON.stringify(this.seatTypeList))
|
|
|
+ listNum.forEach((item,index)=>{
|
|
|
+ listNum[index]['num'] = 0
|
|
|
+ })
|
|
|
+ list.forEach(item => {
|
|
|
+ item.isDisabled = item.occupyStatus == 1 || (item.occupyStatus==0 && item.occupyOrderId) ? true : false //(item.occupyStatus != null && (item.occupyStatus == 0 || item.occupyStatus == 1) ? true : false); // 座位是否已被选择
|
|
|
+ item.isSelect = this.setIsSelect(item);
|
|
|
+ if(item.rowNo){
|
|
|
+ listNum.forEach((item1,index)=>{
|
|
|
+ if(item1.id == item.seatTypeId && item.status ==1 && !item.occupyStatus && item.occupyStatus !=0 ) {
|
|
|
+ listNum[index]['num'] = listNum[index]['num'] + 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(listCopy['my'+item.rowNo]){
|
|
|
+ listCopy['my'+item.rowNo].push(item)
|
|
|
+ }else {
|
|
|
+ listCopy['my'+item.rowNo] = [item]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.seatTypeList = JSON.parse(JSON.stringify(listNum))
|
|
|
+ let width = 0
|
|
|
+ let flog = 0
|
|
|
+ let seatMapListKey = []
|
|
|
+ Object.keys(listCopy).forEach((item)=>{
|
|
|
+ if(listCopy[item].length>flog) {
|
|
|
+ flog = listCopy[item].length
|
|
|
+ }
|
|
|
+ seatMapListKey.push({
|
|
|
+ key: item,
|
|
|
+ sort: Number(item.replace('my',''))
|
|
|
+ })
|
|
|
+ })
|
|
|
+ seatMapListKey.sort((a,b)=>{
|
|
|
+ return a.sort - b.sort
|
|
|
+ })
|
|
|
+ this.seatMapListKey = seatMapListKey
|
|
|
+ console.log("seatMapListKey=====",seatMapListKey)
|
|
|
+ this.width = 70*(flog + 1)
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ if(this.$refs.seatbox) {
|
|
|
+ var ele = this.$refs.seatbox
|
|
|
+ console.log(ele.getBoundingClientRect().width); // 100
|
|
|
+ if(this.width<ele.getBoundingClientRect().width) {
|
|
|
+ this.justifyContent = true
|
|
|
+ }else {
|
|
|
+ //this.justifyContent = false
|
|
|
+ this.justifyContent = true
|
|
|
+ }
|
|
|
+ //this.$refs.seatbox.scrollTo(this.width/4,0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log("list====",listCopy)
|
|
|
+
|
|
|
+ let columnList = []
|
|
|
+ listCopy[seatMapListKey[0].key].forEach((item,index)=>{
|
|
|
+ columnList.push({
|
|
|
+ ...item,
|
|
|
+ occupyStatus: 2,
|
|
|
+ isDisabled: true,
|
|
|
+ status: 0
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.seatMapListKey.unshift({
|
|
|
+ key: "my_column",
|
|
|
+ sort: -99
|
|
|
+ })
|
|
|
+ listCopy['my_column'] = columnList
|
|
|
+ this.seatMapList = JSON.parse(JSON.stringify(listCopy))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setIsSelect(item){
|
|
|
+ if(!this.seatSelectList||this.seatSelectList.length==0){
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let flog = false
|
|
|
+ this.seatSelectList.forEach((item1,index1)=>{
|
|
|
+ if(item.id == item1.id){
|
|
|
+ flog = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return flog
|
|
|
+ },
|
|
|
+ /** 选择场次时间 */
|
|
|
+ changeTime(value,type){
|
|
|
+ console.log("fsdfsdf----",value,type)
|
|
|
+ if(type == 'timeId') {
|
|
|
+ this.$set(this.queryParams,'goodsId','')
|
|
|
+ if(value) {
|
|
|
+ let flog = false
|
|
|
+ let list2 = []
|
|
|
+ this.merchantPerformTimeListS.forEach((item,index)=>{
|
|
|
+ if(item.id==value) {
|
|
|
+ let list = item.goodsIds ? item.goodsIds.split(','): []
|
|
|
+ list.forEach((item,index)=>{
|
|
|
+ this.goodsPageListSAll.forEach((item1,index1)=>{
|
|
|
+ if(item1.id == item) {
|
|
|
+ flog = true
|
|
|
+ list2.push({
|
|
|
+ ...item1
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(flog) {
|
|
|
+ this.goodsPageListS = JSON.parse(JSON.stringify(list2))
|
|
|
+ }else {
|
|
|
+ this.goodsPageListS = JSON.parse(JSON.stringify(this.goodsPageListSAll))
|
|
|
+ }
|
|
|
+
|
|
|
+ }else {
|
|
|
+ this.goodsPageListS = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.changeTimeCheck(value,type)
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 选择场次时间 */
|
|
|
+ changeTimeCheck(value,type){
|
|
|
+ console.log("fsdfsdf")
|
|
|
+ if(this.queryParams && this.queryParams.timeId && type != 'timeId' && type != 'goodsId') {
|
|
|
+ console.log('sdfsdfsdf',this.queryParams)
|
|
|
+ this.$set(this.queryParams,'timeId','')
|
|
|
+ this.$set(this.queryParams,'goodsId','')
|
|
|
+ this.merchantPerformTimeListS = []
|
|
|
+ this.goodsPageListS = []
|
|
|
+ }
|
|
|
+ if(this.queryParams.auditoriumId&&this.queryParams.performDate){
|
|
|
+ // 获取场次
|
|
|
+ this.merchantPerformTimeListFun()
|
|
|
+ }
|
|
|
+ if(type == 'goodsId'){
|
|
|
+ if(value) {
|
|
|
+ this.getGoodsPerformFun(value)
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ this.ifRealUser = 0 // 散客是否实名:0-否 1-是
|
|
|
+ this.ifRealTeam = 0 // 团购是否实名:0否 1-是
|
|
|
+ this.oneMany = 1 // 证件要求: 1一证一票，2一证多票
|
|
|
+ this.personnelNum = 0 // 人员要求:0-表示不限制 其他数字表示限制人数
|
|
|
+ }
|
|
|
+ this.seatMapListKey = {}
|
|
|
+ this.performId = ''
|
|
|
+ this.seatSelectList = []
|
|
|
+ this.seatSelectListNo = []
|
|
|
+ this.seatMapList = {}
|
|
|
+ this.seatList = []
|
|
|
+ this.handleQuery()
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 设置 场次 对应得剧目ID */
|
|
|
+ changePerformId(value){
|
|
|
+ console.log("value=====",value)
|
|
|
+ this.performId = ''
|
|
|
+ this.merchantPerformTimeListS.forEach((item,index)=>{
|
|
|
+ if(item.id == value){
|
|
|
+ this.performId = item.performId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.$refs.queryForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.querySeatListFun(true);
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.$refs.queryForm.resetFields()
|
|
|
+ this.performId = ''
|
|
|
+ this.seatSelectList = []
|
|
|
+ this.seatSelectListNo = []
|
|
|
+ this.seatMapList = {}
|
|
|
+ this.seatList = []
|
|
|
+ this.handleQuery();
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 座位点击事件
|
|
|
+ seatClick(row) {
|
|
|
+ console.log("是的发给我大是个的风格====",row)
|
|
|
+ if(row.isDisabled || row.status == 2){
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if(this.seatSelectListNo.length>0 && row.occupyStatus != 0) {
|
|
|
+ this.$message.error('你已选择锁定座位,只能再选择被锁定的座位!!!');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.seatSelectList.length > 0 && row.occupyStatus == 0){
|
|
|
+ this.$message.error('此座已被锁定,请先解锁!!!');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(row.occupyStatus == 0){
|
|
|
+ // console.log("weqwrwerewrer")
|
|
|
+ // this.$confirm('此座已被锁定,请先解锁', '提示', {
|
|
|
+ // confirmButtonText: '确定',
|
|
|
+ // cancelButtonText: '取消',
|
|
|
+ // type: 'warning'
|
|
|
+ // }).then(() => {
|
|
|
+ // this.lockOrUnLockFun([row],1)
|
|
|
+ // }).catch((error) => {
|
|
|
+ // console.log("error====",error)
|
|
|
+ // });
|
|
|
+ row.isSelect = !row.isSelect
|
|
|
+ if(row.isSelect){
|
|
|
+ this.seatSelectListNo.push(JSON.parse(JSON.stringify(row)))
|
|
|
+ }else {
|
|
|
+ let list = JSON.parse(JSON.stringify(this.seatSelectListNo))
|
|
|
+ list.forEach((item,index)=>{
|
|
|
+ if(item.id == row.id) {
|
|
|
+ this.seatSelectListNo.splice(index, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }else if(row.isDisabled || row.status == 2){
|
|
|
+ return false
|
|
|
+ }else {
|
|
|
+ let flog = false;
|
|
|
+ this.seatSelectList.forEach((item,index)=>{
|
|
|
+ if(item.seatTypeId != row.seatTypeId ) {
|
|
|
+ flog = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(flog){
|
|
|
+ this.$message.error('只能选同一类型的座位');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ row.isSelect = !row.isSelect
|
|
|
+ if(row.isSelect){
|
|
|
+ this.seatSelectList.push(JSON.parse(JSON.stringify(row)))
|
|
|
+ }else {
|
|
|
+ let list = JSON.parse(JSON.stringify(this.seatSelectList))
|
|
|
+ list.forEach((item,index)=>{
|
|
|
+ if(item.id == row.id) {
|
|
|
+ this.seatSelectList.splice(index, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //this.$forceUpdate()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 删除已选座位 */
|
|
|
+ delSeatSelect(row){
|
|
|
+ // row.isSelect = !row.isSelect
|
|
|
+ // if(row.isSelect){
|
|
|
+ // this.seatSelectList.push(JSON.parse(JSON.stringify(row)))
|
|
|
+ // }else {
|
|
|
+ // let list = JSON.parse(JSON.stringify(this.seatSelectList))
|
|
|
+ // list.forEach((item,index)=>{
|
|
|
+ // if(item.id == row.id) {
|
|
|
+ // this.seatSelectList.splice(index, 1)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ let list = JSON.parse(JSON.stringify(this.seatSelectList))
|
|
|
+ list.forEach((item,index)=>{
|
|
|
+ if(item.id == row.id) {
|
|
|
+ this.seatSelectList.splice(index, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ Object.keys(this.seatMapList).forEach((item1,index)=>{
|
|
|
+ this.seatMapList[item1].forEach((item,index)=>{
|
|
|
+ if(item.id == row.id) {
|
|
|
+ item.isSelect = !item.isSelect
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ increaseViewersFun(){
|
|
|
+ if(this.seatSelectList.length>0){
|
|
|
+ // if(this.ifRealUser != 0 || this.ifRealTeam != 0 ) {
|
|
|
+ // if(this.personnelNum != 0) {
|
|
|
+ // if( this.seatSelectList.length != this.personnelNum ) {
|
|
|
+ // this.$message.error(`票务类型设置了实名要求,选择人数为${ this.personnelNum }人`);
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ if(this.personnelNum != 0) {
|
|
|
+ if( this.seatSelectList.length != this.personnelNum ) {
|
|
|
+ this.$message.error(`票务类型设置了实名要求,选择人数为${ this.personnelNum }人`);
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.changePerformId(this.queryParams.timeId)
|
|
|
+ this.$refs.increaseViewers.initData(this.seatSelectList,{
|
|
|
+ ...this.queryParams,
|
|
|
+ performId:this.performId,
|
|
|
+ ifRealUser: this.ifRealUser, // 散客是否实名:0-否 1-是
|
|
|
+ ifRealTeam: this.ifRealTeam, // 团购是否实名:0否 1-是
|
|
|
+ oneMany: this.oneMany, // 证件要求: 1一证一票，2一证多票
|
|
|
+ personnelNum: this.personnelNum, // 人员要求:0-表示不限制 其他数字表示限制人数
|
|
|
+ })
|
|
|
+ }else {
|
|
|
+ this.$alert('请先选择座位!!!', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ callback: action => {
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 弹窗关闭 */
|
|
|
+ clearDialogVisible(){
|
|
|
+ //this.
|
|
|
+ this.querySeatListFun(true)
|
|
|
+ },
|
|
|
+ /** 选择tab */
|
|
|
+ handleClickTab(){
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 获取座位类型 说明 */
|
|
|
+ getSeatTypeList() {
|
|
|
+ getSeatType({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 999,
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.seatTypeList = response.data.rows;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ /** 显示座位类型 */
|
|
|
+ setSeatTypeShow(value){
|
|
|
+ let srt = ''
|
|
|
+ this.seatTypeList.forEach((item,index)=>{
|
|
|
+ if(value == item.id) {
|
|
|
+ srt = item.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return srt
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取限购标准
|
|
|
+ async getGoodsPerformFun(id){
|
|
|
+ try {
|
|
|
+ let res = await getGoodsPerformApi({
|
|
|
+ goodsId: id
|
|
|
+ })
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.ifRealUser = res.data.ifRealUser // 散客是否实名:0-否 1-是
|
|
|
+ this.ifRealTeam = res.data.ifRealTeam // 团购是否实名:0否 1-是
|
|
|
+ this.oneMany = res.data.oneMany // 证件要求: 1一证一票，2一证多票
|
|
|
+ this.personnelNum = res.data.personnelNum // 人员要求:0-表示不限制 其他数字表示限制人数
|
|
|
+ }else {
|
|
|
+ this.ifRealUser = 0 // 散客是否实名:0-否 1-是
|
|
|
+ this.ifRealTeam = 0 // 团购是否实名:0否 1-是
|
|
|
+ this.oneMany = 1 // 证件要求: 1一证一票，2一证多票
|
|
|
+ this.personnelNum = 0 // 人员要求:0-表示不限制 其他数字表示限制人数
|
|
|
+ }
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ this.ifRealUser = 0 // 散客是否实名:0-否 1-是
|
|
|
+ this.ifRealTeam = 0 // 团购是否实名:0否 1-是
|
|
|
+ this.oneMany = 1 // 证件要求: 1一证一票，2一证多票
|
|
|
+ this.personnelNum = 0 // 人员要求:0-表示不限制 其他数字表示限制人数
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 获取锁定人和锁定备注 */
|
|
|
+ async lockOrUnLockDeatilFun(e,item) {
|
|
|
+ try {
|
|
|
+ if(this.lckTime) {
|
|
|
+ clearTimeout(this.lckTime)
|
|
|
+ }
|
|
|
+ if(item.occupyStatus !== 0) {
|
|
|
+ this.isLcokShow = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(item.id == this.seatId){ return }
|
|
|
+ this.seatId = item.id
|
|
|
+ this.isLcokShow = false
|
|
|
+ this.lckTime = setTimeout(async ()=>{
|
|
|
+ let res = await lockOrUnLockApi({
|
|
|
+ auditoriumId: this.queryParams.auditoriumId,
|
|
|
+ timeId: this.queryParams.timeId,
|
|
|
+ seatId: item.id
|
|
|
+ })
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.isLcokShow = true
|
|
|
+ this.lockObj = {
|
|
|
+ remark: res.data.remark,
|
|
|
+ auth: res.data.createBy
|
|
|
+ }
|
|
|
+ this.lockStyle = {
|
|
|
+ position: "fixed",
|
|
|
+ top: (e.y + 10) + 'px',
|
|
|
+ left: (e.x + 10)+ 'px',
|
|
|
+ zIndex: 999999
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.handleClose()
|
|
|
+ }
|
|
|
+ },500)
|
|
|
+ } catch (error) {
|
|
|
+ this.handleClose()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ lockOrUnLockDeatilFun1() {
|
|
|
+ this.isLcokShow = false
|
|
|
+ this.seatId = null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+ <style>
|
|
|
+ .lock-style-box {
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99999;
|
|
|
+ background-color: rgba(0,0,0,0.5);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+ <style lang="scss" scoped>
|
|
|
+ .app-container-me {
|
|
|
+ width: 100%;
|
|
|
+ height: calc( 100vh - 120px );
|
|
|
+ }
|
|
|
+ .seat-tool-box {
|
|
|
+ height: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span{
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .seat-tool-box-slider {
|
|
|
+ width: 100px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .seat-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc( 100% - 100px ) ;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ .seat-list-box {
|
|
|
+ width: calc(100% - 210px);
|
|
|
+ //width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .seat-select-box {
|
|
|
+ width: 200px;
|
|
|
+ height: 100%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 5px;
|
|
|
+ margin-left: 10px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 10px;
|
|
|
+ .seat-select-info {
|
|
|
+ width: 100%;
|
|
|
+ height: calc( 100% - 60px );
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ .seat-select-item {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ >div:first-child {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ span:first-child {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >div:last-child {
|
|
|
+ span:first-child {
|
|
|
+ color: #f56c6c;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .seat-select-color-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ >span:first-child {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ >span:last-child {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .seat-list-box::before {
|
|
|
+ content: "舞台";
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 300px;
|
|
|
+ height: 30px;
|
|
|
+ background-color: rgb(204, 204, 204,0.5);
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 0 0 20px 20px;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ .dialog {
|
|
|
+ padding: 30px 10px 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #323333;
|
|
|
+ position: relative;
|
|
|
+ .dialog-box {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .upload-btn {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: #fbfdff;
|
|
|
+ border: dashed 1px #c0ccda;
|
|
|
+ border-radius: 5px;
|
|
|
+ i {
|
|
|
+ font-size: 30px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ &-text {
|
|
|
+ margin-top: -10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .avatar {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .title-class{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: black;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .item-class{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .seat-box-class{
|
|
|
+ padding: 5px;
|
|
|
+ transform-origin: 50% 0;
|
|
|
+ transform: scale(var(--scaleNum));
|
|
|
+ box-sizing: border-box;
|
|
|
+ .disabled-class{
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: none !important;
|
|
|
+ user-select: none;
|
|
|
+ // pointer-events: none;
|
|
|
+ cursor: not-allowed !important;
|
|
|
+ .text-class {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-class{
|
|
|
+ //background-color: #e85353 !important;
|
|
|
+ border: 5px solid #1890ff !important;
|
|
|
+ // color: #eceaea !important;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 手动锁定 */
|
|
|
+ .occupy-status:after{
|
|
|
+ content:"";
|
|
|
+ display:block;
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ background-color:rgba(0,0,0,0.3);
|
|
|
+ z-index:-1;
|
|
|
+ background-image: url('../../assets/jinzhi_1.png');
|
|
|
+ background-size: 50% 50%;
|
|
|
+ background-position: 50% 50%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ .occupy-status {
|
|
|
+ //pointer-events: none;
|
|
|
+ }
|
|
|
+ /** 锁定被选择 */
|
|
|
+ .occupy-status-select {
|
|
|
+ border: 5px solid #ff182f !important;
|
|
|
+ }
|
|
|
+ /** 订单待支付锁定 */
|
|
|
+ .order-occupy-status {
|
|
|
+
|
|
|
+ }
|
|
|
+ .order-occupy-status:after{
|
|
|
+ content:"";
|
|
|
+ display:block;
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ background-color:rgba(0,0,0,0.3);
|
|
|
+ z-index:-1;
|
|
|
+ background-image: url('../../assets/jinzhi.png');
|
|
|
+ background-size: 50% 50%;
|
|
|
+ background-position: 50% 50%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ .occupy-status-no {
|
|
|
+ background-color: #f56c6c !important;
|
|
|
+ user-select: none;
|
|
|
+ // pointer-events: none;
|
|
|
+ cursor: not-allowed !important;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ /* .occupy-status-no:after{
|
|
|
+ content:"";
|
|
|
+ display:block;
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ background-color:rgba(0,0,0,0.3);
|
|
|
+ z-index:-1;
|
|
|
+ background-image: url('../../assets/jinzhi_1.png');
|
|
|
+ background-size: 50% 50%;
|
|
|
+ background-position: 50% 50%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ z-index: 99;
|
|
|
+ } */
|
|
|
+ .seat-item-class-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: center;
|
|
|
+ margin: auto 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .seat-item-class{
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin: 5px;
|
|
|
+ border: 1px solid #4c4d4d;
|
|
|
+ border-radius: 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ user-select: none;
|
|
|
+ // transform-origin: 50% 50%;
|
|
|
+ // transform: scale(var(--scaleNum));
|
|
|
+ z-index: 999;
|
|
|
+ &:hover{
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-class{
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 5px;
|
|
|
+ line-height: 16px;
|
|
|
+ margin: 0;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .seat-box-class-row {
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center;
|
|
|
+ user-select: none;
|
|
|
+ cursor: not-allowed !important;
|
|
|
+ border: none !important;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ .seat-item-class-column {
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ user-select: none;
|
|
|
+ cursor: not-allowed !important;
|
|
|
+ border: none !important;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dialog::-webkit-scrollbar {
|
|
|
+ width: 10x !important;
|
|
|
+ height: 10px !important;
|
|
|
+ }
|
|
|
+ .dialog::-webkit-scrollbar {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ .dialog::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 15px;
|
|
|
+ //background-color: #0257aa;
|
|
|
+ }
|
|
|
+ #moveSelected{
|
|
|
+ position:absolute;
|
|
|
+ background-color: blue;
|
|
|
+ opacity:0.3;
|
|
|
+ border:1px dashed #d9d9d9;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+}
|
|
|
+ </style>
|
MONSTER-ygh