Skip to content

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

修改景点详情

parent a3c62ac5
Hide whitespace changes
Inline Side-by-side
Showing with 64 additions and 71 deletions
src/pages/ScenicSpotTicket/details.vue
View file @ cf90e9d3
......@@ -58,69 +58,49 @@
class="cursor-pointer"
@click="CommonJump('/index', {})"
/>
<q-breadcrumbs-el label="日本" class="cursor-pointer" />
<q-breadcrumbs-el>
<span v-for="(x, i) in citys" :key="i">
<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 :label="dataList.CountryName" class="cursor-pointer" />
<q-breadcrumbs-el
v-if="$q.platform.is.desktop"
:label="dataList.title"
:label="dataList.Name"
class="text-grey-6 ellipsis"
/>
</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 style="padding-bottom: calc((100% - 0px) / 3); position: relative">
<div class="relative">
<div class="row rounded-borders" :style="{height:$q.platform.is.desktop?'35vh':'20vh'}">
<div class="col">
<q-img :src="dataList.imgCover[0]" spinner-color="dark" spinner-size="20px" class="rounded-borders" :height="$q.platform.is.desktop?'35vh':'20vh'"/>
</div>
<div class="q-ml-sm column" v-if="dataList.imgCover.length>1 && $q.platform.is.desktop" :style="{width:dataList.imgCover.length<3?'30%':'20%'}">
<div class="col rounded-borders overflow-hidden">
<q-img :src="dataList.imgCover[1]" spinner-color="dark" 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">
<q-img :src="dataList.imgCover[2]" spinner-color="dark" spinner-size="20px" class="" height="100%" />
</div>
</div>
<div class="q-ml-sm column" v-if="dataList.imgCover.length>3 && $q.platform.is.desktop" 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="dataList.imgCover[4]" spinner-color="dark" spinner-size="20px" class="" height="100%" />
</div>
</div>
</div>
<div
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
class="overflow-hidden rounded-borders"
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,.5)"
@click="showPreview(dataList.imgCover, 0)"
>
<slider
ref="slider"
:options="options"
@slide="slideHandler"
style="height: 100%"
>
<slideritem
v-if="dataList.videoStr"
style="width: 80%"
class="q-mx-sm"
key="video"
>
<vue-core-video-players
ref="video"
:src="dataList.videoStr"
:title="dataList.title"
:muted="true"
:autoplay="false"
@play="playHandler"
@pause="pauseHandler"
@seeked="seekedChangeHandler"
@timeupdate="timeChangeHandler"
logo="../statics/img/transparent_logo.png"
:loop="false"
id="trip_video"
/>
</slideritem>
<slideritem
v-for="(item, index) in dataList.imgCover"
:key="index"
style="width: 80%"
class="q-mx-sm"
>
<q-img :src="item" spinner-color="grey" spinner-size="20px" />
</slideritem>
<div slot="loading">loading...</div>
</slider>
<q-icon name="iconfont iconimage" size="16px"></q-icon>
<span class="q-ml-sm">查看照片</span>
</div>
</div>
<div
class="q-py-lg"
class="q-pt-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="text-h6 ellipsis-2-lines">{{ dataList.Name }}</div>
......@@ -132,27 +112,26 @@
class="q-mr-sm"
/>
<span
>{{dataList.CountryName}} -
<span>
<span class="cursor-pointer">{{dataList.CityName}}</span>
</span>
>{{ dataList.Address }}
</span>
</div>
<div class="q-mt-md row">
<q-chip
class="transparent q-mr-xl no-padding"
class="transparent no-padding"
square
icon="iconfont iconOwner-1"
label=" 印象自組團"
label=" 印象自有"
:class="{'q-mr-xl':$q.platform.is.desktop,'q-mr-lg':$q.platform.is.mobile}"
/>
<q-chip
class="transparent q-mr-xl no-padding"
class="transparent no-padding"
:class="{'q-mr-xl':$q.platform.is.desktop,'q-mr-lg':$q.platform.is.mobile}"
square
icon="iconfont icontime"
label="行程時間 1 天" />
<q-chip
class="transparent q-mr-xl no-padding"
class="transparent no-padding"
:class="{'q-mr-xl':$q.platform.is.desktop,'q-mr-lg':$q.platform.is.mobile}"
square
icon="iconfont iconquxiao"
label="不可取消"
......@@ -168,9 +147,10 @@
$q.platform.is.mobile,
}"
>
<div class="product-price text-h6" v-if="priceList&&priceList.length>0">
<div class="text-right text-h6" v-if="priceList&&priceList.length>0">
<!-- CNY：{{ dataList. }} -->
CNY {{ moneyFormat(priceList[0].originalB2CPrice, 0) }}
<span class="text-subtitle2">{{dataList.CurrencyCode?dataList.CurrencyCode:'CNY'}}：</span>
{{ moneyFormat(priceList[0].originalB2CPrice, 2) }}
<span class="f12 text-grey-6">起</span>
</div>
<div v-else class="text-subtitle1 text-grey-6">暫無報價</div>
......@@ -184,7 +164,7 @@
/>
</div>
</div>
<div class="q-mt-lg" v-if="dataList.productRecommend">
<!-- <div class="q-mt-lg" v-if="dataList.productRecommend">
<div
class="q-mt-sm"
v-for="(x, i) in dataList.productRecommend.split('\n')"
......@@ -198,7 +178,7 @@
/>
{{ x }}
</div>
</div>
</div> -->
</div>
<div
class="bg-white"
......@@ -301,20 +281,25 @@
label="不可取消"
/>
</div>
<!-- <div class="text-grey f12">
<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 :class="{'q-mt-md':$q.platform.is.desktop|(i!=0&&$q.platform.is.mobile)}" :key="i">门票类产品支持邮寄、自取和电子票三种方式，下单时需注意选择</li>
<li :class="{'q-mt-md':$q.platform.is.desktop|(i!=0&&$q.platform.is.mobile)}" :key="i">自取地址为：{{ dataList.SelffetchAddress }}</li>
<li :class="{'q-mt-md':$q.platform.is.desktop|(i!=0&&$q.platform.is.mobile)}" :key="i">本產品包含以下具體票型：
<span v-for="(x,i) in dataList.TicketList" :key="i">{{ x.TicketName }}、</span>
</li>
<li :class="{'q-mt-md':$q.platform.is.desktop|(i!=0&&$q.platform.is.mobile)}" :key="i">有关开放时间和活动的更多信息，请访问 <a :href="dataList.Url" target="_blank" class="text-primary">官方網站</a></li>
</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"
v-if="priceList.length>0&&priceList[0].originalB2CPrice>0">CNY
<span class=" text-h6 q-mr-md"
v-if="priceList.length>0&&priceList[0].originalB2CPrice>0">
<span class="text-subtitle2">CNY</span>
{{
moneyFormat(priceList[0].originalB2CPrice, 0)
moneyFormat(priceList[0].originalB2CPrice, 2)
}}</span
>
<span class="col"></span>
......@@ -956,6 +941,14 @@ export default {
let newval = "#" + val;
document.querySelector(newval).scrollIntoView(true);
},
showPreview(images, index = 0) {
this.$viewerApi({
options: {
initialViewIndex: index,
},
images,
});
},
},
};
</script>
......
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