Skip to content

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

调整

parent 1b005a83
Hide whitespace changes
Inline Side-by-side
Showing with 412 additions and 303 deletions
src/components/goods/style1.vue
View file @ cbd1d523
<template> <template>
<div class="rounded-borders overflow-hidden q-pb-md" :style="{'width':width,'background-color':bgColor}" v-if="product"> <div class="rounded-borders overflow-hidden q-pb-md" :style="{'width':width,'background-color':bgColor}" v-if="product">
<q-img :src="product.ImgCover" spinner-color="white" :ratio="16/9" fit="cover"> <q-img :src="product.ImgCover==''?'http://www.oytour.com':product.ImgCover" spinner-color="white" :ratio="16/9" fit="cover">
<div class="absolute-top text-shadow" style="background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));"> <div class="absolute-top text-shadow" style="background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));">
{{ formatEnum(product.ProductType) }} {{ formatEnum(product.ProductType) }}
</div> </div>
<template v-slot:error>
<div class="absolute-full flex flex-center bg-grey-3 text-white">
暫無圖片
</div>
</template>
</q-img> </q-img>
<div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height: 74px;" @click="CommonJump(product,{},'blank')">{{ product.Title }}</div> <div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height: 74px;" @click="CommonJump(product,{},'blank')">{{ product.Title }}</div>
<div class="text-subtitle2 text-weight-bolder text-dark q-mx-md"> <div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
......
src/components/goods/style2.vue
View file @ cbd1d523
<template> <template>
<!-- <div class="rounded-borders overflow-hidden q-pb-md" :style="{'width':width,'background-color':bgColor}" v-if="product">
<q-img :src="product.ImgCover" spinner-color="white" :ratio="16/9" fit="cover" />
<div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer">{{ product.Title }}{{ product.Title }}{{ product.Title }}{{ product.Title }}{{ product.Title }}</div>
<div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
<span>CNY {{moneyFormat(product.B2CPrice,2)}}</span>
<span class="f12 q-ml-sm">起</span>
</div>
</div> -->
<div class="rounded-borders overflow-hidden" v-if="product"> <div class="rounded-borders overflow-hidden" v-if="product">
<div class="row" :style="{'background-color':bgColor}" > <div class="row" :style="{'background-color':bgColor}" >
<q-img :src="product.ImgCover" spinner-color="dark" :ratio="4/3" fit="cover" class=" col-5" > <q-img :src="product.ImgCover==''?'http://www.oytour.com':product.ImgCover" spinner-color="dark" :ratio="4/3" fit="cover" class=" col-5" >
<div class="absolute-top text-shadow" style="background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));"> <div class="absolute-top text-shadow" style="background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));">
{{ formatEnum(product.ProductType) }} {{ formatEnum(product.ProductType) }}
</div> </div>
<template v-slot:error>
<div class="absolute-full flex flex-center bg-grey-3 text-white">
暫無圖片
</div>
</template>
</q-img> </q-img>
<div class="q-px-md col"> <div class="q-px-md col">
<div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height:50px;" @click="CommonJump(product,{},'blank')">{{ product.Title }}</div> <div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height:50px;" @click="CommonJump(product,{},'blank')">{{ product.Title }}</div>
......
src/pages/ScenicSpotTicket/details.vue
View file @ cbd1d523
<template> <template>
<div style="min-height: 80vh"> <div style="min-height: 80vh">
<div <div
style=" style="
position: fixed; position: fixed;
...@@ -29,7 +28,10 @@ ...@@ -29,7 +28,10 @@
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"
> >
<span v-if="priceList&&priceList.length">{{dataList.CurrencyCode}} {{ moneyFormat(priceList[0].originalB2CPrice, 0) }}</span> <span v-if="priceList && priceList.length"
>{{ dataList.CurrencyCode }}
{{ moneyFormat(priceList[0].originalB2CPrice, 0) }}</span
>
<span class="q-ml-sm f12 text-grey-7">起</span> <span class="q-ml-sm f12 text-grey-7">起</span>
</span> </span>
<q-btn <q-btn
...@@ -58,63 +60,91 @@ ...@@ -58,63 +60,91 @@
class="cursor-pointer" class="cursor-pointer"
@click="CommonJump('/index', {})" @click="CommonJump('/index', {})"
/> />
<q-breadcrumbs-el label="日本" class="cursor-pointer" /> <q-breadcrumbs-el
<q-breadcrumbs-el> :label="dataList.CountryName"
<span v-for="(x, i) in citys" :key="i"> class="cursor-pointer"
<span class="cursor-pointer">{{ x }} </span> />
<span v-if="i + 1 != citys.length" class="q-mr-sm">，</span>
</span>
</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.Name"
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 class="relative">
<div <div class="row rounded-borders" style="height: 35vh">
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0" <div class="col">
class="overflow-hidden rounded-borders" <q-img
> :src="dataList.imgCover[0]"
<slider spinner-color="dark"
ref="slider" spinner-size="20px"
:options="options" class="rounded-borders"
@slide="slideHandler" height="35vh"
style="height: 100%" />
</div>
<div
class="q-ml-sm column"
v-if="dataList.imgCover.length > 1"
:style="{ width: dataList.imgCover.length < 3 ? '30%' : '20%' }"
> >
<slideritem <div class="col rounded-borders overflow-hidden">
v-if="dataList.videoStr" <q-img
style="width: 80%" :src="dataList.imgCover[1]"
class="q-mx-sm" spinner-color="dark"
key="video" spinner-size="20px"
class="rounded-borders"
height="100%"
/>
</div>
<div
v-if="dataList.imgCover.length >= 3"
class="col q-mt-sm rounded-borders overflow-hidden"
> >
<vue-core-video-players <q-img
ref="video" :src="dataList.imgCover[2]"
:src="dataList.videoStr" spinner-color="dark"
:title="dataList.title" spinner-size="20px"
:muted="true" class=""
:autoplay="false" height="100%"
@play="playHandler"
@pause="pauseHandler"
@seeked="seekedChangeHandler"
@timeupdate="timeChangeHandler"
logo="../statics/img/transparent_logo.png"
:loop="false"
id="trip_video"
/> />
</slideritem> </div>
<slideritem </div>
v-for="(item, index) in dataList.imgCover" <div
:key="index" class="q-ml-sm column"
style="width: 80%" v-if="dataList.imgCover.length > 3"
class="q-mx-sm" style="width: 20%"
>
<div class="col rounded-borders overflow-hidden">
<q-img
:src="dataList.imgCover[3]"
spinner-color="dark"
spinner-size="20px"
class="rounded-borders"
height="100%"
/>
</div>
<div
v-if="dataList.imgCover.length >= 5"
class="col q-mt-sm rounded-borders overflow-hidden"
> >
<q-img :src="item" spinner-color="grey" spinner-size="20px" /> <q-img
</slideritem> :src="dataList.imgCover[4]"
<div slot="loading">loading...</div> spinner-color="dark"
</slider> spinner-size="20px"
class=""
height="100%"
/>
</div>
</div>
</div>
<div
class="absolute q-py-sm q-px-md row items-center text-white rounded-borders cursor-pointer light-shadow"
style="bottom: 20px; right: 20px; background: rgba(0, 0, 0, 0.5)"
@click="showPreview(dataList.imgCover, 0)"
>
<q-icon name="iconfont iconimage" size="16px"></q-icon>
<span class="q-ml-sm">查看照片</span>
</div> </div>
</div> </div>
<div <div
...@@ -131,13 +161,7 @@ ...@@ -131,13 +161,7 @@
size="16px" size="16px"
class="q-mr-sm" class="q-mr-sm"
/> />
<span <span>{{ dataList.SelffetchAddress }} </span>
>{{dataList.CountryName}} -
<span>
<span class="cursor-pointer">{{dataList.CityName}}</span>
</span>
</span>
</div> </div>
<div class="q-mt-md row"> <div class="q-mt-md row">
<q-chip <q-chip
...@@ -146,11 +170,12 @@ ...@@ -146,11 +170,12 @@
icon="iconfont iconOwner-1" icon="iconfont iconOwner-1"
label=" 印象自組團" label=" 印象自組團"
/> />
<q-chip <q-chip
class="transparent q-mr-xl no-padding" class="transparent q-mr-xl no-padding"
square square
icon="iconfont icontime" icon="iconfont icontime"
label="行程時間 1 天" /> label="行程時間 1 天"
/>
<q-chip <q-chip
class="transparent q-mr-xl no-padding" class="transparent q-mr-xl no-padding"
square square
...@@ -168,9 +193,16 @@ ...@@ -168,9 +193,16 @@
$q.platform.is.mobile, $q.platform.is.mobile,
}" }"
> >
<div class="product-price text-h6" v-if="priceList&&priceList.length>0"> <div
class="text-h6 text-right"
v-if="priceList && priceList.length > 0"
>
<!-- CNY：{{ dataList. }} --> <!-- CNY：{{ dataList. }} -->
{{dataList.CurrencyCode?dataList.CurrencyCode:'CNY'}}：{{ moneyFormat(priceList[0].originalB2CPrice, 0) }} <span class="text-subtitle2"
>{{
dataList.CurrencyCode ? dataList.CurrencyCode : "CNY"
}}：</span
>{{ moneyFormat(priceList[0].originalB2CPrice, 0) }}
<span class="f12 text-grey-6">起</span> <span class="f12 text-grey-6">起</span>
</div> </div>
<div v-else class="text-subtitle1 text-grey-6">暫無報價</div> <div v-else class="text-subtitle1 text-grey-6">暫無報價</div>
...@@ -178,7 +210,7 @@ ...@@ -178,7 +210,7 @@
color="primary" color="primary"
label="選擇方案" label="選擇方案"
unelevated unelevated
:disable="priceList.length>0?false:true" :disable="priceList.length > 0 ? false : true"
@click="goScrollHandler(priceListHeight)" @click="goScrollHandler(priceListHeight)"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }" :class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/> />
...@@ -242,136 +274,132 @@ ...@@ -242,136 +274,132 @@
style="max-width: 1200px; margin-left: auto; margin-right: auto" style="max-width: 1200px; margin-left: auto; margin-right: auto"
> >
<div class="text-h6">選擇方案</div> <div class="text-h6">選擇方案</div>
<div <div
class="rounded-borders bg-white q-pa-md q-mt-md" class="rounded-borders bg-white q-pa-md q-mt-md"
v-if="$q.platform.is.mobile" v-if="$q.platform.is.mobile"
>
<q-field
class="q-mt-md"
stack-label
label="選擇日期、選項"
standout
dense
> >
<q-field <div class="self-center full-width no-outline" tabindex="0">
class="q-mt-md" {{ currentPrice.startDate }}
stack-label </div>
label="選擇日期、選項" <q-popup-proxy ref="qDateProxy">
standout <calendar
dense class="bg-white q-pa-md"
> :priceList="priceList"
<div class="self-center full-width no-outline" tabindex="0"> @change="changeChosenDateHandler"
{{ currentPrice.startDate }} ref="calendar"
></calendar>
</q-popup-proxy>
</q-field>
<order-preview
:dataList="dataList"
:configId="msg.configId"
:Month="currentYM.str"
:price="currentPrice"
@reset="resetHandler"
@getPriceList="getPriceList"
></order-preview>
</div>
<!--方案选择区 -->
<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="priceList && 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></span>
<q-chip
square
color="orange"
size="sm"
text-color="grey-2"
class="text-light"
label="不可取消"
/>
</div> </div>
<q-popup-proxy ref="qDateProxy"> <!-- <div class="text-grey f12">
<calendar
class="bg-white q-pa-md"
:priceList="priceList"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
</q-popup-proxy>
</q-field>
<order-preview
:dataList="dataList"
:configId="msg.configId"
:Month="currentYM.str"
:price="currentPrice"
@reset="resetHandler"
@getPriceList="getPriceList"
></order-preview>
</div>
<!--方案选择区 -->
<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="priceList && 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"> <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"> <li v-for="(x, i) in warnBuy" :class="{'q-mt-md':$q.platform.is.desktop|(i!=0&&$q.platform.is.mobile)}" :key="i">
{{ x }} {{ x }}
</li> </li>
</ul> </ul>
</div> --> </div> -->
</div>
<div class="" v-if="$q.platform.is.desktop">
<div class="row items-center">
<span class="product-price text-h6 q-mr-md"
>{{ dataList.CurrencyCode ? dataList.CurrencyCode : "CNY" }}
{{ moneyFormat(priceList[0].originalB2CPrice, 0) }}</span
>
<q-btn
color="primary"
outline
:label="showOrderPreview ? '取消選擇' : '選擇'"
@click="changeShowOrderPreviewHandler"
class="q-px-lg"
/>
</div> </div>
<div class="" v-if="$q.platform.is.desktop"> <div class="text-info q-mt-md text-right">
<div class="row items-center"> 最早可預訂日期：{{ priceList[0].startDate }}
<span class="product-price text-h6 q-mr-md"
>{{dataList.CurrencyCode?dataList.CurrencyCode:'CNY'}}
{{
moneyFormat(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">
最早可預訂日期：{{ priceList[0].startDate }}
</div>
</div> </div>
</div> </div>
<div </div>
class="q-pa-md" <div
style="border-top: 1px solid #eee" class="q-pa-md"
v-if="showOrderPreview" style="border-top: 1px solid #eee"
> v-if="showOrderPreview"
<div class="q-pa-md bg-grey-2 row items-center rounded-borders"> >
<div class="text-subtitle2 text-weight-bold q-mr-xl"> <div class="q-pa-md bg-grey-2 row items-center rounded-borders">
關於此方案 <div class="text-subtitle2 text-weight-bold q-mr-xl">
</div> 關於此方案
<q-chip </div>
class="transparent q-mr-xl no-padding" <q-chip
square class="transparent q-mr-xl no-padding"
icon="iconfont iconquxiao" square
label="不可取消" icon="iconfont iconquxiao"
/> label="不可取消"
<q-chip />
class="transparent q-mr-xl no-padding" <q-chip
square class="transparent q-mr-xl no-padding"
icon="iconfont iconroundcheck" square
label="6個工作日內（不含例休假）確認" icon="iconfont iconroundcheck"
/> label="6個工作日內（不含例休假）確認"
</div> />
<div class="q-mt-lg row" v-if="$q.platform.is.desktop"> </div>
<div class="col"> <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<calendar <div class="col">
:priceList="priceList" <calendar
@change="changeChosenDateHandler" :priceList="priceList"
ref="calendar" @change="changeChosenDateHandler"
></calendar> ref="calendar"
</div> ></calendar>
<div class="col q-ml-xl"> </div>
<order-preview <div class="col q-ml-xl">
:dataList="dataList" <order-preview
:configId="msg.configId" :dataList="dataList"
:Month="currentYM.str" :configId="msg.configId"
:price="currentPrice" :Month="currentYM.str"
@reset="resetHandler" :price="currentPrice"
@getPriceList="getPriceList" @reset="resetHandler"
></order-preview> @getPriceList="getPriceList"
</div> ></order-preview>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
...@@ -384,9 +412,15 @@ ...@@ -384,9 +412,15 @@
<div <div
:class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }" :class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }"
> >
<div ref="product" class="text-h5 text-weight-bold text-left q-mt-xl" :class="{ <div
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile, ref="product"
}">產品介紹</div> class="text-h5 text-weight-bold text-left q-mt-xl"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
產品介紹
</div>
<div <div
class="q-mt-md" class="q-mt-md"
ref="diyContext" ref="diyContext"
...@@ -399,20 +433,49 @@ ...@@ -399,20 +433,49 @@
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" }"
> >
<div v-if="dataList.OpeningHours" class="row"><span>开放时间</span><div>{{dataList.OpeningHours}} {{dataList.OpeningHours.substring(6,13)}} 停止入场</div></div> <div v-if="dataList.OpeningHours" class="row">
<div v-if="dataList.GeographicTag||dataList.ScenicSpotTag" class="row"><span>景区特色</span> <span>开放时间</span>
<div> <div>
<q-chip v-if="dataList.GeographicTag" size="14px" clickable v-for="(s,i) in dataList.GeographicTag.split(',')" :key="i" {{ dataList.OpeningHours }}
text-color="white" {{ dataList.OpeningHours.substring(6, 13) }} 停止入场
color="primary" square>{{ s }}</q-chip> </div>
<q-chip v-if="dataList.ScenicSpotTag" size="14px" clickable v-for="(s,i) in dataList.ScenicSpotTag.split(',')" :key="i"
text-color="dark"
color="grey-3" square>{{ s }}</q-chip>
</div> </div>
<div
v-if="dataList.GeographicTag || dataList.ScenicSpotTag"
class="row"
>
<span>景区特色</span>
<div>
<q-chip
v-if="dataList.GeographicTag"
size="14px"
clickable
v-for="(s, i) in dataList.GeographicTag.split(',')"
:key="i"
text-color="white"
color="primary"
square
>{{ s }}</q-chip
>
<q-chip
v-if="dataList.ScenicSpotTag"
size="14px"
clickable
v-for="(s, i) in dataList.ScenicSpotTag.split(',')"
:key="i"
text-color="dark"
color="grey-3"
square
>{{ s }}</q-chip
>
</div>
</div>
<div v-if="dataList.TrafficInfo" class="row">
<span>交通说明</span>
<div>{{ dataList.TrafficInfo ? dataList.TrafficInfo : "-" }}</div>
</div> </div>
<div v-if="dataList.TrafficInfo" class="row"><span>交通说明</span><div>{{dataList.TrafficInfo?dataList.TrafficInfo:'-'}}</div></div>
</div> </div>
<div <div
class="text-h5 text-weight-bold text-left q-mt-xl" class="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning" ref="warning"
...@@ -448,15 +511,27 @@ ...@@ -448,15 +511,27 @@
style="border: 1px dashed var(--q-color-warning)" style="border: 1px dashed var(--q-color-warning)"
:class="{ :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"> }"
<div class="q-pa-md" style="border-bottom: 1px dashed var(--q-color-warning)"> >
<div class="text-weight-bold text-h6">地點名稱：{{dataList.Name}}</div> <div
<div class="text-grey-9">地址：{{`${dataList.Address}`}}</div> class="q-pa-md"
style="border-bottom: 1px dashed var(--q-color-warning)"
>
<div class="text-weight-bold text-h6">
地點名稱：{{ dataList.Name }}
</div>
<div class="text-grey-9">地址：{{ `${dataList.Address}` }}</div>
</div> </div>
<div class="q-pa-md" :class="{ <div
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, class="q-pa-md"
}"> :class="{
<componentsMap v-if="AddressObj.Lng&&AddressObj.Lat" :AddressObj="AddressObj"/> 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
<componentsMap
v-if="AddressObj.Lng && AddressObj.Lat"
:AddressObj="AddressObj"
/>
<div v-else class="card text-center">经纬度未知</div> <div v-else class="card text-center">经纬度未知</div>
</div> </div>
</div> </div>
...@@ -473,9 +548,7 @@ ...@@ -473,9 +548,7 @@
class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl" class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-info)" style="border: 1px dashed var(--q-color-info)"
v-html=" v-html="
dataList.About dataList.About ? dataList.About || '暂无溫馨提示' : '暂无溫馨提示'
? dataList.About || '暂无溫馨提示'
: '暂无溫馨提示'
" "
:class="{ :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
...@@ -516,7 +589,6 @@ ...@@ -516,7 +589,6 @@
</div> </div>
<template v-if="$q.platform.is.desktop"> <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">
...@@ -558,7 +630,7 @@ export default { ...@@ -558,7 +630,7 @@ export default {
return { return {
AddressObj: null, AddressObj: null,
priceList: [], priceList: [],
selectedId: '', selectedId: "",
currentYM: { year: 2023, month: 2, str: "2023-02" }, // 当前年月 currentYM: { year: 2023, month: 2, str: "2023-02" }, // 当前年月
isCurrent: false, isCurrent: false,
isLast: false, isLast: false,
...@@ -696,13 +768,13 @@ export default { ...@@ -696,13 +768,13 @@ export default {
}, },
mounted() { mounted() {
window.addEventListener("scroll", this.handleScroll); window.addEventListener("scroll", this.handleScroll);
const timeStamp = Date.now() const timeStamp = Date.now();
const formattedString = date.formatDate(timeStamp, 'YYYY-MM') const formattedString = date.formatDate(timeStamp, "YYYY-MM");
this.currentYM = { this.currentYM = {
year: date.formatDate(timeStamp, 'YYYY'), year: date.formatDate(timeStamp, "YYYY"),
month: date.formatDate(timeStamp, 'MM'), month: date.formatDate(timeStamp, "MM"),
str: formattedString str: formattedString,
} };
if (localStorage.baseifo) { if (localStorage.baseifo) {
this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo")); this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
} }
...@@ -710,14 +782,14 @@ export default { ...@@ -710,14 +782,14 @@ export default {
this.getData(); this.getData();
}, },
methods: { methods: {
changeShowOrderPreviewHandler(){ changeShowOrderPreviewHandler() {
this.showOrderPreview=!this.showOrderPreview this.showOrderPreview = !this.showOrderPreview;
if(!this.showOrderPreview){ if (!this.showOrderPreview) {
this.changeTripShowHandler() this.changeTripShowHandler();
} }
this.dataList.TicketList.forEach(x=>{ this.dataList.TicketList.forEach((x) => {
x.checked = false x.checked = false;
}) });
}, },
changeTripShowHandler() { changeTripShowHandler() {
this.$nextTick(() => { this.$nextTick(() => {
...@@ -729,12 +801,12 @@ export default { ...@@ -729,12 +801,12 @@ export default {
}); });
}); });
}, },
getPriceList(Arr,id){ getPriceList(Arr, id) {
this.priceList = JSON.parse(Arr) this.priceList = JSON.parse(Arr);
if(this.selectedId === id) { if (this.selectedId === id) {
this.selectedId = '' this.selectedId = "";
} else { } else {
this.selectedId = id this.selectedId = id;
} }
}, },
getTopNum(x) { getTopNum(x) {
...@@ -771,7 +843,7 @@ export default { ...@@ -771,7 +843,7 @@ export default {
window.removeEventListener("scroll", this.handleScroll); window.removeEventListener("scroll", this.handleScroll);
} }
}, },
getScroll() { getScroll() {
return { return {
left: left:
...@@ -811,18 +883,26 @@ export default { ...@@ -811,18 +883,26 @@ export default {
}, },
resetHandler() { resetHandler() {
this.currentPrice.startDate = ""; this.currentPrice.startDate = "";
if(!this.$q.platform.is.mobile){ if (!this.$q.platform.is.mobile) {
this.$refs.calendar.reset(); 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));
if(this.$q.platform.is.mobile){ if (this.$q.platform.is.mobile) {
this.$refs.qDateProxy.hide(); this.$refs.qDateProxy.hide();
} }
}, },
showPreview(images, index = 0) {
this.$viewerApi({
options: {
initialViewIndex: index,
},
images,
});
},
showDialog() { showDialog() {
this.isShowDialog = true; this.isShowDialog = true;
}, },
...@@ -839,17 +919,21 @@ export default { ...@@ -839,17 +919,21 @@ export default {
(r) => { (r) => {
if (r.data.resultCode == 1) { if (r.data.resultCode == 1) {
let addList = function (arr) { let addList = function (arr) {
arr.forEach(item => { arr.forEach((item) => {
item.checked = false item.checked = false;
item.Count = 1 item.Count = 1;
}); });
}; };
addList(r.data.data.TicketList); addList(r.data.data.TicketList);
this.dataList = r.data.data; this.dataList = r.data.data;
this.selectedId = this.dataList.TicketList.find(x=>x.Id) this.selectedId = this.dataList.TicketList.find((x) => x.Id);
this.dataList.imgCover = this.dataList.PicPathList; this.dataList.imgCover = this.dataList.PicPathList;
this.AddressObj = this.dataList this.AddressObj = this.dataList;
this.AddressObj.Address = `${this.dataList.CountryName?this.dataList.CountryName+'-':''}${this.dataList.CityName?this.dataList.CityName+'-':''}${this.dataList.ProvinceName?this.dataList.ProvinceName+'-':''}${this.dataList.Address}` this.AddressObj.Address = `${
this.dataList.CountryName ? this.dataList.CountryName + "-" : ""
}${this.dataList.CityName ? this.dataList.CityName + "-" : ""}${
this.dataList.ProvinceName ? this.dataList.ProvinceName + "-" : ""
}${this.dataList.Address}`;
this.isShow = true; this.isShow = true;
if (this.dataList.videoStr && this.dataList.videoStr != "") { if (this.dataList.videoStr && this.dataList.videoStr != "") {
this.options.loop = false; this.options.loop = false;
...@@ -865,11 +949,13 @@ export default { ...@@ -865,11 +949,13 @@ export default {
}); });
} }
this.$nextTick(() => { this.$nextTick(() => {
this.getCarPriceData() this.getCarPriceData();
setTimeout(() => { setTimeout(() => {
this.navs.forEach((x) => { this.navs.forEach((x) => {
x.top = x.top =
this.$refs[x.val].getBoundingClientRect().top + this.currentHeight - 60; this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight -
60;
}); });
this.priceListHeight = this.priceListHeight =
this.$refs.pricelist.getBoundingClientRect().top + this.$refs.pricelist.getBoundingClientRect().top +
...@@ -886,7 +972,6 @@ export default { ...@@ -886,7 +972,6 @@ export default {
// console.log('异常信息', error) // console.log('异常信息', error)
} }
}); });
} else { } else {
this.$q.notify({ this.$q.notify({
type: "negative", type: "negative",
...@@ -901,37 +986,45 @@ export default { ...@@ -901,37 +986,45 @@ export default {
}, },
// 获取报价的详情 // 获取报价的详情
getCarPriceData() { getCarPriceData() {
this.priceList = [] this.priceList = [];
this.apipost( this.apipost(
"b2c_get_GetTicketCouponsMonthPriceAll", "b2c_get_GetTicketCouponsMonthPriceAll",
{ {
CouponsId: this.msg.configId, CouponsId: this.msg.configId,
// TicketId: this.dataList.TicketList[0].Id, // TicketId: this.dataList.TicketList[0].Id,
Month: this.currentYM.str, Month: this.currentYM.str,
}, },
(r) => { (r) => {
if (r.data.resultCode == 1) { if (r.data.resultCode == 1) {
let arr = [] let arr = [];
r.data.data.forEach(x=>{ r.data.data.forEach((x) => {
x.PriceList = x.PriceList.sort((a,b)=>{return a.Price-b.Price}) x.PriceList = x.PriceList.sort((a, b) => {
let MailingMoneyList = x.PriceList.sort((a,b)=>{return b.MailingMoney-a.MailingMoney}) return a.Price - b.Price;
});
let MailingMoneyList = x.PriceList.sort((a, b) => {
return b.MailingMoney - a.MailingMoney;
});
let dataObj = { let dataObj = {
startDate: x.Date, startDate: x.Date,
originalB2CPrice: x.PriceList[0].Price, originalB2CPrice: x.PriceList[0].Price,
remainNum: 1, remainNum: 1,
Count: 1, Count: 1,
safeMoney: 0, safeMoney: 0,
MailingMoney: MailingMoneyList[0].MailingMoney, MailingMoney: MailingMoneyList[0].MailingMoney,
PriceList: x.PriceList, PriceList: x.PriceList,
} };
if(date.formatDate(Date.now(), 'YYYY-MM-DD')!=x.Date&&x.Date>date.formatDate(Date.now(), 'YYYY-MM-DD')){ if (
arr.push(dataObj) date.formatDate(Date.now(), "YYYY-MM-DD") != x.Date &&
} x.Date > date.formatDate(Date.now(), "YYYY-MM-DD")
}) ) {
this.priceList = JSON.parse(JSON.stringify(arr)) arr.push(dataObj);
}
});
this.priceList = JSON.parse(JSON.stringify(arr));
} }
},
},null) null
);
}, },
menu() { menu() {
this.scroll = this.scroll =
...@@ -951,21 +1044,21 @@ export default { ...@@ -951,21 +1044,21 @@ export default {
</script> </script>
<style> <style>
.active-trip-module { .active-trip-module {
color: var(--q-color-primary); color: var(--q-color-primary);
font-weight: 800; font-weight: 800;
position: relative; position: relative;
} }
.active-trip-module::before { .active-trip-module::before {
position: absolute; position: absolute;
content: " "; content: " ";
top: 0; top: 0;
bottom: 0; bottom: 0;
left: -25px; left: -25px;
width: 5px; width: 5px;
border-radius: 5px; border-radius: 5px;
background: var(--q-color-primary); background: var(--q-color-primary);
} }
.slider-item { .slider-item {
transform: scale(1); transform: scale(1);
transition-timing-function: ease; transition-timing-function: ease;
...@@ -1113,4 +1206,4 @@ export default { ...@@ -1113,4 +1206,4 @@ export default {
margin: 20px 0; margin: 20px 0;
border-radius: 10px; border-radius: 10px;
} }
</style> </style>
\ No newline at end of file
src/pages/detailsNew.vue
View file @ cbd1d523
...@@ -146,12 +146,14 @@ ...@@ -146,12 +146,14 @@
<span <span
>{{ dataList.aimPlaceName }} >{{ dataList.aimPlaceName }}
<span class="q-mx-sm">途徑：</span> <template v-if="citys.length>0">
<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>
</template>
</span> </span>
</div> </div>
<div class="q-mt-md row"> <div class="q-mt-md row">
...@@ -580,7 +582,7 @@ ...@@ -580,7 +582,7 @@
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" }"
></div> ></div>
<div <!-- <div
class="text-h5 text-weight-bold text-left q-mt-xl" class="text-h5 text-weight-bold text-left q-mt-xl"
ref="cancelTips" ref="cancelTips"
:class="{ :class="{
...@@ -588,8 +590,17 @@ ...@@ -588,8 +590,17 @@
}" }"
> >
取消政策 取消政策
</div> -->
<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
class="q-mt-lg trip-text q-mb-xl" class="q-mt-lg trip-text q-mb-xl"
:class="{ :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
...@@ -615,7 +626,7 @@ ...@@ -615,7 +626,7 @@
个工作天内退款。</span 个工作天内退款。</span
> >
</div> </div>
</div> </div> -->
</div> </div>
<template v-if="$q.platform.is.desktop"> <template v-if="$q.platform.is.desktop">
...@@ -703,9 +714,9 @@ export default { ...@@ -703,9 +714,9 @@ export default {
loop: true, loop: true,
}, },
warnBuy: [ warnBuy: [
"未满 2 岁幼儿不占位可免费参加（不含座位，餐点，门票，床位），请先于下订时在「备注栏」告知。", "未满 2 岁幼儿我們將按照嬰兒價格執行。請下單是注意區分",
"如需要單人房，請購買單房", "如需要單人房，請購買單房",
"不占床2-11(包含)岁幼童可购买儿童价，如需占床請購買成人價", "不占床2-11(包含)岁幼童可购买儿童价，如需占床請購買佔床產品",
"12歲以上皆視同成人售價", "12歲以上皆視同成人售價",
], ],
showOrderPreview: false, showOrderPreview: false,
...@@ -751,12 +762,12 @@ export default { ...@@ -751,12 +762,12 @@ export default {
isActive: false, isActive: false,
display: "溫馨提示", display: "溫馨提示",
}, },
{ // {
val: "cancelTips", // val: "cancelTips",
top: 0, // top: 0,
isActive: false, // isActive: false,
display: "取消政策", // display: "取消政策",
}, // },
], ],
priceListHeight: 0, priceListHeight: 0,
stickyHeight: 0, stickyHeight: 0,
...@@ -1227,6 +1238,9 @@ export default { ...@@ -1227,6 +1238,9 @@ export default {
.line-feature * { .line-feature * {
line-height: normal !important; line-height: normal !important;
} }
.line-feature .draggable{
position: absolute;
}
.slider-item { .slider-item {
transform: scale(1); transform: scale(1);
transition-timing-function: ease; transition-timing-function: ease;
......
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