<template>
	<view class="jz_LineDetail" v-if="dataList.title">
		<scroll-view scroll-y="true" style="height: 1px; flex: 1; box-sizing: border-box" @scroll="scroll">
			<view class="jz_TopImg">
				<view class="media" :style="{ opacity: 100 - boxOption + '%' }">
					<u-swiper :list="dataList.tempImgCover" :effect3d="false" :height="535" :interval="5000" :border-radius="0" @click="openPicture"
					 name="Url"></u-swiper>
					<view class="media-info">
						<view style="display: flex; align-items: center">
							<view class="mi-left">
								<view v-if="dataList.tempImgCover.length > 0" class="type-img-box" @click="openPicture">
									<image :src="dataList.tempImgCover[0].Url" mode="aspectFill"></image>
									<view class="content">
										<text>{{ dataList.tempImgCover.length }}</text>
									</view>
								</view>
							</view>
							<view class="mi-right">
								<view style="color: #fff; margin-bottom: 6rpx; font-size: 22rpx">团队编号：{{ delMsg.tcnum }}
								</view>
								<view style="color: #fff; font-size: 22rpx">{{ dataList.ltName }}
								</view>
							</view>
						</view>
					</view>
					<view class="sharebox" v-if=" hideshare == false && shareData && shareData.IsShow && (shareData.Data.MaxShare>0|| shareData.Data.MyBuyCommission>0)"
					 :style="{top:topheight+'px'}">
					</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="top-title" :style="[titleStyle]">
					<view @click="goback">
						<!-- #ifdef MP-WEIXIN -->
						<u-icon name="arrow-left" size="44"></u-icon>
						<!-- #endif -->
					</view>
					<view style="margin-left: 30rpx;text-align: left;width: 60vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; "
					 class="name-ali">{{ dataList.title }}</view>
				</view>
			</view>
			<view class="jz_TopPrice">
				<view class="jz_LineTitle row items-center">
					<view class="jz_LineTitleL" v-if="stepNumber>4">
						<view class="jz_LineTitleLImg">
							<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638733242185514996.png"/>
						</view>
						<view class="jz_LineTitleLText" v-if="dataList.lineId==168">9.5折</view>
						<view class="jz_LineTitleLText" v-else>返100/人</view>
					</view>
					<view class="col">
						<text>同业价：</text>
						<text class="jz_renmin">¥</text><text class="jz_B2bPrice">{{ discountPrice }}</text>
						<text style="color: #999999; font-size: 28rpx; font-weight: 400">/人起</text>
						
						<view class=""  v-if="stepNumber==0&&dataList.currentPriceInfo.teamType==0">
							<text style="font-size: 13px;color:#111">
								直客价：<text style="font-size: 20rpx;">¥</text>{{ currentPrice.b2CPrice}}
							</text>
						</view>
						<text style="font-size: 13px;color:#111;margin-left: 10px;" v-else>
							直客价：<text style="font-size: 20rpx;">¥</text>{{ currentPrice.b2CPrice}}
						</text>
					</view>

					<view v-if="stepNumber==0&&dataList.currentPriceInfo.teamType==0" class="row items-center jz_LineDetaCZ" style="border-radius: 4px;overflow: hidden;font-size: 12px;" >
						<view class="jz_LineDetaCZL">
							<view style="opacity: 0;">1</view>
						</view>
						<view class="jz_LineDetaCZR">
							<template v-if="dataList.lineId==168">80</template>
							<template v-else>30</template>元/人
						</view>
					</view>
				</view>
				<view v-if="TotalDiscount>0" class="jz_LineDetaYJDKQ" style="padding: 0rpx 0 0 0;">
					<view class="jz_LineDetaYJ">
						<view class="jz_LineDetaYJL">原价 ¥{{ $utils.getretailer()?currentPrice.b2BPrice:currentPrice.b2CPrice }}/人起</view>
						<view class="jz_LineDetaYJR">已减{{TotalDiscount}}</view>
					</view>
					<view v-if="couponList.length>0" class="jz_LineDetaRDKQ">
						<view>共{{couponList.length}}张抵扣券</view>
						<u-icon name="arrow" size="30" color="#cecece" style="margin-left: 5px;"></u-icon>
					</view>
				</view>
				<view class="jz_LineDetaYJDKQ" v-if="stepNumber>0 && dataList.currentPriceInfo.teamType==0">
					<view class="jz_LineDetaFL">
						<view v-if="" class="row items-center jz_LineDetaCZ" 
						style="border-radius: 4px;overflow: hidden;font-size: 12px;margin-right: 15rpx;" >
							<view class="jz_LineDetaCZL">
								<view style="opacity: 0;">1</view>
							</view>
							<view class="jz_LineDetaCZR">
								<template v-if="dataList.lineId==168">80</template>
								<template v-else>30</template>元/人
							</view>
						</view>
						<!-- <view class="jz_LineDetaFLJf" >
							预计：{{}}积分
						</view> -->
					</view>
					<view class="jz_LineDetaRDKQ">
						<view>共{{Discounts}}项福利</view>
						<u-icon name="arrow" size="30" color="#cecece" style="margin-left: 5px;"></u-icon>
					</view>
				</view>

				<view v-if="stepNumber==0&&couponList.length>0" class="jz_LineDetaSC">
					<view class="jz_LineDetaSCL">
						<view class="jz_LineDetaSCLDl">
							<view>¥</view>
						</view>
						<view class="jz_LineDetaSCQM">{{maxCouponDiscount}}</view>
					</view>
					<view class="jz_LineDetaSCR">
						<view class="jz_LineDetaSCRTitle">首购抵扣券</view>
						<view class="jz_LineDetaSCRText">新户注册即得</view>
					</view>
				</view>
				<view class="jz_LineDetaVip" v-if="stepNumber>0&&stepNumber<5">
					<view class="jz_LineDetaVipTop">
						<view>
							<template v-if="stepNumber<5">
								再完成{{UnfOddNumber}}单即可成为VIP，享永久折扣！
							</template>
							<template v-else>
								您已是VIP，将享永久折扣！
							</template>
						</view>
						<view>
							<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528690203686.png"/>
						</view>
					</view>
					<view class="jz_LineDetaVipPr">
						<view class="jz_LineDetaVPB">
							<view class="jz_LineDetaVPBBox" v-for="(item,index) in progress"
							:key="index">
								<view class="jz_LineDetaVPBLine" :style="{'opacity':index==0?'0':1}"></view>
								<view class="jz_LineDetaVPBN">{{item.text}}</view>
								<view class="jz_LineDetaVPBBoxI" v-if="item.img"><img :src="item.img"/></view>
								<view class="jz_LineDetaVPBLine" v-else></view>
							</view>
							
						</view>
						<view class="jz_LineDetaVPB jz_LineDetaVPBY">
							<view class="jz_LineDetaVPBBox" v-for="(item,index) in progress"
							:key="index"
							:class="[item.colorStyle]">
								<view class="jz_LineDetaVPBLine"  :style="{'opacity':index==0?'0':1}"></view>
								<view class="jz_LineDetaVPBN">{{item.text}}</view>
								<view class="jz_LineDetaVPBBoxI" v-if="item.img"></view>
								<view class="jz_LineDetaVPBLine"
								:class="[item.radiusR]" v-else></view>
							</view>
						</view>
						
					</view>
				</view>

				<view class="jz_LineDetaQTS" v-if="stepNumber==0&&couponList.length>0">
					<img class="jz_LineDetaQTSImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732463534129379.png" />
					<view class="jz_LineDetaQTSText">
						<view>完成首单，即可获得</view>
						<view class="jz_LineDetaQTSTextRed">4张*150元</view>
						<view>出境散拼团抵扣券</view>
						
					</view>
				</view>

				<view class="jz_MainTitle">
					<view class="jz_MainTitleL" 
					v-if="dataList.currentPriceInfo
					&&dataList.currentPriceInfo.isNewArrival
					&&dataList.currentPriceInfo.isNewArrival==1">
						<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638733081598389054.png"/>
					</view>
					<view class="jz_MainTitleR" v-if="dataList.title">
						<text>{{ dataList.title }}</text>
					</view>
				</view>
				<view class="jz_Maidian">
					<text>{{ dataList.productRecommend }}</text>
				</view>
			</view>
			
			
			<view class="jz_TripDays" v-if='1==0'>
				<view style="display: flex; align-items: flex-start;">
					<view style="margin-bottom: 40rpx;width:1px;flex:1;">
						<span style="display: inline-block; position: relative">
							<text style="
			        position: relative;
			        z-index: 2;
			        color: #1f1f1f;
			        font-size: 36rpx;
			        font-weight: bold;
			      ">
								VIP免费送
							</text>
							<span style="
								width: 40px;
								background-color: #dfbe6e;
								height: 6px;
								bottom: 2px;
								left: 0;
								right: 0;
								position: absolute;
								z-index: 1;
							  "></span>
						</span>
					</view>
					
				</view>
				<view style="padding: 5px 0;font-size: 12px;">
					<u-steps :list="numList" active-color="#dfbe6e" un-active-color='#000'></u-steps>
					<view style="font-size:12px;text-align:center;margin-top:10px;color:#cecece">
						从2025年1月19日起，完成5个订单即可免费升级到【印象VIP同业】,终身享受特权折扣价。
					</view>
				</view>
			</view>	

			<view class="jz_TripDays">
				<view style="display: flex; align-items: flex-start;">
					<view style="margin-bottom: 40px;width:1px;flex:1;">
						<span style="display: inline-block; position: relative">
							<text style="
								position: relative;
								z-index: 2;
								color: #1f1f1f;
								font-size: 36rpx;
								font-weight: bold;
							  ">
								<text v-if="dataList.startCityName || (dataList.currentPriceInfo.priceUnion && dataList.currentPriceInfo.priceUnion.startCityName)">{{
			        dataList.currentPriceInfo.priceUnion && dataList.currentPriceInfo.priceUnion.startCityName?dataList.currentPriceInfo.priceUnion.startCityName:dataList.startCityName
			      }}</text>出发
							</text>
							<span style="
			        width: 40px;
			        background-color: #dfbe6e;
			        height: 6px;
			        bottom: 2px;
			        left: 0;
			        right: 0;
			        position: absolute;
			        z-index: 1;
			      "></span>
						</span>
					</view>
					<view @click="showStartCities=true" style="font-size: 12px;padding:5px;display: flex; align-items: center;" v-if="startCities && startCities.length>1">
						<span style="width:4px;height: 4px;background-color: #ff3166;border-radius: 4px;display: inline-block;"></span>
						<text style="margin:0 5px">选择其它出发城市</text>
						<u-icon name="arrow" color="#000" size="28"></u-icon>
					</view>
				</view>
				<view style="display: flex; overflow-x: auto">
					<template v-for="(item, pindex) in dataList.priceList">
						<view class="jz_StartList" v-if="pindex < 3" :class="{ active: delMsg.tcid == item.tcid }" @click="getDayInfo(item)"
						 :key="pindex">
							<view class="jz_StartTop">{{ getMonth(item.startDate) }} </view>
							<view class="jz_StartHoubu" v-if="item.remainNum > 0">
								<text>余</text>
								<text style="font-size: 28rpx; font-weight: 600">{{ item.remainNum }}</text>
							</view>
							<view class="jz_StartHoubu" v-else-if="item.isSubstitution==1">
								<text style="font-size: 28rpx; font-weight: 600">可候补</text>
							</view>
							<view v-if="item.remainNum > 0 || item.isSubstitution==1" style="color: #ff3166; font-size: 26rpx">
								￥{{ $utils.getretailer()?item.b2BPrice:item.b2CPrice}}</view>
							<view v-if="item.remainNum <= 0 && item.isSubstitution!=1" style="padding: 20rpx 0">
								<text style="font-size: 32rpx; font-weight: 600">已售罄</text>
							</view>
						</view>
					</template>
					<view class="jz_StartList" v-if="dataList.priceList.length > 3" :class="{ active: delMsg.tcid == customerDate.tcid }"
					 @click="openDate">
						<view class="jz_StartTop" v-if="customerDate.startDate">
							{{ customerDate.startDate ? getMonth(customerDate.startDate) : "" }}
						</view>
						<view class="jz_StartHoubu" v-if="customerDate.remainNum">
							<text>余</text>
							<text style="font-size: 28rpx; font-weight: 600">{{ customerDate.remainNum  }}</text>
						</view>
						<view class="jz_StartHoubu" v-else-if="customerDate.isSubstitution==1">
							<text style="font-size: 28rpx; font-weight: 600">可候补</text>
						</view>
						<view style="color: #ff3166; font-size: 26rpx" v-if="customerDate.b2BPrice">
							￥{{ $utils.getretailer()?currentPrice.b2BPrice:currentPrice.b2CPrice }}</view>
						<view v-if="!customerDate.startDate" style="height: 100%;width: 100%; display: flex; align-items: center;justify-content: center;">
							<view style="font-size: 24rpx; color: #999999">更多<br />班期</view>
						</view>
					</view>
				</view>
			</view>
			<view class="jz_TripDays" style="display: none">
				<span style="display: inline-block; position: relative">
					<text style="position: relative;z-index: 2;color: #1f1f1f;font-size: 36rpx;font-weight: bold;">摘要</text>
					<span style="width:40px;background-color:#dfbe6e;height: 6px;bottom: 2px;left: 0; right: 0;position: absolute;z-index: 1;"></span>
				</span>
				<view class="jz_ZhaiTitle"> <text class="jz_Dian"></text>住宿 </view>
				<view class="jz_ZhaiInner"> {{ dataList.nightNum }}晚酒店 </view>
				<template v-if="dataList.feature && dataList.feature.shopRemarkText != null && dataList.feature.shopRemarkText != ''">
					<view class="jz_ZhaiTitle"> <text class="jz_Dian"></text>购物 </view>
					<view class="jz_ZhaiInner">
						{{ dataList.feature.shopRemarkText }}
					</view>
				</template>
				<template v-else>
					<view class="jz_ZhaiTitle"> <text class="jz_Dian"></text>购物 </view>
					<view class="jz_ZhaiInner"> 纯玩儿，无购物 </view>
				</template>
				<view class="jz_ZhaiTitle"> <text class="jz_Dian"></text>景点 </view>
				<view class="jz_ZhaiInner"> {{ dataList.ticketCount }}个人气景点 </view>
				<view class="jz_ZhaiTitle"> <text class="jz_Dian"></text>餐食 </view>
				<view class="jz_ZhaiInner">
					含{{ dataList.breakfastCount }}早餐
					<text style="margin: 0 20px">{{ dataList.lunchCount }}午餐</text>
					{{ dataList.dinnerCount }}晚餐
				</view>
				<view class="jz_Zhankai" style="display: none">展开全部</view>
			</view>
			<view class="jz_TripDays" v-if="dataList.currentPriceInfo.priceFlight &&dataList.currentPriceInfo.priceFlight.length > 0">
				<span style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          ">
					<text style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            ">往返交通</text>
					<span style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "></span>
				</span>
				<view class="jz_TripMain">
					<view>
						<view class="jz_Flight" v-for="(fItem, fIndex) in dataList.currentPriceInfo.priceFlight" :key="fIndex">
							<view class="jz_FlightItem">
								<view style="width: 150rpx">
									<view class="jz_FlightTitle">{{ fItem.departureAirPortName }}</view>
									<view class="jz_FlightBottom">{{ fItem.departureTime }}</view>
								</view>
								<view class="jz_FlightIcon">
									<view style="display: flex; align-items: center; font-size: 24rpx">
										<img v-if="fItem.trafficType == 1" style="width: 30rpx; height: 30rpx" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/airfly.png"
										 alt="" />
										<img v-if="fItem.trafficType == 2" style="width: 30rpx; height: 30rpx" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/train.png"
										 alt="" />
										<view style="margin-left: 10rpx">{{ fItem.flightNumber }}</view>
									</view>
									<view class="jz_Arrow">
										<img style="width: 110rpx; height: 8rpx" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/b_arrow.png" />
									</view>
									<view class="jz_StartDate">
										{{ getFlightDay(fItem.startDate) }}
									</view>
								</view>
								<view style="width: 150rpx">
									<view class="jz_FlightTitle">{{ fItem.arrivalAirPortName }}</view>
									<view class="jz_FlightBottom">{{ fItem.arrivalTime }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="jz_TripDays" v-if="dataList.feature &&  dataList.feature.tripImageList && dataList.feature.tripImageList.length > 0">
				<span style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          ">
					<text style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            ">行程特色</text>
					<span style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "></span>
				</span>
				<view class="jz_TripMain" style="margin:0 -22px;">
					<image v-for="x in dataList.feature.tripImageList" :src="x" mode="widthFix" @click='previewTravelPicHandler(x,dataList.feature.tripImageList)'
					 style="width: 100%"></image>
				</view>
			</view>
			<view class="jz_TripDays" v-if="dataList.dayList && dataList.dayList.length > 0">
				<span style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          ">
					<text style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            ">行程概要</text>
					<span style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "></span>
				</span>
				<!-- <view class="jz_TripMain">
            <view class="jz_TripLine"></view>
            <view v-for="(item, index) in dataList.dayList" :key="index">
              <view class="jz_TripTitle">
                <view class="jz_TripLeft">第{{ getDays(index + 1) }}天</view>
                <view class="jz_TripRight"></view>
              </view>
              <view class="jz_RightInner">
                <view
                  v-for="(subItem, SubIndex) in item.dayArray"
                  v-if="subItem.type == 7"
                  :key="SubIndex"
                >
                  <view class="jz_Place">
                    <view class="jz_ComDian"></view>
                    <text>{{ subItem.childItem.title }}</text>
                  </view>
                </view>
                <template
                  v-for="(subItem, index2) in item.dayArray"
                  v-if="subItem.type == 2"
                >
                  <view class="jz_ImgDiv" :key="index2">
                    <img
                      mode="aspectFill"
                      :src="subItem.childItem.imaArray[0].url"
                      alt=""
                    />
                  </view>
                  <view class="jz_Place" style="align-items: center">
                    <view class="jz_ComDian"></view>
                    <text class="jz_Canyin">景点</text>
                    <text class="jz_CanInner">
                      <template
                        v-if="subItem.childItem && subItem.childItem.couponsName"
                      >
                        {{ subItem.childItem.couponsName }}
                      </template>
                      <text class="jz_Fenzhong">
                        <template
                          v-if="
                            subItem.childItem.playTimeHour ||
                            subItem.childItem.playTimeMinutes
                          "
                          >约</template
                        >
                        <template v-if="subItem.childItem.playTimeHour"
                          >{{ subItem.childItem.playTimeHour }}小时</template
                        >
                        <template v-if="subItem.childItem.playTimeMinutes"
                          >{{ subItem.childItem.playTimeMinutes }}分钟</template
                        >
                      </text>
                    </text>
                  </view>
                  <view class="jz_Jinddian">
                    {{ subItem.childItem.descriptionText }}
                  </view>
                </template>
                <view class="jz_Place">温馨提示</view>
                <view class="jz_Rermark">
                  <template
                    v-for="(subItem, sIndex) in item.dayArray"
                    v-if="subItem.type == 6"
                  >
                    <text :key="sIndex">{{
                      subItem.childItem.descriptionText
                    }}</text>
                  </template>
                </view>
                <view class="jz_Place">
                  <view class="jz_ComDian"></view>
                  <text class="jz_Canyin">餐饮</text>
                  <text class="jz_CanInner">
                    <template
                      v-for="(subItem, sIndex2) in item.dayArray"
                      v-if="subItem.type == 4"
                    >
                      <text
                        style="margin-right: 20px"
                        :key="sIndex2"
                        v-if="subItem.childItem.useDinnerType == '1'"
                        >早餐：{{ subItem.childItem.dinnerName }}</text
                      >
                      <text
                        style="margin-right: 20px"
                        v-if="subItem.childItem.useDinnerType == '2'"
                        >午餐：{{ subItem.childItem.dinnerName }}</text
                      >
                      <text v-if="subItem.childItem.useDinnerType == '3'"
                        >晚餐：{{ subItem.childItem.dinnerName }}</text
                      >
                    </template>
                  </text>
                </view>
                <view class="jz_Place">
                  <view class="jz_ComDian"></view>
                  <text class="jz_Canyin">酒店</text>
                  <text class="jz_CanInner">
                    <template
                      v-for="(subItem, sIndex3) in item.dayArray"
                      v-if="subItem.type == 3"
                    >
                      <text :key="sIndex3"
                        >{{ subItem.childItem.hotelName
                        }}<text
                          v-if="index != dataList.dayList.length - 1"
                          style="margin: 0 5px"
                          >/</text
                        ></text
                      >
                    </template>
                    <text v-if="index != dataList.dayList.length - 1"
                      >或同级</text
                    >
                  </text>
                </view>
              </view>
            </view>
          </view> 罗超 2023-09-20  -->
				<view v-if="d.length<0">
					<view v-for="(x,i) in d" :key="i">
						<view style="font-size: 32rpx;font-family: nav-font;font-weight: 600;display: flex;">
							<text>第 {{(i+1)}} 天</text>
							<text style="flex:1;width:1px;margin-left:10px;font-family: microsoft yahei ui light; line-height: 1;">
								{{x.title}}
							</text>
						</view>
						<template v-for="(y,yi) in x.dayArray">
							<view class="time-line-box" :key="yi" v-if="y.type==1">
								<view class="left">
									<view class="icon" style="background: #26a69a;">
										<i class="iconfont icon-jiaotong"></i>
									</view>
								</view>
								<view class="right">
									<view class="subtitle">{{y.subtitle}}</view>
									<view class="title">{{y.title}}</view>
									<view class="card">
										<rich-text :nodes="y.childItem.description"></rich-text>
									</view>
								</view>
							</view>
							<view class="time-line-box" :key="yi" v-if="y.type==2">
								<view class="left">
									<view class="icon" style="background: #31ccec;">
										<i class="iconfont icon-jingdian"></i>
									</view>
								</view>
								<view class="right">
									<view class="tag-play">
										<view class="subtitle" style="flex: 1;">景点/场馆</view>
										<view class="tag-play-box" v-if="y.childItem.playTimeHour > 0 || y.childItem.playTimeMinutes > 0">
											<view class="remark">推荐游玩</view>
											<view class="play-time">
												<span v-if="y.childItem.playTimeHour > 0">{{ y.childItem.playTimeHour }}
													小时</span>
												<span v-if="y.childItem.playTimeMinutes > 0">
													{{ y.childItem.playTimeMinutes }} 分钟</span>
											</view>
										</view>
									</view>

									<view class="title">{{`游玩${y.childItem.couponsName}`}}</view>
									<view class="card">
										<rich-text :nodes="y.childItem.description"></rich-text>
										<view class="sec-images">
											<template v-for="(z,zi) in y.childItem.imaArray">
												<image @click="previewImages(y.childItem.imaArray,zi)" :src="z.url" mode="aspectFill" v-if="zi<3" :key="zi"></image>
											</template>
										</view>
									</view>
								</view>
							</view>
							<view class="time-line-box" :key="yi" v-if="y.type==4">
								<view class="left">
									<view class="icon" style="background: #9c27b0;">
										<i class="iconfont icon-canpinhui-xican"></i>
									</view>
								</view>
								<view class="right">
									<view class="subtitle" style="flex: 1;">
										{{`${y.childItem.timeStr} ${y.childItem.dinnerTypeName}`}}
									</view>
									<view class="title">{{y.childItem.dinnerName}}</view>
									<view class="card">
										<rich-text :nodes="y.childItem.description"></rich-text>
										<view class="sec-images">
											<template v-for="(z,zi) in y.childItem.imaArray">
												<image @tap="previewImages(y.childItem.imaArray,zi)" :src="z.url" mode="aspectFill" v-if="zi<3" :key="zi"></image>
											</template>
										</view>
									</view>
								</view>
							</view>
							<view class="time-line-box" :key="yi" v-if="y.type==5">
								<view class="left">
									<view class="icon" style="background: lightslategrey;">
										<i class="iconfont icon-huodong"></i>
									</view>
								</view>
								<view class="right">
									<view class="subtitle" style="flex: 1;">放松休息，细细品味身边的风景</view>
									<view class="title">自由活动</view>
									<view class="card">
										<rich-text :nodes="y.childItem.description"></rich-text>
										<view class="sec-images">
											<template v-for="(z,zi) in y.childItem.imaArray">
												<image @tap="previewImages(y.childItem.imaArray,zi)" :src="z.url" mode="aspectFill" v-if="zi<3" :key="zi"></image>
											</template>
										</view>
									</view>
								</view>
							</view>
							<view class="time-line-box" :key="yi" v-if="y.type==3">
								<view class="left">
									<view class="icon" style="background: #1d1d1d;">
										<i class="iconfont icon-jiudian1"></i>
									</view>
								</view>
								<view class="right">
									<view class="subtitle" style="flex: 1;">住宿</view>
									<view class="title">{{y.childItem.hotelName}}</view>
									<view class="card">
										<rich-text :nodes="y.childItem.description"></rich-text>
										<view class="sec-images">
											<template v-for="(z,zi) in y.childItem.imaArray">
												<image @tap="previewImages(y.childItem.imaArray,zi)" :src="z.url" mode="aspectFill" v-if="zi<3" :key="zi"></image>
											</template>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>

			</view>
			<view style="padding-bottom: 22px;background-color: #FFF;" v-if="dataList.feature.detailsImageList && d.length>0">
				<image :src="x" @click='previewTravelPicHandler(x,dataList.feature.detailsImageList)' mode="widthFix" style="width: 100%;height: auto;margin-bottom: 10px;"
				 v-for="x in dataList.feature.detailsImageList"></image>
			</view>
			<view class="jz_TripDays" v-if="dataList.feature && dataList.feature.feeInclude">
				<span style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          ">
					<text style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            ">费用包含</text>
					<span style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "></span>
				</span>
				<view class="jz_TripMain">
					<rich-text :nodes="dataList.feature.feeInclude"></rich-text>
				</view>
			</view>
			<view class="jz_TripDays" v-if="dataList.feature && dataList.feature.feeNonIncludeText">
				<span style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          ">
					<text style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            ">费用不含</text>
					<span style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "></span>
				</span>
				<view class="jz_TripMain">
					<rich-text :nodes="dataList.feature.feeNonInclude"></rich-text>
				</view>
			</view>
			<view class="jz_TripDays" v-if="dataList.selfpayingList && dataList.selfpayingList.length>0">
				<span style="
	        display: inline-block;
	        position: relative;
	        margin-bottom: 40rpx;
	      ">
					<text style="
	          position: relative;
	          z-index: 2;
	          color: #1f1f1f;
	          font-size: 36rpx;
	          font-weight: bold;
	        ">自费安排</text>
					<span style="
	          width: 40px;
	          background-color: #dfbe6e;
	          height: 6px;
	          bottom: 2px;
	          left: 0;
	          right: 0;
	          position: absolute;
	          z-index: 1;
	        "></span>
				</span>
				<view class="jz_TripMain">
					<scroll-view scroll-x="true" style="width: 100%;">
						<view style="display: flex;font-size: 12px;min-width: 100%;">
							<view style="position: sticky;left: 0;top: 0;z-index: 2;">
								<view style="padding:10px;background-color: #eaeaea;">
									自费项目
								</view>
								<view v-for="(x,i) in dataList.selfpayingList" :key="i" style="white-space: nowrap;padding:10px;border-bottom:1px solid #eaeaea;background: #FFF;">
									{{x.itemName}}
								</view>
							</view>
							<view>
								<view style="padding:10px;background-color: #eaeaea;">
									城市
								</view>
								<view v-for="(x,i) in dataList.selfpayingList" :key="i" style="white-space: nowrap;padding:10px;border-bottom:1px solid #eaeaea;">
									{{x.cityName}}
								</view>
							</view>
							<view style="min-width: 25%;">
								<view style="padding:10px;background-color: #eaeaea;">
									预估费用
								</view>
								<view v-for="(x,i) in dataList.selfpayingList" :key="i" style="white-space: nowrap;padding:10px;border-bottom:1px solid #eaeaea;">
									{{x.estimatedCost}}
								</view>
							</view>
							<view style="flex:1;">
								<view style="padding:10px;background-color: #eaeaea;">
									说明
								</view>
								<view v-for="(x,i) in dataList.selfpayingList" :key="i" style="white-space: nowrap;padding:10px;border-bottom:1px solid #eaeaea;">
									{{x.explain}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="jz_TripDays" v-if="dataList.feature && dataList.feature.importantTip">
				<span style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          ">
					<text style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            ">重要提示</text>
					<span style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "></span>
				</span>
				<view class="jz_TripMain">
					<rich-text :nodes="dataList.feature.importantTip"></rich-text>
				</view>
			</view>
			<view class="jz_TripDays" v-if="dataList.feature && dataList.feature.warmTip">
				<span style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          ">
					<text style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            ">温馨提示</text>
					<span style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "></span>
				</span>
				<view class="jz_TripMain">
					<rich-text :nodes="dataList.feature.warmTip"></rich-text>
				</view>
			</view>
			<view class="jz_TripDays" v-if="dataList.shopList && dataList.shopList.length>0">
				<span style="
	        display: inline-block;
	        position: relative;
	        margin-bottom: 40rpx;
	      ">
					<text style="
	          position: relative;
	          z-index: 2;
	          color: #1f1f1f;
	          font-size: 36rpx;
	          font-weight: bold;
	        ">购物店安排</text>
					<span style="
	          width: 40px;
	          background-color: #dfbe6e;
	          height: 6px;
	          bottom: 2px;
	          left: 0;
	          right: 0;
	          position: absolute;
	          z-index: 1;
	        "></span>
				</span>
				<view class="jz_TripMain">
					<scroll-view scroll-x="true" style="width: 100%;">
						<view style="display: flex;font-size: 12px;min-width: 100%;">
							<view style="position: sticky;left: 0;top: 0;z-index: 2; flex:1;">
								<view style="padding:10px;background-color: #eaeaea;">
									购物店名称
								</view>
								<view v-for="(x,i) in dataList.shopList" :key="i" style="white-space: nowrap;padding:10px;border-bottom:1px solid #eaeaea;background: #FFF;">
									{{x.shopName}}
								</view>
							</view>
							<view style="flex:1;">
								<view style="padding:10px;background-color: #eaeaea;">
									城市
								</view>
								<view v-for="(x,i) in dataList.shopList" :key="i" style="white-space: nowrap;padding:10px;border-bottom:1px solid #eaeaea;">
									{{x.cityName}}
								</view>
							</view>
							<view>
								<view style="padding:10px;background-color: #eaeaea;">
									参观时长
								</view>
								<view v-for="(x,i) in dataList.shopList" :key="i" style="white-space: nowrap;padding:10px;border-bottom:1px solid #eaeaea;">
									{{x.visitTime}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="jz_TripDays" v-if="dataList.feature && dataList.feature.shopRemark">
				<span style="
	        display: inline-block;
	        position: relative;
	        margin-bottom: 40rpx;
	      ">
					<text style="
	          position: relative;
	          z-index: 2;
	          color: #1f1f1f;
	          font-size: 36rpx;
	          font-weight: bold;
	        ">购物店（补充协议书）</text>
					<span style="
	          width: 40px;
	          background-color: #dfbe6e;
	          height: 6px;
	          bottom: 2px;
	          left: 0;
	          right: 0;
	          position: absolute;
	          z-index: 1;
	        "></span>
				</span>
				<view class="jz_TripMain">
					<rich-text :nodes="dataList.feature.shopRemark"></rich-text>
				</view>
			</view>
			<view class="jz_TripDays" v-if="dataList.feature && dataList.feature.b2BRemark && $utils.getretailer()">
				<span style="
	        display: inline-block;
	        position: relative;
	        margin-bottom: 40rpx;
	      ">
					<text style="
	          position: relative;
	          z-index: 2;
	          color: #1f1f1f;
	          font-size: 36rpx;
	          font-weight: bold;
	        ">同行备注</text>
					<span style="
	          width: 40px;
	          background-color: #dfbe6e;
	          height: 6px;
	          bottom: 2px;
	          left: 0;
	          right: 0;
	          position: absolute;
	          z-index: 1;
	        "></span>
				</span>
				<view class="jz_TripMain">
					<rich-text :nodes="dataList.feature.b2BRemark"></rich-text>
				</view>
			</view>
			<view class="jz_TripDays" v-if="dataList.feature && dataList.feature.visaRemark">
				<span style="
            display: inline-block;
            position: relative;
            margin-bottom: 40rpx;
          ">
					<text style="
              position: relative;
              z-index: 2;
              color: #1f1f1f;
              font-size: 36rpx;
              font-weight: bold;
            ">签证说明</text>
					<span style="
              width: 40px;
              background-color: #dfbe6e;
              height: 6px;
              bottom: 2px;
              left: 0;
              right: 0;
              position: absolute;
              z-index: 1;
            "></span>
				</span>
				<view class="jz_TripMain">
					<rich-text :nodes="dataList.feature.visaRemark"></rich-text>
				</view>
			</view>
			<!-- <view class="jz_TripDays" style="width:100%;height:50rpx;background-color: transparent;">
			</view> -->

			<u-popup v-model="showDateChosen" mode="bottom" border-radius="20" length="90%" :safe-area-inset-bottom="true">
				<canlendar @finish="chosenDateResult" :defaultDate="currentPrice.startDate" :priceList="dataList.priceList"></canlendar>
			</u-popup>
			<u-popup v-model="showOrderPreviwe" mode="bottom" border-radius="20" length="90%" :safe-area-inset-bottom="true">
				<view style="
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
          ">
					<view style="flex: 1; width: 100%; height: 1rpx">
						<canlendar @finish="chosenDateResult" :immediately="true" :defaultDate="currentPrice.startDate" :priceList="dataList.priceList"
						 title="确定日期和人数"></canlendar>
					</view>
					<view style="background: #ecf1f4; padding: 20rpx 0">
						<view class="line-flex" style="padding: 30rpx; background: #fff">
							<text style="font-size: 28rpx; color: #111; font-weight: 500">成人</text>
							<text style="
                  font-size: 22rpx;
                  color: #999;
                  margin-left: 30rpx;
                  flex: 1;
                ">18周岁以上</text>
							<u-number-box size="28" :min="1" :max="currentPrice.isSubstitution==1?1000:(currentPrice.remainNum - etCount - etbCount)" @change="crChange" v-model="crCount"></u-number-box>
						</view>
						<view class="line-flex" style="padding: 30rpx; background: #fff">
							<text style="font-size: 28rpx; color: #111; font-weight: 500">儿童(占床)</text>
							<text style="
                  font-size: 22rpx;
                  color: #999;
                  margin-left: 30rpx;
                  flex: 1;
                ">2-18周岁(不含)</text>
							<u-number-box size="28" :min="0" :max="currentPrice.isSubstitution==1?1000:(currentPrice.remainNum - crCount - etbCount)" @change="etChange" v-model="etCount"></u-number-box>
						</view>
						<view class="line-flex" style="padding: 30rpx; background: #fff">
							<text style="font-size: 28rpx; color: #111; font-weight: 500">儿童(不占床)</text>
							<text style="
                  font-size: 22rpx;
                  color: #999;
                  margin-left: 30rpx;
                  flex: 1;
                ">2-18周岁(不含)</text>
							<u-number-box size="28" :min="0" :max="currentPrice.isSubstitution==1?1000:(currentPrice.remainNum - crCount - etCount)" @change="etbChange" v-model="etbCount"></u-number-box>
						</view>
						<view class="line-flex" style="padding: 30rpx; background: #fff">
							<text style="font-size: 28rpx; color: #111; font-weight: 500">婴儿</text>
							<text style="
                  font-size: 22rpx;
                  color: #999;
                  margin-left: 30rpx;
                  flex: 1;
                ">0-2周岁(不含)</text>
							<u-number-box size="28" @change="yeChange" :min="0" :max="crCount" v-model="yeCount"></u-number-box>
						</view>
						<view class="line-flex" style="padding: 30rpx; background: #fff"
						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">
								<view>
									<text v-if="SaleName">{{ SaleName }}</text>
									<text v-else style="color: #999">
										请选择
									</text>
								</view>
								<u-icon name="arrow-down" size="24"></u-icon>
							</view>
						</view>
					</view>
					<view class="jz_OrderDiv" style="box-shadow: none; width: 100%; padding: 20rpx">
						<view>
							<text style="font-size: 24rpx; color: #111; font-weight: 500">{{ currentPrice.startDate }}
								出发 余位：{{
                  currentPrice.remainNum
                }}</text> 
							<text style="font-size: 24rpx;font-weight: 500; margin-left: 10rpx;" :style="{color: currentPrice.isSubstitution==1?'#111':'#FF3166'}">
								{{currentPrice.isSubstitution==1?'本单可以候补':'本单不能候补'}}
							</text>
						</view>
						<view style="display: flex; align-items: center">
							<!-- #ifdef MP-WEIXIN -->
							<button open-type="contact" class="jz_ConButton">
								<img style="width: 36rpx; height: 38rpx" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png"
								 alt="" />
								<view style="color: #111111; font-size: 22rpx">客服</view>
							</button>
							<!-- #endif -->
							<!-- #ifdef MP-ALIPAY -->
							<button class="jz_ConButton" style="margin-right: 20rpx">
								<contact-button tnt-inst-id="QqR_ZV6m" scene="SCE01203509" icon="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png"
								 size="38rpx" :alipay-card-no="2088 + userId" :ext-info="appid">
								</contact-button>
								<view style="color: #111111; font-size: 22rpx">客服</view>
							</button>
							<!-- #endif -->
							<view class="jz_OrderNow" @click="goReserce()">立即预定</view>
						</view>
					</view>
				</view>
			</u-popup>
		</scroll-view>
		<view class="jz_orderbox" v-if="!showOrderPreviwe && !showDateChosen">
			<view class="jz_OrderDiv">
				<view style="color: #ff3166; font-weight: bold">
					<text style="font-size: 22rpx">¥</text>
					<!-- 原b2b -->
					<text style="font-size: 40rpx;font-family: nav-font;">{{discountPrice}}</text>
					<text style="font-size: 22rpx">/起</text>
				</view>
				<view style="display: flex; align-items: center">
					<!-- #ifdef MP-WEIXIN -->
					<button @click="downloadTripPlanHandler" class="jz_ConButton" v-if="d.length>3">
						<img style="width: 36rpx; height: 38rpx" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1695376860000_131.png"
						 alt="" />
						<view style="color: #111111; font-size: 22rpx">下载行程</view>
					</button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button class="jz_ConButton" style="margin-right: 20rpx">
						<contact-button tnt-inst-id="QqR_ZV6m" scene="SCE01203509" icon="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png"
						 size="38rpx" :alipay-card-no="2088 + userId" :ext-info="appid">
						</contact-button>
						<view style="color: #111111; font-size: 22rpx">客服</view>
					</button>
					<!-- #endif -->
					<view class="jz_OrderNow disable" v-if="currentPrice.remainNum <= 0 && currentPrice.isSubstitution==0">已售罄</view>
					<view class="jz_OrderNow" @click="openOrderPreview" v-else-if="currentPrice.remainNum <= 0 && currentPrice.isSubstitution==1">可候补</view>
					<view class="jz_OrderNow" @click="openOrderPreview" v-else>立即预定</view>
				</view>
			</view>
		</view>
		<auth v-if="showAuth&&is_show_auth==1" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<u-popup v-model="showStartCities" mode="bottom" border-radius="20" length="60%" :safe-area-inset-bottom="true">
			<view style="display: flex;flex-direction: column;height:100%;width:100%;">
				<view style="font-size: 24px; font-weight: 700;padding: 20px;font-family: city-font;">
					出发城市
				</view>
				<scroll-view scroll-y="true" style="width: 100%;height: 1px; flex: 1;">
					<view style="padding:20px">
						<view @click="changeStartCity(x)" :style="{'background': delMsg.cityId==x.StartCityId?'#DFBE6E':''}" style="padding:20px;display: flex;align-items: center;margin-bottom: 20px;box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2); border-radius: 8px;"
						 v-for="(x,i) in startCities">
							<view style="font-size: 18px;font-family: city-font;width:1px;flex:1;">{{ x.StartCityName }}
							</view>
							<view style="color: #ff3166;">
								<text class="jz_renmin">¥</text>
								<text class="jz_B2bPrice">{{ $utils.getretailer()?(currentPrice.originalB2BPrice+x.BackAddPrice+x.GoAddPrice):(currentPrice.originalB2CPrice+x.BackAddPrice+x.GoAddPrice) }}</text>
								<text style="color: #999999; font-size: 28rpx; font-weight: 400">/人起</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup v-model="showSalePreviwe" mode="bottom" border-radius="50" length="60%" :safe-area-inset-bottom="true">
			<view>
				<view style="font-size: 17px;text-align: center;padding: 20px 0;">
					选择销售
				</view>
				<scroll-view scroll-x="true" style="width: 100%;height: 43vh;">
					<view class="SaleBox">
						<view v-for="(item,index) in SaleList" 
							:key="index"
							class="SaleText"
							@click="SelectSales(item)">
								<view>{{ item.EmName }}</view>
								<view>
									<u-radio-group v-model="SaleId" @change="SelectSales" 
									style="position: relative;top:10rpx;">
										<u-radio shape="circle" :name="item.CreateBy" :icon-size="36" 
										:active-color="mc"></u-radio>
									</u-radio-group>	
								</view>
						</view>
					</view>
				</scroll-view>
				<u-button size="80" :ripple="true" shape="circle" :custom-style="{
						backgroundColor: '#333',
						height: '80rpx',
						color: '#fff',
						fontSize: '14px',
						margin: '0 auto',
						width: '90vw',
					}" @click="showSalePreviwe=false">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import hParse from "@/components/u-parse/parse.vue";
	import canlendar from "./components/sign/index.vue";
	// #ifdef MP-ALIPAY
	import parseHtml from "../../plugin/htmlparse.js";
	// #endif
	import auth from "@/components/auth/index.vue";
	export default {
		components: {
			canlendar,
			auth,
		},
		data() {
			return {
				pageTitle: "线路详情",
				showDateChosen: false,
				showOrderPreviwe: false,
				showStartCities: false,
				crCount: 1,
				etCount: 0,
				yeCount: 0,
				etbCount: 0,
				msg: {
					pageIndex: 1,
					pageSize: 15,
				},
				dataList: {}, //数据
				delMsg: {
					tcid: 0,
					configId: 0,
					tcnum: "",
					cityId: 0,
					customerId: 0,
				},
				d: {},
				scenicNum: 0, // 景点数量
				breakfastNum: 0, //早餐数
				lunchNum: 0, //午餐数
				dinnerNum: 0, //晚餐数
				boxOption: 0,
				titleStyle: {},
				mainColor: "",
				detailContent: "",
				customerDate: {},
				currentPrice: {},
				canCreateOrder: false,
				finishFirstLoad: false,
				showAuth: false,
				U: {},
				appid: encodeURIComponent(JSON.stringify({
					appId: "2021002181604459"
				})),
				userId: uni.getStorageSync("mall_UserInfo").UserId,
				hideshare: false,
				topheight: 0,
				shareData: null,
				isDownloading: false,
				startCities: [],
				is_show_auth: 0, //是否配置启用授权（1-开启）
				b2bUser: {}, //同行信息
				showSalePreviwe: false,
				SaleList: [],
				customer: {},
				SaleName: '',
				SaleId: 0,
				mc: '',
				couponList:[],
				maxCouponDiscount:0,
				numList: [{
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}
				],
				createBy: 0,
				progress:[
					{
						text:'1',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'2',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'3',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'4',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
						img:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528736165089.png'
					},
				],
				stepNumber: 0,//当前完成单数
				UnfOddNumber: 0,//剩余完成订单数 可成为vip
				discountPrice: 0,//优惠后金额
				Discounts: 1,//福利项
				TotalDiscount: 0,//合计优惠金额
			};
		},
		watch: {
			stepNumber: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					this.progress.forEach((x,index)=>{
						if(this.stepNumber==0){
							x.colorStyle = ""
							x.radiusR = ""
							x.radiusL = ""
						}
						if(this.stepNumber>0&&index<1){
							x.colorStyle = "active"
							x.radiusR = "VPBLRadiusR"
						}
						if(this.stepNumber>1&&index<2){
							x.colorStyle = "active"
							x.radiusL = ""
							if(index<1){
								x.radiusR = ""
							}else{
								x.radiusR = "VPBLRadiusR"
							}
						}
						if(this.stepNumber>2&&index<3){
							x.colorStyle = "active"
							x.radiusL = ""
							if(index<2){
								x.radiusR = ""
							}else{
								x.radiusR = "VPBLRadiusR"
							}
						}
						if(this.stepNumber>3&&index<4){
							x.colorStyle = "active"
							x.radiusL = ""
							if(index<3){
								x.radiusR = ""
							}else{
								x.radiusR = "VPBLRadiusR"
							}
						}
						if(this.stepNumber>4&&index<5){
							x.colorStyle = "active"
							x.radiusL = ""
							if(index<4){
								x.radiusR = ""
							}else{
								x.radiusR = "VPBLRadiusR"
								x.radiusL = "VPBLRadiusL"
							}
						}
					})
				},
			},
		},
		created() {},
		onLoad(option) {
			this.mc = this.$uiConfig.mainColor;
			console.log("option",option);
			this.customer = uni.getStorageSync("b2b_user");
			this.delMsg.customerId = this.customer.customerId
			if (!option.scene) {
				if (option.lineId) {
					this.delMsg.lineId = option.lineId;
				}
				if (option.tcid) {
					this.delMsg.tcid = option.tcid;
				}
				if (option.configId) {
					this.delMsg.configId = option.configId;
				}
				if (option.cityId) {
					this.delMsg.cityId = option.cityId;
				}
				if (option.pid) {
					uni.setStorageSync("pid", {
						pid: option.pid
					})
				}
				if (option.createBy) {
					this.createBy = option.createBy
				}
			} else {
				let t = decodeURIComponent(option.scene).split('&')
				t.forEach(x => {
					let item = x.split('=')
					if (item.length === 2) {
						if (item[0] === 'tcid') {
							this.delMsg.tcid = item[1]
						} else if (item[0] === 'configId') {
							this.delMsg.configId = item[1]
						} else if (item[0] === 'createBy') {
							this.createBy = item[1]
						}
					}
				})
			}
			this.getSale()
			this.getDetails();
			this.U = uni.getStorageSync("mall_UserInfo");
			this.b2bUser = uni.getStorageSync("b2b_user");
			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;
			}
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: 0,
					};
					that.topheight = 55 + res.statusBarHeight
				},
			});
			this.mainColor = this.$uiConfig.mainColor;
		},
		methods: {
			calcPzCouponHandler(){
				this.couponList.forEach((x)=>{
					if(x.expansionModel.denomination>0){
						x.realDenomination = x.denomination
						x.denomination =x.expansionModel.denomination
					}
				})
				// setTimeout(()=>{
				// 	console.log(this.currentPrice,'=======222')
				// ,1000})
			},
			SelectSales(item){
				this.SaleName = item.EmName
				this.SaleId = item.CreateBy
			},
			getUserCouponList() {
				let couponParams = {
					"lineId": this.dataList.lineId, //线路ID
					"lineteamId": this.dataList.lineteamId, //系列ID
					"userId": this.customer.accountId, //AccountId
					"CouponsUseScope": 0, //特定使用平台(当地游=8   跟团游=2 小包团=10)
					"isExpansion": 0, //是否启动膨胀金1-是
					"CustomerType": 0, //客户类型 0-同行，1-直客
					"TCID": this.currentPrice.tcid,
				}
				if (this.currentPrice.teamType == "0") {
					//跟团游
					couponParams.CouponsUseScope = 2;
				} else if (this.currentPrice.teamType == "1") {
					//小包团
					couponParams.CouponsUseScope = 10;
				} else if (this.currentPrice.teamType == "2") {
					//当地游
					couponParams.CouponsUseScope = 8;
				}
				this.apipost(
					"coupon_post_GetUserCanUseCouponList", couponParams,
					(res) => {
						if (res.resultCode == 1) {
							this.couponList = res.data
							if(this.couponList.length>0) {
								this.Discounts +=  1
							}
							this.calcPzCouponHandler()
							this.couponList.forEach(x=>{
								if(x.couponsType==1 && x.denomination>this.maxCouponDiscount) this.maxCouponDiscount=x.denomination
								if(x.couponsType==2){
									const disMoney = this.currentPrice.b2BPrice*(1-x.denomination)
									this.maxCouponDiscount = this.maxCouponDiscount<disMoney?disMoney:this.maxCouponDiscount
								}
							})
							let money = this.$utils.getretailer()?this.currentPrice.b2BPrice:this.currentPrice.b2CPrice
							let maxCouponDiscount = this.maxCouponDiscount
							this.TotalDiscount = this.maxCouponDiscount
							if(this.stepNumber<5){
								this.discountPrice = money-this.maxCouponDiscount
							}else{
								let discountPrice = money-this.maxCouponDiscount
								if(this.dataList.lineId==168){
									this.discountPrice = (discountPrice*0.95).toFixed(2)
									maxCouponDiscount += money-Number(this.discountPrice)
									console.log(discountPrice*0.95,'-----欧洲线')
								}else{
									this.discountPrice = Number(discountPrice)-100
									maxCouponDiscount+=100
									console.log(Number(discountPrice)-100,'-----其他线')
								}
								console.log(maxCouponDiscount,'------已减')
								this.TotalDiscount = maxCouponDiscount.toFixed(2)
							}
						}
					},
					(err) => { }
				);
			},
			
			getSale(){
				this.apipost(
					"b2b_get_GetCustomerCreateByList",
					{
						CustomerId: this.customer.customerId
					},
					(res) => {
						if (res.resultCode == 1) {
							if(res.data.length>0){
								this.SaleList = res.data
								if(res.data.length==1&&this.createBy==0){
									this.SaleName = res.data[0].EmName
									this.SaleId = res.data[0].CreateBy
								}
							}else{
								this.SaleName = ''
								this.SaleId = 0
							}
						} else {
							
						}
					},
					(err) => {
						
					}
				);
			},
			changeStartCity(item) {
				this.showStartCities = false
				this.delMsg.cityId = item.StartCityId
				this.getDetails();
			},
			downloadTripPlanHandler() {
				if (this.isDownloading) return;
				let that = this
				uni.showLoading({
					title: '这可能需要30秒，请耐心等待'
				})
				this.isDownloading = true
				let url =
					`https://im.oytour.com/TripDownLoad/${this.delMsg.configId}_${this.delMsg.tcid}/${this.delMsg.configId}_${this.delMsg.tcid}.pdf`

				let fileName =
					`${this.dataList.currentPriceInfo?.startDate+'_'}${this.dataList.ltName.replace(/\s+/g,"").replaceAll("/","")}`
				// if (this.delMsg.lineId && (this.delMsg.lineId == 168 || this.delMsg.lineId == 119)) {
				// 	fileName = `${this.dataList.currentPriceInfo?.startDate+'_'} `
				// 	if (this.dataList.title.length > 50) {
				// 		fileName += this.dataList.title.substring(0, 50);
				// 	} else {
				// 		fileName += this.dataList.title;
				// 	}
				// }
				console.log(fileName, "fileName");
				const filePath = wx.env.USER_DATA_PATH + `/${fileName}.pdf`
				uni.downloadFile({
					url: url,
					filePath,
					success: (res) => {
						wx.openDocument({
							filePath: filePath,
							showMenu: true,
							success: fres => {
								uni.hideLoading()
								that.isDownloading = false
							},
							fail: fres => {
								console.log('downloadTripPlanHandler_打开失败', fres)
								that.downloadFailed('打开失败，请重试。如果仍然失败，请联系销售索要PDF行程')
							},
						})
					},
					fail(err) {
						console.log("downloadTripPlanHandler_fail", err)
						that.downloadFailed('下载失败，请重试。如果仍然失败，请联系销售索要PDF行程' + err)
					},
				});
			},
			downloadFailed(msg) {
				uni.showToast({
					icon: 'none',
					title: msg
				})
				this.isDownloading = false;
			},
			previewTravelPicHandler(url, urls) {
				uni.previewImage({
					urls: urls,
					current: url
				})
			},
			reloadUserinfo() {
				this.b2bUser = uni.getStorageSync("b2b_user");
				this.u = uni.getStorageSync("mall_UserInfo");
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			openOrderPreview() {
				if (this.canCreateOrder && this.finishFirstLoad) {
					this.showOrderPreviwe = true;
				}
			},
			chosenDateResult(result) {
				let price = this.dataList.priceList[result.priceObj];
				this.currentPrice = price;
				if (
					this.crCount + this.etCount + this.etbCount >=
					this.currentPrice.remainNum
				) {
					this.crCount = 1;
					this.etCount = 0;
					this.etbCount = 0;
				}
				this.delMsg.tcid = price.tcid;
				this.delMsg.configId = price.configID;
				if (!this.showOrderPreviwe) {
					this.getDetails();
				}
				if (result.priceObj > 2) {
					this.customerDate = price;
				}
				this.showDateChosen = false;
				this.getUserCouponList()
			},
			crChange(e) {
				this.crCount = e.value;
			},
			etChange(e) {
				this.etCount = e.value;
			},
			etbChange(e) {
				this.etbCount = e.value;
			},
			yeChange(e) {
				this.yeCount = e.value;
			},
			openPicture() {
				let imgObj = this.dataList.imgCover;
				uni.navigateTo({
					url: "/pages/hotel/picture?imgObj=" +
						encodeURIComponent(imgObj) +
						"&isLine=1",
				});
			},
			previewImages(images, cur) {
				let imgObj = images;
				if (images[0].url) {
					imgObj = []
					images.forEach(x => imgObj.push(x.url))
				}
				uni.previewImage({
					urls: images,
					current: cur
				})
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			scroll(e) {
				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();
			},
			getStartCitiesHandler() {
				this.apipost("b2b_get_GetCityListByTCID", {
					tcid: this.delMsg.tcid
				}, (res) => {
					if (res.resultCode == 1) {
						this.startCities = res.data
					}
				})
			},
			//获取详情
			getDetails() {
				uni.showLoading()
				this.apipost(
					"b2b_get_GetB2BTravelInfoNoDesV1",
					this.delMsg,
					(res) => {
						if (res.resultCode == 1) {
							try {
								this.getStartCitiesHandler()
								res.data.tempImgCover = JSON.parse(res.data.imgCover);
								this.dataList = res.data;
								this.stepNumber = this.dataList.orderNum
								this.UnfOddNumber = (Number(this.stepNumber)-5)*-1
								if(this.stepNumber>4) this.Discounts +=  1
								if(this.dataList.currentPriceInfo.teamType==0) this.Discounts += 1
								try {
									this.formatDay();
								} catch (e) {
									console.log('getDetails_发生错误：' + e.message)
								}
								this.scenicNum = 0;
								this.dataList.dayList.forEach((x) => {
									x.dayArray.forEach((y) => {
										if (y.type == 2) {
											this.scenicNum++;
										}
										if (y.type == 4 && y.childItem.useDinnerType == 1) {
											this.breakfastNum++;
										}
										if (y.type == 4 && y.childItem.useDinnerType == 2) {
											this.lunchNum++;
										}
										if (y.type == 4 && y.childItem.useDinnerType == 3) {
											this.dinnerNum++;
										}
									});
								});
								this.currentPrice = this.dataList.currentPriceInfo;
								if (this.currentPrice.remainNum == 0 && this.currentPrice.isSubstitution!=1) {
									let temp = this.dataList.priceList.find((x) => x.remainNum > 0);
									if (temp) {
										this.getDayInfo(temp);
									}
								}
								this.dataList.priceList.forEach((x) => {
									if (x.tcid == this.delMsg.tcid) {
										this.delMsg.tcnum = x.tcnum;
									}
									if (x.remainNum > 0) {
										this.canCreateOrder = true;
									}
								});
								this.finishFirstLoad = true;
								this.getUserCouponList()
								// #ifdef MP-ALIPAY
								if (this.dataList.feature.feeInclude) {
									this.dataList.feature.feeInclude = parseHtml(
										this.dataList.feature.feeInclude
									);
								}
								if (this.dataList.feature.feeNonInclude) {
									this.dataList.feature.feeNonInclude = parseHtml(
										this.dataList.feature.feeNonInclude
									);
								}
								if (this.dataList.feature.importantTip) {
									this.dataList.feature.importantTip = parseHtml(
										this.dataList.feature.importantTip
									);
								}
								if (this.dataList.feature.warmTip) {
									this.dataList.feature.warmTip = parseHtml(
										this.dataList.feature.warmTip
									);
								}
								if (this.dataList.feature.visaRemark) {
									this.dataList.feature.visaRemark = parseHtml(
										this.dataList.feature.visaRemark
									);
								}
								
								// #endif
							} catch (e) {
								console.log("getDetails_catch", e)
								uni.showToast({
									icon: "none",
									title: '团队信息不完善，无法完成显示'
								})
							}
							uni.hideLoading()
						} else {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '行程已下架，请查看其它行程'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							})
						}
					},
					(err) => {
						uni.hideLoading()
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/index'
							})
						})
					}
				);
			},
			formatDay() {
				this.d = this.dataList.dayList
				if (this.d.length > 0) {
					this.d.forEach((x) => {
						x.dayArray.forEach((y) => {
							if (y.type == 7) {
								x.title = y.childItem.title;
							} else if (y.type == 1) {
								y.subtitle =
									y.childItem.subTraffic.length > 0 && y.childItem.subTraffic[0]
									.startTime +
									" - " +
									y.childItem.subTraffic[y.childItem.subTraffic.length - 1]
									.endTime;
								y.title = this.formatTraffice(y.childItem.subTraffic);
								y.icon = "iconfont iconjiaotong";
							} else if (y.type == 4) {
								let t = ["早餐", "午餐", "晚餐"];
								y.childItem.dinnerTypeName =
									t[parseInt(y.childItem.useDinnerType) - 1];
							}
						});
					});
				}
			},
			formatTraffice(tras) {
				let txt = "从" + (tras.length > 0 ? tras[0].startCityName : '');
				tras.forEach((z, i) => {
					if (i > 0 && txt != '') {
						txt += "；再";
					}
					if (z.arrivalType == 1) {
						txt += "搭乘航班";
					} else if (z.arrivalType == 2) {
						txt += "乘坐豪华巴士";
					} else if (z.arrivalType == 3) {
						txt += "乘坐豪华游轮";
					} else {
						txt += "乘坐高铁";
					}
					txt += " 到达" + z.arrivalCityName;
				});
				return txt;
			},
			//转换图片格式
			getCoverImg(imgCover) {
				if (imgCover) {
					return JSON.parse(imgCover);
				}
			},
			//返回天数
			getDays(day) {
				if (day < 10) {
					return "0" + day;
				} else {
					return day;
				}
			},
			//返回月 日
			getMonth(day) {
				if (day) {
					let Myday = day.split("-");
					return Myday[1] + "-" + Myday[2];
				}
			},
			getFlightDay(day) {
				if (day) {
					let Myday = day.split("-");
					return Myday[1] + "月" + Myday[2] + "日";
				}
			},
			//点击切换
			getDayInfo(item) {
				if (item.remainNum > 0 || item.isSubstitution==1) {
					if (
						this.crCount + this.etCount + this.etbCount >=
						this.currentPrice.remainNum
					) {
						this.crCount = 1;
						this.etCount = 0;
						this.etbCount = 0;
					}
					this.delMsg.tcid = item.tcid;
					this.delMsg.configId = item.configID;
					this.currentPrice = item;
					this.getDetails();
					
				} else {
					uni.showToast({
						title: "该团期已售罄",
						icon: "none",
					});
				}
			},
			openDate() {
				if (this.customerDate.tcid) {
					if (this.customerDate.tcid == this.delMsg.tcid) {
						this.showDateChosen = true;
					} else {
						this.delMsg.tcid = this.customerDate.tcid;
						this.delMsg.configId = this.customerDate.configID;
						this.getDetails();
					}
				} else {
					this.showDateChosen = true;
				}
			},
			//立即预定
			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;
				}
				if (this.SaleList&&this.SaleList.length>1&&this.SaleId==0&&this.createBy==0) {
					uni.showToast({
							title: "请选择销售",
							icon: "none",
					});
					this.showSalePreviwe = true;
					return;
				}
				let myObj = {};
				myObj.startCityName = this.dataList.startCityName;
				myObj.startDate = this.currentPrice.startDate;
				myObj.dayNum = this.currentPrice.dayNum;
				myObj.title = this.currentPrice.title;
				myObj.b2BPrice = this.currentPrice.b2BPrice;
				myObj.b2CPrice = this.currentPrice.b2CPrice;
				myObj.childNeedPrice = this.currentPrice.childNeedPrice;
				myObj.childNoNeedPrice = this.currentPrice.childNoNeedPrice;
				myObj.babyPrice = this.currentPrice.babyPrice;
				myObj.babyChargePrice = this.currentPrice.babyChargePrice;
				myObj.b2BMemberPrice = this.currentPrice.b2BMemberPrice;
				myObj.tcid = this.currentPrice.tcid;
				myObj.teamType = this.currentPrice.teamType;
				myObj.lineteamId = this.dataList.lineteamId;
				let imgCover = JSON.parse(this.dataList.imgCover);
				if (imgCover.length > 0) {
					myObj.CoverImg = imgCover[0].Url;
				}
				let myCurr = JSON.stringify(myObj);
				let ren = {
					crCount: this.crCount, //成人
					etCount: this.etCount, //儿童占床
					yeCount: this.yeCount, //婴儿
					etbCount: this.etbCount, //儿童不占床
				};
				let tParams = "&tcid=" +
					this.delMsg.tcid +
					"&cityId=" +
					this.delMsg.cityId +
					"&lineId=" +
					this.dataList.lineId +
					"&CreateBy=" +(this.createBy?this.createBy:this.SaleId);
				console.log("tParams", tParams);
				uni.navigateTo({
					url: "/pages/jiuzhai/jz_Reserve?currentPriceInfo=" +
						encodeURIComponent(myCurr) +
						"&seat=" +
						encodeURIComponent(JSON.stringify(ren)) + tParams,
				});
			},
			// #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.title ? this.dataList.title : "帖子";
				let imageUrl =
					this.dataList.tempImgCover && this.dataList.tempImgCover.length > 0 ?
					this.dataList.tempImgCover[0] :
					"";
				return {
					title: title,
					query: "tcid=" +
						this.delMsg.tcid +
						"&user_id=" +
						uid +
						"&SmallShopId=" +
						SmallShopId +
						"&Up=" +
						this.Up +
						"&JumpType=19" +
						"&configId=" +
						this.delMsg.configId +
						"&cityId=" +
						this.delMsg.cityId,
					imageUrl: imageUrl,
				};
			},
			// #endif
			//分享给朋友
			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.title ? this.dataList.title : "帖子",
					path: "/pages/index/index?tcid=" +
						this.delMsg.tcid +
						"&user_id=" +
						uid +
						"&SmallShopId=" +
						SmallShopId +
						"&Up=" +
						this.Up +
						"&JumpType=19" +
						"&configId=" +
						this.delMsg.configId +
						"&cityId=" +
						this.delMsg.cityId,
					imageUrl: "",
					// imageUrl:
					//   this.dataList.tempImgCover && this.dataList.tempImgCover.length > 0
					//     ? this.dataList.tempImgCover[0]
					//     : "",
				};
			},
		},
	};
</script>
<style>
	/* 上海成都武汉昆明重庆南宁西安北京厦门选择出发城市 */
	@font-face {
		font-family: "city-font";
		src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pc81HtdOdtly.woff2") format("woff2"),
			url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/cHntSgti5kmY.woff") format("woff");
		font-display: swap;
	}
	.row{
		display: flex;
	}
	.items-center{
		align-items: center;
	}
	.col{
	    flex: 1;
	}
	.jz_FlightItem {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: auto;
		margin-bottom: 45rpx;
	}

	.jz_FlightTitle {
		color: #999999;
		font-size: 24rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.jz_Arrow {
		position: absolute;
		top: 17rpx;
	}

	.jz_StartDate {
		color: #999999;
		font-size: 24rpx;
		margin-top: 25rpx;
	}

	.jz_FlightBottom {
		color: #111111;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.jz_FlightIcon {
		text-align: center;
		position: relative;
		flex-shrink: 0;
	}

	.jz_LineDetail {
		background-color: #ecf1f4;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.jz_LineDetail rich-text {
		font-size: 12px;
		font-weight: normal;
		line-height: 1.8;
		color: #666;
	}

	.line-flex {
		display: flex;
		align-items: center;
	}

	.jz_TopImg {
		width: 100%;
		height: 535rpx;
	}

	.jz_TopImg .top-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;
	}

	.jz_TopImg .media {
		height: 535rpx;
		position: relative;
		z-index: 1;
	}

	.jz_TopImg .media .play-btn {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -49rpx;
		margin-left: -49rpx;
		width: 98rpx;
		height: 98rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.jz_TopImg .media .video-box {
		background-color: #111;
		height: 535rpx;
		position: relative;
	}

	.jz_TopImg .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;
	}

	.jz_TopImg .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;
	}

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

	.jz_TopImg .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;
	}

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

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

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

	.jz_TopPrice {
		width: 100%;
		height: auto;
		background-color: #fff;
		position: relative;
		margin-top: -110rpx;
		border-radius: 60rpx 60rpx 0px 0px;
		padding: 45rpx;
		z-index: 2;
	}

	.jz_LineTitle {
		font-size: 25rpx;
		color: #ff3166;
	}

	.jz_MainTitle {
		color: #111111;
		font-size: 36rpx;
		font-weight: 600;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		margin-top: 10rpx;
	}
	.jz_MainTitleL{
		
	}
	.jz_MainTitleL img{
		max-width: 88rpx;
		max-height: 100rpx;
		display: block;
		position: relative;
		top: 8rpx;
		right: 15rpx;
	}
	.jz_MainTitleR{
		width: 1px;
		flex: 1;
		font-size: 32rpx;
		line-height: 1.5;
	}
	.jz_Maidian {
		color: #999999;
		font-size: 28rpx;
		margin-top: 22rpx;
	}

	.jz_Price {
		font-size: 30rpx;
		color: #ff3166;
	}

	.jz_Price_Title {
		color: #000000;
		margin: 10px 0;
		font-weight: bold;
	}

	.jz_Price_Hui {
		color: #9cf;
		margin-left: 8px;
	}

	.jz_flex {
		display: flex;
		justify-content: space-between;
	}

	.jz_TripDays {
		width: 100%;
		height: auto;
		padding: 45rpx;
		margin-top: 15px;
		background-color: #fff;
	}

	.trip_JZtype {
		display: inline-block;
		padding: 3px 5px;
		border: 1px solid #257bf1;
		margin-right: 10px;
		color: #257bf1;
		font-size: 13px;
		border-radius: 3px;
	}

	.jz_StartList {
		height: 150rpx;
		border-radius: 20rpx;
		text-align: center;
		display: block;
		width: 70px;
		margin-right: 14px;
		flex-shrink: 0;
		white-space: nowrap;
		overflow: hidden;
		background: #ecf1f463;
	}

	.jz_StartList.active {
		border-color: #111;
		background: rgba(0, 0, 0, 0.07);
	}

	.jz_StartList.active .jz_StartTop {
		background-color: #000;
		color: #fff;
	}

	.jz_renmin {
		font-size: 12px;
		font-weight: bold;
	}

	.jz_B2bPrice {
		font-size: 45rpx;
		font-weight: 800;
		font-family: nav-font;
	}

	.jz_Service {
		width: 100%;
		background-color: #fff;
		padding: 30px;
		font-size: 28rpx;
		margin-top: -5px;
	}

	.jz_Serflex {
		display: flex;
	}

	.jz_Stitle {
		color: #999999;
		margin-right: 41rpx;
	}

	.jz_StartTop {
		width: 100%;
		height: 40rpx;
		background-color: #ecf1f4;
		color: #999999;
		text-align: center;
		line-height: 40rpx;
		font-size: 22rpx;
	}

	.jz_Dian {
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #111111;
		margin-right: 23rpx;
		position: relative;
		top: -2px;
	}

	.jz_ZhaiTitle {
		color: #1f1f1f;
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 40rpx;
	}

	.jz_ZhaiInner {
		color: #6e6e6e;
		font-size: 24rpx;
		margin: 22rpx 0 0 30rpx;
	}

	.jz_Zhankai {
		width: 220rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #1f1f1f;
		font-size: 24rpx;
		border-radius: 8rpx;
		border: 1px solid #111111;
		margin: 40rpx auto;
	}

	.jz_TripMain {
		position: relative;
		overflow: hidden;
	}

	.jz_TripTitle {
		width: 100%;
		height: 90rpx;
		border-radius: 20rpx;
		background: linear-gradient(90deg, #000000, rgba(255, 255, 255, 0.05));
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx;
	}

	.jz_TripLeft {
		font-size: 32rpx;
	}

	.jz_TripRight {
		color: #111111;
		font-size: 22rpx;
	}

	.jz_TripLine {
		position: absolute;
		width: 4rpx;
		height: 100%;
		background-color: #111111;
		left: 24rpx;
		top: 90rpx;
	}

	.jz_RightInner {
		margin-left: 50rpx;
	}

	.jz_Place {
		position: relative;
		color: #111111;
		font-size: 28rpx;
		margin: 30rpx 0;
		font-weight: bold;
		display: flex;
	}

	.jz_ComDian {
		width: 18rpx;
		height: 18rpx;
		background-color: #dfbe6e;
		border-radius: 50%;
		position: absolute;
		left: -17.6px;
		top: 4px;
	}

	.jz_ImgDiv {
		width: 612rpx;
		height: 376rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.jz_ImgDiv img {
		width: 100%;
		height: 100%;
	}

	.jz_Rermark {
		color: #999999;
		font-size: 28rpx;
		line-height: 20px;
	}

	.jz_Canyin {
		color: #999999;
		font-size: 28rpx;
		margin-right: 44rpx;
		flex-shrink: 0;
	}

	.jz_CanInner {
		color: #111111;
		font-size: 26rpx;
	}

	.jz_ArrowImg {
		width: 25rpx;
		height: 5rpx;
		margin: 0 5px;
		position: relative;
		top: -3px;
	}

	.jz_Fenzhong {
		color: #999999;
		font-size: 22rpx;
		margin-left: 20rpx;
	}

	.jz_Jinddian {
		margin: 23rpx 0 31rpx 0;
		color: #999999;
		font-size: 28rpx;
		line-height: 20px;
	}

	.jz_StartHoubu {
		color: #111;
		font-size: 20rpx;
		font-weight: 500;
		margin: 10rpx 0;
	}

	.jz_orderbox {
		/* height: 160rpx; */
		/* position: fixed; */
		background-color: #fff;
		/* bottom: 0; */
		/* width: 100vw;
		left: 0; */
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		box-shadow: 0px 0px 30rpx 0px rgba(36, 36, 36, 0.2);
	}

	.jz_OrderDiv {
		width: 90%;
		height: 100rpx;
		background-color: #fff;
		margin: auto;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
		border-radius: 16px;
		z-index: 999;
	}

	.jz_OrderNow {
		width: 190rpx;
		height: 80rpx;
		background-color: #111111;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-weight: 600;
		font-size: 28rpx;
		border-radius: 16rpx;
	}

	.jz_OrderNow.disable {
		background-color: #ecf1f4;
		color: #111;
	}

	.jz_ConButton {
		background-color: #fff;
		height: 40px;
		line-height: 18px;
		margin-top: 3px;
	}

	.jz_ConButton::after {
		border: none !important;
		height: auto !important;
	}

	.jz_Flight {
		display: flex;
		justify-content: space-between;
	}

	.name-ali {
		/*  #ifdef MP-ALIPAY */
		box-sizing: border-box;
		padding-left: 30rpx;
		/* #endif */
	}

	.sharebox {
		position: absolute;
		top: 57px;
		right: 0;
		z-index: 99;
	}

	.is_share {
		width: 125px;
		height: 38px;
		border-top-left-radius: 22.5px;
		border-bottom-left-radius: 22.5px;
		background: #111;
		opacity: 0.8;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 5px;

	}

	.time-line-box {
		display: flex;
		margin-top: 10px
	}

	.time-line-box .left .icon {
		width: 31px;
		height: 31px;
		border-radius: 31px;
		color: #FFF;
		line-height: 31px;
		text-align: center;
		font-size: 28rpx;
	}

	.time-line-box .left {
		margin-right: 20rpx;
		position: relative;
		min-height: 50px;
	}

	.time-line-box .left .icon::after {
		background-color: inherit;
		width: 3px;
		position: absolute;
		top: 33px;
		left: 14px;
		bottom: 0;
		display: block;
		content: ' ';
	}

	.time-line-box .right {
		width: 1px;
		flex: 1;
	}

	.time-line-box .right .subtitle {
		font-size: 12px;
		margin-bottom: 8px;
		opacity: .6;
		text-transform: uppercase;
		letter-spacing: 1px;
		/* font-weight: 700; */
	}

	.time-line-box .right .title {
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0.25px;
		margin-bottom: 16px;
		line-height: inherit;
		font-family: microsoft yahei ui light;
	}

	.time-line-box .right .card {
		background-color: #ecf1f4;
		padding: 10px;
		border-radius: 8px;
	}

	.time-line-box .right .card p {
		margin-bottom: 10px;
	}

	.time-line-box .right .card strong {
		font-weight: normal;
	}

	.time-line-box .right .tag-play {
		display: flex;
		align-items: center;
	}

	.time-line-box .right .tag-play .tag-play-box {
		display: flex;
		align-items: center;
		border-radius: 8rpx !important;
		overflow: hidden;
	}

	.time-line-box .right .tag-play .tag-play-box .remark {
		background-color: #1d1d1d;
		padding: 0px 4px;
		font-size: 12px;
		color: #FFF;
	}

	.time-line-box .right .tag-play .tag-play-box .play-time {
		padding: 0px 4px;
		font-size: 12px;
		background: rgb(240, 189, 134);
		color: #1d1d1d;
	}

	.time-line-box .right .sec-images {
		margin: 10px 0 0 0;
		height: 10vh;
		display: flex;
		align-items: center;
		border-radius: 8px;
		overflow: hidden;
	}

	.time-line-box .right .sec-images image {
		width: 1px;
		flex: 1;
		height: 10vh;
		margin-right: 1px;
	}
	.SaleNameTetx{
		display: flex;
	}
	.SaleNameTetx view{
		margin-right: 15rpx;
	}
	.SaleBox{
		padding: 0 20px;
	}
	.SaleText{
		height: 80rpx;
		line-height: 77rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;
	}
	.jz_LineDetaCZ{
		height: 36rpx;
		background: #FFE5EC;
		border-radius: 0rpx 6rpx 6rpx 8rpx;
	}
	.jz_LineDetaCZL{
		width: 112rpx;
		height: 36rpx;
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732463439143641.png')no-repeat;
		background-size: 100% auto;
	}
	.jz_LineDetaCZR{
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #FF3166;
		line-height: 70rpx;
		padding-right: 10rpx;
		padding-left: 5rpx;
	}
	.jz_LineDetaYJDKQ{
		display: flex;
		padding: 18rpx 0 0 0;
	}
	.jz_LineDetaFL{
		width: 1px;
		flex: 1;
		display: flex;
		align-items: center;
	}
	.jz_LineDetaFLJf{
		padding: 1rpx 8rpx;
		border-radius: 6rpx;
		border: 1rpx solid #FFE5EC;
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #FF3166;
	}
	.jz_LineDetaCZ.jz_LineDetaCZL{
		flex: auto;
	}
	.jz_LineDetaYJ{
		display: flex;
		align-items: center;
		width: 1px;
		flex: 1;
	}
	.jz_LineDetaYJL{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #ACACAC;
		text-decoration: line-through
	}
	.jz_LineDetaYJR{
		font-family: PingFang SC;
		font-size: 28rpx;
		color: #FF3166;
		margin-left: 15rpx;
	}
	.jz_LineDetaRDKQ{
		font-family: PingFang SC;
		font-weight: 100;
		font-size: 24rpx;
		color: #949494;
		display: flex;
		align-items: center;
	}
	.jz_LineDetaRDKQ view{
		font-size: 24rpx;
		color: #949494;
	}
	.jz_LineDetaSC{
		width: 100%;
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732463500511302.png')no-repeat;
		background-size: 100% auto;
		display: flex;
		padding: 5rpx;
		margin-top: 18rpx;
	}
	.jz_LineDetaSCL{
		height: 90rpx;
		background: linear-gradient(90deg, #FE3D49, #FB2E1F);
		border-radius: 16rpx 45rpx 45rpx 16rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 23rpx;
	}
	.jz_LineDetaSCLDl{
		font-family: PingFang SC;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 70rpx;
		margin-right: 10rpx;
	}
	.jz_LineDetaSCLDl view{
		position: relative;
		top: 13rpx;
	}
	.jz_LineDetaSCQM{
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 56rpx;
		color: #FFFFFF;
		line-height: 70rpx;
	}
	.jz_LineDetaSCR{
		color: #fff;
		margin-left: 13rpx;
		padding: 10rpx 0;
		letter-spacing: .1rpx;
	}
	.jz_LineDetaSCRTitle{
		font-family: PingFang SC;
		font-weight: 200;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.jz_LineDetaSCRText{
		font-family: PingFang SC;
		font-weight: 100;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-top: 5rpx;
	}
	.jz_LineDetaQTS{
		display: flex;
		align-items: center;
		padding: 18rpx 0 0 0;
	}
	.jz_LineDetaQTSImg{
		width: 26rpx;
		height: 29rpx;
		display: inline-block;
		margin-right: 6rpx;
	}
	.jz_LineDetaQTSText{
		font-size: 24rpx;
		color: #000;
		font-weight: 800;
		display: flex;
	}
	.jz_LineDetaQTSTextRed{
		color: rgba(255, 49, 102, 1);
	}
	.jz_LineDetaVipPr{
		margin-top: 16rpx;
		position: relative;
		left: -20rpx;
	}
	.jz_LineDetaVip{
		width: 100%;
		height: 120rpx;
		background: linear-gradient(90deg, #3F423F, #313131);
		border-radius: 18rpx;
		display: flex;
		flex-direction: column;
		padding: 15rpx 0 6rpx 0;
		margin-top: 18rpx;
		margin-bottom: 18rpx;
	}
	.jz_LineDetaVipTop{
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #E2C27A;
		letter-spacing: .1rpx;
		display: flex;
		align-content: center;
		padding: 0 34rpx;
	}
	.jz_LineDetaVipTop img{
		width: 21rpx;
		height: 21rpx;
		display: inline-block;
		margin-left: 5rpx;
	}
	.jz_LineDetaVPB{
		display: flex;
		
	}

	.jz_LineDetaVPBBox{
		display: flex;
		align-items: center;
		width: 1px;
		flex: 1;
	}
	.jz_LineDetaVPBN{
		width: 30rpx;
		height: 30rpx;
		background: #2E2E2E;
		border-radius: 50%;
		text-align: center;
		line-height: 28rpx;
		font-family: DIN Black;
		font-weight: bold;
		font-size: 24rpx;
		color:  #494949;;
	}
	.jz_LineDetaVPBLine{
		flex: 1;
		height: 10rpx;
		background: #2E2E2E;
	}
	.jz_LineDetaVPBBoxI{
		position: relative;
		flex: 1;
	}
	.jz_LineDetaVPBBoxI img{
		width: 87rpx;
		height: 99rpx;
		position: absolute;
		bottom: -35rpx;
		right: 20rpx;
		z-index: 2;
	}
	.jz_LineDetaVPBBox.active .jz_LineDetaVPBN{
		background: linear-gradient(270deg, #C99E59, #FFFFB3);
	}
	.jz_LineDetaVPBBox.active .jz_LineDetaVPBLine{
		background: #C99E59;
		color: #583F2C;
	}
	.VPBLRadiusL{
		border-radius: 20rpx 0 0 20rpx ;
	}
	.VPBLRadiusR{
		border-radius: 0 20rpx 20rpx 0;
	}
	.jz_LineDetaVPBY{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}
	.jz_LineTitleL{
		padding: 0 15rpx 3rpx 0;
		background: #000;
		border-radius: 17rpx;
		display: flex;
		margin-right: 20rpx;
	}
	.jz_LineTitleLImg{
		position: relative;
		margin-right: 40rpx;
	}
	.jz_LineTitleLImg img{
		width: 38rpx;
		height: 41rpx;
		position: absolute;
		top: -6rpx;
	}
	.jz_LineTitleLText{
		font-family: PingFang SC;
		font-size: 24rpx;
		color: #E2C27A;
	}
</style>
