jpcj-xcx/pages/cinema/cinemalist.vue

<template>
	<view>
		<van-tabs :active='active' :swipe-threshold='3' animated sticky id='tabs'>
			<van-tab :title="getDay(dateItem)+' '+dateItem.slice(5)" v-for='(dateItem,dateIndex) in showDate' :key='index'>
				<loadSke :loading='cinemaLoading' :list='cinemaList[dateItem]'>
					<view class="cinema-box" v-for="(item,index) in cinemaList[dateItem]" :key='index' @click='goPage(`/pages/cinema/schedulelist?cinemaId=${item.cinemaId}&filmId=${filmId}`)'>
						<view class="tit">
							<text>{{item.cinemaName}}</text>
							<text class="text-2">{{item.distance}}</text>
						</view>
						<text class="address">{{item.address}}</text>
					</view>
				</loadSke>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import {
		getCinemaList,
		getShowList,
		getShowDate
	} from '@/api/cinema.js'
	export default {
		data: () => ({
			active: 0,
			cinemaList: {},
			cinemaLoading: true,
			dateLoading: true,
			filmId: null,
			cityId: null,
			location: null,
			showDate: []
		}),
		onLoad: function(option) {
			this.filmId = option.filmId
			this.cityId = option.cityId
			this.location = option.location.split(',')
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				let showDateRes = await getShowDate({
					cityId: this.cityId,
					filmId: this.filmId,
				})
				this.showDate = showDateRes.data.data.dateList
				this.dateLoading = false
				this.$nextTick(() => {
					this.selectComponent('#tabs').resize();
				})
				this.showDate.forEach(async val => {
					let showListRes = await getShowList({
						cityId: this.cityId,
						filmId: this.filmId,
						latitude: this.location[1],
						longitude: this.location[0],
						page: 1,
						limit: 30,
						date: val
					})
					this.$set(this.cinemaList, val, showListRes.data.data.list)
					this.cinemaLoading = false
				})

			}
		}
	}
</script>

<style lang="scss">
	.cinema-box {
		padding: 30rpx;
		border-top: 1rpx solid #E8E8E8;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;

		.tit {
			display: flex;
			justify-content: space-between;

			.text-1 {
				font-size: 30rpx;
				color: #0F0404;
			}

			.text-2 {
				font-size: 26rpx;
				color: #999999;
				white-space: nowrap;
			}
		}

		.address {
			margin-top: 20rpx;
			width: 600rpx;
			font-size: 26rpx;
			color: #666666;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
</style>