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

<template>
	<scroll-view scroll-y class="cinema">
		<view class='topbar'>
			<topbar>
				<view class="topbar-box">
					<view class="left-box" @click="goPage(`/pages/cinema/citylist?cityList=${JSON.stringify(cityList)}`,null,{cityList:cityList})">
						<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>
		</view>
		<view class="tabs-box">
			<van-tabs :active='tabActive' animated sticky offset-top='87' @change='tabsChange'>
				<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='item.filmId'>
								<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='item.cinemaId' @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='item.filmId'>
									<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>
		
	</scroll-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: [],
			address: '定位中',
			cinemaList: {},
			cinemaLoading: true
		}),
		async mounted() {
			this.setFilmDiscount()
			await this.getLocation()
			this.address = this.$store.state.cinema.cityObj.regionName;
			this.init()
			this.cinemaListInit()
		},
		computed: {
			cityId() {
				return this.$store.state.cinema.cityId;
			}
		},
		watch: {
			cityId() {
				this.address = this.$store.state.cinema.cityObj.regionName;
				this.init()
				this.cinemaListInit()
			}
		},
		methods: {
			onSearch(e){
				console.log(e)
			},
			onSearchChange(e){
				console.log(e)
			},
			tabsChange(e) {
				this.tabActive = e.detail.index
			},
			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.toString()
				})
				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
				let hotListRes = await getHotList({
					cityId: this.cityId
				})
				this.hotList = hotListRes.data.data.list
				this.$nextTick(()=>{
					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.$nextTick(()=>{
					this.soonLoading = false
				})
			},
			async cinemaListInit() {
				this.cinemaLoading = true
				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.$store.commit('SET_CITYOBJ', obj)
				this.$store.commit('SET_CITYID', obj.cityId)
			}
		}
	}
</script>

<style scoped lang="scss">
	.cinema{
		height: 100%;
		position: relative;
	}
	
	.topbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
		.topbar-box {
			display: flex;
			align-items: center;
		
			.left-box {
				min-width: 150rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
				text{
					white-space: nowrap;
				}
			}
		}
	}
	
	.tabs-box{
		margin-top: 160rpx;
	}

	

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