<style>
@import "../../assets/css/travel/TravelPreview.css";
</style>
<template>
<div class="detail-box">
<span class="foldList" @click="goBk" style="margin-left: 20px;">返回</span>
<!-- <el-row :gutter="20">
<el-col :span="20" :offset="2">
<el-col :span='14' class="left-team-box" >
<div>
<span class="xilie">{{tempData.Title}}</span>
<span class="code">团队编号：{{tempData.ID}}</span>
</div>
<div class="team-title">
{{tempData.ProductRecommend}}
</div>
<div class="price-box">
<div class="huodong">
<span>早鸟优惠</span>
<span>立减{{tempData.PriceList[0].DiscountPrice}}</span>
</div>
<div>
<span class="red">￥</span>
<span class="red big">{{tempData.PriceList[0].B2CPrice}}</span>
<span>/人起</span>
<span class="tips pointer">
起价说明
</span>
<span class="blue split medium pointer">4.9</span>
<span class="blue pointer">0条点评</span>
<span>500人出游</span>
</div>
</div>
<div class="img-box">
<el-row :gutter="7">
<el-col :span='12'>
<img @click="showImg(tempData.ImgCoverList),initialIndex = 0" v-if="tempData.ImgCoverList&&tempData.ImgCoverList[0]" :src="tempData.ImgCoverList[0].Url" style="height: 259px;width:100%" />
<img @click="showImg(tempData.ImgCoverList)" v-else src="../../assets/img/bg_c2@3x.png" style="height: 259px;width:100%" />
</el-col>
<el-col :span='12'>
<el-col :span='12'>
<img @click="showImg(tempData.ImgCoverList),initialIndex =1" v-if="tempData.ImgCoverList&&tempData.ImgCoverList[1]" :src="tempData.ImgCoverList[1].Url" style="height: 126px;width:100%" />
<img @click="showImg(tempData.ImgCoverList)" v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%" />
<img @click="showImg(tempData.ImgCoverList),initialIndex = 2" v-if="tempData.ImgCoverList&&tempData.ImgCoverList[2]" :src="tempData.ImgCoverList[2].Url" style="height: 126px;width:100%" />
<img @click="showImg(tempData.ImgCoverList)" v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%;margin-top:3px;" />
</el-col>
<el-col :span='12'>
<img @click="showImg(tempData.ImgCoverList),initialIndex = 3" v-if="tempData.ImgCoverList&&tempData.ImgCoverList[3]" :src="tempData.ImgCoverList[3].Url==''?'../../assets/img/bg_c2@3x.png':tempData.ImgCoverList[3].Url" style="height: 126px;width:100%" />
<img @click="showImg(tempData.ImgCoverList)" v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%" />
<div class="last">
<img v-if="tempData.ImgCoverList&&tempData.ImgCoverList[4]" :src="tempData.ImgCoverList[4].Url==''?'../../assets/img/bg_c2@3x.png':tempData.ImgCoverList[4].Url" style="height: 126px;width:100%" />
<img v-else src="../../assets/img/bg_c2@3x.png" style="height: 126px;width:100%;margin-top:3px;" />
<div class="tip" @click="showImg(tempData.ImgCoverList)">
查看全部图片
</div>
</div>
</el-col>
</el-col>
</el-row>
</div>
<div class="recome">
<span class="big left">
<i class='el-icon-star-on'></i>产品推荐
</span>
<span class="big right">
★ 免签，美属海岛，说走就走！
★ 杭州直飞，白班机、晚班机可选。
★ 纯玩半自助，充足自由活动时间，行程您作主！
</span>
</div>
</el-col>
<el-col :span='10'>
<div class="right-team-box">
</div>
</el-col>
</el-col>
</el-row> -->
<!-- <el-row :gutter="10">
<el-col :span="20" :offset="2" class="yuding">
<el-col :span='5'>
<label>出发： </label>
<el-date-picker size="small" type="date" v-model="chosenTime" placeholder="选择出发日期" :picker-options="pickerOptions">
</el-date-picker>
</el-col>
<el-col :span='5'>
<label>成人</label>：
<el-input-number v-model="crn" :min="0" :max="20" size="small"></el-input-number>
</el-col>
<el-col :span='5'>
<el-popover
placement="top-start"
trigger="hover"
ref="popover"
content="儿童价标准：年龄2-12周岁（不含），不占床，服务标准同成人"></el-popover>
<label class="underline" v-popover:popover>儿童</label>：
<el-input-number v-model="etn" :min="0" :max="20" size="small"></el-input-number>
</el-col>
<el-col :span='9' class="right-btn">
<span class="sumPrice">--</span>
<el-button type="danger" @click="oderInfoShowF" size="medium">
开始预订
</el-button>
</el-col>
</el-col>
<el-col :span="20" :offset="2" class="_trip_xiangqing" v-if="oderInfoShow">
<p>联运段</p>
<el-row class="_info_trip">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>产品名称</th>
<th>单价</th>
<th>使用日期</th>
<th>总价</th>
<th>份数</th>
</tr>
<tr>
<td>成功-杭州往返联运</td>
<td>¥899</td>
<td>--</td>
<td>--</td>
<td>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</td>
</tr>
</table>
</el-row>
<p>行程</p>
<el-row class="_info_trip">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>航空公司</th>
<th>航班号</th>
<th>起飞</th>
<th>到达</th>
</tr>
<tr>
<td>中国国际航空</td>
<td>AT546</td>
<td>科伦坡-班达拉奈克机场CMB 2018-10-12 08:26</td>
<td>成都（双流国际机场CTU） 2018-10-12 08:26</td>
</tr>
<tr>
<td>中国国际航空</td>
<td>AT546</td>
<td>科伦坡-班达拉奈克机场CMB 2018-10-12 08:26</td>
<td>成都（双流国际机场CTU） 2018-10-12 08:26</td>
</tr>
</table>
</el-row>
<p>参团旅客</p>
<el-row class="_info_guest">
<el-col :span="6">
<div>
<span>成人，￥6399.00</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<span>老人，￥6399.00</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<span>小孩，￥6399.00</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<span>婴儿，￥6399.00</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
</el-row>
<p>房间</p>
<el-row class="_info_guest">
<el-col :span="6">
<div>
<span>小孩不占床</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<span>单房人数</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<span>大床</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<span>三人间</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
</el-row>
<p>附加信息</p>
<el-row class="_info_guest">
<el-col :span="6">
<div>
<span>联运段机票</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<span>国际段机票</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<span>保险数</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div>
<span>签证数</span>
<el-input
size='mini'
placeholder=""
v-model="input10"
clearable>
</el-input>
</div>
</el-col>
</el-row>
<p>备注</p>
<el-row class="_info_remarks">
<textarea>
</textarea>
</el-row>
<p>费用包含</p>
<ul class="_info_details">
<li>往返经济舱机票燃油附加费（以实际收费标准为准）机场建设费</li>
<li>行程所列酒店住宿费用</li>
<li>酒店标准2人间</li>
<li>行程内所列餐食，具体情况请见行程推荐/安排、飞机餐是否收费请参照航空公司规定。</li>
<li>由于塞班为半自由行，包含出入境协助办理进出海关手续的领队服务，包含境外当地中文导游服务（自由活动期间除外）。</li>
</ul>
<p>自理费用</p>
<ul class="_info_details">
<li>往返经济舱机票燃油附加费（以实际收费标准为准）机场建设费</li>
<li>行程所列酒店住宿费用</li>
<li>酒店标准2人间</li>
<li>行程内所列餐食，具体情况请见行程推荐/安排、飞机餐是否收费请参照航空公司规定。</li>
<li>由于塞班为半自由行，包含出入境协助办理进出海关手续的领队服务，包含境外当地中文导游服务（自由活动期间除外）。</li>
</ul>
<el-row class="_info_cuncost">
<el-col :span="16" class="_info_cunzhe">
<p class="_tit">用幸福存折抵扣团费</p>
<el-select v-model="value">
<el-option
key="1"
label="不使用幸福存折"
value="1">
</el-option>
</el-select>
<p>幸福存折余额：￥ <span class="hgh_font_color_org">0.00</span></p>
</el-col>
<el-col :span="8" class="_info_Cost">
<p>共计 <span class="hgh_font_color_org">6</span> 人 <span class="hgh_font_color_org">256789</span> 元</p>
</el-col>
</el-row>
</el-col>
</el-row> -->
<!-- <div ref="nav">
<el-row>
<el-col :span="20" :offset="2">
<el-col :span="18">
<ul class="top-nav" >
<li :class="crtnav==0?'active':''">
<a href='#tese'>
<i class="iconfont icon-Pointer"></i>
<span>行程特色</span>
</a>
</li>
<li :class="crtnav==1?'active':''">
<a href='#teamacitvy'>
<i class="iconfont icon-List"></i>
{{dayTrip}}日行程
</a>
</li>
<li :class="crtnav==2?'active':''">
<a href='#feiyong'>
<i class="iconfont icon-zifeishuoming"></i>
费用
</a>
</li>
<li :class="crtnav==3?'active':''">
<a href='#gouwu'>
<i class="iconfont icon-jindiananpai"></i>
购物说明
</a>
</li>
<li :class="crtnav==4?'active':''">
<a href='#yuding'>
<i class="iconfont icon-zhongyaotishi"></i>
预订须知
</a>
</li>
<li :class="crtnav==5?'active':''">
<a href='#qianz'>
<i class="iconfont icon-qianzhengshuoming"></i>
签证
</a>
</li>
<li :class="crtnav==6?'active':''">
<a href='#tonghang'>
<i class="iconfont icon-hangchenganpai"></i>
同行备注
</a>
</li>
<li :class="crtnav==7?'active':''">
<i class="iconfont icon-feiyongshuoming"></i>
点评（99+）
</li>
</ul>
</el-col>
<el-col :span="6">
<div class="customer">
<div class="phone">
<i class="iconfont icon-kefuicon"></i>
028-61993600
</div>
<div class="tip">
行程有疑问？懒得填信息？专业客服为您提供咨询服务
</div>
</div>
</el-col>
</el-col>
</el-row>
</div> -->
<el-row>
<el-col :span="20" :offset="2" class="show-box">
<div class="item-title" id='tese'>
<span class="t">行程特色</span>
<span>
<small class="s"></small>
</span>
<span>Trip characteristics</span>
</div>
<div class="nin-box" v-if="showType==2">
<table>
<tbody>
<tr>
<td @click="showImg(feature.featureImgList),initialIndex=index" v-for="(i,index) in feature.featureImgList" :key="index" v-if="index<3" :style="{background:'url(' + i.url + ') no-repeat bottom left/100% auto'}">
</td>
</tr>
<tr>
<td @click="showImg(feature.featureImgList),initialIndex=index" v-for="(i,index) in feature.featureImgList" :key="index" v-if="index>2&&index<6" :style="{background:'url(' + i.url + ') no-repeat bottom left/100% auto'}">
</td>
</tr>
<tr>
<td @click="showImg(feature.featureImgList),initialIndex=index" v-for="(i,index) in feature.featureImgList" :key="index" v-if="index>5&&index<=8" :style="{background:'url(' + i.url + ') no-repeat bottom left/100% auto'}">
</td>
</tr>
</tbody>
</table>
</div>
<div class="slider" v-if="showType==1">
<el-carousel :interval="2000" height='400px' trigger="click" :style="{'background':'#ddd'}">
<el-carousel-item v-for="(i,index) in feature.featureImgList" :key="index">
<img :src="i.url" />
</el-carousel-item>
</el-carousel>
</div>
<div class="zidingyi" v-if="showType==3">
<center v-html="feature.FeatureContent"></center>
</div>
<div class="item-title">
<span class="t">{{dayTrip}}日行程</span>
<span>
<small class="s"></small>
</span>
<span>Scheduling</span>
</div>
<div class="timeline">
<div class="timeline-box"></div>
<div v-for="(item,index) in tempData.DayList" class="z-index">
<div class="timeline-item">
<div class="left">
<span class="big">D{{item.dayNum}}</span>
</div>
<div class="right">
<span class="medium">
<template v-for="(dn,i) in item.dayArray">
<template v-if="dn.Type==1" v-for="(dns,o) in dn.childItem.SubTraffic">
<span>{{dns.StartCityName+'-'+dns.ArrivalCityName}}</span>
</template>
</template>
</span>
</div>
</div>
<template v-for="son in item.dayArray">
<template v-if="son.Type==1">
<div class="timeline-item">
<div class="left">
<i class="iconfont icon-feiji"></i>
</div>
<div class="right">
<span class="time" v-if="son.childItem.TimeType==1">上午</span>
<span class="time" v-if="son.childItem.TimeType==2">下午</span>
<span class="time" v-if="son.childItem.TimeType==0">全天</span>
<span class="title">
<span v-for="(gs,gsi) in son.childItem.SubTraffic">{{gs.startCityName+'-'+gs.arrivalCityName}} <span v-if="gsi!=son.childItem.SubTraffic.length-1">-</span> </span>
</span>
<span class="content" v-html="son.childItem.Description"></span>
</div>
</div>
</template>
<template v-if="son.Type==2">
<div class="timeline-item">
<div class="left">
<i class="iconfont icon-zuji"></i>
</div>
<div class="right">
<span class="time" v-if="son.childItem.TimeType==1">上午</span>
<span class="time" v-if="son.childItem.TimeType==2">下午</span>
<span class="time" v-if="son.childItem.TimeType==0">全天</span>
<span class="title">
{{son.childItem.couponsName}}
</span>
<span class="playTime"> <i class="iconfont icon-shijian"></i> 游玩时间：{{son.childItem.playTimeHour+'小时'+son.childItem.playTimeMinutes+'分钟'}}</span>
<span class="content" v-html="son.childItem.Description"></span>
<div class="img-list" v-if="son.childItem.ImaArray.length">
<div class="item" v-for="img in son.childItem.ImaArray">
<img :src='img.url'/>
</div>
</div>
</div>
</div>
</template>
<template v-if="son.Type==3">
<div class="timeline-item">
<div class="left">
<i class="iconfont icon-jiudian"></i>
</div>
<div class="right">
<span class="time" v-if="son.childItem.TimeType==1">上午</span>
<span class="time" v-if="son.childItem.TimeType==2">下午</span>
<span class="time" v-if="son.childItem.TimeType==0">全天</span>
<span class="title">
{{son.childItem.hotelName+son.childItem.hotelProductName}}
</span>
<span class="content" v-html="son.childItem.Description"></span>
<div class="img-list" v-if="son.childItem.imaArray.length">
<div class="item" v-for="img in son.childItem.imaArray">
<img :src='img.url'/>
</div>
</div>
</div>
</div>
</template>
<template v-if="son.Type==4">
<div class="timeline-item">
<div class="left">
<i class="iconfont icon-yongcan"></i>
</div>
<div class="right">
<span class="time" v-if="son.childItem.TimeType==1">上午</span>
<span class="time" v-if="son.childItem.TimeType==2">下午</span>
<span class="time" v-if="son.childItem.TimeType==0">全天</span>
<span class="title">
{{son.childItem.dinnerName+son.childItem.mealName}}
</span>
<span class="playTime"> <i class="iconfont icon-shijian"></i> 用餐时间：{{son.childItem.useTimeHour+'小时'+son.childItem.useTimeMinutes+'分钟'}}</span>
<span class="content" v-html="son.childItem.Description"></span>
</div>
</div>
</template>
<template v-if="son.Type==5">
<div class="timeline-item">
<div class="left">
<i class="iconfont icon-huodong"></i>
</div>
<div class="right">
<span class="time" v-if="son.childItem.TimeType==1">上午</span>
<span class="time" v-if="son.childItem.TimeType==2">下午</span>
<span class="time" v-if="son.childItem.TimeType==0">全天</span>
<span class="content" v-html="son.childItem.Description"></span>
</div>
</div>
</template>
<template v-if="son.Type==6">
<div class="timeline-item">
<div class="left">
<i class="iconfont icon-tishi"></i>
</div>
<div class="right">
<span class="content" v-html="son.childItem.Description"></span>
</div>
</div>
</template>
<template v-if="son.Type==7">
<div class="timeline-item">
<div class="left">
<i class="iconfont icon-caidan-fill"></i>
</div>
<div class="right">
<span class="content __title" v-html="son.childItem.title"></span>
<span class="content" v-html="son.childItem.Description"></span>
</div>
</div>
</template>
</template>
</div>
</div>
<div class="item-title" id='feiyong'>
<span class="t">费用</span>
<span>
<small class="s"></small>
</span>
<span>Expense</span>
</div>
<div class="expense">
<div class="left">费用包含</div>
<div class="right">
<div v-html="feature.FeeInclude"></div>
</div>
</div>
<div class="expense">
<div class="left">自理费用</div>
<div class="right">
<div v-html="feature.feeNonInclude"></div>
</div>
</div>
<div class="item-title" id='gouwu'>
<span class="t">购物说明</span>
<span>
<small class="s"></small>
</span>
<span>Expense</span>
</div>
<div class="expense">
<div class="left">
</div>
<div class="right">
<div v-html="feature.ShopRemark"></div>
</div>
</div>
<div class="expense">
<div class="left">购物安排</div>
<div class="right">
<table class="expense-table autowidth" cellspacing=0 cellpadding=0>
<thead>
<th>城市</th>
<th>购物店名称</th>
<th>预计停留时间</th>
</thead>
<tbody>
<tr>
<td>东京</td>
<td>LAOX家用电器店</td>
<td>2小时</td>
</tr>
<tr>
<td>大阪</td>
<td>乳胶家居店</td>
<td>1小时</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="item-title" id='yuding'>
<span class="t">预订须知</span>
<span>
<small class="s"></small>
</span>
<span>Tips</span>
</div>
<div class="expense">
<div class="left">重要提示</div>
<div class="right">
<div v-html="feature.ImportantTip"></div>
</div>
</div>
<div class="expense">
<div class="left">温馨提示</div>
<div class="right">
<div v-html="feature.WarmTip"></div>
</div>
</div>
<div class="item-title" id='qianz'>
<span class="t">签证</span>
<span>
<small class="s"></small>
</span>
<span>Visa</span>
</div>
<div class="expense">
<div class="left">签证须知</div>
<div class="right">
<div v-html="feature.VisaRemark"></div>
</div>
</div>
<div class="item-title" id='tonghang'>
<span class="t">同行备注</span>
<span>
<small class="s"></small>
</span>
<span>Remark</span>
</div>
<div class="expense">
<div class="left"></div>
<div class="right">
<div v-html="feature.B2BRemark"></div>
</div>
</div>
</el-col>
</el-row>
<!-- <el-row class="fuben-nav" v-show="changeNav">
<el-col :span="20" :offset="2">
<el-col :span="18">
<ul class="top-nav" >
<li :class="crtnav=='tese'?'active':''">
<a href='#tese'>
<i class="iconfont icon-Pointer"></i>
<span>行程特色</span>
</a>
</li>
<li :class="crtnav=='teamacitvy'?'active':''">
<a href='#teamacitvy'>
<i class="iconfont icon-List"></i>
{{dayTrip}}日行程
</a>
</li>
<li :class="crtnav=='feiyong'?'active':''">
<a href='#feiyong'>
<i class="iconfont icon-zifeishuoming"></i>
费用
</a>
</li>
<li :class="crtnav=='gouwu'?'active':''">
<a href='#gouwu'>
<i class="iconfont icon-jindiananpai"></i>
购物说明
</a>
</li>
<li :class="crtnav=='yuding'?'active':''">
<a href='#yuding'>
<i class="iconfont icon-zhongyaotishi"></i>
预订须知
</a>
</li>
<li :class="crtnav=='qianz'?'active':''">
<a href='#qianz'>
<i class="iconfont icon-qianzhengshuoming"></i>
签证
</a>
</li>
<li :class="crtnav=='tonghang'?'active':''">
<a href='#tonghang'>
<i class="iconfont icon-hangchenganpai"></i>
同行备注
</a>
</li>
<li :class="crtnav==7?'active':''">
<i class="iconfont icon-feiyongshuoming"></i>
点评（99+）
</li>
</ul>
</el-col>
<el-col :span="6">
<div class="customer">
<div class="phone">
<i class="iconfont icon-kefuicon"></i>
028-61993600
</div>
<div class="tip">
行程有疑问？懒得填信息？专业客服为您提供咨询服务
</div>
</div>
</el-col>
</el-col>
</el-row> -->
<div v-if='picIsShow' class="_show_img_box" @click="picIsShow=false,picObj=[]">
<div style="position: absolute; width: 800px; height: 600px; left: 50%; top: 50%; margin-left: -400px; margin-top: -300px;">
<el-carousel :initial-index=initialIndex height="600px" :interval="5000" trigger="click">
<el-carousel-item v-for="(item,index) in picObj" :key="index">
<img :src="item.Url?item.Url:item.url" style="width: 100%; height: 100%;"/>
</el-carousel-item>
</el-carousel>
</div>
</div>
<!-- <div style="height:900px;"></div> -->
</div>
</template>
<script>
export default {
data(){
return{
showType:3,
tempData:{},
dayTrip:1,
initialIndex:0,
picObj:{},
picIsShow:false,
calendarTit:[],
feature:{}
}
},created(){
let id = this.$route.query.configId;
this.initConfig(id);
},methods:{
showImg(obj){
this.picObj= obj;
this.picIsShow= true;
},
goBk(){
this.$router.go(-1);
},
initConfig(configId) {
this.apipost("travel_get_GetOpenTravelInfo",{configId:configId},res => {
if (res.data.resultCode == 1) {
this.tempData = res.data.data;
this.dayTrip = res.data.data.DayNum;
this.feature = res.data.data.Feature;
this.showType = res.data.data.Feature.FeatureType;
} else {
this.isSubmit = true;
this.Error(res.data.message);
}
},err => {this.isSubmit = true;});
}
}
}
</script>