discounts-minapp/movie/movieDetail.vue

<template>
	<view class="movieDetail">
		<view class="info-box">
			<view class="info">
				<image class="icon":src="info.img" mode=""></image>
				<view class="box">
					<view class="name">
						{{info.nm}}
					</view>
					<view class="score-box">
						<view class="score">
							评分 <view class="num">
								{{info.sc}}
							</view>
						</view>
						<view class="want-num">
							{{info.wish | filterNum}}人想看
						</view>
					</view>
					
					<view class="type-box">
						{{info.cat}}
						<view class="tag">
							{{info.ver}}
						</view>
					</view>
					
					<view class="publish-info">
						{{info.pubDesc}} {{info.dur}}分钟
					</view>
				</view>
			</view>
			
			<view class="title-box">
				<view class="title">
					简介
				</view>
				<!-- <view class="open">
					展开
					<image class="icon" src="@/static/shop-desc.png" mode=""></image>
				</view> -->
			</view>
			
			<view class="desc">
				{{info.desc}}
			</view>
			
		</view>
		
		<view class="actor-box" v-if="info.workerList.length">
			<view class="title-box1">
				<view class="title">
					演员列表
				</view>
				<view class="total">
					全部{{info.workerList.length}}
					<image class="icon" src="@/static/right.png" mode=""></image>
				</view>
			</view>
			
			<scroll-view class="actor-list" scroll-x="true">
				<view class="item" v-for="item in info.workerList" :key="item.id">
					<zs-img class="icon" :src="item.avatarUrl" radius="full" width="120rpx" height="150rpx" mode="widthFix" ></zs-img>
					<view class="name">
						{{item.characterName}}
					</view>
					<view class="sub-desc">
						{{item.actorName}}
					</view>
				</view>
				
			</scroll-view>
			
		</view>
		
		<view class="btn-box">
			<button class="buy-btn" type="default" @click="buy">特惠购票</button>
		</view>
		
		<u-popup :show="show" round="32rpx" mode="bottom" @close="close" @open="openPop">
			<view class="content">
				<!-- 拍片时间 -->
				<scroll-view v-if="showMovie||optionsCinemaId" class="tabList" scroll-x="true" scroll-with-animation :scroll-into-view="tab">
					<view id="demo1" class="tab" :class="[chooseDay == item?'active':'']" v-for="(item,index) in dayList1" :key="index" @click="handleTab1(item)"> {{ item | filterDay}} {{ new Date(item).getTime() | date('mm-dd')}}</view>
							
				</scroll-view>
				<!-- 影院时间 -->
				<scroll-view v-else class="tabList" scroll-x="true" scroll-with-animation :scroll-into-view="tab">
					<view id="demo1" class="tab" :class="[query.day == item?'active':'']" v-for="(item,index) in dayList" :key="index" @click="handleTab(item)"> {{ item | filterDay}} {{ new Date(item).getTime() | date('mm-dd')}}</view>
			
				</scroll-view>
				
				<!-- <zs-choose-tab position="relative" :showModal="false" @choose="chooseTab"></zs-choose-tab> -->
				<view class="list">
					<view v-if="showMovie||optionsCinemaId">
						<u-empty v-if="!list.length" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
						<view class="movie-item" v-for="(item,index) in list" :key="index">
							<view class="info">
								<view class="time-box">
									<view class="start-time">
										{{ $u.timeFormat(new Date(item.showTime).getTime(), 'hh:MM')}}
									</view>
									<view class="end-time">
										{{ $u.timeFormat(new Date(item.endTime).getTime(), 'hh:MM')}}散场
									</view>
								</view>
								<view class="type-box">
									<view class="type">
										{{item.version}}
									</view>
									<view class="room">
										{{item.hall}}
									</view>
								</view>
							</view>
							
							<view class="price-box">
								<view class="price">
									￥{{item.sellPrice}}
								</view>
								<view class="btn" @click="goChooseSeat(item.sessionId)">
									购票
								</view>
							</view>
							
						</view>
					</view>
					
					<view v-else >
						<u-empty v-if="!cinemasList.length" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
						<view class="cinema-item" v-for="(item,index) in cinemasList" :key="index" @click="handleItem(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>
					</view>
					
					
					
				</view>
				
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {movieDetail,movie_cinemas,cinema_shows} from '@/api/movie.js'
	export default {
		data() {
			return {
				show: false,
				showMovie: false,
				info:{},
				query:{
					cityId:uni.getStorageSync('movieCityId'),
					day:'',
					lat:0,
					lng:0,
					movieId:0,
				},
				chooseDay:'',//电影的日期
				cinemaId:0,//选中影院id
				dayList:[],//影院时间列表
				dayList1:[],//电影拍片时间列表
				movieList:[],
				cinemasList:[],
				optionsCinemaId:0,//电影院跳转携带id
			}
		},
		filters: {
			filterNum: function(value) {
				if(value>10000){
					return (value/10000).toFixed(1)+'万';
				}else{
					return value;
				}
			},
			filterDay(val){
				if(val ==  uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')){
					return '今天'
				}else if(val ==  uni.$u.timeFormat(new Date().getTime()+1000*60*60*24, 'yyyy-mm-dd')){
					return '明天'
				}else if(val ==  uni.$u.timeFormat(new Date().getTime()+1000*60*60*24*2, 'yyyy-mm-dd')){
					return '后天'
				}else{
					let arr = ['日','一','二','三','四','五','六']
					let num = new Date(val).getDay()
					return `周${arr[num]}`
				}
			}
		},
		computed: {
			list() {
				let data = []
				this.movieList.map(item=>{
					if(item.showDate == this.chooseDay){
						data = item.sessions
					}
				})
				console.log(1111,data);
				return data
			}
		},
		methods: {
			openPop(){
				
			},
			close(){
				this.show = false
				this.showMovie = false
			},
			buy() {
				this.show = true
				this.movie_cinemas()
			},
			goChooseSeat(sessionId){
				console.log(sessionId);
				uni.navigateTo({
					url:`./chooseSeat?movieId=${this.query.movieId}&cinemaId=${this.cinemaId}&sessionId=${sessionId}`
				})
			},
			handleItem(id){
				this.showMovie = true
				this.cinemaId = id
				this.cinema_shows(id)
				// uni.navigateTo({
				// 	url:'./chooseSeat'
				// })
			},
			handleTab(val){
				this.query.day = val
				this.showMovie = false
				this.movie_cinemas()
			},
			// 选择电影日期
			handleTab1(val){
				this.chooseDay = val
			},
			chooseTab(val){
			},
			movieDetail(movieId){
				movieDetail({movieId}).then(res=>{
					if(res.state == 'Success'){
						this.info = res.content.data
						if(this.optionsCinemaId){
							this.show = true
							this.handleItem(this.optionsCinemaId)
						}
					}
				})
			},
			// 获取某个电影的电影院列表
			movie_cinemas(){
				movie_cinemas(this.query).then(res=>{
					if(res.state == 'Success'){
						if(!(res.content.data.showDates.includes(this.query.day))&&res.content.data.showDates.length){
							this.query.day = res.content.data.showDates[0]
							this.movie_cinemas()
						}
						this.dayList = res.content.data.showDates
						this.cinemasList = res.content.data.cinemas
					}
				})
			},
			// 获取电影院某个电影的列表
			cinema_shows(cinemaId){
				cinema_shows({movieId:this.query.movieId,cinemaId}).then(res=>{
					if(res.state == 'Success'){
						let data = JSON.parse(JSON.stringify(res.content.data))
						let movieList = data.movieShows.filter(item=>item.shows.length)
						this.chooseDay = movieList[0].shows[0].showDate
						// this.movieList = movieList[0].shows.filter(item=>item.showDate == this.query.day)[0].sessions
						this.movieList = movieList[0].shows
						this.dayList1 = movieList[0].shows.map(item=>item.showDate)
						
					}
				})
			},
			
		},
		onLoad(options) {
			this.query.movieId = options.id
			this.optionsCinemaId = options.cinemaId
			
			this.movieDetail(options.id)
			let location = JSON.parse(uni.getStorageSync('location')) 
			this.query.lat = location.latitude
			this.query.lng = location.longitude
			this.query.day =uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
			this.tab =uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')
		}
	}
</script>

<style lang="scss" scoped>
.movieDetail{
	background: #F9F9F9;
	padding: 20rpx 24rpx ;
	min-height: 100vh;
	.info-box{
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		.info{
			display: flex;
			.icon{
				width: 160rpx;
				height: 200rpx;
				background: #aaa;
				border-radius: 16rpx;
			}
			.box{
				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;
					font-size: 24rpx;
					color: #AAAAAA;
					.score{
						display: flex;
						align-items: center;
						.num{
							font-size: 28rpx;
							color: $uni-color-primary;
							padding: 0 12rpx;
						}
					}
					.want-num{
						padding: 0 12rpx;
						border-left: 2rpx solid #F0F0F0;
						align-self: flex-end;
						// font-size: 24rpx;
						// color: #AAAAAA;
					}
				}
				.type-box{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #AAAAAA;
					.tag{
						padding: 6rpx 10rpx;
						background: #F0F0F0;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 24rpx;
						color: #AAAAAA;
						margin-left: 10rpx;
					}
				}
				.publish-info{
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
		}
		.title-box{
			display: flex;
			justify-content: space-between;
			margin-top: 28rpx;
			.title{
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}
			.open{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #AAAAAA;
				.icon{
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		
		.desc{
			font-size: 24rpx;
			color: #222222;
			font-weight: 300;
			margin-top: 20rpx;
			line-height: 40rpx;
		}
	}
	
	.actor-box{
		padding: 28rpx 24rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 16rpx;
		.title-box1{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}
			.total{
				font-weight: 300;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				margin-right: -20rpx;
				.icon{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		
		.actor-list {
				white-space: nowrap;
				width: 100%;
				padding-top: 20rpx;
				.item {
					display: inline-block;
					width: 120rpx;
					margin-right: 20rpx;
					text-align: center;
					.icon{
						width: 120rpx;
						height: 150rpx;
						border-radius: 16rpx;
					}
					.name{
						font-weight: 400;
						font-size: 24rpx;
						color: #222222;
						margin-top: 15rpx;
					}
					.sub-desc{
						font-weight: 300;
						font-size: 20rpx;
						color: #AAAAAA;
						margin-top: 12rpx;
					}
				}
			}
	}
	
	.btn-box{
		position: fixed;
		left: 0%;
		bottom: 0%;
		width: 100%;
		padding: 10rpx 24rpx 76rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-top: 1rpx solid #EEEEEE;
		.buy-btn{
			width: 702rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #EE4320;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 0;
			margin: 0;
		}
	}
	
	.content{
		padding: 24rpx;
		.tabList {
			white-space: nowrap;
			width: 100%;
			.tab {
				display: inline-block;
				padding: 0 12rpx 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
			.tab.active{
				position: relative;
				&::after{
					content: '';
					position: absolute;
					bottom: 0%;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 8rpx;
					background: #EE4320;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}
			}
		}
		.list{
			max-height: 900rpx;
			overflow: auto;
			.cinema-item{
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 28rpx 0;
				border-top: 1rpx solid #F0F0F0;
				.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: $uni-color-primary;
						.label{
							font-size: 24rpx;
							color: #AAAAAA;
							margin-left: 6rpx;
						}
					}
				}
				.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;
				}
			}
			
			
			.movie-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 34rpx 0;
				border-bottom: 1rpx solid #F0F0F0;
				.info{
					display: flex;
					.time-box{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.start-time{
							font-weight: 600;
							font-size: 36rpx;
							color: #222222;
						}
						.end-time{
							font-size: 24rpx;
							color: #AAAAAA;
							margin-top: 20rpx;
						}
					}
					.type-box{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 80rpx;
						.type{
							font-size: 28rpx;
							color: #222222;
						}
						.room{
							font-size: 24rpx;
							color: #AAAAAA;
						}
					}
				}
				.price-box{
					display: flex;
					align-items: center;
					.price{
						font-size: 36rpx;
						color: #FF4D3A;
					}
					.btn{
						width: 120rpx;
						height: 52rpx;
						line-height: 52rpx;
						text-align: center;
						background: rgba(238,67,32,0.1);
						border-radius: 26rpx;
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #EE4320;
					}
				}
			}
		}
	}
		
	
}
</style>