jpcj-xcx/pages/cinema/cinemalist.vue

<template>
	<view>
		<loadSke :loading='cinemaLoading' :list='cinemaList'>
			<view class="cinema-box" v-for="(item,index) in cinemaList" :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>
	</view>
</template>

<script>
	import loadSke from '@/components/skeleton/index/index.vue'
	import {
		getCinemaList,
		getShowList
	} from '@/api/cinema.js'
	export default {
		components: {
			loadSke
		},
		data: () => ({
			cinemaList: [],
			cinemaLoading: true,
			filmId: null,
			cityId: null,
			location: null
		}),
		onLoad: function(option) {
			this.filmId = option.filmId
			this.cityId = option.cityId
			this.location = option.location.split(',')
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				getShowList({
					cityId: this.cityId,
					filmId: this.filmId,
					latitude: this.location[1],
					longitude: this.location[0]
				}).then(res => {
					this.cinemaList = res.data.data.list
					this.cinemaLoading = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.cinema-box {
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: 1rpx solid #E8E8E8;

		.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 {
			font-size: 26rpx;
			color: #666666;
		}
	}
</style>