Skip to content

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

移动端

parent 80eb17a5
Hide whitespace changes
Inline Side-by-side
Showing with 355 additions and 160 deletions
src/pages/detailHotalDida.vue
View file @ 14353700
......@@ -35,173 +35,361 @@
/>
</div>
<q-separator v-if="isShowNav" color="grey-2" class="q-my-sm" />
<div class="row no-wrap items-center justify-between"
:class="{'q-pt-md q-mb-xs':!isShowNav,' q-pb-xs':isShowNav,}">
<div
:class="{'row no-wrap': $q.platform.is.desktop,'col row justify-between': $q.platform.is.mobile,}">
<div class="bg-grey-2 q-px-md relative q-pt-md cursor-pointer" style="min-width:190px;border-radius: 3px;">
<div class="text-xxs absolute top-0 left-0 q-px-md text-xxs" style="color: rgba(0,0,0,.6);">入住 / 退房日期</div>
<div class="self-center full-width no-outline row no-wrap items-center" tabindex="0">
<span>{{dateRangeFormat}} </span>
<q-chip size="9px" clickable
text-color="white"
color="dark" square>{{liveNvm}} 晚</q-chip>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date
v-model="dateRange"
:options="optionsFn"
range mask="YYYY/MM/DD"
@range-end="dateRangeHandler"></q-date>
</q-popup-proxy>
</div>
</div>
<div class="bg-grey-2 q-px-md relative q-pt-md q-ml-lg cursor-pointer" style="min-width:190px;border-radius: 3px;">
<div class="text-xxs absolute top-0 left-0 q-px-md" style="color: rgba(0,0,0,.6);">人数及客房</div>
<div class="self-center full-width no-outline text-xxs" tabindex="0">
{{numberOfAdults}}成人
<template v-if="numberOfChildren>0"> {{numberOfChildren}}儿童</template>
{{roomGroup}}房
<q-popup-proxy :offset="[0, 10]">
<div class="q-pa-lg q-py-lg bg-white">
<div class="items-center"
:class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<span class="text-grey-7 product-price fz14 q-mr-lg">客房</span>
<div>
<q-input
:style="{'width': $q.platform.is.desktop?'150px':'auto'}"
v-model="roomGroup"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="remove"
@click="addPeople('room', -1)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="add"
@click="addPeople('room', 1)"
/>
</template>
</q-input>
<div v-if="$q.platform.is.mobile" class="col">
<div class="row q-pb-sm w-full">
<div class="col row items-center justify-center bg-white">
<div @click="showAddress = true" class="nav-item">目的地<i class="iconfont iconarrowdown text-grey-6" style="margin-top: 3px; margin-left:4px"></i></div>
<div @click="showTime = true" class="nav-item q-px-lg">入住日期<i class="iconfont iconarrowdown text-grey-6" style="margin-top: 3px; margin-left:4px"></i></div>
<div @click="showRoom = true" class="nav-item">房<i class="iconfont iconarrowdown text-grey-6" style="margin-top: 3px; margin-left:4px"></i></div>
</div>
</div>
<popup mode="top" v-model="showAddress">
<q-card flat class="rounded-borders q-py-md">
<div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div>
<!-- 目的地 -->
<div class="q-ml-xs q-mt-md text-grey-6 text-subtitle2 text-regular col">
<destination class="w-full"
style="border-radius: 3px;"
:msg="{
CityCode:CityCode?CityCode:dataList.CityCode,
CityName:CityName?CityName:dataList.CityName,
KeyWords:msg.KeyWords,
KeyWords2:msg.KeyWords2,
StartDate:msg.CheckInDate,
EndDate:msg.CheckOutDate,
searchroomGroup:msg.searchroomGroup}"
@change="changeMsg"></destination>
</div>
</q-card>
</popup>
<popup mode="top" v-model="showTime">
<q-card flat class="rounded-borders q-pa-md q-mt-lg">
<div class="text-subtitle1 text-weight-bold">篩選入住日期</div>
<div class="q-mt-sm bg-grey-2 q-px-md relative q-pt-md cursor-pointer" style="min-width:190px;border-radius: 3px;">
<div class="text-xxs absolute top-0 left-0 q-px-md text-xxs" style="color: rgba(0,0,0,.6);">入住 / 退房日期</div>
<div class="self-center full-width no-outline row no-wrap items-center" tabindex="0">
<span>{{dateRangeFormat}} </span>
<q-chip size="9px" clickable
text-color="white"
color="dark" square>{{liveNvm}} 晚</q-chip>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date
v-model="dateRange"
:options="optionsFn"
range mask="YYYY/MM/DD"
@range-end="dateRangeHandler"></q-date>
</q-popup-proxy>
</div>
</div>
</q-card>
</popup>
<popup mode="top" v-model="showRoom">
<q-card flat class="rounded-borders q-py-md q-pr-md">
<div class="text-subtitle1 text-weight-bold q-mx-md">人数及客房</div>
<div class="q-ml-md q-mt-sm q-mt-mdtext-grey-6 text-subtitle2 text-regular" tabindex="0">
<div class="bg-grey-2 q-px-md relative q-pt-md cursor-pointer col" style="border-radius: 3px;">
<div class="text-xxs absolute top-0 left-0 q-px-md" style="color: rgba(0,0,0,.6);">人数及客房</div>
<div class="self-center full-width no-outline text-xxs" tabindex="0">
{{numberOfAdults}}成人
<template v-if="numberOfChildren>0"> {{numberOfChildren}}儿童</template>
{{roomGroup}}房
</div>
</div>
<q-popup-proxy :offset="[0, 10]">
<div class="q-pa-lg q-py-lg bg-white">
<div class="items-center"
:class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<span class="text-grey-7 product-price fz14 q-mr-lg">客房</span>
<div>
<q-input
:style="{'width': $q.platform.is.desktop?'150px':'auto'}"
v-model="roomGroup"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="remove"
@click="addPeople('room', -1)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="add"
@click="addPeople('room', 1)"
/>
</template>
</q-input>
</div>
</div>
<q-separator color="grey-2" class="q-my-md" />
<div class="column" v-for="(x,index) in msg.searchroomGroup" :key="index">
<div class="row no-wrap">
<div class="items-center col">
<span class="text-grey-7 product-price fz14 q-mr-lg">成人</span>
<q-input
:style="{'width': $q.platform.is.desktop?'150px':'auto'}"
v-model="x.numberOfAdults"
class="col"
mask="#"
reverse-fill-mask
dense
standout
@change="CountPeople"
>
<!--<template v-slot:prepend>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="remove"
@click="addPeople('numberOfAdults', -1,x)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="add"
@click="addPeople('numberOfAdults', 1,x)"
/>
</template>-->
</q-input>
</div>
<div class="items-center col"
:class="{'row q-ml-lg':$q.platform.is.desktop,'q-ml-sm':$q.platform.is.mobile}">
<span class="text-grey-7 product-price fz14 q-mr-lg">儿童</span>
<q-input
:style="{'width': $q.platform.is.desktop?'150px':'auto'}"
v-model="x.numberOfChildren"
class="col"
mask="#"
reverse-fill-mask
dense
standout
@change="CountPeople"
>
<!--<template v-slot:prepend>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="remove"
@click="addPeople('numberOfChildren', -1,x)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="add"
@click="addPeople('numberOfChildren', 1,x)"
/>
</template>-->
</q-input>
</div>
<div class="items-center col"
:class="{'row q-ml-lg':$q.platform.is.desktop,'q-ml-sm':$q.platform.is.mobile}">
<span class="text-grey-7 product-price fz14 q-mr-lg">儿童年龄</span>
<q-select v-model="x.ChildAgeDetails" :options="childrenAgeList"
option-label="Id" option-value="Id" label="年龄"
:style="{'width': $q.platform.is.desktop?'150px':'auto'}"
class="col" emit-value reverse-fill-mask dense standout/>
</div>
</div>
<q-separator v-if="index!=(msg.searchroomGroup.length-1)" color="grey-2" class="q-my-md" />
</div>
</div>
</q-popup-proxy>
</div>
<q-separator color="grey-2" class="q-my-md" />
<div class="column" v-for="(x,index) in msg.searchroomGroup" :key="index">
<div class="row no-wrap">
<div class="row items-center">
<span class="text-grey-7 product-price fz14 q-mr-lg">成人</span>
</q-card>
</popup>
</div>
<div v-if="$q.platform.is.desktop" class="row no-wrap">
<div class="bg-grey-2 q-px-md relative q-pt-md cursor-pointer" style="min-width:240px;border-radius: 3px;">
<div class="text-xxs absolute top-0 left-0 q-px-md text-xxs" style="color: rgba(0,0,0,.6);">入住 / 退房日期</div>
<div class="self-center full-width no-outline row no-wrap items-center" tabindex="0">
<span>{{dateRangeFormat}} </span>
<q-chip size="9px" clickable
text-color="white"
color="dark" square>{{liveNvm}} 晚</q-chip>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date
v-model="dateRange"
:options="optionsFn"
range mask="YYYY/MM/DD"
@range-end="dateRangeHandler"></q-date>
</q-popup-proxy>
</div>
</div>
<div class="bg-grey-2 q-px-md relative q-pt-md q-ml-lg cursor-pointer" style="min-width:190px;border-radius: 3px;">
<div class="text-xxs absolute top-0 left-0 q-px-md" style="color: rgba(0,0,0,.6);">人数及客房</div>
<div class="self-center full-width no-outline text-xxs" tabindex="0">
{{numberOfAdults}}成人
<template v-if="numberOfChildren>0"> {{numberOfChildren}}儿童</template>
{{roomGroup}}房
<q-popup-proxy :offset="[0, 10]">
<div class="q-pa-lg q-py-lg bg-white">
<div class="items-center"
:class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<span class="text-grey-7 product-price fz14 q-mr-lg">客房</span>
<div>
<q-input
:style="{'width': $q.platform.is.desktop?'150px':'auto'}"
v-model="x.numberOfAdults"
class="col"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="remove"
@click="addPeople('numberOfAdults', -1,x)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="add"
@click="addPeople('numberOfAdults', 1,x)"
/>
</template>
</q-input>
</div>
<div class="items-center"
:class="{'row q-ml-lg':$q.platform.is.desktop,'q-ml-sm':$q.platform.is.mobile}">
<span class="text-grey-7 product-price fz14 q-mr-lg">儿童</span>
<q-input
v-model="roomGroup"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="remove"
@click="addPeople('room', -1)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="add"
@click="addPeople('room', 1)"
/>
</template>
</q-input>
</div>
</div>
<q-separator color="grey-2" class="q-my-md" />
<div class="column" v-for="(x,index) in msg.searchroomGroup" :key="index">
<div class="row no-wrap">
<div class="row items-center">
<span class="text-grey-7 product-price fz14 q-mr-lg">成人</span>
<q-input
:style="{'width': $q.platform.is.desktop?'150px':'auto'}"
v-model="x.numberOfChildren"
class="col"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="remove"
@click="addPeople('numberOfChildren', -1,x)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="add"
@click="addPeople('numberOfChildren', 1,x)"
/>
</template>
</q-input>
</div>
<div class="items-center"
:class="{'row q-ml-lg':$q.platform.is.desktop,'q-ml-sm':$q.platform.is.mobile}">
<span class="text-grey-7 product-price fz14 q-mr-lg">儿童年龄</span>
<q-select v-model="x.ChildAgeDetails" :options="childrenAgeList"
option-label="Id" option-value="Id" label="年龄"
:style="{'width': $q.platform.is.desktop?'150px':'auto'}"
class="col" emit-value reverse-fill-mask dense standout/>
v-model="x.numberOfAdults"
class="col"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="remove"
@click="addPeople('numberOfAdults', -1,x)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="add"
@click="addPeople('numberOfAdults', 1,x)"
/>
</template>
</q-input>
</div>
<div class="items-center"
:class="{'row q-ml-lg':$q.platform.is.desktop,'q-ml-sm':$q.platform.is.mobile}">
<span class="text-grey-7 product-price fz14 q-mr-lg">儿童</span>
<q-input
:style="{'width': $q.platform.is.desktop?'150px':'auto'}"
v-model="x.numberOfChildren"
class="col"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="remove"
@click="addPeople('numberOfChildren', -1,x)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
:size="$q.platform.is.desktop?'sm':'xs'"
class="q-px-none"
flat
icon="add"
@click="addPeople('numberOfChildren', 1,x)"
/>
</template>
</q-input>
</div>
<div class="items-center"
:class="{'row q-ml-lg':$q.platform.is.desktop,'q-ml-sm':$q.platform.is.mobile}">
<span class="text-grey-7 product-price fz14 q-mr-lg">儿童年龄</span>
<q-select v-model="x.ChildAgeDetails" :options="childrenAgeList"
option-label="Id" option-value="Id" label="年龄"
:style="{'width': $q.platform.is.desktop?'150px':'auto'}"
class="col" emit-value reverse-fill-mask dense standout/>
</div>
</div>
</div>
<q-separator v-if="index!=(msg.searchroomGroup.length-1)" color="grey-2" class="q-my-md" />
<q-separator v-if="index!=(msg.searchroomGroup.length-1)" color="grey-2" class="q-my-md" />
</div>
</div>
</div>
</q-popup-proxy>
</q-popup-proxy>
</div>
</div>
<!-- 目的地 -->
<destination class="q-ml-sm"
style="min-width:190px;border-radius: 3px;"
:msg="{
CityCode:CityCode?CityCode:dataList.CityCode,
CityName:CityName?CityName:dataList.CityName,
KeyWords:msg.KeyWords,
KeyWords2:msg.KeyWords2,
StartDate:msg.CheckInDate,
EndDate:msg.CheckOutDate,
searchroomGroup:msg.searchroomGroup}"
@change="changeMsg"></destination>
</div>
</div>
<!-- 目的地 -->
<destination class="q-ml-sm" :msg="{
CityCode:CityCode?CityCode:dataList.CityCode,
CityName:CityName?CityName:dataList.CityName,
KeyWords:msg.KeyWords,
KeyWords2:msg.KeyWords2,
StartDate:msg.CheckInDate,
EndDate:msg.CheckOutDate,
searchroomGroup:msg.searchroomGroup}"
@change="changeMsg"></destination>
</div>
<q-btn v-if="$q.platform.is.mobile" unelevated round class="bg-grey-3 hover" icon="search" title="更多筛选">
<q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating label="1"/>
<q-tooltip>更多</q-tooltip>
......@@ -945,6 +1133,7 @@ import ImagePreview from 'src/components/common/ImagePreview.vue'
import RoomCard from '../components/hotaldida/RoomCard.vue'
import OrderPreview from "src/components/hotaldida/orderPreview.vue";
import destination from './didaHotel/destination.vue'
import popup from "../components/props/index";
export default {
props: [],
components: {
......@@ -960,6 +1149,7 @@ export default {
RoomCard,
OrderPreview,
destination,
popup,
},
data() {
return {
......@@ -1124,6 +1314,9 @@ export default {
CityCode: '',
CityName: '',
order: {},//订单
showAddress: false,
showTime: false,
showRoom: false,
};
},
watch: {
......
src/pages/didaHotel/destination.vue
View file @ 14353700
<template>
<div class="didaDestination q-px-md relative cursor-pointer" style="min-width:190px;border-radius: 3px;">
<div class="didaDestination q-px-md relative cursor-pointer"
style="min-width:100%;border-radius: 3px;"
:style="{width:Type>0?'100%':Type==0?'240px':'100%'}">
<!-- <div class="text-xxs absolute top-0 left-0 q-px-md" style="color: rgba(5,32,50,.8);">
目的地
</div> -->
......@@ -23,7 +25,7 @@
</span>
</q-btn>
<div class="self-center no-outline text-xxs absolute bg-white overflow-hidden"
style="width: 500px;top: 50px;left: 30px;border-radius: 3px;
style="width:auto;min-width: 500px;top: 50px;left: 30px;right:0; border-radius: 3px;
box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;z-index: 2;"
tabindex="0" v-show="showSplitPannel">
<div>
......@@ -103,7 +105,7 @@
<div>
</div>
<div class="self-center no-outline text-xxs absolute bg-white overflow-hidden" tabindex="0"
style="width: 500px;top: 50px;left: 30px;border-radius: 3px;
style="width: auto;min-width: 500px;top: 50px;left: 30px;right:0; border-radius: 3px;
box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;z-index: 2;"
v-show="showKeyWordsList">
<div id="KeyWords">
......
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