Skip to content

M
million
Commit 5e8336a8 authored by 罗超's avatar 罗超
Browse files
Options

修改详情

parent 1b553dc2
Hide whitespace changes
Inline Side-by-side
Showing with 727 additions and 668 deletions
src/pages/detailsNew.vue
View file @ 5e8336a8
<template> <template>
<div style="min-height: 80vh"> <div style="min-height: 80vh">
<div <div v-if="dataList && !$q.loading.isActive">
style="
position: fixed;
left: 0;
right: 0;
top: 0;
border-top: 1px solid #eee;
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
z-index: 999;
"
class="bg-white"
v-if="
(currentHeight > navs[0].top + 100 && $q.platform.is.desktop) ||
(currentHeight > priceListHeight &&
currentHeight < navs[0].top &&
$q.platform.is.mobile)
"
:style="{ transform: stickyHeight }"
>
<div <div
style="max-width: 1200px; margin-left: auto; margin-right: auto" style="
:class="{ 'q-px-md': $q.screen.width < 1220 }" position: fixed;
class="q-py-sm row items-center" left: 0;
right: 0;
top: 0;
border-top: 1px solid #eee;
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
z-index: 999;
"
class="bg-white"
v-if="
(currentHeight > navs[0].top + 100 && $q.platform.is.desktop) ||
(currentHeight > priceListHeight &&
currentHeight < navs[0].top &&
$q.platform.is.mobile)
"
:style="{ transform: stickyHeight }"
> >
<span <div
class="col product-price text-subtitle1 text-weight-bold" style="max-width: 1200px; margin-left: auto; margin-right: auto"
style="text-align: left" :class="{ 'q-px-md': $q.screen.width < 1220 }"
class="q-py-sm row items-center"
> >
<span <span
>CNY class="col product-price text-subtitle1 text-weight-bold"
{{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}</span style="text-align: left"
> >
<span class="q-ml-sm f12 text-grey-7">起</span> <span
</span> >CNY
<q-btn {{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}</span
color="primary" >
unelevated <span class="q-ml-sm f12 text-grey-7">起</span>
class="q-px-xl" </span>
label="選擇方案" <q-btn
@click="goScrollHandler(priceListHeight)" color="primary"
/> unelevated
</div> class="q-px-xl"
</div> label="選擇方案"
<div @click="goScrollHandler(priceListHeight)"
v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto"
:class="{ 'q-px-md': $q.screen.width < 1220 }"
>
<div class="row items-center q-mt-md q-mb-lg">
<q-breadcrumbs
class="col f12 no-wrap q-mr-md"
v-if="dataList"
style="font-size: 13px"
>
<q-breadcrumbs-el
icon="home"
label="首頁"
class="cursor-pointer"
@click="CommonJump('/index', {})"
/> />
<q-breadcrumbs-el :label="dataList.aimPlaceName" class="cursor-pointer" /> </div>
<!-- <q-breadcrumbs-el> </div>
<div
v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto"
:class="{ 'q-px-md': $q.screen.width < 1220 }"
>
<div class="row items-center q-mt-md q-mb-lg">
<q-breadcrumbs
class="col f12 no-wrap q-mr-md"
v-if="dataList"
style="font-size: 13px"
>
<q-breadcrumbs-el
icon="home"
label="首頁"
class="cursor-pointer"
@click="CommonJump('/index', {})"
/>
<q-breadcrumbs-el
:label="dataList.aimPlaceName"
class="cursor-pointer"
/>
<!-- <q-breadcrumbs-el>
<span v-for="(x, i) in citys" :key="i"> <span v-for="(x, i) in citys" :key="i">
<span class="cursor-pointer">{{ x }} </span> <span class="cursor-pointer">{{ x }} </span>
<span v-if="i + 1 != citys.length" class="q-mr-sm">，</span> <span v-if="i + 1 != citys.length" class="q-mr-sm">，</span>
</span> </span>
</q-breadcrumbs-el> --> </q-breadcrumbs-el> -->
<q-breadcrumbs-el <q-breadcrumbs-el
v-if="$q.platform.is.desktop" v-if="$q.platform.is.desktop"
:label="dataList.title" :label="dataList.title"
class="text-grey-6 ellipsis" class="text-grey-6 ellipsis"
/> />
</q-breadcrumbs> </q-breadcrumbs>
<div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div> <div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div>
</div> </div>
<div style="padding-bottom: calc((100% - 0px) / 3); position: relative"> <div style="padding-bottom: calc((100% - 0px) / 3); position: relative">
<div <div
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
class="overflow-hidden rounded-borders" class="overflow-hidden rounded-borders"
>
<slider
ref="slider"
:options="options"
@slide="slideHandler"
style="height: 100%"
> >
<slideritem <slider
v-if="dataList.videoStr" ref="slider"
style="width: 80%" :options="options"
class="q-mx-sm" @slide="slideHandler"
key="video" style="height: 100%"
> >
<vue-core-video-players <slideritem
ref="video" v-if="dataList.videoStr"
:src="dataList.videoStr" style="width: 80%"
:title="dataList.title" class="q-mx-sm"
:muted="true" key="video"
:autoplay="false" >
@play="playHandler" <vue-core-video-players
@pause="pauseHandler" ref="video"
@seeked="seekedChangeHandler" :src="dataList.videoStr"
@timeupdate="timeChangeHandler" :title="dataList.title"
logo="../statics/img/transparent_logo.png" :muted="true"
:loop="false" :autoplay="false"
id="trip_video" @play="playHandler"
/> @pause="pauseHandler"
</slideritem> @seeked="seekedChangeHandler"
<slideritem @timeupdate="timeChangeHandler"
v-for="(item, index) in dataList.imgCover" logo="../statics/img/transparent_logo.png"
:key="index" :loop="false"
style="width: 80%" id="trip_video"
class="q-mx-sm" />
> </slideritem>
<q-img :src="item.Url" spinner-color="grey" spinner-size="20px" /> <slideritem
</slideritem> v-for="(item, index) in dataList.imgCover"
<div slot="loading">loading...</div> :key="index"
</slider> style="width: 80%"
class="q-mx-sm"
>
<q-img
:src="item.Url"
spinner-color="grey"
spinner-size="20px"
/>
</slideritem>
<div slot="loading">loading...</div>
</slider>
</div>
</div> </div>
</div> <div
<div class="q-py-lg"
class="q-py-lg" :class="{
:class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }" row: $q.platform.is.desktop,
style="border-bottom: 1px solid #eee" column: $q.platform.is.mobile,
> }"
<div class="col q-mr-lg"> style="border-bottom: 1px solid #eee"
<div class="text-h6 ellipsis-2-lines">{{ dataList.title }}</div> >
<div class="q-mt-md f12 text-grey-6"> <div class="col q-mr-lg">
<q-icon <div class="text-h6 ellipsis-2-lines">{{ dataList.title }}</div>
name="iconfont icondingweixiao" <div class="q-mt-md f12 text-grey-6">
size="16px" <q-icon
class="q-mr-sm" name="iconfont icondingweixiao"
/> size="16px"
<span class="q-mr-sm"
>{{ dataList.aimPlaceName }} />
<span
>{{ dataList.aimPlaceName }}
<span class="q-mx-sm">途徑：</span> <span class="q-mx-sm">途徑：</span>
<span v-for="(x, i) in citys" :key="i"> <span v-for="(x, i) in citys" :key="i">
<span class="cursor-pointer">{{ x }} </span> <span class="cursor-pointer">{{ x }} </span>
<span v-if="i + 1 != citys.length" class="q-mr-sm">,</span> <span v-if="i + 1 != citys.length" class="q-mr-sm">,</span>
</span>
</span> </span>
</span> </div>
<div class="q-mt-md row">
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconOwner-1"
label=" 印象自組團"
/>
<q-chip
v-if="dataList.dayList"
class="transparent q-mr-xl no-padding"
square
icon="iconfont icontime"
:label="` 行程時間 ${dataList.dayList.length} 天`"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconnetwork-fill"
label="日本語/中文 導覽"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconcancel"
label="取消需二次確認"
/>
</div>
</div> </div>
<div class="q-mt-md row"> <div
<q-chip :style="{ width: $q.platform.is.mobile ? '100%' : '293px' }"
class="transparent q-mr-xl no-padding" class="bg-grey-3 rounded-borders q-px-md"
square :class="{
icon="iconfont iconOwner-1" 'q-py-lg': $q.platform.is.desktop,
label=" 印象自組團" 'row justify-between items-center q-mt-sm q-py-sm':
/> $q.platform.is.mobile,
<q-chip v-if="dataList.dayList" }"
class="transparent q-mr-xl no-padding" >
square <div
icon="iconfont icontime" class="product-price text-h6"
:label="` 行程時間 ${dataList.dayList.length} 天`" v-if="dataList.priceList.length > 0"
/> >
<q-chip <!-- CNY：{{ dataList. }} -->
class="transparent q-mr-xl no-padding" CNY：{{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}
square <span class="f12 text-grey-6">起</span>
icon="iconfont iconnetwork-fill" </div>
label="日本語/中文 導覽" <div v-else class="text-subtitle1 text-grey-6">暫無報價</div>
/> <q-btn
<q-chip color="primary"
class="transparent q-mr-xl no-padding" label="選擇方案"
square unelevated
icon="iconfont iconcancel" :disable="dataList.priceList.length > 0 ? false : true"
label="取消需二次確認" @click="goScrollHandler(priceListHeight)"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/> />
</div> </div>
</div> </div>
<div <div class="q-mt-lg" v-if="dataList.productRecommend">
:style="{ width: $q.platform.is.mobile ? '100%' : '293px' }"
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="q-mt-sm"
v-if="dataList.priceList.length > 0" v-for="(x, i) in dataList.productRecommend.split('\n')"
:key="i"
> >
<!-- CNY：{{ dataList. }} --> <q-icon
CNY：{{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }} name="iconfont iconhongqi"
<span class="f12 text-grey-6">起</span> color="primary"
size="16px"
class="q-mr-md"
/>
{{ x }}
</div> </div>
<div v-else class="text-subtitle1 text-grey-6">暫無報價</div>
<q-btn
color="primary"
label="選擇方案"
unelevated
:disable="dataList.priceList.length>0?false:true"
@click="goScrollHandler(priceListHeight)"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/>
</div> </div>
</div> </div>
<div class="q-mt-lg" v-if="dataList.productRecommend"> <div
<div class="bg-white"
class="q-mt-sm" style="
v-for="(x, i) in dataList.productRecommend.split('\n')" position: fixed;
:key="i" 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-icon <q-tab
name="iconfont iconhongqi" v-for="(x, i) in navs"
color="primary" :key="i"
size="16px" @click="goScrollHandler(x.top + 20)"
class="q-mr-md" :name="x.display"
/> :label="x.display"
{{ x }} ></q-tab>
</div> </q-tabs>
</div> </div>
</div> <div
<div v-if="dataList"
class="bg-white" class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9"
style=" ref="pricelist"
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 <div style="max-width: 1200px; margin-left: auto; margin-right: auto">
v-for="(x, i) in navs" <div class="text-h6">選擇方案</div>
:key="i" <div
@click="goScrollHandler(x.top + 20)" class="rounded-borders bg-white q-pa-md q-mt-md"
:name="x.display" v-if="$q.platform.is.mobile"
:label="x.display"
></q-tab>
</q-tabs>
</div>
<div
v-if="dataList"
class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9"
ref="pricelist"
>
<div style="max-width: 1200px; margin-left: auto; margin-right: auto">
<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-mt-md"
stack-label
label="選擇日期、選項"
standout
dense
> >
<div class="self-center full-width no-outline" tabindex="0"> <q-field
{{ currentPrice.startDate }} class="q-mt-md"
</div> stack-label
<q-popup-proxy ref="qDateProxy"> label="選擇日期、選項"
<calendar standout
class="bg-white q-pa-md" dense
:priceList="dataList.priceList" >
@change="changeChosenDateHandler" <div class="self-center full-width no-outline" tabindex="0">
ref="calendarMobile" {{ currentPrice.startDate }}
></calendar> </div>
</q-popup-proxy> <q-popup-proxy ref="qDateProxy">
</q-field> <calendar
class="bg-white q-pa-md"
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendarMobile"
></calendar>
</q-popup-proxy>
</q-field>
<order-preview <order-preview
:travel="dataList" :travel="dataList"
:price="currentPrice" :price="currentPrice"
...@@ -283,323 +295,357 @@ ...@@ -283,323 +295,357 @@
@changeCity="changeCityHandler" @changeCity="changeCityHandler"
v-if="currentPrice && currentPrice.startDate" v-if="currentPrice && currentPrice.startDate"
></order-preview> ></order-preview>
</div> </div>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile"> <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
所選方案詳情 所選方案詳情
</div>
<div
class="bg-white rounded-borders q-mt-md"
v-if="dataList.priceList.length > 0"
>
<div class="q-pa-md row">
<div class="col">
<div
class="text-subtitle1 text-weight-bold row items-center"
v-if="$q.platform.is.desktop"
>
<span class="q-mr-md">行程標準出行方案</span>
<q-chip
square
color="orange"
size="sm"
text-color="grey-2"
class="text-light"
label="取消需二次確認"
/>
</div>
<div class="text-grey f12">
<ul class="q-pl-md no-margin">
<li v-for="(x, i) in warnBuy" :class="{'q-mt-md':$q.platform.is.desktop|(i!=0&&$q.platform.is.mobile)}" :key="i">
{{ x }}
</li>
</ul>
</div>
</div>
<div class="" v-if="$q.platform.is.desktop">
<div class="row items-center">
<span class="product-price text-h6 q-mr-md"
>CNY
{{
moneyFormat(dataList.priceList[0].originalB2CPrice, 0)
}}</span
>
<q-btn
color="primary"
outline
:label="showOrderPreview ? '取消選擇' : '選擇'"
@click="changeShowOrderPreviewHandler"
class="q-px-lg"
/>
</div>
<div class="text-info q-mt-md text-right">
最早可預訂日期：{{ dataList.priceList[0].startDate }}
</div>
</div>
</div> </div>
<div <div
class="q-pa-md" class="bg-white rounded-borders q-mt-md"
style="border-top: 1px solid #eee" v-if="dataList.priceList.length > 0"
v-if="showOrderPreview"
> >
<div class="q-pa-md bg-grey-2 row items-center rounded-borders"> <div class="q-pa-md row">
<div class="text-subtitle2 text-weight-bold q-mr-xl"> <div class="col">
關於此方案 <div
class="text-subtitle1 text-weight-bold row items-center"
v-if="$q.platform.is.desktop"
>
<span class="q-mr-md">行程標準出行方案</span>
<q-chip
square
color="orange"
size="sm"
text-color="grey-2"
class="text-light"
label="取消需二次確認"
/>
</div>
<div class="text-grey f12">
<ul class="q-pl-md no-margin">
<li
v-for="(x, i) in warnBuy"
:class="{
'q-mt-md':
$q.platform.is.desktop
| (i != 0 && $q.platform.is.mobile),
}"
:key="i"
>
{{ x }}
</li>
</ul>
</div>
</div>
<div class="" v-if="$q.platform.is.desktop">
<div class="row items-center">
<span class="product-price text-h6 q-mr-md"
>CNY
{{
moneyFormat(dataList.priceList[0].originalB2CPrice, 0)
}}</span
>
<q-btn
color="primary"
outline
:label="showOrderPreview ? '取消選擇' : '選擇'"
@click="changeShowOrderPreviewHandler"
class="q-px-lg"
/>
</div>
<div class="text-info q-mt-md text-right">
最早可預訂日期：{{ dataList.priceList[0].startDate }}
</div>
</div> </div>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconcancel"
label="取消需二次確認"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconroundcheck"
label="6個工作日內（不含例休假）確認"
/>
</div> </div>
<div class="q-mt-lg row" v-if="$q.platform.is.desktop"> <div
<div class="col"> class="q-pa-md"
<calendar style="border-top: 1px solid #eee"
:priceList="dataList.priceList" v-if="showOrderPreview"
@change="changeChosenDateHandler" >
ref="calendar" <div class="q-pa-md bg-grey-2 row items-center rounded-borders">
></calendar> <div class="text-subtitle2 text-weight-bold q-mr-xl">
關於此方案
</div>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconcancel"
label="取消需二次確認"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconroundcheck"
label="6個工作日內（不含例休假）確認"
/>
</div> </div>
<div class="col q-ml-xl"> <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<order-preview <div class="col">
:price="currentPrice" <calendar
@reset="resetHandler" :priceList="dataList.priceList"
:travel="dataList" @change="changeChosenDateHandler"
@changeCity="changeCityHandler" ref="calendar"
></order-preview> ></calendar>
</div>
<div class="col q-ml-xl">
<order-preview
:price="currentPrice"
@reset="resetHandler"
:travel="dataList"
@changeCity="changeCityHandler"
></order-preview>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</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 && $q.screen.width > 760 }"
>
<div
class="col q-ml-xl position-relative"
v-if="
dataList.priceList.length>0&&(!(dataList.priceList && dataList.priceList[0].teamType==2)&&!(dataList.currentPrice && dataList.currentPrice.teamType==2)) &&
currentHeight > days[0].top - 60 &&
currentHeight < navs[2].top &&
$q.platform.is.desktop
"
>
<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 + 100)"
: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 <div
:class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }" 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 && $q.screen.width > 760 }"
> >
<flight :price="currentPrice"></flight>
<div <div
class="text-h5 text-weight-bold text-left" class="col q-ml-xl position-relative"
ref="feature" v-if="
:class="{ dataList.priceList.length > 0 &&
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile, !(dataList.priceList && dataList.priceList[0].teamType == 2) &&
}" !(dataList.currentPrice && dataList.currentPrice.teamType == 2) &&
currentHeight > days[0].top - 60 &&
currentHeight < navs[2].top &&
$q.platform.is.desktop
"
> >
行程特色 <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 + 100)"
: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>
<div <div
class="q-mt-md trip-text q-pb-xl line-feature"
v-html="dataList.feature.featureContent"
v-if="dataList.feature.featureContent != ''"
></div>
<div
class="q-mt-md q-pb-xl line-feature"
ref="diyContext"
:style="{ zoom: zoomDiyContext }"
v-html="dataList.feature.featureHtml"
v-if="dataList.feature.featureHtml != ''"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="product"
:class="{ :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'col-8': $q.platform.is.desktop,
col: $q.platform.is.mobile,
}" }"
> >
行程介紹 <flight :price="currentPrice"></flight>
</div> <div
<div class="q-pb-xl"> class="text-h5 text-weight-bold text-left"
<smaple ref="feature"
v-if="dataList"
:trip="dataList"
:class="{ :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.desktop, 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" }"
></smaple> >
<template v-if="dataList.priceList.length>0&&(dataList.priceList && dataList.priceList[0].teamType==2)||(dataList.currentPrice && dataList.currentPrice.teamType==2)"> 行程特色
<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"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用說明
</div>
<div
class="text-subtitle1 text-weight-bold q-my-md"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用包含
</div>
<div
class="q-mt-md trip-text"
v-html="dataList.feature.feeInclude"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-subtitle1 text-weight-bold q-my-md"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用不含
</div>
<div
class="q-mt-md trip-text q-pb-xl"
v-html="dataList.feature.feeNonInclude"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
購買須知
</div>
<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
? dataList.feature.importantTip
: '暂无购买须知'
"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="tips"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
溫馨提示
</div>
<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 ? dataList.feature.warmTip : '暂无溫馨提示'
"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="cancelTips"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
取消政策
</div>
<div
class="q-mt-lg trip-text q-mb-xl"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
<ul class="no-padding text-grey-9 q-ml-md">
<li>所选日期 15 天（含）之前取消，收取手续费 0%</li>
<li class="q-mt-sm">所选日期 8 ~ 14 天之间取消，收取手续费 30%</li>
<li class="q-mt-sm">所选日期 4 ~ 7 天之间取消，收取手续费 50%</li>
<li class="q-mt-sm">所选日期 1 ~ 3 天之间取消，收取手续费 80%</li>
<li class="q-mt-sm">所选日期 0 ~ 0 天之间取消，收取手续费 100%</li>
</ul>
<div class="q-mt-lg f12 text-grey-6">
<q-icon name="iconfont icontishi" class="q-mr-sm" />
<span
>注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
2-5
个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14
个工作天内退款。</span
>
</div> </div>
</div> <div
</div> class="q-mt-md trip-text q-pb-xl line-feature large-feature"
v-html="dataList.feature.featureContent"
<template v-if="$q.platform.is.desktop"> v-if="dataList.feature.featureContent != ''"
<div class="col-1"></div> ></div>
<div class="col q-ml-xl position-relative"> <div
<div style="position: sticky; top: 100px"> class="q-mt-md q-pb-xl line-feature"
<div ref="diyContext"
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md" :style="{ zoom: zoomDiyContext }"
v-for="(x, i) in navs" v-html="dataList.feature.featureHtml"
:key="i" v-if="dataList.feature.featureHtml != ''"
@click="goScrollHandler(x.top + 20)" ></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="product"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
行程介紹
</div>
<div class="q-pb-xl">
<smaple
v-if="dataList"
:trip="dataList"
:class="{ :class="{
'active-trip-module': 'q-px-md': $q.screen.width < 1220 && $q.platform.is.desktop,
currentHeight >= x.top &&
(i == navs.length - 1 || currentHeight < navs[i + 1].top),
}" }"
></smaple>
<template
v-if="
(dataList.priceList.length > 0 &&
dataList.priceList &&
dataList.priceList[0].teamType == 2) ||
(dataList.currentPrice && dataList.currentPrice.teamType == 2)
"
> >
{{ x.display }} <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"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用說明
</div>
<div
class="text-subtitle1 text-weight-bold q-my-md"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用包含
</div>
<div
class="q-mt-md trip-text"
v-html="dataList.feature.feeInclude"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-subtitle1 text-weight-bold q-my-md"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用不含
</div>
<div
class="q-mt-md trip-text q-pb-xl"
v-html="dataList.feature.feeNonInclude"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
購買須知
</div>
<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
? dataList.feature.importantTip
: '暂无购买须知'
"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="tips"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
溫馨提示
</div>
<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
? dataList.feature.warmTip
: '暂无溫馨提示'
"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="cancelTips"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
取消政策
</div>
<div
class="q-mt-lg trip-text q-mb-xl"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
<ul class="no-padding text-grey-9 q-ml-md">
<li>所选日期 15 天（含）之前取消，收取手续费 0%</li>
<li class="q-mt-sm">
所选日期 8 ~ 14 天之间取消，收取手续费 30%
</li>
<li class="q-mt-sm">所选日期 4 ~ 7 天之间取消，收取手续费 50%</li>
<li class="q-mt-sm">所选日期 1 ~ 3 天之间取消，收取手续费 80%</li>
<li class="q-mt-sm">
所选日期 0 ~ 0 天之间取消，收取手续费 100%
</li>
</ul>
<div class="q-mt-lg f12 text-grey-6">
<q-icon name="iconfont icontishi" class="q-mr-sm" />
<span
>注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
2-5
个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14
个工作天内退款。</span
>
</div> </div>
</div> </div>
</div> </div>
</template>
<template v-if="$q.platform.is.desktop">
<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"
:key="i"
@click="goScrollHandler(x.top + 20)"
:class="{
'active-trip-module':
currentHeight >= x.top &&
(i == navs.length - 1 || currentHeight < navs[i + 1].top),
}"
>
{{ x.display }}
</div>
</div>
</div>
</template>
</div>
</div>
<div v-if="!dataList && !$q.loading.isActive" class="text-center q-my-xl">
<none-data
iconType="order"
title="沒有找到您想要的商品哦"
subtitle="趕緊去挑選心儀的旅遊產品吧"
></none-data>
</div> </div>
</div> </div>
</template> </template>
...@@ -613,7 +659,8 @@ import Trip from "src/components/trip/trip.vue"; ...@@ -613,7 +659,8 @@ import Trip from "src/components/trip/trip.vue";
import headStyle4 from "../components/trip/style4"; import headStyle4 from "../components/trip/style4";
import headStyle5 from "../components/trip/style5"; import headStyle5 from "../components/trip/style5";
import block from "src/components/trip/block/index"; import block from "src/components/trip/block/index";
import Flight from 'src/components/trip/flight.vue'; import Flight from "src/components/trip/flight.vue";
import NoneData from "src/components/common/noneData.vue";
export default { export default {
props: [], props: [],
data() { data() {
...@@ -629,8 +676,8 @@ export default { ...@@ -629,8 +676,8 @@ export default {
tcid: 0, tcid: 0,
teamType: 0, teamType: 0,
isGetPriceFlight: true, isGetPriceFlight: true,
pType: 1,//类型 1 来源B2C pType: 1, //类型 1 来源B2C
newConfigId: 0,//列表里的configId newConfigId: 0, //列表里的configId
}, },
currentPrice: {}, currentPrice: {},
isShow: false, isShow: false,
...@@ -724,7 +771,8 @@ export default { ...@@ -724,7 +771,8 @@ export default {
smaple, smaple,
Trip, Trip,
block, block,
Flight Flight,
NoneData
}, },
watch: { watch: {
days: { days: {
...@@ -764,7 +812,7 @@ export default { ...@@ -764,7 +812,7 @@ export default {
this.msg.tcid = decodeURIComponent(this.$route.params.tcid); this.msg.tcid = decodeURIComponent(this.$route.params.tcid);
} }
if (this.$route.params.newConfigId) { if (this.$route.params.newConfigId) {
this.msg.newConfigId = decodeURIComponent(this.$route.params.newConfigId) this.msg.newConfigId = decodeURIComponent(this.$route.params.newConfigId);
} }
}, },
mounted() { mounted() {
...@@ -777,17 +825,17 @@ export default { ...@@ -777,17 +825,17 @@ export default {
// this.getCarData(); // this.getCarData();
}, },
methods: { methods: {
changeShowOrderPreviewHandler(){ changeShowOrderPreviewHandler() {
this.showOrderPreview=!this.showOrderPreview this.showOrderPreview = !this.showOrderPreview;
if(!this.showOrderPreview){ if (!this.showOrderPreview) {
// this.currentPrice=null // this.currentPrice=null
if(this.currentPrice){ if (this.currentPrice) {
this.currentPrice.isSupportChildren=null this.currentPrice.isSupportChildren = null;
this.currentPrice.unionCityList=null this.currentPrice.unionCityList = null;
this.currentPrice.singleRoomPrice=0 this.currentPrice.singleRoomPrice = 0;
this.currentPrice.originalB2CPrice=0 this.currentPrice.originalB2CPrice = 0;
} }
this.changeTripShowHandler() this.changeTripShowHandler();
} }
}, },
getTopNum(x) { getTopNum(x) {
...@@ -881,37 +929,44 @@ export default { ...@@ -881,37 +929,44 @@ export default {
}, },
resetHandler() { resetHandler() {
// this.currentPrice=null; // this.currentPrice=null;
if(this.currentPrice){ if (this.currentPrice) {
this.currentPrice.isSupportChildren=null this.currentPrice.isSupportChildren = null;
this.currentPrice.unionCityList=null this.currentPrice.unionCityList = null;
this.currentPrice.singleRoomPrice=0 this.currentPrice.singleRoomPrice = 0;
this.currentPrice.originalB2CPrice=0 this.currentPrice.originalB2CPrice = 0;
} }
if(this.$q.platform.is.mobile) if (this.$q.platform.is.mobile) this.$refs.calendarMobile.reset();
this.$refs.calendarMobile.reset() else this.$refs.calendar.reset();
else
this.$refs.calendar.reset();
}, },
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.currentPrice.RealPrice = this.currentPrice.RealPrice?this.currentPrice.RealPrice:this.currentPrice.originalB2CPrice this.currentPrice.RealPrice = this.currentPrice.RealPrice
this.currentPrice.originalB2CPrice = this.currentPrice.RealPrice ? this.currentPrice.RealPrice
if(this.currentPrice.unionCityList && this.currentPrice.unionCityList.length>0 && this.dataList.startCityId!=0){ : this.currentPrice.originalB2CPrice;
if(this.currentPrice.unionCityList.findIndex(x=>x.cityId==this.dataList.startCityId)==-1){ this.currentPrice.originalB2CPrice = this.currentPrice.RealPrice;
this.currentPrice.unionCityList.splice(0,0,{ if (
cityId:this.dataList.startCityId, this.currentPrice.unionCityList &&
cityName:this.dataList.startCityName this.currentPrice.unionCityList.length > 0 &&
}) this.dataList.startCityId != 0
) {
if (
this.currentPrice.unionCityList.findIndex(
(x) => x.cityId == this.dataList.startCityId
) == -1
) {
this.currentPrice.unionCityList.splice(0, 0, {
cityId: this.dataList.startCityId,
cityName: this.dataList.startCityName,
});
} }
} }
if(this.$q.platform.is.mobile){ if (this.$q.platform.is.mobile) {
this.$refs.qDateProxy.hide(); this.$refs.qDateProxy.hide();
} }
this.$forceUpdate() this.$forceUpdate();
this.$nextTick(()=>{ this.$nextTick(() => {
this.changeTripShowHandler() this.changeTripShowHandler();
}); });
}, },
showDialog() { showDialog() {
...@@ -923,133 +978,134 @@ export default { ...@@ -923,133 +978,134 @@ export default {
}, },
getData() { getData() {
this.$q.loading.show(); this.$q.loading.show();
console.log(this.$q.loading)
this.apipost( this.apipost(
"b2b_get_GetB2BTravelInfoV1", "b2b_get_GetB2BTravelInfoV1",
this.msg, this.msg,
(r) => { (r) => {
if (r.data.resultCode == 1) { try {
this.dataList = r.data.data; if (r.data.resultCode == 1 && r.data.data.id>0) {
if (this.dataList.dayList && this.dataList.dayList.length > 0) { this.dataList = r.data.data;
this.dataList.dayList.forEach((item) => { if (this.dataList.dayList && this.dataList.dayList.length > 0) {
item.slide = 0; this.dataList.dayList.forEach((item) => {
}); item.slide = 0;
if (r.data.data.scenicList) {
r.data.data.scenicList.forEach((x) => {
if (x.cityName) {
this.citys.push(x.cityName);
}
}); });
if(this.citys.length>0){ if (r.data.data.scenicList) {
this.citys = Array.from(new Set(this.citys)) r.data.data.scenicList.forEach((x) => {
if (x.cityName) {
this.citys.push(x.cityName);
}
});
if (this.citys.length > 0) {
this.citys = Array.from(new Set(this.citys));
}
} }
} }
} this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
this.dataList.imgCover = JSON.parse(this.dataList.imgCover); this.dayList = this.dataList.dayList;
this.dayList = this.dataList.dayList;
this.isShow = true; this.isShow = true;
this.isDirect = this.dataList.isDirect; this.isDirect = this.dataList.isDirect;
if (this.dataList.videoStr && this.dataList.videoStr != "") { if (this.dataList.videoStr && this.dataList.videoStr != "") {
this.options.loop = false; this.options.loop = false;
this.options.currentPage = 1; this.options.currentPage = 1;
this.$nextTick(() => {
setTimeout(() => {
let t = document.querySelectorAll(".slider-wrapper");
if (t.length > 0) {
let d = t[0].getBoundingClientRect();
this.videoPosition = d.top + d.height;
}
}, 1000);
});
}
this.$nextTick(() => { this.$nextTick(() => {
setTimeout(() => { if (this.dataList.feature.featureHtml != "") {
let t = document.querySelectorAll(".slider-wrapper"); let tw =
if (t.length > 0) { parseFloat(
let d = t[0].getBoundingClientRect(); this.$refs.diyContext.getBoundingClientRect().width
this.videoPosition = d.top + d.height; ) / 1123.0;
}
}, 1000);
});
}
this.$nextTick(() => {
if (this.dataList.feature.featureHtml != "") {
let tw =
parseFloat(
this.$refs.diyContext.getBoundingClientRect().width
) / 1123.0;
let divArr = document.querySelectorAll("#setZoom>div"); let divArr = document.querySelectorAll("#setZoom>div");
for (let i = 0; i < divArr.length; i++) { for (let i = 0; i < divArr.length; i++) {
let div = divArr[i]; let div = divArr[i];
if (this.$q.platform.is.mobile) { if (this.$q.platform.is.mobile) {
div.style.zoom = div.style.zoom =
div.offsetWidth > 1000 div.offsetWidth > 1000
? 0.999 ? 0.999
: document.documentElement.clientWidth / 1123.0; : document.documentElement.clientWidth / 1123.0;
} else { } else {
div.style.zoom = 1; div.style.zoom = 1;
}
} }
}
this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2); this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
} }
setTimeout(() => { setTimeout(() => {
this.navs.forEach((x) => { this.navs.forEach((x) => {
x.top = x.top =
this.$refs[x.val].getBoundingClientRect().top + this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight -
60;
});
this.priceListHeight =
this.$refs.pricelist.getBoundingClientRect().top +
this.currentHeight - this.currentHeight -
60; 60;
}); this.days = [];
this.priceListHeight = this.dayList.forEach((x) => {
this.$refs.pricelist.getBoundingClientRect().top + let dayListObj = {
this.currentHeight - val: "day" + x.dayNum,
60; top: 0,
this.days = []; isActive: false,
this.dayList.forEach((x) => { display: x.dayNum > 9 ? x.dayNum : "0" + x.dayNum,
let dayListObj = { };
val: "day" + x.dayNum, this.days.push(dayListObj);
top: 0, });
isActive: false, }, 1000);
display: x.dayNum > 9 ? x.dayNum : "0" + x.dayNum,
};
this.days.push(dayListObj);
});
}, 1000);
try { try {
document document
.querySelector("#scrollId .q-page-container") .querySelector("#scrollId .q-page-container")
.addEventListener("scroll", this.handleScrollDay); .addEventListener("scroll", this.handleScrollDay);
} catch (error) { } catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container')) // console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error) // console.log('异常信息', error)
} }
}); });
} else { }
this.$q.notify({ } catch (error) {}
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide(); this.$q.loading.hide();
}, },
null e=>{
this.$q.loading.hide();
}
); );
}, },
changeCityHandler(unionCity){ changeCityHandler(unionCity) {
this.currentPrice.originalB2CPrice=this.currentPrice.RealPrice this.currentPrice.originalB2CPrice = this.currentPrice.RealPrice;
if(unionCity.cityId!=this.dataList.startCityId){ if (unionCity.cityId != this.dataList.startCityId) {
if(unionCity.backFlight && unionCity.backFlight.addPrice){ if (unionCity.backFlight && unionCity.backFlight.addPrice) {
this.currentPrice.originalB2CPrice+=unionCity.backFlight.addPrice this.currentPrice.originalB2CPrice += unionCity.backFlight.addPrice;
} }
if(unionCity.goFlight && unionCity.goFlight.addPrice){ if (unionCity.goFlight && unionCity.goFlight.addPrice) {
this.currentPrice.originalB2CPrice+=unionCity.goFlight.addPrice this.currentPrice.originalB2CPrice += unionCity.goFlight.addPrice;
} }
} }
console.log(this.$refs) console.log(this.$refs);
if(this.$q.platform.is.desktop) if (this.$q.platform.is.desktop)
this.$refs.calendar.changePriceHandler(this.currentPrice.startDate,this.currentPrice.originalB2CPrice) this.$refs.calendar.changePriceHandler(
this.$forceUpdate() this.currentPrice.startDate,
this.currentPrice.originalB2CPrice
);
this.$forceUpdate();
}, },
// 获取车的详情 // 获取车的详情
getCarData() { getCarData() {
this.$q.loading.show(); this.$q.loading.show();
this.apipost( this.apipost(
"b2c_get_GetCarSingleProductDetail", "b2c_get_GetCarSingleProductDetail",
{ ProductId: '16' }, { ProductId: "16" },
(r) => { (r) => {
if (r.data.resultCode == 1) { if (r.data.resultCode == 1) {
this.dataList = r.data.data; this.dataList = r.data.data;
...@@ -1168,7 +1224,7 @@ export default { ...@@ -1168,7 +1224,7 @@ export default {
</script> </script>
<style> <style>
.line-feature *{ .line-feature * {
line-height: normal !important; line-height: normal !important;
} }
.slider-item { .slider-item {
...@@ -1243,4 +1299,7 @@ export default { ...@@ -1243,4 +1299,7 @@ export default {
#setZoom > div { #setZoom > div {
zoom: calc(100 / 1000); zoom: calc(100 / 1000);
} }
.large-feature img{
width:100% !important
}
</style> </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