discounts-minapp/movie/movieList.vue

<template>
	<view class="movieList">
		<!-- 列表 -->
		<zs-list :mt="(height+8) +'px'" :status="status">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="img-box">
						<view class="tag" v-if="item.version">
							{{item.version}}
						</view>
						<zs-img class="icon" :src="item.posterUrl" radius="full" width="120rpx" 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" v-if="item.wish">
								{{item.wish | filterNum}}人想看
							</view>
						</view>
						<view class="actor">
							{{item.description}}
						</view>
					<!-- 	<view class="play-movie-num">
							今天 269家影院放映2507场
						</view> -->
					</view>
					<button class="buy-btn" type="default" @click="buy(item.movieId)">购票</button>
				</view>
			</zs-list>
	</view>
</template>

<script>
	import {cinema_shows} from '@/api/movie.js'
	export default {
		data() {
			return {
				list:[],
				query:{
					cinemaId:0
				}
			}
		},
		methods: {
			cinema_shows() {
				this.status = 'loading'
				cinema_shows(this.query).then(res=>{
					this.status = 'noMore'
					this.list = res.content.data.movieShows
				})
			},
			buy(id){
				uni.navigateTo({
					url:`/movie/movieDetail?id=${id}&cinemaId=${this.query.cinemaId}`
				})
			},
		},
		onLoad(options) {
			this.query.cinemaId = options.id
			this.cinema_shows()
		}
	}
</script>

<style lang="scss" >
	.movieList{
	background: #F9F9F9;
	.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;
						margin-top: 20rpx;
						.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{
						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;
				}
			}
			
		}
	}
</style>