Skip to content

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

Merge branch 'master' of http://gitlab.oytour.com/viitto/million

parents 0074de44 66506c6f
Hide whitespace changes
Inline Side-by-side
Showing with 169 additions and 73 deletions
src/components/car/orderPreview.vue
View file @ cbe70c63
<template>
<div class="column full-height">
<div class="col">
<div class="text-right">
<div class="text-right" v-if="$q.platform.is.desktop">
<q-btn
color="primary"
icon="refresh"
......@@ -112,23 +112,29 @@
<span class="text-subtitle2 text-grey-6 col">總金額</span>
<span class="text-h6 text-primary product-price">CNY {{ moneyFormat(sumPrice,0) }}</span>
</div>
<div class="q-mt-md text-right">
<span class="q-mr-lg f12 text-negative" v-if="!p.startDate" >
<div class="q-mt-md text-right"
:class="{'row wrap justify-end items-start':$q.platform.is.mobile}">
<span :class="{'col-12 q-mb-sm':$q.platform.is.mobile}">
<span class="f12 text-negative" v-if="!p.startDate"
:class="{'q-mr-lg':$q.platform.is.desktop}">
{{$q.platform.is.mobile?'請選擇上面的出行日期':'請選擇左側的出行日期'}}
</span>
<span class="q-mr-lg f12 text-negative"
<span class="f12 text-negative"
:class="{'q-mr-lg':$q.platform.is.desktop}"
v-if="(p.startDate&&!selectedCarObj)
||(p.startDate&&dataList.CarType==1&&(!selectedAirportObj||!unCarObj))
||(p.startDate&&dataList.CarType==2&&(!selectedAirportObj||!onCarObj))
||(p.startDate&&dataList.CarType==3&&(!onCarObj||!unCarObj))" >
{{`請選擇上面的${dataList.CarType==3?'車類型、上車下車點':dataList.CarType==1?'機場、車類型、下車點':'機場、車類型、上車點'}`}}
</span>
</span>
<q-btn color="primary" label="立即訂購" unelevated class="q-px-lg"
:disable="sumPrice==0||!selectedCarObj
||(dataList.CarType!=3&&!selectedAirportObj)
||(dataList.CarType==1&&!unCarObj)||(dataList.CarType==2&&!onCarObj)
||(dataList.CarType==3&&(!onCarObj||!unCarObj))"
@click="goOrderHandler"/>
</div>
</div>
</div>
......@@ -176,6 +182,7 @@ export default {
},
created() {
this.initModel();
console.log(this.p,'=======')
if(this.p.startDate){
this.chosenObj.startDate = this.p.startDate;
this.calcMoney()
......
src/pages/detailsCar.vue
View file @ cbe70c63
......@@ -12,6 +12,12 @@
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
......@@ -31,7 +37,7 @@
unelevated
class="q-px-xl"
label="選擇方案"
@click="goScrollHandler('#scheme')"
@click="goScrollHandler(priceListHeight)"
/>
</div>
</div>
......@@ -180,7 +186,7 @@
label="選擇方案"
unelevated
:disable="priceList.length>0?false:true"
@click="goScrollHandler('#scheme')"
@click="goScrollHandler(priceListHeight)"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/>
</div>
......@@ -227,7 +233,7 @@
<q-tab
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.id)"
@click="goScrollHandler(x.top + 20)"
:name="x.display"
:label="x.display"
></q-tab>
......@@ -243,20 +249,12 @@
style="max-width: 1200px; margin-left: auto; margin-right: auto"
>
<div class="text-h6">選擇方案</div>
<div
style="
background: #fff;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
"
>
<div
class="rounded-borders bg-white q-pa-md q-mt-md"
v-if="$q.platform.is.mobile"
>
<q-field
class="q-my-md"
class="q-mt-md"
stack-label
label="選擇日期、選項"
standout
......@@ -274,22 +272,20 @@
></calendar>
</q-popup-proxy>
</q-field>
<template v-if="currentPrice && currentPrice.startDate">
<order-preview
class="q-pa-md"
:dataList="dataList"
:configId="msg.configId"
:Month="currentYM.str"
:price="currentPrice"
@reset="resetHandler"
@getPriceList="getPriceList"
></order-preview>
</template>
<order-preview
:dataList="dataList"
:configId="msg.configId"
:Month="currentYM.str"
:price="currentPrice"
@reset="resetHandler"
@getPriceList="getPriceList"
></order-preview>
</div>
<!--方案选择区 -->
<!-- <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
<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="priceList && priceList.length > 0"
......@@ -313,7 +309,7 @@
</div>
<div class="text-grey f12">
<ul class="q-pl-md no-margin">
<li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i">
<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>
......@@ -331,7 +327,7 @@
color="primary"
outline
:label="showOrderPreview ? '取消選擇' : '選擇'"
@click="showOrderPreview = !showOrderPreview"
@click="changeShowOrderPreviewHandler"
class="q-px-lg"
/>
</div>
......@@ -384,7 +380,7 @@
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -397,7 +393,7 @@
<div
:class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }"
>
<div id="product" :class="{
<div ref="product" class="text-h5 text-weight-bold text-left q-mt-xl" :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">產品介紹</div>
<div
......@@ -408,7 +404,6 @@
v-if="dataList.feature && dataList.feature.featureHtml != ''"
></div>
<div
id="price"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="price"
:class="{
......@@ -447,8 +442,29 @@
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
購買須知
</div>
<div
class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)"
v-html="
dataList.feature
? dataList.feature.importantTip || '暂无购买须知'
: '暂无购买须知'
"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
id="assemblypoint"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="assemblypoint"
:class="{
......@@ -475,7 +491,6 @@
</div>
</div>
<div
id="experiencelocation"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="experiencelocation"
:class="{
......@@ -502,29 +517,6 @@
</div>
</div>
<div
id="warning"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
購買須知
</div>
<div
class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)"
v-html="
dataList.feature
? dataList.feature.importantTip || '暂无购买须知'
: '暂无购买须知'
"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
id="tips"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="tips"
:class="{
......@@ -546,7 +538,6 @@
}"
></div>
<div
id="cancelTips"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="cancelTips"
:class="{
......@@ -581,6 +572,7 @@
</div>
<template v-if="$q.platform.is.desktop">
<div class="col-1"></div>
<div class="col q-ml-xl position-relative">
<div style="position: sticky; top: 100px">
......@@ -588,7 +580,12 @@
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.id)"
@click="goScrollHandler(x.top + 20)"
:class="{
'active-trip-module':
currentHeight >= x.top &&
(i == navs.length - 1 || currentHeight < navs[i + 1].top),
}"
>
{{ x.display }}
</div>
......@@ -675,43 +672,43 @@ export default {
],
navs: [
{
id: "#product",
val: "product",
top: 0,
isActive: false,
display: "產品介紹",
},
{
id: "#price",
val: "price",
top: 0,
isActive: false,
display: "費用說明",
},
{
id: "#warning",
val: "warning",
top: 0,
isActive: false,
display: "購買須知",
},
{
id: "#assemblypoint",
val: "assemblypoint",
top: 0,
isActive: false,
display: "接送點範圍",
},
{
id: "#experiencelocation",
val: "experiencelocation",
top: 0,
isActive: false,
display: "機場地點",
},
{
id: "#tips",
val: "tips",
top: 0,
isActive: false,
display: "溫馨提示",
},
{
id: "#cancelTips",
val: "cancelTips",
top: 0,
isActive: false,
display: "取消政策",
......@@ -748,6 +745,13 @@ export default {
immediate: true,
deep: true,
},
currentPrice: {
handler: function (val, oldval) {
this.currentPrice = val;
},
immediate: false,
deep: true,
},
},
created() {
if (this.$route.params.id) {
......@@ -758,6 +762,7 @@ export default {
}
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
const timeStamp = Date.now()
const formattedString = date.formatDate(timeStamp, 'YYYY-MM-DD')
this.currentYM = {
......@@ -768,12 +773,36 @@ export default {
if (localStorage.baseifo) {
this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
}
window.addEventListener("scroll", this.menu);
// this.getData();
window.addEventListener("scroll", this.menu);
this.getCarData();
// this.getCarPriceData();
},
methods: {
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()
}
},
changeTripShowHandler() {
this.$nextTick(() => {
this.navs.forEach((x) => {
x.top =
this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight -
60;
});
});
},
getPriceList(Arr,id){
this.priceList = JSON.parse(Arr)
if(this.selectedCar === id) {
......@@ -785,6 +814,38 @@ export default {
getTopNum(x) {
this.days = JSON.parse(x);
},
handleScroll(e) {
let temp = this.getScroll().top;
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("#/detailCar/") == -1) {
window.removeEventListener("scroll", this.handleScroll);
}
},
getScroll() {
return {
left:
......@@ -799,9 +860,9 @@ export default {
0,
};
},
goScrollHandler(id) {
console.log("scrollIntoView", id);
document.querySelector(id).scrollIntoView({ behavior: "smooth" });
goScrollHandler(top) {
window.scrollTo(0, top);
// document.querySelector(id).scrollIntoView({ behavior: "smooth" });
},
slideHandler(e) {
this.options.currentPage = e.currentPage;
......@@ -824,7 +885,9 @@ export default {
},
resetHandler() {
this.currentPrice.startDate = "";
this.$refs.calendar.reset();
if(!this.$q.platform.is.mobile){
this.$refs.calendar.reset();
}
},
changeChosenDateHandler(val) {
val.price.version = new Date().getTime();
......@@ -893,6 +956,17 @@ export default {
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;
}, 1000);
try {
document
.querySelector("#scrollId .q-page-container")
......@@ -1032,6 +1106,21 @@ export default {
</script>
<style>
.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);
}
.slider-item {
transform: scale(1);
transition-timing-function: ease;
......
src/pages/detailsNew.vue
View file @ cbe70c63
......@@ -308,7 +308,7 @@
</div>
<div class="text-grey f12">
<ul class="q-pl-md no-margin">
<li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i">
<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>
......
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