jpcj-xcx/pages/index/components/cinema.vue

<template>
	<view class="cinema">
		<topbar>
			<view class="topbar-box">
				<view class="left-box">
					<van-icon name="location" />
					<text>{{address}}</text>
					<van-icon name="arrow-down" />
				</view>
				<van-search class='top-search' shape="round" background="#fff" placeholder="请输入搜索关键词" @search="onSearch" @change='onSearchChange' />
			</view>
		</topbar>
		<!-- <van-index-bar :sticky='false' sticky-offset-top='100'>
			<view v-for="(item,index) in cityList" :key='index'>
				<van-index-anchor :index="index" />
				<van-cell @click='selectCity(sonitem)' :title="sonitem.regionName" v-for="(sonitem,sonindex) in item" :key='sonindex' />
			</view>
		</van-index-bar> -->
		<van-tabs :active='tabActive' animated sticky>
			<van-tab title="热映">
				<loadSke :loading='hotLoading' :list='hotList'>
					<view class="flex-box">
						<view @click="goPage(`/pages/cinema/cinemalist?filmId=${item.filmId}&cityId=${cityId}&location=${location}`)"
						 class="film-box" v-for="(item,index) in hotList" :key='index'>
							<image :src="item.pic" mode="scaleToFill" class="img" draggable></image>
							<view class="bottom-box">
								<view class="tit">
									<text class="text-1">{{item.name}}</text>
									<text class="text-2">{{item.grade ?'评分'+item.grade : '暂无评分'}}</text>
								</view>
								<view class="des-box">
									<view class="des">{{item.filmTypes}}</view>
									<view class="des">{{item.cast}}</view>
								</view>

								<button type="default" class="buy">
									购 票
								</button>
							</view>
						</view>
					</view>
				</loadSke>
			</van-tab>
			<van-tab title="影院">
				<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}}km</text>
						</view>
						<text class="address">{{item.address}}</text>
					</view>
				</loadSke>
			</van-tab>
			<van-tab title="即将上映">
				<loadSke :loading='soonLoading'>
					<view class="soon-box" v-for="(ObjItem,ObjIndex) in soonList" :key='ObjIndex'>
						<view class="tit-text">
							<van-icon class='icon' name="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E6%97%A5%E6%9C%9F.png" />
							{{ObjIndex}}
						</view>
						<view class="flex-box">
							<view class="film-box" v-for="(item,index) in ObjItem" :key='index'>
								<image :src="item.pic" mode="scaleToFill" class="img" draggable></image>
								<view class="bottom-box">
									<view class="tit">
										<text class="text-1">{{item.name}}</text>
										<text class="text-2">{{item.grade ?'评分'+item.grade : '暂无评分'}}</text>
									</view>
									<view class="des-box">
										<view class="des">{{item.filmTypes}}</view>
										<view class="des">{{item.cast}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</loadSke>
			</van-tab>

		</van-tabs>






	</view>
</template>


<script>
	import loadSke from '@/components/skeleton/index/index.vue'
	import {
		getPayData
	} from '@/api/pay.js'
	import {
		amapRegeo
	} from '@/api/amap.js'
	import {
		getHotList,
		getSoonList,
		getCityList,
		getInfo,
		getFilmDiscount,
		getCinemaList
	} from '@/api/cinema.js'
	export default {
		components: {
			loadSke
		},
		data: () => ({
			tabActive: 0,
			hotList: [],
			soonList: {},
			hotLoading: true,
			soonLoading: true,
			location: [119.131390, 26.150210],
			cityList: [],
			cityId: 188,
			address: '定位中',
			cinemaList:{},
			cinemaLoading:true
		}),
		async mounted() {
			this.setFilmDiscount()
			await this.getLocation()
		},
		watch: {
			cityId() {
				this.init()
				this.cinemaListInit()
			}
		},
		methods: {
			setFilmDiscount() {
				getFilmDiscount().then(res => {
					this.$store.commit('SET_FILMDISCOUNT', res.data)
				})
			},
			async getLocation() {
				let location = await wx.getLocation()
				this.location = [location.longitude.toFixed(6), location.latitude.toFixed(6)]
				let address = await amapRegeo({
					location: this.location
				})
				let cityListRes = await getCityList()
				let cityList = cityListRes.data.data.list
				let cityObj = {}
				cityList.map((val) => {
					cityObj[val.pinYin] || (cityObj[val.pinYin] = [])
					cityObj[val.pinYin].push(val)
					if (val.regionName == address.regeocode.addressComponent.city.slice(0, -1)) {
						this.selectCity(val)
					}
				})
				this.cityList = cityObj
			},
			async init() {
				this.hotLoading = true
				this.soonLoading = true
				this.tabActive = null
				this.$nextTick(() => {
					this.tabActive = 0
				})
				let hotListRes = await getHotList({
					cityId: this.cityId
				})
				this.hotList = hotListRes.data.data.list
				this.hotLoading = false

				let soonListRes = await getSoonList({
					cityId: this.cityId
				})
				let soonListObj = {}
				soonListRes.data.data.list.forEach((val) => {
					soonListObj[val.publishDate.slice(0, 10)] || (soonListObj[val.publishDate.slice(0, 10)] = [])
					soonListObj[val.publishDate.slice(0, 10)].push(val)
				})
				this.soonList = soonListObj
				this.$store.commit('SET_FILMLIST', this.hotList.concat(soonListRes.data.data.list))
				this.soonLoading = false
			},
			async cinemaListInit() {
				let showListRes = await getCinemaList({
					cityId: this.cityId,
					latitude: this.location[1],
					longitude: this.location[0],
				})
				showListRes.data.data.list.map(val=>{
					val.distance = (Math.sqrt((val.latitude-this.location[1])**2+(val.longitude-this.location[0])**2)*111).toFixed(2)
					return val
				})
				showListRes.data.data.list.sort(function(a, b){return a.distance - b.distance})
				this.cinemaList = showListRes.data.data.list
				this.cinemaLoading = false
			},
			selectCity(obj) {
				this.address = obj.regionName
				this.cityId = obj.cityId
			}
		}
	}
</script>

<style scoped lang="scss">
	.topbar-box {
		display: flex;
		align-items: center;

		.left-box {
			width: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 20rpx;
		}
	}

	.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;
		}
	}

	.tab {
		display: flex;
		justify-content: space-around;
		align-items: stretch;
		background-color: #FFFFFF;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 1;

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

		}

		.hover {
			border-bottom: 6rpx solid red;
		}

		.location-box {
			padding: 30rpx 0;
			font-size: 30rpx;
			color: #0F0404;
			display: flex;
			justify-content: center;
			align-items: center;
		}

	}

	.flex-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background: #FFFFFF;
		margin-top: 1rpx;
		padding: 0rpx 20rpx;
		padding-bottom: 20rpx;

		.film-box {
			width: 334rpx;
			border-radius: 20rpx;
			overflow: hidden;
			background: #FFFFFF;
			margin: 30rpx 11rpx 0;
			box-shadow: 0px 2px 16px 0px rgba(68, 6, 6, 0.2);

			.img {
				width: 100%;
				height: 456rpx;
			}

			.bottom-box {
				padding: 30rpx 20rpx;

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

					.text-1 {
						width: 200rpx;
						font-size: 26rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

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

				.des-box {
					margin-top: 20rpx;

					.des {
						width: 100%;
						font-size: 22rpx;
						color: #666666;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

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

		}

	}

	.soon-box {
		margin-top: 20rpx;

		.tit-text {
			background-color: #FFF0E5;
			padding: 28rpx 55rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: #0F0404;
			display: flex;
			align-items: center;

			.icon {
				margin-right: 20rpx;
			}
		}
	}
</style>