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