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=""> -->
<!-- 			<image class="img" :src="theatre.showImg" alt=""> -->
			<u-swiper
				:list="performInfo.photoList"
				height="554rpx"
				indicatorMode="dot"
				:indicatorStyle="{bottom:'100rpx'}"
				keyName="imageUrl"
				radius="0"
				@click="previewBanner"
				:indicator="false"
				circular
			></u-swiper>
		<!-- 	<view class="content">
				<view class="share" @click="openShare()">
					<image class="icon" :src="staticUrl+'/img/share-ico.png'" ></image>
				</view>
			</view> -->
		</view>
		<view class="base-info">
			<view class="inner">
				<view class="name">{{performInfo.name}}</view>
				<view class="addr u-flex u-row-between">
					<view class="text">演出地址：{{theatre.address||''}}</view>
					<view class="menu u-flex">
						<view class="item" @click="goMap">
							<image class="icon" :src="staticUrl+'/img/map-ico.png'" ></image>
							<text>导航</text>
						</view>
						<view class="item"  @click="phoneCall">
							<image class="icon" :src="staticUrl+'/img/phone-call-ico.png'" ></image>
							<text>电话</text>
						</view>
						<view class="item"  @click="openShare()">
							<image class="icon" :src="staticUrl+'/img/share-ico-v2.png'" ></image>
							<text>分享</text>
						</view>
					<!-- 	<u-icon name="arrow-right" color="#ffffff" size="36rpx" @click="goMap"></u-icon>
						<u-icon name="arrow-right" color="#ffffff" size="36rpx" @click="goMap"></u-icon> -->
					</view>
				</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:33%; 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,dot:performDateList.find(item => item.performDate === `${date.year}-${date.month}-${date.day}`) !== undefined}" 
						@click="dateClick(index)" 
						v-for="(date,index) in dateList" :key="index">
							<!-- <view class="name">{{ date.name || ' ' }}</view> -->
						<!-- 	<view class="name">
								{{ performDateList.find(item => item.performDate === date.fullDay ) !== undefined?'有演出':'无演出' }}
							</view> -->
							<view class="name">
								{{date.fullDay|checkWeekDate}}
							</view>
							<view class="date">{{ date.month }} - {{ date.day }}</view>
							<image class="selected-img" :src="staticUrl+'/img/selected.png'"></image>
						</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 auditorium generic-block" v-show="false">
					<view class="title">演出厅</view>
					<view class="date-list u-flex u-flex-wrap">
						<view class="date-item" :class="{active:auditoriumIndex==index}" @click="auditoriumClick(index)" v-for="(date,index) in auditoriumList" :key="index">
							<view class="name">{{ date.name }}</view>
						</view>
					</view>
				</view>
				<view class="date-block session-wrap generic-block">
					<view class="title">演出场次</view>
					<view class="empty" v-if="auditoriumList.length>=1&&sessionList.length<1">
						当前日期暂无演出场次，请重新选择
					</view>
					<view class="date-list u-flex u-flex-wrap" v-else>
						<view class="date-item" :class="{active:sessionIndex==index,disabled:!date.ifVaild}" @click="sessionClick(index,date)" v-for="(date,index) in sessionList" :key="index">
							<view class="name">{{ date.performTimeStart}} - {{date.performTimeEnd}}</view>
						</view>
					</view>
				</view>
				<!-- <view class="date-block generic-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.performTimeStart}} - {{date.performTimeEnd}}
						</view>
					</view>
					<view class="empty" v-if="auditoriumList.length>=1&&sessionList.length<1">
						当前日期暂无演出场次，请重新选择
					</view>
				</view> -->
				<view class="date-block ticket-type generic-block" v-if="sessionList.length>=1">
					<view class="title">票档</view>
					<view class="empty" v-if="ticketTypeList.length<1">
						暂无门票
					</view>
					<view class="date-list u-flex u-flex-wrap">
						<view class="date-item" :class="{active:ticketTypeIndex==index,'disabled':date.stockNum<1&&date.stockNum!==-1}" @click="ticketTypeClick(index,date)" v-for="(date,index) in ticketTypeList" :key="index">
							<view class="name">{{ date.name }}</view>
							<view class="sold-out" v-if="date.stockNum<1&&date.stockNum!==-1">售罄</view>
						</view>
					</view>
					<view class="goodsSnapshot" v-if="ticketTypeList.length>0&&goodsSnapshot">
						票务说明：{{goodsSnapshot}}
					</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.goodsName}}</view>
							<view class="prices">¥ {{item.salePrice}} 起</view>
						</view>
						<view class="bottom u-flex u-row-between">
							<view class="left u-flex" v-html="item.goodsSnapshot||''">
							</view>
							<view class="btn" @click="book(item)" v-if="item.quantity!==0&&sessionList.length>=1">预定</view>
							<view class="btn disabled" v-else>无票</view>
						</view>
					</view> -->
				</view>
				<view class="date-block position-select generic-block"  v-if="sessionList.length>=1">
					<view class="title u-flex u-row-between">
						<view class="">票种</view>
						<view v-if="positionData.seatImg" class="" style="font-size: 24rpx;color: #aaa" @click="showSeatImg">票区图</view>
					</view>
					<view class="empty" v-if="positionArr.length<1">
						没有座位信息
					</view>
					<!-- <view class="date-list u-flex u-flex-wrap">
						<view class="date-item" :class="{active:positionIndex==index,'stock-over':date.stockNum<1&&date.stockNum!==-1}" @click="positionClick(index,date)" v-for="(date,index) in positionArr" :key="index">
							<view class="name">{{ date.seatTypeName }} <br />¥ {{date.salePrice}}</view>
							<view class="sold-out" v-if="date.stockNum<1&&date.stockNum!==-1">售罄</view>
						</view>
					</view> -->
					<view class="ticket-type-list">
						<view class="ticket-type-item" v-for="(item, index) in positionArr" :key="index">
							<view class="type-info u-flex u-row-between">
								<view class="type-name">{{item.goodsName}}</view>
								<view class="type-price">
									<text class="salePrice-price">¥{{item.salePrice}}</text>
									<text class="original-price" v-if="item.originalPrice">¥{{item.originalPrice}}</text>
								</view>
							</view>
							<view class="type-desc" v-if="item.goodsSnapshot">{{item.goodsSnapshot}}</view>
							<view class="ticket-control u-flex u-row-right">
								<view class="minus" :class="{disabled: !item.saleNum||fromPage=='rebook'}" 
									@click.stop="changeTicketNum(item, 'minus')">-</view>
								<!-- <view class="num">{{item.saleNum || 0}}</view> -->
								<input
								    border="none"
									type="number"
									style="width: 40px;text-align: center;"
								    v-model="item.saleNum"
									:disabled="fromPage=='rebook'"
								  >
								<view class="plus" :class="{disabled: item.stockNum === item.saleNum||fromPage=='rebook'}"
									@click.stop="changeTicketNum(item, 'plus')">+</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="book-btn full-btn" v-if="positionArr.length>=1&&sessionList.length>=1&&(positionIndex||positionIndex===0)" @click="book()">确定</view>
				<view class="full-btn gray" v-else>确定</view> -->
				<!-- 底部浮动条 -->
				<view class="bottom-bar">
					<view class="inner">
						<view class="price-info">
							<view class="total-price">
								<text>¥{{totalPrice}}</text>
								<text class="original">¥{{originalPrice}}</text>
							</view>
						</view>
						<view v-if="fromPage=='rebook'" class="submit-btn" :class="{active: hasSelectedTicket}" @click="handelRebook">
							{{hasSelectedTicket ? '确认改签并支付' : '请选择票'}}
						</view>
						<view v-else class="submit-btn" :class="{active: hasSelectedTicket}" @click="book">
							{{hasSelectedTicket ? '去支付' : '请选择票'}}
						</view>
					</view>
				</view>
			</view>
			<!-- ticket end -->
			<view class="details" v-if="tabsIndex==1">
				<view class="details-block">
					<view class="title">剧情简介</view>
					<view class="intro parse-content">
						<u-parse :content="performInfo.performSnapshot"></u-parse>
					</view>
				</view>
				<view class="details-block actors">
					<view class="title u-flex u-row-between">
						演职人员
						<view class="right u-flex" @click="$u.route('pages/actors',{performId:performId})">
							<text>更多</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"  @click="$u.route('/pages/actorsinfo',{id:item.id})">
								<image class="img" :src="item.performerHead||staticUrl+'/img/actors.png'"></image>
								<view class="text">
									<view class="name">{{item.performerName}}</view>
									<view class="role u-line-1">{{item.performerRole}}</view>
								</view>
							</view>
						</u-scroll-list>
						<u-empty text="暂无" v-if="actorsArr.length<1"></u-empty>
					</view>
				</view>
			</view>
			<view class="viewingTips parse-content" v-if="tabsIndex==2">
				<u-parse :content="formerNotice"></u-parse>
			</view>
		</view>
		<!-- :maxDate="maxDate" -->
		<u-calendar
			ref="calendar"
			:formatter="formatter"
			:maxDate="maxDate"
			monthNum="12"
			:show="calendarShow" 
			color="#EF1010"
			:closeOnClickOverlay="true"
			@close="closeCalendar"
			@confirm="confirmCalendar">
		</u-calendar>
		<!-- 分享选择弹出内容 -->
		<view class="share-option" :class="{shareShow:shareShow}">
			<view class="overlay" v-if="shareShow"  @click="shareShow=false"></view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="share-option-item wx-share" data-name="shareBtn" open-type="share">
				发送给朋友
			</button>
			<!-- #endif --> 
			<view class="share-option-item" @click="getPoster">生成海报</view>
			<view class="share-option-item" @click="shareShow=false">取消</view>
		</view>
		<u-popup :show="posterShow" @close="posterShow=false" ref="uni-popup">
			<view class="poster-wrap u-flex u-col-center">
				<view class="poster-inner">
					<view class="close-wrap" @click="posterShow=false">
						<u-icon name="close-circle" color="#fff" size="56rpx"></u-icon>
					</view>
					<view class="poster" id="poster" ref="poster" >
						<u--image :showLoading="false" :src="posterSrc" width="100%" height="65vh" mode="aspectFit"></u--image>
					</view>
					<!-- savePoster -->
					<view class="poster-btn" @click="saveImage">保存图片</view>
				</view>
			</view>
		</u-popup>
		<canvas canvas-id="canvas" class="canvas" style="width: 574px; height: 1042px;"></canvas>
	</view>
</template>

<script>
	import moment from 'moment';
	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()
	// 日历
	// 算最大日期
	const maxd = new Date()
	maxd.setMonth(maxd.getMonth() + 12)  // 将月份加3
	const maxdyear = maxd.getFullYear()
	let maxdmonth = maxd.getMonth() + 1
	maxdmonth = maxdmonth < 10 ? `0${maxdmonth}` : maxdmonth
	const maxddate = maxd.getDate()
	const theMaxDate = `${maxdyear}-${maxdmonth}-${maxddate}`
	// console.log('theMaxDate=============================',theMaxDate)  //输出：
	//算最大日期
	let parentThis= null;
	let sharePath = '/pages/index/index';
	export default {
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: this.$isDevelop?'剧场票务':'伟大转折演艺',
		      path: sharePath
		    }
		  },
		  onShareTimeline(res) {
		      if (res.from === 'button') {// 来自页面内分享按钮
		        console.log(res.target)
		      }
		      return {
		        title: this.$isDevelop?'剧场票务':'伟大转折演艺',
		        path: '/pages/ticketlist'
		      }
		    },
		mixins:[systemInfo],
		data() {
			return {
				performId:'',
				staticUrl:this.$commonConfig.staticUrl,
				tabsArr:[
					{name:'票务购买'},
					{name:'演出详情'},
					{name:'观影须知'}
				],
				theatre:{},
				tabsIndex:0,
				dateList:[],
				dateIndex:0,
				calendarShow:false,//日历
				// maxDate:`${year}-${month}-${date + 30}`,
				maxDate:theMaxDate,
				auditoriumList:[],//演艺厅
				auditoriumIndex:0,
				sessionList:[],//演出场次
				sessionIndex:0,
				ticketTypeList:[],//门票
				actorsArr:[],
				shareShow:false,
				posterShow:false,
				posterSrc:'',
				posterSrcType:null,
				performInfo:{},//节目详情
				formerNotice:{},//节目观影须知
				performDateList:[],//有票的日期
				// firstGet:0,
				ticketTypeIndex:0,
				positionData:{},//座位信息接口
				positionArr:[],
				positionIndex:null,
				scene:null,
				retailId:null,//分销码
				label:null,//scene解析出来的
				goodsSnapshot:null,//票务说明
				retailId:null,
				fromPage:null,
				payResult:{},
				cansubmit: true,
				newOrderId:'',
			}
		},
		onShow() {
			if(this.auditoriumList.length>=1){
				this.getPositionData();
			}
		},
		onLoad(page) {
			console.log('ticketlist page',page);
			parentThis = this;
			
			const scene = decodeURIComponent(page.scene);
			if(scene&&scene!='undefined'){
				uni.setStorage({
					key:'scene',
					data:scene
				});
			}
			// console.log('scene=========',scene);
			if(scene&&scene!='undefined'){
				this.$u.api.uncompress({scene:scene}).then(res=>{
					this.performId = res.data.performId;
					sharePath=`/pages/ticketlist?id=${res.data.performId}`;
					this.getPerformData();
					// this.getSystemInfo();
					let today = new Date();
					this.setDate(today);
					this.getPerformInfo();
					this.getPerformerNotice();
					// this.label = res.data.label;
					// console.log('uncompress',res.data);
				}).catch(err=>{
					console.log('uncompress',err);
				})
			}else if(page.fromPage=='rebook'){
				this.performId = page.performId;
				this.orderId = page.orderId;
				this.fromPage = page.fromPage;
				sharePath=`/pages/ticketlist?id=${page.id}`;
				this.getPerformData();
				// this.getSystemInfo();
				let today = new Date();
				this.setDate(today);
				this.getPerformInfo();
				this.getPerformerNotice();
			} 
			else{
				this.performId = page.id;
				sharePath=`/pages/ticketlist?id=${page.id}`;
				this.getPerformData();
				// this.getSystemInfo();
				let today = new Date();
				this.setDate(today);
				this.getPerformInfo();
				this.getPerformerNotice();
			}
		},
		onReady() {
			// 如果需要兼容微信小程序的话，需要用此写法
			this.$refs.calendar.setFormatter(this.formatter);
		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			uncompress(scene){
				this.$u.api.uncompress({scene:scene}).then(res=>{
					this.performId = res.data.performId;
					// this.label = res.data.label;
					// console.log('uncompress',res.data);
				}).catch(err=>{
					console.log('uncompress',err);
				})
			},
			getPerformData(){
				this.$u.api.performSell({performId:this.performId}).then(res=>{
					// console.log('getPerformData',res.data);
					this.theatre =  res.data.theatreList[0];
					this.auditoriumList  = res.data.theatreList[0].auditoriumList;
					// this.ticketTypeList = res.data.goodsList;
					// this.goodsSnapshot = this.ticketTypeList[this.ticketTypeIndex]?.goodsSnapshot;
					this.performDateList = this.auditoriumList[this.auditoriumIndex].performDateList;
					this.getDate()
					// console.log('auditoriumList',this.auditoriumList);
				}).catch(err=>{
					console.log('getPoster',err);
				})
			},
			getPerformInfo(){
				this.$u.api.performInfo({id:this.performId}).then(res=>{
					// console.log('getPerformInfo',res.data);
					this.performInfo =  res.data;
					this.actorsArr = res.data.performerList;
				}).catch(err=>{
					console.log('getPerformInfo',err);
				})
			},
			getPerformerNotice(){
				this.$u.api.performerNotice({performId:this.performId}).then(res=>{
					// console.log('getPerformerNotice',res.data);
					this.formerNotice =  res.data.performNotice;
				}).catch(err=>{
					console.log('getPerformerNotice',err);
				})
			},
			getDate(){
				let param = {
					auditoriumId:this.auditoriumList[this.auditoriumIndex]?.id,//演艺厅ID(演艺厅列表)
					performId:this.performId,
				};
				this.$u.api.getAuditoriumDate(param).then(res=>{
					// console.log('getDate',res.data);
					this.performDateList = res.data.list||[];
					this.setDate();
					// this.getTimes();
				}).catch(err=>{
					console.log('getDate',err);
				})
			},
			getTimes(){
				// this.firstGet++;
				uni.showLoading();
				let auditoriumId= this.auditoriumList[this.auditoriumIndex]?.id;
				if(!auditoriumId){return}
				// console.log('this.dateList',this.dateList);
				// console.log('this.dateIndex',this.dateIndex);
				let dateOBJ = this.dateList[this.dateIndex];
				let param = {
					auditoriumId:auditoriumId,//演艺厅ID(演艺厅列表)
					performId:this.performId,
					date:`${dateOBJ.year}-${dateOBJ.month}-${dateOBJ.day}`
				};
				// console.log('param',param);
				this.$u.api.getAuditoriumTimes(param).then(res=>{
					// console.log('getTimes',res.data);
					this.sessionList = res.data.list.map(item=>{
						item.performTimeStart = item.performTimeStart;
						item.performTimeEnd = item.performTimeEnd;
						return item
					});
					console.log('this.sessionList',this.sessionList);
					// this.sessionIndex = 0;
					this.sessionIndex = this.sessionList.findIndex(item => item.ifVaild === 1);
					if (this.sessionIndex !== -1) {
						this.getPositionData();
					}
					// let session = this.sessionList[this.sessionIndex];
					
				}).catch(err=>{
					console.log('getPoster',err);
				})
			},
			 formatter: (day) => {
				 if(!parentThis){
				 	return
				 }
				 day.date = moment(day.date).format("YYYY-MM-DD HH:mm:ss")
				 
				 // console.log('day',day);
				 // console.log('thisthisthisthisthisthisthisthisthis',parentThis);
				 // console.log('==================================',day.date.toISOString().split('T')[0]);
				let ticket = parentThis.performDateList.find(item => item.performDate === day.date.split(' ')[0]);
				if(ticket){
					day.dot = true
				}
				// if(ticket&&ticket.ishave){
				// 	day.bottomInfo = '有票'
				// 	day.dot = true
				// }else if(ticket){
				// 	day.dot = true
				// }
			    return day
			  },
			setDate(firstDay,isSelect){
				// console.log('this.performDateList',this.performDateList);
				if(this.performDateList[0]?.performDate&&!isSelect){
					// firstDay = new Date(this.performDateList[0].performDate);
					const uniquePerformDateList = Array.from(new Set(this.performDateList.map(JSON.stringify))).map(JSON.parse);//去重
					// console.log('uniquePerformDateList',uniquePerformDateList);
					let arr =  uniquePerformDateList.slice(0, 3);//只要前三项
					this.dateList = arr.map(item=>{
						// console.log('uniquePerformDateList item',item);
						let day = item.performDate.split('-');
						// console.log('setDate day',day);
						return { year:day[0],month:String(day[1]),day:String(day[2]), fullDay:`${day[0]}-${String(day[1])}-${String(day[2])}`}
					});
					// console.log('this.dateList',this.dateList);
					this.dateIndex = 0;
					this.getTimes();
					// 
					return 
				}
				// console.log('this.dateListthis.dateListthis.dateListthis.dateList',this.dateList);
				// 前端写演出日期（今天，明天，后天）
				let today = firstDay||new Date();
				// console.log('today=========',today);
				let tomorrow = new Date(today.getTime());
				tomorrow.setDate(today.getDate() + 1);
				let afterTomorrow = new Date(today.getTime());
				afterTomorrow.setDate(today.getDate() + 2);
				this.dateList = [
				  { 
					  year: today.getFullYear(), 
					  month: String(today.getMonth() + 1).padStart(2, '0'), 
					  day: String(today.getDate()).padStart(2, '0'), 
					  name: '日期',
					  fullDay:`${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${ String(today.getDate()).padStart(2, '0')}`
					},
				  { 
					  year: tomorrow.getFullYear(), 
					  month: String(tomorrow.getMonth() + 1).padStart(2, '0'), 
					  day: String(tomorrow.getDate()).padStart(2, '0'), 
					  name: '日期',
					  fullDay:`${tomorrow.getFullYear()}-${String(tomorrow.getMonth() + 1).padStart(2, '0')}-${ String(tomorrow.getDate()).padStart(2, '0')}`
					},
				  { 
					  year: afterTomorrow.getFullYear(), 
					  month: String(afterTomorrow.getMonth() + 1).padStart(2, '0'), 
					  day: String(afterTomorrow.getDate()).padStart(2, '0'), 
					  name: '日期',
					  fullDay:`${afterTomorrow.getFullYear()}-${String(afterTomorrow.getMonth() + 1).padStart(2, '0')}-${ String(afterTomorrow.getDate()).padStart(2, '0')}`
					}
				];
				this.getTimes()
				// console.log('this.dateList ',this.dateList);
			},
			dateClick(index){
				this.dateIndex = index;
				this.ticketTypeIndex = 0;
				this.positionIndex = 0;
				this.getTimes()
			},
			auditoriumClick(index){
				this.auditoriumIndex = index;
				this.getDate();
			},
			confirmCalendar(e){
				// console.log('confirmCalendar',e);
				// this.getDate(e)
				this.dateIndex = 0;
				this.setDate( new Date(e),true );
				// 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,data){
				// console.log('sessionClick index',index);
				console.log('sessionClick data',data);
				if(!data.ifVaild){
					uni.showToast({
						title:'该场次不可用',
						icon:'none'
					})
					return
				}
				if(this.sessionIndex==index){
					// console.log('不变');
					return
				}
				this.sessionIndex = index;
				let session = this.sessionList[this.sessionIndex];
				this.getPositionData();
				this.ticketTypeIndex = 0;
				this.positionIndex = 0;
				
				let sellableTicketTypeIndex = this.findFirstSellableTicketTypeIndex();
				this.ticketTypeIndex = sellableTicketTypeIndex;
				// console.log('sessionClick',this.sessionList[this.sessionIndex]);
			},
			async getPositionData() {
				try {
					uni.showLoading();
					
					// 获取 retailId
					let retailId = null;
					try {
						const res = await uni.getStorage({ key: 'retailId' });
						retailId = res.data;
					} catch (error) {
						console.log('获取 retailId 失败:', error);
					}
					this.retailId = retailId;

					// 构建请求参数
					const session = this.sessionList[this.sessionIndex] || {};
					const params = {
						performId: this.performId,
						auditoriumId: this.auditoriumList[this.auditoriumIndex].id,
						performTimeId: session.id,
						label: this.label,
						retailId: this.retailId,
						timeId: session.id,
						orderId: this.orderId
					};

					// 根据不同场景调用不同接口
					const api = this.fromPage === 'rebook' ? 
						this.$u.api.selectRegionRebook : 
						this.$u.api.selectRegionV2;
					
					const res = await api(params,{custom:{toast:false,noload:true}});
					
					// 处理响应数据
					this.positionData = res.data;
					this.ticketTypeList = res.data.seatList || [];
					
					// 设置默认选中的票档
					const sellableTicketTypeIndex = this.findFirstSellableTicketTypeIndex();
					this.ticketTypeIndex = sellableTicketTypeIndex;
					
					// 设置票务说明
					this.goodsSnapshot = this.ticketTypeList[this.ticketTypeIndex]?.goodsSnapshot;
					
					// 初始化座位数据
					this.positionArr = (this.ticketTypeList[this.ticketTypeIndex]?.goodsList || [])
						.map(obj => ({
							...obj,
							saleNum: obj.saleNum||0 // 初始化选择数量为0
						}));

				} catch (error) {
					console.error('获取座位数据失败:', error);
					uni.showModal({
						title: '提示',
						content: error.msg||'获取座位数据失败',
						showCancel:false,
						success: function (res) {
							console.log('获取座位数据失败 提示',res);
						}
					})
					// uni.showToast({
					// 	title: error.msg||'获取座位数据失败',
					// 	icon: 'none'
					// });
				} finally {
					uni.hideLoading();
				}
			},
			// 改变票数
			changeTicketNum(item, type) {
				// console.log('changeTicketNum===',item, type);
				if(this.fromPage=='rebook'){
					return
				}
				const currentNum = item.saleNum;
				if(type === 'minus' && currentNum > 0) {
					item.saleNum=item.saleNum-1
					// 直接修改数值
					// console.log('item.saleNum',item.saleNum)
				}
				if(type === 'plus') {
					 // && currentNum < item.stockNum
					 // console.log('item.saleNum',item.saleNum)
					item.saleNum=item.saleNum+1
					// console.log('item.saleNum',item.saleNum)
				}
				console.log('this.positionArr',this.positionArr)
			},
			ticketTypeClick(index,date){
				if(this.ticketTypeIndex==index){
					// console.log('不变');
					return
				}else if(date.stockNum<1&&date.stockNum!==-1){
					uni.showToast({
						title:'已售罄',
						icon:'none'
					})
					return
				}
				this.ticketTypeIndex = index;
				this.goodsSnapshot = this.ticketTypeList[this.ticketTypeIndex]?.goodsSnapshot;
				this.positionArr =  this.ticketTypeList[this.ticketTypeIndex]?.goodsList||[];
				this.positionArr = this.positionArr.map(obj => {
					return {
						...obj, // 保留原有的字段
						saleNum: 0 // 新增的字段
					};
				});
				// let sellableProductIndex = this.findFirstSellableProductIndex();
				// this.positionIndex = sellableProductIndex;
				// this.getPositionData()
			},
			positionClick(index,date){
				if(this.positionIndex==index){
					// console.log('不变');
					return
				}else if(date.stockNum<1&&date.stockNum!==-1){
					uni.showToast({
						title:'已售罄',
						icon:'none'
					})
					return
				}
				this.positionIndex = index;
			},
			findFirstSellableProductIndex(){
				console.log('this.positionArr',this.positionArr);
				// 检查数组是否为空
				if (!Array.isArray(this.positionArr) || this.positionArr.length === 0) {
					return null; 
				}
			
				// 遍历数组，找到第一个可售的产品
				for (let i = 0; i < this.positionArr.length; i++) {
					if (this.positionArr[i].stockNum > 0 || this.positionArr[i].stockNum === -1) {
						return i; // 返回第一个可售产品的索引
					}
				}
				return null; 
			},
			findFirstSellableTicketTypeIndex(){
				console.log('this.ticketTypeList',this.ticketTypeList);
				// 检查数组是否为空
				if (!Array.isArray(this.ticketTypeList) || this.ticketTypeList.length === 0) {
					return null; 
				}
			
				// 遍历数组，找到第一个可售的产品
				for (let i = 0; i < this.ticketTypeList.length; i++) {
					if (this.ticketTypeList[i].stockNum > 0 || this.ticketTypeList[i].stockNum === -1) {
						return i; // 返回第一个可售产品的索引
					}
				}
				return null; 
			},
			book(item){
				if(!this.hasSelectedTicket){
					return
				}
				// console.log('book',item);
				// console.log('performInfo',this.performInfo);
				let session = this.sessionList[this.sessionIndex];
				// console.log('session',session);
				let performTimeStart = session.performTimeStart;
				let performTimeEnd = session.performTimeEnd;
				let dateOBJ = this.dateList[this.dateIndex];
				let ticketType = this.ticketTypeList[this.ticketTypeIndex];
				console.log('this.positionArr',this.positionArr);
				console.log('this.positionIndex',this.positionIndex);
				let seatType = this.ticketTypeList[this.ticketTypeIndex];
				// console.log('ticketType',ticketType);
				
				let params ={
					performId:this.performId,
					goodsId:ticketType.id,
					auditoriumId:this.auditoriumList[this.auditoriumIndex].id,
					performTimeId:session.id,
					seatTypeId:seatType.seatTypeId,
					salePrice:seatType.salePrice
				}
				
				let selectGoodsList = this.positionArr.reduce((acc, item) => {
					if (item.saleNum > 0) {
						acc.push({
							goodsId: item.goodsId,
							saleNum: item.saleNum
						});
					}
					return acc;
				}, []);
				// console.log('selectGoodsList',selectGoodsList)
				uni.setStorage({
					key:'selectGoodsList',
					data:JSON.stringify(selectGoodsList)
				});
				
				// console.log('book params',params);
				uni.$u.route('pages/bookticket',params)
				
				
				// 调整选择位置类型页面
				// uni.$u.route('pages/chosenposition',{
				// 	goodsId:item.id,
				// 	performId:this.performId,
				// 	performName:this.performInfo.name,
				// 	day:`${dateOBJ.year}-${dateOBJ.month}-${dateOBJ.day}`,
				// 	performTimeStart:session.performTimeStart,
				// 	performTimeEnd:session.performTimeEnd,
				// 	performTimeId:session.id,
				// 	auditoriumId:this.auditoriumList[this.auditoriumIndex].id
				// })
			},
			getUserLocation() {
			  return new Promise((resolve, reject) => {
			    uni.getLocation({
			      type: 'gcj02',
			      success: (res) => {
			        resolve(res);
			      },
			      fail: (err) => {
			        reject(err);
			      }
			    });
			  });
			},
			async handelRebook(){
				const location = await this.getUserLocation();
				let session = this.sessionList[this.sessionIndex];
				let params = {
					orderId:this.orderId,
					performTimeId:session.id,
					longitude:location.longitude,
					latitude:location.latitude
				}
				console.log('handelRebook params',params);
				uni.showModal({
				  title: '温馨提示',
				  content: '每张票仅限改签一次,改签成功后原订单费用将会原路退还,您确定要改签吗?',
				  success: res => {
				    if (res.confirm) {
						this.cansubmit = false;
						this.$u.api.rebookApi(params)
						    .then(res => {
								this.newOrderId = res.data.orderId;
								// if(!res.data.needPay){
								// 	//this.payQuery();
								// 	uni.$u.route('/center/orderdetails', {
								// 		type:'redirectTo',
								// 		id: this.orderId
								// 	});
								// }else {
								// 	this.payResult = res.data.payInfo;
								// 	this.payResult.package = res.data.payInfo.packageValue;
								// 	this.wxPay()
								// }
								this.gotoPay();
								// uni.redirectTo({
								// 	url: '/center/order'
								// });
						    })
						    .catch(err => {
								uni.showToast({
									title: err.msg||'改签失败',
									icon: 'none'
								})
						    });				      
					  
				    }
				  }
				})
			},
			gotoPay() {
				this.$u.api.gotoPayV2({
					orderId: this.newOrderId,
					openid: ''
				}).then(res => {
					// this.payResult = res.data.payInfo;
					// this.payResult.package = res.data.payInfo.packageValue;
					
					// ygh
					if(!res.data.needPay){
						//this.payQuery();
						uni.$u.route('/center/orderdetails', {
							type:'redirectTo',
							id: this.newOrderId
						});
					}else {
						this.payResult = res.data.payInfo;
						this.payResult.package = res.data.payInfo.packageValue;
						this.wxPay()
					}
				}).catch(err => {
					this.cansubmit = true;
					console.log('gotoPay', err);
				})
			},
			wxPay() {
				let that = this;
				uni.requestPayment({
					...this.payResult,
					"provider": "wxpay",
					"orderInfo": {
						// "appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						// "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
						// "package": "Sign=WXPay",        // 固定值
						// "partnerid": "148*****52",      // 微信支付商户号
						// "prepayid": "wx202254********************fbe90000", // 统一下单订单号 
						// "timestamp": 1597935292,        // 时间戳（单位：秒）
						// "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
					},
					success(res) {
						that.payQuery();
					},
					fail(e) {
						uni.$u.route('/center/order', {
							status: 0
						});
						console.log('wxPayfail', e);
					},
					complete() {
						this.cansubmit = true;
					}
				})
			},
			payQuery() {
				let that = this;
				let retryCount = 0;
				let maxRetryCount = 5; // 设置最大重试次数
				let interval = 2000; // 设置间隔时间为2秒
				let timeout = 10000; // 设置超时时间为10秒
				let timer;
				uni.showLoading({
					title: '支付结果查询中'
				})
				timer = setInterval(() => {
					retryCount++;
					if (retryCount > maxRetryCount || retryCount * interval > timeout) {
						clearInterval(timer);
						uni.hideLoading();
						console.log("支付查询超时或达到最大重试次数");
						// 在这里添加超时或达到最大重试次数的处理逻辑
						uni.redirectTo({
							url: '/center/order'
						});
					} else {
						console.log("第" + retryCount + "次查询");
						// 调用查询支付状态的方法
						// 如果支付状态为成功，则清除定时器并处理成功的逻辑
						// 如果支付状态为失败，则清除定时器并处理失败的逻辑
						this.$u.api.payQueryV2({
							orderId: this.newOrderId
						}).then(res => {
							// 0-未支付 1-已支付 2-支付中 3-支付失败 4-支付退款
							let payStatus = res.data.payStatus;
							if (payStatus === 1) {
								// uni.$u.route('/center/orderdetails', {
								// 	type:'redirectTo',
								// 	id: res.data.orderId
								// });
								uni.redirectTo({
									url: '/center/order?status=3'
								});
								// uni.$u.route('/center/paysuccess');
							} else if (payStatus === 0 || payStatus === 2) {
								this.payQuery()
							} else if (payStatus === 3) {
								uni.toast('支付失败')
							}
							clearInterval(timer);
						}).catch(err => {
							console.log('payQuery', err);
						}).finally(() => {
							uni.hideLoading()
							this.cansubmit = true;
						})
					}
				}, interval);
			},
			openShare(){
				if(!this.performInfo.posterImg){
					uni.$u.toast('没有节目信息');
					return false
				}
				this.shareShow = true;
				
			},
			// 海报相关开始
			getPoster(item){
				this.posterShow = true;
				this.shareShow = false;
				// 后端生成海报
				// this.$u.api.performQrcode({performId:this.performId}).then(res=>{
				// 	this.posterSrc = res.data.imageUrl;
				// 	// console.log('getPoster',res.data);
				// }).catch(err=>{
				// 	console.log('getPoster',err);
				// })
				
				//前端生成海报
				uni.showLoading({
					title: '生成海报中'
				});
				// 前端生成海报开始
				let that = this;
				 const ctx = uni.createCanvasContext('canvas', this);
				// 加载海报背景图
				uni.getImageInfo({
				  src: this.performInfo.posterImg,
				  success: res1 => {
					const img1 = res1.path;
							
					// 加载海报二维码
					uni.getImageInfo({
					  src: this.performInfo.appletQrcode,
					  success: res2 => {
						const img2 = res2.path;
							
						// 绘制海报背景图
						ctx.drawImage(img1, 0, 0, 574, 1042);
							
						// 绘制海报二维码
						ctx.drawImage(img2, 428, 888, 114, 114);
							
						// 绘制完成后导出图片并显示
						ctx.draw(false, () => {
						  uni.canvasToTempFilePath({
							canvasId: 'canvas',
							success: res3 => {
							  this.posterSrc = res3.tempFilePath;
							  this.posterSrcType = 'local';
							},
							fail: err => {
							  console.error(err);
							},
						  }, this);
						});
					  },
					  fail: err2 => {
						console.error(err2);
					  },
					});
				  },
				  fail: err1 => {
					console.error(err1);
				  },
				  complete: () => {
				  	uni.hideLoading()
				  }
				});
				// 前端生成海报结束
			},
			saveImage() {
				let that = this;
					uni.showLoading({
						title: '保存中'
					});
					if(this.posterSrcType == 'local'){
						let params = {
							tempFilePath:that.posterSrc
						}
						that.saveImageToPhotosAlbum(params);
						return
					}
			      uni.downloadFile({
			        url: this.posterSrc,
			        success(res) {
			          if (res.statusCode === 200) {
						  that.saveImageToPhotosAlbum(res)
			          } else {
			            uni.showToast({
			              title: '下载图片失败',
			              icon: 'none'
			            });
			          }
			        },
			        fail(e) {
						console.log('下载图片失败', e);
						console.log('posterSrc',that.posterSrc);
			          uni.showToast({
			            title: '下载图片失败',
			            icon: 'none'
			          });
			        }
			      });
			    },
				saveImageToPhotosAlbum(res){
					let that = this;
					uni.saveImageToPhotosAlbum({
					  filePath: res.tempFilePath,
					  success() {
					    uni.showToast({
					      title: '保存相册成功!',
					      icon: 'success'
					    });
					  },
					  fail(err) {
						  console.log('保存图片失败',err);
					    if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
							uni.getSetting({
							  success(res) {
								if (!res.authSetting['scope.writePhotosAlbum']) {
								  uni.showModal({
									title: '提示',
									content: '您还没有授权访问相册，请前往设置页面打开权限。',
									confirmText: '去设置',
									success(res) {
									  if (res.confirm) {
										uni.openSetting();
									  }
									}
								  });
								} else {
								  uni.showToast({
									title: '保存图片失败',
									icon: 'none'
								  });
								}
							  }
							});
						  } else {
							uni.showToast({
							  title: '保存图片失败',
							  icon: 'none'
							});
						}
					  },
					  complete() {
						  setTimeout(()=>{
							  uni.hideLoading();
							  that.posterShow = false;
						  },1500)
					  }
					});					
				},
			// 海报相关结束
			goMap(){
				uni.openLocation({
				  latitude:Number(this.theatre.latitude),	//维度
				  longitude: Number(this.theatre.longitude), //经度
				  name:  this.theatre.name,	//目的地定位名称
				  scale: 15,	//缩放比例
				  address: this.theatre.address	//导航详细地址
				})
			},
			phoneCall(){
				// console.log('this.theatre',this.theatre);
				uni.makePhoneCall({
					phoneNumber: this.theatre.customerServiceMobile,
					success() {
						console.log('success');
					},
					fail() {
						console.log('fail');
					}
				});
			},
			showSeatImg(){
				if(!this.positionData.seatImg){
					uni.$u.toast('没有图片')
					return
				}
				let urls = [];
				urls.push(this.positionData.seatImg)
				uni.previewImage({
					urls: urls,
				})
			},
			previewBanner(index){
				let urls = this.performInfo.photoList.map(item=>{
					return item.imageUrl
				});
				// console.log('urls',urls);
				uni.previewImage({
					urls: urls,
					current:index
				})
			}

		},
		computed: {
			// 是否已选择票
			hasSelectedTicket() {
				return this.positionArr.some(item => item.saleNum > 0);
			},
			// 总价
			totalPrice() {
				return this.positionArr.reduce((total, item) => {
					return total + (item.saleNum * item.salePrice);
				}, 0).toFixed(2);
			},
			// 原价
			originalPrice() {
				return this.positionArr.reduce((total, item) => {
					// 如果有原价就用原价，没有就用售价
					const price = item.originalPrice || item.salePrice;
					return total + (item.saleNum * price);
				}, 0).toFixed(2);
			}
		}
	}
</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;
		right: 0;
		bottom: 200rpx;
	}
	.share{
		overflow: hidden;
		margin-bottom: 100rpx;
		float: right;
		.icon{
			float: right;
			display: block;
			width: 32rpx;
			height: 32rpx;
			padding: 10rpx;
			border-radius: 50%;
			background-color: rgba(0,0,0,0.4);
		}
	}
}
.base-info{
	position: relative;
	// margin-bottom: 54rpx;
	.inner{
		position: relative;
		padding: 50rpx 38rpx 58rpx 40rpx;
		background-color: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		margin-top: -30px;
		border-bottom: 12rpx solid #F7F8F9;
	}
	.name{
		font-size: 40rpx;
		font-weight: 800;
		color: #2D2D2D;
		margin-bottom: 26rpx;
	}
	.addr{
		font-size: 26rpx;
		font-weight: 400;
		color: #606060;
	}
	.menu{
		.item{
			margin-left: 18rpx;
			font-size: 18rpx;
			font-weight: 400;
			color: #999999;
			text-align: center;
		}
		.icon{
			width: 62rpx;
			height: 64rpx;
			display: block;
			margin-bottom: 4rpx;
		}
	}
}
.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: 48rpx;
		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;
}
.empty{
		background-color: #636363;
		color: #979797;
		border-radius: 8rpx;
		padding: 24rpx;
		text-align: center;
	}
.session-wrap{
	
}
.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;
				&.disabled{
					background: #979797;
				}
			}
		}
	}
	.goodsSnapshot{
		font-size: 24rpx;
		color: #750000;
		line-height: 1.5;
		margin-top: 24rpx;
		padding-bottom: 24rpx;
		// border-bottom: 1px solid #750000;
	}
}
.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;
		}
	}
}
.canvas{
	position: fixed;
	left: -99999px;
}
.ticket-type-list{
	.ticket-type-item{
		border-radius: 10rpx;
		border:1px solid #7F7F7F;
		padding: 20rpx;
		margin-bottom: 24rpx;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(211,211,211,0.5);
	}
	.type-info{
		margin-bottom: 40rpx;
		.type-name{
			font-size: 28rpx;
		}
		.salePrice-price{
			color: #ED0000;
		}
		.original-price{
			color: #7F7F7F;
			text-decoration: line-through;
			margin-left: 10rpx;
		}
	}
	.type-desc{
		color: #7F7F7F;
		font-size: 26rpx;
	}
	.ticket-control {
		display: flex;
		align-items: center;
		
		.minus, .plus {
			width: 50rpx;
			height: 50rpx;
			line-height: 46rpx;
			text-align: center;
			border: 1px solid #ddd;
			border-radius: 50%;
			
			&.disabled {
				color: #ccc;
				background: #f5f5f5;
			}
		}
		
		.num {
			min-width: 60rpx;
			text-align: center;
			margin: 0 20rpx;
		}
	}
}
/* 底部浮动条样式 */
.bottom-bar {
	height: 100rpx;
	.inner{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
		z-index: 100;
	}
	.price-info {
		flex: 1;
		
		.total-price {
			font-size: 36rpx;
			color: #f00;
			font-weight: bold;
			
			.original {
				font-size: 24rpx;
				color: #999;
				text-decoration: line-through;
				margin-left: 10rpx;
				font-weight: normal;
			}
		}
	}
	
	.submit-btn {
		// width: 200rpx;
		padding: 0 24rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #eee;
		color: #999;
		border-radius: 40rpx;
		
		&.active {
			background: #f00;
			color: #fff;
		}
	}
}
</style>