Skip to content

M
million
Commit f0416393 authored by youjie's avatar youjie
Browse files
Options

no message

parent 35cc1e92
Show whitespace changes
Inline Side-by-side
Showing with 1717 additions and 9 deletions
src/assets/trip/block/index.css 0 → 100644
View file @ f0416393
.trip-box{
/* width: 1000px; */
margin: 0 auto;
cursor: default;
}
.trip-block{
max-width: 100%;
padding-bottom: 40px;
padding-top: 40px;
border-bottom: #CCC 1px dotted;
}
.trip-block .trip-title {
min-height: 48px;
font-size: 20px;
/* background: #f3f3f3; */
padding:0 10px;
box-sizing: border-box;
color: #333;
font-family: 'PingFangR';
display: flex;
align-items: center;
}
.trip-block .trip-title .day{
width: 136px;
color: #4d4d4d;
font-size: 33px;
font-weight: normal;
letter-spacing: 3px;
}
.trip-block .trip-title p{
margin: 0;
}
.trip-block .trip-title p:nth-child(2){
color: #525252;
}
.trip-block .trip-title .desc{
color: #4d4d4d;
border-left: 1px solid #333;
padding-left: 25px;
height: 100%;
flex:1;
padding: 10px 10px 10px 20px;
}
.trip-block .trip-title .desc i{
font-size: 22px;
margin: 0 10px;
}
.trip-block .block-item{
margin-top: 20px;
}
.trip-block .block-item .item{
transition: box-shadow 250ms ease-out 0s;
font-size: 15px;
line-height: 1.5em;
color: #444;
background: rgba(23,23,23,.05);
box-sizing: border-box;
/* box-shadow: 0 0 12px rgba(0,0,0,0.1) inset; */
-webkit-transition: box-shadow 250ms ease-out 0s;
-moz-transition: box-shadow 250ms ease-out 0s;
-ms-transition: box-shadow 250ms ease-out 0s;
-o-transition: box-shadow 250ms ease-out 0s;
}
.trip-block .block-item .item:hover{
/* box-shadow: 0 0 12px rgba(0,0,0,0.1) inset; */
}
.trip-block .block-item .item h3{
/* margin: 18px 0; */
font-size: 18px;
font-family: 'PingFangR';
font-weight: 400;
color: #222;
position: relative;
z-index: 2;
}
.trip-block .block-item .item .playInfo{
margin-top: 5px;
margin-left: -5px;
height: 25px;
}
.playInfo .playInfo-item{
color: gray;
font-size: 12px;
margin-right: 20px;
}
.trip-block .block-item .item .playInfo .playInfo-item span{
display: inline;
}
.trip-block .block-item .item .playInfo .playInfo-item .iconfont{
font-size: 16px;
margin-right: 5px;
}
.trip-block .block-item .item h3 .iconfont{
font-size: 20px;
margin: 0 5px;
vertical-align: middle;
}
.trip-block .block-item .item h4{
position: relative;
width: 86px;
color: #EF4455;
font-size: 18px;
line-height: 20px;
margin: 0;
font-weight: 500;
}
.trip-block .block-item .item.big{
/* display: flex;
flex-direction: column; */
padding: 0px !important;
background: transparent;
}
.trip-block .block-item .item.big .left{
flex: 1;
}
.trip-block .block-item .item.big .left img{
width:100%;
height: 100%;
display: block;
}
.trip-block .block-item .item.big .right{
/* border: 1px solid #ccc; */
padding: 22px;
/* box-sizing: border-box; */
}
.trip-block .block-item .item.big .right .details{
display: block;
margin-top: 15px;
font-size: 16px;
line-height: 1.5em;
text-align: justify;
color: #444;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
.details span{
}
.trip-block .block-item .item .remark{
padding-left:15px;
font-size: 15px;
flex: 1;
color: #444;
list-style-position: outside;
list-style-type: decimal;
}
.trip-block .block-item .item .up{
padding: 22px;
margin: -22px;
}
.trip-block .block-item .item .up img{
width: 100%;
height: 100%;
}
.trip-block .block-item .item .down{
/* height: 150px; */
overflow: hidden;
}
.trip-block .block-item .item.hor-box{
display: flex;
padding: 0px;
height: 246px;
overflow: hidden;
}
.trip-block .block-item .item.hor-box .remark{
transition: .4s;
padding: 22px;
overflow: hidden;
height: 173px;
}
.trip-block .block-item .item.hor-box .image{
flex: 1;
height: 100%;
}
.trip-block .block-item .item.hor-box .image img{
width: 100%;
/* height: 100%; */
flex: 1;
}
.trip-block .block-item .item .three-item{
height: 197px;
position: relative;
}
.trip-block .block-item .item .three-item:hover .image{
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
-webkit-transition: .3s;
transition: .3s;
}
.trip-block .block-item .item .three-item .image{
position: absolute;
-webkit-transition: .3s;
top: -40px;
left: -22px;
bottom: -22px;
right: -22px;
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
transition: .3s;
z-index: 0;
}
.trip-block .block-item .item .three-item .image img{
width: 100%;
height: 100%;
}
.trip-block .block-item .item .three-item:hover span {
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
transition: 200ms ease-out;
}
.trip-block .block-item .item .three-item span {
max-height: 151px;
display: inline-block;
overflow: hidden;
}
.trip-block .block-item .item .three-item:hover h3{
color:#f1f1f1;
}
.trip-block .block-item .restaurant{
margin:20px 0;
}
.trip-block .block-item .restaurant .restaurant-item{
display: flex;
}
.trip-block .block-item .restaurant .restaurant-item .key{
width:95px;
}
.trip-block .block-item .restaurant .restaurant-item .key img{
width:80px;
height: 28px;
}
.trip-block .block-item .restaurant .restaurant-item .val{
flex: 1;
font-size: 15px;
min-height: 28px;
color: #666;
line-height: 28px;
cursor: default;
vertical-align: top;
font-family: Roboto, Arial,微軟正黑體修正, 微軟正黑體, "Microsoft JhengHei", sans-serif;
}
.trip-block .flex{
display: flex;
}
.trip-block .block-item .five-box{
display: flex;
margin-bottom: 4px;
}
.trip-block .block-item .five-box .left{
position: relative;
width: 311px;
height: 497px;
overflow: hidden;
margin-right: 4px;
}
.trip-block .block-item .five-box .left .item{
height: 497px;
overflow: hidden;
}
.trip-block .block-item .five-box .left .image img{
width: 100%;
height: 100%;
}
.trip-block .block-item .five-box .left .item{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: transparent;
color: #f1f1f1;
}
.trip-block .block-item .five-box .left .item span{
opacity: 0;
transition: 0.3s;
}
.trip-block .block-item .five-box .left:hover .item{
transition: 0.3s;
background: rgba(0,0,0,0.2);
}
.trip-block .block-item .five-box .left:hover .item span{
opacity: 1;
transition: 0.3s;
color: #f1f1f1;
}
.trip-block .block-item .five-box .left .item h3{
color: #f1f1f1;
background: rgba(0,0,0,0.1)
}
.trip-block .block-item .five-box .right{
flex: 1;
height: 498px;
overflow: hidden;
}
.trip-block .block-item .five-box .right .item{
height: 247px;
overflow: hidden;
}
.trip-block .block-item .five-box .right .item .three-item{
height: 100%;
}
.trip-block .block-item .five-box .right .item .three-item span{
/* height: 137px;
overflow: hidden;
display: inline-block; */
}
.trip-block .block-item .item p{
margin: 0px !important;
padding: 0px !important;
}
.text-bold{
margin: 0;
font-size: 21px;
font-weight: bold;
letter-spacing: 1px;
line-height: 25px;
word-break: break-all;
word-wrap: break-word;
}
\ No newline at end of file
src/components/trip/block/fiveday.vue 0 → 100644
View file @ f0416393
<template>
<div class="block-item">
555555
<div class="two-block">
<div class="row wrap">
<template v-for="(item,index) in day.details">
<div v-if="index==0" class="item col-12 row" :key="item.dayNum" style="background: #F6F6F6;">
<div class="up"
:class="{'col-7':day.details.length>1&&index==0,}" :style="{'height':index==1?'265px':''}">
<template v-if="item.fileType&&item.fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="item.videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img :src='item.img' :ratio="1" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="q-pa-lg row items-end" :class="{'col':index==0}" style="border:1px solid #ccc;" :style="{'left':index==0?'0':'1px solid #ccc'}">
<div>
<div v-if="item.title!=''" class="text-h6 text-bold" v-html="item.title" @click.stop="goUrl(item.url)"
style="cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='item.ticketName!=""'>
</span>
<span class="playInfo-item" v-if='item.playTimeHour || item.playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="item.playTimeHour">{{item.playTimeHour}}小时 </span>
<span v-if="item.playTimeMinutes">{{item.playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="item.content"></span>
</div>
</div>
</div>
</template>
<div v-if="day.details.length>2" class="item row justify-between no-wrap q-mt-sm"
:class="{'col-8':day.details.length>4,'col-12':day.details.length<5}" style="background: #F6F6F6;">
<div
:class="{'col-6':day.details.length>3,'col':day.details.length==3}">
<div class="up" style="height: 265px;">
<template v-if="day.details[2].fileType&&day.details[2].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[2].videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img :src='day.details[2].img' :ratio="1/1" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="q-pb-lg" style="border:1px solid #ccc;top:0">
<div class="down q-pa-lg">
<div v-if="day.details[2].title!=''" class="text-h6 text-bold" v-html="day.details[2].title" @click.stop="goUrl(day.details[2].url)"
style="cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='day.details[2].ticketName!=""'>
</span>
<span class="playInfo-item" v-if='day.details[2].playTimeHour || day.details[2].playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[2].playTimeHour">{{day.details[2].playTimeHour}}小时 </span>
<span v-if="day.details[2].playTimeMinutes">{{day.details[2].playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="day.details[2].content"></span>
</div>
</div>
</div>
<div v-if="day.details[3]" class="col q-ml-sm">
<div class="up" style="height: 265px;">
<template v-if="day.details[3].fileType&&day.details[3].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[3].videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img :src='day.details[3].img' :ratio="1/1" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="q-pb-lg" style="border:1px solid #ccc;top:0">
<div class="down q-ma-lg">
<div v-if="day.details[3].title!=''" class="text-h6 text-bold" v-html="day.details[3].title" @click.stop="goUrl(day.details[3].url)"
style="cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='day.details[3].ticketName!=""'>
</span>
<span class="playInfo-item" v-if='day.details[3].playTimeHour || day.details[3].playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[3].playTimeHour">{{day.details[3].playTimeHour}}小时 </span>
<span v-if="day.details[3].playTimeMinutes">{{day.details[3].playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="day.details[3].content"></span>
</div>
</div>
</div>
</div>
<template v-for="(item,index) in day.details">
<div v-if="index==4" class="col item q-ml-sm q-mt-sm" :key="item.dayNum" style="background: #F6F6F6;">
<div class="up" style="height: 265px;">
<template v-if="item.fileType&&item.fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="item.videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img :src='item.img' :ratio="1/1" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="q-pb-lg" style="border:1px solid #ccc;top:0">
<div class="down q-ma-lg">
<div v-if="item.title!=''" class="text-h6 text-bold" v-html="item.title" @click.stop="goUrl(item.url)"
style="cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='item.ticketName!=""'>
</span>
<span class="playInfo-item" v-if='item.playTimeHour || item.playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="item.playTimeHour">{{item.playTimeHour}}小时 </span>
<span v-if="item.playTimeMinutes">{{item.playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="item.content"></span>
</div>
</div>
</div>
</template>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if='day.tips.length>0'>
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div class="restaurant row justify-between wrap">
<div class="restaurant-item">
<div class="key">
<img src='../../../assets/img/daily_breakfast.png' />
</div>
<div class="val">{{day.can.breakfirst}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_lunch.png' />
</div>
<div class="val">{{day.can.lanuch}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_dinner.png' />
</div>
<div class="val">{{day.can.dinner}}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24">
<div class="key">
<img src='../../../assets/img/daily_hotel-1.png' />
</div>
<div class="val" v-if='day.jiu2.length>0'>
<span v-for="(t,k) in day.jiu2" @click.stop="goUrl(t.url)" style="cursor: pointer" :key="k">
{{k==day.jiu2.length-1?t.name:t.name+' / '}}
</span>
{{getHotelSuffix()}}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
day: {},
isDirect: {}
},
methods: {
getHotelSuffix() {
let suffix = "";
if (this.day.jiu2.length > 1) {
if (this.isDirect === 1) {
suffix = "或同級"
}
} else {
if (this.day.jiu2.length == 1 && this.day.jiu2[0].name != '温馨的家' && this.day.jiu2[0].name !=
'机场附近酒店') {
if (this.day.jiu2[0].status == 1) {
suffix = "【保证入住】"
} else {
if (this.isDirect === 1) {
suffix = "或同級"
}
}
}
}
return suffix;
},
goUrl(url) {
if (url != null && url.length > 0) {
window.open(url, "_blank");
}
}
}
}
</script>
\ No newline at end of file
src/components/trip/block/fourday.vue 0 → 100644
View file @ f0416393
<template>
<div class="block-item">
<div class="one-block">
<div class="item big row">
<div class="row no-wrap col-8">
<div class="col-7">
<template v-if="day.details[0].fileType&&day.details[0].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[0].videoPath" controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="day.details[0].img" :src='day.details[0].img' :ratio="12/4" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="right col" style="border: 1px solid #ccc;border-left: 0;">
<div class="details">
<div v-if="day.details[0].title!=''" class="text-h6 text-bold" v-html="day.details[0].title" @click.stop="goUrl(day.details[0].url)"
style="cursor: pointer;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='day.details[0].ticketName!=""'>
<!--<i class="iconfont icon-menpiao"></i>-->
<!--{{day.details[0].ticketName}}-->
</span>
<span class="playInfo-item" v-if='day.details[0].playTimeHour || day.details[0].playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[0].playTimeHour">{{day.details[0].playTimeHour}}小时 </span>
<span v-if="day.details[0].playTimeMinutes">{{day.details[0].playTimeMinutes}}分钟</span>
</span>
</div>
<span v-html="day.details[0].content"></span>
</div>
</div>
</div>
<div class="col q-pl-sm" v-if="day.details[1]">
<div class="left big">
<template v-if="day.details[1].fileType&&day.details[1].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[0].videoPath" controls="controls">
</video>
</template>
<template v-else>
<img :src='day.details[1].img' />
</template>
</div>
<div class="right" style="border: 1px solid #ccc;border-top: 0;">
<div class="details">
<div v-if="day.details[1].title!=''" class="text-h6 text-bold" v-html="day.details[1].title" @click.stop="goUrl(day.details[1].url)"
style="cursor: pointer;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='day.details[1].ticketName!=""'>
<!--<i class="iconfont icon-menpiao"></i>-->
<!--{{day.details[1].ticketName}}-->
</span>
<span class="playInfo-item" v-if='day.details[1].playTimeHour || day.details[1].playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[1].playTimeHour">{{day.details[1].playTimeHour}}小时 </span>
<span v-if="day.details[1].playTimeMinutes">{{day.details[1].playTimeMinutes}}分钟</span>
</span>
</div>
<span v-html="day.details[1].content"></span>
</div>
</div>
</div>
<div v-if="day.details.length>2" class="col-12 item row justify-between no-wrap q-mt-sm" style="background: #F6F6F6;">
<div class="col-8"
style="border:1px solid #ccc;">
<div class="up" style="height: 265px;">
<template v-if="day.details[2].fileType&&day.details[2].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[2].videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="day.details[2].img" :src='day.details[2].img' :ratio="12/4" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="down q-ma-lg">
<div v-if="day.details[2].title!=''" class="text-h6 text-bold" v-html="day.details[2].title" @click.stop="goUrl(day.details[2].url)"
style="cursor: pointer;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='day.details[2].ticketName!=""'>
</span>
<span class="playInfo-item" v-if='day.details[2].playTimeHour || day.details[2].playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[2].playTimeHour">{{day.details[2].playTimeHour}}小时 </span>
<span v-if="day.details[2].playTimeMinutes">{{day.details[2].playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="day.details[2].content"></span>
</div>
</div>
<div class="col q-ml-sm"
style="border:1px solid #ccc;">
<div class="up" style="height: 265px;">
<template v-if="day.details[3].fileType&&day.details[3].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[3].videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="day.details[3].img" :src='day.details[3].img' :ratio="12/4" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="down q-ma-lg">
<div v-if="day.details[3].title!=''" class="text-h6 text-bold" v-html="day.details[3].title" @click.stop="goUrl(day.details[3].url)"
style="cursor: pointer;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='day.details[3].ticketName!=""'>
</span>
<span class="playInfo-item" v-if='day.details[3].playTimeHour || day.details[3].playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[3].playTimeHour">{{day.details[3].playTimeHour}}小时 </span>
<span v-if="day.details[3].playTimeMinutes">{{day.details[3].playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="day.details[3].content"></span>
</div>
</div>
</div>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if='day.tips.length>0'>
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div class="restaurant row justify-between wrap">
<div class="restaurant-item">
<div class="key">
<img src='../../../assets/img/daily_breakfast.png' />
</div>
<div class="val">{{day.can.breakfirst}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_lunch.png' />
</div>
<div class="val">{{day.can.lanuch}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_dinner.png' />
</div>
<div class="val">{{day.can.dinner}}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24">
<div class="key">
<img src='../../../assets/img/daily_hotel-1.png' />
</div>
<div class="val" v-if='day.jiu2.length>0'>
<span v-for="(t,k) in day.jiu2" @click.stop="goUrl(t.url)" style="cursor: pointer" :key="k">
{{k==day.jiu2.length-1?t.name:t.name+' / '}}
</span>
{{getHotelSuffix()}}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
day:{},
isDirect:{}
},
methods:{
getHotelSuffix(){
let suffix = "";
if (this.day.jiu2.length > 1) {
if (this.isDirect === 1) {
suffix = "或同級"
}
} else {
if (this.day.jiu2.length == 1 && this.day.jiu2[0].name != '温馨的家' && this.day.jiu2[0].name !=
'机场附近酒店') {
if (this.day.jiu2[0].status == 1) {
suffix = "【保证入住】"
} else {
if (this.isDirect === 1) {
suffix = "或同級"
}
}
}
}
return suffix;
},
goUrl(url) {
if(url!=null&&url.length>0){
window.open(url, "_blank");
}
}
}
}
</script>
src/components/trip/block/index.vue 0 → 100644
View file @ f0416393
<style scoped>
@import url('../../../assets/trip/block/index.css');
</style>
<template>
<div class="trip-box">
<div class="trip-block" v-for="(item,i) in trips" :key="i">
<div class="trip-title" :id="`days_${i}`">
<div>
<p class="day">第<span v-if='item.dayNum<10'>0</span>{{item.dayNum}}天</p>
<!-- <p>{{item.dateTime}}</p> -->
</div>
<div class="desc" v-html="item.title"></div>
</div>
<oneday v-if="item.details && item.details.length==1" :day='item' :isDirect="isDirect"></oneday>
<twoday v-if="item.details && item.details.length==2" :day='item' :isDirect="isDirect"></twoday>
<threeday v-if="item.details && item.details.length==3" :day='item' :isDirect="isDirect"></threeday>
<fourday v-if="item.details && item.details.length==4" :day='item' :isDirect="isDirect"></fourday>
<fiveday v-if="item.details && item.details.length>=5" :day='item' :isDirect="isDirect"></fiveday>
</div>
</div>
</template>
<script>
import oneday from './oneday'
import twoday from './twoday'
import threeday from './threeday'
import fourday from './fourday'
import fiveday from './fiveday'
export default {
props: ['tripList', 'isDirect', 'clickDate','days','currentHeightDay'],
components: {
oneday,
twoday,
threeday,
fourday,
fiveday
},
watch: {
days: {
handler: function (val, oldval) {
if (val) {
this.daysClass = val
let that = this
this.$nextTick(()=>{
try{
this.daysClass.forEach((x,i)=>{
var object=document.getElementById(`days_${i}`);
x.top = object.getBoundingClientRect().top - 100
})
} catch (error) {
console.log('----异常')
}
setTimeout(()=>{
this.$emit('getTopNum',JSON.stringify(this.daysClass))
},1000)
})
this.$forceUpdate()
}
},
// immediate: true,
deep: true //对象内部的属性监听，也叫深度监听
},
clickDate: {
handler: function (val, oldval) {
if (val) {
this.trips.forEach((x, index) => {
x.dateTime = this.setDate(index);
})
this.$forceUpdate()
}
},
deep: true //对象内部的属性监听，也叫深度监听
},
},
mounted() {
this.init()
},
data() {
return {
isReady: false,
trips: [],
daysClass: []
}
},
methods: {
init() {
this.tripList.forEach((x, j) => {
let useDinnerTypeBy = ''
let jin = [],
jiu = [],
jiu2 = [],
jiao = [],
dadian = [],
tips = [],
activy = [],
can = {
breakfirst: '敬请自理',
lanuch: '敬请自理',
dinner: '敬请自理'
}
x.dayArray.forEach((y, index) => {
if (y.type == 7 && y.childItem.title != '') {
let obj = {
title: y.childItem.title,
content: y.childItem.description,
img: y.childItem.imaArray && y.childItem.imaArray.length > 0 ? y
.childItem.imaArray[0].url : '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null,
url: ''
}
dadian.push(obj)
} else if (y.type == 1 && y.childItem.subTraffic.length > 0) {
let title = ''
y.childItem.subTraffic.forEach((z, i) => {
title += z.startCityName
if (z.arrivalType == 1) {
title += '<i class="iconfont icon-feiji"></i>'
} else if (z.arrivalType == 2) {
title += '<i class="iconfont icon-bus"></i>'
} else if (z.arrivalType == 3) {
title += '<i class="iconfont icon-icon31"></i>'
} else {
title += '<i class="iconfont icon-gaotiedongche"></i>'
}
if (i + 1 == y.childItem.subTraffic.length) {
title += z.arrivalCityName
}
})
let obj = {
title: title,
content: y.childItem.description,
img: '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null,
url: ''
}
jiao.push(obj)
} else if (y.type == 2 && y.childItem.imaArray.length > 0) {
let obj = {
title: y.childItem.couponsName,
content: y.childItem.description,
img: y.childItem.imaArray[0].url,
ticketName: y.childItem.couponsTicketName,
playTimeHour: y.childItem.playTimeHour,
playTimeMinutes: y.childItem.playTimeMinutes,
url: y.childItem.url,
scenicJson: y.childItem.scenicJson,
videoPath: y.childItem.imaArray[0].videoPath,
fileType: y.childItem.imaArray[0].fileType,
}
jin.push(obj)
} else if (y.type == 3 && y.childItem.hotelName != '' && y.childItem.imaArray
.length > 0) {
let obj = {
title: y.childItem.hotelName,
content: y.childItem.description,
img: y.childItem.imaArray[0].url,
ticketName: '',
playTimeHour: null,
playTimeMinutes: null,
url: y.childItem.url
}
jiu.push(obj)
} else if (y.type == 4) {
if (y.childItem.useDinnerType == "1") {
can.breakfirst = y.childItem.dinnerName
} else if (y.childItem.useDinnerType == "2") {
can.lanuch = y.childItem.dinnerName
} else if (y.childItem.useDinnerType == "3") {
can.dinner = y.childItem.dinnerName
}
} else if (y.type == 5) {
let obj = {
title: '自由活动',
content: y.childItem.description,
img: '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null,
url: ''
}
activy.push(obj)
} else if (y.type == 6) {
let obj = {
title: y.childItem.title,
content: y.childItem.description,
img: '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null,
url: ''
}
tips.push(obj)
}
if (y.type == 3) {
jiu2.push({
name: y.childItem.hotelName,
url: y.childItem.url,
status:y.childItem.status
});
useDinnerTypeBy = y.childItem.useDinnerType
}
})
if (can.breakfirst == '敬请自理' && useDinnerTypeBy.indexOf('1') != -1) {
can.breakfirst = '酒店内享用早餐'
} else if (can.breakfirst == '') {
can.breakfirst = '方便游玩敬请自理'
}
if (can.lanuch == '敬请自理' && useDinnerTypeBy.indexOf('2') != -1) {
can.lanuch = '酒店自助'
} else if (can.lanuch == '') {
can.lanuch = '方便游玩敬请自理'
}
if (can.dinner == '敬请自理' && useDinnerTypeBy.indexOf('3') != -1) {
can.dinner = '酒店自助'
} else if (can.dinner == '') {
can.dinner = '方便游玩敬请自理'
}
x.can = can
let details = [];
x.tips = tips
x.jiu2 = jiu2
if (jin.length > 0) {
details = jin
} else if (jiu.length > 0) {
details = jiu
} else if (dadian.length > 0) {
details = dadian
} else if (jiao.length > 0) {
if (j == this.tripList.length - 1) {
let obj = {
title: '温暖的家',
content: '感谢您参加本次行程，期待下次与您相遇',
img: ''
}
details.push(obj)
} else {
details = jiao
}
} else if (activy.length > 0) {
details = activy
}
x.title = dadian.length > 0 && dadian[0].title && dadian[0].title != '' ? dadian[0].title :
(jiao.length > 0 ? jiao[0].title : '集合出发')
x.details = details
if (x.details.length == 0) {
if (j == 0) {
let obj = {
title: '集合出发',
content: '向着远方的目标出发起飞',
img: '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null
}
details.push(obj)
} else if (j == this.tripList.length - 1) {
let obj = {
title: '温暖的家',
content: '感谢您参加本次行程，期待下次与您相遇',
img: '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null
}
details.push(obj)
}
} else {
if (x.title == '集合出发') {
x.details.forEach(xc => {
if (xc.title !== undefined)
x.title = xc.title + '~'
})
if (x.title == '集合出发') {
if (j > 0 && j < tripList.length - 1)
x.title = '自由活动'
} else {
x.title = x.title.substring(0, x.title.length - 1)
}
}
}
x.islast = (j + 1) == this.tripList.length
this.$set(this.tripList, j, x)
x.dateTime = this.setDate(j);
})
this.tripList.forEach(x=>{
x.dayArray.forEach(y=>{
// console.log(x.details,'----------')
})
})
this.trips = this.tripList
},
setDate: function (j) {
if (j === 0) {
return this.clickDate
} else {
let d = new Date(this.clickDate)
d = d.getTime(d);
let add = d + ((24 * 60 * 60 * 1000) * j)
let date = new Date(add); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
let Y = date.getFullYear() + '-';
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
let D = date.getDate() < 10 ? ('0' + date.getDate()) + ' ' : date.getDate() + ' ';
return Y + M + D;
}
},
}
}
</script>
\ No newline at end of file
src/components/trip/block/oneday.vue 0 → 100644
View file @ f0416393
<template>
<div class="block-item">
<div class="one-block">
<div class="item big row">
<div class="row no-wrap" :class="{'col-8':day.details.length>1,'col':day.details.length==1}">
<div class="col-7">
<template v-if="day.details[0].fileType&&day.details[0].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[0].videoPath" controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="day.details[0].img" :src='day.details[0].img' :ratio="12/4" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="right col" style="border: 1px solid #ccc;border-left: 0;">
<div class="details">
<div v-if="day.details[0].title!=''" class="text-h6 text-bold" v-html="day.details[0].title" @click.stop="goUrl(day.details[0].url)"
style="cursor: pointer;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='day.details[0].ticketName!=""'>
</span>
<span class="playInfo-item" v-if='day.details[0].playTimeHour || day.details[0].playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[0].playTimeHour">{{day.details[0].playTimeHour}}小时 </span>
<span v-if="day.details[0].playTimeMinutes">{{day.details[0].playTimeMinutes}}分钟</span>
</span>
</div>
<span v-html="day.details[0].content"></span>
</div>
</div>
</div>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if='day.tips.length>0'>
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div class="restaurant row justify-between wrap">
<div class="restaurant-item">
<div class="key">
<img src='../../../assets/img/daily_breakfast.png' />
</div>
<div class="val">{{day.can.breakfirst}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_lunch.png' />
</div>
<div class="val">{{day.can.lanuch}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_dinner.png' />
</div>
<div class="val">{{day.can.dinner}}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24">
<div class="key">
<img src='../../../assets/img/daily_hotel-1.png' />
</div>
<div class="val" v-if='day.jiu2.length>0'>
<span v-for="(t,k) in day.jiu2" @click.stop="goUrl(t.url)" style="cursor: pointer" :key="k">
{{k==day.jiu2.length-1?t.name:t.name+' / '}}
</span>
{{getHotelSuffix()}}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
day:{},
isDirect:{}
},
mounted() {
console.log(this.day,'----')
},
methods:{
getHotelSuffix(){
let suffix = "";
if (this.day.jiu2.length > 1) {
if (this.isDirect === 1) {
suffix = "或同級"
}
} else {
if (this.day.jiu2.length == 1 && this.day.jiu2[0].name != '温馨的家' && this.day.jiu2[0].name !=
'机场附近酒店') {
if (this.day.jiu2[0].status == 1) {
suffix = "【保证入住】"
} else {
if (this.isDirect === 1) {
suffix = "或同級"
}
}
}
}
return suffix;
},
goUrl(url) {
if(url!=null&&url.length>0){
window.open(url, "_blank");
}
}
}
}
</script>
src/components/trip/block/threeday.vue 0 → 100644
View file @ f0416393
<template>
<div class="block-item">
<div class="two-block">
<div class="column">
<div class="itemcol row no-wrap" style="background: #F6F6F6;">
<div class="up col-8">
<template v-if="day.details[0].fileType&&day.details[0].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="item.videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="day.details[0].img" :src='day.details[0].img' :ratio="12/4" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="row items-end" style="border:1px solid #ccc;left: 0;">
<div class="q-pb-lg">
<div class="down q-pa-lg col">
<div v-if="day.details[0].title!=''" class="text-h6 text-bold" v-html="day.details[0].title" @click.stop="goUrl(day.details[0].url)"
style="cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='day.details[0].ticketName!=""'>
</span>
<span class="playInfo-item" v-if='day.details[0].playTimeHour || day.details[0].playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[0].playTimeHour">{{day.details[0].playTimeHour}}小时 </span>
<span v-if="day.details[0].playTimeMinutes">{{day.details[0].playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="day.details[0].content"></span>
</div>
</div>
</div>
</div>
<div class="item q-mt-sm col row no-wrap" style="background: #F6F6F6;">
<div class="up row">
<div class="col" style="border:1px solid #ccc;right: 0;">
<div class="down q-pa-lg col">
<div v-if="day.details[1].title!=''" class="text-h6 text-bold" v-html="day.details[1].title" @click.stop="goUrl(day.details[1].url)"
style="cursor: pointer;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='day.details[1].ticketName!=""'>
</span>
<span class="playInfo-item" v-if='day.details[1].playTimeHour || day.details[1].playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[1].playTimeHour">{{day.details[1].playTimeHour}}小时 </span>
<span v-if="day.details[1].playTimeMinutes">{{day.details[1].playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="day.details[1].content"></span>
</div>
</div>
<div class="col-8">
<template v-if="day.details[1].fileType&&day.details[1].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[1].videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="day.details[1].img" :src='day.details[1].img' :ratio="12/4" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
</div>
</div>
<div class="item col row no-wrap q-mt-sm " style="background: #F6F6F6;">
<div class="up col-8">
<template v-if="day.details[2].fileType&&day.details[2].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[2].videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="day.details[2].img" :src='day.details[2].img' :ratio="12/4" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="row items-end" style="border:1px solid #ccc;left: 0;">
<div class="q-pb-lg">
<div class="down q-pa-lg col">
<div v-if="day.details[2].title!=''" class="text-h6 text-bold" v-html="day.details[2].title" @click.stop="goUrl(day.details[2].url)"
style="cursor: pointer;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='day.details[2].ticketName!=""'>
</span>
<span class="playInfo-item" v-if='day.details[2].playTimeHour || day.details[2].playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[2].playTimeHour">{{day.details[0].playTimeHour}}小时 </span>
<span v-if="day.details[2].playTimeMinutes">{{day.details[0].playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="day.details[2].content"></span>
</div>
</div>
</div>
</div>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if='day.tips.length>0'>
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div class="restaurant row justify-between wrap">
<div class="restaurant-item">
<div class="key">
<img src='../../../assets/img/daily_breakfast.png' />
</div>
<div class="val">{{day.can.breakfirst}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_lunch.png' />
</div>
<div class="val">{{day.can.lanuch}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_dinner.png' />
</div>
<div class="val">{{day.can.dinner}}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24">
<div class="key">
<img src='../../../assets/img/daily_hotel-1.png' />
</div>
<div class="val" v-if='day.jiu2.length>0'>
<span v-for="(t,k) in day.jiu2" @click.stop="goUrl(t.url)" style="cursor: pointer" :key="k">
{{k==day.jiu2.length-1?t.name:t.name+' / '}}
</span>
{{getHotelSuffix()}}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
day: {},
isDirect: {}
},
methods: {
getHotelSuffix() {
let suffix = "";
if (this.day.jiu2.length > 1) {
if (this.isDirect === 1) {
suffix = "或同級"
}
} else {
if (this.day.jiu2.length == 1 && this.day.jiu2[0].name != '温馨的家' && this.day.jiu2[0].name !=
'机场附近酒店') {
if (this.day.jiu2[0].status == 1) {
suffix = "【保证入住】"
} else {
if (this.isDirect === 1) {
suffix = "或同級"
}
}
}
}
return suffix;
},
goUrl(url) {
if (url != null && url.length > 0) {
window.open(url, "_blank");
}
}
}
}
</script>
\ No newline at end of file
src/components/trip/block/twoday.vue 0 → 100644
View file @ f0416393
<template>
<div class="block-item">
<div class="two-block">
<div class="column">
<template v-for="(item,index) in day.details">
<div v-if="index<1" class="item" :key="item.dayNum"
:class="{'col':index==0,
'row no-wrap':index==0,'q-ml-sm':index==1}" style="background: #F6F6F6;">
<div class="up"
:class="{'col-8':day.details.length>1&&index==0,}" :style="{'height':index==1?'265px':''}">
<template v-if="item.fileType&&item.fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="item.videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="item.img" :src='item.img' :ratio="1" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="row items-end" style="border:1px solid #ccc;left: 0;">
<div class="q-pb-lg">
<div class="down q-pa-lg" :class="{'col':index==0}">
<div v-if="item.title!=''" class="text-h6 text-bold" v-html="item.title" @click.stop="goUrl(item.url)"
style="cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='item.ticketName!=""'>
</span>
<span class="playInfo-item" v-if='item.playTimeHour || item.playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="item.playTimeHour">{{item.playTimeHour}}小时 </span>
<span v-if="item.playTimeMinutes">{{item.playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="item.content"></span>
</div>
</div>
</div>
</div>
</template>
<template v-for="(item,index) in day.details">
<div v-if="index==1" class="item up q-mt-sm row no-wrap col" :key="item.dayNum" style="background: #F6F6F6;">
<div class="col" style="border:1px solid #ccc;right: 0;">
<div class="down q-pa-lg" :class="{'col':index==0}">
<div v-if="item.title!=''" class="text-h6 text-bold" v-html="item.title" @click.stop="goUrl(item.url)"
style="cursor: pointer;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='item.ticketName!=""'>
</span>
<span class="playInfo-item" v-if='item.playTimeHour || item.playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="item.playTimeHour">{{item.playTimeHour}}小时 </span>
<span v-if="item.playTimeMinutes">{{item.playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="item.content"></span>
</div>
</div>
<div class="col-8">
<template v-if="item.fileType&&item.fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="item.videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="item.img" :src='item.img' :ratio="12/4" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
</div>
</template>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if='day.tips.length>0'>
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div class="restaurant row justify-between wrap">
<div class="restaurant-item">
<div class="key">
<img src='../../../assets/img/daily_breakfast.png' />
</div>
<div class="val">{{day.can.breakfirst}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_lunch.png' />
</div>
<div class="val">{{day.can.lanuch}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_dinner.png' />
</div>
<div class="val">{{day.can.dinner}}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24">
<div class="key">
<img src='../../../assets/img/daily_hotel-1.png' />
</div>
<div class="val" v-if='day.jiu2.length>0'>
<span v-for="(t,k) in day.jiu2" @click.stop="goUrl(t.url)" style="cursor: pointer" :key="k">
{{k==day.jiu2.length-1?t.name:t.name+' / '}}
</span>
{{getHotelSuffix()}}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
day: {},
isDirect: {}
},
mounted() {
console.log(this.day,'--------')
},
methods: {
getHotelSuffix() {
let suffix = "";
if (this.day.jiu2.length > 1) {
if (this.isDirect === 1) {
suffix = "或同級"
}
} else {
if (this.day.jiu2.length == 1 && this.day.jiu2[0].name != '温馨的家' && this.day.jiu2[0].name !=
'机场附近酒店') {
if (this.day.jiu2[0].status == 1) {
suffix = "【保证入住】"
} else {
if (this.isDirect === 1) {
suffix = "或同級"
}
}
}
}
return suffix;
},
goUrl(url) {
if (url != null && url.length > 0) {
window.open(url, "_blank");
}
}
}
}
</script>
\ No newline at end of file
src/components/trip/smaple.vue
View file @ f0416393
......@@ -90,11 +90,11 @@ export default {
},
formatTraffic() {
let z = this.trip.trafficList[0].subTraffic[0]
if (z.arrivalType == 1) {
if (z&&z.arrivalType&&z.arrivalType == 1) {
this.traffic = '飛機往返';
} else if (z.arrivalType == 2) {
} else if (z&&z.arrivalType&&z.arrivalType == 2) {
this.traffic = '巴士往返';
} else if (z.arrivalType == 3) {
} else if (z&&z.arrivalType&&z.arrivalType == 3) {
this.traffic = '郵輪往返';
} else {
this.traffic = '高鐵往返';
......
src/pages/detailsNew.vue
View file @ f0416393
......@@ -70,7 +70,7 @@
</q-breadcrumbs>
<div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div>
</div>
<div style="padding-bottom:calc((100% - 0px)/3;position:relative;">
<div style="padding-bottom:calc((100% - 0px)/3);position:relative;">
<div
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
class="overflow-hidden rounded-borders"
......@@ -291,12 +291,31 @@
</div>
</div>
</div>
<div
v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto"
class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220 }"
>
<div class="col q-ml-xl position-relative" v-if="dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top">
<div style="position: sticky; top: 100px">
<div
class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
v-for="(x, i) in days"
:key="i"
@click="goScrollHandler(x.top + 20)"
:class="{
'active-trip-moduleDay text-red active':
currentHeight >= x.top &&
(i == days.length - 1 || currentHeight < days[i + 1].top),
}"
>
{{ x.display }}
</div>
</div>
</div>
<div class="col-8">
<div class="text-h5 text-weight-bold text-left" ref="feature">
行程特色
......@@ -316,9 +335,14 @@
<div class="text-h5 text-weight-bold text-left q-mt-xl" ref="product">
行程介紹
</div>
<div class="q-pb-xl">
<div class="q-pb-xl" >
<smaple :trip="dataList"></smaple>
<template v-if="dataList.dayList.length<=3">
<trip :trip="dataList" @change="changeTripShowHandler"></trip>
</template>
<template v-else>
<block :currentHeightDay="currentHeight" :days="days" :tripList="dayList" :isDirect="isDirect" :clickDate="clickDate"></block>
</template>
</div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" ref="price">
費用說明
......@@ -339,7 +363,7 @@
<div
class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)"
v-html="dataList.feature.importantTip"
v-html="dataList.feature.importantTip?dataList.feature.importantTip:'暂无购买须知'"
></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" ref="tips">
溫馨提示
......@@ -347,7 +371,7 @@
<div
class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-info)"
v-html="dataList.feature.warmTip"
v-html="dataList.feature.warmTip?dataList.feature.warmTip:'暂无溫馨提示'"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
......@@ -374,10 +398,10 @@
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col q-ml-xl position-relative">
<div style="position: sticky; top: 100px">
<!-- -->
<div
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
v-for="(x, i) in navs"
......@@ -403,10 +427,14 @@ import calendar from "../components/trip/calendar.vue";
import OrderPreview from "src/components/trip/orderPreview.vue";
import smaple from "src/components/trip/smaple.vue";
import Trip from "src/components/trip/trip.vue";
import headStyle4 from "../components/trip/style4";
import headStyle5 from "../components/trip/style5";
import block from 'src/components/trip/block/index'
export default {
props: [],
data() {
return {
clickDate: '',
slide: 1,
msg: {
configId: "",
......@@ -449,6 +477,14 @@ export default {
videoPosition: 0,
currentHeight: 0,
isPictureInPicture: false,
days: [
{
val: '',
top: 0,
isActive: false,
display: '',
},
],
navs: [
{
val: "feature",
......@@ -490,6 +526,8 @@ export default {
priceListHeight: 0,
stickyHeight: 0,
zoomDiyContext: 1,
currentHeightDay: 0,
stickyHeightDay: 0
};
},
components: {
......@@ -499,6 +537,23 @@ export default {
OrderPreview,
smaple,
Trip,
block
},
watch: {
currentHeightDay:{
handler: function (val, oldval) {
this.currentHeightDay = val
},
deep: true
},
days: {
handler: function (val, oldval) {
this.days = val
},
immediate: true,
deep: true
},
},
created() {
try {
......@@ -519,6 +574,9 @@ export default {
window.addEventListener("scroll", this.menu);
},
methods: {
getTopNum(x){
this.days = JSON.parse(x)
},
changeTripShowHandler() {
this.$nextTick(() => {
this.navs.forEach((x) => {
......@@ -580,6 +638,10 @@ export default {
0,
};
},
goScrollHandlerDay(top) {
window.scrollTo(0, top);
},
goScrollHandler(top) {
window.scrollTo(0, top);
},
......@@ -634,6 +696,8 @@ export default {
}
this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
this.dayList = this.dataList.dayList;
this.isShow = true;
this.isDirect = this.dataList.isDirect;
if (this.dataList.videoStr && this.dataList.videoStr != "") {
......@@ -664,12 +728,32 @@ export default {
this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight -
60;
});
this.priceListHeight =
this.$refs.pricelist.getBoundingClientRect().top +
this.currentHeight -
60;
this.days = []
this.dayList.forEach(x=>{
let dayListObj = {
val: 'day'+x.dayNum,
top: 0,
isActive: false,
display: x.dayNum>9?x.dayNum:'0'+x.dayNum,
}
this.days.push(dayListObj)
})
}, 1000);
try {
document.querySelector('#scrollId .q-page-container').addEventListener('scroll', this.handleScrollDay)
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
}
});
} else {
this.$message.error(r.data.message);
......@@ -733,4 +817,40 @@ export default {
border-radius: 5px;
background: var(--q-color-primary);
}
.trip-module{
font-weight: 100;
text-align: center;
line-height: 38px;
font-size: 18px;
width: 38px;
height: 38px;
border: 1px solid #ccc;
border-radius: 50%;
font-family: lettergothicstd;
}
.trip-module{
color: #9E9E9E;
transition: all .3s;
}
.active-trip-moduleDay {
position: relative;
border: 0;
left: -15px;
font-size: 51px;
}
.active-trip-moduleDay.active::before {
opacity: 1;
}
.active-trip-moduleDay::before {
display: inline-block;
position: absolute;
top: 0px;
left: -50px;
content: 'DAY';
font-size: 13px;
font-family: fangsong;
line-height: 58px;
opacity: 0;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment