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