tongli_WeChat/subPackages/ticketBooking/detail.vue

<template>
	<view class="bg">
		<view class="swipe-box">
			<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" @change="swiperChange">
				<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id">
					<swiper-item v-if="info && info.videourl">
					    <video
					        :src="showImg(info.videourl)"
					        id="detailVideo"
					        :poster="
					            showImg(info.image)
					        "
							@play="play"
							@error="videoErrorCallback"
							controls
							style="width: 100%;height: 100%;"
							object-fit="cover"
					    ></video>
					</swiper-item>
					<view class="swiper-item">
						<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			
			<view class="swiper-pointer">
				{{swiperCurrent}}/{{info.list_images.split(',').length}}
			</view>
		</view>
		
		<view class="detail-container">
			<view class="common-container info-container">
				<view class="flex-between">
					<view class="info-title text-overflowRows">{{info.title}}</view>
					<!-- <view class="collect" @click="collect">
						<image :src="showImg('/uploads/20240827/8a55a8936b9324fa1c7b85c2da9c015b.png')" mode="" v-if="info.is_collect == 0"></image>
						<image v-else :src="showImg('/uploads/20240827/6bf73216f19c756961496031f8aed053.png')" mode="" ></image>
						<view>收藏</view>
					</view> -->
				</view>
				<view class="flex-between time-container">
					<view class="flex flex-1 flex-shrink-0 flex-items-center">
						<image class="address-icon flex-shrink-0" :src="showImg('/uploads/20241024/7fe2f8f89aec55a4009b66032b7a3f7e.png')" mode=""></image>
						<view class="title text-overflowRows">
							<text style="margin-right: 28rpx;">营业时间</text>
							{{info.open_description}}
						</view>
					</view>
					<view></view>
				</view>
				<view class="flex-between" style="align-items: flex-start;">
					<view class="flex flex-1 flex-shrink-0 flex-items-center" style="align-items: flex-start;">
						<image class="address-icon flex-shrink-0" style="margin-top: 5rpx;" :src="showImg('/uploads/20241023/3d357e6e562de9395f373dc380a790a7.png')" mode=""></image>
						<view class="title address-title text-overflowRows">
							<text class="flex-shrink-0" style="margin-right: 28rpx;">景区地址</text>
							<text class="address-detail flex-1">{{info.address}}</text>
						</view>
					</view>
					<view @click="goMap" class="map-icon">
						<img style="width: 50rpx;height: 50rpx;" :src="showImg('/uploads/20241104/07d3dce7ad780dc9f207142887e938e8.png')">
						<view>去这里</view>
					</view>
				</view>
			</view>
			
			<view class="box-title" v-if="currentAudio.multimedia_url">语音讲解</view>
			<view class="common-container info-container" v-if="currentAudio.multimedia_url">
				<view class="info-title text-overflowRows" style="font-weight: normal;">{{info.title}}</view>
				<view class='flex flex-between audio' >
					<view class='flex-shrink-0'>{{getTime(Math.round(currentAudio.currentTime.toFixed(0)))}}</view>
					<Voice-play :duration="133" :play="false"></Voice-play>
					<view class='flex-1' style="width: 10rpx;padding:0 30rpx">
					  	<slider @change="audioSeek" @changing="audioChanging" style="width: 100%;margin: 0;" :block-size="12"  backgroundColor='#E4F1F5' 
						activeColor='#12293C' :min='0' :max='currentAudio.video_length.toFixed(0)' :value='currentAudio.currentTime.toFixed(0)' :step='0.1'></slider>

					</view>
					<view class='flex-shrink-0'> {{getTime(Math.round(currentAudio.video_length))}}</view>
					
					<view class='play-icon' style="height:59rpx" >
						<image v-if="!curPlay" @tap.stop="playVoice" :src="showImg('/uploads/20241104/d5e0afc30007b693b1880dfe49fa329e.png')" ></image>
						<image v-else @tap.stop="pauseVoice" :src="showImg('/uploads/20241104/986b741dfc323cf6175c34e2ca751a9a.png')" class='icon'></image>
					</view>
				</view>
			</view>
			
			<view class="box-title" v-if="sku.length>0">门票预定</view>
			<view class="w-full" v-if="sku.length>0">
				<view class="scenic-list" v-for="(item, index) in sku" :key="index">
					<view class="scenic-item " v-for="(itemSku, indexSku) in item.specifications" :key="indexSku">
						<view class="w-1rpx flex-1 item-left">
							<view class="title text-overflow">{{ itemSku.title }}</view>
							<view>
								<view class="tags-box">
									<view class="tags text-overflow" v-if="itemSku.specifications_new_tag">
										<view v-for="(tagSku,tagSkuIndex) in itemSku.specifications_new_tag.split(',').slice(0, 2)" 
										:key="tagSkuIndex">{{ tagSku }}</view>
									</view>
								</view>
											
								<view style="color: #12293C;" class="notice" @click="showSkuInfo(itemSku, item)">
									预订须知 >
								</view>
							</view>
							
		
						</view>
						<view class="item-right  flex-shrink-0">
							<view class="price">
								{{showNoPriceNew(itemSku.price)}}
							</view>
							<view class="btn" @click="changeSku(itemSku, item)">
								购买
							</view>
						</view>
					</view>
				</view>
			</view>
		
			<view class="box-title">景点简介</view>
			<view class="common-container" style="padding: 30rpx;">
				<view class="" id="cpts" v-html="formateRichText(info.feature_content)"></view>
			</view>
			
<!-- 			<template v-if="id">
				<userReviewsVue  :goodsId="id" goodsType="scenicId"></userReviewsVue>
				<moreGoodsVue  :goodsId="id"></moreGoodsVue>
			</template> -->
			
		</view>
		
		<!-- 预订须知的弹窗 -->
		<uni-popup ref="popupRule" type="bottom" :safe-area="false">
			<view class="popup-content-date flex-column flex" >
				<view class="popup-content-title flex">
					<view class="flex-1 w-1rpx text-overflow">
						{{skuInfo.title}}
					</view>
					<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="closePopupRule"
						style="width: 20rpx;height: 20rpx;" class="flex-shrink-0">
				</view>	
				<view class="content flex-1 h-1rpx no-scrollbar">
					<view class="detail-content" v-html="formateRichText(skuInfo.reserve_content)"></view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 预定弹窗 -->
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="popup-content-date" >
				<view class="popup-content-title flex">
					<view class="flex-1 w-1rpx text-overflow">
						{{skuInfo.title}}
					</view>
					<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="closePopup"
						style="width: 31rpx;height: 31rpx;" class="flex-shrink-0">
				</view>				
				<view class="order-popup-detail">
					<view class="relative">
						<view class="sku-title">使用日期</view>
						<view class="date-content">
							<view :class="['item', item.store>0?'':'disabled',seldDateIndex===index?'active':'']" 
							v-for="(item,index) in allSeldDate" :key="index"
							@click="clickTab(item,index)">
								<view>{{ShowDateDay(new Date(item.date).getDay())}}</view>
								<view>{{item.date.slice(-5)}}</view>
								<view class="price" v-if="item.store > 0">￥{{showNoPriceNew(item.money)}}</view>
								<view v-else>不可定</view>
							</view>
						</view>
						<view class="dateMore" @click="openCalendar">
							<view style="width: 55rpx;">更多日期</view>
							<view style="padding-left: 9rpx;">></view>
						</view>
					</view>
					
					<view v-if="timesArr.length > 0 && skuInfo.is_time_stock">
						<view class="sku-title">选择场次</view>
						<view class="time-box">
							<view v-for="(item,index) in timesArr" :key="index" 
							:class="['time-item',{'time-disable': item.stock_number < 1, 'time-active': item.stock_number > 0 && index == seldTimeIndex}]" 
							@click="changeTime(item,index)">
								{{ item.start_time }}-{{ item.end_time }}
								{{item.stock_number < 10 ? (item.stock_number === -1 ? '不可定' : item.stock_number === 0 ? '无票' : '(余票' + item.stock_number + ')') : '有票'}}
							</view>
						</view>
					</view>
				</view>
				<view class="sku-bottom">
					<view class="flex" style="align-items: baseline;">
					    合计：<view class="bottom-price">{{allSeldDate[seldDateIndex].money / 100 || 0}}</view>
					</view>
					<view class="bottom-btn" @click="addBuyCard">
							下一步
					</view>
				</view>
			</view>
			
		</uni-popup>
		
		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" 
		:date="allSeldDate[seldDateIndex].date" :insert="false"  :startDate="calendarParam.startDate"
		:endDate="calendarParam.endDate"  @confirm="confirmCalendar" :selected="calendarParam.selected"/>
	</view>
</template>

<script>
	import userReviewsVue from '../../compoents/userReviews.vue';
	import moreGoodsVue from '../../compoents/moreGoods.vue'
	let innerAudioContext2 = null
	export default {
		components: {userReviewsVue,moreGoodsVue},
		data() {
			return {
				headImg: null,
				swiperCurrent: 1,
				
				id: null,
				info: {list_images:'', times_list_info: {start:'',end:''}},
				sku: [],
				skuInfo: {}, // 预定门票
				selectGoods: {}, // 预定的商品
				minSeldDate: new Date().Format('yyyy-MM-dd'),
				maxSeldDate: new Date((new Date()).getFullYear(), (new Date()).getMonth() + 3, 0).Format('yyyy-MM-dd'),
				allSeldDate: [],
				seldDateIndex: 0,
				timesArr: [],
				seldTimeIndex: -1,
				calendarParam: {
					stratDate:'',endDate: '', selected: []
				},
				
				currentAudio: {multimedia_url:'', video_length: 0, currentTime: 0},
				curPlay: false,
				curPlayCopy: false,
				
			}
		},
		onShow(options) {
			
		},
		onLoad(options) {
			this.id = options.id;
			this.getInfo();
			this.getGoodsList()
			this.initPlayer()
		},
		onHide () {
			if (innerAudioContext2) {
				try {
					innerAudioContext2.pause();
					innerAudioContext2.destroy()
					innerAudioContext2 = null
				  } catch (e) {
					//TODO handle the exception
				  }
			}
		},
		onUnload () {
			if (innerAudioContext2) {
				try {
					innerAudioContext2.pause();
					innerAudioContext2.destroy()
					innerAudioContext2 = null
				  } catch (e) {
					//TODO handle the exception
				  }
			}
		},
		
		methods: {
			swiperChange (e) {
				this.swiperCurrent = e.detail.current+1
			},
			// 获取景点信息
			getInfo() {
				this.Post({id: this.id},'/api/scenic/getScenicById').then(res => {
					if (res.data.flag == 0) {
						uni.showToast({title: '商品不存在或已下架',icon: 'none'})
						setTimeout(() => {this.goBack()}, 2000)
					}
					let info = res.data;
					try {
						info.times_list_info = JSON.parse(info.times_list)[0]
					} catch(e) {
						console.log(e)
						info.times_list_info = {start:'',end:''}
					}
	
					if(Array.isArray(info.multimedia)&&info.multimedia.length>0) {
						this.currentAudio.multimedia_url = this.showImg(info.multimedia[0].multimedia_url)
						this.currentAudio.video_length = info.multimedia[0].video_length
						this.currentAudio.currentTime = 0
					}
					this.info = info
					console.log(info)
					
					let param = {
						sku_id: this.info.id,
						sku_name: this.info.title,
						sku_price: this.info.price/100,
						category_id: this.info.scenic_type_id,
						category_name:this.info.scenic_type_text,
						visitSource: this.getVisitSource()
					}
					
					this.qdTracker('viewProductDetail', param)
				});
			},
			// 根据景点id获取商品列表
			getGoodsList(){
				this.Post({
					scenic_id: this.id
				},'/api/scenic/getGoodsByScenicId').then(res => {
					this.sku = res.data || []
				})
			},
			
			// 收藏 2景点
			collect() {
				this.Post({type: 2,id: this.id},'/api/scenic/collect').then(res => {
					if (res) {
						uni.showToast({title: res.msg,icon: 'none'});
						this.info.is_collect = !this.info.is_collect
					}
				});
			},
			
			goMap () {
				if (!this.info.tengxun_map) {
					uni.showToast({
						title: '暂未配置地理位置',
						icon: 'none'
					})
					return
				}
				
				uni.openLocation({
					latitude: Number(this.info.tengxun_map.lat),
					longitude: Number(this.info.tengxun_map.lon),
					name: this.info.title,
					address: this.info.address,
					success: function () {
						console.log('success');
					}
				});
			},
			
			showSkuInfo (itemSku,goods) {
				this.skuInfo = itemSku
				this.selectGoods = goods
				console.log(itemSku,goods)
				this.openPopRule()
			},
			
			// 选择列表规格
			changeSku(itemSku,goods) {
				this.skuInfo = itemSku
				this.selectGoods = goods
				// 期票类型
				// if(this.skuInfo.ticket_type == 2) {
				// 	this.addBuyCard()
				// }else {
				// 	this.getDays(itemSku,goods)
				// }
				this.getPriceCal(itemSku,goods)
			},
			openCalendar () {
				this.calendarParam = {
					startDate: (this.allSeldDate.find(v=>v.store>0) || {}).date,
					endDate: (this.allSeldDate[this.allSeldDate.findLastIndex(v=>v.store>0)]||{}).date,
					selected: this.allSeldDate.filter(v=>v.store>0).map(v=>{
						return {
							date: v.date,
							info: '￥'+this.showNoPriceNew(v.money),
							notNeedDot:true,
						}
					})
				}
				this.$refs.calendar.open();
			},
			
			// 获取价格日历列表
			getPriceCal(itemSku,goods) {
				this.Post({
					specifications_id: itemSku.id,
					goods_id: goods.id,
					limit: 60
				}, '/api/goods/getPriceCalendarListBySpecifications').then(res => {
					this.allSeldDate = res.data || []
					this.seldDateIndex = this.allSeldDate.findIndex(item => item.store != 0)
					this.getTimeStock(this.allSeldDate[this.seldDateIndex].date)
					this.openPop()
				})
			},
			// 获取规格分时库存
			getTimeStock(date) {
				this.Post({
					specifications_id: this.skuInfo.id,
					date: date,
				}, '/api/goods/getTimeStock').then(res => {
					if (Array.isArray(res.data)) {
						this.timesArr = res.data || []
						this.seldTimeIndex = -1
					}
					if (res.data.length > 0) {
						this.seldTimeIndex = this.timesArr.findIndex(item => item.stock_number > 0)
					}
				})
			},
			
			
			// 选择日期
			clickTab(item, index) {
				if (item.store>0) {
					this.seldDateIndex = index
					this.getTimeStock(item.date)
				}
				
			},
			// 选择时段
			changeTime(item, index) {
				if(item.stock_number > 0) {
					this.seldTimeIndex = index
				}
			},
			
			confirmCalendar (val) {
				let index = this.allSeldDate.findIndex(v=>v.date == val.fulldate)
				if (index>=0) {
					this.clickTab(this.allSeldDate[index],index)
				}
			},

			addBuyCard() {
				let that = this;
				// 如果是分时，未选择分时
				console.log(this.skuInfo)
				if(that.skuInfo.is_time_stock && that.seldTimeIndex < 0) {
					uni.showToast({title:'请选择分时',icon:'none'})
					return;
				}
				
				let param = {
					sInfo: this.skuInfo,
					pInfo: this.selectGoods,
					minSeldDate: this.minSeldDate,
					maxSeldDate: this.maxSeldDate,
					calendarParam: this.calendarParam,
					allSeldDate: this.allSeldDate,
					seldDateIndex: this.seldDateIndex,
					timesArr: this.timesArr,
					seldTimeIndex: this.seldTimeIndex,
				}
				uni.setStorageSync('ticketOrder', JSON.stringify(param));
				// that.gotoBuy(pInfo, sInfo);
				uni.navigateTo({
					url:'/subPackages/ticketBooking/order',
				})
			},
					

			gotoBuy(pInfo, sInfo) {
				console.log(pInfo, sInfo);
				let that = this;
				if (
					(pInfo.flag != 1 || sInfo.flag !== "on" || sInfo.stock <= 0) &&
					sInfo.is_third_stock == 0
				)
				return;
				// that.buryPoint("scene_order");
				// that.checkIsCanBuy(that.detail.title,
				// 	function() {
						let params = {
							pInfo: pInfo,
							sInfo: sInfo,
							minSeldDate: this.minSeldDate,
							maxSeldDate: this.maxSeldDate,
							calendarParam: this.calendarParam,
							allSeldDate: this.allSeldDate,
							seldDateIndex: this.seldDateIndex,
							timesArr: this.timesArr,
							seldTimeIndex: this.seldTimeIndex,
						};
						if (that.detail.allowance) {
							sInfo.allowance_data = that.detail.allowance;
							let spread_price = Number(
								sInfo.allowance_data.discount_limit_price -
								sInfo.allowance_data.user_used_price
							);
							if (spread_price > 0) {
								if (
									spread_price <
									(sInfo.allowance_data.discount_rate / 100) *
									sInfo.price
								)
									sInfo.allowance_price = spread_price;
								else
									sInfo.allowance_price =
									(sInfo.allowance_data.discount_rate / 100) *
									sInfo.price;
							}
						}
						
						
						
						
				// 	},

				// );
			},

			closePopup() {
				this.$refs.popup.close()
			},
			openPop(){
				this.$refs.popup.open()
			},
			closePopupRule() {
				this.$refs.popupRule.close()
			},
			openPopRule(){
				this.$refs.popupRule.open()
			},
			// 价格格式
			showNoPriceNew(price) {
				if (price && price > 0) {
					return (price / 100)
				} else {
					return '0'
				}
			},
			
			
			// 播放音频
			initPlayer () {
				let that = this;
				if (innerAudioContext2) {
					try {
						innerAudioContext.pause();
						innerAudioContext.destroy()
						innerAudioContext = null
					  } catch (e) {
						//TODO handle the exception
					  }
				}
				innerAudioContext2 = uni.createInnerAudioContext();
				innerAudioContext2.autoplay = false;
				innerAudioContext2.onPlay(() => {
					that.curPlay = true
					console.log('play')
				});
				innerAudioContext2.onError((res) => {
				  console.log('error',res.errMsg,res.errCode);
				});
				innerAudioContext2.onEnded(() => {
					that.pauseVoice()
					that.curPlay = false
				});
				innerAudioContext2.onTimeUpdate(() => {
					console.log('timeUpdate')
					that.currentAudio.video_length = innerAudioContext2.duration;
					that.currentAudio.currentTime = innerAudioContext2.currentTime;
				})
			},
			
			//播放列表音频
			playVoice(){
				innerAudioContext2.src = this.currentAudio.multimedia_url
				innerAudioContext2.play()
			},
			//暂停播放
			pauseVoice(){
				innerAudioContext2.pause()
				this.curPlay = false
			},
			// 拖动结束
			audioSeek (event) {
				let value = event.detail.value
				innerAudioContext2.seek(value)
				if (this.curPlayCopy) {
					innerAudioContext2.play()
					this.curPlay = this.curPlayCopy
					this.curPlayCopy = false
				}
			},
			// 拖动
			audioChanging () {
				// 如果正在播放
				if (this.curPlay) {
					this.curPlayCopy = this.curPlay
					this.pauseVoice()
				}
			},
			
			getTime(time) {
				let m = parseInt(time / 60);
				let s = time % 60;
				return this.towNum(m) + ':' + this.towNum(s);
			},
			towNum(num) {
				if(num >= 10) {
					return num;
				}else {
					return '0' + num;
				}
			},
			
		}
	}
</script>

<style scoped lang="scss">
	*{
		box-sizing: border-box;
	}
	.bg{
		min-height: 100vh;
		background: #F8F8F8;
	}
	
	.swipe-box {
		height: 413rpx;
		position: relative;
		
		.swiper-pointer{
			position: absolute;
			right: 26rpx;
			bottom: 46rpx;
			background: rgba(22,22,22,0.5);
			border-radius: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			padding: 6rpx 14rpx;
			
		}
	
		.swiper-item-num {
			width: 90rpx;
			height: 40rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 20rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
			line-height: 40rpx;
			position: absolute;
			right: 30rpx;
			bottom: 50rpx;
		}
	}
	
	.swiper {
		height: 413rpx;
		position: relative;
	
		.swiper-item {
			width: 100%;
			height: 413rpx;
	
			.item-img {
				width: 750rpx;
				height: 413rpx;
			}
		}
	}
	
	
	.detail-container{
		width: 100%;
		z-index: 2;
		padding: 26rpx;
		position: relative;
		top: -52rpx;
	}
	
	.common-container{
		background: white;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding: 22rpx 26rpx;
	}
	
	.info-container{
		font-family: PingFang;
		font-weight: 500;
		font-size: 27rpx;
		color: #000000;
		.time-container{
			padding: 22rpx 0;
		}
		
		.info-title{
			width: 100%;
			font-family: PingFang SC;
			font-size: 31rpx;
			height: 80rpx;
			font-weight: bold;
		}
		.collect{
			font-size: 23rpx;
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	
	.box-title {
		margin: 60rpx 12rpx 28rpx;
		font-size: 37rpx;
		color: #000000;
		font-family: PingFang SC;
		font-weight: bold;
	}
	
	.address-icon{
		margin-right: 9rpx;
		width: 26rpx;
		height: 26rpx;
	}
	
	.scenic-list{
		.scenic-item {
			width: 100%;
			height: 187rpx;
			background: #FFFFFF;
			border-radius: 13rpx;
			margin-bottom: 20rpx;
		    padding: 26rpx;
			display: flex;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #666666;
			
			.item-left{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 20rpx;
			}
			
			.title {
			    width: 100%;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 31rpx;
				color: #000000;
			}
			.tags-box {
			    overflow: hidden;
				padding-bottom: 6rpx;
				.tags {
					display: flex;
					flex-wrap: nowrap;
				    flex: 1;
				}
				 .tags view::after {
					content: '丨'
				}
				.tags view:last-of-type:after {
					display: none;
				}
			}
			.item-right {
			    width: 133rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
			}
			.price {
				font-family: PingFangSC;
				font-weight: bold;
				font-size: 36rpx;
				color: #C3282E;
			}
			.price::before {
			    display: inline-block;
			    content: "￥";
			    font-size: 24rpx;
			    font-weight: bold;
			    color: #C3282E;
			}
			
			.btn {
				margin-top: 20rpx;
				width: 133rpx;
				height: 53rpx;
				background: #C3282E;
				border-radius: 27rpx;
			    text-align: center;
			    line-height: 53rpx;
			    font-weight: 500;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 31rpx;
				color: #FFFFFF;
			}
		}
	}

    .bottom {
		.notice {
			font-weight: 400;
			color: #0B898E;
		}
	}
	
	.popup-content-date {
		background-color: white;
		padding: 0rpx 28rpx 166rpx;
		height: 70vh;
		border-radius: 20rpx 20rpx 0 0 ;
		.popup-content-title{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 37rpx;
			color: #000000;
			padding: 39rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #CCCCCC;
		}
		// 预定须知
		.content{
			padding-top: 48rpx;
			overflow-y: auto;
		}
		
		.order-popup-detail{
			.sku-title{
				padding: 48rpx 0 26rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 31rpx;
				color: #000000;
			}
		}
		
		.dateMore{
			width: 120rpx;
			height: 133rpx;
			background: white;
			border-radius: 10rpx;
			border: 1px solid #000000;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #111;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			padding: 6rpx 0;
			position: absolute;
			bottom: 0;
			right: 0;
		}
		
		.date-content{
			width: 100%;
			display: flex;
			overflow-y: auto;
			position: relative;
			padding-right: 140rpx;
			
			.item{
				width: 120rpx;
				height: 133rpx;
				border-radius: 10rpx;
				border: 1px solid #000000;
				margin-right: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #000;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				flex-shrink: 0;
				padding: 6rpx 0;
			}
			.item.active{
				background: #515150;
				color: white;
				border: 1px solid #12293C;
				.price{color: white;}
			}
			.item.disabled{
				color: #666;
				border-color: #CCC;
			}
			
			.price{
				color: #C3282E;
			}
			
		}
		.date-content::-webkit-scrollbar{
			display: none;
		}
	}
	
	.time-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		max-height: 340rpx;
		overflow-y: auto;

		.time-item {
			width: 48%;
			height: 60rpx;
			border-radius: 10rpx;
			text-align: center;
			font-size: 34rpx;
			margin-bottom: 23rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 25rpx;
			border: 1px solid #333333;
			line-height: 58rpx;
			color: #000;
		}
		.time-active {
			background: #515150;
			color: white;
			border: 1px solid #12293C;
		}
		.time-disable {
			color: #666666;
			border-color: #CCC;
		}
	}
	.sku-bottom {
		width: 100%;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -3rpx 8rpx 0rpx rgba(71,71,71,0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 50rpx 50rpx 85rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #393B3E;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;

		.bottom-price {
			font-size: 48rpx;
			font-weight: bold;
			color: #C3282E;
		}
		.bottom-price::before {
			font-size: 24rpx;
			content: '￥';
		}

		.bottom-btn {
			width: 250rpx;
			height: 80rpx;
			background: #C3282E;
			border-radius: 40rpx;
			font-size: 32rpx;
			text-align: center;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 78rpx;
		}
	}
	
	.address-title{
		display: flex;
		align-items: flex-start;
		.address-detail{
			font-size: 27rpx;
			color: #666666;
			padding-right: 40rpx;
		}
	}
	.map-icon{
		flex-direction: column;
		height: 80rpx;
		align-items: center;
		justify-content: space-between;
		font-weight: 500;
		font-size: 20rpx;
		color: #12293C;
	}
	.audio{
		.play-icon{
			height: 51rpx;
			padding-left: 49rpx;
			width: 100rpx;
			image{
				width: 51rpx;
				height: 51rpx;
			}
			
		}
	}
	::v-deep  .uni-calendar-item--extra{
		color: #333 !important;
	}
	::v-deep  .uni-calendar-item--isDay{
		background: #525251 !important;
		border-radius: 50%;
		
		.uni-calendar-item--extra{
			color: white !important;
		}
	}
	
	::v-deep  .uni-calendar-item--checked{
		background: #525251 !important;
		border-radius: 50%;
		
		.uni-calendar-item--extra{
			color: white !important;
		}
	}

</style>