js-life/src/pages/cinema/selectseat.vue

<template>
	<page-meta>
		<navigation-bar :title="showItem.filmName" background-color="#FFFFFF" front-color="#000000" />
	</page-meta>
	<view>
		<view class="seatSelection-box">
			<view class="top-box">
				<view class="address">
					{{showItem.cinemaName}}
				</view>
				<view class="logo-box">
					<view class="item">
						<view class="seat selectable"></view>可选
					</view>
					<view class="item">
						<view class="seat selected"></view>已选
					</view>
					<view class="item">
						<view class="seat notSelect"></view>已售
					</view>
				</view>
			</view>
			<movable-area scale-area class="movable-area">
				<movable-view scale out-of-bounds direction='all' scale-max="3" @scale='scaleChange'>
					<view class="movable-box">
						<view class="screen-box">
							<image class="screen" src="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E9%93%B6%E5%B9%95.png"
							 mode="widthFix"></image>
							<text class="screen-name">{{showItem.hallName}}</text>
						</view>
						<loadSke :loading='loading'>
							<view class="seat-box" :style="{'--col':collong}">
								<van-checkbox-group :value="seatResult" @change="groupOnChange" :max="max">
									<view class="col" v-for="(rowitem,rowindex) in rowlong" :key='rowindex'>
										<view v-for="(colitem,colindex) in collong" :key='colindex'>
											<van-checkbox use-icon-slot v-if="seatSet(rowindex,colindex,seatList)==='N'" :name="JSON.stringify(seatList[rowindex+1][colindex+1])">
												<view class="seat" :class="{selected:selected(rowindex,colindex,seatResult)}" slot="icon"></view>
											</van-checkbox>
											<view v-else-if="seatSet(rowindex,colindex,seatList)==='LK'" class="seat notSelect"></view>
											<view v-else class="seat noneSeat"></view>
										</view>
									</view>
								</van-checkbox-group>
							</view>
						</loadSke>
					</view>
				</movable-view>
			</movable-area>
		</view>

		<view class="bottom-box">
			<view class="buy-des">
				<view class="film-des">
					{{showItem.showTime}}
				</view>
				<view class="item-box">
					<view class="seat-item" v-for="(item,index) in seatResult" :key='index'>
						<view class="">
							{{JSON.parse(item).seatNo}}
						</view>
						<van-icon name="cross" @click='remove(item)' />
					</view>
				</view>
			</view>
			<view class="price-box">
				<view class="left-box">
					总共:{{seatResult.length}}张
				</view>
				<button v-if="seatResult.length>0" class="btn" type="default" @click="goPage(`/pages/cinema/placeorder`,null,{seatResult:seatResult,showItem:showItem})">下一步</button>
				<button v-else class="btn" style="background: linear-gradient(90deg, #c0c0c0, #c0c0c0, #c0c0c0);" type="default">下一步</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getSeat
	} from '@/api/cinema.js'
	export default {
		data: () => ({
			showItem: null,
			seatList: null,
			rowlong: 0,
			collong: 0,
			seatResult: [],
			max: null,
			loading: true
		}),
		onLoad: async function(option) {
			let data = await this.goPageGetData()
			this.showItem = data.showItem
		},
		mounted() {
			this.init()
		},
		methods: {
			scaleChange(e) {
				console.log(e)
			},
			groupOnChange(e) {
				this.seatResult = e.detail
			},
			remove(item) {
				this.seatResult.splice(this.seatResult.indexOf(item), 1)
			},
			seatSet(row, col, list) {
				if (!list) {
					return false
				} else if (list[row + 1]) {
					if (list[row + 1][col + 1])
						return list[row + 1][col + 1].status
				}
			},
			selected(row, col, seatResult) {
				let flag = false
				seatResult.forEach((val) => {
					if (JSON.parse(val).columnNo == col + 1 && JSON.parse(val).rowNo == row + 1)
						flag = true
				})
				return flag
			},
			loveSeat(row, col, list) {
				return ''
			},
			async init() {
				let seatRes = await getSeat({
					showId: this.showItem.showId
				})
				console.log(seatRes)
				this.max = seatRes.data.data.seatData.restrictions
				seatRes.data.data.seatData.seats.forEach((val) => {
					this.seatList || (this.seatList = {})
					this.seatList[val.rowNo] || (this.seatList[val.rowNo] = {})
					// this.$set(this.seatList[val.rowNo], val.columnNo, val)
					if (parseInt(val.rowNo) > this.rowlong) {
						this.rowlong = parseInt(val.rowNo)
					}
					if (parseInt(val.columnNo) > this.collong) {
						this.collong = parseInt(val.columnNo)
					}
					this.seatList[val.rowNo][val.columnNo] = val
				})
				this.$nextTick(() => {
					this.loading = false
				})
				console.log(this.seatList)
			}
		}
	}
</script>

<style lang="scss">
	.movable-area {
		width: 100vw;
		min-height: 500rpx;
	}

	.movable-box {
		width: 100vw;
		min-height: 500rpx;
	}

	.seatSelection-box {
		box-sizing: border-box;

		.top-box {
			padding: 30rpx;
			box-sizing: border-box;

			.address {
				font-size: 30rpx;
				font-weight: 400;
				color: #0F0404;
			}

			.logo-box {
				margin-top: 43rpx;
				width: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					display: flex;
					justify-content: center;
					align-items: center;
				}


			}
		}


		.seat {
			width: 26rpx;
			height: 26rpx;
			border: 1rpx solid #D9D9D9;
			border-radius: 4rpx;
			background: #FFFFFF;
		}

		.noneSeat {
			opacity: 0;
		}

		.notSelect {
			opacity: 1;
			background: #FB3D46;
		}

		.selected {
			opacity: 1;
			background: #47CB79;
		}



		.screen-box {
			position: relative;
			margin-top: 47rpx;

			.screen {
				width: 100%;
			}

			.screen-name {
				position: absolute;
				left: 50%;
				top: 30rpx;
				transform: translateX(-50%);
				white-space: nowrap;
				font-size: 22rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.seat-box {
			margin-top: 50rpx;
			width: calc(var(--col) * 30rpx);
			margin: auto;

			.col {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 15rpx;
			}
		}
	}

	.bottom-box {
		position: fixed;
		width: 100vw;
		bottom: 0;

		.buy-des {
			background-color: #FFFFFF;
			padding: 30rpx;

			.film-des {
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
			}

			.item-box {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.seat-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 200rpx;
					background: #E6E6E6;
					border-radius: 10rpx;
					margin: 20rpx 20rpx 0rpx 0rpx;
					padding: 20rpx;
					box-sizing: border-box;
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;
			padding: 15rpx 30rpx;
			padding-bottom: calc(15rpx + 10px + env(safe-area-inset-bottom)/2);
			margin-top: 20rpx;

			.left-box {
				font-size: 26rpx;
				font-weight: 400;
				color: #0F0404;
			}

			.btn {
				margin: 0;
				width: 200rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				white-space: nowrap;
			}
		}
	}
</style>