Skip to content

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

优化 目的地查询

parent 64127f95
Show whitespace changes
Inline Side-by-side
Showing with 192 additions and 34 deletions
src/components/searchdida/kkday.vue
View file @ f8cd0748
...@@ -18,7 +18,50 @@ ...@@ -18,7 +18,50 @@
<popup mode="top" v-model="showAddress"> <popup mode="top" v-model="showAddress">
<q-card flat class="rounded-borders q-py-md"> <q-card flat class="rounded-borders q-py-md">
<div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div> <div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div>
<div class="relative"> <destination class="q-pa-sm"
:msg="{
CityCode:msg.CityCode,
KeyWords2:msg.Name_CN,
StartDate:msg.CheckInDate,
EndDate:msg.CheckOutDate,
searchroomGroup:msg.searchroomGroup}"
Type="1"
@change="changeMsg"
@changeCity="changCity"
@clear="resetQuery"></destination>
<div class="q-pt-sm cursor-pointer">
<div v-show="regionList.length" class="self-center no-outline text-s"
tabindex="0"
>
<div class="row justify-between q-px-md" @click="showRegion = !showRegion">
<div>区域</div>
<div class="text-xs">
{{ msg.CityName_CN }}
<q-icon :name="showRegion?'keyboard_arrow_up':'keyboard_arrow_down'" color="grey-7" size="20px"/>
</div>
</div>
<div v-show="showRegion" id="cit">
<div class="row no-wrap q-pa-sm">
<div class="col q-pa-sm" style="width: 500px;">
<div class="w-full row wrap">
<div class="CityNameBox-r-kkday col-2 text-center overflow-hidden
q-mb-xs q-mr-xs text-xxs text-no-wrap q-py-xs cursor-pointer"
v-for="(y,index) in regionList" :key="index"
:class="[msg.regionCode==y.CityCode?'active':'']"
@click="msg.regionCode = y.CityCode,
msg.CityName_CN = y.CityName_CN,
showRegion=false,
resetQuery()">
<span class="text-wrap">{{ y.CityName_CN }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="relative">
<q-input <q-input
v-model="searchAdd.name" v-model="searchAdd.name"
type="text" type="text"
...@@ -67,7 +110,7 @@ ...@@ -67,7 +110,7 @@
text-color="#666" text-color="#666"
no-nodes-label=" " no-nodes-label=" "
no-results-label=" " no-results-label=" "
/> /> -->
</q-card> </q-card>
</popup> </popup>
...@@ -160,7 +203,63 @@ ...@@ -160,7 +203,63 @@
<q-card flat class="rounded-borders q-py-md"> <q-card flat class="rounded-borders q-py-md">
<div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div> <div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div>
<div class="relative"> <div class="relative">
<q-input <destination class="q-pa-sm"
:msg="{
CityCode:msg.CityCode,
KeyWords2:msg.Name_CN,
StartDate:msg.CheckInDate,
EndDate:msg.CheckOutDate,
searchroomGroup:msg.searchroomGroup}"
Type="1"
@change="changeMsg"
@changeCity="changCity"
@clear="resetQuery"></destination>
<div class="q-pt-sm cursor-pointer">
<div v-show="regionList.length" class="self-center no-outline text-s"
tabindex="0"
>
<div class="row justify-between q-px-md">
<div>区域</div>
<div class="text-xs">
{{ msg.CityName_CN }}
<q-icon :name="showRegion?'keyboard_arrow_up':'keyboard_arrow_down'" color="grey-7" size="20px"/>
</div>
</div>
<q-popup-proxy :offset="[0, 10]" v-model="showRegion">
<div class="row no-wrap q-pa-sm">
<div class="col q-pa-sm" style="width: 500px;">
<div class="w-full row wrap">
<div class="CityNameBox-r-kkday col-2 text-center overflow-hidden
q-mb-xs q-mr-xs text-xxs text-no-wrap q-py-xs cursor-pointer"
v-for="(y,index) in regionList" :key="index"
:class="[msg.regionCode==y.CityCode?'active':'']"
@click="msg.regionCode = y.CityCode,
msg.CityName_CN = y.CityName_CN,
showRegion=false,
resetQuery()">
<span class="text-wrap">{{ y.CityName_CN }}</span>
</div>
</div>
</div>
</div>
</q-popup-proxy>
</div>
<!-- <q-input
id="search_key"
v-model="msg.regionCode"
clearable
label="区域"
filled
dense
disable
standout="bg-grey-2 text-black"
>
</q-input> -->
</div>
<!-- <q-input
v-model="searchAdd.name" v-model="searchAdd.name"
type="text" type="text"
standout standout
...@@ -169,8 +268,8 @@ ...@@ -169,8 +268,8 @@
@input="changeAddrSearchHandler" @input="changeAddrSearchHandler"
@keyup.enter="searchCity" @keyup.enter="searchCity"
@update:model-value="searchCity" @update:model-value="searchCity"
/> /> -->
<div class="KeyCityBox absolute bg-white showbox column q-ml-md w-full q-pa-sm" <!-- <div class="KeyCityBox absolute bg-white showbox column q-ml-md w-full q-pa-sm"
v-show="showCity" v-show="showCity"
id="city" id="city"
transition-show="fade" transition-show="fade"
...@@ -181,9 +280,9 @@ ...@@ -181,9 +280,9 @@
class="cursor-pointer q-py-xs" class="cursor-pointer q-py-xs"
@click="selectCity(item)" @click="selectCity(item)"
>{{ item.Name }}</div> >{{ item.Name }}</div>
</div> -->
</div> </div>
</div> <!-- <q-tree
<q-tree
ref="Cities" ref="Cities"
:nodes="CitiesList" :nodes="CitiesList"
no-connectors no-connectors
...@@ -208,7 +307,7 @@ ...@@ -208,7 +307,7 @@
text-color="#666" text-color="#666"
no-nodes-label=" " no-nodes-label=" "
no-results-label=" " no-results-label=" "
/> /> -->
</q-card> </q-card>
...@@ -454,9 +553,10 @@ ...@@ -454,9 +553,10 @@
<script> <script>
import popup from "../props/index"; import popup from "../props/index";
import { date } from "quasar"; import { date } from "quasar";
import destination from '../../pages/didaHotel/destination.vue'
export default { export default {
props: ["qMsg"], props: ["qMsg"],
components: {popup}, components: {popup,destination},
data() { data() {
return { return {
showAddress: false, showAddress: false,
...@@ -570,6 +670,7 @@ export default { ...@@ -570,6 +670,7 @@ export default {
NearbyList: [], NearbyList: [],
StarRatingList: [], StarRatingList: [],
PriceList: [], PriceList: [],
showRegion: false,
}; };
}, },
watch: { watch: {
...@@ -672,7 +773,21 @@ export default { ...@@ -672,7 +773,21 @@ export default {
} }
}, },
methods: { methods: {
changCity(y){
this.msg.CityCode2 = y.CityCode
this.getRegion()
},
changeMsg(msg){
if(msg.KeyWords2)this.msg.KeyWords2 = msg.KeyWords2
if(msg.CityCode)this.msg.CityCode = msg.CityCode
this.resetQuery()
},
clickHandler(e) { clickHandler(e) {
try {
if (!document.querySelector("#cit").contains(e.target)) {
this.showRegion = false;
}
} catch (error) {}
try { try {
if (!document.querySelector("#city").contains(e.target)) { if (!document.querySelector("#city").contains(e.target)) {
this.showCity = false; this.showCity = false;
...@@ -830,14 +945,25 @@ export default { ...@@ -830,14 +945,25 @@ export default {
arrList(data); arrList(data);
// this.regionTicked = [data[0].CityCode] // this.regionTicked = [data[0].CityCode]
this.regionListAll = data this.regionListAll = data
this.regionList = [ // this.regionList = [
{ // {
Id: 0, // Id: 0,
Name: '区域', // Name: '区域',
children: data // children: data
} // }
] // ]
this.regionJSON = JSON.parse(JSON.stringify(this.regionList)); // this.regionJSON = JSON.parse(JSON.stringify(this.regionList));
this.regionList = data
// const totalRows = Math.ceil(data.length / this.itemsPerRow)
// for (let i = 0; i < totalRows; i++) {
// const startIndex = i * this.itemsPerRow
// const endIndex = startIndex + this.itemsPerRow
// const row = tempObj.HotelFacilityList.slice(startIndex, endIndex)
// this.Facilities.push(row)
// }
} }
}, },
(err) => {} (err) => {}
...@@ -852,7 +978,7 @@ export default { ...@@ -852,7 +978,7 @@ export default {
}, },
// 区域 // 区域
handleRegionTicked(target) { handleRegionTicked(target) {
if(target.length>1) this.regionTicked = [target[1]] if(target.length>1) this.regionTicked = [target[0]]
else if(target.length==1) this.regionTicked = target else if(target.length==1) this.regionTicked = target
else this.regionTicked = []; else this.regionTicked = [];
this.msg.regionCode = this.regionTicked[0] this.msg.regionCode = this.regionTicked[0]
...@@ -863,7 +989,7 @@ export default { ...@@ -863,7 +989,7 @@ export default {
// 目的地城市 // 目的地城市
handleCitiesTicked(target) { handleCitiesTicked(target) {
let oldCityCode = this.msg.CityCode2 let oldCityCode = this.msg.CityCode2
if(target.length>1) this.CitiesTicked = [target[1]] if(target.length>1) this.CitiesTicked = [target[0]]
else if(target.length==1) this.CitiesTicked = target else if(target.length==1) this.CitiesTicked = target
else { else {
this.CitiesTicked = []; this.CitiesTicked = [];
...@@ -1256,4 +1382,17 @@ export default { ...@@ -1256,4 +1382,17 @@ export default {
body.desktop .CountryKkday .g-hoverable:hover >.g-focus-helper{ body.desktop .CountryKkday .g-hoverable:hover >.g-focus-helper{
background: rgba(0,0,0,0); background: rgba(0,0,0,0);
} }
.CityNameBox-r-kkday{
border-radius: 3px;
text-overflow: ellipsis;
}
.CityNameBox-r-kkday:hover{
background: rgba(5,32,50,.2);
color: var(--q-color-primary);
}
.CityNameBox-r-kkday.active{
background: rgba(5,32,50,1);
color: #fff;
}
</style> </style>
src/pages/detailHotalDida.vue
View file @ f8cd0748
...@@ -191,7 +191,7 @@ ...@@ -191,7 +191,7 @@
</div> </div>
<!-- 目的地 --> <!-- 目的地 -->
<destination :msg="{ <destination class="q-ml-sm" :msg="{
CityCode:CityCode?CityCode:dataList.CityCode, CityCode:CityCode?CityCode:dataList.CityCode,
KeyWords2:dataList.Name_CN, KeyWords2:dataList.Name_CN,
StartDate:msg.CheckInDate, StartDate:msg.CheckInDate,
......
src/pages/didaHotel/destination.vue
View file @ f8cd0748
<template> <template>
<div class="didaDestination q-px-md relative q-ml-sm cursor-pointer" style="min-width:190px;border-radius: 3px;"> <div class="didaDestination q-px-md relative cursor-pointer" style="min-width:190px;border-radius: 3px;">
<!-- <div class="text-xxs absolute top-0 left-0 q-px-md" style="color: rgba(5,32,50,.8);"> <!-- <div class="text-xxs absolute top-0 left-0 q-px-md" style="color: rgba(5,32,50,.8);">
目的地 目的地
</div> --> </div> -->
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
<div class="self-center no-outline text-xxs absolute bg-white overflow-hidden" tabindex="0" <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: 500px;top: 50px;left: 30px;border-radius: 3px;
box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;" box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;z-index: 1;"
v-show="showKeyWordsList"> v-show="showKeyWordsList">
<div id="KeyWords"> <div id="KeyWords">
<template v-for="(x,index) in dataList"> <template v-for="(x,index) in dataList">
...@@ -40,12 +40,12 @@ ...@@ -40,12 +40,12 @@
</div> </div>
<div class="col" style="min-width: 400px;max-height: 300px;overflow: hidden;"> <div class="col" style="min-width: 400px;max-height: 300px;overflow: hidden;">
<div class="DestinationList w-full h-full overflow-auto"> <div class="DestinationList w-full h-full overflow-auto">
<div class="GNameBox-center row justify-between q-px-sm q-py-sm cursor-pointer" <div class="GNameBox-center row no-wrap justify-between q-px-sm q-py-sm cursor-pointer"
v-for="(y,indexs) in x.list" :key="indexs" v-for="(y,indexs) in x.list" :key="indexs"
@click="changeType(y)"> @click="changeType(y)">
<div v-html="y.Name.replaceAll(lastKeyword,`<span class='text-yellow-9'>${lastKeyword}</span>`)+` ${x.address?x.address:''}`"> <div class="GNameBox-c-l" v-html="y.Name.replaceAll(lastKeyword,`<span class='text-yellow-9'>${lastKeyword}</span>`)+` ${x.address?x.address:''}`">
</div> </div>
<div> <div class="text-no-wrap">
<template v-if="y.Type==1"> <template v-if="y.Type==1">
<template v-if="y.Count">附近约</template> <template v-if="y.Count">附近约</template>
<span class="text-orange-8" v-if="y.Count">{{ y.Count }}</span> <span class="text-orange-8" v-if="y.Count">{{ y.Count }}</span>
...@@ -65,19 +65,20 @@ ...@@ -65,19 +65,20 @@
</div> </div>
<div class="self-center no-outline text-xxs absolute bg-white overflow-hidden" <div class="self-center no-outline text-xxs absolute bg-white overflow-hidden"
tabindex="0" tabindex="0"
style="width: 500px;top: 50px;left: 30px;border-radius: 3px; style="border-radius: 3px;
box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;" box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;z-index: 1;"
:style="{width:Type==1?'100%':'500px',top:Type==1?'70px':'50px',left:Type==1?'0':'30px'}"
v-show="showSplitPannel"> v-show="showSplitPannel">
<div class="row no-wrap" id="cit"> <div class="row no-wrap" id="cit">
<div class="bg-grey-2" style="border-right: 1px solid rgb(238, 238, 238);"> <div class="bg-grey-2" style="border-right: 1px solid rgb(238, 238, 238);">
<div v-for="(x,index) in CitiesList" :key="index" <div v-for="(x,index) in CitiesList" :key="index"
@click="changeGName(x)" @click="changeGName(x)"
class="GNameBox-l q-py-xs q-px-md text-xs cursor-pointer" class="GNameBox-l q-py-xs q-px-md text-xs cursor-pointer text-no-wrap"
:class="[GNameActive==x.GName?'active':'']"> :class="[GNameActive==x.GName?'active':'']">
{{ x.GName }} {{ x.GName }}
</div> </div>
</div> </div>
<div class="col q-pa-sm" style="min-width: 400px;"> <div class="col q-pa-sm" :style="{minWidth: Type==1?'':'400px'}">
<q-scroll-area class="w-full" style="height: 305px;" <q-scroll-area class="w-full" style="height: 305px;"
:thumb-style="{ :thumb-style="{
right: '2px', right: '2px',
...@@ -121,6 +122,10 @@ export default { ...@@ -121,6 +122,10 @@ export default {
msg: { msg: {
type: Object, type: Object,
default: () => {} default: () => {}
},
Type: {
type: [Number,String,null],
default: 0
} }
}, },
data() { data() {
...@@ -221,6 +226,10 @@ export default { ...@@ -221,6 +226,10 @@ export default {
this.showKeyWordsList = false this.showKeyWordsList = false
this.showSplitPannel = false this.showSplitPannel = false
} }
if(this.Type==1) {
this.showSplitPannel = false
this.showKeyWordsList = false
}
}, },
clickHandler(e) { clickHandler(e) {
try { try {
...@@ -290,6 +299,7 @@ export default { ...@@ -290,6 +299,7 @@ export default {
clearHandler(){ clearHandler(){
this.showKeyWordsList = false this.showKeyWordsList = false
this.showSplitPannel = true this.showSplitPannel = true
this.$emit('clear')
return return
this.showSplitPannel = true this.showSplitPannel = true
this.showKeyWordsList = false this.showKeyWordsList = false
...@@ -337,10 +347,15 @@ export default { ...@@ -337,10 +347,15 @@ export default {
this.HotalMsg.regionCode = y.CityCode this.HotalMsg.regionCode = y.CityCode
}, },
changeCity(y){ changeCity(y){
if(this.Type==1) {
this.$emit('changeCity', y)
this.showSplitPannel = false
}else{
this.HotalMsg.CityCode = y.CityCode this.HotalMsg.CityCode = y.CityCode
this.HotalMsg.KeyWords2 = y.CityName this.HotalMsg.KeyWords2 = y.CityName
this.HotalMsg.CityName = y.CityName this.HotalMsg.CityName = y.CityName
this.searchChangeHandler() this.searchChangeHandler()
}
// this.$emit('change', y) // this.$emit('change', y)
// this.CommonJump('/searchdida', { // this.CommonJump('/searchdida', {
// ...this.HotalMsg // ...this.HotalMsg
...@@ -420,9 +435,12 @@ export default { ...@@ -420,9 +435,12 @@ export default {
.CityNameBox-r:hover{ .CityNameBox-r:hover{
color: var(--q-color-primary); color: var(--q-color-primary);
} }
.CityNameBox-R.active{ .CityNameBox-r.active{
color: var(--q-color-primary); color: var(--q-color-primary);
} }
.GNameBox-center{
line-height: 15px;
}
.GNameBox-center:hover{ .GNameBox-center:hover{
color: red; color: red;
background: rgba(255, 0, 0,.1) ; background: rgba(255, 0, 0,.1) ;
...@@ -457,4 +475,5 @@ export default { ...@@ -457,4 +475,5 @@ export default {
.DestinationList::-webkit-scrollbar-corner { .DestinationList::-webkit-scrollbar-corner {
background: #f1f1f1; background: #f1f1f1;
} }
</style> </style>
\ No newline at end of file
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