<template>
	<view class="bus-detail column">
		<scroll-view ref="scrollView" scroll-y="true" style="width: 100%; height: 1px;flex: 1;overflow: hidden;margin-bottom: 20rpx;" @scroll="scroll"
			:scroll-top="scrollTop">
			<view class="media" :style="{ opacity: 100 - boxOption + '%' }" @click="openPicture">
				<u-swiper 
					:list="imgList" 
					:effect3d="false" 
					:height="545" 
					:interval="5000" 
					:border-radius="0"
					name="Path" 
					v-if="active == 1">
				</u-swiper>
				<view class="media-info" v-if="dataList.ImageList">
					<view class="flex">
						<view class="mi-left">
							<view v-if="dataList.ImageList.length > 0" class="type-img-box">
								<image :src="dataList.ImageList[0]" mode="aspectFill"></image>
								<view class="content">
									<text>{{ dataList.ImageList.length }}</text>
								</view>
							</view>
						</view>
						<view class="mi-right">
							<view @click.stop="''" class="king">
								<img style="width: 19rpx;height: 24rpx;"
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762515984923148.png" />
								<button class="detail_ShareBtn" open-type="share"></button>
							</view>
						</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN  -->
				<view @click="goback" :style="[titleStyle, { opacity: '100% !important' }]"
					style="position: fixed; top: 0; left: 0; padding-left: 6rpx">
					<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx"></u-icon>
				</view>
				<!-- #endif -->
			</view>
			<view class="bus-title" :style="[titleStyle]">
				<view @click="goback">
					<!-- #ifdef MP-WEIXIN  -->
					<u-icon name="arrow-left" size="44"></u-icon>
					<!-- #endif -->
				</view>
				<view style="flex: 1; margin-left: 30rpx; text-align: left" class="name-ali">
					{{ dataList.Name }}
				</view>
			</view>
			<view class="bus-content">
				<view class="bus-base">
					<view style="padding: 0 31rpx;">
						<view class="bus-name">
							{{ dataList.Name }}
						</view>
						<view class="bus-brand">
							{{ dataList.brandname?dataList.brandname:'' }}
						</view>
						<view class="bus-tag">
							<text class="bus-tagText" v-if="dataList.TravelHours">
								包车时长:{{dataList.TravelHours}}h
							</text>
							<text class="bus-tagText" v-if="dataList.FreeCancelDay">
								{{ dataList.FreeCancelDay }}天前免费取消
							</text>
						</view>
						<view class="busConfirmText">6个工作日內（不含例休假）确认</view>
						<view class="busDetaTitle row items-center">
							<view></view>
							行程标准出行方案
						</view>
						<view class="busDetaTisp">
							<view>如一辆车位不够使用，请购买多辆车</view>
							<view>收费公路费、停车费、入园费等请另行缴纳</view>
							<view>由于交通拥堵，时长可能会略有变化</view>
							<view>每增加 30 分钟，将收取相应的延期费。(现场支付)</view>
						</view>
						<view class="busDetaTitle row items-center">
							<view></view>
							选择用车日期
						</view>
						<view class="busDetaTime row-sbas-n" @click="dateVisible=true">
							<view>{{ formatDate(orderMsg.OrderDate) }} ({{ getWeek(orderMsg.OrderDate) }})</view>
							<u-icon name="arrow-down" :size="32" color="#000" style="position: relative;top: 2rpx;"></u-icon>
						</view>
						<view class="busDetaTitle row items-center">
							<view></view>
							选择车辆类型
							<text class="busMoney">CNY {{ orderMsg.Unit_Price }} /每辆</text>
						</view>
						<view class="busListBox row-sb-w"
						:class="[(busInfor&&busInfor.CarType<3)||(dataList.CarTypeList&&dataList.CarTypeList.length==1)?'active':'']">
							<view class="busList" 
							:class="[orderMsg.CarId==item.Id?'active':'']"
							v-for="(item,index) in dataList.CarTypeList"
							:key="index"
							@click="Vehicle(item)">
							{{item.CarName}}({{item.PeopleNum}}人)
							</view>
						</view>
						<view class="busDetaTitle row items-center">
							<view></view>
							选择数量
						</view>
						<view class="busDetaTime row-sbas-n">
							<view>{{orderMsg.CarName}}({{orderMsg.PeopleNum}}人/辆)</view>
							<view class="row items-center" style="margin-left: 10rpx;">
								<view class="addPnum addPnumL" @click="orderMsg.Num>1?editNum(1):''">
									<image v-if="orderMsg.Num>1" style="width: 27rpx;height: 27rpx;display: block;"
										src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638751245939665786.png" />
									<image v-else style="width: 27rpx;height: 27rpx;display: block;"
										src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638755711218891689.png" />
								</view>
								<view class="col row items-center textCenter busNum">
									{{orderMsg.Num}}
								</view>
								<view class="addPnum addPnumR" @click="editNum()">
									<image style="width: 27rpx;height: 27rpx;display: block;"
										src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638751245974558349.png" />
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- #ifdef MP-AG -->
				<view class="line-flex row-sbas-n col" style="padding: 30rpx; background: #fff;margin-top: 20rpx"
					v-if="createBy==0&&SaleList&&SaleList.length>1"
						@click="showSalePreviwe=true">
						<text style="font-size: 28rpx; color: #111; font-weight: 500">服务人员</text>
						<text style="
						font-size: 22rpx;
						color: #999;
						margin-left: 30rpx;
						flex: 1;
						"></text>
						<view class="SaleNameTetx row">
							<view>
								<text v-if="msg.SaleName">{{ msg.SaleName }}</text>
								<text v-else style="color: #999">
									请选择
								</text>
							</view>
							<u-icon name="arrow-down" size="24"></u-icon>
						</view>
				</view>
				<!-- #endif -->
				<view class="busTispBox" style="margin-top: 20rpx;">
					<view class="busTispTitle">费用说明</view>
					<view class="busTispInfor">
						<view class="busTispFY">
							费用包含：
							<text class="bus-tagText" v-for="(item,index) in dataList.PriceIncludeList"
							:key="index">
								{{ item }}
							</text>
						</view>
						<view class="busTispFY">
							费用不包含：
							<text class="bus-tagText active" v-for="(item,index) in dataList.PriceNotIncludeList"
							:key="index">
								{{ item }}
							</text>
						</view>
					</view>
					<view class="busTispTitle">购买须知</view>
					<view class="busTispInfor">
						{{ dataList.BuyNotes }}	
					</view>
					<view class="busTispTitle">
						<view>接送点范围</view>	
						<view v-for="(item,index) in dataList.PlaceList"
						:key="index">
							<view class="busTispTitleDD">地点名称：{{ item.Name }}</view>
							<view class="busTispTitleDZ">详细地址：{{ item.Address }}</view>
						</view>
					</view>
					<view class="busTispInfor busTispInforMap">
						<map id="myMap" ref="myMapRef" 
						style="width: 100%; height: 100%;" 
						:longitude="center.longitude"
						:latitude="center.latitude"
						:markers="markers"
						:scale="scale">
						</map>
					</view>
					<view class="busTispTitle">取消政策</view>
					<view class="busTispInfor" style="border: 0;">
						{{ dataList.CancelPolicy }}
					</view>
				</view>
			</view>

		</scroll-view>
		<view class="opera-box">
			<view class="box flex">
				<view class="price">
					<text class="f11">{{dataList.CurrencyCode}}</text>
					<text>
						{{ (orderMsg.Unit_Price*orderMsg.Num).toFixed(2) }}
					</text>
				</view>
				<view class="sum-detail">共计 {{orderMsg.Num}}辆</view>
				<u-button :ripple="true" :hair-line="false"
				:custom-style="this.orderMsg.Money==0?btnStyle2:btnStyle"
				@click="goReserce">立即购买</u-button>
			</view>
		</view>
		<!--接送时间-->
		<u-picker v-model="dateVisible" 
		mode="time" 
		:startYear="startYear"
		:params="dateParams"
		@cancel="setDateHandler"
		@confirm="setDateHandler"
		confirmColor="#B99846"
		:defaultTime="orderMsg.OrderDate"
		></u-picker>
		<u-popup v-model="showSalePreviwe" mode="bottom" 
        border-radius="50" length="60%" 
        :safe-area-inset-bottom="true">
            <orderService :msg="msg" :list="SaleList" @goReserce="getService"></orderService>
        </u-popup>
		<auth v-if="showAuth&&is_show_auth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	import orderService from "@/components/serviceStaff/orderService";
	export default {
		components: {
			auth,
			orderService,
		},
		data() {
			return {
				showAuth: false,
				imgsList: [],
				id: 0,
				typeList: [{
						Id: 0,
						Name: "视频",
					},
					{
						Id: 1,
						Name: "图片",
					},
				],
				boxOption: 0,
				titleStyle: {
					opacity: 0,
				},
				mainColor: "",
				showTimePopup: false,
				controls: false,
				videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
				active: 1,
				islike: false,
				nearbyType: 0,
				orderMsg: {
					ProductId: 0,
					CarId: 0,
					CarName: '',
					PeopleNum: 0,
					AirportId: 0,
					Num: 1,
					Money: 0,
					Unit_Price: 0,
					OrderDate: '',
					OrderType: 1, 
					GetonAddress: '',
					GetoffAddress: '',
				},
				imgList: [], 
				dataList: {}, //数据
				Up: 0,
				current: 1,
				scrollTop: 100,
				old: {
					scrollTop: 0
				},
				loading: false,
				U: {},
				b2bUser: {},
				is_show_auth: 0,
				showSalePreviwe: false,
				msg:{
					SaleName: '',
					SaleId: '',
				},
				SaleList: [],
				createBy: 0,
				markers: [],
				includePoints: [],
				markersObj:{
					id: null,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '',
					title: '',
					alpha: 1,
					width: 20,
					height: 30,
					label: {
						content: '',
						color: '#000',
						bgColor: '#fff',
						anchorX: 30,
						anchorY: -50,	
						borderWidth: 1,
						borderRadius: 3,
						borderColor: '#fff',
						textAlign: 'center',
					},
				},
				center: {
					latitude: 35.681236,
					longitude: 139.767125,
				},
				mapCtx: null,
				scale: 16,
				btnStyle: {
					height: "80rpx",
					lineHeight: "80rpx",
					borderRadius: "16rpx",
					background: "#111",
					color: "#FFF",
					fontSize: "28rpx",
					fontWeight: "600",
					width: '193rpx',
				},
				btnStyle2: {
					height: "80rpx",
					lineHeight: "80rpx",
					borderRadius: "16rpx",
					background: "#eee",
					color: "#000",
					fontSize: "28rpx",
					fontWeight: "600",
					width: '193rpx',
				},
				busInfor: null,
				PricesList: [], //价格
				dateVisible: false,
				dateParams:{
                	year: true,
                    month: true,
                    day: true,
                    hour: true,
                    minute: true,
                },
				startYear: 2025,
				customer: {},
			};
		},
		computed: {
			
		},
		created() {
			this.startYear = this.$utils.GetDateFewFaysLater(0).year
			this.Up = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserPageType :
				0;
		},
		onLoad(options) {
			if (!options.scene) {
				this.id = options.id;
				this.orderMsg.ProductId = options.id;
				if (options.createBy) {
					this.createBy = options.createBy
				}
			}else{
				let t = decodeURIComponent(option.scene).split('&')
				t.forEach(x => {
					let item = x.split('=')
					if (item.length === 2) {
						if (item[0] === 'id') {
							this.id = options.id;
							this.orderMsg.hotelid = options.id;
						} else if (item[0] === 'createBy') {
							this.createBy = item[1]
						}
					}
				})
			}
			this.U = uni.getStorageSync("mall_UserInfo");
			this.b2bUser = uni.getStorageSync("b2b_user");
			this.customer = uni.getStorageSync("b2b_user")
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: "0",
					};
				},
			});
			this.mainColor = this.$uiConfig.mainColor;
			if(options.orderMsg){
				this.orderMsg = JSON.parse(options.orderMsg)
				console.log(this.orderMsg,'----------')
			}
		},
		onShow() {
			let basedata = uni.getStorageSync("basedata");
			//判断后台是否开启自动授权
			if (basedata && basedata.mall && basedata.mall.setting && basedata.mall.setting && basedata.mall.setting
				.is_show_auth ==
				1) {
				this.is_show_auth = 1;
			}
			if (!this.U) {
				this.U = {
					nickName: "未登录",
					avatarUrl: "",
				};
				this.showAuth = true;
			} else if (!this.b2bUser && this.is_show_auth == 1) {
				this.U = {
					nickName: "未登录",
					avatarUrl: "",
				};
				this.showAuth = true;
			}
			// #ifdef MP-AG
			this.getSale()
			// #endif
		},
		mounted() {
			uni.getStorage({
				key: "busInfor",
				success: (res) => {
					let obj = JSON.parse(res.data);
					this.busInfor = obj;
					this.orderMsg = {
						...this.orderMsg,
						OrderType: obj.CarType,
						OrderDate: obj.time,
						ProductId: this.id,
						AirportId: obj.AirportId,
						GetonAddress: obj.startaddress,
						GetoffAddress: obj.destination,
					}
				},
			});
			// #ifdef MP-WEIXIN
			this.initMiniProgramMap();
			// #endif
			if (this.id > 0) {
				this.getDetail(this.id);
			}
		},
		methods: {
			setDateHandler(val){
				uni.hideLoading();
                this.busInfor.time = `${val.year}-${val.month}-${val.day} ${val.hour}:${val.minute}`
				this.orderMsg.OrderDate = this.busInfor.time
				this.getPrices()
				this.dateVisible = false
				uni.setStorage({
                    key: "busInfor",
					data: JSON.stringify(this.busInfor)
				})
			},
			Vehicle(item){
				this.orderMsg.CarId = item.Id;
				this.orderMsg.CarName = item.CarName;
				this.orderMsg.PeopleNum = item.PeopleNum
				this.getPrices()
			},
			// 获取价格
			getPrices() {
				uni.showLoading();
				this.loading = true
				this.apipost('CarSingle_post_GetTYCarSingleProductMonthPrice', {
					ProductId: this.orderMsg.ProductId,
					AirportId: this.orderMsg.AirportId,
					CarTypeId: this.orderMsg.CarId,
					Month: this.orderMsg.OrderDate,
				}, res => {
					if (res.resultCode == 1) { 
						uni.hideLoading()
						this.PricesList = res.data;
						this.getCurrentPrice();
					}
				})
			},
			getCurrentPrice(){
				let OrderDate = this.orderMsg.OrderDate.slice(0,10)
				this.PricesList.forEach(item=>{
					if(item.Date==OrderDate){
						this.orderMsg.Unit_Price = item.Price;
						this.CalTotalPrice();
					}
				})
			},
			initMiniProgramMap(){
				let that = this
				const query = wx.createSelectorQuery().in(this);
				query.select('#myMap').fields({
					node: true,
					size: true
				}, (res) => {
					that.mapCtx = wx.createMapContext('myMap');
				}).exec();
			},
			editNum(type) {
				if (type == 1) {
					if (this.orderMsg.Num > 1) {
						this.orderMsg.Num--;
					}
				} else {
					this.orderMsg.Num++;
				}
				this.CalTotalPrice();
			},
			//计算总价
			CalTotalPrice() {
				this.orderMsg.Money = this.orderMsg.Unit_Price * this.orderMsg.Num
			},
			getSale(){
				if(!this.b2bUser.customerId) return
				this.apipost(
					"b2b_get_GetCustomerCreateByList",
					{
						CustomerId: this.b2bUser.customerId
					},
					(res) => {
						if (res.resultCode == 1) {
							if(res.data.length>0){
								this.SaleList = res.data
								if(res.data.length==1&&this.createBy==0){
									this.msg.SaleName = res.data[0].EmName
									this.msg.SaleId = res.data[0].CreateBy
								}
							}else{
								this.msg.SaleName = ''
								this.msg.SaleId = 0
							}
						} else {
							
						}
					},
					(err) => {
						
					}
				);
			},
			reloadUserinfo() {
				const pages = getCurrentPages()
				const curPage = pages[pages.length - 1]
				curPage.onLoad(curPage.options)
				curPage.onShow()
				curPage.onReady()
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			open(index) {
				this.$refs.uDropdown.highlight();
			},
			openPicture() {
				let imgObj = JSON.stringify(this.imgList);
				uni.navigateTo({
					url: "/pages/hotel/picture?imgObj=" + imgObj+"&carType="+this.orderMsg.OrderType,
				});
			},
			formatDate(str) {
				let temp = str.split("-");
				let day = day = str.slice(8,10)
				return `${temp[0]}年${temp[1]}月${day}日`;
			},
			getMonth(date) {
				let m = date.getMonth() + 1;
				return m > 9 ? m : "0" + m;
			},
			getDay(date) {
				let d = date.getDate();
				return d > 9 ? d : "0" + d;
			},
			getWeek(date) {
				var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
				var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
				return "周" + week;
			},
			previewImage(i) {
				uni.previewImage({
					urls: this.imgsList,
					current: i,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {},
						fail: function(err) {},
					},
				});
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
				this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
				this.titleStyle.opacity =
					e.detail.scrollTop - 100 < 0 ?
					0 :
					Math.floor(e.detail.scrollTop - 100) / 100 > 1 ?
					1 :
					Math.floor(e.detail.scrollTop - 100) / 100;
				this.$forceUpdate();
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			//获取详情
			getDetail(id) {
				uni.showLoading();
				this.apipost('CarSingle_post_GetTYCarSingleProductInfo', {
					ProductId: id
				}, res => {
					if (res.resultCode == 1) {
						uni.hideLoading();
						this.imgList = []
						this.markers = []
						this.includePoints = []
						this.dataList = res.data;
						if(!this.orderMsg.CarId) {
							this.orderMsg.CarId = this.dataList.CarTypeList[0].Id
							this.orderMsg.CarName = this.dataList.CarTypeList[0].CarName
							this.orderMsg.PeopleNum = this.dataList.CarTypeList[0].PeopleNum
						}
						this.getPrices()
						for (let i = 0; i < res.data.ImageList.length; i++) {
							this.imgList.push({
								Path: res.data.ImageList[i]
							})
						}
						for (let i = 0; i < res.data.PlaceList.length; i++) {
							let place = res.data.PlaceList[i]
							let obj = JSON.parse(JSON.stringify(this.markersObj))
							obj = {
								...obj,
								id: place.Id,
								latitude: place.Lat,
								longitude: place.Lng,
								title: '',
								label: {
									...obj.label,
									content: place.Name,
								},
							}
							this.includePoints.push({
								latitude: place.Lat,
								longitude: place.Lng,
							})
							this.markers.push(obj)
							
						}
						setTimeout(() => {
							this.center = {
								latitude: this.markers[0].latitude,
								longitude: this.markers[0].longitude,
							}
							if(this.includePoints.length>1){
								this.fitMapToBounds()
							}
						}, 300)
					}
				},err=>{
					uni.hideLoading();
				})
			},
			fitMapToBounds() {
				if (!this.mapCtx || this.includePoints.length === 0) return;
				this.mapCtx.includePoints({
					points:this.includePoints,
					padding: [20,40,20,40],
				});
			},
			getService(item){
				this.msg = item
				this.showSalePreviwe = false;
				this.goReserce()
			},
			//立即预定
			goReserce() {
				this.u = uni.getStorageSync("mall_UserInfo");
				if (!this.u) {
					this.u = {
						nickName: "未登录",
						avatarUrl: "",
					};
					this.showAuth = true;
					this.is_show_auth = 1;
					return;
				}
				this.b2bUser = uni.getStorageSync("b2b_user");
				if (!this.b2bUser) {
					this.u = {
						nickName: "未登录",
						avatarUrl: "",
					};
					this.showAuth = true;
					this.is_show_auth = 1;
					return;
				}

				// #ifdef MP-AG
					if (this.SaleList&&this.SaleList.length>1&&this.msg.SaleId==0&&this.createBy==0) {
						// uni.showToast({
						// 		title: "请选择服务人员",
						// 		icon: "none",
						// });
						this.showSalePreviwe = true;
						return;
					}
				// #endif
				let createBy = 0
				// #ifdef MP-DI
					let employeeId = this.customer.salesBaseInfo&&this.customer.salesBaseInfo.employeeId?this.customer.salesBaseInfo.employeeId:0
					createBy = this.createBy>0?this.createBy:employeeId
				// #endif
				// #ifdef MP-AG
					if(this.createBy>0||this.msg.SaleId) createBy = this.createBy>0?this.createBy:this.msg.SaleId
				// #endif
				uni.navigateTo({
					url: "/pages/bus/order?msg=" +JSON.stringify(this.orderMsg)+'&CreateBy=' +createBy,
				});
			},
			// #ifdef MP-WEIXIN
			//分享朋友圈
			onShareTimeline() {
				let uid = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserId :
					0;
				if (uid == 0) {
					uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
				}
				let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").SmallShopId :
					0;
				if (SmallShopId == 0) {
					//如果微店id为0 去找所属微店id
					SmallShopId = uni.getStorageSync("mall_UserInfo") ?
						uni.getStorageSync("mall_UserInfo").UserSmallShopId :
						0;
				}
				let title = this.dataList.Name ? this.dataList.Name : "帖子";
				let imageUrl = this.imgList && this.imgList.length > 0? this.imgList[0]: "";
				return {
					title: title,
					query: "id=" +
						this.id +
						"&user_id=" +
						uid +
						"&SmallShopId=" +
						SmallShopId +
						"&Up=" +
						this.Up +
						"&JumpType=18" +
						"&orderMsg=" +
						JSON.stringify(this.orderMsg),
					imageUrl: imageUrl.Path,
				};
			},

			//分享给朋友
			onShareAppMessage(res) {
				let u = uni.getStorageSync("mall_UserInfo");
				let uid = u.UserId ? u.UserId : 0;
				if (uid == 0) {
					uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
				}
				let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
				if (SmallShopId == 0) {
					//如果微店id为0 去找所属微店id
					SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
				}
				return {
					title: this.dataList.Name ? this.dataList.Name : "帖子",
					path: "/pages/index/index?id=" +
						this.id +
						"&user_id=" +
						uid +
						"&SmallShopId=" +
						SmallShopId +
						"&Up=" +
						this.Up +
						"&orderMsg=" +
						JSON.stringify(this.orderMsg),
					imageUrl: this.imgList && this.imgList.length > 0? this.imgList[0].Path: "",
				};
			},
			// #endif

		},
	};
</script>

<style scoped>
	@import url("@/asset/css/flex.css");

	.bus-detail {
		height: 100vh;
		overflow: hidden;
		width: 100vw;
		font-family: "pingfang";
		background: #F3F3F3;
	}

	.bus-detail .flex {
		display: flex;
		align-items: center;
	}

	.bus-detail .f12 {
		font-size: 24rpx !important;
	}

	.bus-detail .king {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		overflow: hidden;
		background: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.bus-detail .regular {
		font-weight: 500 !important;
	}

	.bus-detail .bus-content {
		position: relative;
		z-index: 2;
		top: -110rpx;
	}

	.bus-detail .bus-content .bus-more-info {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #ffffff;
		border: 1px solid #111111;
		border-radius: 8rpx;
		margin: 0 auto;
		font-size: 24rpx;
		font-weight: 500;
		color: #1f1f1f;
		text-align: center;
	}
	.bus-detail .bus-content .bus-base {
		/* position: relative;
		top: -140rpx; */
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		/* background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hoteldetailbj.png) no-repeat #F3F3F3; */
		background: #fff;
		background-size: 100% auto;
		padding: 39rpx 0 44rpx 0;
	}
	.bus-detail .bus-content .bus-base .bus-name {
		font-size: 36rpx;
		font-weight: 800;
		color: #111111;
	}

	.bus-detail .bus-content .bus-base .bus-tag {
		font-size: 22rpx;
		font-weight: 500;
		color: #6e6e6e;
	}

	.bus-Opening {
		font-weight: 500;
		font-size: 24rpx;
		color: #B99846;
		margin-right: 31rpx;
		margin-bottom: 20rpx;
		display: inline-block;
	}

	.bus-tagText {
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1rpx solid #B99846;
		color: #B99846;
		text-align: center;
		margin-right: 8rpx;
		margin-bottom: 9rpx;
		height: 34rpx;
		line-height: 26rpx;
		padding: 0 12rpx;
		display: inline-block;
	}

	.bus-detail .bus-content .bus-base .head .op-box image {
		width: 58rpx;
		height: 58rpx;
	}

	.bus-detail .bus-content .bus-base .shebei {
		padding: 34rpx 0;
		margin-bottom: 34rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
	}

	.bus-detail .bus-content .bus-base .shebei .sb-left {
		width: 1px;
		flex: 1;
		/* display: flex; */
		align-items: center;
		display: -webkit-box;
		overflow: auto;
		margin-right: 20rpx;
	}

	.bus-detail .bus-content .bus-base .shebei .sb-left .sb-item {
		padding: 7rpx 13rpx;
		background: #ecf1f4;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #111111;
		margin-right: 10rpx;
	}

	.bus-detail .bus-content .bus-base .shebei .sb-right {
		font-size: 24rpx;
		font-weight: 500;
		color: #111111;
		display: flex;
		align-items: center;
	}

	.bus-detail .bus-title {
		line-height: 45px !important;
		font-size: 16px;
		text-align: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		color: #111;
		box-sizing: content-box;
		z-index: 5;
		display: flex;
		align-items: center;
		background-color: #f6f6f6;
		padding-left: 6rpx;
	}

	.bus-detail .media {
		height: 545rpx;
		position: relative;
		z-index: 1;
	}

	.bus-detail .media .type-box {
		width: 100px;
		height: 50rpx;
		position: absolute;
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 50rpx;
		left: 50%;
		bottom: 80px;
		margin-left: -50px;
	}

	.bus-detail .media .media-info .type-img-box {
		background-color: rgba(255, 255, 255, 0.5);
		color: #fff;
		display: flex;
		align-items: center;
		height: 96rpx;
		width: 96rpx;
		padding: 8rpx;
		border-radius: 12rpx;
		position: relative;
	}

	.bus-detail .media .media-info .type-img-box image {
		height: 80rpx;
		width: 80rpx;
		border-radius: 12rpx;
		opacity: 0.5;
	}

	.bus-detail .media .media-info .type-img-box .content {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		font-size: 20rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		justify-items: center;
	}

	.bus-detail .media .media-info .type-img-box text {
		font-size: 22rpx;
		font-family: pingfang;
		margin-left: 6rpx;
	}

	.bus-detail .media .media-info {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.35);
		top: 287rpx;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 50rpx;
	}

	.bus-detail .media .media-info .mi-left {
		flex: 1;
	}

	.detail_ShareBtn {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}

	.name-ali {
		/* #ifdef MP-ALIPAY */
		box-sizing: border-box;
		padding-left: 30rpx;
		/* #endif */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.bus-brand {
		font-weight: 500;
		font-size: 32rpx;
		color: #080A09;
		padding: 12rpx 0 14rpx 0;
	}

	.busConfirmText{
		font-weight: 500;
		font-size: 22rpx;
		color: #FF3166;
	}
	.busDetaTitle{
		padding: 31rpx 0;
	}

	.busDetaTitle view{
		width: 5rpx;
		height: 22rpx;
		background: #EFAD3D;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
		margin-right: 20rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #080A09;
	}
	.busDetaTisp{
		background: #F3F1EF;
		border-radius: 18rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #B99846;
		padding: 29rpx 25rpx 33rpx 25rpx;
	}
	.busDetaTime{
		background: #F7F8FA;
		border-radius: 18rpx;
		padding: 30rpx 26rpx;
	}
	.busDetaTime view{
		font-weight: bold;
		font-size: 28rpx;
		color: #080A09;
	}
	.busMoney{
		color: #FF3166;
		font-weight: 800;
		font-size: 28rpx;
		margin-left: 26rpx;
	}
	
	.busList{
		width: 336rpx;
		background: #F7F8FA;
		border-radius: 12rpx;
		padding: 31rpx 20rpx;
		text-align: center;
		margin-bottom: 21rpx;
		border: 2rpx solid #F7F8FA;
	}
	.busListBox.active .busList{
		width: 100%;
	}
	.busList.active{
		border: 2rpx solid #B99846;
		color: #B99846;
	}
	.busNum{
		font-weight: bold;
		font-size: 32rpx;
		color: #FF3166;
		padding: 0 47rpx;
	}
	.busTispBox{
		background: #fff;
		padding: 0 30rpx;
	}
	.busTispTitle{
		font-weight: 800;
		font-size: 36rpx;
		color: #080A09;
		padding: 30rpx 0;
	}
	.busTispInfor{
		font-weight: 500;
		font-size: 26rpx;
		color: #000000;
		line-height: 42rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #F2F2F2;
	}
	.busTispTitle.top{
		padding-top: 70rpx;
	}
	.busTispFY{
		margin-bottom: 10rpx;
	}
	.bus-tagText.active{
		border: 0;
		color: #000;
	}
	.busTispTitleDD{
		font-weight: 500;
		font-size: 26rpx;
		color: #000000;
		margin-top: 8rpx;
	}
	.busTispTitleDZ{
		font-weight: 500;
		font-size: 24rpx;
		color: #757776;
		margin-top: 8rpx;
	}
	.busTispInforMap{
		height: 280rpx;
	}
	.opera-box {
		background-color: #FFF;
		padding: 20rpx 45rpx 40rpx 45rpx;
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// right: 0;
		z-index: 5;
	}

	.opera-box .box {
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 10rpx 0 36rpx;
	}

	.opera-box .box .price {
		font-size: 40rpx;
		font-weight: 500;
		color: #D91818;
		margin-right: 20rpx;
	}

	.opera-box .box .sum-detail {
		font-size: 24rpx;
		flex: 1;
		font-weight: 500;
		color: #6E6E6E;
	}
	.SaleNameTetx view{
		margin-right: 15rpx;
	}





















</style>