Skip to content

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

no message

parent fb5272cb
Show whitespace changes
Inline Side-by-side
Showing with 878 additions and 252 deletions
src/components/hotaldida/RoomCard.vue
View file @ 64127f95
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
{{ item.RoomName==item.RoomName_CN?"":item.RoomName}} {{ item.RoomName==item.RoomName_CN?"":item.RoomName}}
</div> </div>
</div> </div>
<q-scroll-area style="" <!-- <q-scroll-area style=""
:thumb-style="{ :thumb-style="{
right: '2px', right: '2px',
borderRadius: '5px', borderRadius: '5px',
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
:content-active-style="{ :content-active-style="{
backgroundColor: 'rgba(0, 0, 0, 0)', backgroundColor: 'rgba(0, 0, 0, 0)',
color: 'black' color: 'black'
}"></q-scroll-area> }"></q-scroll-area> -->
<div <div
v-if="item.RatePlanList" class="col" :class="{'column':$q.platform.is.desktop,'column':$q.platform.is.mobile}"> v-if="item.RatePlanList" class="col" :class="{'column':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<template v-for="(subItem,indexs) in item.RatePlanList"> <template v-for="(subItem,indexs) in item.RatePlanList">
......
src/components/search_sf/search-top.vue
View file @ 64127f95
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
:label="$t('search')" :label="$t('search')"
@focus="searchFocusHandler" @focus="searchFocusHandler"
@blur="searchBlurHandler" @blur="searchBlurHandler"
@keyup="searchChangeHandler" @keyup.enter="searchChangeHandler"
/> />
</div> </div>
<div class="col-2"> <div class="col-2">
...@@ -94,11 +94,32 @@ ...@@ -94,11 +94,32 @@
</q-btn> </q-btn>
</div> </div>
</div> </div>
<div class="column">
<div class="text-weight-bold q-pa-sm">熱門目的地</div> <div class="text-weight-bold q-pa-sm">熱門目的地</div>
<q-separator /> <q-separator />
<div class="flex flex-wrap">
<q-scroll-area class="w-full" style="height: 305px;"
:thumb-style="{
right: '2px',
borderRadius: '5px',
backgroundColor: 'rgba(0, 0, 0, .1)',
width: '5px',
opacity: '0.75'
}"
:content-style="{
backgroundColor: 'rgba(0, 0, 0, 0)',
color: '#555'
}"
:content-active-style="{
backgroundColor: 'rgba(0, 0, 0, 0)',
color: 'black'
}">
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="hot-tag" @click="handleHotTagClick(item)" :class="{'hot-tag-select': setectHotTag === item.Id}" :key="item.Id" v-for="item in hotList">{{item.Name}}</div> <div class="hot-tag" @click="handleHotTagClick(item)" :class="{'hot-tag-select': setectHotTag === item.Id}" :key="item.Id" v-for="item in hotList">{{item.Name}}</div>
</div> </div>
</q-scroll-area>
</div>
</div>
</div> </div>
</div> </div>
<div class=" bg-white q-px-md" v-if="$q.screen.xs" @click="showPopupHandler"> <div class=" bg-white q-px-md" v-if="$q.screen.xs" @click="showPopupHandler">
...@@ -366,6 +387,32 @@ export default { ...@@ -366,6 +387,32 @@ export default {
beforeDestroy() { beforeDestroy() {
document.removeEventListener("click", this.clickHandler); document.removeEventListener("click", this.clickHandler);
}, },
watch: {
'$route': {
handler(to, from) {
if(to.path.indexOf('searchDida')!=-1||to.path.indexOf('detailHotalDida')!=-1){
this.getHotalHotList()
}else{
var jObj = JSON.parse(window.localStorage.getItem('baseifo'));
const hotList = this.getHotList(jObj.AreaList)
this.hotList = hotList
}
},
deep: true,
immediate: true
}
},
methods: {
getHistory() {
let historys = JSON.parse(localStorage.getItem("searchHistory")) || [];
this.historys = historys;
},
clearHistory() {
localStorage.removeItem("searchHistory");
this.historys = [];
}
},
computed: {}, computed: {},
methods: { methods: {
handleAreaTicked(target) { handleAreaTicked(target) {
...@@ -411,6 +458,35 @@ export default { ...@@ -411,6 +458,35 @@ export default {
}); });
return hotArr; return hotArr;
}, },
getHotalHotList() {
let hotArr = [];
this.apipost(
"dmc_post_B2BAndB2CGetHotCity", {},
res => {
if (res.data.resultCode == 1) {
let arr = res.data.data
arr.forEach((item,index) => {
if(!index){
item.Name = item.GName
if (item.CityList && item.CityList.length) {
item.CityList.forEach((x) => {
x.Name = x.CityName
x.Id = x.CityCode
})
hotArr = hotArr.concat(item.CityList);
} else {
if (item.IsHot === 1) {
item.Name = item.CityName
item.Id = item.CityCode
hotArr.push(item);
}
}
}
});
this.hotList = hotArr;
}
})
},
handleHotTagClick(item) { handleHotTagClick(item) {
this.setectHotTag = item.Id this.setectHotTag = item.Id
let qsearchDate = this.searchDate let qsearchDate = this.searchDate
...@@ -422,19 +498,32 @@ export default { ...@@ -422,19 +498,32 @@ export default {
// this.historys=Array.from(new Set([this.searchKey].concat(this.historys))) // this.historys=Array.from(new Set([this.searchKey].concat(this.historys)))
// localStorage['recent_search'] = JSON.stringify(this.historys) // localStorage['recent_search'] = JSON.stringify(this.historys)
var currentUrl = window.location.href; var currentUrl = window.location.href;
let urlName=""; let urlName="/search";
let currentUrlArr = currentUrl.split('/') // let currentUrlArr = currentUrl.split('/')
let urlType = currentUrlArr[4].split('?')[0] // let urlType = currentUrlArr[4].split('?')[0]
if(urlType){ // if(urlType){
urlName = `/${urlType}` // urlName = `/${urlType}`
if(urlType=='SearchDida'||urlType=='searchDida'){ // if(urlType=='searchProduct'){
// urlName = `/search`
// }else if(urlType=='detailsVisa'){
// urlName = `/searchVisa`
// }else if(urlType=='SearchDida'||urlType=='searchDida'||urlType=='detailHotalDida'){
// qsearchDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD")
// qsearchEndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
// if(urlType=='detailHotalDida') urlName = `/searchDida`
// }
// }
if(currentUrl.includes('/#/searchProduct')){
urlName="/searchProduct";
}else if(currentUrl.includes('/#/planeticket')){
urlName="/planeticket";
}else if(currentUrl.includes('/#/searchVisa')){
urlName="/searchVisa";
}else if(currentUrl.includes('/#/searchdida')||currentUrl.includes('/#/detailHotalDida')){
urlName="/searchdida";
qsearchDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD") qsearchDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD")
qsearchEndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD") qsearchEndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
}else{
qsearchDate = this.searchDate
qsearchEndDate = this.searchEndDate
}
} }
if(urlName=='/searchVisa'||urlName=='/planeticket'){ if(urlName=='/searchVisa'||urlName=='/planeticket'){
...@@ -524,24 +613,34 @@ export default { ...@@ -524,24 +613,34 @@ export default {
let qsearchDate = this.searchDate let qsearchDate = this.searchDate
let qsearchEndDate = this.searchEndDate let qsearchEndDate = this.searchEndDate
var currentUrl = window.location.href; var currentUrl = window.location.href;
let urlName=""; let urlName="/search";
let currentUrlArr = currentUrl.split('/') // let currentUrlArr = currentUrl.split('/')
let urlType = currentUrlArr[4].split('?')[0] // let urlType = currentUrlArr[4].split('?')[0]
if(urlType){ // if(urlType){
urlName = `/${urlType}` // urlName = `/${urlType}`
if(urlType=='SearchDida'||urlType=='searchDida'){ // if(urlType=='searchProduct'){
// urlName = `/search`
// }else if(urlType=='detailsVisa'){
// urlName = `/searchVisa`
// }else if(urlType=='SearchDida'||urlType=='searchDida'||urlType=='detailHotalDida'){
// qsearchDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD")
// qsearchEndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
// if(urlType=='detailHotalDida') urlName = `/searchDida`
// }
// }
if(currentUrl.includes('/#/searchProduct')){
urlName="/searchProduct";
}else if(currentUrl.includes('/#/planeticket')){
urlName="/planeticket";
}else if(currentUrl.includes('/#/searchVisa')){
urlName="/searchVisa";
}else if(currentUrl.includes('/#/searchdida')){
urlName="/searchdida";
qsearchDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD") qsearchDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD")
qsearchEndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD") qsearchEndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
} }
}
// if(currentUrl.includes('/#/searchProduct')){
// urlName="/searchProduct";
// }else if(currentUrl.includes('/#/planeticket')){
// urlName="/planeticket";
// }else if(currentUrl.includes('/#/searchVisa')){
// urlName="/searchVisa";
// }
if(urlName=='/searchVisa'||urlName=='/planeticket'){ if(urlName=='/searchVisa'||urlName=='/planeticket'){
this.CommonJump(urlName, { this.CommonJump(urlName, {
Name: this.searchKey, Name: this.searchKey,
......
src/components/searchdida/kkday.vue
View file @ 64127f95
...@@ -27,16 +27,17 @@ ...@@ -27,16 +27,17 @@
class="q-ma-md" class="q-ma-md"
@input="changeAddrSearchHandler" @input="changeAddrSearchHandler"
@keyup.enter="searchCity" @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" v-show="showCity"
id="sb" id="city"
transition-show="fade" transition-show="fade"
elevated elevated
transition-hide="scale" transition-hide="scale"
style="z-index: 9;"> style="z-index: 9;">
<div v-for="item in KeyCityList" :key="item.Id" <div v-for="item in KeyCityList" :key="item.Id"
class="cursor-pointer" class="cursor-pointer q-py-xs"
@click="selectCity(item)" @click="selectCity(item)"
>{{ item.Name }}</div> >{{ item.Name }}</div>
</div> </div>
...@@ -167,16 +168,17 @@ ...@@ -167,16 +168,17 @@
class="q-ma-md" class="q-ma-md"
@input="changeAddrSearchHandler" @input="changeAddrSearchHandler"
@keyup.enter="searchCity" @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" v-show="showCity"
id="sb" id="city"
transition-show="fade" transition-show="fade"
elevated elevated
transition-hide="scale" transition-hide="scale"
style="z-index: 9;"> style="z-index: 9;">
<div v-for="item in KeyCityList" :key="item.Id" <div v-for="item in KeyCityList" :key="item.Id"
class="cursor-pointer" class="cursor-pointer q-py-xs"
@click="selectCity(item)" @click="selectCity(item)"
>{{ item.Name }}</div> >{{ item.Name }}</div>
</div> </div>
...@@ -640,6 +642,9 @@ export default { ...@@ -640,6 +642,9 @@ export default {
immediate: true, immediate: true,
}, },
}, },
beforeDestroy() {
document.removeEventListener("click", this.clickHandler);
},
created() { created() {
this.getCity() this.getCity()
this.initGoods(); this.initGoods();
...@@ -647,6 +652,7 @@ export default { ...@@ -647,6 +652,7 @@ export default {
}, },
mounted() { mounted() {
document.addEventListener("click", this.clickHandler);
// this.CitiesTicked = this.msg.Country ? [this.msg.Country] : (this.msg.Countrys ? this.msg.Countrys : []); // this.CitiesTicked = this.msg.Country ? [this.msg.Country] : (this.msg.Countrys ? this.msg.Countrys : []);
var CategoryName = this.getUrlKey("CategoryName", window.location.href); var CategoryName = this.getUrlKey("CategoryName", window.location.href);
if (CategoryName) { if (CategoryName) {
...@@ -666,6 +672,13 @@ export default { ...@@ -666,6 +672,13 @@ export default {
} }
}, },
methods: { methods: {
clickHandler(e) {
try {
if (!document.querySelector("#city").contains(e.target)) {
this.showCity = false;
}
} catch (error) {}
},
getSorts(){ getSorts(){
this.apipost('dmc_post_B2BAndB2CDiDaHotelQueryCondition', {}, this.apipost('dmc_post_B2BAndB2CDiDaHotelQueryCondition', {},
(res) => { (res) => {
...@@ -741,8 +754,8 @@ export default { ...@@ -741,8 +754,8 @@ export default {
}, },
// 关键字搜索城市 // 关键字搜索城市
searchCity() { searchCity() {
console.log(this.msg.KeyWords) if(this.CitiesList.length||this.regionList.length||this.searchAdd.name=='') return this.showCity = false
if(this.CitiesList.length||this.regionList.length||this.msg.KeyWords=='') return this.showCity = false else if(this.msg.KeyWords==this.searchAdd.name&&this.searchAdd.name) return this.showCity = true
this.msg.KeyWords = this.searchAdd.name this.msg.KeyWords = this.searchAdd.name
this.apipost('dmc_post_B2BAndB2CGetDestination', { this.apipost('dmc_post_B2BAndB2CGetDestination', {
KeyWords: this.msg.KeyWords KeyWords: this.msg.KeyWords
...@@ -781,16 +794,16 @@ export default { ...@@ -781,16 +794,16 @@ export default {
x.CityCode = `title_${index}` x.CityCode = `title_${index}`
x.children = x.CityList x.children = x.CityList
x.CityList.forEach(y => { x.CityList.forEach(y => {
this.CitiesListAll.push(y) if(index) this.CitiesListAll.push(y)
}) })
if(index) this.CitiesList.push(x)
}) })
this.msg.CityCode = this.msg.KeyWords?'':data[0].CityList[0].CityCode // this.msg.CityCode = this.msg.KeyWords?'':data[0].CityList[0].CityCode
this.msg.CityName = this.msg.KeyWords?'':data[0].CityList[0].CityName_CN // this.msg.CityName = this.msg.KeyWords?'':data[0].CityList[0].CityName_CN
this.msg.CityCode2 = this.msg.KeyWords?'':data[0].CityList[0].CityCode // this.msg.CityCode2 = this.msg.KeyWords?'':data[0].CityList[0].CityCode
this.CitiesTicked = this.msg.KeyWords?[]:[data[0].CityList[0].CityCode] // this.CitiesTicked = this.msg.KeyWords?[]:[data[0].CityList[0].CityCode]
this.CitiesList = data;
this.CitiesJSON = JSON.parse(JSON.stringify(this.CitiesList)); this.CitiesJSON = JSON.parse(JSON.stringify(this.CitiesList));
this.getRegion() // this.getRegion()
} }
}, },
); );
...@@ -868,9 +881,9 @@ export default { ...@@ -868,9 +881,9 @@ export default {
this.msg.CityCode2 = this.CitiesTicked.length?this.CitiesTicked[0]:'' this.msg.CityCode2 = this.CitiesTicked.length?this.CitiesTicked[0]:''
let findIndex = this.CitiesListAll.findIndex(x=>x.CityCode==this.msg.CityCode) let findIndex = this.CitiesListAll.findIndex(x=>x.CityCode==this.msg.CityCode)
if(findIndex!=-1) this.msg.CityName = this.CitiesListAll[findIndex].CityName if(findIndex!=-1) this.msg.CityName = this.CitiesListAll[findIndex].CityName
if(this.msg.CityCode2!=oldCityCode){ if(this.msg.CityCode2!=oldCityCode&&this.CitiesTicked.length){
this.getRegion() this.getRegion()
} }else this.regionList = []
this.resetQuery(); this.resetQuery();
}, },
...@@ -1004,6 +1017,7 @@ export default { ...@@ -1004,6 +1017,7 @@ export default {
return walkAndCopy(tree); return walkAndCopy(tree);
}, },
changeAddrSearchHandler(v) { changeAddrSearchHandler(v) {
this.showCity = false
this.CitiesJSONTMP = JSON.parse(JSON.stringify(this.CitiesJSON)); this.CitiesJSONTMP = JSON.parse(JSON.stringify(this.CitiesJSON));
let tree = this.dfs( let tree = this.dfs(
{ CityName: "", children: this.CitiesJSONTMP }, { CityName: "", children: this.CitiesJSONTMP },
...@@ -1052,14 +1066,14 @@ export default { ...@@ -1052,14 +1066,14 @@ export default {
// } // }
// ); // );
if(treeRegion&&treeRegion.children) this.regionList = treeRegion.children; if(treeRegion&&treeRegion.children) this.regionList = treeRegion.children;
if((this.regionList.length||this.CitiesList.length)&&this.KeyCityList.length){
if(this.regionList.length||this.CitiesList.length){
this.msg.KeyWords = '' this.msg.KeyWords = ''
this.msg.KeyWords2 = '' this.msg.KeyWords2 = ''
this.msg.CityCode = this.CitiesTicked[0] this.msg.CityCode = this.CitiesTicked[0]
this.msg.CityCode2 = this.CitiesTicked[0] this.msg.CityCode2 = this.CitiesTicked[0]
this.KeyCityList = [] // this.KeyCityList = []
this.resetQuery() this.resetQuery()
this.showCity = false
} }
} }
}, },
...@@ -1194,8 +1208,13 @@ export default { ...@@ -1194,8 +1208,13 @@ export default {
</script> </script>
<style> <style>
.KeyCityBox:hover{ .KeyCityBox div:hover{
color: var(--q-color-primary); color: var(--q-color-primary);
}
.KeyCityBox div:hover{
text-decoration: solid;
opacity: .8;
} }
.addr-list:hover { .addr-list:hover {
background: #E3F2FD; background: #E3F2FD;
......
src/pages/SearchDida.vue
View file @ 64127f95
...@@ -1444,21 +1444,6 @@ export default { ...@@ -1444,21 +1444,6 @@ export default {
pageIndex: 1, pageIndex: 1,
pageSize: 20, pageSize: 20,
//只查询日本
// Country: "JP",
// DestinationID: '',
// City: "",
// //星级
// Star: '',
// //价格等级
// PriceLevel: 0,
// MaxPrice: 0,
// MinPrice: 0,
// HotelName: '',
// StartDate: '',
// EndDate: '',
// IsSelectImg: 1,
KeyWords: "", //关键字 KeyWords: "", //关键字
KeyWords2: "", //关键字 KeyWords2: "", //关键字
StartPrice: 100, StartPrice: 100,
...@@ -1493,6 +1478,39 @@ export default { ...@@ -1493,6 +1478,39 @@ export default {
watch:{ watch:{
'$route': { '$route': {
handler(newVal, oldVal) { handler(newVal, oldVal) {
this.qMsg = {
pageIndex: 1,
pageSize: 20,
KeyWords: "", //关键字
KeyWords2: "", //关键字
StartPrice: 100,
EndPrice: 0,
QOrderBy: "0", //排序类型
QStarRating: [], //星级
GName: '', //热门
CityCode: '', //目的地代码
CityName: '', //目的地
CityCode2: '', //目的地代码
regionCode: '', //区域
CityName_CN: '',
rooms: 1,
adultsNumber: 2,
childrenNumberZC: 0,
childrenNumberBZC: 0,
peoples: 2,
interCurrent: 0,
searchroomGroup: [{
roomNum: 1,
numberOfAdults: 2,
numberOfChildren: 0,
ChildAgeDetails: [],
ChildAgeTexts: [],//儿童年龄
}],
}
if(newVal.query&&newVal.query.pageIndex){
this.qMsg = newVal.query
}else{
var qsearchKey = this.getUrlKey("qsearchKey", window.location.href); var qsearchKey = this.getUrlKey("qsearchKey", window.location.href);
var qsearchDate = this.getUrlKey("qsearchDate", window.location.href); var qsearchDate = this.getUrlKey("qsearchDate", window.location.href);
var qsearchEndDate = this.getUrlKey("qsearchEndDate", window.location.href); var qsearchEndDate = this.getUrlKey("qsearchEndDate", window.location.href);
...@@ -1515,6 +1533,12 @@ export default { ...@@ -1515,6 +1533,12 @@ export default {
this.qMsg.EndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD") this.qMsg.EndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
} }
if(areaId) {
this.qMsg.CityCode = areaId;
}
}
console.log(newVal.query.CheckInDate,'-------')
if ((qsearchKey || qsearchDate || qsearchEndDate) && this.ShowType != 2) { if ((qsearchKey || qsearchDate || qsearchEndDate) && this.ShowType != 2) {
this.goSearchHandler(); this.goSearchHandler();
} }
......
src/pages/detailHotalDida.vue
View file @ 64127f95
...@@ -40,14 +40,14 @@ ...@@ -40,14 +40,14 @@
<div <div
:class="{'row no-wrap': $q.platform.is.desktop,'col row justify-between': $q.platform.is.mobile,}"> :class="{'row no-wrap': $q.platform.is.desktop,'col row justify-between': $q.platform.is.mobile,}">
<q-field stack-label label="入住 / 退房日期" standout
style="min-width: 190px" dense> <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"> <div class="self-center full-width no-outline row no-wrap items-center" tabindex="0">
<span>{{dateRangeFormat}} </span> <span>{{dateRangeFormat}} </span>
<q-chip size="9px" clickable <q-chip size="9px" clickable
text-color="white" text-color="white"
color="dark" square>{{liveNvm}} 晚</q-chip> color="dark" square>{{liveNvm}} 晚</q-chip>
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy"> <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date <q-date
v-model="dateRange" v-model="dateRange"
...@@ -55,15 +55,15 @@ ...@@ -55,15 +55,15 @@
range mask="YYYY/MM/DD" range mask="YYYY/MM/DD"
@range-end="dateRangeHandler"></q-date> @range-end="dateRangeHandler"></q-date>
</q-popup-proxy> </q-popup-proxy>
</q-field> </div>
<q-field v-if="$q.platform.is.desktop" stack-label label="人数及客房" standout </div>
class="q-ml-lg"
style="min-width:190px" dense> <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="self-center full-width no-outline" tabindex="0"> <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}}成人 {{numberOfAdults}}成人
<template v-if="numberOfChildren>0"> {{numberOfChildren}}儿童</template> <template v-if="numberOfChildren>0"> {{numberOfChildren}}儿童</template>
{{roomGroup}}房 {{roomGroup}}房
</div>
<q-popup-proxy :offset="[0, 10]"> <q-popup-proxy :offset="[0, 10]">
<div class="q-pa-lg q-py-lg bg-white"> <div class="q-pa-lg q-py-lg bg-white">
<div class="items-center" <div class="items-center"
...@@ -187,7 +187,18 @@ ...@@ -187,7 +187,18 @@
</div> </div>
</div> </div>
</q-popup-proxy> </q-popup-proxy>
</q-field> </div>
</div>
<!-- 目的地 -->
<destination :msg="{
CityCode:CityCode?CityCode:dataList.CityCode,
KeyWords2:dataList.Name_CN,
StartDate:msg.CheckInDate,
EndDate:msg.CheckOutDate,
searchroomGroup:msg.searchroomGroup}"
@change="changeMsg"></destination>
</div> </div>
<q-btn v-if="$q.platform.is.mobile" unelevated round class="bg-grey-3 hover" icon="search" title="更多筛选"> <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-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating label="1"/>
...@@ -360,7 +371,8 @@ ...@@ -360,7 +371,8 @@
class="cursor-pointer" class="cursor-pointer"
@click="CommonJump('/index', {})" @click="CommonJump('/index', {})"
/> />
<q-breadcrumbs-el :label="dataList.CountryName_CN" class="cursor-pointer" /> <q-breadcrumbs-el :label="dataList.CountryName_CN" class="cursor-pointer"
@click="CommonJump('/searchDida', {areaId:dataList.CityCode})"/>
<!-- <q-breadcrumbs-el> <!-- <q-breadcrumbs-el>
<span> <span>
<span class="cursor-pointer">{{ hotelSummary.hotelStateProvince }} </span> <span class="cursor-pointer">{{ hotelSummary.hotelStateProvince }} </span>
...@@ -721,63 +733,43 @@ ...@@ -721,63 +733,43 @@
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"> }">
<div class="q-pb-md row no-wrap" v-if="Facilities.length > 0"> <div class="row no-wrap overflow-hidden">
<span class="text-weight-bold q-mt-xs">酒店设施</span> <!-- <span class="text-weight-bold">酒店设施</span> -->
<span class="q-pl-md row wrap col"> <div class="column col overflow-hidden">
<q-chip size="9px" clickable <div v-if="Facilities.length > 0" class="scroll q-pb-xs" :style="{'max-width': $q.platform.is.mobile?'85vw':'auto'}">
text-color="white" <table class="hotel-details-table q-pb-md">
color="dark" square v-for="(x,i) in Facilities" :key="i">{{x.description}}</q-chip>
</span>
</div>
<div class="q-pb-md row no-wrap">
<span class="text-weight-bold q-mt-xs">房间设施</span>
<span class="q-pl-md row wrap col" v-if="RoomFacilities.length > 0">
<q-chip size="9px" clickable
text-color="white"
color="dark" square v-for="(x,i) in RoomFacilities" :key="i">{{x.description}}</q-chip>
</span>
</div>
<div class="row no-wrap overflow-hidden" v-if="false">
<span class="text-weight-bold">水疗</span>
<div class="column col q-pl-md overflow-hidden">
<div class="scroll q-pb-xs" :style="{'max-width': $q.platform.is.mobile?'85vw':'auto'}">
<table class="hotel-details-table q-pb-md q-mr-md">
<tr> <tr>
<td colspan="3" class="td01">室外</td> <td :colspan="itemsPerRow" class="td01 text-weight-bold">房间设施</td>
<td colspan="3" class="td01">屋内</td>
<td colspan="3" class="td01">蒸气浴</td>
</tr> </tr>
<tr> <tr v-for="(item,i) in Facilities" class="text-xxs">
<td class="td02">男</td> <td v-for="(x,i) in item">{{x.description}}</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
<td class="td02">男</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
<td class="td02">男</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
</tr> </tr>
</table>
</div>
</div>
</div>
<div class="q-pt-sm row no-wrap overflow-hidden">
<!-- <span class="text-weight-bold">房间设施</span> -->
<div class="column col overflow-hidden">
<div v-if="RoomFacilities.length > 0" class="scroll q-pb-xs" :style="{'max-width': $q.platform.is.mobile?'85vw':'auto'}">
<table class="hotel-details-table q-pb-md">
<tr> <tr>
<td>{{bathRoom[0]}}</td> <td :colspan="itemsPerRow" class="td01 text-weight-bold">房间设施</td>
<td>{{bathRoom[1]}}</td> </tr>
<td>{{bathRoom[2]}}</td> <tr v-for="(item,i) in RoomFacilities" class="text-xxs">
<td>{{bathRoom[3]}}</td> <td v-for="(x,i) in item">{{x.description}}</td>
<td>{{bathRoom[4]}}</td>
<td>{{bathRoom[5]}}</td>
<td>{{bathRoom[6]}}</td>
<td>{{bathRoom[7]}}</td>
<td>{{bathRoom[8]}}</td>
</tr> </tr>
</table> </table>
</div> </div>
</div>
<div class="q-pt-sm row wrap"> <div class="q-pt-sm row wrap">
<q-chip size="9px" clickable <q-chip size="9px" clickable
text-color="white" text-color="white"
color="dark" square v-for="(x,i) in HotSpring" :key="i">{{x}}</q-chip> color="dark" square v-for="(x,i) in HotSpring" :key="i">{{x}}</q-chip>
</div> </div>
</div>
</div> </div>
</div> </div>
...@@ -950,6 +942,7 @@ import componentsMap from 'src/components/car/Map.vue'; ...@@ -950,6 +942,7 @@ import componentsMap from 'src/components/car/Map.vue';
import ImagePreview from 'src/components/common/ImagePreview.vue' import ImagePreview from 'src/components/common/ImagePreview.vue'
import RoomCard from '../components/hotaldida/RoomCard.vue' import RoomCard from '../components/hotaldida/RoomCard.vue'
import OrderPreview from "src/components/hotaldida/orderPreview.vue"; import OrderPreview from "src/components/hotaldida/orderPreview.vue";
import destination from './didaHotel/destination.vue'
export default { export default {
props: [], props: [],
components: { components: {
...@@ -964,6 +957,7 @@ export default { ...@@ -964,6 +957,7 @@ export default {
ImagePreview, ImagePreview,
RoomCard, RoomCard,
OrderPreview, OrderPreview,
destination,
}, },
data() { data() {
return { return {
...@@ -1124,6 +1118,8 @@ export default { ...@@ -1124,6 +1118,8 @@ export default {
childrenAgeList: [], //儿童年龄下拉 childrenAgeList: [], //儿童年龄下拉
Facilities: [],//服务设施 Facilities: [],//服务设施
RoomFacilities: [],//房型服务设施 RoomFacilities: [],//房型服务设施
itemsPerRow: 6,
CityCode: '',
}; };
}, },
watch: { watch: {
...@@ -1235,6 +1231,17 @@ export default { ...@@ -1235,6 +1231,17 @@ export default {
document.getElementsByTagName("body")[0].style = ""; document.getElementsByTagName("body")[0].style = "";
}, },
methods: { methods: {
changeMsg(msg,item){
if(item){
this.detaMsg.hotelId = item.Id
this.msg.hotelId = item.Id
this.MinPrice = item.Price
}else{
this.CityCode = msg.CityCode
}
this.getData();
this.getDiDaPriceSearchList()
},
placeOrderHandler(item){ placeOrderHandler(item){
// this.getDiDaPriceConfirmList(item) // this.getDiDaPriceConfirmList(item)
let order = { let order = {
...@@ -1497,10 +1504,25 @@ export default { ...@@ -1497,10 +1504,25 @@ export default {
}) })
this.dataList.images = this.images this.dataList.images = this.images
if (tempObj.HotelFacilityList && tempObj.HotelFacilityList.length > 0) { if (tempObj.HotelFacilityList && tempObj.HotelFacilityList.length > 0) {
this.Facilities = tempObj.HotelFacilityList; const totalRows = Math.ceil(tempObj.HotelFacilityList.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)
}
} }
if (tempObj.RoomFacilityList && tempObj.RoomFacilityList.length > 0) { if (tempObj.RoomFacilityList && tempObj.RoomFacilityList.length > 0) {
this.RoomFacilities = tempObj.RoomFacilityList; const totalRows = Math.ceil(tempObj.RoomFacilityList.length / this.itemsPerRow)
for (let i = 0; i < totalRows; i++) {
const startIndex = i * this.itemsPerRow
const endIndex = startIndex + this.itemsPerRow
const row = tempObj.RoomFacilityList.slice(startIndex, endIndex)
this.RoomFacilities.push(row)
}
console.log(this.RoomFacilities,'----')
} }
// let description = tempObj.description.split('<br/>') // let description = tempObj.description.split('<br/>')
// this.hotelDetails.hotelDescription = [] // this.hotelDetails.hotelDescription = []
...@@ -1563,6 +1585,9 @@ export default { ...@@ -1563,6 +1585,9 @@ export default {
this.qMealTypeList = tempData.qMealTypeList; this.qMealTypeList = tempData.qMealTypeList;
this.qMealTypeList.unshift({MTypeName:'餐型(全部)'}) this.qMealTypeList.unshift({MTypeName:'餐型(全部)'})
this.$q.loading.hide(); this.$q.loading.hide();
}else{
this.$q.loading.hide();
this.$message.error(res.data.message);
} }
}, null) }, null)
}, },
...@@ -1630,7 +1655,7 @@ export default { ...@@ -1630,7 +1655,7 @@ export default {
.hotel-details-table { .hotel-details-table {
border: 1px solid #DCDCDC; border: 1px solid #DCDCDC;
border-collapse: collapse; border-collapse: collapse;
width:680px; /* width:680px; */
} }
.hotel-details-table .td01 { .hotel-details-table .td01 {
padding: 3px 15px; padding: 3px 15px;
...@@ -1648,11 +1673,10 @@ export default { ...@@ -1648,11 +1673,10 @@ export default {
} }
.hotel-details-table td { .hotel-details-table td {
width: 439px; width: 439px;
padding: 10px 20px; /* padding: 10px 20px; */
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
border: 1px solid #DCDCDC; border: 1px solid #DCDCDC;
font-size: 14px;
box-sizing: border-box; box-sizing: border-box;
} }
.hotel-details-tableMoblie { .hotel-details-tableMoblie {
......
src/pages/didaHotel/destination.vue 0 → 100644
View file @ 64127f95
<template>
<div class="didaDestination q-px-md relative q-ml-sm 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> -->
<div class="">
<q-input
id="search_key"
v-model="HotalMsg.KeyWords2"
clearable
label="搜索目的地、酒店"
filled
dense
standout="bg-grey-2 text-black"
@input="searchInputHandler"
@focus="searchFocusHandler"
@blur="searchBlurHandler"
@keyup.enter="searchChangeHandler"
@clear="clearHandler"
:loading="loading"
>
</q-input>
</div>
<div>
<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;
box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;"
v-show="showKeyWordsList">
<div id="KeyWords">
<template v-for="(x,index) in dataList">
<div class="row no-wrap" v-if="x.list.length"
:style="{'border-bottom':index==1?'none':'1px solid rgb(238, 238, 238)'}">
<div class="bg-grey-2" style="border-right: 1px solid rgb(238, 238, 238);width: 100px;">
<div :key="index"
class="GNameBox-l q-py-xs q-px-md text-xs cursor-pointer">
{{ x.Name }}
</div>
</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"
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>
<div>
<template v-if="y.Type==1">
<template v-if="y.Count">附近约</template>
<span class="text-orange-8" v-if="y.Count">{{ y.Count }}</span>
<template v-if="y.Count">间酒店</template>
</template>
<template v-if="y.Type==2">
CNY <span class="text-red">{{ y.Price }} </span>起
</template>
</div>
</div>
</div>
</div>
</div>
</template>
</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;
box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.2) !important;"
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="[GNameActive==x.GName?'active':'']">
{{ x.GName }}
</div>
</div>
<div class="col q-pa-sm" style="min-width: 400px;">
<q-scroll-area class="w-full" style="height: 305px;"
:thumb-style="{
right: '2px',
borderRadius: '5px',
backgroundColor: 'rgba(0, 0, 0, .1)',
width: '5px',
opacity: '0.75'
}"
:content-style="{
backgroundColor: 'rgba(0, 0, 0, 0)',
color: '#555'
}"
:content-active-style="{
backgroundColor: 'rgba(0, 0, 0, 0)',
color: 'black'
}">
<div class="row wrap">
<div class="CityNameBox-r col-3 text-xxs text-no-wrap q-py-xs cursor-pointer" v-for="(y,index) in CityList" :key="index"
:class="[HotalMsg.CityCode==y.CityCode?'active':'']"
@click="changeCity(y)">
{{ y.CityName }}
</div>
</div>
<div class="row wrap">
<div class="CityNameBox-r col-3 text-xxs text-no-wrap q-py-xs cursor-pointer" v-for="(y,index) in regionList" :key="index"
:class="[HotalMsg.CityCode==y.CityCode?'active':'']"
@click="changeRegion(y)">
{{ y.CityName_CN }}
</div>
</div>
</q-scroll-area>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
msg: {
type: Object,
default: () => {}
}
},
data() {
return {
CitiesList: [],
CityList: [],
regionList: [],
GNameActive: '',
showSplitPannel: false,
HotalMsg: {
pageIndex: 1,
pageSize: 20,
KeyWords: "", //关键字
KeyWords2: "", //关键字
StartPrice: 100,
EndPrice: 0,
QOrderBy: "0", //排序类型
QStarRating: [], //星级
GName: '', //热门
CityCode: '', //目的地代码
CityName: '', //目的地
CityCode2: '', //目的地代码
regionCode: '', //区域
CityName_CN: '',
rooms: 1,
adultsNumber: 2,
childrenNumberZC: 0,
childrenNumberBZC: 0,
peoples: 2,
interCurrent: 0,
searchroomGroup: [{
roomNum: 1,
numberOfAdults: 2,
numberOfChildren: 0,
ChildAgeDetails: [],
ChildAgeTexts: [],//儿童年龄
}],
},
dataList:[
{
Name:'国家/区域',
Id: 1,
list:[]
},
{
Name:'酒店',
Id: 2,
list:[]
},
],
HotalList: [],
DestiList: [],
showKeyWordsList: false,
loadingIndex: 0,
loading: false,
lastKeyword: '',
};
},
watch: {
msg: {
handler(newVal, oldVal) {
this.HotalMsg = {
...this.HotalMsg,
...JSON.parse(JSON.stringify(newVal))
}
},
deep: true
}
},
beforeDestroy() {
document.removeEventListener("click", this.clickHandler);
},
mounted() {
document.addEventListener("click", this.clickHandler);
this.getCity()
},
methods: {
inList(){
this.loadingIndex = 0
this.loading = true
this.lastKeyword = this.HotalMsg.KeyWords2
this.getDestiList(1)
this.getHotalList(1)
},
changeType(y){
if(y.Type==1){
this.HotalMsg.CityCode = y.Id
this.HotalMsg.CityCode2 = y.Id
// this.HotalMsg.CityName = y.Name.split(' ')[0]
this.HotalMsg.KeyWords = y.Name.split(' ')[0]
this.HotalMsg.KeyWords2 = y.Name.split(' ')[0]
this.CommonJump('/searchdida', {
...this.HotalMsg
});
}else if(y.Type==2){
this.HotalMsg.KeyWords2 = y.Name
this.$emit('change', this.HotalMsg,y)
this.showKeyWordsList = false
this.showSplitPannel = false
}
},
clickHandler(e) {
try {
if (!document.querySelector("#KeyWords").contains(e.target)) {
this.showKeyWordsList = false;
if(this.HotalMsg.KeyWords2=='') {
this.HotalMsg.KeyWords2 = this.msg.KeyWords2
}
}
} catch (error) {}
try {
if (!document.querySelector("#cit").contains(e.target)) {
this.showSplitPannel = false;
if(this.HotalMsg.KeyWords2=='') {
this.HotalMsg.KeyWords2 = this.msg.KeyWords2
}
}
} catch (error) {}
},
getDestiList(type){
this.apipost(
"dmc_post_B2BAndB2CGetDestination",{
KeyWords: this.HotalMsg.KeyWords2,
},
res => {
if(this.loadingIndex<2)this.loadingIndex++
if(res.data.resultCode == 1) {
res.data.data.forEach(x => {
x.Name = x.NameCN
x.Id = x.CityCode
x.Count = x.HotelCount
x.Type = 1
})
this.DestiList = res.data.data
this.dataList[0].list = res.data.data
if(this.loadingIndex==2) {
this.loading = false
this.showKeyWordsList = true
this.showSplitPannel = false
}
}
})
},
getHotalList(type){
this.apipost(
"dmc_post_B2BAndB2CGetDidaHotelPage",this.HotalMsg,
res => {
if(this.loadingIndex<2)this.loadingIndex++
if (res.data.resultCode == 1) {
res.data.data.pageData.forEach(x => {
x.Name = x.name
x.Id = x.hotelid
x.Count = x.starRating
x.Price = x.unitprice
x.Type = 2
})
this.HotalList = res.data.data.pageData
this.dataList[1].list = res.data.data.pageData
if(this.loadingIndex==2) {
this.loading = false
this.showKeyWordsList = true
this.showSplitPannel = false
}
}
})
},
clearHandler(){
this.showKeyWordsList = false
this.showSplitPannel = true
return
this.showSplitPannel = true
this.showKeyWordsList = false
this.loading = false
},
searchInputHandler(){
return
if(this.HotalMsg.KeyWords2=='') {
this.showKeyWordsList = false
this.showSplitPannel = true
}
},
searchFocusHandler(){
setTimeout(() => {
if(!this.HotalMsg.KeyWords2||this.HotalMsg.KeyWords2==''){
this.loading = false
this.showKeyWordsList = false
this.showSplitPannel = true
}else{
// this.inList()
}
}, 200);
},
searchBlurHandler(){
},
searchChangeHandler(){
setTimeout(()=>{
if(!this.HotalMsg.KeyWords2||this.HotalMsg.KeyWords2=='') {
this.loading = false
this.showKeyWordsList = false
this.showSplitPannel = true
return
}
this.lastKeyword = this.HotalMsg.KeyWords2
this.loading = true
this.loadingIndex = 0
this.getHotalList()
this.getDestiList()
},200)
},
changeRegion(y){
this.HotalMsg.CityName_CN = y.CityName
this.HotalMsg.regionCode = y.CityCode
},
changeCity(y){
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
// });
// this.getRegion()
},
changeGName(x){
this.GNameActive = x.GName
this.CityList = x.CityList
},
getCity(){
this.apipost(
"dmc_post_B2BAndB2CGetHotCity", {},
res => {
if (res.data.resultCode == 1) {
let data = res.data.data
data.forEach((x,index) => {
// x.CityName = x.GName
// x.CityCode = `title_${index}`
// x.children = x.CityList
// x.CityList.forEach(y => {
// if(index) this.CitiesListAll.push(y)
// })
if(index) this.CitiesList.push(x)
})
this.GNameActive = this.CitiesList[0].GName
this.CityList = this.CitiesList[0].CityList
}
},
);
},
// 区域
getRegion() {
var regMsg = {
CityCode: this.HotalMsg.CityCode,
Name: this.HotalMsg.KeyWords2,
};
this.apipost('dmc_post_GetDestinationByCityCode', regMsg,
(res) => {
if (res.data.resultCode == 1) {
this.regionListAll = []
this.regionList = []
let data = res.data.data;
let arrList = function(list){
list.forEach(x => {
x.Id = x.CityCode;
x.Name = x.CityName_CN;
})
}
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));
}
},
(err) => {}
);
},
}
}
</script>
<style>
.GNameBox-l:hover{
background: #fff;
}
.GNameBox-l.active{
background: var(--q-color-primary);
color: #fff;
}
.CityNameBox-r:hover{
color: var(--q-color-primary);
}
.CityNameBox-R.active{
color: var(--q-color-primary);
}
.GNameBox-center:hover{
color: red;
background: rgba(255, 0, 0,.1) ;
}
/* 针对特定容器 */
.DestinationList {
overflow-y: auto;
}
.DestinationList::-webkit-scrollbar {
width: 4px;
}
.DestinationList::-webkit-scrollbar-track {
background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
border-radius: 4px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}
.DestinationList::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
transition: all 0.3s ease;
}
.DestinationList::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, #0056b3, #004085);
transform: scale(1.1);
}
/* 角落区域 */
.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