great_mobileui/pages/ticketlist.vue

<template>
	<view class="pages">
		<view class="navbar-box">
			<u-navbar title="订单详情" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="transparent"></u-navbar>
		</view>
		<view class="banner">
			<image class="img" :src="staticUrl+'/img/bookticket-banner.png'" alt="">
			<view class="content">
				<view class="share">
					<image class="icon" :src="staticUrl+'/img/share-ico.png'" ></image>
				</view>
				<view class="name">《伟大转折》</view>
				<view class="addr u-flex u-row-between">
					<view class="text">演出地址：遵义市《伟大转折》演艺中心</view>
					<u-icon name="arrow-right" color="#ffffff" size="36rpx"></u-icon>
				</view>
			</view>
		</view>
		<view class="tabs-wrap">
			<view class="inner">
				<u-tabs
					:list="tabsArr"  
					@click="tabsClick"
					lineColor="#ED0000" 
					lineWidth="82rpx"
					:activeStyle="{color: '#2D2D2D',fontWeight: 'bold'}"
					itemStyle="width:50%; height: 46px;box-sizing:border-box"
				>
				</u-tabs>
			</view>
		</view>
		<view class="page-wrap">
			<view class="ticket" v-if="tabsIndex==0">
				<view class="date-block">
					<view class="title">游玩日期</view>
					<view class="date-list u-flex">
						<view class="date-item" :class="{active:dateIndex==index}" @click="dateClick(index)" v-for="(date,index) in dateList" :key="index">
							<view class="name">{{ date.name }}</view>
							<view class="date">{{ date.month }} - {{ date.day }}</view>
						</view>
						<view class="date-item more-date u-flex u-row-center" @click="calendarShow = true">
							<view class="text">
								<view class="">更多</view>
								<view class="">日期</view>
							</view>
							<u-icon name="arrow-right" color="#7F7F7F" size="24rpx"></u-icon>
						</view>
					</view>
				</view>
				<view class="date-block session-wrap">
					<view class="title">演出场次</view>
					<view class="session">
						<view class="session-item" :class="{active:sessionIndex==index}" @click="sessionClick(index)" v-for="(date,index) in sessionList" :key="index">
							{{ date.session }}
						</view>
					</view>
				</view>
				<view class="date-block ticket-type">
					<view class="title">门票</view>
					<view class="type-item" :class="{active:sessionIndex==index}" v-for="(item,index) in  ticketTypeList" :key="index">
						<view class="name-price u-flex u-row-between">
							<view class="name">{{item.name}}</view>
							<view class="prices">¥ {{item.prices}}</view>
						</view>
						<view class="ishave">
							<text class="text">有票</text>
						</view>
						<view class="bottom u-flex u-row-between">
							<view class="left u-flex">
								购票须知
								<u-icon name="arrow-right" color="#7F7F7F" size="24rpx"></u-icon>
							</view>
							<view class="btn" @click="book(item)">预定</view>
						</view>
					</view>
				</view>
			</view>
			<!-- ticket end -->
			<view class="details" v-if="tabsIndex==1">
				<view class="details-block">
					<view class="title">剧情简介</view>
					<view class="intro">
						剧情简介剧情简介剧情简介剧情简介剧情简介
					</view>
				</view>
				<view class="details-block actors">
					<view class="title u-flex u-row-between">
						演职人员
						<view class="right u-flex">
							<text>全部20人</text>
							<u-icon name="arrow-right" color="#7F7F7F" size="24rpx"></u-icon>
						</view>
					</view>
					<view class="actor-list">
						<u-scroll-list :indicator="false">
							<view class="item" v-for="(item, index) in actorsArr" :key="index">
								<image class="img" :src="item.imgUrl"></image>
								<view class="text">
									<view class="name">{{item.name}}</view>
									<view class="role u-line-1">{{item.role}}</view>
								</view>
							</view>
						</u-scroll-list>
					</view>
				</view>
			</view>
		</view>
		<u-calendar
			ref="calendar"
			:maxDate="maxDate"
			:show="calendarShow" 
			:closeOnClickOverlay="true"
			@close="closeCalendar"
			@confirm="confirmCalendar">
		</u-calendar>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	// 日历
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	// 日历
	export default {
		mixins:[systemInfo],
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				tabsArr:[
					{name:'票务购买'},
					{name:'演出详情'}
				],
				tabsIndex:0,
				dateList:[],
				dateIndex:0,
				calendarShow:false,//日历
				maxDate:`${year}-${month}-${date + 10}`,
				sessionList:[
					{session:'10:00-11:00'},
					{session:'10:00-11:00'},
					{session:'10:00-11:00'},
					{session:'10:00-11:00'},
					{session:'10:00-11:00'},
				],
				sessionIndex:0,
				ticketTypeList:[
					{name:'成人票',prices:'15'},
					{name:'成人票',prices:'15'},
					{name:'成人票',prices:'15'},
				],
				actorsArr:[
					{name:'张三',role:'导演',imgUrl:'https://unsplash.it/160/200?id=1'},
					{name:'张三',role:'导演',imgUrl:'https://unsplash.it/160/200?id=2'},
					{name:'张三',role:'导演',imgUrl:'https://unsplash.it/160/200?id=3'},
					{name:'张三',role:'导演',imgUrl:'https://unsplash.it/160/200?id=4'},
				]
				
			}
		},
		onShow() {
		},
		onLoad() {
			// this.getSystemInfo();
			let today = new Date();
			this.setDate(today);

		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			setDate(firstDay){
				let today = firstDay;
				let tomorrow = new Date();
				tomorrow.setDate(today.getDate() + 1);
				let afterTomorrow = new Date();
				afterTomorrow.setDate(today.getDate() + 2);
				
				this.dateList = [
				  { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate(),name:'今天' },
				  { year: tomorrow.getFullYear(), month: tomorrow.getMonth() + 1, day: tomorrow.getDate() ,name:'明天'},
				  { year: afterTomorrow.getFullYear(), month: afterTomorrow.getMonth() + 1, day: afterTomorrow.getDate(),name:'后天' }
				];
			},
			dateClick(index){
				this.dateIndex = index;
			},
			confirmCalendar(e){
				console.log('confirmCalendar',e);
				this.setDate( new Date(e) );
				this.dateIndex = 0;
				console.log('maxDate',this.maxDate);
				console.log('dateList',this.dateList);
				this.calendarShow = false;
			},
			closeCalendar(){
				this.calendarShow = false;
			},
			tabsClick(e){
				console.log('tabsClick',e);
				this.tabsIndex = e.index;
			},
			sessionClick(index){
				this.sessionIndex = index;
			},
			book(item){
				console.log('book',item);
				uni.$u.route('pages/bookticket',{
					id:item.id
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
.banner{
	position: relative;
	.img{
		width: 750rpx;
		height: 554rpx;
		display: block;
	}
	.content{
		position: absolute;
		width: 100%;
		box-sizing: border-box;
		padding: 0 32rpx;
		left: 0;
		bottom: 100rpx;
	}
	.share{
		overflow: hidden;
		margin-bottom: 100rpx;
		.icon{
			float: right;
			display: block;
			width: 32rpx;
			height: 32rpx;
			padding: 10rpx;
			border-radius: 50%;
			background-color: rgba(0,0,0,0.4);
		}
	}
	.name{
		font-size: 44rpx;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 66rpx;
		margin-bottom: 38rpx;
	}
	.addr{
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
	}
}
.tabs-wrap{
	position: relative;
	margin-bottom: 54rpx;
	&::after{
		content: '';
		width: 100%;
		height: 1px;
		background-color: #eee;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -46rpx;
	}
	.inner{
		position: relative;
		padding-top: 50rpx;
		background-color: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		height: 46rpx;
		margin-top: -30px;
	}
}
.date-block{
	margin-bottom: 64rpx;
}
.title{
		font-size: 32rpx;
		font-weight: bold;
		color: #2D2D2D;
		line-height: 48rpx;
		margin-bottom: 38rpx;
	}
.session{
	 display: grid;
	 grid-template-columns: repeat(3, 1fr);
	 gap: 20rpx;
	.session-item{
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 12rpx;
		border: 2rpx solid #636363;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #636363;
		&.active{
			color: #ED0000;
			border-color: #ED0000;
		}
	}
}
.ticket-type{
	.type-item{
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(180,180,180,0.5);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 38rpx 40rpx;
		.name-price{
			margin-bottom: 26rpx;
		}
		.name{
			font-size: 28rpx;
			font-weight: 500;
			color: #363636;
		}
		.prices{
			font-size: 36rpx;
			font-weight: bold;
			color: #ED0000;
		}
		.ishave{
			margin-bottom: 26rpx;
			.text{
				height: 30rpx;
				line-height: 30rpx;
				padding: 0 22rpx;
				background: #FFC8C8;
				border-radius: 20rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #ED0000;
			}
		}
		.bottom{
			font-size: 22rpx;
			font-weight: 400;
			color: #7F7F7F;
			.btn{
				height: 60rpx;
				line-height: 60rpx;
				background: linear-gradient(90deg, #FF7979 0%, #ED0000 100%);
				border-radius: 30rpx;
				padding: 0 36rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
}
.details{
	.title{}
	.details-block{
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(221,221,221,0.5);
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		padding: 36rpx;
		&.actors{
			.title{
				.right{
					font-size: 24rpx;
					font-weight: 400;
					color: #7F7F7F;
				}
			}
		}
	}
	.intro{
		font-size: 26rpx;
		font-weight: 400;
		color: #4E4E4E;
		line-height: 40rpx;
	}
	.actor-list{
		.item{
			flex-shrink: 0;
			width: 160rpx;
			text-align: center;
			margin-right: 24rpx;
		}
		.img{
			display: block;
			width: 100%;
			height: 200rpx;
			margin-bottom: 16rpx;
		}
		.name{
			font-size: 28rpx;
			font-weight: 500;
			color: #2D2D2D;
			line-height: 42rpx;
			margin-bottom: 4rpx;
		}
		.role{
			font-size: 24rpx;
			font-weight: 400;
			color: #7F7F7F;
			line-height: 36rpx;
		}
	}
}
</style>