Skip to content

M
million
Commit a0a9adfa authored by youjie's avatar youjie
Browse files
Options

手机端日期选项

parent a27c0034
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 65 deletions
src/components/trip/calendar.vue
View file @ a0a9adfa
<template>
<div>
<div class="text-subtitle2 text-weight-bold">選擇日期、選項</div>
<div class="text-grey-6 f12 q-my-md">請選擇出發日期</div>
<div v-if="$q.platform.is.desktop" class="text-subtitle2 text-weight-bold">選擇日期、選項</div>
<div v-if="$q.platform.is.desktop" 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">
......@@ -104,6 +104,7 @@ export default {
col: [],
prices: [],
currentDate: "",
isSwitchMoon: 0,
};
},
watch: {
......@@ -152,6 +153,7 @@ export default {
let value = this.months[this.currentMonth].value
this.$emit('getQuotationData',value)
this.changeMonthHandler();
this.isSwitchMoon = 1
},
changeMonthHandler() {
try {
......@@ -178,7 +180,7 @@ export default {
for(let i=0;i<this.col.length;i++){
if (!InitialOption&&this.col[i].price && this.col[i].price.remainNum>0) {
this.currentDate = this.col[i].value;
this.$emit("change", this.col[i]);
this.$emit("change", this.col[i],this.isSwitchMoon);
InitialOption = true
}
}
......@@ -194,9 +196,10 @@ export default {
}
},
chosenDateHandler(item) {
this.isSwitchMoon = 0
if (item.price && item.price.remainNum>0) {
this.currentDate = item.value;
this.$emit("change", item);
this.$emit("change", item,this.isSwitchMoon);
}
},
changePriceHandler(dateStr,money){
......
src/pages/ScenicSpotTicket/details.vue
View file @ a0a9adfa
<template>
<div style="min-height: 80vh">
<div
style="
position: fixed;
......@@ -15,10 +14,9 @@
v-if="
(currentHeight > navs[0].top + 100 && $q.platform.is.desktop) ||
(currentHeight > priceListHeight &&
currentHeight < navs[0].top &&
$q.platform.is.mobile)
currentHeight < navs[0].top )||$q.platform.is.mobile
"
:style="{ transform: stickyHeight }"
:style="{ transform: $q.platform.is.mobile?0:stickyHeight }"
>
<div
style="max-width: 1200px; margin-left: auto; margin-right: auto"
......@@ -223,29 +221,29 @@
>
<div class="text-h6">選擇方案</div>
<div
class="rounded-borders bg-white q-pa-md q-mt-md"
class="rounded-borders bg-white q-px-xs q-mt-xs q-pt-xs"
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 style="background: rgba(0, 0, 0, 0.05);border-radius: 4px;"
class="q-mt-md q-pa-sm relative" id="Date">
<div @click="showDate = !showDate">
<div class="fz12 absolute" style="left: 10px;top:5px">選擇日期、選項</div>
<div class="fz14 self-center full-width no-outline q-pt-md " tabindex="0">
{{ currentPrice.startDate?currentPrice.startDate:'-' }}
</div>
</div>
<div class="fixed" @click="showDate = !showDate"
style="z-index: 1000;left: 0;top: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.5);" v-show="showDate">
</div>
<q-popup-proxy ref="qDateProxy">
<calendar
class="bg-white q-pa-md"
<calendar
class="bg-grey-2 fixed"
style="z-index: 1001;left: 0;top: 0;right: 0;"
:priceList="priceList"
@change="changeChosenDateHandler"
@getQuotationData="getCarPriceData"
ref="calendar"
></calendar>
</q-popup-proxy>
</q-field>
</div>
<order-preview
:dataList="dataList"
:configId="msg.configId"
......@@ -542,6 +540,7 @@ import block from "src/components/trip/block/index";
import { date } from "quasar";
import componentsMap from "src/components/car/Map.vue";
import * as dayjs from "dayjs";
import popup from "../../components/props/index";
export default {
props: [],
data() {
......@@ -640,6 +639,7 @@ export default {
priceListHeight: 0,
stickyHeight: 0,
zoomDiyContext: 1,
showDate: false,
};
},
components: {
......@@ -652,6 +652,7 @@ export default {
block,
componentsMap,
auth,
popup,
},
watch: {
days: {
......@@ -684,7 +685,11 @@ export default {
this.msg.tcid = decodeURIComponent(this.$route.params.tcid);
}
},
beforeDestroy() {
document.removeEventListener("click", this.clickHandler);
},
mounted() {
document.addEventListener("click", this.clickHandler);
window.addEventListener("scroll", this.handleScroll);
const timeStamp = Date.now()
const formattedString = date.formatDate(timeStamp, 'YYYY-MM')
......@@ -700,6 +705,13 @@ export default {
this.getData();
},
methods: {
clickHandler(e) {
try {
if (!document.querySelector("#Date").contains(e.target)) {
this.showDate = false;
}
} catch (error) {}
},
changeShowOrderPreviewHandler(){
this.showOrderPreview=!this.showOrderPreview
if(!this.showOrderPreview){
......@@ -735,6 +747,9 @@ export default {
this.stickyHeight = document.querySelector(".q-header--hidden")
? "translateY(0px)"
: "translateY(45px)";
if(this.$q.platform.is.mobile&&temp>54){
this.stickyHeight = "translateY(0px)";
}
this.currentHeight = temp;
if (
this.videoPosition > 0 &&
......@@ -806,11 +821,12 @@ export default {
this.$refs.calendar.reset();
}
},
changeChosenDateHandler(val) {
changeChosenDateHandler(val,type) {
val.price.version = new Date().getTime();
this.currentPrice = JSON.parse(JSON.stringify(val.price));
if(this.$q.platform.is.mobile){
this.$refs.qDateProxy.hide();
if(this.$q.platform.is.mobile&&!type){
// this.$refs.qDateProxy.hide();
this.showDate = false
}
},
showDialog() {
......@@ -875,7 +891,7 @@ export default {
}
});
} else {
this.$message.error(r.data.message)
}
......
src/pages/detailsCar.vue
View file @ a0a9adfa
......@@ -224,26 +224,27 @@
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 style="background: rgba(0, 0, 0, 0.05);border-radius: 4px;"
class="q-mt-md q-pa-sm relative" id="Date">
<div @click="showDate = !showDate">
<div class="fz12 absolute" style="left: 10px;top:5px">選擇日期、選項</div>
<div class="fz14 self-center full-width no-outline q-pt-md " tabindex="0">
{{ currentPrice.startDate?currentPrice.startDate:'-' }}
</div>
</div>
<div class="fixed" @click="showDate = !showDate"
style="z-index: 1000;left: 0;top: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.5);" v-show="showDate">
</div>
<q-popup-proxy ref="qDateProxy">
<calendar
class="bg-white q-pa-md"
:priceList="priceList"
@change="changeChosenDateHandler"
@getQuotationData="getCarPriceData2"
ref="calendar"
></calendar>
</q-popup-proxy>
</q-field>
<calendar v-show="showDate"
class="bg-grey-2 fixed"
style="z-index: 1001;left: 0;top: 0;right: 0;"
:priceList="priceList"
@change="changeChosenDateHandler"
@getQuotationData="getCarPriceData2"
ref="calendar"
></calendar>
</div>
<order-preview
:dataList="dataList"
:configId="msg.configId"
......@@ -578,6 +579,7 @@ import calendar from "../components/trip/calendar.vue";
import OrderPreview from "src/components/car/orderPreview.vue";
import { date } from "quasar";
import componentsMap from "../components/car/Map.vue";
import popup from "../components/props/index";
export default {
components: {
slider,
......@@ -585,6 +587,7 @@ export default {
calendar,
OrderPreview,
componentsMap,
popup,
},
props: [],
data() {
......@@ -694,6 +697,7 @@ export default {
priceListHeight: 0,
stickyHeight: 0,
zoomDiyContext: 1,
showDate: false,
};
},
watch: {
......@@ -707,6 +711,8 @@ export default {
priceList: {
handler: function (val, oldval) {
this.priceList = val;
if(this.$q.platform.is.mobile){
}
},
immediate: true,
deep: true,
......@@ -852,11 +858,12 @@ export default {
this.$refs.calendar.reset();
}
},
changeChosenDateHandler(val) {
changeChosenDateHandler(val,type) {
val.price.version = new Date().getTime();
this.currentPrice = JSON.parse(JSON.stringify(val.price));
if(this.$q.platform.is.mobile){
this.$refs.qDateProxy.hide();
if(this.$q.platform.is.mobile&&!type){
// this.$refs.qDateProxy.hide();
this.showDate = false
}
},
showDialog() {
......
src/pages/detailsNew.vue
View file @ a0a9adfa
......@@ -276,25 +276,24 @@
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">
<div style="background: rgba(0, 0, 0, 0.05);border-radius: 4px;"
class="q-mt-md q-pa-sm relative"
@click="showDate = !showDate">
<div class="fz12 absolute" style="left: 10px;top:5px">選擇日期、選項</div>
<div class="fz14 self-center full-width no-outline q-pt-md " tabindex="0">
{{ currentPrice.startDate }}
</div>
<q-popup-proxy ref="qDateProxy">
</div>
<popup mode="top" v-model="showDate">
<q-card flat class="rounded-borders">
<calendar
class="bg-white q-pa-md"
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendarMobile"
></calendar>
</q-popup-proxy>
</q-field>
</q-card>
</popup>
<order-preview
:travel="dataList"
:price="currentPrice"
......@@ -813,6 +812,7 @@ 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";
import popup from "../components/props/index";
export default {
props: [],
data() {
......@@ -947,6 +947,7 @@ export default {
detailsImageList:[],
tripImages:[],
moreDays: 0,
showDate: false,
};
},
components: {
......@@ -958,7 +959,8 @@ export default {
Trip,
block,
Flight,
NoneData
NoneData,
popup,
},
watch: {
days: {
......@@ -1329,6 +1331,11 @@ export default {
this.moreDays = 1
}
}, 1000);
if(this.$q.platform.is.mobile){
setTimeout(() => {
this.showDate = false;
}, 100);
}
try {
document
......
src/pages/detailsProduct.vue
View file @ a0a9adfa
......@@ -15,7 +15,7 @@
(currentHeight > priceListHeight &&
currentHeight < navs[0].top
)
" :style="{ transform: stickyHeight}">
" :style="{ transform: $q.platform.is.mobile?0: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"
......@@ -129,7 +129,7 @@
</div>
</div>
<popup mode="top" v-model="showDate">
<q-card flat class="rounded-borders q-py-md">
<q-card flat class="rounded-borders">
<calendar v-loading="calLoading" class="bg-white q-pa-md" :tcid="msg.tcid" :priceList="dataList.priceList" :dataList="dataList"
@change="changeChosenDateHandler" ref="calendarMobile"></calendar>
</q-card>
......
src/pages/detailsVisa.vue
View file @ a0a9adfa
......@@ -36,8 +36,10 @@
</q-breadcrumbs>
<div class="text-grey-6 f12">Product No. # {{ dataList.Id }}</div>
</div>
<div class="row">
<div class="col-6 q-mr-lg" style="padding-bottom: calc((100% - 0px) / 4); position: relative">
<div class=""
:class="[$q.platform.is.desktop?'row':'column']">
<div style="padding-bottom: calc((100% - 0px) / 4); position: relative"
:class="[$q.platform.is.desktop?'col-6 q-mr-lg':'col']">
<div
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
class="overflow-hidden rounded-borders"
......
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