Skip to content

M
million
Commit 2b60959d authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent ed8cfdad
Show whitespace changes
Inline Side-by-side
Showing with 1095 additions and 1436 deletions
src/boot/utils.js
View file @ 2b60959d
......@@ -25,7 +25,7 @@ Vue.prototype.domainManager = function () {
if (domainNameUrl.indexOf('oytour') !== -1) {
domainUrl = "http://reborn.oytour.com";
}
//domainUrl = "http://192.168.5.46:8501";
//domainUrl = "http://192.168.5.46";
var obj = {
//主地址
DomainUrl: domainUrl,
......
src/components/base-switch.vue
View file @ 2b60959d
......@@ -55,14 +55,12 @@ export default {
},
watch: {
value: function() {
console.log('switch change', this.value)
this.inputSelect = this.value
}
},
methods: {
changeSelect() {
this.inputSelect = !this.inputSelect
console.log('changeSelect', this.inputSelect, this.value)
this.$emit('input', this.inputSelect)
}
}
......
src/components/searchProductdata/kkday.vue
View file @ 2b60959d
......@@ -896,8 +896,9 @@ export default {
},
GotoDetails(item) {
console.log("item",item);
this.CommonJump(
"/detailsProduct/" + encodeURIComponent(item.id) + "/" + item.configId,
"/detailsProduct/" + encodeURIComponent(item.id) + "/" + item.configId+"/"+item.teamType,
{},
"blank"
);
......
src/components/trip/calendarproduct.vue
View file @ 2b60959d
......@@ -8,64 +8,35 @@
{{ months[currentMonth].display }}
</div>
<div>
<q-btn
color="primary"
round
icon="iconfont iconpreviewleft"
flat
@click="changeShowMonthHandler(-1)"
class="q-mr-sm"
:disable="currentMonth == 0"
/>
<q-btn
color="primary"
round
icon="iconfont iconpreviewright"
flat
@click="changeShowMonthHandler(1)"
:disable="currentMonth == months.length - 1"
/>
<q-btn color="primary" round icon="iconfont iconpreviewleft" flat @click="changeShowMonthHandler(-1)"
class="q-mr-sm" :disable="currentMonth == 0" />
<q-btn color="primary" round icon="iconfont iconpreviewright" flat @click="changeShowMonthHandler(1)"
:disable="currentMonth == months.length - 1" />
</div>
</div>
<div class="q-pa-sm non-selectable" style="border-top: 1px solid #eee">
<div class="row items-center">
<div
class="col text-weight-bold text-center"
style="padding: 10px 0 20px"
v-for="(x, i) in chineseWeek"
:key="i"
>
<!--星期-->
<div class="col text-weight-bold text-center" style="padding: 10px 0 20px" v-for="(x, i) in chineseWeek"
:key="i">
{{ x }}
</div>
</div>
<div class="row wrap">
<div
class="rounded-borders text-center text-weight-bold"
:class="{
<div class="rounded-borders text-center text-weight-bold" :class="{
'cursor-pointer hover-date': x.value != '' && x.price,
'cursor-not-allowed': (!x.price || x.price.remainNum==0) && x.value != '',
'bg-primary': x.value != '' && x.value == currentDate,
}"
style="padding: 8px 4px; width: 14.285%"
v-for="(x, i) in col"
:key="i"
@click="chosenDateHandler(x)"
>
<div
class="text-dark"
:class="{ 'text-white': x.value == currentDate }"
v-if="x.price"
>
}" style="padding: 8px 4px; width: 14.285%" v-for="(x, i) in dayList" :key="i"
@click="chosenDateHandler(x)">
<div class="text-dark" :class="{ 'text-white': x.value == currentDate }" v-if="x.price">
{{ x.display }}
</div>
<div class="text-grey-6" v-else>{{ x.display }}</div>
<div
class="q-mt-sm f12"
:class="{
<div class="q-mt-sm f12" :class="{
'text-grey-1': x.value == currentDate,
' text-grey-6': x.value != currentDate,
}"
>
}">
{{
x.price && x.price.remainNum>0 ? moneyFormat(x.price.originalB2CPrice, 0) :(x.price && x.price.remainNum==0?'售罄':'&nbsp;')
}}
......@@ -78,9 +49,11 @@
</template>
<script>
import { date } from "quasar";
export default {
props: ["priceList","tcid"],
import {
date
} from "quasar";
export default {
props: ["priceList", "tcid", "dataList"],
data() {
return {
chineseWeek: ["日", "一", "二", "三", "四", "五", "六"],
......@@ -101,7 +74,7 @@ export default {
data: [],
months: [],
currentMonth: 0,
col: [],
dayList: [],
prices: [],
currentDate: "",
};
......@@ -117,26 +90,32 @@ export default {
},
created() {
this.prices = this.priceList;
console.log(this.prices)
this.init();
},
methods: {
init() {
this.createChosenDateHandler();
let startDate = this.prices.length>0&&this.prices[0].startDate?this.prices[0].startDate:''
let startDate = this.prices.length > 0 && this.prices[0].startDate ? this.prices[0].startDate : ''
let firstMonth = date.formatDate(
new Date(startDate),
"YYYY/MM"
);
console.log(firstMonth)
//当前团期所在的月份
if (this.dataList && this.dataList.currentPriceInfo && this.dataList.currentPriceInfo.startDate) {
firstMonth = date.formatDate(
new Date(this.dataList.currentPriceInfo.startDate),
"YYYY/MM"
);
}
let current = this.months.findIndex((x) => x.monthValue == firstMonth)
this.currentMonth = current>-1?current:0;
this.currentMonth = current > -1 ? current : 0;
this.changeMonthHandler();
},
createChosenDateHandler() {
let beginDate = new Date();
let endDate = date.addToDate(beginDate, { years: 1 });
let endDate = date.addToDate(beginDate, {
years: 1
});
while (beginDate <= endDate) {
let i = parseInt(date.formatDate(beginDate, "M")) - 1;
this.months.push({
......@@ -146,58 +125,65 @@ export default {
this.chineseMonth[i]
}`,
});
beginDate = date.addToDate(beginDate, { months: 1 });
beginDate = date.addToDate(beginDate, {
months: 1
});
}
},
changeShowMonthHandler(i) {
this.currentMonth += i;
let value = this.months[this.currentMonth].value
this.$emit('getQuotationData',value)
this.$emit('getQuotationData', value)
this.changeMonthHandler();
},
changeMonthHandler() {
try {
this.col = [];
let newDate = new Date(this.months[this.currentMonth].monthValue+'/01');
this.dayList = [];
let newDate = new Date(this.months[this.currentMonth].monthValue + '/01');
let newBeginDate = date.startOfDate(newDate, "month");
let newEndDate = date.endOfDate(newDate, "month");
for (let i = 0; i < date.formatDate(newBeginDate, "d"); i++) {
this.col.push({
this.dayList.push({
value: "",
});
}
while (newBeginDate <= newEndDate) {
let value = date.formatDate(newBeginDate, "YYYY-MM-DD");
let price = this.prices.find((x) => x.startDate == value);
this.col.push({
let tempPriceList = this.prices.filter((x) => x.startDate == value);
if (tempPriceList && tempPriceList.length > 0) {
console.log("tempPriceList", tempPriceList);
}
this.dayList.push({
value,
display: date.formatDate(newBeginDate, "DD"),
price,
});
newBeginDate = date.addToDate(newBeginDate, { days: 1 });
newBeginDate = date.addToDate(newBeginDate, {
days: 1
});
// 默认日期 价格
let InitialOption = false
for(let i=0;i<this.col.length;i++){
if(this.tcid&&this.tcid.length>0){
if (!InitialOption&&this.col[i].price && this.col[i].price.id===this.tcid) {
this.currentDate = this.col[i].value;
this.$emit("change", this.col[i]);
for (let i = 0; i < this.dayList.length; i++) {
if (this.tcid && this.tcid.length > 0) {
if (!InitialOption && this.dayList[i].price && this.dayList[i].price.id === this.tcid) {
this.currentDate = this.dayList[i].value;
this.$emit("change", this.dayList[i]);
InitialOption = true
}
}
else{
if (!InitialOption&&this.col[i].price && this.col[i].price.remainNum>0) {
this.currentDate = this.col[i].value;
this.$emit("change", this.col[i]);
} else {
if (!InitialOption && this.dayList[i].price && this.dayList[i].price.remainNum > 0) {
this.currentDate = this.dayList[i].value;
this.$emit("change", this.dayList[i]);
InitialOption = true
}
}
}
}
let after = 6 - date.formatDate(newBeginDate, "d");
for (let i = 0; i < after; i++) {
this.col.push({
this.dayList.push({
value: "",
});
}
......@@ -206,16 +192,15 @@ export default {
}
},
chosenDateHandler(item) {
if (item.price && item.price.remainNum>0) {
if (item.price && item.price.remainNum > 0) {
this.currentDate = item.value;
this.$emit("change", item);
}
},
changePriceHandler(dateStr,money){
//this.currentDate.price.originalB2CPrice=money
this.col.forEach(x=>{
if(x.value==dateStr){
x.price.originalB2CPrice=money
changePriceHandler(dateStr, money) {
this.dayList.forEach(x => {
if (x.value == dateStr) {
x.price.originalB2CPrice = money
}
})
},
......@@ -223,11 +208,13 @@ export default {
this.currentDate = "";
},
},
};
};
</script>
<style>
.hover-date:hover {
.hover-date:hover {
background: #eee;
}
}
</style>
src/components/trip/flight.vue
View file @ 2b60959d
......@@ -82,7 +82,7 @@ export default {
price: {
handler(n, o) {
this.m = n;
console.log(n)
console.log("flight",n)
},
deep: true,
immediate: true,
......
src/components/trip/smaple.vue
View file @ 2b60959d
......@@ -2,43 +2,40 @@
<div class="q-mt-md" :class="{'q-px-md':$q.platform.is.mobile}">
<div class="text-subtitle2 text-weight-bold">產品概要</div>
<div class="row q-pt-md q-col-gutter-md">
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="traffic!=''">
<div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}"
v-if="traffic!=''">
<div class="q-mr-md col-3">往返交通：</div>
<div class="col text-grey-6">{{ traffic }}</div>
</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="hotel!=''">
<div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}"
v-if="hotel!=''">
<div class="q-mr-md col-3">酒店住宿：</div>
<div class="col text-grey-6">{{ hotel }}</div>
</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<div class="q-mr-md col-3">購物：</div>
<div class="col text-grey-6">{{ trip.shopList.length>0?`${trip.shopList.length}個購物點`:'無購物行程' }}</div>
</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="team!=''">
<div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}"
v-if="team!=''">
<div class="q-mr-md col-3">團隊人數：</div>
<div class="col text-grey-6">{{ team }}</div>
</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
<div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<div class="q-mr-md col-3">景點：</div>
<div class="col text-grey-6">{{ trip.scenicList.length }}個景點或場館</div>
</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
<div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<div class="q-mr-md col-3">自費項目：</div>
<div class="col text-grey-6">{{ trip.selfpayingList.length>0?`${trip.selfpayingList.length}個自費項目`:'無自費項目' }}</div>
<div class="col text-grey-6">{{ trip.selfpayingList.length>0?`${trip.selfpayingList.length}個自費項目`:'無自費項目' }}
</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="trip.freedomList.length>0">
</div>
<div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}"
v-if="trip.freedomList.length>0">
<div class="q-mr-md col-3">自由活動：</div>
<div class="col text-grey-6">{{ trip.freedomList.length}} 次自由活動</div>
</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
<div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<div class="q-mr-md col-3">餐食：</div>
<div class="col text-grey-6">{{ dinner }}</div>
</div>
......@@ -52,13 +49,13 @@
</template>
<script>
export default {
export default {
props: ["trip"],
data() {
return {
traffic: "",
stars:['一星酒店','二星酒店','三星酒店','四星酒店','五星酒店','六星酒店','七星酒店','民宿','溫泉酒店'],
hotel:'',
stars: ['一星酒店', '二星酒店', '三星酒店', '四星酒店', '五星酒店', '六星酒店', '七星酒店', '民宿', '溫泉酒店'],
hotel: '',
team: '',
dinner: ''
};
......@@ -68,67 +65,82 @@ export default {
this.formatHotel()
this.formatTeam()
this.formatDinner()
console.log("trip", this.trip);
},
methods: {
formatTeam(){
formatTeam() {
let p = this.trip.priceList[0]
if(!p) return
let t = p.priceTeamType??1
t=t==0?1:t
if(t==1){
if (!p) return
let t = 0;
if (p && p.priceTeamType) {
t = p.priceTeamType
}
t = t == 0 ? 1 : t
if (t == 1) {
this.team = `${p.seat}人團隊散拼`
}else{
} else {
this.team = '一单一团'
}
},
formatDinner(){
formatDinner() {
let d = []
this.trip.dinnerList.forEach(x=>{
if(x.dinnerName.indexOf('自理')==-1 && x.dinnerName.indexOf('请选择')==-1){
this.trip.dinnerList.forEach(x => {
if (x.dinnerName.indexOf('自理') == -1 && x.dinnerName.indexOf('请选择') == -1 && x.dinnerId > 0) {
d.push(x)
}
})
if(d && d.length>0){
let g=this.groupBy(d,x=>{ return x.useDinnerType})
let t = ['早餐','午餐','晚餐']
g.forEach(x=>{
this.dinner+=`${x.data.length}次 ${t[parseInt(x.key)-1]}；`
if (d && d.length > 0) {
let g = this.groupBy(d, x => {
return x.useDinnerType
})
let t = ['早餐', '午餐', '晚餐']
g.forEach(x => {
this.dinner += `${x.data.length}次 ${t[parseInt(x.key)-1]}；`
})
}else{
} else {
this.dinner = '無餐食供應'
}
},
formatTraffic() {
if(this.trip.trafficList && this.trip.trafficList.length>0 && this.trip.trafficList[0].subTraffic && this.trip.trafficList[0].subTraffic.length>0){
if (this.trip.trafficList && this.trip.trafficList.length > 0 && this.trip.trafficList[0].subTraffic && this
.trip.trafficList[0].subTraffic.length > 0) {
let z = this.trip.trafficList[0].subTraffic[0]
if (z&&z.arrivalType&&z.arrivalType == 1) {
if (z && z.arrivalType && z.arrivalType == 1) {
this.traffic = '飛機往返';
} else if (z&&z.arrivalType&&z.arrivalType == 2) {
} else if (z && z.arrivalType && z.arrivalType == 2) {
this.traffic = '巴士往返';
} else if (z&&z.arrivalType&&z.arrivalType == 3) {
} else if (z && z.arrivalType && z.arrivalType == 3) {
this.traffic = '郵輪往返';
} else {
this.traffic = '高鐵往返';
}
}
},
formatHotel(){
formatHotel() {
let h = []
this.trip.hotelList.forEach(x=>{
if(h.findIndex(y=>y.dayNum==x.dayNum)==-1){
this.trip.hotelList.forEach(x => {
if (h.findIndex(y => y.dayNum == x.dayNum) == -1) {
h.push(x)
}
})
if(h && h.length>0){
let g = this.groupBy(h,(x)=>{return x.star})
g.forEach(x=>{
this.hotel+=`${x.data.length}晚${this.stars[parseInt(x.key)-1]?this.stars[parseInt(x.key)-1]:''}；`
console.log("h", h);
if (h && h.length > 0) {
let g = this.groupBy(h, (x) => {
return x.star
})
g.forEach(x => {
let tempStr = this.stars[parseInt(x.key) - 1];
console.log("", tempStr)
if (tempStr && tempStr != '') {
this.hotel += `${x.data.length}晚${ tempStr}；`
}
})
}
}
},
};
};
</script>
<style></style>
src/components/trip/startCity.vue
View file @ 2b60959d
......@@ -4,7 +4,6 @@
<div class="text-grey-6 f12 q-my-sm">此行程包含多個出發城市</div>
<div class="row q-col-gutter-md">
<div v-for="(x,i) in m.unionCityList" :key="i"><q-chip size="14px" square>{{ x.cityName }}</q-chip></div>
</div>
</div>
</template>
......@@ -16,7 +15,7 @@ export default {
price: {
handler(n, o) {
this.m = n;
console.log(n)
console.log("startCity",n)
},
deep: true,
immediate: true,
......
src/pages/detailsProduct.vue
View file @ 2b60959d
<template>
<div class="" style="min-height: 80vh; overflow: hidden">
<div
v-if="dataList && (!$q.loading.isActive || loadCount>0)"
class="relative"
style="margin: auto"
:style="{ 'max-width': $q.platform.is.desktop ? '1200px' : '100%' }"
>
<div
style="
<div v-if="dataList && (!$q.loading.isActive || loadCount>0)" class="relative" style="margin: auto"
:style="{ 'max-width': $q.platform.is.desktop ? '1200px' : '100%' }">
<div style="
position: fixed;
left: 0;
right: 0;
......@@ -15,128 +10,60 @@
border-top: 1px solid #eee;
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
z-index: 999;
"
class="bg-white"
v-if="
" 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"
v-if="dataList.priceList.length > 0"
>
" :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"
v-if="dataList.priceList.length > 0">
<span>CNY {{ moneyFormat(dataList.priceList[0].originalB2CPrice, 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="margin-left: auto; margin-right: auto"
<q-btn color="primary" unelevated class="q-px-xl" label="選擇方案" @click="goScrollHandler(priceListHeight)" />
</div>
</div>
<div v-if="dataList" style="margin-left: auto; margin-right: auto"
:style="{ 'max-width': $q.platform.is.desktop ? '1200px' : '100%' }"
:class="{ 'q-px-md': $q.screen.width < 1220 }"
>
: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 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
v-if="$q.platform.is.desktop"
:label="dataList.title"
class="text-grey-6 ellipsis"
/>
<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"
/>
<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"
>
<slideritem v-for="(item, index) in dataList.imgCover" :key="index" 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
class="q-py-lg"
:class="{
<div class="q-py-lg" :class="{
row: $q.platform.is.desktop,
column: $q.platform.is.mobile,
}"
style="border-bottom: 1px solid #eee"
>
}" style="border-bottom: 1px solid #eee">
<div class="col q-mr-lg">
<div class="text-h6 ellipsis-2-lines">{{ dataList.title }}</div>
<div class="q-mt-md f12 text-grey-6">
<q-icon name="iconfont icondingweixiao" size="16px" class="q-mr-sm" />
<span
>{{ dataList.aimPlaceName }}
<span>{{ dataList.aimPlaceName }}
<template v-if="citys.length > 0">
<span class="q-mx-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>
......@@ -145,69 +72,35 @@
</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 iconcancel"
label="取消需二次確認"
/>
</div>
</div>
<div
:style="{ width: $q.platform.is.mobile ? '100%' : '293px' }"
class="bg-grey-3 rounded-borders q-px-md"
<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 iconcancel" label="取消需二次確認" />
</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.priceList.length > 0">
CNY：{{ moneyFormat(dataList.priceList[0].originalB2CPrice, 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
:disable="dataList.priceList.length > 0 ? false : true"
@click="goScrollHandler(priceListHeight)"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/>
<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 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"
/>
<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="
<div class="bg-white" style="
position: fixed;
left: 0;
right: 0;
......@@ -215,88 +108,44 @@
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>
" 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"
>
<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">
{{ currentPrice.startDate }}
</div>
<q-popup-proxy ref="qDateProxy">
<calendar v-loading="calLoading"
class="bg-white q-pa-md"
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendarMobile"
></calendar>
<calendar v-loading="calLoading" class="bg-white q-pa-md" :priceList="dataList.priceList"
@change="changeChosenDateHandler" ref="calendarMobile"></calendar>
</q-popup-proxy>
</q-field>
<order-preview
:travel="dataList"
:price="currentPrice"
@reset="resetHandler"
@changeCity="changeCityHandler"
v-if="currentPrice && currentPrice.startDate"
></order-preview>
<order-preview :travel="dataList" :price="currentPrice" @reset="resetHandler"
@changeCity="changeCityHandler" v-if="currentPrice && currentPrice.startDate"></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="dataList.priceList.length > 0"
>
<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"
>
<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="取消需二次確認"
/>
<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="{
<li v-for="(x, i) in warnBuy" :class="{
'q-mt-md':
$q.platform.is.desktop | (i != 0 && $q.platform.is.mobile),
}"
:key="i"
>
}" :key="i">
{{ x }}
</li>
</ul>
......@@ -304,61 +153,31 @@
</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="dataList.priceList.length > 0"
>CNY
{{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}</span
>
<q-btn
color="primary"
outline
:label="showOrderPreview ? '取消選擇' : '選擇'"
@click="changeShowOrderPreviewHandler"
class="q-px-lg"
/>
<span class="product-price text-h6 q-mr-md" v-if="dataList.priceList.length > 0">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
class="q-pa-md"
style="border-top: 1px solid #eee"
v-if="showOrderPreview"
>
<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="取消需二次確認"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconroundcheck"
label="6個工作日內（不含例休假）確認"
/>
<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 class="q-mt-lg row" v-if="$q.platform.is.desktop" v-loading="calLoading">
<div class="col">
<calendar
:priceList="dataList.priceList"
:tcid="msg.tcid"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
<calendar :priceList="dataList.priceList" :tcid="msg.tcid" :dataList="dataList" @change="changeChosenDateHandler"
ref="calendar"></calendar>
</div>
<div class="col q-ml-xl">
<order-preview
:price="currentPrice"
@reset="resetHandler"
:travel="dataList"
@changeCity="changeCityHandler"
></order-preview>
<order-preview :price="currentPrice" @reset="resetHandler" :travel="dataList"
@changeCity="changeCityHandler"></order-preview>
</div>
</div>
</div>
......@@ -366,150 +185,90 @@
</div>
</div>
<div
v-if="dataList"
style="margin-left: auto; margin-right: auto"
:style="{ width: $q.platform.is.desktop ? '1200px' : '100%' }"
class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }"
>
<div
class="absolute"
style="z-index: 999; left: -150px"
:style="{
<div v-if="dataList" style="margin-left: auto; margin-right: auto"
:style="{ width: $q.platform.is.desktop ? '1200px' : '100%' }" class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }">
<div class="absolute" style="z-index: 999; left: -150px" :style="{
top:
currentHeight > navs[1].top
? currentHeight + 100 + 'px'
: currentHeight + 200 + 'px',
}"
v-if="
}" v-if="
$q.platform.is.desktop &&
currentHeight > navs[1].top - 400 &&
currentHeight < navs[2].top &&
dataList.dayList.length > 3
"
>
">
<div v-if="true">
<div v-for="(x, i) in days" :key="i">
<div
v-if="moreDays == 2 && i == 0"
style="text-align: center; margin-bottom: 21px; cursor: pointer"
@click="goScrollHandler(x.top + 50), (moreDays = 1)"
>
<div v-if="moreDays == 2 && i == 0" style="text-align: center; margin-bottom: 21px; cursor: pointer"
@click="goScrollHandler(x.top + 50), (moreDays = 1)">
...
</div>
<div
v-if="((moreDays && moreDays == 1) || !moreDays) && i < 8"
class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
@click="goScrollHandler(x.top + 50)"
:class="{
<div v-if="((moreDays && moreDays == 1) || !moreDays) && i < 8"
class="trip-module text-subtitle2 cursor-pointer q-mb-lg" @click="goScrollHandler(x.top + 50)" :class="{
'active-trip-moduleDay text-red active':
currentHeight >= x.top &&
(i == days.length - 1 || currentHeight < days[i + 1].top),
}"
>
}">
{{ x.display }}
</div>
<div
v-if="moreDays && moreDays == 2 && i >= 8"
class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
@click="goScrollHandler(x.top + 50)"
:class="{
<div v-if="moreDays && moreDays == 2 && i >= 8" class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
@click="goScrollHandler(x.top + 50)" :class="{
'active-trip-moduleDay text-red active':
currentHeight >= x.top &&
(i == days.length - 1 || currentHeight < days[i + 1].top),
}"
>
}">
{{ x.display }}
</div>
<div
v-if="(!moreDays || moreDays == 1) && days.length > 8 && i == 8"
style="text-align: center; cursor: pointer"
@click="goScrollHandler(x.top + 50), (moreDays = 2)"
>
<div v-if="(!moreDays || moreDays == 1) && days.length > 8 && i == 8"
style="text-align: center; cursor: pointer" @click="goScrollHandler(x.top + 50), (moreDays = 2)">
...
</div>
</div>
</div>
</div>
<div
style="width: 100%"
:class="{
<div style="width: 100%" :class="{
col: $q.platform.is.desktop,
col: $q.platform.is.mobile,
}"
>
}">
<flight :price="currentPrice"></flight>
<div
class="text-h5 text-weight-bold text-left q-pb-sm"
ref="feature"
:class="{
<div class="text-h5 text-weight-bold text-left q-pb-sm" ref="feature" :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
}">
行程特色
</div>
<div>
<div
class="q-pb-xl"
v-if="tripImages && tripImages.length > 0"
ref="diyContext"
>
<div class="q-pb-xl" v-if="tripImages && tripImages.length > 0" ref="diyContext">
<div v-for="(x, i) in tripImages">
<img
v-if="dataList.teamType != 2"
class="block"
:src="x.header"
width="100%"
/>
<img v-if="dataList.teamType != 2" class="block" :src="x.header" width="100%" />
<img class="block" :src="x.page" style="width: 100%" />
<div v-if="dataList.teamType != 2" class="tripImages-footer">
<img class="block" :src="x.footer" style="width: 100%" />
</div>
</div>
</div>
<div
class="q-mt-md trip-text q-pb-xl line-feature large-feature"
ref="diyContext"
v-html="dataList.feature.featureContent"
v-else-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-else-if="
<div class="q-mt-md trip-text q-pb-xl line-feature large-feature" ref="diyContext"
v-html="dataList.feature.featureContent" v-else-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-else-if="
dataList.feature.featureHtml != '' &&
(!tripImages || tripImages.length == 0)
"
></div>
"></div>
</div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="product"
:class="{
<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="q-pb-xl"
:class="{ 'q-px-md': $q.platform.is.mobile }"
></smaple>
<smaple v-if="dataList" :trip="dataList" class="q-pb-xl" :class="{ 'q-px-md': $q.platform.is.mobile }">
</smaple>
<template v-if="detailsImageList && detailsImageList.length > 0">
<div v-for="(x, i) in detailsImageList" :id="`days_${i}`">
<div
class="tripImages-footer"
v-if="!dataList.tripColor"
style="padding: 20px 0"
></div>
<div class="tripImages-footer" v-if="!dataList.tripColor" style="padding: 20px 0"></div>
<img class="block" :src="x.page" style="width: 100%" />
<div class="tripImages-footer"></div>
</div>
......@@ -519,86 +278,48 @@
<trip :trip="dataList" @change="changeTripShowHandler"></trip>
</template>
<template v-if="dataList.dayList.length > 3">
<block
v-if="false"
:currentHeightDay="currentHeight"
:days="days"
:tripList="dayList"
:isDirect="isDirect"
:clickDate="clickDate"
></block>
<block v-if="false" :currentHeightDay="currentHeight" :days="days" :tripList="dayList"
:isDirect="isDirect" :clickDate="clickDate"></block>
</template>
</template>
</div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="price"
:class="{
<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="{
<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="{
<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="{
}"></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="{
<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="{
}"></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 q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)"
:class="{
<div class="q-mt-lg trip-text q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
<div
v-html="
}">
<div v-html="
dataList.feature.shopRemark ? dataList.feature.shopRemark : '暫無購買說明'
"
></div>
"></div>
<div class="q-mb-lg text-weight-bold fz18">購物安排</div>
<q-table
:data="dataList.shopList"
:columns="columns"
bordered
class="my-sticky-header-table no-shadow"
:hide-bottom="true"
>
<q-table :data="dataList.shopList" :columns="columns" bordered class="my-sticky-header-table no-shadow"
:hide-bottom="true">
<template v-slot:header>
<q-tr class="bg-orange-1">
<q-th v-for="(item, i) in columns" :key="i" class="text-left">
......@@ -621,67 +342,43 @@
</template>
</q-table>
</div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="order"
:class="{
<div class="text-h5 text-weight-bold text-left q-mt-xl" ref="order" :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="
<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="{
" :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="visa"
:class="{
}"></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" ref="visa" :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
}">
簽證
</div>
<div
class="q-mt-lg trip-text q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)"
:class="{
<div class="q-mt-lg trip-text q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
}">
<div class="text-weight-bold fz18 q-mb-md">簽字須知</div>
<div
v-html="
<div v-html="
dataList.feature.visaRemark ? dataList.feature.visaRemark : '暫無簽字須知'
"
></div>
"></div>
</div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="tips"
:class="{
<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"
<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="{
v-html="dataList.feature.warmTip ? dataList.feature.warmTip : '暂无溫馨提示'" :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="cancelTips"
......@@ -693,12 +390,10 @@
</div> -->
<div class="q-mt-lg f12 text-grey-6" ref="journeyLookOut">
<q-icon name="iconfont icontishi" class="q-mr-sm" />
<span
>注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
<span>注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
2-5
个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14
个工作天内退款。</span
>
个工作天内退款。</span>
</div>
<!-- <div
class="q-mt-lg trip-text q-mb-xl"
......@@ -728,31 +423,21 @@
</div>
</div> -->
</div>
<template
v-if="
<template v-if="
$q.platform.is.desktop &&
currentHeight > 130 &&
$refs.journeyLookOut.getBoundingClientRect().top + currentHeight - 280 >
currentHeight
"
>
<div
class="absolute"
style="z-index: 999; right: -150px"
:style="{ top: currentHeight < 1000 ? '1000px' : currentHeight + 100 + 'px' }"
>
">
<div class="absolute" style="z-index: 999; right: -150px"
:style="{ top: currentHeight < 1000 ? '1000px' : currentHeight + 100 + 'px' }">
<div>
<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="{
<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>
......@@ -761,32 +446,28 @@
</div>
</div>
<div v-if="!dataList && !$q.loading.isActive" class="text-center q-my-xl">
<none-data
iconType="order"
title="沒有找到您想要的商品哦"
subtitle="趕緊去挑選心儀的旅遊產品吧"
></none-data>
<none-data iconType="order" title="沒有找到您想要的商品哦" subtitle="趕緊去挑選心儀的旅遊產品吧"></none-data>
</div>
</div>
</template>
<script>
import { slider, slideritem } from "vue-concise-slider";
import calendar from "../components/trip/calendarproduct.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 headStyle4 from "../components/trip/style4";
import headStyle5 from "../components/trip/style5";
import block from "src/components/trip/block/index";
import Flight from "src/components/trip/flight.vue";
import NoneData from "src/components/common/noneData.vue";
export default {
import {
slider,
slideritem
} from "vue-concise-slider";
import calendar from "../components/trip/calendarproduct.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 Flight from "src/components/trip/flight.vue";
import NoneData from "src/components/common/noneData.vue";
export default {
props: [],
data() {
return {
columns: [
{
columns: [{
name: "cityName",
required: true,
label: "城市",
......@@ -818,7 +499,6 @@ export default {
isGetPriceFlight: true,
pType: 1, //类型 1 来源B2C
newConfigId: 0, //列表里的configId
pType: 1,
},
currentPrice: {},
isShow: false,
......@@ -853,16 +533,13 @@ export default {
videoPosition: 0,
currentHeight: 0,
isPictureInPicture: false,
days: [
{
days: [{
val: "",
top: 0,
isActive: false,
display: "",
},
],
navs: [
{
}, ],
navs: [{
val: "feature",
top: 0,
isActive: false,
......@@ -918,7 +595,7 @@ export default {
tripImages: [],
moreDays: 0,
calLoading: false,
loadCount:0
loadCount: 0,
};
},
components: {
......@@ -944,11 +621,8 @@ export default {
x.top = object.getBoundingClientRect().top + 60;
});
} catch (error) {
console.log("----异常");
console.log("watch_days_handler", error);
}
// setTimeout(()=>{
// that.getTopNum(JSON.stringify(that.days))
// },1000)
});
},
immediate: true,
......@@ -982,9 +656,10 @@ export default {
if (this.$route.params.id) {
this.msg.tcid = decodeURIComponent(this.$route.params.id);
}
if (this.$route.params.newConfigId) {
this.msg.newConfigId = decodeURIComponent(this.$route.params.newConfigId);
if (this.$route.params.teamType) {
this.msg.teamType = this.$route.params.teamType;
}
console.log("create_details", this.msg)
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
......@@ -993,14 +668,12 @@ export default {
}
this.getData();
window.addEventListener("scroll", this.menu);
// this.getCarData();
},
methods: {
getTripFeatureImageHandler(configId) {
this.$axios
.get("http://upload.oytour.com/Home/GetTripImage?configId=" + configId)
.then((r) => {
console.log(r.data, "r.data.data.id");
if (r.data.OtherFile) {
this.tripImages = [];
let OtherFile = r.data.OtherFile;
......@@ -1055,9 +728,9 @@ export default {
},
handleScroll(e) {
let temp = this.getScroll().top;
this.stickyHeight = document.querySelector(".q-header--hidden")
? "translateY(0px)"
: "translateY(45px)";
this.stickyHeight = document.querySelector(".q-header--hidden") ?
"translateY(0px)" :
"translateY(45px)";
this.currentHeight = temp;
if (
this.videoPosition > 0 &&
......@@ -1086,13 +759,11 @@ export default {
},
getScroll() {
return {
left:
window.pageXOffset ||
left: window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft ||
0,
top:
window.pageYOffset ||
top: window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0,
......@@ -1114,14 +785,12 @@ export default {
playHandler(e) {},
pauseHandler(e) {},
timeChangeHandler(e) {
//console.log(e)
},
//
seekedChangeHandler(e) {
//console.log(e)
},
resetHandler() {
// this.currentPrice=null;
if (this.currentPrice) {
this.currentPrice.isSupportChildren = null;
this.currentPrice.unionCityList = null;
......@@ -1132,15 +801,21 @@ export default {
else this.$refs.calendar.reset();
},
changeChosenDateHandler(val) {
console.log("changeChosenDateHandler", val);
val.price.version = new Date().getTime();
this.currentPrice = JSON.parse(JSON.stringify(val.price));
if (this.currentPrice.id != this.msg.tcid) {
this.msg.tcid = this.currentPrice.id;
this.msg.configId = this.currentPrice.configID;
this.getData();
}
this.currentPrice.unionCityList.splice(0, 0, {
cityId: this.dataList.startCityId,
cityName: this.dataList.startCityName,
});
this.currentPrice.RealPrice = this.currentPrice.RealPrice
? this.currentPrice.RealPrice
: this.currentPrice.originalB2CPrice;
this.currentPrice.RealPrice = this.currentPrice.RealPrice ?
this.currentPrice.RealPrice :
this.currentPrice.originalB2CPrice;
this.currentPrice.originalB2CPrice = this.currentPrice.RealPrice;
if (
this.currentPrice.unionCityList &&
......@@ -1208,8 +883,6 @@ export default {
this.detailsImageList.push(obj);
});
}
// tripImageList detailsImageList headerImage footerImage
// this.getTripFeatureImageHandler(r.data.data.id)
this.dataList = r.data.data;
if (this.dataList.dayList && this.dataList.dayList.length > 0) {
this.dataList.dayList.forEach((item) => {
......@@ -1229,8 +902,8 @@ export default {
this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
this.dayList = this.dataList.dayList;
this.dataList.priceList.forEach(x=>{
x.realOrgainB2CPrice= x.originalB2CPrice
this.dataList.priceList.forEach(x => {
x.realOrgainB2CPrice = x.originalB2CPrice
x.originalB2CPrice = x.b2CPrice
})
......@@ -1260,9 +933,9 @@ export default {
let div = divArr[i];
if (that.$q.platform.is.mobile) {
div.style.zoom =
div.offsetWidth > 1000
? 0.999
: document.documentElement.clientWidth; /// 1123.0
div.offsetWidth > 1000 ?
0.999 :
document.documentElement.clientWidth; /// 1123.0
} else {
div.style.zoom = 1;
}
......@@ -1272,16 +945,8 @@ export default {
}
setTimeout(() => {
this.navs.forEach((x) => {
// x.top =
// this.$refs[x.val].getBoundingClientRect().top +
// this.currentHeight -
// 60;
x.top = this.$refs[x.val].getBoundingClientRect().top;
});
// this.priceListHeight =
// this.$refs.pricelist.getBoundingClientRect().top +
// this.currentHeight -
// 60;
this.priceListHeight = this.$refs.pricelist.getBoundingClientRect().top;
this.days = [];
this.dayList.forEach((x) => {
......@@ -1306,8 +971,7 @@ export default {
.querySelector("#scrollId .q-page-container")
.addEventListener("scroll", this.handleScrollDay);
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
//console.log('scrollIdq-page-container异常信息1', error)
}
});
}
......@@ -1323,32 +987,15 @@ export default {
},
changeCityHandler(unionCity) {
this.msg.cityId = unionCity.cityId
this.getData()
return
this.currentPrice.originalB2CPrice = this.currentPrice.RealPrice;
if (unionCity.cityId != this.dataList.startCityId) {
if (unionCity.backFlight && unionCity.backFlight.addPrice) {
this.currentPrice.originalB2CPrice += unionCity.backFlight.addPrice;
}
if (unionCity.goFlight && unionCity.goFlight.addPrice) {
this.currentPrice.originalB2CPrice += unionCity.goFlight.addPrice;
}
}
if (this.$q.platform.is.desktop){
this.$refs.calendar.changePriceHandler(
this.currentPrice.startDate,
this.currentPrice.originalB2CPrice
);
// this.$forceUpdate();
}
this.getData();
},
// 获取车的详情
getCarData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetCarSingleProductDetail",
{ ProductId: "16" },
"b2c_get_GetCarSingleProductDetail", {
ProductId: "16"
},
(r) => {
if (r.data.resultCode == 1) {
this.dataList = r.data.data;
......@@ -1393,14 +1040,13 @@ export default {
let div = divArr[i];
if (this.$q.platform.is.mobile) {
div.style.zoom =
div.offsetWidth > 1000
? 0.999
: document.documentElement.clientWidth / 1123.0;
div.offsetWidth > 1000 ?
0.999 :
document.documentElement.clientWidth / 1123.0;
} else {
div.style.zoom = 1;
}
}
this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
}
setTimeout(() => {
......@@ -1431,8 +1077,7 @@ export default {
.querySelector("#scrollId .q-page-container")
.addEventListener("scroll", this.handleScrollDay);
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
//console.log('scrollIdq-page-container异常信息2', error)
}
});
} else {
......@@ -1456,43 +1101,52 @@ export default {
document.querySelector(newval).scrollIntoView(true);
},
},
};
};
</script>
<style>
.line-feature * {
.line-feature * {
line-height: normal !important;
}
.line-feature .draggable {
}
.line-feature .draggable {
position: absolute;
}
.slider-item {
}
.slider-item {
transform: scale(1);
transition-timing-function: ease;
transition-duration: 300ms;
}
.slider-item.slider-active {
}
.slider-item.slider-active {
transform: scale(1);
z-index: 999;
}
.trip-text img {
}
.trip-text img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
.trip-text {
}
.trip-text {
line-height: 1.6;
}
.slider-item.slider-active-copy {
}
.slider-item.slider-active-copy {
transform: scale(1);
z-index: 999;
}
.active-trip-module {
}
.active-trip-module {
color: var(--q-color-primary);
font-weight: 800;
position: relative;
}
.active-trip-module::before {
}
.active-trip-module::before {
position: absolute;
content: " ";
top: 0;
......@@ -1501,8 +1155,9 @@ export default {
width: 5px;
border-radius: 5px;
background: var(--q-color-primary);
}
.trip-module {
}
.trip-module {
color: #9e9e9e;
transition: all 0.3s;
font-weight: 100;
......@@ -1514,17 +1169,20 @@ export default {
border: 1px solid #ccc;
border-radius: 50%;
font-family: lettergothicstd;
}
.active-trip-moduleDay {
}
.active-trip-moduleDay {
position: relative;
border: 0;
left: -15px;
font-size: 51px;
}
.active-trip-moduleDay.active::before {
}
.active-trip-moduleDay.active::before {
opacity: 1;
}
.active-trip-moduleDay::before {
}
.active-trip-moduleDay::before {
display: inline-block;
position: absolute;
top: 0px;
......@@ -1534,15 +1192,19 @@ export default {
font-family: fangsong;
line-height: 58px;
opacity: 0;
}
#setZoom > div {
}
#setZoom>div {
zoom: calc(100 / 1000);
}
.large-feature img {
}
.large-feature img {
width: 100% !important;
}
.tripImages-footer {
}
.tripImages-footer {
background: url("../assets/img/trip/otherBjThree.jpg") repeat;
padding: 115px 0 32px 0;
}
}
</style>
src/router/routes.js
View file @ 2b60959d
......@@ -35,7 +35,7 @@ const routes = [{
component: () =>
import ('pages/details.vue')
}, { //行程2024
path: '/detailsProduct/:id/:configId',
path: '/detailsProduct/:id/:configId/:teamType',
meta: { title: '行程' },
component: () =>
import ('pages/detailsProduct.vue')
......
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