Skip to content

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

优化 目的地查询

parent 64127f95
Hide 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 @@
<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="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
v-model="searchAdd.name"
type="text"
......@@ -67,7 +110,7 @@
text-color="#666"
no-nodes-label=" "
no-results-label=" "
/>
/> -->
</q-card>
</popup>
......@@ -160,7 +203,63 @@
<q-card flat class="rounded-borders q-py-md">
<div class="text-subtitle1 text-weight-bold q-mx-md">篩選目的地</div>
<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"
type="text"
standout
......@@ -169,8 +268,8 @@
@input="changeAddrSearchHandler"
@keyup.enter="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"
id="city"
transition-show="fade"
......@@ -181,9 +280,9 @@
class="cursor-pointer q-py-xs"
@click="selectCity(item)"
>{{ item.Name }}</div>
</div>
</div> -->
</div>
<q-tree
<!-- <q-tree
ref="Cities"
:nodes="CitiesList"
no-connectors
......@@ -208,7 +307,7 @@
text-color="#666"
no-nodes-label=" "
no-results-label=" "
/>
/> -->
</q-card>
......@@ -454,9 +553,10 @@
<script>
import popup from "../props/index";
import { date } from "quasar";
import destination from '../../pages/didaHotel/destination.vue'
export default {
props: ["qMsg"],
components: {popup},
components: {popup,destination},
data() {
return {
showAddress: false,
......@@ -570,6 +670,7 @@ export default {
NearbyList: [],
StarRatingList: [],
PriceList: [],
showRegion: false,
};
},
watch: {
......@@ -672,7 +773,21 @@ export default {
}
},
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) {
try {
if (!document.querySelector("#cit").contains(e.target)) {
this.showRegion = false;
}
} catch (error) {}
try {
if (!document.querySelector("#city").contains(e.target)) {
this.showCity = false;
......@@ -830,14 +945,25 @@ export default {
arrList(data);
// this.regionTicked = [data[0].CityCode]
this.regionListAll = data
this.regionList = [
{
Id: 0,
Name: '区域',
children: data
}
]
this.regionJSON = JSON.parse(JSON.stringify(this.regionList));
// this.regionList = [
// {
// Id: 0,
// Name: '区域',
// children: data
// }
// ]
// 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) => {}
......@@ -852,7 +978,7 @@ export default {
},
// 区域
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 this.regionTicked = [];
this.msg.regionCode = this.regionTicked[0]
......@@ -863,7 +989,7 @@ export default {
// 目的地城市
handleCitiesTicked(target) {
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 {
this.CitiesTicked = [];
......@@ -1256,4 +1382,17 @@ export default {
body.desktop .CountryKkday .g-hoverable:hover >.g-focus-helper{
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>
src/pages/detailHotalDida.vue
View file @ f8cd0748
......@@ -191,7 +191,7 @@
</div>
<!-- 目的地 -->
<destination :msg="{
<destination class="q-ml-sm" :msg="{
CityCode:CityCode?CityCode:dataList.CityCode,
KeyWords2:dataList.Name_CN,
StartDate:msg.CheckInDate,
......
src/pages/didaHotel/destination.vue
View file @ f8cd0748
<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> -->
......@@ -26,7 +26,7 @@
</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;
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">
<div id="KeyWords">
<template v-for="(x,index) in dataList">
......@@ -40,12 +40,12 @@
</div>
<div class="col" style="min-width: 400px;max-height: 300px;overflow: hidden;">
<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"
@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 class="text-no-wrap">
<template v-if="y.Type==1">
<template v-if="y.Count">附近约</template>
<span class="text-orange-8" v-if="y.Count">{{ y.Count }}</span>
......@@ -65,19 +65,20 @@
</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;
box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;"
style="border-radius: 3px;
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">
<div class="row no-wrap" id="cit">
<div class="bg-grey-2" style="border-right: 1px solid rgb(238, 238, 238);">
<div v-for="(x,index) in CitiesList" :key="index"
@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':'']">
{{ x.GName }}
</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;"
:thumb-style="{
right: '2px',
......@@ -121,6 +122,10 @@ export default {
msg: {
type: Object,
default: () => {}
},
Type: {
type: [Number,String,null],
default: 0
}
},
data() {
......@@ -221,6 +226,10 @@ export default {
this.showKeyWordsList = false
this.showSplitPannel = false
}
if(this.Type==1) {
this.showSplitPannel = false
this.showKeyWordsList = false
}
},
clickHandler(e) {
try {
......@@ -290,6 +299,7 @@ export default {
clearHandler(){
this.showKeyWordsList = false
this.showSplitPannel = true
this.$emit('clear')
return
this.showSplitPannel = true
this.showKeyWordsList = false
......@@ -337,10 +347,15 @@ export default {
this.HotalMsg.regionCode = y.CityCode
},
changeCity(y){
this.HotalMsg.CityCode = y.CityCode
this.HotalMsg.KeyWords2 = y.CityName
this.HotalMsg.CityName = y.CityName
this.searchChangeHandler()
if(this.Type==1) {
this.$emit('changeCity', y)
this.showSplitPannel = false
}else{
this.HotalMsg.CityCode = y.CityCode
this.HotalMsg.KeyWords2 = y.CityName
this.HotalMsg.CityName = y.CityName
this.searchChangeHandler()
}
// this.$emit('change', y)
// this.CommonJump('/searchdida', {
// ...this.HotalMsg
......@@ -420,9 +435,12 @@ export default {
.CityNameBox-r:hover{
color: var(--q-color-primary);
}
.CityNameBox-R.active{
.CityNameBox-r.active{
color: var(--q-color-primary);
}
.GNameBox-center{
line-height: 15px;
}
.GNameBox-center:hover{
color: red;
background: rgba(255, 0, 0,.1) ;
......@@ -457,4 +475,5 @@ export default {
.DestinationList::-webkit-scrollbar-corner {
background: #f1f1f1;
}
</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