discounts-minapp/detail/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">
					<view class="img-box">
						<view class="tag">
							IMAX 2D
						</view>
						<view class="icon">
							
						</view>
					</view>
					<view class="info">
						<view class="name">
							熊出没·逆转时空
						</view>
						<view class="score-box">
							<view class="score">
								评分 <view class="num">
									9.6
								</view>
							</view>
							<view class="want-num">
								4.2万人想看
							</view>
						</view>
						<view class="actor">
							张伟 张秉君
						</view>
						<view class="play-movie-num">
							今天 269家影院放映2507场
						</view>
					</view>
					<button class="buy-btn" type="default" @click="buy">购票</button>
				</view>
			</template>
			
			<template v-else-if="tab == 2">
				<view class="cinema-item" v-for="(item,index) in list2" :key="index">
					<view class="name-box">
						<view class="name">
							熊出没·逆转时空1111
						</view>
						<view class="price">
							￥19.9 <view class="label">起</view>
						</view>
					</view>
					<view class="address-box">
						<view class="address">
							沙坪坝区大学城景苑路(美丽熙街)8号附1027号
						</view>
						<view class="distance">
							700m
						</view>
					</view>
					<view class="movie-name">
						飞驰人生2/熊出没·逆转时空/第二十条
					</view>
				</view>
			</template>
			
			<template v-else-if="tab == 3">
				<view class="item" v-for="(item,index) in list3" :key="index">
					<view class="img-box">
						<view class="tag">
							IMAX 2D
						</view>
						<view class="icon">
							
						</view>
					</view>
					<view class="info">
						<view class="name">
							熊出没·逆转时空222222
						</view>
						<view class="score-box">
							<view class="score">
								评分 <view class="num">
									9.6
								</view>
							</view>
							<view class="want-num">
								4.2万人想看
							</view>
						</view>
						<view class="actor">
							张伟 张秉君
						</view>
						<view class="play-movie-num">
							今天 269家影院放映2507场
						</view>
					</view>
					<button class="presell-btn" type="default" @click="buy">预售</button>
				</view>
			</template>
		</zs-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: "more",
				tab:1,
				height:0,
				list1:[1,2,3,4,5],
				list2:[1,2,3,4],
				list3:[1,2,3],
			}
		},
		methods: {
			list() {
				return this['list'+this.tab]
			}
		},
		methods: {
			back(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			handleTab(val){
				this.tab = val
			},
			buy(){
				uni.navigateTo({
					url:'/detail/movie/movieDetail'
				})
			},
			loadMore() {
				
			}
		},
		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%;
		.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;
				}
				.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;
					.score{
						
						display: flex;
						align-items: center;
						.num{
							font-size: 28rpx;
							color: #FF4D3A;
							padding: 0 12rpx;
						}
					}
					.want-num{
						padding: 0 12rpx;
						border-left: 2rpx solid #F0F0F0;
						align-self: flex-end;
						// font-size: 24rpx;
						// color: #AAAAAA;
					}
				}
				.actor{
					// font-size: 24rpx;
					// color: #AAAAAA;
				}
				.play-movie-num{
					// font-size: 24rpx;
					// color: #AAAAAA;
				}
			}
			.buy-btn{
				position: absolute;
				top: 50%;
				right: 0;
				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>