|
|
@@ -81,23 +81,30 @@
|
|
|
<!-- 选择座位 -->
|
|
|
<div class="seat-list-box">
|
|
|
<!-- 座位排版 -->
|
|
|
- <div v-loading="loading" class="dialog">
|
|
|
- <div class="seat-box-class clearfix" v-if="seatMapList">
|
|
|
- <div
|
|
|
- class="seat-item-class-box"
|
|
|
- v-for="(item1, index1) in Object.keys(seatMapList)"
|
|
|
- :key="index1"
|
|
|
+ <div v-loading="loading" id="seatbox-me" @scroll="scroll" ref="seatbox" class="dialog">
|
|
|
+ <div class="dialog-box" :style="{width: width + 'px', margin: justifyContent ? 'auto' : 'unset'}">
|
|
|
+ <div
|
|
|
+ style="width: 100%;position: absolute;"
|
|
|
+ class="seat-box-class clearfix" v-if="seatMapList"
|
|
|
>
|
|
|
- <div
|
|
|
- class="seat-item-class"
|
|
|
- :class="item.occupyStatus==0?'occupy-status': item.isDisabled || item.status == 2 ? 'disabled-class' : item.isSelect ? 'select-class' : ''"
|
|
|
- v-for="(item, index) in seatMapList[item1]"
|
|
|
- @click.stop="seatClick(item)"
|
|
|
- :key="index">
|
|
|
- <p class="text-class">{{ item.status == 2 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+
|
|
|
+ class="seat-item-class-box"
|
|
|
+ v-for="(item1, index1) in Object.keys(seatMapList)"
|
|
|
+ :key="index1"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="seat-item-class"
|
|
|
+ :class="item.occupyStatus==0?'occupy-status': item.isDisabled || item.status == 2 ? 'disabled-class' : item.isSelect ? 'select-class' : ''"
|
|
|
+ v-for="(item, index) in seatMapList[item1]"
|
|
|
+ @click.stop="seatClick(item)"
|
|
|
+ :key="index">
|
|
|
+ <p class="text-class">{{ item.status == 2 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
<div style="margin-top: 5px; margin-left: 30px;display: flex;">
|
|
|
<div style="flex-shrink: 0;">
|
|
|
@@ -176,6 +183,9 @@
|
|
|
|
|
|
performId: '',// 剧目ID
|
|
|
scaleNum: 30,
|
|
|
+
|
|
|
+ width: 0,
|
|
|
+ justifyContent: false
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -296,6 +306,10 @@
|
|
|
console.error("error===",error)
|
|
|
}
|
|
|
},
|
|
|
+ /** scroll */
|
|
|
+ scroll(e){
|
|
|
+ console.log("滚动位置",e)
|
|
|
+ },
|
|
|
// 设置座位集合
|
|
|
setSeatMapList(list) {
|
|
|
if(list && list.length > 0) {
|
|
|
@@ -312,9 +326,27 @@
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
- // Object.keys(listCopy).forEach((item)=>{
|
|
|
- // lisyCopy[item]
|
|
|
- // })
|
|
|
+ let width = 0
|
|
|
+ let flog = 0
|
|
|
+ Object.keys(listCopy).forEach((item)=>{
|
|
|
+ if(listCopy[item].length>flog) {
|
|
|
+ flog = listCopy[item].length
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.width = 70*flog
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ if(this.$refs.seatbox) {
|
|
|
+ var ele = document.getElementById('seatbox-me');
|
|
|
+ console.log(ele.getBoundingClientRect().width); // 100
|
|
|
+ if(this.width<ele.getBoundingClientRect().width) {
|
|
|
+ this.justifyContent = true
|
|
|
+ }else {
|
|
|
+ this.justifyContent = false
|
|
|
+ }
|
|
|
+ this.$refs.seatbox.scrollTo(this.width/4,0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
console.log("list====",listCopy)
|
|
|
this.seatMapList = JSON.parse(JSON.stringify(listCopy))
|
|
|
}
|
|
|
@@ -510,6 +542,10 @@
|
|
|
overflow: auto;
|
|
|
border-radius: 10px;
|
|
|
border: 1px solid #323333;
|
|
|
+
|
|
|
+ .dialog-box {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
.upload-btn {
|
|
|
width: 100px;
|
|
|
height: 100px;
|
|
|
@@ -538,6 +574,7 @@
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
.seat-box-class{
|
|
|
+ width: 3000px;
|
|
|
padding: 5px;
|
|
|
transform-origin: 50% 0;
|
|
|
transform: scale(var(--scaleNum));
|
|
|
@@ -578,6 +615,7 @@
|
|
|
display: flex;
|
|
|
flex-wrap: nowrap;
|
|
|
justify-content: center;
|
|
|
+ margin: auto 0;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.seat-item-class{
|
MONSTER-ygh