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

<template>
	<view class="cinema">
		<!-- <view class="tab">
			<text class="text hover">正在热映</text>
			<text class="text">即将上映</text>
			<view class="location-box">
				<van-icon name="location" />
				<text>◉{{address}}</text>
			</view>
		</view> -->

		<van-tabs :active='tabActive' animated sticky>
			<!-- <view class="" slot="nav-right">
				<view class="location-box">
					<van-icon name="location" />
					<text>{{address}}</text>
				</view>
			</view> -->
			<van-tab title="正在热映">
				<loadSke :loading='hotLoading' :list='hotList'>
					<view class="flex-box">
						<view 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" @click="goPage(`/pages/cinema/cinemalist?filmId=${item.filmId}&cityId=${cityId}&location=${location}`)">
									购 票
								</button>
							</view>
						</view>
					</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-tab :title="'◉ '+address">
				<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-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
	} 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: '定位中'
		}),
		async mounted() {
			this.setFilmDiscount()
			await this.getLocation()
		},
		watch: {
			cityId() {
				this.init()
			}
		},
		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
			},
			selectCity(obj) {
				this.address = obj.regionName
				this.cityId = obj.cityId
			}
		}
	}
</script>

<style scoped lang="scss">
	.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: 100rpx;
					height: 40rpx;
					background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
					border-radius: 20rpx;
					font-size: 20rpx;
					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>