Skip to content

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

no message

parent f0416393
Expand all Show whitespace changes
Inline Side-by-side
Showing with 474 additions and 321 deletions
quasar.conf.js
View file @ 5be9222f
...@@ -162,7 +162,8 @@ module.exports = function( /* ctx */ ) { ...@@ -162,7 +162,8 @@ module.exports = function( /* ctx */ ) {
'QResponsive', 'QResponsive',
'QTooltip', 'QTooltip',
'QBadge', 'QBadge',
'QParallax' 'QParallax',
'QField',
], ],
directives: [ directives: [
......
src/assets/trip/block/index.css
View file @ 5be9222f
...@@ -74,7 +74,6 @@ ...@@ -74,7 +74,6 @@
z-index: 2; z-index: 2;
} }
.trip-block .block-item .item .playInfo{ .trip-block .block-item .item .playInfo{
margin-top: 5px;
margin-left: -5px; margin-left: -5px;
height: 25px; height: 25px;
} }
...@@ -126,9 +125,10 @@ ...@@ -126,9 +125,10 @@
/* box-sizing: border-box; */ /* box-sizing: border-box; */
} }
.trip-block .block-item .item.big .right .details{ .trip-block .block-item .item.big .right .details{
height: 260px;
display: block; display: block;
margin-top: 15px; margin-top: 15px;
font-size: 16px; /* font-size: 16px; */
line-height: 1.5em; line-height: 1.5em;
text-align: justify; text-align: justify;
color: #444; color: #444;
...@@ -157,7 +157,7 @@ ...@@ -157,7 +157,7 @@
height: 100%; height: 100%;
} }
.trip-block .block-item .item .down{ .trip-block .block-item .item .down{
/* height: 150px; */ height: 260px;
overflow: hidden; overflow: hidden;
} }
.trip-block .block-item .item.hor-box{ .trip-block .block-item .item.hor-box{
......
src/components/trip/block/fiveday.vue
View file @ 5be9222f
This diff is collapsed.
src/components/trip/block/fourday.vue
View file @ 5be9222f
This diff is collapsed.
src/components/trip/block/index.vue
View file @ 5be9222f
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
this.daysClass.forEach((x,i)=>{ this.daysClass.forEach((x,i)=>{
var object=document.getElementById(`days_${i}`); var object=document.getElementById(`days_${i}`);
x.top = object.getBoundingClientRect().top - 100 x.top = object.getBoundingClientRect().top+300
}) })
} catch (error) { } catch (error) {
console.log('----异常') console.log('----异常')
......
src/components/trip/block/oneday.vue
View file @ 5be9222f
...@@ -21,9 +21,9 @@ ...@@ -21,9 +21,9 @@
</div> </div>
<div class="right col" style="border: 1px solid #ccc;border-left: 0;"> <div class="right col" style="border: 1px solid #ccc;border-left: 0;">
<div class="details"> <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)" <div v-if="day.details[0].title!=''" class="text-h6 text-bold q-pb-sm" v-html="day.details[0].title" @click.stop="goUrl(day.details[0].url)"
style="cursor: pointer;"></div> style="cursor: pointer;"></div>
<div class="playInfo"> <div class="playInfo" v-if='day.details[0].playTimeHour || day.details[0].playTimeMinutes'>
<span class="playInfo-item" v-if='day.details[0].ticketName!=""'> <span class="playInfo-item" v-if='day.details[0].ticketName!=""'>
</span> </span>
<span class="playInfo-item" v-if='day.details[0].playTimeHour || day.details[0].playTimeMinutes'> <span class="playInfo-item" v-if='day.details[0].playTimeHour || day.details[0].playTimeMinutes'>
...@@ -46,29 +46,25 @@ ...@@ -46,29 +46,25 @@
<span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span> <span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span>
</div> </div>
</div> </div>
<div class="restaurant row justify-between wrap"> <div class="restaurant" :class="{'row justify-between wrap':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div class="restaurant-item"> <div class="restaurant-item">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_breakfast.png' /> <img src='../../../assets/img/daily_breakfast.png' />
</div> </div>
<div class="val">{{day.can.breakfirst}}</div> <div class="val">{{day.can.breakfirst}}</div>
</div> </div>
<div class="restaurant-item q-pl-sm"> <div class="restaurant-item">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_lunch.png' /> <img src='../../../assets/img/daily_lunch.png' />
</div> </div>
<div class="val">{{day.can.lanuch}}</div> <div class="val">{{day.can.lanuch}}</div>
</div> </div>
<div class="restaurant-item q-pl-sm"> <div class="restaurant-item">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_dinner.png' /> <img src='../../../assets/img/daily_dinner.png' />
</div> </div>
<div class="val">{{day.can.dinner}}</div> <div class="val">{{day.can.dinner}}</div>
</div> </div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24"> <div class="restaurant-item col-24">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_hotel-1.png' /> <img src='../../../assets/img/daily_hotel-1.png' />
...@@ -81,7 +77,6 @@ ...@@ -81,7 +77,6 @@
</div> </div>
<div class="val" v-else>本日无酒店安排</div> <div class="val" v-else>本日无酒店安排</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
......
src/components/trip/block/threeday.vue
View file @ 5be9222f
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="block-item"> <div class="block-item">
<div class="two-block"> <div class="two-block">
<div class="column"> <div class="column">
<div class="itemcol row no-wrap" style="background: #F6F6F6;"> <div class="item col row no-wrap" style="background: #F6F6F6;">
<div class="up col-8"> <div class="up col-8">
<template v-if="day.details[0].fileType&&day.details[0].fileType=='.mp4'"> <template v-if="day.details[0].fileType&&day.details[0].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="item.videoPath" <video ref="myVideo" width="100%" height="100%" :src="item.videoPath"
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
<div class="row items-end" style="border:1px solid #ccc;left: 0;"> <div class="row items-end" style="border:1px solid #ccc;left: 0;">
<div class="q-pb-lg"> <div class="q-pb-lg">
<div class="down q-pa-lg col"> <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)" <div v-if="day.details[0].title!=''" class="text-h6 text-bold q-pb-sm" 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> style="cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"></div>
<div class="playInfo"> <div class="playInfo" v-if='day.details[0].playTimeHour || day.details[0].playTimeMinutes'>
<span class="playInfo-item" v-if='day.details[0].ticketName!=""'> <span class="playInfo-item" v-if='day.details[0].ticketName!=""'>
</span> </span>
<span class="playInfo-item" v-if='day.details[0].playTimeHour || day.details[0].playTimeMinutes'> <span class="playInfo-item" v-if='day.details[0].playTimeHour || day.details[0].playTimeMinutes'>
...@@ -44,10 +44,10 @@ ...@@ -44,10 +44,10 @@
<div class="item q-mt-sm col row no-wrap" style="background: #F6F6F6;"> <div class="item q-mt-sm col row no-wrap" style="background: #F6F6F6;">
<div class="up row"> <div class="up row">
<div class="col" style="border:1px solid #ccc;right: 0;"> <div class="col" style="border:1px solid #ccc;right: 0;">
<div class="down q-pa-lg col"> <div class="down q-ma-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)" <div v-if="day.details[1].title!=''" class="text-h6 text-bold q-pb-sm" v-html="day.details[1].title" @click.stop="goUrl(day.details[1].url)"
style="cursor: pointer;"></div> style="cursor: pointer;"></div>
<div class="playInfo"> <div class="playInfo" v-if='day.details[1].playTimeHour || day.details[1].playTimeMinutes'>
<span class="playInfo-item" v-if='day.details[1].ticketName!=""'> <span class="playInfo-item" v-if='day.details[1].ticketName!=""'>
</span> </span>
<span class="playInfo-item" v-if='day.details[1].playTimeHour || day.details[1].playTimeMinutes'> <span class="playInfo-item" v-if='day.details[1].playTimeHour || day.details[1].playTimeMinutes'>
...@@ -101,9 +101,9 @@ ...@@ -101,9 +101,9 @@
<div class="row items-end" style="border:1px solid #ccc;left: 0;"> <div class="row items-end" style="border:1px solid #ccc;left: 0;">
<div class="q-pb-lg"> <div class="q-pb-lg">
<div class="down q-pa-lg col"> <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)" <div v-if="day.details[2].title!=''" class="text-h6 text-bold q-pb-sm" v-html="day.details[2].title" @click.stop="goUrl(day.details[2].url)"
style="cursor: pointer;"></div> style="cursor: pointer;"></div>
<div class="playInfo"> <div class="playInfo" v-if='day.details[2].playTimeHour || day.details[2].playTimeMinutes'>
<span class="playInfo-item" v-if='day.details[2].ticketName!=""'> <span class="playInfo-item" v-if='day.details[2].ticketName!=""'>
</span> </span>
<span class="playInfo-item" v-if='day.details[2].playTimeHour || day.details[2].playTimeMinutes'> <span class="playInfo-item" v-if='day.details[2].playTimeHour || day.details[2].playTimeMinutes'>
...@@ -128,28 +128,25 @@ ...@@ -128,28 +128,25 @@
<span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span> <span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span>
</div> </div>
</div> </div>
<div class="restaurant row justify-between wrap"> <div class="restaurant" :class="{'row justify-between wrap':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div class="restaurant-item"> <div class="restaurant-item">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_breakfast.png' /> <img src='../../../assets/img/daily_breakfast.png' />
</div> </div>
<div class="val">{{day.can.breakfirst}}</div> <div class="val">{{day.can.breakfirst}}</div>
</div> </div>
<div class="restaurant-item q-pl-sm"> <div class="restaurant-item">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_lunch.png' /> <img src='../../../assets/img/daily_lunch.png' />
</div> </div>
<div class="val">{{day.can.lanuch}}</div> <div class="val">{{day.can.lanuch}}</div>
</div> </div>
<div class="restaurant-item q-pl-sm"> <div class="restaurant-item">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_dinner.png' /> <img src='../../../assets/img/daily_dinner.png' />
</div> </div>
<div class="val">{{day.can.dinner}}</div> <div class="val">{{day.can.dinner}}</div>
</div> </div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24"> <div class="restaurant-item col-24">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_hotel-1.png' /> <img src='../../../assets/img/daily_hotel-1.png' />
......
src/components/trip/block/twoday.vue
View file @ 5be9222f
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</template> </template>
<template v-else> <template v-else>
<q-img v-if="item.img" :src='item.img' :ratio="1" fit="cover" height="100%"> <q-img v-if="item.img" :src='item.img' :ratio="12/4" fit="cover" height="100%">
<template v-slot:error> <template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark"> <div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败 图片加载失败
...@@ -28,9 +28,9 @@ ...@@ -28,9 +28,9 @@
<div class="row items-end" style="border:1px solid #ccc;left: 0;"> <div class="row items-end" style="border:1px solid #ccc;left: 0;">
<div class="q-pb-lg"> <div class="q-pb-lg">
<div class="down q-pa-lg" :class="{'col':index==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)" <div v-if="item.title!=''" class="text-h6 text-bold q-pb-sm" v-html="item.title" @click.stop="goUrl(item.url)"
style="cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"></div> style="cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"></div>
<div class="playInfo"> <div class="playInfo" v-if='item.playTimeHour || item.playTimeMinutes'>
<span class="playInfo-item" v-if='item.ticketName!=""'> <span class="playInfo-item" v-if='item.ticketName!=""'>
</span> </span>
<span class="playInfo-item" v-if='item.playTimeHour || item.playTimeMinutes'> <span class="playInfo-item" v-if='item.playTimeHour || item.playTimeMinutes'>
...@@ -49,11 +49,11 @@ ...@@ -49,11 +49,11 @@
</template> </template>
<template v-for="(item,index) in day.details"> <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 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="col q-pa-lg" style="border:1px solid #ccc;right: 0;">
<div class="down q-pa-lg" :class="{'col':index==0}"> <div class="down" :class="{'col':index==0}">
<div v-if="item.title!=''" class="text-h6 text-bold" v-html="item.title" @click.stop="goUrl(item.url)" <div v-if="item.title!=''" class="text-h6 text-bold q-pb-sm" v-html="item.title" @click.stop="goUrl(item.url)"
style="cursor: pointer;"></div> style="cursor: pointer;"></div>
<div class="playInfo"> <div class="playInfo" v-if='item.playTimeHour || item.playTimeMinutes'>
<span class="playInfo-item" v-if='item.ticketName!=""'> <span class="playInfo-item" v-if='item.ticketName!=""'>
</span> </span>
<span class="playInfo-item" v-if='item.playTimeHour || item.playTimeMinutes'> <span class="playInfo-item" v-if='item.playTimeHour || item.playTimeMinutes'>
...@@ -95,28 +95,25 @@ ...@@ -95,28 +95,25 @@
<span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span> <span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span>
</div> </div>
</div> </div>
<div class="restaurant row justify-between wrap"> <div class="restaurant" :class="{'row justify-between wrap':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div class="restaurant-item"> <div class="restaurant-item">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_breakfast.png' /> <img src='../../../assets/img/daily_breakfast.png' />
</div> </div>
<div class="val">{{day.can.breakfirst}}</div> <div class="val">{{day.can.breakfirst}}</div>
</div> </div>
<div class="restaurant-item q-pl-sm"> <div class="restaurant-item">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_lunch.png' /> <img src='../../../assets/img/daily_lunch.png' />
</div> </div>
<div class="val">{{day.can.lanuch}}</div> <div class="val">{{day.can.lanuch}}</div>
</div> </div>
<div class="restaurant-item q-pl-sm"> <div class="restaurant-item">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_dinner.png' /> <img src='../../../assets/img/daily_dinner.png' />
</div> </div>
<div class="val">{{day.can.dinner}}</div> <div class="val">{{day.can.dinner}}</div>
</div> </div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24"> <div class="restaurant-item col-24">
<div class="key"> <div class="key">
<img src='../../../assets/img/daily_hotel-1.png' /> <img src='../../../assets/img/daily_hotel-1.png' />
......
src/components/trip/orderPreview.vue
View file @ 5be9222f
...@@ -12,14 +12,21 @@ ...@@ -12,14 +12,21 @@
</div> </div>
<div class="text-grey-6 f12 q-my-md">選擇數量</div> <div class="text-grey-6 f12 q-my-md">選擇數量</div>
<div class="row items-end"> <div class="row items-end">
<div class="col"> <div class="col" :class="{'column':$q.platform.is.mobile}">
<div>
<span class="text-subtitle2 text-weight-bold">成人</span> <span class="text-subtitle2 text-weight-bold">成人</span>
<span class="text-grey-6 f12 q-ml-sm">(12-99歲)</span> <span class="text-grey-6 f12 q-ml-sm">(12-99歲)</span>
</div> </div>
<div class="row items-end"> <div v-if="$q.platform.is.mobile">
<span class="text-grey-7 product-price" style="font-size: 13px"> <span class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.originalB2CPrice, 0) }} /每人 CNY {{ moneyFormat(p.originalB2CPrice, 0) }} /每人
</span> </span>
</div>
</div>
<div class="row items-end">
<span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.originalB2CPrice, 0) }} /每人
</span>
<q-input <q-input
style="width: 150px" style="width: 150px"
@input="changePeople" @input="changePeople"
...@@ -59,15 +66,23 @@ ...@@ -59,15 +66,23 @@
</div> </div>
</div> </div>
<div class="row items-end q-mt-md" v-if="p.isSupportChildren == 1"> <div class="row items-end q-mt-md" v-if="p.isSupportChildren == 1">
<div class="col"> <div class="col" :class="{'column':$q.platform.is.mobile}">
<div>
<span class="text-subtitle2 text-weight-bold">儿童</span> <span class="text-subtitle2 text-weight-bold">儿童</span>
<span class="text-grey-6 f12 q-ml-sm">(2-11歲,不占床)</span> <span class="text-grey-6 f12 q-ml-sm">(2-11歲,不占床)</span>
</div> </div>
<div class="row items-end"> <div v-if="$q.platform.is.mobile">
<span class="text-grey-7 product-price" style="font-size: 13px"> <span class="text-grey-7 product-price" style="font-size: 13px">
CNY CNY
{{ moneyFormat(p.originalB2CPrice - p.childNoNeedPrice, 0) }} /每人 {{ moneyFormat(p.originalB2CPrice - p.childNoNeedPrice, 0) }} /每人
</span> </span>
</div>
</div>
<div class="row items-end">
<span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY
{{ moneyFormat(p.originalB2CPrice - p.childNoNeedPrice, 0) }} /每人
</span>
<q-input <q-input
style="width: 150px" style="width: 150px"
@input="changePeople" @input="changePeople"
...@@ -108,12 +123,19 @@ ...@@ -108,12 +123,19 @@
</div> </div>
<div class="row items-end q-mt-md" v-if="p.isSupportChildren == 1"> <div class="row items-end q-mt-md" v-if="p.isSupportChildren == 1">
<div class="col"> <div class="col" :class="{'column':$q.platform.is.mobile}">
<div>
<span class="text-subtitle2 text-weight-bold">婴儿</span> <span class="text-subtitle2 text-weight-bold">婴儿</span>
<span class="text-grey-6 f12 q-ml-sm">(2歲以下)</span> <span class="text-grey-6 f12 q-ml-sm">(2歲以下)</span>
</div> </div>
<div v-if="$q.platform.is.mobile">
<span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.babyPrice, 0) }} /每人
</span>
</div>
</div>
<div class="row items-end"> <div class="row items-end">
<span class="text-grey-7 product-price" style="font-size: 13px"> <span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.babyPrice, 0) }} /每人 CNY {{ moneyFormat(p.babyPrice, 0) }} /每人
</span> </span>
<q-input <q-input
...@@ -164,14 +186,21 @@ ...@@ -164,14 +186,21 @@
> >
<div class="text-grey-6 f12">單房服務</div> <div class="text-grey-6 f12">單房服務</div>
<div class="row items-end"> <div class="row items-end">
<div class="col"> <div class="col" :class="{'column':$q.platform.is.mobile}">
<div>
<span class="text-subtitle2 text-weight-bold">單房服務</span> <span class="text-subtitle2 text-weight-bold">單房服務</span>
<span class="text-grey-6 f12 q-ml-sm">(獨立單間住宿)</span> <span class="text-grey-6 f12 q-ml-sm">(獨立單間住宿)</span>
</div> </div>
<div class="row items-end"> <div v-if="$q.platform.is.mobile">
<span class="text-grey-7 product-price" style="font-size: 13px"> <span class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.singleRoomPrice, 0) }} /每人 CNY {{ moneyFormat(p.singleRoomPrice, 0) }} /每人
</span> </span>
</div>
</div>
<div class="row items-end">
<span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.singleRoomPrice, 0) }} /每人
</span>
<q-input <q-input
style="width: 150px" style="width: 150px"
@input="changePeople" @input="changePeople"
...@@ -226,7 +255,7 @@ ...@@ -226,7 +255,7 @@
<span class="text-h6 text-primary product-price">CNY {{ moneyFormat(sumPrice,0) }}</span> <span class="text-h6 text-primary product-price">CNY {{ moneyFormat(sumPrice,0) }}</span>
</div> </div>
<div class="q-mt-md text-right"> <div class="q-mt-md text-right">
<span class="q-mr-lg f12 text-negative" v-if="!p.startDate" >請選擇左側的出行日期</span> <span class="q-mr-lg f12 text-negative" v-if="!p.startDate" >{{$q.platform.is.mobile?'請選擇上面的出行日期':'請選擇左側的出行日期'}} </span>
<q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" :disable="sumPrice==0"/> <q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" :disable="sumPrice==0"/>
</div> </div>
</div> </div>
......
src/components/trip/smaple.vue
View file @ 5be9222f
...@@ -2,40 +2,49 @@ ...@@ -2,40 +2,49 @@
<div class="q-mt-md"> <div class="q-mt-md">
<div class="text-subtitle2 text-weight-bold">產品概要</div> <div class="text-subtitle2 text-weight-bold">產品概要</div>
<div class="row q-pt-md q-col-gutter-md"> <div class="row q-pt-md q-col-gutter-md">
<div class="row items-center q-pt-mb col-6" v-if="traffic!=''"> <div class="row items-center q-pt-mb"
<div class="col-3 q-mr-md">往返交通：</div> :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="traffic!=''">
<div class="q-mr-md col-3">往返交通：</div>
<div class="col text-grey-6">{{ traffic }}</div> <div class="col text-grey-6">{{ traffic }}</div>
</div> </div>
<div class="row items-center q-pt-mb col-6" v-if="hotel!=''"> <div class="row items-center q-pt-mb"
<div class="col-3 q-mr-md">酒店住宿：</div> :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="hotel!=''">
<div class="q-mr-md col-3">酒店住宿：</div>
<div class="col text-grey-6">{{ hotel }}</div> <div class="col text-grey-6">{{ hotel }}</div>
</div> </div>
<div class="row items-center q-pt-mb col-6"> <div class="row items-center q-pt-mb"
<div class="col-3 q-mr-md">購物：</div> :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<div class="q-mr-md col-3">購物：</div>
<div class="col text-grey-6">{{ trip.shopList.length>0?`${trip.shopList.length}個購物點`:'無購物行程' }}</div> <div class="col text-grey-6">{{ trip.shopList.length>0?`${trip.shopList.length}個購物點`:'無購物行程' }}</div>
</div> </div>
<div class="row items-center q-pt-mb col-6" v-if="team!=''"> <div class="row items-center q-pt-mb"
<div class="col-3 q-mr-md">團隊人數：</div> :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="team!=''">
<div class="q-mr-md col-3">團隊人數：</div>
<div class="col text-grey-6">{{ team }}</div> <div class="col text-grey-6">{{ team }}</div>
</div> </div>
<div class="row items-center q-pt-mb col-6"> <div class="row items-center q-pt-mb"
<div class="col-3 q-mr-md">景點：</div> :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
<div class="q-mr-md col-3">景點：</div>
<div class="col text-grey-6">{{ trip.scenicList.length }}個景點或場館</div> <div class="col text-grey-6">{{ trip.scenicList.length }}個景點或場館</div>
</div> </div>
<div class="row items-center q-pt-mb col-6"> <div class="row items-center q-pt-mb"
<div class="col-3 q-mr-md">自費項目：</div> :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
<div class="q-mr-md col-3">自費項目：</div>
<div class="col text-grey-6">{{ trip.selfpayingList.length>0?`${trip.selfpayingList.length}個自費項目`:'無自費項目' }}</div> <div class="col text-grey-6">{{ trip.selfpayingList.length>0?`${trip.selfpayingList.length}個自費項目`:'無自費項目' }}</div>
</div> </div>
<div class="row items-center q-pt-mb col-6" v-if="trip.freedomList.length>0"> <div class="row items-center q-pt-mb"
<div class="col-3 q-mr-md">自由活動：</div> :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="trip.freedomList.length>0">
<div class="q-mr-md col-3">自由活動：</div>
<div class="col text-grey-6">{{ trip.freedomList.length}} 次自由活動</div> <div class="col text-grey-6">{{ trip.freedomList.length}} 次自由活動</div>
</div> </div>
<div class="row items-center q-pt-mb col-6"> <div class="row items-center q-pt-mb"
<div class="col-3 q-mr-md">餐食：</div> :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
<div class="q-mr-md col-3">餐食：</div>
<div class="col text-grey-6">{{ dinner }}</div> <div class="col text-grey-6">{{ dinner }}</div>
</div> </div>
<div class="row items-center q-pt-mb col-6"> <div class="row items-center q-pt-mb"
<div class="col-3 q-mr-md">服務用語</div> :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
<div class="q-mr-md col-3">服務用語</div>
<div class="col text-grey-6">普通話/日本語</div> <div class="col text-grey-6">普通話/日本語</div>
</div> </div>
</div> </div>
......
src/pages/detailsNew.vue
View file @ 5be9222f
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
z-index: 999; z-index: 999;
" "
class="bg-white" class="bg-white"
v-if="currentHeight > navs[0].top + 100" v-if="(currentHeight > navs[0].top + 100&&$q.platform.is.desktop)||
(currentHeight>priceListHeight&&currentHeight < navs[0].top&&$q.platform.is.mobile)"
:style="{ transform: stickyHeight }" :style="{ transform: stickyHeight }"
> >
<div <div
...@@ -19,6 +20,7 @@ ...@@ -19,6 +20,7 @@
:class="{ 'q-px-md': $q.screen.width < 1220 }" :class="{ 'q-px-md': $q.screen.width < 1220 }"
class="q-py-sm row items-center" class="q-py-sm row items-center"
> >
<span <span
class="col product-price text-subtitle1 text-weight-bold" class="col product-price text-subtitle1 text-weight-bold"
style="text-align: left" style="text-align: left"
...@@ -114,7 +116,7 @@ ...@@ -114,7 +116,7 @@
</slider> </slider>
</div> </div>
</div> </div>
<div class="q-py-lg row" style="border-bottom: 1px solid #eee"> <div class="q-py-lg" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}" style="border-bottom: 1px solid #eee">
<div class="col q-mr-lg"> <div class="col q-mr-lg">
<div class="text-h6 ellipsis-2-lines">{{ dataList.title }}</div> <div class="text-h6 ellipsis-2-lines">{{ dataList.title }}</div>
<div class="q-mt-md f12 text-grey-6"> <div class="q-mt-md f12 text-grey-6">
...@@ -160,8 +162,10 @@ ...@@ -160,8 +162,10 @@
</div> </div>
</div> </div>
<div <div
style="width: 293px" :style="{'width': $q.platform.is.mobile?'100%':'293px'}"
class="bg-grey-3 rounded-borders q-px-md q-py-lg" class="bg-grey-3 rounded-borders q-px-md"
:class="{'q-py-lg':$q.platform.is.desktop,
'row justify-between items-center q-mt-sm q-py-sm':$q.platform.is.mobile}"
> >
<div <div
class="product-price text-h6" class="product-price text-h6"
...@@ -177,7 +181,7 @@ ...@@ -177,7 +181,7 @@
label="選擇方案" label="選擇方案"
unelevated unelevated
@click="goScrollHandler(priceListHeight)" @click="goScrollHandler(priceListHeight)"
class="q-mt-md full-width" :class="{'q-mt-md full-width':$q.platform.is.desktop}"
/> />
</div> </div>
</div> </div>
...@@ -197,6 +201,31 @@ ...@@ -197,6 +201,31 @@
</div> </div>
</div> </div>
</div> </div>
<div
class="bg-white"
style="
position: fixed;
left: 0;
right: 0;
top: -1px;
border-top: 1px solid #eee;
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
z-index: 999;"
v-if="currentHeight > priceListHeight+800&&$q.platform.is.mobile"
:style="{ transform: stickyHeight }">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="left"
narrow-indicator>
<q-tab v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.top + 20)" :name="x.display" :label="x.display"></q-tab>
</q-tabs>
</div>
<div <div
v-if="dataList" v-if="dataList"
class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9" class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9"
...@@ -204,13 +233,31 @@ ...@@ -204,13 +233,31 @@
> >
<div style="max-width: 1200px; margin-left: auto; margin-right: auto"> <div style="max-width: 1200px; margin-left: auto; margin-right: auto">
<div class="text-h6">選擇方案</div> <div class="text-h6">選擇方案</div>
<div class="rounded-borders bg-white q-pa-md q-mt-md" v-if="$q.platform.is.mobile">
<q-field class="q-my-md" stack-label label="選擇日期、選項" standout dense>
<div class="self-center full-width no-outline" tabindex="0">{{currentPrice.startDate}}</div>
<q-popup-proxy ref="qDateProxy">
<calendar class="bg-white q-pa-md"
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
</q-popup-proxy>
</q-field>
<order-preview class="q-pa-md"
:price="currentPrice"
@reset="resetHandler"
></order-preview>
</div>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">所選方案詳情</div>
<div <div
class="bg-white rounded-borders q-mt-md" class="bg-white rounded-borders q-mt-md"
v-if="dataList.priceList.length > 0" v-if="dataList.priceList.length > 0"
> >
<div class="q-pa-md row"> <div class="q-pa-md row">
<div class="col"> <div class="col">
<div class="text-subtitle1 text-weight-bold row items-center"> <div class="text-subtitle1 text-weight-bold row items-center" v-if="$q.platform.is.desktop">
<span class="q-mr-md">行程標準出行方案</span> <span class="q-mr-md">行程標準出行方案</span>
<q-chip <q-chip
square square
...@@ -229,7 +276,7 @@ ...@@ -229,7 +276,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class=""> <div class="" v-if="$q.platform.is.desktop">
<div class="row items-center"> <div class="row items-center">
<span class="product-price text-h6 q-mr-md" <span class="product-price text-h6 q-mr-md"
>CNY >CNY
...@@ -272,8 +319,8 @@ ...@@ -272,8 +319,8 @@
label="6個工作日內（不含例休假）確認" label="6個工作日內（不含例休假）確認"
/> />
</div> </div>
<div class="q-mt-lg row"> <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col"> <div class="col" >
<calendar <calendar
:priceList="dataList.priceList" :priceList="dataList.priceList"
@change="changeChosenDateHandler" @change="changeChosenDateHandler"
...@@ -299,7 +346,8 @@ ...@@ -299,7 +346,8 @@
class="q-mt-xl row" class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220 }" :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 class="col q-ml-xl position-relative"
v-if="dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top&&$q.platform.is.desktop">
<div style="position: sticky; top: 100px"> <div style="position: sticky; top: 100px">
<div <div
class="trip-module text-subtitle2 cursor-pointer q-mb-lg" class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
...@@ -316,7 +364,7 @@ ...@@ -316,7 +364,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-8"> <div :class="{'col-8':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
<div class="text-h5 text-weight-bold text-left" ref="feature"> <div class="text-h5 text-weight-bold text-left" ref="feature">
行程特色 行程特色
</div> </div>
...@@ -399,6 +447,7 @@ ...@@ -399,6 +447,7 @@
</div> </div>
</div> </div>
<template v-if="$q.platform.is.desktop">
<div class="col-1"></div> <div class="col-1"></div>
<div class="col q-ml-xl position-relative"> <div class="col q-ml-xl position-relative">
<div style="position: sticky; top: 100px"> <div style="position: sticky; top: 100px">
...@@ -417,6 +466,8 @@ ...@@ -417,6 +466,8 @@
</div> </div>
</div> </div>
</div> </div>
</template>
</div> </div>
</div> </div>
</template> </template>
...@@ -434,6 +485,8 @@ export default { ...@@ -434,6 +485,8 @@ export default {
props: [], props: [],
data() { data() {
return { return {
tab: '',
searchDate:'',
clickDate: '', clickDate: '',
slide: 1, slide: 1,
msg: { msg: {
...@@ -553,7 +606,22 @@ export default { ...@@ -553,7 +606,22 @@ export default {
immediate: true, immediate: true,
deep: true deep: true
}, },
currentHeight: {
handler: function (val, oldval) {
this.navs.forEach((x,i)=>{
if(x.top&&(this.currentHeight >= x.top&&(i==(this.navs.length - 1)||this.currentHeight < this.navs[i+1].top))){
if(this.tab!=x.display){
this.tab=x.display
return
}else{
return
}
}
})
},
immediate: false,
deep: true
},
}, },
created() { created() {
try { try {
...@@ -647,7 +715,7 @@ export default { ...@@ -647,7 +715,7 @@ export default {
}, },
slideHandler(e) { slideHandler(e) {
this.options.currentPage = e.currentPage; this.options.currentPage = e.currentPage;
if (e.currentPage != 0 && this.$refs.video.isPlaying) { if (e.currentPage != 0 && this.$refs.video && this.$refs.video.isPlaying) {
this.$refs.video.pause(); this.$refs.video.pause();
} }
}, },
...@@ -666,6 +734,7 @@ export default { ...@@ -666,6 +734,7 @@ export default {
changeChosenDateHandler(val) { changeChosenDateHandler(val) {
val.price.version = new Date().getTime(); val.price.version = new Date().getTime();
this.currentPrice = JSON.parse(JSON.stringify(val.price)); this.currentPrice = JSON.parse(JSON.stringify(val.price));
this.$refs.qDateProxy.hide()
}, },
showDialog() { showDialog() {
this.isShowDialog = true; this.isShowDialog = true;
...@@ -716,9 +785,11 @@ export default { ...@@ -716,9 +785,11 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
if(this.dataList.feature.featureHtml!=''){ if(this.dataList.feature.featureHtml!=''){
let tw = let tw =
parseFloat( this.$q.platform.is.desktop?parseFloat(
this.$refs.diyContext.getBoundingClientRect().width
) / 1123.0 :parseFloat(
this.$refs.diyContext.getBoundingClientRect().width this.$refs.diyContext.getBoundingClientRect().width
) / 1123.0; ) / 1000.0;
this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2); this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
} }
......
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