Skip to content

M
million
Commit 0ee7a8aa authored by 吴春's avatar 吴春
Browse files
Options

1

parent c06499e9
Hide whitespace changes
Inline Side-by-side
Showing with 1980 additions and 98 deletions
src/components/searchProductdata/kkday.vue
View file @ 0ee7a8aa
...@@ -19,11 +19,11 @@ ...@@ -19,11 +19,11 @@
v-model="searchAdd.name" v-model="searchAdd.name"
type="text" type="text"
standout standout
placeholder="搜尋目的地" placeholder="蒐索關鍵字"
class="q-ma-md" class="q-ma-md"
@input="changeAddrSearchHandler" @input="changeAddrSearchHandler"
/> />
<q-tree <!-- <q-tree
ref="area" ref="area"
:nodes="areaList" :nodes="areaList"
no-connectors no-connectors
...@@ -35,19 +35,19 @@ ...@@ -35,19 +35,19 @@
text-color="#666" text-color="#666"
no-nodes-label=" " no-nodes-label=" "
no-results-label=" " no-results-label=" "
/> /> -->
</q-card> </q-card>
</popup> </popup>
<popup mode="top" v-model="showCategory"> <popup mode="top" v-model="showCategory">
<q-card flat class="rounded-borders q-py-md q-mt-lg"> <q-card flat class="rounded-borders q-py-md q-mt-lg">
<div class="text-subtitle1 text-weight-bold q-mx-md">所有商品類別</div> <div class="text-subtitle1 text-weight-bold q-mx-md">所有類別</div>
<q-tree <q-tree
ref="category" ref="category"
:nodes="goodsType" :nodes="goodsType"
no-connectors no-connectors
node-key="Id" node-key="Id"
label-key="CategoryName" label-key="Name"
tick-strategy="leaf" tick-strategy="leaf"
@update:ticked="handleTicked" @update:ticked="handleTicked"
:ticked="ticked" :ticked="ticked"
...@@ -127,11 +127,11 @@ ...@@ -127,11 +127,11 @@
v-model="searchAdd.name" v-model="searchAdd.name"
type="text" type="text"
standout standout
placeholder="搜尋目的地" placeholder="蒐索關鍵字"
class="q-ma-md" class="q-ma-md"
@input="changeAddrSearchHandler" @input="changeAddrSearchHandler"
/> />
<q-tree <!-- <q-tree
ref="area" ref="area"
:nodes="areaList" :nodes="areaList"
no-connectors no-connectors
...@@ -143,16 +143,16 @@ ...@@ -143,16 +143,16 @@
text-color="#666" text-color="#666"
no-nodes-label=" " no-nodes-label=" "
no-results-label=" " no-results-label=" "
/> /> -->
</q-card> </q-card>
<q-card flat class="rounded-borders q-py-md q-mt-lg"> <q-card flat class="rounded-borders q-py-md q-mt-lg">
<div class="text-subtitle1 text-weight-bold q-mx-md">所有商品類別</div> <div class="text-subtitle1 text-weight-bold q-mx-md">所有類別</div>
<q-tree <q-tree
ref="category" ref="category"
:nodes="goodsType" :nodes="goodsType"
no-connectors no-connectors
node-key="Id" node-key="Id"
label-key="CategoryName" label-key="Name"
tick-strategy="leaf" tick-strategy="leaf"
@update:ticked="handleTicked" @update:ticked="handleTicked"
:ticked="ticked" :ticked="ticked"
...@@ -270,7 +270,7 @@ ...@@ -270,7 +270,7 @@
> >
</div> </div>
</div> </div>
<div class="q-mt-lg" v-if="!$q.loading.isActive && DataList.length > 0"> <div class="q-mt-lg" v-if="!$q.loading.isActive &&DataList&& DataList.length > 0">
<div <div
class="rounded-borders cursor-pointer overflow-hidden bg-white" class="rounded-borders cursor-pointer overflow-hidden bg-white"
:class="$q.platform.is.desktop ? 'row q-mb-md' : 'colmuns q-ma-md'" :class="$q.platform.is.desktop ? 'row q-mb-md' : 'colmuns q-ma-md'"
...@@ -334,7 +334,7 @@ ...@@ -334,7 +334,7 @@
></q-icon> ></q-icon>
<template v-if="x.startDateList&&x.startDateList.length>0"> <template v-if="x.startDateList&&x.startDateList.length>0">
<template v-if="x.startDateList.length>1"> <template v-if="x.startDateList.length>1">
<q-badge outline :color="x.index==index?'secondary':'blue-grey-11'" :label="item" v-for="(item,index) in x.startDateList" :key="index" style="margin-right:5px;" @click="SwitchTCID(x,i,index)"/> <q-badge outline :color="x.index==index?'secondary':'blue-grey-11'" :label="item" v-for="(item,index) in x.startDateList" :key="index" style="margin-right:5px;margin-bottom:7px;" @click="SwitchTCID(x,i,index)"/>
</template> </template>
<template v-else> <template v-else>
<q-badge outline color="secondary" :label="x.startDateList[0]"/> <q-badge outline color="secondary" :label="x.startDateList[0]"/>
...@@ -525,27 +525,43 @@ export default { ...@@ -525,27 +525,43 @@ export default {
this.msg.startDate = date.formatDate(new Date(this.qMsg.startDate), "YYYY/MM/DD") this.msg.startDate = date.formatDate(new Date(this.qMsg.startDate), "YYYY/MM/DD")
this.msg.endDate = date.formatDate(new Date(this.qMsg.endDate), "YYYY/MM/DD") this.msg.endDate = date.formatDate(new Date(this.qMsg.endDate), "YYYY/MM/DD")
this.dateRange = { from: this.msg.startDate, to: this.msg.endDate }; this.dateRange = { from: this.msg.startDate, to: this.msg.endDate };
this.goSearchHandler();
}, },
mounted() { mounted() {
console.log('kkday', this.msg) let LineIdList=[];
this.areaTicked = this.msg.areaId ? [this.msg.areaId] : (this.msg.areaIds ? this.msg.areaIds : []); if( this.msg.LineIds&& this.msg.LineIds.length>0)
this.msg.placeIds = this.getChoseAddressCity().join(","); {
var CategoryName = this.getUrlKey("CategoryName", window.location.href); LineIdList= this.msg.LineIds.split(";");
if (CategoryName) { }
let list = this.goodsType.find( let SeriesIdList= [];
(item) => item.CategoryName === CategoryName if( this.msg.SeriesIds&& this.msg.SeriesIds.length>0)
); {
let arr = []; SeriesIdList= this.msg.SeriesIds.split(";");
list.children.forEach((item) => { }
arr.push(item.Id); if((LineIdList&&LineIdList.length>0)||(SeriesIdList&&SeriesIdList.length>0)){
if (item.children && item.children.length) { let arr = [];
item.children.forEach((item2) => { this.goodsType.forEach((x) => {
arr.push(item2.Id); let lineIdIndex= LineIdList.findIndex(yId=>x.Id.slice(2)==yId);
}); if (lineIdIndex!=-1) {
} arr.push(x.Id);
}
x.children.forEach((y) => {
if(lineIdIndex!=-1){
arr.push(y.Id);
}
else{
let seriesIdIndex= SeriesIdList.findIndex(yId=>y.Id.slice(2)==yId);
if (seriesIdIndex!=-1) {
arr.push(y.Id);
}
}
});
}); });
this.ticked = arr; this.ticked = arr;
console.log("this.ticked",this.ticked);
} }
}, },
methods: { methods: {
...@@ -559,10 +575,7 @@ export default { ...@@ -559,10 +575,7 @@ export default {
}, },
handleAreaTicked(target) { handleAreaTicked(target) {
this.msg.pageIndex = 1 this.msg.pageIndex = 1
this.areaTicked = target;
console.log("this.areaTicked", target);
this.msg.placeIds = this.getChoseAddressCity().join(","); this.msg.placeIds = this.getChoseAddressCity().join(",");
console.log('handleAreaTicked', this.areaTicked, this.msg.placeIds)
this.goSearchHandler(); this.goSearchHandler();
}, },
initAreaList() { initAreaList() {
...@@ -607,14 +620,7 @@ export default { ...@@ -607,14 +620,7 @@ export default {
if (x.SubList) { if (x.SubList) {
} }
}, },
// changeGoodTypeHandler(x) {
// if (x.checked && this.msg.teamType.indexOf(x.Id) == -1) {
// this.msg.teamType.push(x.Id);
// } else if (!x.checked && this.msg.teamType.indexOf(x.Id) != -1) {
// let i = this.msg.teamType.findIndex(item => item == x.Id);
// this.msg.teamType.splice(i, 1);
// }
// },
chosenSortHandler(x) { chosenSortHandler(x) {
this.msg.orderBy = x.value; this.msg.orderBy = x.value;
this.msg.pageIndex = 1 this.msg.pageIndex = 1
...@@ -632,7 +638,6 @@ export default { ...@@ -632,7 +638,6 @@ export default {
}, []); }, []);
} }
const areaList = treeToArray(this.areaList); const areaList = treeToArray(this.areaList);
console.log(">>>>>>>>>>>>>>>>>>>>>", areaList);
areaList.forEach((item) => { areaList.forEach((item) => {
if (this.areaTicked.includes(item.Id)) { if (this.areaTicked.includes(item.Id)) {
let arr = item.DestinationList.map((item) => item.ID); let arr = item.DestinationList.map((item) => item.ID);
...@@ -689,36 +694,92 @@ export default { ...@@ -689,36 +694,92 @@ export default {
}, },
initGoods() { initGoods() {
let arr = []; let arr = [];
let jObj = JSON.parse(window.localStorage.getItem("baseifo")); // SeriesIds:"",
jObj.CategoryList.forEach((x) => { //LineIds:"",
x.checked = false; let LineIdList=[];
x.explsed = false; if( this.msg.LineIds&& this.msg.LineIds.length>0)
x.isShow = true; {
x.children = x.SubList; LineIdList= this.msg.LineIds.split(";");
x.children.forEach((y) => { }
y.checked = false; let SeriesIdList= [];
y.explsed = false; if( this.msg.SeriesIds&& this.msg.SeriesIds.length>0)
y.isShow = true; {
if (y.Id === this.msg.categoryId) { SeriesIdList= this.msg.SeriesIds.split(";");
arr.push(y.Id); }
} this.apipost(
if (y.SubList && y.SubList.length) { "b2c_get_GetAllLineList",
y.children = y.SubList; this.msg,
y.children.forEach((z) => { (res) => {
z.checked = false; if (res.data.resultCode == 1) {
z.explsed = false; var jObj = res.data.data;
z.isShow = true; jObj.forEach((x) => {
if (z.Id === this.msg.categoryId) { x.checked = false;
arr.push(z.Id); x.explsed = false;
} x.isShow = true;
if (y.Id === this.msg.categoryId) { x.children = x.SubList;
arr.push(z.Id); let lineIdIndex= LineIdList.findIndex(yId=>x.Id.slice(2)==yId);
} x.children.forEach((y) => {
}); y.checked = false;
} y.explsed = false;
}); y.isShow = true;
this.goodsType.push(x); if(lineIdIndex!=-1){
}); arr.push(y.Id);
this.ticked.push(y.Id);
}
else{
let seriesIdIndex= SeriesIdList.findIndex(yId=>y.Id.slice(2)==yId);
if (seriesIdIndex!=-1) {
arr.push(y.Id);
this.ticked.push(y.Id);
}
}
});
this.goodsType.push(x);
});
console.log("arr",arr);
if(this.ticked&&this.ticked.length>0){
this.msg.webSiteCategoryIds = this.ticked.join(",");
this.goSearchHandler();
}else{
this.goSearchHandler();
}
}else this.goSearchHandler()
},
(err) => {}
);
//let jObj = JSON.parse(window.localStorage.getItem("baseifo"));
// jObj.CategoryList.forEach((x) => {
// x.checked = false;
// x.explsed = false;
// x.isShow = true;
// x.children = x.SubList;
// x.children.forEach((y) => {
// y.checked = false;
// y.explsed = false;
// y.isShow = true;
// if (y.Id === this.msg.categoryId) {
// arr.push(y.Id);
// }
// if (y.SubList && y.SubList.length) {
// y.children = y.SubList;
// y.children.forEach((z) => {
// z.checked = false;
// z.explsed = false;
// z.isShow = true;
// if (z.Id === this.msg.categoryId) {
// arr.push(z.Id);
// }
// if (y.Id === this.msg.categoryId) {
// arr.push(z.Id);
// }
// });
// }
// });
// this.goodsType.push(x);
// console.log("goodsType",this.goodsType);
// });
this.goodsTypeJSON = JSON.stringify(this.goodsType); this.goodsTypeJSON = JSON.stringify(this.goodsType);
if (this.msg.categoryId) { if (this.msg.categoryId) {
this.$nextTick(() => { this.$nextTick(() => {
...@@ -792,7 +853,7 @@ export default { ...@@ -792,7 +853,7 @@ export default {
// }); // });
}, },
goSearchHandler() { goSearchHandler() {
this.msg.webSiteCategoryIds = this.ticked.join(",");
// this.msg.placeIds = this.areaTicked.join(","); // this.msg.placeIds = this.areaTicked.join(",");
this.$q.loading.show(); this.$q.loading.show();
this.DataList = []; this.DataList = [];
...@@ -824,6 +885,7 @@ export default { ...@@ -824,6 +885,7 @@ export default {
this.msg.priceOrderByField = 2; this.msg.priceOrderByField = 2;
} }
} }
this.msg.webSiteCategoryIds = this.ticked.join(",");
this.PageCount = 0; this.PageCount = 0;
this.TotalCount = 0; this.TotalCount = 0;
this.apipost( this.apipost(
...@@ -905,10 +967,6 @@ export default { ...@@ -905,10 +967,6 @@ export default {
// this.ticked = categoryInfo; // this.ticked = categoryInfo;
console.log("this.areaListJSONTMP", this.areaListJSONTMP, this.areaList); console.log("this.areaListJSONTMP", this.areaListJSONTMP, this.areaList);
this.priceModel = { min: priceInfo.minPrice, max: priceInfo.maxPrice }; this.priceModel = { min: priceInfo.minPrice, max: priceInfo.maxPrice };
// this.msg.priceRange = {
// min: priceInfo.minPrice,
// max: priceInfo.maxPrice,
// };
let arr = []; let arr = [];
dayInfo.forEach((item) => { dayInfo.forEach((item) => {
if (item < 6) { if (item < 6) {
...@@ -921,18 +979,11 @@ export default { ...@@ -921,18 +979,11 @@ export default {
arr.push(9); arr.push(9);
} }
}); });
console.log("dayInfo", arr, dayInfo, this.dayArray);
// arr = [... new Set(arr)]
// this.dayArray.forEach(item => {
// if(arr.includes(item.id)) {
// item.checked = true
// }
// })
this.dayArray = this.dayArray.filter((item) => arr.includes(item.id)); this.dayArray = this.dayArray.filter((item) => arr.includes(item.id));
// this.msg.dayNumList = arr;
}, },
GotoDetails(item) { GotoDetails(item) {
this.CommonJump(item, {}, "blank"); this.CommonJump('/detailsProduct/' + encodeURIComponent(item.id)+ "/" + item.configId,{}, "blank");
}, },
SwitchTCID(obj,i,index) { SwitchTCID(obj,i,index) {
if(this.DataList&&this.DataList.length>0){ if(this.DataList&&this.DataList.length>0){
......
src/components/searchProductdata/list.vue
View file @ 0ee7a8aa
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<ul class="group-list"> <ul class="group-list">
<li> <li>
<template v-if="itemf.PriceList&&itemf.PriceList.length>0"> <template v-if="itemf.PriceList&&itemf.PriceList.length>0">
<div v-for="(item,index) in itemf.priceList" :key="index"> <div v-for="(item,index) in itemf.priceList" :key="index" style="margin-right:5px;margin-bottom:7px;" @click="SwitchTCID(itemf,indexf,index)">
<a>{{item.StartDate}}</a> <a>{{item.StartDate}}</a>
</div> </div>
</template> </template>
...@@ -69,12 +69,25 @@ ...@@ -69,12 +69,25 @@
}, },
methods: { methods: {
GotoDetails(item) { GotoDetails(item) {
this.CommonJump('/details/' + encodeURIComponent(item.id) + "/" + item.tcid, {}); this.CommonJump('/details/' + encodeURIComponent(item.id) + "/" + item.configId, {}, "blank");
}, },
//调用 //调用
gerOrderList(){ gerOrderList(){
this.$emit('getPage') this.$emit('getPage')
},
SwitchTCID(obj,i,index) {
if(this.DataList&&this.DataList.length>0){
let nowobj= JSON.parse(JSON.stringify(obj));
console.log("nowobj",nowobj.startDateList);
this.DataList[i] = {
...nowobj.priceList[index]
}
this.DataList[i].index=index;
this.DataList[i].startDateList=nowobj.startDateList;
this.DataList[i].priceList=nowobj.priceList;
this.$forceUpdate();
} }
},
} }
} }
......
src/components/trip/calendarproduct.vue 0 → 100644
View file @ 0ee7a8aa
<template>
<div>
<div class="text-subtitle2 text-weight-bold">選擇日期、選項</div>
<div class="text-grey-6 f12 q-my-md">請選擇出發日期</div>
<div class="rounded-borders" style="border: 1px solid #eee">
<div class="q-px-lg q-py-sm row items-center">
<div class="text-subtitle2 text-weight-bold col">
{{ 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"
/>
</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"
>
{{ x }}
</div>
</div>
<div class="row wrap">
<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"
>
{{ x.display }}
</div>
<div class="text-grey-6" v-else>{{ x.display }}</div>
<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;')
}}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { date } from "quasar";
export default {
props: ["priceList","tcid"],
data() {
return {
chineseWeek: ["日", "一", "二", "三", "四", "五", "六"],
chineseMonth: [
"一月",
"二月",
"三月",
"四月",
"五月",
"6月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
data: [],
months: [],
currentMonth: 0,
col: [],
prices: [],
currentDate: "",
};
},
watch: {
priceList: {
handler(newVal, oldValue) {
this.prices = newVal;
this.init();
},
deep: true, // 深度监听
},
},
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 firstMonth = date.formatDate(
new Date(startDate),
"YYYY/MM"
);
console.log(firstMonth)
let current = this.months.findIndex((x) => x.monthValue == firstMonth)
this.currentMonth = current>-1?current:0;
this.changeMonthHandler();
},
createChosenDateHandler() {
let beginDate = new Date();
let endDate = date.addToDate(beginDate, { years: 1 });
while (beginDate <= endDate) {
let i = parseInt(date.formatDate(beginDate, "M")) - 1;
this.months.push({
value: date.formatDate(beginDate, "YYYY/MM/DD"),
monthValue: date.formatDate(beginDate, "YYYY/MM"),
display: `${date.formatDate(beginDate, "YYYY")} ${
this.chineseMonth[i]
}`,
});
beginDate = date.addToDate(beginDate, { months: 1 });
}
},
changeShowMonthHandler(i) {
this.currentMonth += i;
let value = this.months[this.currentMonth].value
this.$emit('getQuotationData',value)
this.changeMonthHandler();
},
changeMonthHandler() {
try {
this.col = [];
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({
value: "",
});
}
while (newBeginDate <= newEndDate) {
let value = date.formatDate(newBeginDate, "YYYY-MM-DD");
let price = this.prices.find((x) => x.startDate == value);
this.col.push({
value,
display: date.formatDate(newBeginDate, "DD"),
price,
});
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]);
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]);
InitialOption = true
}
}
}
}
let after = 6 - date.formatDate(newBeginDate, "d");
for (let i = 0; i < after; i++) {
this.col.push({
value: "",
});
}
} catch (error) {
alert(error)
}
},
chosenDateHandler(item) {
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
}
})
},
reset() {
this.currentDate = "";
},
},
};
</script>
<style>
.hover-date:hover {
background: #eee;
}
</style>
src/pages/SearchProduct.vue
View file @ 0ee7a8aa
...@@ -1433,7 +1433,7 @@ export default { ...@@ -1433,7 +1433,7 @@ export default {
this.ShowType = jObj.Config.ShowType; this.ShowType = jObj.Config.ShowType;
this.ShowType = 2; this.ShowType = 2;
} else { } else {
this.getAera(); //this.getAera();
} }
document.addEventListener("click", this.clickHandler); document.addEventListener("click", this.clickHandler);
var qsearchKey = this.getUrlKey("qsearchKey", window.location.href); var qsearchKey = this.getUrlKey("qsearchKey", window.location.href);
......
src/pages/detailsProduct.vue 0 → 100644
View file @ 0ee7a8aa
<template>
<div class="" style="min-height: 80vh;overflow: hidden;">
<div v-if="dataList && !$q.loading.isActive"
class="relative"
style="margin: auto;"
:style="{'max-width': $q.platform.is.desktop?'1200px':'100%'}">
<div
style="
position: fixed;
left: 0;
right: 0;
top: 0;
border-top: 1px solid #eee;
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
z-index: 999;
"
class="bg-white"
v-if="
(currentHeight > navs[0].top + 100 && $q.platform.is.desktop) ||
(currentHeight > priceListHeight &&
currentHeight < navs[0].top &&
$q.platform.is.mobile)
"
:style="{ transform: stickyHeight }"
>
<div
style="max-width: 1200px; margin-left: auto; margin-right: auto"
:class="{ 'q-px-md': $q.screen.width < 1220 }"
class="q-py-sm row items-center"
>
<span
class="col product-price text-subtitle1 text-weight-bold"
style="text-align: left"
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"
:style="{'max-width': $q.platform.is.desktop?'1200px':'100%'}"
:class="{ 'q-px-md': $q.screen.width < 1220 }"
>
<div class="row items-center q-mt-md q-mb-lg">
<q-breadcrumbs
class="col f12 no-wrap q-mr-md"
v-if="dataList"
style="font-size: 13px"
>
<q-breadcrumbs-el
icon="home"
label="首頁"
class="cursor-pointer"
@click="CommonJump('/index', {})"
/>
<q-breadcrumbs-el
:label="dataList.aimPlaceName"
class="cursor-pointer"
/>
<!-- <q-breadcrumbs-el>
<span v-for="(x, i) in citys" :key="i">
<span class="cursor-pointer">{{ x }} </span>
<span v-if="i + 1 != citys.length" class="q-mr-sm">，</span>
</span>
</q-breadcrumbs-el> -->
<q-breadcrumbs-el
v-if="$q.platform.is.desktop"
:label="dataList.title"
class="text-grey-6 ellipsis"
/>
</q-breadcrumbs>
<div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div>
</div>
<div style="padding-bottom: calc((100% - 0px) / 3); position: relative">
<div
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
class="overflow-hidden rounded-borders"
>
<slider
ref="slider"
:options="options"
@slide="slideHandler"
style="height: 100%"
>
<slideritem
v-if="dataList.videoStr"
style="width: 80%"
class="q-mx-sm"
key="video"
>
<vue-core-video-players
ref="video"
:src="dataList.videoStr"
:title="dataList.title"
:muted="true"
:autoplay="false"
@play="playHandler"
@pause="pauseHandler"
@seeked="seekedChangeHandler"
@timeupdate="timeChangeHandler"
logo="../statics/img/transparent_logo.png"
:loop="false"
id="trip_video"
/>
</slideritem>
<slideritem
v-for="(item, index) in dataList.imgCover"
:key="index"
style="width: 80%"
class="q-mx-sm"
>
<q-img
:src="item.Url"
spinner-color="grey"
spinner-size="20px"
/>
</slideritem>
<div slot="loading">loading...</div>
</slider>
</div>
</div>
<div
class="q-py-lg"
:class="{
row: $q.platform.is.desktop,
column: $q.platform.is.mobile,
}"
style="border-bottom: 1px solid #eee"
>
<div class="col q-mr-lg">
<div class="text-h6 ellipsis-2-lines">{{ dataList.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 }}
<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>
</span>
</template>
</span>
</div>
<div class="q-mt-md row">
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconOwner-1"
label=" 直營產品"
/>
<q-chip
v-if="dataList.dayList"
class="transparent q-mr-xl no-padding"
square
icon="iconfont icontime"
:label="` 行程時間 ${dataList.dayList.length} 天`"
/>
<!-- <q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconnetwork-fill"
label="日本語/中文 導覽"
/> -->
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconcancel"
label="取消需二次確認"
/>
</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：{{ dataList. }} -->
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 }"
/>
</div>
</div>
<div class="q-mt-lg" v-if="dataList.productRecommend">
<div
class="q-mt-sm"
v-for="(x, i) in dataList.productRecommend.split('\n')"
:key="i"
>
<q-icon
name="iconfont iconhongqi"
color="primary"
size="16px"
class="q-mr-md"
/>
{{ x }}
</div>
</div>
</div>
<div
class="bg-white"
style="
position: fixed;
left: 0;
right: 0;
top: -1px;
border-top: 1px solid #eee;
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
z-index: 999;
"
v-if="currentHeight > priceListHeight + 800 && $q.platform.is.mobile"
:style="{ transform: stickyHeight }"
>
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="left"
narrow-indicator
>
<q-tab
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.top + 20)"
:name="x.display"
:label="x.display"
></q-tab>
</q-tabs>
</div>
<div
v-if="dataList"
class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9"
ref="pricelist"
>
<div style="max-width: 1200px; margin-left: auto; margin-right: auto">
<div class="text-h6">選擇方案</div>
<div
class="rounded-borders bg-white q-pa-md q-mt-md"
v-if="$q.platform.is.mobile"
>
<q-field
class="q-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
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>
</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="q-pa-md row">
<div class="col">
<div
class="text-subtitle1 text-weight-bold row items-center"
v-if="$q.platform.is.desktop"
>
<span class="q-mr-md">行程標準出行方案</span>
<q-chip
square
color="orange"
size="sm"
text-color="grey-2"
class="text-light"
label="取消需二次確認"
/>
</div>
<div class="text-grey f12">
<ul class="q-pl-md no-margin">
<li
v-for="(x, i) in warnBuy"
:class="{
'q-mt-md':
$q.platform.is.desktop
| (i != 0 && $q.platform.is.mobile),
}"
:key="i"
>
{{ x }}
</li>
</ul>
</div>
</div>
<div class="" v-if="$q.platform.is.desktop">
<div class="row items-center">
<span class="product-price text-h6 q-mr-md"
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 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個工作日內（不含例休假）確認"
/>
</div>
<div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col">
<calendar
:priceList="dataList.priceList"
:tcid="msg.tcid"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
</div>
<div class="col q-ml-xl">
<order-preview
:price="currentPrice"
@reset="resetHandler"
:travel="dataList"
@changeCity="changeCityHandler"
></order-preview>
</div>
</div>
</div>
</div>
</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 }"
>
<!-- col q-ml-xl position-relative -->
<div
class="absolute" style="z-index: 999;left: -150px;"
:style="{'top':currentHeight>navs[1].top?(currentHeight+100)+'px':(currentHeight+200)+'px'}"
v-if="$q.platform.is.desktop&&
currentHeight>navs[1].top-400
&&currentHeight<navs[2].top&&dataList.dayList.length>3
"
>
<!-- style="position: sticky; top: 100px" -->
<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>
<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="{
'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>
</div>
</div>
</div>
<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="{
'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 v-for="(x,i) in tripImages">
<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="dataList.feature.featureHtml != '' && (!tripImages || tripImages.length==0)"
></div>
</div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="product"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
行程介紹
</div>
<div class="q-pb-xl">
<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>
<!-- <img v-if="dataList.teamType!=2" class="block" :src="x.header" width="100%"> -->
<img class="block" :src="x.page" style="width: 100%">
<div class="tripImages-footer">
<!-- <img v-if="dataList.tripColor" class="block" :src="x.footer" style="width: 100%"> -->
</div>
</div>
</template>
<template v-else>
<template v-if="dataList.dayList.length<=3">
<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>
</template>
</template>
<!--
<template
v-if="
(dataList.priceList.length > 0 &&
dataList.priceList &&
dataList.priceList[0].teamType == 2) ||
(dataList.currentPrice && dataList.currentPrice.teamType == 2)
"
>
<trip :trip="dataList" @change="changeTripShowHandler"></trip>
</template>
<template v-else>
<block
:currentHeightDay="currentHeight"
:days="days"
:tripList="dayList"
:isDirect="isDirect"
:clickDate="clickDate"
></block>
</template> -->
</div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="price"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用說明
</div>
<div
class="text-subtitle1 text-weight-bold q-my-md"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用包含
</div>
<div
class="q-mt-md trip-text"
v-html="dataList.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="{
'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="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
購買說明
</div>
<div
class="q-mt-lg trip-text 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="
dataList.feature.shopRemark
? dataList.feature.shopRemark
: '暫無購買說明'
"></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">
<template v-slot:header>
<q-tr class="bg-orange-1">
<q-th v-for="(item, i) in columns" :key="i" class="text-left">
<span class="fz14 text-weight-bold">{{ item.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="cityName" :props="props">
<span>{{ props.row.cityName }}</span>
</q-td>
<q-td key="shopName" :props="props">
<span>{{ props.row.shopName }}</span>
</q-td>
<q-td key="visitTime" :props="props">
<span>{{ props.row.visitTime }}</span>
</q-td>
</q-tr>
</template>
</q-table>
</div>
<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="
dataList.feature.importantTip
? dataList.feature.importantTip
: '暫無訂單須知'
"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="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="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
<div class="text-weight-bold fz18 q-mb-md">簽字須知</div>
<div v-html="
dataList.feature.visaRemark
? dataList.feature.visaRemark
: '暫無簽字須知'
"></div>
</div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="tips"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
溫馨提示
</div>
<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="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
</div>
<!-- <div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="cancelTips"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
取消政策
</div> -->
<div class="q-mt-lg f12 text-grey-6" ref="journeyLookOut">
<q-icon name="iconfont icontishi" class="q-mr-sm" />
<span
>注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
2-5
个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14
个工作天内退款。</span
>
</div>
<!-- <div
class="q-mt-lg trip-text q-mb-xl"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
<ul class="no-padding text-grey-9 q-ml-md">
<li>所选日期 15 天（含）之前取消，收取手续费 0%</li>
<li class="q-mt-sm">
所选日期 8 ~ 14 天之间取消，收取手续费 30%
</li>
<li class="q-mt-sm">所选日期 4 ~ 7 天之间取消，收取手续费 50%</li>
<li class="q-mt-sm">所选日期 1 ~ 3 天之间取消，收取手续费 80%</li>
<li class="q-mt-sm">
所选日期 0 ~ 0 天之间取消，收取手续费 100%
</li>
</ul>
<div class="q-mt-lg f12 text-grey-6">
<q-icon name="iconfont icontishi" class="q-mr-sm" />
<span
>注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
2-5
个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14
个工作天内退款。</span
>
</div>
</div> -->
</div>
<template v-if="$q.platform.is.desktop&&currentHeight>130
&&$refs.journeyLookOut.getBoundingClientRect().top+currentHeight-280>currentHeight">
<!-- <div class="col-1"></div> -->
<!-- col q-ml-xl position-relative -->
<div
class="absolute" style="z-index: 999;right: -150px;"
:style="{'top':currentHeight<1000?'1000px':(currentHeight+100)+'px'}">
<!-- style="position: sticky; top: 100px" -->
<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="{
'active-trip-module':
currentHeight >= x.top &&
(i == navs.length - 1 || currentHeight < navs[i + 1].top),
}"
>
{{ x.display }}
</div>
</div>
</div>
</template>
</div>
</div>
<div v-if="!dataList && !$q.loading.isActive" class="text-center q-my-xl">
<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 {
props: [],
data() {
return {
columns: [{
name: "cityName",
required: true,
label: "城市",
align: "left",
},
{
name: "shopName",
required: true,
label: "購物店名稱",
align: "left",
},
{
name: "visitTime",
required: true,
label: "預計停留時間",
align: "left",
},
],
tab: "",
searchDate: "",
clickDate: "",
slide: 1,
msg: {
configId: 0,
cityId: 0,
preview: 0,
tcid:'',
teamType: 0,
isGetPriceFlight: true,
pType: 1, //类型 1 来源B2C
newConfigId: 0, //列表里的configId
},
currentPrice: {},
isShow: false,
dataList: null,
dayList: [],
isDirect: 1,
TripConfig: {},
isShowNav: false,
clickIndex: 1,
isLoading: false,
isShowDialog: false,
citys: [],
//Slider configuration [obj]
options: {
currentPage: 0,
speed: 300,
itemAnimation: false,
centeredSlides: true,
thresholdDistance: 100,
thresholdTime: 300,
loopedSlides: 2,
slidesToScroll: 1,
loop: true,
},
warnBuy: [
"未满 2 岁幼儿我們將按照嬰兒價格執行。請下單是注意區分",
"如需要單人房，請購買單房",
"不占床2-11(包含)岁幼童可购买儿童价，如需占床請購買佔床產品",
"12歲以上皆視同成人售價",
],
showOrderPreview: false,
videoPosition: 0,
currentHeight: 0,
isPictureInPicture: false,
days: [
{
val: "",
top: 0,
isActive: false,
display: "",
},
],
navs: [
{
val: "feature",
top: 0,
isActive: false,
display: "行程特色",
},
{
val: "product",
top: 0,
isActive: false,
display: "產品介紹",
},
{
val: "price",
top: 0,
isActive: false,
display: "費用說明",
},
{
val: "warning",
top: 0,
isActive: false,
display: "購買說明",
},
{
val: "order",
top: 0,
isActive: false,
display: "訂單須知",
},
{
val: "visa",
top: 0,
isActive: false,
display: "簽證",
},
{
val: "tips",
top: 0,
isActive: false,
display: "溫馨提示",
},
// {
// val: "cancelTips",
// top: 0,
// isActive: false,
// display: "取消政策",
// },
],
priceListHeight: 0,
stickyHeight: 0,
zoomDiyContext: 1,
detailsImageList:[],
tripImages:[],
moreDays: 0,
};
},
components: {
slider,
slideritem,
calendar,
OrderPreview,
smaple,
Trip,
block,
Flight,
NoneData
},
watch: {
days: {
handler: function (val, oldval) {
this.days = val;
let that = this
this.$nextTick(()=>{
try{
that.days.forEach((x,i)=>{
var object=document.getElementById(`days_${i}`);
x.top = object.getBoundingClientRect().top+60
})
} catch (error) {
console.log('----异常')
}
// setTimeout(()=>{
// that.getTopNum(JSON.stringify(that.days))
// },1000)
})
},
immediate: true,
deep: true,
},
currentHeight: {
handler: function (val, oldval) {
this.navs.forEach((x, i) => {
if (
x.top &&
this.currentHeight >= x.top &&
(i == this.navs.length - 1 ||
this.currentHeight < this.navs[i + 1].top)
) {
if (this.tab != x.display) {
this.tab = x.display;
return;
} else {
return;
}
}
});
},
immediate: false,
deep: true,
},
},
created() {
if (this.$route.params.configId) {
this.msg.configId = decodeURIComponent(this.$route.params.configId);
}
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);
}
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
if (localStorage.baseifo) {
this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
}
this.getData();
window.addEventListener("scroll", this.menu);
// this.getCarData();
},
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
let length = OtherFile.length
let header = OtherFile[length-1]
let footer = OtherFile[length-2]
if(OtherFile[0].indexOf('footer')!=-1){
header = OtherFile[1]
footer = OtherFile[0]
}
OtherFile.forEach((x,i)=>{
let obj = {
header: header,
page: x,
footer: footer,
}
if(OtherFile[0].indexOf('footer')!=-1){
if(i>1){
this.tripImages.push(obj)
}
}else{
if(i<length-2){
this.tripImages.push(obj)
}
}
})
this.$forceUpdate();
}
})
},
changeShowOrderPreviewHandler() {
this.showOrderPreview = !this.showOrderPreview;
if (!this.showOrderPreview) {
// this.currentPrice=null
if (this.currentPrice) {
this.currentPrice.isSupportChildren = null;
this.currentPrice.unionCityList = null;
this.currentPrice.singleRoomPrice = 0;
this.currentPrice.originalB2CPrice = 0;
}
this.changeTripShowHandler();
}
},
getTopNum(x) {
this.days = JSON.parse(x);
},
changeTripShowHandler() {
this.$nextTick(() => {
this.navs.forEach((x) => {
x.top =
this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight -
60;
});
});
},
handleScroll(e) {
let temp = this.getScroll().top;
// if(temp-this.currentHeight>0){
// this.scrollDirection='down'
// }else{
// this.scrollDirection='up'
// }
this.stickyHeight = document.querySelector(".q-header--hidden")
? "translateY(0px)"
: "translateY(45px)";
this.currentHeight = temp;
if (
this.videoPosition > 0 &&
this.videoPosition < this.currentHeight &&
this.options.currentPage == 0 &&
!this.isPictureInPicture
) {
this.isPictureInPicture = true;
let t = document.querySelectorAll("video")[0];
try {
t.requestPictureInPicture();
} catch (error) {}
} else if (
this.videoPosition > 0 &&
this.videoPosition > this.currentHeight &&
this.options.currentPage == 0 &&
this.isPictureInPicture
) {
this.isPictureInPicture = false;
document.exitPictureInPicture();
}
let h = document.location.hash;
if (h.indexOf("#/detailsProduct/") == -1) {
window.removeEventListener("scroll", this.handleScroll);
}
},
getScroll() {
return {
left:
window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft ||
0,
top:
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0,
};
},
goScrollHandlerDay(top) {
window.scrollTo(0, top);
},
goScrollHandler(top) {
window.scrollTo(0, top);
},
slideHandler(e) {
this.options.currentPage = e.currentPage;
if (
e.currentPage != 0 &&
this.$refs.video &&
this.$refs.video.isPlaying
) {
this.$refs.video.pause();
}
},
playHandler(e) {},
pauseHandler(e) {},
timeChangeHandler(e) {
//console.log(e)
},
//
seekedChangeHandler(e) {
//console.log(e)
},
resetHandler() {
// this.currentPrice=null;
if (this.currentPrice) {
this.currentPrice.isSupportChildren = null;
this.currentPrice.unionCityList = null;
this.currentPrice.singleRoomPrice = 0;
this.currentPrice.originalB2CPrice = 0;
}
if (this.$q.platform.is.mobile) this.$refs.calendarMobile.reset();
else this.$refs.calendar.reset();
},
changeChosenDateHandler(val) {
val.price.version = new Date().getTime();
this.currentPrice = JSON.parse(JSON.stringify(val.price));
this.currentPrice.RealPrice = this.currentPrice.RealPrice
? this.currentPrice.RealPrice
: this.currentPrice.originalB2CPrice;
this.currentPrice.originalB2CPrice = this.currentPrice.RealPrice;
if (
this.currentPrice.unionCityList &&
this.currentPrice.unionCityList.length > 0 &&
this.dataList.startCityId != 0
) {
if (
this.currentPrice.unionCityList.findIndex(
(x) => x.cityId == this.dataList.startCityId
) == -1
) {
this.currentPrice.unionCityList.splice(0, 0, {
cityId: this.dataList.startCityId,
cityName: this.dataList.startCityName,
});
}
}
if (this.$q.platform.is.mobile) {
this.$refs.qDateProxy.hide();
}
this.$forceUpdate();
this.$nextTick(() => {
this.changeTripShowHandler();
});
},
showDialog() {
this.isShowDialog = true;
},
//关闭弹窗
closeDialog() {
this.isShowDialog = false;
},
getData() {
this.$q.loading.show();
let that = this
console.log(this.$q.loading)
this.apipost(
"b2b_get_Get2024B2BTravelInfoV1",
this.msg,
(r) => {
try {
if (r.data.resultCode == 1 && r.data.data.id>0) {
this.tripImages = []
this.detailsImageList = []
let header = r.data.data.feature.headerImage
let footer = r.data.data.feature.footerImage
if(r.data.data.feature.tripImageList.length>0){
let OtherFile = r.data.data.feature.tripImageList
OtherFile.forEach((x,i)=>{
let obj = {
header: header,
page: x,
footer: footer,
}
this.tripImages.push(obj)
})
}
if(r.data.data.feature.detailsImageList.length>0){
let OtherFile = r.data.data.feature.detailsImageList
OtherFile.forEach((x,i)=>{
let obj = {
header: header,
page: x,
footer: footer,
}
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) => {
item.slide = 0;
});
if (r.data.data.scenicList) {
r.data.data.scenicList.forEach((x) => {
if (x.cityName) {
this.citys.push(x.cityName);
}
});
if (this.citys.length > 0) {
this.citys = Array.from(new Set(this.citys));
}
}
}
this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
this.dayList = this.dataList.dayList;
this.isShow = true;
this.isDirect = this.dataList.isDirect;
if (this.dataList.videoStr && this.dataList.videoStr != "") {
this.options.loop = false;
this.options.currentPage = 1;
this.$nextTick(() => {
setTimeout(() => {
let t = document.querySelectorAll(".slider-wrapper");
if (t.length > 0) {
let d = t[0].getBoundingClientRect();
this.videoPosition = d.top + d.height;
}
}, 1000);
});
}
this.$nextTick(() => {
if (that.dataList.feature.featureHtml != "") {
let tw =
parseFloat(
that.$refs.diyContext.getBoundingClientRect().width
); // / 1123.0
let divArr = document.querySelectorAll("#setZoom>div");
for (let i = 0; i < divArr.length; i++) {
let div = divArr[i];
if (that.$q.platform.is.mobile) {
div.style.zoom =
div.offsetWidth > 1000
? 0.999
: document.documentElement.clientWidth;/// 1123.0
} else {
div.style.zoom = 1;
}
}
that.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
}
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) => {
let dayListObj = {
val: "day" + x.dayNum,
top: 0,
isActive: false,
display: x.dayNum > 9 ? x.dayNum : "0" + x.dayNum,
};
this.days.push(dayListObj);
});
if(this.days.length>8){
this.moreDays = 0
}else {
this.moreDays = 1
}
}, 1000);
try {
document
.querySelector("#scrollId .q-page-container")
.addEventListener("scroll", this.handleScrollDay);
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
}
});
}
} catch (error) {}
this.$q.loading.hide();
},
e=>{
this.$q.loading.hide();
}
);
},
changeCityHandler(unionCity) {
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;
}
}
console.log(this.$refs);
if (this.$q.platform.is.desktop)
this.$refs.calendar.changePriceHandler(
this.currentPrice.startDate,
this.currentPrice.originalB2CPrice
);
this.$forceUpdate();
},
// 获取车的详情
getCarData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetCarSingleProductDetail",
{ ProductId: "16" },
(r) => {
if (r.data.resultCode == 1) {
this.dataList = r.data.data;
if (this.dataList.dayList && this.dataList.dayList.length > 0) {
this.dataList.dayList.forEach((item) => {
item.slide = 0;
});
if (r.data.data.scenicList) {
r.data.data.scenicList.forEach((x) => {
if (x.cityName) {
this.citys.push(x.cityName);
}
});
}
}
this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
this.dayList = this.dataList.dayList;
this.isShow = true;
this.isDirect = this.dataList.isDirect;
if (this.dataList.videoStr && this.dataList.videoStr != "") {
this.options.loop = false;
this.options.currentPage = 1;
this.$nextTick(() => {
setTimeout(() => {
let t = document.querySelectorAll(".slider-wrapper");
if (t.length > 0) {
let d = t[0].getBoundingClientRect();
this.videoPosition = d.top + d.height;
}
}, 1000);
});
}
this.$nextTick(() => {
if (this.dataList.feature.featureHtml != "") {
let tw =
parseFloat(
this.$refs.diyContext.getBoundingClientRect().width
) / 1123.0;
let divArr = document.querySelectorAll("#setZoom>div");
for (let i = 0; i < divArr.length; i++) {
let div = divArr[i];
if (this.$q.platform.is.mobile) {
div.style.zoom =
div.offsetWidth > 1000
? 0.999
: document.documentElement.clientWidth / 1123.0;
} else {
div.style.zoom = 1;
}
}
this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
}
setTimeout(() => {
this.navs.forEach((x) => {
x.top =
this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight -
60;
});
this.priceListHeight =
this.$refs.pricelist.getBoundingClientRect().top +
this.currentHeight -
60;
this.days = [];
this.dayList.forEach((x) => {
let dayListObj = {
val: "day" + x.dayNum,
top: 0,
isActive: false,
display: x.dayNum > 9 ? x.dayNum : "0" + x.dayNum,
};
this.days.push(dayListObj);
});
}, 1000);
try {
document
.querySelector("#scrollId .q-page-container")
.addEventListener("scroll", this.handleScrollDay);
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
}
});
} else {
this.$message.error(r.data.message)
}
this.$q.loading.hide();
},
null
);
},
menu() {
this.scroll =
document.documentElement.scrollTop || document.body.scrollTop;
if (this.scroll > 300) {
this.isShowNav = true;
} else {
this.isShowNav = false;
}
},
goNavList(val) {
let newval = "#" + val;
document.querySelector(newval).scrollIntoView(true);
},
},
};
</script>
<style>
.line-feature * {
line-height: normal !important;
}
.line-feature .draggable{
position: absolute;
}
.slider-item {
transform: scale(1);
transition-timing-function: ease;
transition-duration: 300ms;
}
.slider-item.slider-active {
transform: scale(1);
z-index: 999;
}
.trip-text img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
.trip-text {
line-height: 1.6;
}
.slider-item.slider-active-copy {
transform: scale(1);
z-index: 999;
}
.active-trip-module {
color: var(--q-color-primary);
font-weight: 800;
position: relative;
}
.active-trip-module::before {
position: absolute;
content: " ";
top: 0;
bottom: 0;
left: -25px;
width: 5px;
border-radius: 5px;
background: var(--q-color-primary);
}
.trip-module {
color: #9e9e9e;
transition: all 0.3s;
font-weight: 100;
text-align: center;
line-height: 38px;
font-size: 18px;
width: 38px;
height: 38px;
border: 1px solid #ccc;
border-radius: 50%;
font-family: lettergothicstd;
}
.active-trip-moduleDay {
position: relative;
border: 0;
left: -15px;
font-size: 51px;
}
.active-trip-moduleDay.active::before {
opacity: 1;
}
.active-trip-moduleDay::before {
display: inline-block;
position: absolute;
top: 0px;
left: -50px;
content: "DAY";
font-size: 13px;
font-family: fangsong;
line-height: 58px;
opacity: 0;
}
#setZoom > div {
zoom: calc(100 / 1000);
}
.large-feature img{
width:100% !important
}
.tripImages-footer{
background: url('../assets/img/trip/otherBjThree.jpg') repeat;
padding: 115px 0 32px 0;
}
</style>
src/pages/line/orderPreview.vue
View file @ 0ee7a8aa
...@@ -434,7 +434,7 @@ ...@@ -434,7 +434,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="price.visaPrice > 0 || price.otherPrice > 0"> <!-- <div v-if="price.visaPrice > 0 || price.otherPrice > 0">
<hr <hr
style="border: none; border-top: 1px dashed #eee !important" style="border: none; border-top: 1px dashed #eee !important"
class="bg-transparent q-mb-sm" class="bg-transparent q-mb-sm"
...@@ -469,7 +469,7 @@ ...@@ -469,7 +469,7 @@
}} }}
</div> </div>
</div> </div>
</div> </div> -->
<hr <hr
style="border: none; border-top: 1px dashed #eee !important" style="border: none; border-top: 1px dashed #eee !important"
class="bg-transparent q-mb-sm" class="bg-transparent q-mb-sm"
...@@ -813,13 +813,13 @@ export default { ...@@ -813,13 +813,13 @@ export default {
if (this.chosenObj.df > 0) { if (this.chosenObj.df > 0) {
guestInfo += `單房x${this.chosenObj.df}; `; guestInfo += `單房x${this.chosenObj.df}; `;
} }
if (this.chosenObj.visaPrice > 0) { // if (this.chosenObj.visaPrice > 0) {
guestInfo += `簽證x${ // guestInfo += `簽證x${
this.chosenObj.crCount + // this.chosenObj.crCount +
this.chosenObj.etCount + // this.chosenObj.etCount +
this.chosenObj.yeCount // this.chosenObj.yeCount
}; `; // }; `;
} // }
if (this.chosenObj.safeMoney > 0) { if (this.chosenObj.safeMoney > 0) {
guestInfo += `旅行保險x${ guestInfo += `旅行保險x${
this.chosenObj.crCount + this.chosenObj.crCount +
...@@ -961,7 +961,7 @@ export default { ...@@ -961,7 +961,7 @@ export default {
money += this.price.singleRoomPrice * this.chosenObj.df; money += this.price.singleRoomPrice * this.chosenObj.df;
let sumCount = this.chosenObj.crCount + this.chosenObj.etCount; let sumCount = this.chosenObj.crCount + this.chosenObj.etCount;
money += this.price.visaPrice * sumCount; //money += this.price.visaPrice * sumCount;
money += this.price.safeMoney * sumCount; money += this.price.safeMoney * sumCount;
money += this.price.otherPrice * sumCount; money += this.price.otherPrice * sumCount;
this.sumPrice = money; this.sumPrice = money;
......
src/router/routes.js
View file @ 0ee7a8aa
...@@ -34,6 +34,11 @@ const routes = [{ ...@@ -34,6 +34,11 @@ const routes = [{
meta: { title: '行程' }, meta: { title: '行程' },
component: () => component: () =>
import ('pages/details.vue') import ('pages/details.vue')
}, { //行程2024
path: '/detailsProduct/:id/:configId',
meta: { title: '行程' },
component: () =>
import ('pages/detailsProduct.vue')
}, { // 包车，接机 }, { // 包车，接机
meta: { title: '包车，接机' }, meta: { title: '包车，接机' },
path: '/detailCar/:id', path: '/detailCar/:id',
......
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