discounts-minapp/movie/index.vue

<template>
	<view class="movie">
		<view class="header" :style="{height:height +'px'}">
			<image class="back" src="@/static/back-btn.png" @click="back" mode=""></image>
			<view class="tab" :class="[tab == 1?'active':'']" @click="handleTab(1)">
				热映
			</view>
			<view class="tab" :class="[tab == 2?'active':'']" @click="handleTab(2)">
				影院
			</view>
			<view class="tab" :class="[tab == 3?'active':'']" @click="handleTab(3)">
				待映
			</view>
		</view>
		<!-- 列表 -->
		<zs-list :mt="(height+8) +'px'" @load="loadMore" :status="status">
			<template v-if="tab == 1">
				<view class="item" v-for="(item,index) in list1" :key="index" @click="buy(item.movieId)">
					<view class="img-box">
						<view class="tag" v-if="item.version">
							{{item.version}}
						</view>
						<zs-img class="icon" :src="item.posterUrl" radius="full" width="160rpx" height="150rpx" mode="widthFix" ></zs-img>
					</view>
					<view class="info">
						<view class="name">
							{{item.name}}
						</view>
						<view class="score-box">
							<view class="score">
								评分 <view class="num">
									{{item.score}}
								</view>
							</view>
							<view class="want-num">
								{{item.wish | filterNum}}人想看
							</view>
						</view>
						<view class="actor">
							{{item.star}}
						</view>
					<!-- 	<view class="play-movie-num">
							今天 269家影院放映2507场
						</view> -->
					</view>
					<button class="buy-btn" type="default" @click="buy(item.movieId)">购票</button>
				</view>
			</template>
			
			<template v-else-if="tab == 2">
				<view class="cinema-item" v-for="(item,index) in list2" :key="index" @click="goCinema(item.cinemaId)">
					<view class="name-box">
						<view class="name">
							{{item.name}}
						</view>
						<view class="price">
							￥{{item.sellPrice}} <view class="label">起</view>
						</view>
					</view>
					<view class="address-box">
						<view class="address">
							{{item.address}}
						</view>
						<view class="distance">
							{{item.dis}}
						</view>
					</view>
					<view class="movie-name">
						近期场次：{{item.showInfo}}
					</view>
				</view>
			</template>
			
			<template v-else-if="tab == 3">
				<view class="item" v-for="(item,index) in list3" :key="index" @click="buy(item.movieId)">
					<view class="img-box">
						<view class="tag" v-if="item.version">
							{{item.version}}
						</view>
						<zs-img class="icon" :src="item.posterUrl" radius="full" width="160rpx" height="150rpx" mode="widthFix" ></zs-img>
					</view>
					<view class="info">
						<view class="name">
							{{item.name}}
						</view>
						<view class="score-box">
							<view class="score" v-if="item.score">
								评分 <view class="num">
									{{item.score}}
								</view>
							</view>
							<view class="want-num">
								{{item.wish | filterNum}}人想看
							</view>
						</view>
						<view class="actor">
							{{item.star}}
						</view>
						<view class="releaseTime">
							{{ $u.timeFormat(new Date(item.releaseTime).getTime(), 'yyyy年mm月dd日')}}
						</view>
					</view>
					<button class="presell-btn" type="default" @click="buy(item.movieId)">预售</button>
				</view>
			</template>
		</zs-list>
	</view>
</template>

<script>
	import {hotList,comingList,cinemas,cityList,cinema_filter} from '@/api/movie.js'
	export default {
		data() {
			return {
				status: "more",
				tab:1,
				height:0,
				list1:[],
				list2:[],
				list3:[],
				cityId:0,
				hotQuery:{
					cityId:0,
					pageIndex:0,
					pageSize:20,
				},
				cinemasQuery:{
					cityId:0,
					lat:JSON.parse(uni.getStorageSync('location')).latitude,
					lng:JSON.parse(uni.getStorageSync('location')).longitude,
				},
			}
		},
		filters: {
			filterNum: function(value) {
				if(value>10000){
					return (value/10000).toFixed(1)+'万';
				}else{
					return value;
				}
			}
		},
		methods: {
			back(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			goCinema(id){
				uni.navigateTo({
					url:'/movie/movieList?id='+id
				})
			},
			handleTab(val){
				this.tab = val
				this.list1 = []
				this.list2 = []
				this.list3 = []
				if(val == 1){
					this.status = 'more'
					this.hotQuery.pageIndex = 0
					this.hotList()
				}else if(val == 2){
					this.status = 'noMore'
					this.cinemas()
				}else if(val == 3){
					this.status = 'noMore'
					this.comingList()
				}
			},
			buy(id){
				uni.navigateTo({
					url:'/movie/movieDetail?id='+id
				})
			},
			loadMore() {
				if(this.cityId != 0 && this.tab == 1){
					this.hotQuery.cityId = this.cityId
					this.hotList()
				}
			},
			cityList(){
				return new Promise((resolve,reject)=>{
					cityList().then(res=>{
						if(res.state == 'Success'){
							let city = uni.getStorageSync('city').replace('市','')
							this.cityId = res.content.data.filter(item=>item.name == city)[0].cityId
							uni.setStorageSync('movieCityId',this.cityId)
							resolve()
						}
					})
				})
			},
			hotList(){
				if(this.status == 'loading') return
				this.status = 'loading'
				this.hotQuery.cityId = this.cityId
				hotList(this.hotQuery).then(res=>{
					if(res.state == 'Success'){
						this.list1 = this.list1.concat(res.content.data.movies)
						if(this.list1.length>=res.content.data.count){
							this.status = 'noMore'
						}else{
							this.status = 'more'
							this.hotQuery.pageIndex++
						}
					}
				})
			},
			comingList(){
				comingList({cityId:this.cityId}).then(res=>{
					if(res.state == 'Success'){
						this.list3 = this.list3.concat(res.content.data.movies)
					}
				})
			},
			cinema_filter(){
				cinema_filter({cityId:this.cityId}).then(res=>{
					if(res.state == 'Success'){
						
					}
				})
			},
			cinemas(){
				this.status = 'loading'
				this.cinemasQuery.cityId = this.cityId
				cinemas(this.cinemasQuery).then(res=>{
					if(res.state == 'Success'){
						this.list2 = res.content.data
						this.status = 'noMore'
						
					}
				})
			},
			
		},
		onLoad() {
			this.cityList().then(()=>{
				// this.cinema_filter()
				this.hotList()
			})
		},
		created() {
			//去除
			//#ifndef H5 || MP-ALIPAY ||APP-PLUS
			//获取小程序胶囊的高度
			let {
				bottom
			} = uni.getMenuButtonBoundingClientRect()
			this.height = bottom
			//#endif
		}
	}
</script>

<style lang="scss" >
.movie{
	background: #F9F9F9;
	.header{
		display: flex;
		justify-content: center;
		align-items: flex-end;
		background: #fff;
		padding-bottom: 8px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 3;
		.back{
			position: absolute;
			left: 32rpx;
			bottom: 8px;
			width: 40rpx;
			height: 40rpx;
		}
		.tab{
			font-size: 36rpx;
			color: #AAAAAA;
			padding: 0 20rpx;
			vertical-align: bottom;
		}
		.tab.active{
			color: #222222;
			font-weight: 600;
		}
	}
	.zs-list{
		padding: 20rpx 24rpx;
		.item{
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 24rpx;
			display: flex;
			margin-bottom: 20rpx;
			position: relative;
			.img-box{
				position: relative;
				.tag{
					position: absolute;
					top: 8rpx;
					left: 12rpx;
					background: rgba(0, 0, 0, .8);
					padding: 6rpx 4rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 18rpx;
					color: #FFFFFF;
					z-index: 2;
				}
				.icon{
					width: 160rpx;
					height: 200rpx;
					border-radius: 16rpx;
					background: #F9F9F9;
				}
			}
			.info{
				font-size: 24rpx;
				color: #AAAAAA;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				margin-left: 20rpx;
				.name{
					font-weight: 600;
					font-size: 28rpx;
					color: #222222;
					width: 400rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.score-box{
					display: flex;
					margin-top: 20rpx;
					.score{
						
						display: flex;
						align-items: center;
						.num{
							font-size: 28rpx;
							color: #FF4D3A;
							padding: 0 12rpx;
						}
					}
					.want-num{
						padding: 0 12rpx;
						align-self: flex-end;
						// font-size: 24rpx;
						// color: #AAAAAA;
					}
					.score+.want-num{
						border-left: 2rpx solid #F0F0F0;
					}
				}
				.actor,.releaseTime{
					margin-top: 20rpx;
					width: 350rpx;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					/* 弹性伸缩盒子模型显示 */
					display: -webkit-box;
					/* 限制在一个块元素显示的文本的行数 */
					-webkit-line-clamp: 2;
					/* 设置或检索伸缩盒对象的子元素的排列方式 */
					-webkit-box-orient: vertical;
					// font-size: 24rpx;
					// color: #AAAAAA;
				}
				.play-movie-num{
					// font-size: 24rpx;
					// color: #AAAAAA;
				}
				
			}
			.buy-btn{
				position: absolute;
				top: 50%;
				right: 24rpx;
				transform: translateY(-50%);
				width: 120rpx;
				height: 52rpx;
				line-height: 52rpx;
				background: #EE4320;
				border-radius: 26rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.presell-btn{
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				width: 120rpx;
				height: 52rpx;
				line-height: 52rpx;
				background: #3879F9;
				border-radius: 26rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		
		.cinema-item{
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			.name-box{
				display: flex;
				justify-content: space-between;
				.name{
					font-weight: 600;
					font-size: 28rpx;
					color: #222222;
					width: 450rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.price{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #FF4D3A;
					.label{
						font-size: 24rpx;
						color: #AAAAAA;
					}
				}
			}
			.address-box{
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 16rpx;
				.address{
					width: 460rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.distance{
					
				}
			}
			.movie-name{
				font-size: 24rpx;
				color: #222222;
				margin-top: 16rpx;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>