Skip to content

M
million
Commit 7b28d2f0 authored by 沈良进's avatar 沈良进
Browse files
Options

接机，包车页面开发

parent 1b7cc065
Hide whitespace changes
Inline Side-by-side
Showing with 1602 additions and 154 deletions
src/components/search_sf/search_sf2.vue
View file @ 7b28d2f0
...@@ -178,7 +178,7 @@ ...@@ -178,7 +178,7 @@
</div> </div>
<div class="text-weight-bold q-pa-sm">熱門目的地</div> <div class="text-weight-bold q-pa-sm">熱門目的地</div>
<q-separator /> <q-separator />
<div> <div class="flex flex-wrap">
<div class="hot-tag" @click="handleHotTagClick(item)" :class="{'hot-tag-select': setectHotTag === item.Id}" :key="item.Id" v-for="item in hotList">{{item.Name}}</div> <div class="hot-tag" @click="handleHotTagClick(item)" :class="{'hot-tag-select': setectHotTag === item.Id}" :key="item.Id" v-for="item in hotList">{{item.Name}}</div>
</div> </div>
<!-- <div class="col full-width row"> <!-- <div class="col full-width row">
......
src/components/searchdata/kkday.vue
View file @ 7b28d2f0
...@@ -756,6 +756,13 @@ export default { ...@@ -756,6 +756,13 @@ export default {
); );
}, },
GotoDetails(item) { GotoDetails(item) {
if(item.productType === 4) { // 接送机，包车
this.CommonJump(
"/detailCar/"+item.configId,
{}
);
return
}
this.CommonJump( this.CommonJump(
"/detail/" + encodeURIComponent(item.id) + "/" + item.tcid, "/detail/" + encodeURIComponent(item.id) + "/" + item.tcid,
{} {}
......
src/css/app.scss
View file @ 7b28d2f0
...@@ -5,6 +5,9 @@ ...@@ -5,6 +5,9 @@
.justify-between { .justify-between {
justify-content: space-between; justify-content: space-between;
} }
.flex-end {
justify-content: end;
}
.item-center { .item-center {
align-items: center; align-items: center;
} }
...@@ -87,6 +90,12 @@ ...@@ -87,6 +90,12 @@
.f16 { .f16 {
font-size: 16px; font-size: 16px;
} }
.f18 {
font-size: 18px;
}
.f20 {
font-size: 20px;
}
.f26 { .f26 {
font-size: 26px; font-size: 26px;
} }
......
src/pages/detailsCar.vue 0 → 100644
View file @ 7b28d2f0
<template>
<div style="min-height: 80vh">
<div
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
style="max-width: 1200px; margin-left: auto; margin-right: auto"
:class="{ 'q-px-md': $q.screen.width < 1220 }"
class="q-py-sm row items-center"
>
<span
class="col product-price text-subtitle1 text-weight-bold"
style="text-align: left"
>
<span>CNY {{ moneyFormat(dataList.minPrice, 0) }}</span>
<span class="q-ml-sm f12 text-grey-7">起</span>
</span>
<q-btn
color="primary"
unelevated
class="q-px-xl"
label="選擇方案"
@click="goScrollHandler(priceListHeight)"
/>
</div>
</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="日本" 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
v-if="$q.platform.is.desktop"
:label="dataList.title"
class="text-grey-6 ellipsis"
/>
</q-breadcrumbs>
<div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div>
</div>
<div style="padding-bottom: calc((100% - 0px) / 3); position: relative">
<div
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
class="overflow-hidden rounded-borders"
>
<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>
</div>
</div>
<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="text-h6 ellipsis-2-lines">{{ dataList.Name }}</div>
<div class="text-h6 ellipsis-2-lines">{{ dataList.Description }}</div>
<div class="q-mt-md f12 text-grey-6">
<q-icon
name="iconfont icondingweixiao"
size="16px"
class="q-mr-sm"
/>
<span
>日本 -
<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>
</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="15天前可免費取消"
/>
</div>
</div>
<div
: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 class="product-price text-h6" v-if="dataList.MinPrice > 0">
<!-- CNY：{{ dataList. }} -->
CNY：{{ moneyFormat(dataList.MinPrice, 0) }}
<span class="f12 text-grey-6">起</span>
</div>
<div v-else class="text-subtitle1 text-grey-6">暫無報價</div>
<q-btn
color="primary"
label="選擇方案"
unelevated
@click="goScrollHandler(priceListHeight)"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/>
</div>
</div>
<div class="q-mt-lg" v-if="dataList.productRecommend">
<div
class="q-mt-sm"
v-for="(x, i) in dataList.productRecommend.split('\n')"
:key="i"
>
<q-icon
name="iconfont iconhongqi"
color="primary"
size="16px"
class="q-mr-md"
/>
{{ x }}
</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
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-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>
<template v-if="currentPrice && currentPrice.startDate">
<order-preview
class="q-pa-md"
:price="currentPrice"
@reset="resetHandler"
></order-preview>
</template>
</div>
<!--方案选择区 -->
<div class="flex justify-between">
<div class="f20">
湖岩美术馆 & 爱宝乐园 包车一日游
<span class="cancel">3天前可免费取消</span>
</div>
<div>
<div class="f20">CNY <span class="f14">起</span></div>
<div>最早可预订日</div>
</div>
</div>
<div class="flex bold mr">
关于此方案
<div class="flex normal ml">
<div class="ml">3天前可免费取消</div>
</div>
</div>
<div>
<div class="mt mb bold f18">选择日期、选项</div>
<div class="flex">
<div style="width:50%">
<div>请选择出发日期</div>
<div>
<table class="date-table">
<thead>
<tr class="row-day">
<th class="cell-day">日</th>
<th class="cell-day">一</th>
<th class="cell-day">二</th>
<th class="cell-day">三</th>
<th class="cell-day">四</th>
<th class="cell-day">五</th>
<th class="cell-day">六</th>
</tr>
</thead>
<tbody>
<tr
class="row-date"
v-for="(item, index) in daysList"
:key="index"
>
<td
class="cell-date selectable"
v-for="(el, index) in item"
:key="index"
>
<div v-if="el && el.disabled">
<div v-if="el" class="date-num disabled">
{{ el.day }}
</div>
</div>
<div v-else>
<div v-if="el" class="date-num">{{ el.day }}</div>
<div v-if="el" class="price">
{{ el.price || "1566" }} 起
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="width: 40%;margin-left: 10%">
<div class="mt mb">车辆选择</div>
<div>
<q-btn class="car-tag mr" v-for="item in dataList.CarTypeList" :key="item.Id">
{{ item.CarName }}({{ item.PeopleNum }}人)
</q-btn>
</div>
<div class="mt mb">选择辆数</div>
<div class="flex justify-between bold f18 mt mb">
<span>辆数</span>
<div>
<span>CNY 1,667 起/每辆</span>
<i class="iconfont iconminus"></i>
<span>1</span>
<i class="iconfont iconplus"></i>
</div>
</div>
<q-separator />
<div class="flex justify-between mt mb">
<span>总金额</span>
<span class="f20">CNY 100</span>
</div>
<div class="flex flex-end">
<q-btn class="mr" label="加入购物车"></q-btn>
<q-btn label="立即订购"></q-btn>
</div>
</div>
</div>
<div></div>
</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="dataList.priceList && 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="15天前可免費取消"
/>
</div>
<div class="text-grey f12">
<ul class="q-pl-md no-margin">
<li v-for="(x, i) in warnBuy" class="q-mt-md" :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="showOrderPreview = !showOrderPreview"
class="q-px-lg"
/>
</div>
<div class="text-info q-mt-md text-right">
最早可預訂日期：{{ dataList.priceList[0].startDate }}
</div>
</div>
</div>
<div
class="q-pa-md"
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>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconcancel"
label="15天前可免費取消"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconroundcheck"
label="6個工作日內（不含例休假）確認"
/>
</div>
<div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col">
<calendar
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
</div>
<div class="col q-ml-xl">
<order-preview
:price="currentPrice"
@reset="resetHandler"
></order-preview>
</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-8': $q.platform.is.desktop, col: $q.platform.is.mobile }"
>
<div
class="q-mt-md q-pb-xl"
ref="diyContext"
:style="{ zoom: zoomDiyContext }"
v-html="dataList.feature.featureHtml"
v-if="dataList.feature && dataList.feature.featureHtml != ''"
></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.PriceIncludeList.join(',')"
: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.PriceNotIncludeList.join(',')"
: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
? 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
? 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>
<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>
</template>
<script>
import { slider, slideritem } from "vue-concise-slider";
import calendar from "../components/trip/calendar.vue";
import OrderPreview from "src/components/trip/orderPreview.vue";
import smaple from "src/components/trip/smaple.vue";
import Trip from "src/components/trip/trip.vue";
import block from "src/components/trip/block/index";
import * as dayjs from "dayjs";
export default {
props: [],
data() {
return {
daysList: [],
tab: "",
searchDate: "",
clickDate: "",
slide: 1,
msg: {
configId: "",
cityId: 0,
preview: 0,
tcid: 0,
teamType: 0,
isGetPriceFlight: true,
},
currentPrice: {},
isShow: false,
dataList: null,
isDirect: 1,
TripConfig: {},
isShowNav: false,
clickIndex: 1,
isLoading: false,
isShowDialog: false,
citys: [],
//Slider configuration [obj]
options: {
currentPage: 0,
speed: 300,
itemAnimation: true,
centeredSlides: true,
thresholdDistance: 100,
thresholdTime: 300,
loopedSlides: 2,
slidesToScroll: 1,
loop: true,
},
warnBuy: [
"未满 2 岁幼儿不占位可免费参加（不含座位，餐点，门票，床位），请先于下订时在「备注栏」告知。",
"如需要單人房，請購買單房",
"不占床2-11(包含)岁幼童可购买儿童价，如需占床請購買成人價",
"12歲以上皆視同成人售價",
],
showOrderPreview: false,
videoPosition: 0,
currentHeight: 0,
isPictureInPicture: false,
days: [
{
val: "",
top: 0,
isActive: false,
display: "",
},
],
navs: [
{
val: "product",
top: 0,
isActive: false,
display: "產品介紹",
},
{
val: "price",
top: 0,
isActive: false,
display: "費用說明",
},
{
val: "warning",
top: 0,
isActive: false,
display: "購買須知",
},
{
val: "tips",
top: 0,
isActive: false,
display: "溫馨提示",
},
{
val: "cancelTips",
top: 0,
isActive: false,
display: "取消政策",
},
],
priceListHeight: 0,
stickyHeight: 0,
zoomDiyContext: 1,
};
},
components: {
slider,
slideritem,
calendar,
OrderPreview,
smaple,
Trip,
block,
},
watch: {
days: {
handler: function (val, oldval) {
this.days = val;
},
immediate: 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() {
if (this.$route.params.id) {
this.msg.configId = decodeURIComponent(this.$route.params.id);
}
if (this.$route.params.tcid) {
this.msg.tcid = decodeURIComponent(this.$route.params.tcid);
}
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
if (localStorage.baseifo) {
this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
}
// this.getData();
window.addEventListener("scroll", this.menu);
this.getCarData();
this.getCarPriceData();
},
methods: {
getTopNum(x) {
this.days = JSON.parse(x);
},
changeTripShowHandler() {
this.$nextTick(() => {
this.navs.forEach((x) => {
x.top =
this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight -
60;
console.log(x.top);
});
});
},
handleScroll(e) {
let temp = this.getScroll().top;
// if(temp-this.currentHeight>0){
// this.scrollDirection='down'
// }else{
// this.scrollDirection='up'
// }
this.stickyHeight = document.querySelector(".q-header--hidden")
? "translateY(0px)"
: "translateY(85px)";
this.currentHeight = temp;
if (
this.videoPosition > 0 &&
this.videoPosition < this.currentHeight &&
this.options.currentPage == 0 &&
!this.isPictureInPicture
) {
this.isPictureInPicture = true;
let t = document.querySelectorAll("video")[0];
try {
t.requestPictureInPicture();
} catch (error) {}
} else if (
this.videoPosition > 0 &&
this.videoPosition > this.currentHeight &&
this.options.currentPage == 0 &&
this.isPictureInPicture
) {
this.isPictureInPicture = false;
document.exitPictureInPicture();
}
let h = document.location.hash;
if (h.indexOf("#/detail/") == -1) {
window.removeEventListener("scroll", this.handleScroll);
}
},
getScroll() {
return {
left:
window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft ||
0,
top:
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0,
};
},
goScrollHandlerDay(top) {
window.scrollTo(0, top);
},
goScrollHandler(top) {
window.scrollTo(0, top);
},
slideHandler(e) {
this.options.currentPage = e.currentPage;
if (
e.currentPage != 0 &&
this.$refs.video &&
this.$refs.video.isPlaying
) {
this.$refs.video.pause();
}
},
playHandler(e) {},
pauseHandler(e) {},
timeChangeHandler(e) {
//console.log(e)
},
//
seekedChangeHandler(e) {
//console.log(e)
},
resetHandler() {
this.currentPrice.startDate = "";
this.$refs.calendar.reset();
},
changeChosenDateHandler(val) {
val.price.version = new Date().getTime();
this.currentPrice = JSON.parse(JSON.stringify(val.price));
this.$refs.qDateProxy.hide();
},
showDialog() {
this.isShowDialog = true;
},
//关闭弹窗
closeDialog() {
this.isShowDialog = false;
},
// 获取车的详情
getCarData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetCarSingleProductDetail",
{ ProductId: "16" },
(r) => {
if (r.data.resultCode == 1) {
this.dataList = r.data.data;
this.dataList.imgCover = this.dataList.ImageList;
this.isShow = true;
this.isDirect = this.dataList.isDirect;
if (this.dataList.videoStr && this.dataList.videoStr != "") {
this.options.loop = false;
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(() => {
if (
this.dataList.feature &&
this.dataList.feature.featureHtml != ""
) {
let tw =
parseFloat(
this.$refs.diyContext.getBoundingClientRect().width
) / 1123.0;
let divArr = document.querySelectorAll("#setZoom>div");
for (let i = 0; i < divArr.length; i++) {
let div = divArr[i];
if (this.$q.platform.is.mobile) {
div.style.zoom =
div.offsetWidth > 1000
? 0.999
: document.documentElement.clientWidth / 1123.0;
} else {
div.style.zoom = 1;
}
}
this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
}
setTimeout(() => {
this.navs.forEach((x) => {
x.top =
this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight -
60;
});
this.priceListHeight =
this.$refs.pricelist.getBoundingClientRect().top +
this.currentHeight -
60;
this.days = [];
}, 1000);
try {
document
.querySelector("#scrollId .q-page-container")
.addEventListener("scroll", this.handleScrollDay);
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
}
});
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
},
// 获取车的详情
getCarPriceData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetCarSingleProductMonthPriceAll",
{ ProductId: "16", Month: "2023-02" },
(r) => {
let list = [[]];
let y = 0; // 元素纵向下标
let day = 0;
if (r.data.resultCode == 1) {
let week = dayjs("2023-02-01").day();
console.log("week", week);
list[0].length = week;
const isCurrent = true;
// 如果是当前月
if (isCurrent) {
let days = dayjs(r.data.data[0].Date).date();
day = days;
for (let i = 1; i <= days; i++) {
list[y].push({
day: i,
disabled: true,
});
week++;
if (week === 7) {
week = 0;
y++;
list[y] = [];
}
}
}
r.data.data.forEach((item) => {
list[y].push({
...item,
day: ++day,
});
week++;
if (week === 7) {
week = 0;
y++;
list[y] = [];
}
});
this.daysList = list;
console.log("list", list);
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
},
menu() {
this.scroll =
document.documentElement.scrollTop || document.body.scrollTop;
if (this.scroll > 300) {
this.isShowNav = true;
} else {
this.isShowNav = false;
}
},
goNavList(val) {
let newval = "#" + val;
document.querySelector(newval).scrollIntoView(true);
},
},
};
</script>
<style>
.slider-item {
transform: scale(1);
transition-timing-function: ease;
transition-duration: 300ms;
}
.slider-item.slider-active {
transform: scale(1);
z-index: 999;
}
.trip-text img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
.trip-text {
line-height: 1.6;
}
.slider-item.slider-active-copy {
transform: scale(1);
z-index: 999;
}
.active-trip-module {
color: var(--q-color-primary);
font-weight: 800;
position: relative;
}
.active-trip-module::before {
position: absolute;
content: " ";
top: 0;
bottom: 0;
left: -25px;
width: 5px;
border-radius: 5px;
background: var(--q-color-primary);
}
.trip-module {
color: #9e9e9e;
transition: all 0.3s;
font-weight: 100;
text-align: center;
line-height: 38px;
font-size: 18px;
width: 38px;
height: 38px;
border: 1px solid #ccc;
border-radius: 50%;
font-family: lettergothicstd;
}
.active-trip-moduleDay {
position: relative;
border: 0;
left: -15px;
font-size: 51px;
}
.active-trip-moduleDay.active::before {
opacity: 1;
}
.active-trip-moduleDay::before {
display: inline-block;
position: absolute;
top: 0px;
left: -50px;
content: "DAY";
font-size: 13px;
font-family: fangsong;
line-height: 58px;
opacity: 0;
}
#setZoom > div {
zoom: calc(100 / 1000);
}
</style>
<style scoped>
.date-table {
width: 100%;
padding: 5px;
border-collapse: separate;
table-layout: fixed;
}
.cell-day {
padding: 10px 0 20px;
text-align: center;
color: #666;
font-weight: 700;
}
.cell-date.selectable {
cursor: pointer;
}
.cell-date {
position: relative;
padding: 8px 4px;
border-radius: 6px;
text-align: center;
vertical-align: baseline;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cell-date .date-num {
font-size: 1.6rem;
font-weight: 700;
}
.disabled {
color: #666;
}
.option-booking .cell-date .price {
min-height: 20px;
color: #666;
font-size: 1.2rem;
}
.cell-date.selected.selected-end {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
position: relative;
}
.cell-date.selected.selected-start {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.cell-date.selected.selected-end,
.cell-date.selected.selected-start {
color: #fff;
background-color: #26bdc9;
}
.cancel {
background-color: #ef7a70;
margin-left: 10px;
padding: 4px 8px;
border-radius: 4px;
color: #fff;
font-size: 12px;
}
.car-tag {
}
</style>
\ No newline at end of file
src/pages/detailsNew.vue
View file @ 7b28d2f0
...@@ -11,8 +11,12 @@ ...@@ -11,8 +11,12 @@
z-index: 999; z-index: 999;
" "
class="bg-white" class="bg-white"
v-if="(currentHeight > navs[0].top + 100&&$q.platform.is.desktop)|| v-if="
(currentHeight>priceListHeight&&currentHeight < navs[0].top&&$q.platform.is.mobile)" (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
...@@ -20,7 +24,6 @@ ...@@ -20,7 +24,6 @@
: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"
...@@ -72,7 +75,7 @@ ...@@ -72,7 +75,7 @@
</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"
...@@ -116,7 +119,11 @@ ...@@ -116,7 +119,11 @@
</slider> </slider>
</div> </div>
</div> </div>
<div class="q-py-lg" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}" 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">
...@@ -141,7 +148,7 @@ ...@@ -141,7 +148,7 @@
icon="iconfont iconOwner-1" icon="iconfont iconOwner-1"
label=" 印象自組團" label=" 印象自組團"
/> />
<q-chip <q-chip v-if="dataList.dayList"
class="transparent q-mr-xl no-padding" class="transparent q-mr-xl no-padding"
square square
icon="iconfont icontime" icon="iconfont icontime"
...@@ -162,10 +169,13 @@ ...@@ -162,10 +169,13 @@
</div> </div>
</div> </div>
<div <div
:style="{'width': $q.platform.is.mobile?'100%':'293px'}" :style="{ width: $q.platform.is.mobile ? '100%' : '293px' }"
class="bg-grey-3 rounded-borders q-px-md" class="bg-grey-3 rounded-borders q-px-md"
:class="{'q-py-lg':$q.platform.is.desktop, :class="{
'row justify-between items-center q-mt-sm q-py-sm':$q.platform.is.mobile}" '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"
...@@ -181,7 +191,7 @@ ...@@ -181,7 +191,7 @@
label="選擇方案" label="選擇方案"
unelevated unelevated
@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 }"
/> />
</div> </div>
</div> </div>
...@@ -202,28 +212,35 @@ ...@@ -202,28 +212,35 @@
</div> </div>
</div> </div>
<div <div
class="bg-white" class="bg-white"
style=" style="
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
top: -1px; top: -1px;
border-top: 1px solid #eee; border-top: 1px solid #eee;
box-shadow: 0 2px 8px rgb(0 0 0 / 20%); box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
z-index: 999;" z-index: 999;
v-if="currentHeight > priceListHeight+800&&$q.platform.is.mobile" "
:style="{ transform: stickyHeight }"> v-if="currentHeight > priceListHeight + 800 && $q.platform.is.mobile"
:style="{ transform: stickyHeight }"
>
<q-tabs <q-tabs
v-model="tab" v-model="tab"
dense dense
class="text-grey" class="text-grey"
active-color="primary" active-color="primary"
indicator-color="primary" indicator-color="primary"
align="left" align="left"
narrow-indicator> narrow-indicator
<q-tab v-for="(x, i) in navs" >
:key="i" <q-tab
@click="goScrollHandler(x.top + 20)" :name="x.display" :label="x.display"></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> </q-tabs>
</div> </div>
<div <div
...@@ -233,33 +250,51 @@ ...@@ -233,33 +250,51 @@
> >
<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"> <div
<q-field class="q-my-md" stack-label label="選擇日期、選項" standout dense> class="rounded-borders bg-white q-pa-md q-mt-md"
<div class="self-center full-width no-outline" tabindex="0">{{currentPrice.startDate}}</div> 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"> <q-popup-proxy ref="qDateProxy">
<calendar class="bg-white q-pa-md" <calendar
:priceList="dataList.priceList" class="bg-white q-pa-md"
@change="changeChosenDateHandler" :priceList="dataList.priceList"
ref="calendar" @change="changeChosenDateHandler"
></calendar> ref="calendar"
></calendar>
</q-popup-proxy> </q-popup-proxy>
</q-field> </q-field>
<template v-if="currentPrice&&currentPrice.startDate"> <template v-if="currentPrice && currentPrice.startDate">
<order-preview class="q-pa-md" <order-preview
class="q-pa-md"
:price="currentPrice" :price="currentPrice"
@reset="resetHandler" @reset="resetHandler"
></order-preview> ></order-preview>
</template> </template>
</div> </div>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">所選方案詳情</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" v-if="$q.platform.is.desktop"> <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
...@@ -322,7 +357,7 @@ ...@@ -322,7 +357,7 @@
/> />
</div> </div>
<div class="q-mt-lg row" v-if="$q.platform.is.desktop"> <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"
...@@ -340,34 +375,48 @@ ...@@ -340,34 +375,48 @@
</div> </div>
</div> </div>
</div> </div>
<div <div
v-if="dataList" v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto" style="max-width: 1200px; margin-left: auto; margin-right: auto"
class="q-mt-xl row" class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220&&$q.screen.width>760, }" :class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }"
> >
<div class="col q-ml-xl position-relative" <div
v-if="dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top&&$q.platform.is.desktop"> class="col q-ml-xl position-relative"
<div style="position: sticky; top: 100px"> 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
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
:class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }"
>
<div <div
class="trip-module text-subtitle2 cursor-pointer q-mb-lg" class="text-h5 text-weight-bold text-left"
v-for="(x, i) in days" ref="feature"
:key="i"
@click="goScrollHandler(x.top + 100)"
:class="{ :class="{
'active-trip-moduleDay text-red active': 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
currentHeight >= x.top &&
(i == days.length - 1 || currentHeight < days[i + 1].top),
}" }"
> >
{{ x.display }}
</div>
</div>
</div>
<div :class="{'col-8':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
<div class="text-h5 text-weight-bold text-left" ref="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
行程特色 行程特色
</div> </div>
<div <div
...@@ -382,59 +431,129 @@ ...@@ -382,59 +431,129 @@
v-html="dataList.feature.featureHtml" v-html="dataList.feature.featureHtml"
v-if="dataList.feature.featureHtml != ''" v-if="dataList.feature.featureHtml != ''"
></div> ></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
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>
<div class="q-pb-xl" > <div class="q-pb-xl">
<smaple :trip="dataList" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.desktop}"></smaple> <smaple
<template v-if="dataList.dayList.length<=3"> :trip="dataList"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.desktop,
}"
></smaple>
<template v-if="dataList.dayList.length <= 3">
<trip :trip="dataList" @change="changeTripShowHandler"></trip> <trip :trip="dataList" @change="changeTripShowHandler"></trip>
</template> </template>
<template v-else> <template v-else>
<block :currentHeightDay="currentHeight" :days="days" :tripList="dayList" :isDirect="isDirect" :clickDate="clickDate"></block> <block
:currentHeightDay="currentHeight"
:days="days"
:tripList="dayList"
:isDirect="isDirect"
:clickDate="clickDate"
></block>
</template> </template>
</div> </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
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>
<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="text-subtitle1 text-weight-bold q-my-md"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用包含
</div>
<div <div
class="q-mt-md trip-text" class="q-mt-md trip-text"
v-html="dataList.feature.feeInclude" v-html="dataList.feature.feeInclude"
:class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}" :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div> ></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="text-subtitle1 text-weight-bold q-my-md"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用不含
</div>
<div <div
class="q-mt-md trip-text q-pb-xl" class="q-mt-md trip-text q-pb-xl"
v-html="dataList.feature.feeNonInclude" v-html="dataList.feature.feeNonInclude"
:class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}" :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div> ></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
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>
<div <div
class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl" 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)" style="border: 1px dashed var(--q-color-warning)"
v-html="dataList.feature.importantTip?dataList.feature.importantTip:'暂无购买须知'" v-html="
:class="{'q-mx-md': $q.screen.width < 1220&&$q.platform.is.mobile}" dataList.feature.importantTip
? dataList.feature.importantTip
: '暂无购买须知'
"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div> ></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
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>
<div <div
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="dataList.feature.warmTip?dataList.feature.warmTip:'暂无溫馨提示'" v-html="
:class="{'q-mx-md': $q.screen.width < 1220&&$q.platform.is.mobile}" dataList.feature.warmTip ? dataList.feature.warmTip : '暂无溫馨提示'
"
:class="{
'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="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}" :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
> >
取消政策 取消政策
</div> </div>
<div class="q-mt-lg trip-text q-mb-xl" :class="{'q-mx-md': $q.screen.width < 1220&&$q.platform.is.mobile}"> <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"> <ul class="no-padding text-grey-9 q-ml-md">
<li>所选日期 15 天（含）之前取消，收取手续费 0%</li> <li>所选日期 15 天（含）之前取消，收取手续费 0%</li>
<li class="q-mt-sm">所选日期 8 ~ 14 天之间取消，收取手续费 30%</li> <li class="q-mt-sm">所选日期 8 ~ 14 天之间取消，收取手续费 30%</li>
...@@ -453,7 +572,7 @@ ...@@ -453,7 +572,7 @@
</div> </div>
</div> </div>
</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">
...@@ -474,7 +593,6 @@ ...@@ -474,7 +593,6 @@
</div> </div>
</div> </div>
</template> </template>
</div> </div>
</div> </div>
</template> </template>
...@@ -487,14 +605,14 @@ import smaple from "src/components/trip/smaple.vue"; ...@@ -487,14 +605,14 @@ import smaple from "src/components/trip/smaple.vue";
import Trip from "src/components/trip/trip.vue"; 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";
export default { export default {
props: [], props: [],
data() { data() {
return { return {
tab: '', tab: "",
searchDate:'', searchDate: "",
clickDate: '', clickDate: "",
slide: 1, slide: 1,
msg: { msg: {
configId: "", configId: "",
...@@ -538,11 +656,11 @@ export default { ...@@ -538,11 +656,11 @@ export default {
currentHeight: 0, currentHeight: 0,
isPictureInPicture: false, isPictureInPicture: false,
days: [ days: [
{ {
val: '', val: "",
top: 0, top: 0,
isActive: false, isActive: false,
display: '', display: "",
}, },
], ],
navs: [ navs: [
...@@ -595,37 +713,39 @@ export default { ...@@ -595,37 +713,39 @@ export default {
OrderPreview, OrderPreview,
smaple, smaple,
Trip, Trip,
block block,
}, },
watch: { watch: {
days: { days: {
handler: function (val, oldval) { handler: function (val, oldval) {
this.days = val this.days = val;
}, },
immediate: true, immediate: true,
deep: true deep: true,
}, },
currentHeight: { currentHeight: {
handler: function (val, oldval) { handler: function (val, oldval) {
this.navs.forEach((x,i)=>{ 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 (
if(this.tab!=x.display){ x.top &&
this.tab=x.display this.currentHeight >= x.top &&
return (i == this.navs.length - 1 ||
}else{ this.currentHeight < this.navs[i + 1].top)
return ) {
if (this.tab != x.display) {
this.tab = x.display;
return;
} else {
return;
}
} }
} });
})
}, },
immediate: false, immediate: false,
deep: true deep: true,
}, },
}, },
created() { created() {
try {
window.addEventListener("scroll", this.handleScroll);
} catch (error) {}
if (this.$route.params.id) { if (this.$route.params.id) {
this.msg.configId = decodeURIComponent(this.$route.params.id); this.msg.configId = decodeURIComponent(this.$route.params.id);
} }
...@@ -634,15 +754,17 @@ export default { ...@@ -634,15 +754,17 @@ export default {
} }
}, },
mounted() { mounted() {
window.addEventListener("scroll", this.handleScroll);
if (localStorage.baseifo) { if (localStorage.baseifo) {
this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo")); this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
} }
this.getData(); // this.getData();
window.addEventListener("scroll", this.menu); window.addEventListener("scroll", this.menu);
this.getCarData();
}, },
methods: { methods: {
getTopNum(x){ getTopNum(x) {
this.days = JSON.parse(x) this.days = JSON.parse(x);
}, },
changeTripShowHandler() { changeTripShowHandler() {
this.$nextTick(() => { this.$nextTick(() => {
...@@ -705,7 +827,7 @@ export default { ...@@ -705,7 +827,7 @@ export default {
0, 0,
}; };
}, },
goScrollHandlerDay(top) { goScrollHandlerDay(top) {
window.scrollTo(0, top); window.scrollTo(0, top);
}, },
...@@ -714,7 +836,11 @@ export default { ...@@ -714,7 +836,11 @@ export default {
}, },
slideHandler(e) { slideHandler(e) {
this.options.currentPage = e.currentPage; this.options.currentPage = e.currentPage;
if (e.currentPage != 0 && this.$refs.video && this.$refs.video.isPlaying) { if (
e.currentPage != 0 &&
this.$refs.video &&
this.$refs.video.isPlaying
) {
this.$refs.video.pause(); this.$refs.video.pause();
} }
}, },
...@@ -728,13 +854,13 @@ export default { ...@@ -728,13 +854,13 @@ export default {
//console.log(e) //console.log(e)
}, },
resetHandler() { resetHandler() {
this.currentPrice.startDate = '' this.currentPrice.startDate = "";
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));
this.$refs.qDateProxy.hide() this.$refs.qDateProxy.hide();
}, },
showDialog() { showDialog() {
this.isShowDialog = true; this.isShowDialog = true;
...@@ -765,7 +891,6 @@ export default { ...@@ -765,7 +891,6 @@ export default {
} }
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;
...@@ -783,59 +908,172 @@ export default { ...@@ -783,59 +908,172 @@ export default {
}); });
} }
this.$nextTick(() => { this.$nextTick(() => {
if(this.dataList.feature.featureHtml!=''){ if (this.dataList.feature.featureHtml != "") {
let tw = parseFloat( let tw =
parseFloat(
this.$refs.diyContext.getBoundingClientRect().width this.$refs.diyContext.getBoundingClientRect().width
) / 1123.0 ) / 1123.0;
let divArr = document.querySelectorAll("#setZoom>div")
for(let i=0;i<divArr.length;i++){
let div = divArr[i]
if(this.$q.platform.is.mobile){
div.style.zoom = div.offsetWidth>1000?0.999:document.documentElement.clientWidth/1123.0
}else{
div.style.zoom = 1
}
}
this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
let divArr = document.querySelectorAll("#setZoom>div");
for (let i = 0; i < divArr.length; i++) {
let div = divArr[i];
if (this.$q.platform.is.mobile) {
div.style.zoom =
div.offsetWidth > 1000
? 0.999
: document.documentElement.clientWidth / 1123.0;
} else {
div.style.zoom = 1;
}
}
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.dayList.forEach((x) => {
let dayListObj = {
val: "day" + x.dayNum,
top: 0,
isActive: false,
display: x.dayNum > 9 ? x.dayNum : "0" + x.dayNum,
};
this.days.push(dayListObj);
});
}, 1000);
try {
document
.querySelector("#scrollId .q-page-container")
.addEventListener("scroll", this.handleScrollDay);
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
}
});
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
},
// 获取车的详情
getCarData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetCarSingleProductDetail",
{ ProductId: '16' },
(r) => {
if (r.data.resultCode == 1) {
this.dataList = r.data.data;
if (this.dataList.dayList && this.dataList.dayList.length > 0) {
this.dataList.dayList.forEach((item) => {
item.slide = 0;
}); });
this.priceListHeight = if (r.data.data.scenicList) {
this.$refs.pricelist.getBoundingClientRect().top + r.data.data.scenicList.forEach((x) => {
this.currentHeight - if (x.cityName) {
60; this.citys.push(x.cityName);
this.days = [] }
this.dayList.forEach(x=>{ });
let dayListObj = { }
val: 'day'+x.dayNum, }
top: 0, this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
isActive: false, this.dayList = this.dataList.dayList;
display: x.dayNum>9?x.dayNum:'0'+x.dayNum,
this.isShow = true;
this.isDirect = this.dataList.isDirect;
if (this.dataList.videoStr && this.dataList.videoStr != "") {
this.options.loop = false;
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(() => {
if (this.dataList.feature.featureHtml != "") {
let tw =
parseFloat(
this.$refs.diyContext.getBoundingClientRect().width
) / 1123.0;
let divArr = document.querySelectorAll("#setZoom>div");
for (let i = 0; i < divArr.length; i++) {
let div = divArr[i];
if (this.$q.platform.is.mobile) {
div.style.zoom =
div.offsetWidth > 1000
? 0.999
: document.documentElement.clientWidth / 1123.0;
} else {
div.style.zoom = 1;
}
} }
this.days.push(dayListObj)
}) this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
}
setTimeout(() => {
this.navs.forEach((x) => {
x.top =
this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight -
60;
});
this.priceListHeight =
this.$refs.pricelist.getBoundingClientRect().top +
this.currentHeight -
60;
this.days = [];
this.dayList.forEach((x) => {
let dayListObj = {
val: "day" + x.dayNum,
top: 0,
isActive: false,
display: x.dayNum > 9 ? x.dayNum : "0" + x.dayNum,
};
this.days.push(dayListObj);
});
}, 1000); }, 1000);
try { try {
document.querySelector('#scrollId .q-page-container').addEventListener('scroll', this.handleScrollDay) document
.querySelector("#scrollId .q-page-container")
.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 { } else {
this.$message.error(r.data.message); this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
} }
this.$q.loading.hide(); this.$q.loading.hide();
}, },
...@@ -896,9 +1134,9 @@ export default { ...@@ -896,9 +1134,9 @@ export default {
border-radius: 5px; border-radius: 5px;
background: var(--q-color-primary); background: var(--q-color-primary);
} }
.trip-module{ .trip-module {
color: #9E9E9E; color: #9e9e9e;
transition: all .3s; transition: all 0.3s;
font-weight: 100; font-weight: 100;
text-align: center; text-align: center;
line-height: 38px; line-height: 38px;
...@@ -916,20 +1154,20 @@ export default { ...@@ -916,20 +1154,20 @@ export default {
font-size: 51px; font-size: 51px;
} }
.active-trip-moduleDay.active::before { .active-trip-moduleDay.active::before {
opacity: 1; opacity: 1;
} }
.active-trip-moduleDay::before { .active-trip-moduleDay::before {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 0px; top: 0px;
left: -50px; left: -50px;
content: 'DAY'; content: "DAY";
font-size: 13px; font-size: 13px;
font-family: fangsong; font-family: fangsong;
line-height: 58px; line-height: 58px;
opacity: 0; opacity: 0;
} }
#setZoom>div{ #setZoom > div {
zoom: calc(100 / 1000) zoom: calc(100 / 1000);
} }
</style> </style>
src/router/routes.js
View file @ 7b28d2f0
...@@ -28,10 +28,14 @@ const routes = [{ ...@@ -28,10 +28,14 @@ const routes = [{
path: '/details/:id/:tcid', path: '/details/:id/:tcid',
component: () => component: () =>
import('pages/details.vue') import('pages/details.vue')
}, { //行程2 }, { // 包车，接机
path: '/detailCar/:id',
component: () =>
import('pages/detailsCar.vue')
}, { // 旅程
path: '/detail/:id/:tcid', path: '/detail/:id/:tcid',
component: () => component: () =>
import('pages/detailsNew.vue') import('pages/detailsCar.vue')
}, { }, {
path: '/search', //签证护照管理 path: '/search', //签证护照管理
component: () => component: () =>
......
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