jpcj-xcx/pages/cinema/schedulelist.vue

<template>
	<page-meta>
		<navigation-bar :title="filmList[filmId].name" background-color="#FFFFFF" front-color="#000000" />
	</page-meta>
	<view class="schedulelist">
		<loadSke :loading='listLoading'>
			<view class="des-box">
				<view class="address">
					{{cinemaName}}
				</view>
				<swiper class="swiper-box" :current="current" previous-margin='200rpx' next-margin='200rpx' @change='swiperChange'>
					<swiper-item v-for="(item,index) in scheduleListKey" :key='index' class="swiper-item">
						<image class="image" :class="{imgBig:current==index}" :src="filmList[item].pic" mode="heightFix" :draggable="false" />
					</swiper-item>
				</swiper>
				<view class="film-name">
					{{filmList[filmId].name}}
				</view>
				<view class="film-des">
					{{filmList[filmId].duration}}分钟 | {{filmList[filmId].filmTypes}} | {{filmList[filmId].cast}}
				</view>
			</view>

			<view class="schedule-box">
				<van-tabs  v-if="tabShow" :active='tabActive' :swipe-threshold='3' bind:change="onChange" animated swipeable id="tabs">
					<van-tab class='schedule-tab' :title="index" v-for='(item,index) in scheduleItem' :key='item[0][0].showId'>
						<view v-for="(sonItem,sonIndex) in item" :key='sonItem.showId' class="schedule-des">
							<view class="left-box">
								<view class="item-box">
									<text>{{sonItem.showTime.slice(-5)}}</text>
									<text class="bottom-text">{{sonItem.duration}}分钟</text>
								</view>
								<view class="type-box">
									<text>{{sonItem.planType}}</text>
									<text class="bottom-text">{{sonItem.hallName}}</text>
								</view>
							</view>
							<view class="right-box">
								<view class="price-box">
									<text>{{(sonItem.netPrice/100*(sonItem.netPrice>3900?discountRule.upDiscountRate:discountRule.downDiscountRate)*filmDiscount).toFixed(2)}}元</text>
									<text class="bottom-text old-price">{{sonItem.netPrice/100}}元</text>
								</view>
								<button v-if='discontinued(sonItem.stopSellTime)' type="default" @click="goPage(`/pages/cinema/selectseat?showItem=${JSON.stringify(sonItem)}`)">购
									票</button>
								<button v-else type="default" style="background: linear-gradient(90deg, #c0c0c0, #c0c0c0, #c0c0c0);">停 售</button>
							</view>
						</view>
					</van-tab>
				</van-tabs>
			</view>
		</loadSke>
	</view>
</template>

<script>
	import loadSke from '@/components/skeleton/index/index.vue'
	import {
		getScheduleList,
		getfilmInfo
	} from '@/api/cinema.js'
	export default {
		components: {
			loadSke
		},
		data: () => ({
			listLoading: true,
			tabActive: 0,
			current: 0,
			cinemaId: null,
			filmId: null,
			cinemaName: '',
			scheduleList: null,
			scheduleListKey: null,
			discountRule: {},
			tabShow: true
		}),
		computed: {
			filmList() {
				let list = {}
				this.$store.state.cinema.filmList.map((val) => {
					list[val.filmId] = val
				})
				return list;
			},
			filmDiscount() {
				return this.$store.state.cinema.filmDiscount;
			},
			scheduleItem() {
				return this.scheduleList[this.filmId]
			}
		},
		onLoad: function(option) {
			this.cinemaId = option.cinemaId;
			this.filmId = option.filmId;
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.listLoading = true
				getScheduleList({
					cinemaId: this.cinemaId
				}).then(res => {
					this.scheduleList = {}
					this.discountRule = res.data.data.discountRule
					this.$store.commit('SET_DISCOUNTRULE', res.data.data.discountRule)
					this.cinemaName = res.data.data.list[0].cinemaName
					res.data.data.list.map((val) => {
						this.scheduleList[val.filmId] || (this.scheduleList[val.filmId] = {})
						this.scheduleList[val.filmId][val.showDate] || (this.scheduleList[val.filmId][val.showDate] = [])
						this.scheduleList[val.filmId][val.showDate].push(val)
					})
					this.scheduleListKey = Object.keys(this.scheduleList)
					//定位影片位置
					this.current = this.scheduleListKey.indexOf(this.filmId)
					this.listLoading = false
				})
			},
			discontinued(date) {
				let flag = (new Date(date.replace(/-/g, "/")).getTime() - new Date().getTime()) > 0
				return flag
			},
			swiperChange(e) {
				this.current = e.detail.current
				this.filmId = this.scheduleListKey[this.current]
				this.selectComponent('#tabs').resize();
				this.tabActive = 0
				this.tabShow = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.des-box {
		background-image: url(https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/filmBg.png);
		padding: 35rpx 30rpx;
		box-sizing: border-box;
		width: 100%;
		height: 690rpx;

		.address {
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.swiper-box {
			margin: auto;
			margin-top: 60rpx;
			padding: 0 45rpx;
			box-sizing: border-box;
			width: 100%;
			height: 270rpx;

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

			.image {
				height: 86%;
			}

			.imgBig {
				height: 100% !important;
			}
		}

		.film-name {
			margin-top: 53rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		.film-des {
			margin-top: 19rpx;
			text-align: center;
			font-size: 22rpx;
			font-weight: 400;
			color: #FFFFFF;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.schedule-box {
		width: 100vw;
		min-height: calc(100vh - 690rpx + 122rpx - 10px - env(safe-area-inset-bottom)/2);
		padding-bottom: calc(10px + env(safe-area-inset-bottom)/2);
		background-color: #FFFFFF;
		border-radius: 50rpx 50rpx 0px 0px;
		margin-top: -122rpx;
		overflow: hidden;

		.schedule-tab {
			overflow-y: auto;
		}

		.schedule-des {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			margin-top: 50rpx;

			.bottom-text {
				font-size: 22rpx;
				font-weight: 400;
				color: #999999;
				width: 100rpx;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.left-box {
				width: 50%;
				display: flex;
				justify-content: space-around;
				align-items: stretch;

				.item-box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					&:first-child {
						font-size: 40rpx;
						font-weight: 400;
						color: #0F0404;
					}
				}

				.type-box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					&:first-child {
						font-size: 26rpx;
						font-weight: 400;
						color: #0F0404;
					}

					:last-child {
						width: 220rpx !important;
					}
				}
			}

			.right-box {
				width: 45%;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.price-box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					&:first-child {
						font-size: 36rpx;
						font-weight: 400;
						color: #E31919;
					}

					.old-price {
						text-decoration: line-through;
					}
				}

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