Skip to content

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

no message

parent fb5272cb
Hide 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 @@
{{ item.RoomName==item.RoomName_CN?"":item.RoomName}}
</div>
</div>
<q-scroll-area style=""
<!-- <q-scroll-area style=""
:thumb-style="{
right: '2px',
borderRadius: '5px',
......@@ -49,7 +49,7 @@
:content-active-style="{
backgroundColor: 'rgba(0, 0, 0, 0)',
color: 'black'
}"></q-scroll-area>
}"></q-scroll-area> -->
<div
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">
......
src/components/search_sf/search-top.vue
View file @ 64127f95
......@@ -23,7 +23,7 @@
:label="$t('search')"
@focus="searchFocusHandler"
@blur="searchBlurHandler"
@keyup="searchChangeHandler"
@keyup.enter="searchChangeHandler"
/>
</div>
<div class="col-2">
......@@ -94,10 +94,31 @@
</q-btn>
</div>
</div>
<div class="text-weight-bold q-pa-sm">熱門目的地</div>
<q-separator />
<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="column">
<div class="text-weight-bold q-pa-sm">熱門目的地</div>
<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="hot-tag" @click="handleHotTagClick(item)" :class="{'hot-tag-select': setectHotTag === item.Id}" :key="item.Id" v-for="item in hotList">{{item.Name}}</div>
</div>
</q-scroll-area>
</div>
</div>
</div>
</div>
......@@ -366,6 +387,32 @@ export default {
beforeDestroy() {
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: {},
methods: {
handleAreaTicked(target) {
......@@ -411,6 +458,35 @@ export default {
});
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) {
this.setectHotTag = item.Id
let qsearchDate = this.searchDate
......@@ -422,19 +498,32 @@ export default {
// this.historys=Array.from(new Set([this.searchKey].concat(this.historys)))
// localStorage['recent_search'] = JSON.stringify(this.historys)
var currentUrl = window.location.href;
let urlName="";
let urlName="/search";
let currentUrlArr = currentUrl.split('/')
let urlType = currentUrlArr[4].split('?')[0]
if(urlType){
urlName = `/${urlType}`
if(urlType=='SearchDida'||urlType=='searchDida'){
qsearchDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD")
qsearchEndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
}else{
qsearchDate = this.searchDate
qsearchEndDate = this.searchEndDate
}
// let currentUrlArr = currentUrl.split('/')
// let urlType = currentUrlArr[4].split('?')[0]
// if(urlType){
// urlName = `/${urlType}`
// 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")
qsearchEndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
}
if(urlName=='/searchVisa'||urlName=='/planeticket'){
......@@ -524,24 +613,34 @@ export default {
let qsearchDate = this.searchDate
let qsearchEndDate = this.searchEndDate
var currentUrl = window.location.href;
let urlName="";
let urlName="/search";
let currentUrlArr = currentUrl.split('/')
let urlType = currentUrlArr[4].split('?')[0]
if(urlType){
urlName = `/${urlType}`
if(urlType=='SearchDida'||urlType=='searchDida'){
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(currentUrl.includes('/#/searchProduct')){
// urlName="/searchProduct";
// }else if(currentUrl.includes('/#/planeticket')){
// urlName="/planeticket";
// }else if(currentUrl.includes('/#/searchVisa')){
// urlName="/searchVisa";
// let currentUrlArr = currentUrl.split('/')
// let urlType = currentUrlArr[4].split('?')[0]
// if(urlType){
// urlName = `/${urlType}`
// 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")
qsearchEndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
}
if(urlName=='/searchVisa'||urlName=='/planeticket'){
this.CommonJump(urlName, {
Name: this.searchKey,
......
src/components/searchdida/kkday.vue
View file @ 64127f95
......@@ -27,16 +27,17 @@
class="q-ma-md"
@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"
v-show="showCity"
id="sb"
id="city"
transition-show="fade"
elevated
transition-hide="scale"
style="z-index: 9;">
<div v-for="item in KeyCityList" :key="item.Id"
class="cursor-pointer"
class="cursor-pointer q-py-xs"
@click="selectCity(item)"
>{{ item.Name }}</div>
</div>
......@@ -167,16 +168,17 @@
class="q-ma-md"
@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"
v-show="showCity"
id="sb"
id="city"
transition-show="fade"
elevated
transition-hide="scale"
style="z-index: 9;">
<div v-for="item in KeyCityList" :key="item.Id"
class="cursor-pointer"
class="cursor-pointer q-py-xs"
@click="selectCity(item)"
>{{ item.Name }}</div>
</div>
......@@ -640,6 +642,9 @@ export default {
immediate: true,
},
},
beforeDestroy() {
document.removeEventListener("click", this.clickHandler);
},
created() {
this.getCity()
this.initGoods();
......@@ -647,6 +652,7 @@ export default {
},
mounted() {
document.addEventListener("click", this.clickHandler);
// this.CitiesTicked = this.msg.Country ? [this.msg.Country] : (this.msg.Countrys ? this.msg.Countrys : []);
var CategoryName = this.getUrlKey("CategoryName", window.location.href);
if (CategoryName) {
......@@ -666,6 +672,13 @@ export default {
}
},
methods: {
clickHandler(e) {
try {
if (!document.querySelector("#city").contains(e.target)) {
this.showCity = false;
}
} catch (error) {}
},
getSorts(){
this.apipost('dmc_post_B2BAndB2CDiDaHotelQueryCondition', {},
(res) => {
......@@ -741,8 +754,8 @@ export default {
},
// 关键字搜索城市
searchCity() {
console.log(this.msg.KeyWords)
if(this.CitiesList.length||this.regionList.length||this.msg.KeyWords=='') return this.showCity = false
if(this.CitiesList.length||this.regionList.length||this.searchAdd.name=='') 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.apipost('dmc_post_B2BAndB2CGetDestination', {
KeyWords: this.msg.KeyWords
......@@ -781,16 +794,16 @@ export default {
x.CityCode = `title_${index}`
x.children = x.CityList
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.CityName = this.msg.KeyWords?'':data[0].CityList[0].CityName_CN
this.msg.CityCode2 = this.msg.KeyWords?'':data[0].CityList[0].CityCode
this.CitiesTicked = this.msg.KeyWords?[]:[data[0].CityList[0].CityCode]
this.CitiesList = data;
// 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.CityCode2 = this.msg.KeyWords?'':data[0].CityList[0].CityCode
// this.CitiesTicked = this.msg.KeyWords?[]:[data[0].CityList[0].CityCode]
this.CitiesJSON = JSON.parse(JSON.stringify(this.CitiesList));
this.getRegion()
// this.getRegion()
}
},
);
......@@ -868,9 +881,9 @@ export default {
this.msg.CityCode2 = this.CitiesTicked.length?this.CitiesTicked[0]:''
let findIndex = this.CitiesListAll.findIndex(x=>x.CityCode==this.msg.CityCode)
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()
}
}else this.regionList = []
this.resetQuery();
},
......@@ -1004,6 +1017,7 @@ export default {
return walkAndCopy(tree);
},
changeAddrSearchHandler(v) {
this.showCity = false
this.CitiesJSONTMP = JSON.parse(JSON.stringify(this.CitiesJSON));
let tree = this.dfs(
{ CityName: "", children: this.CitiesJSONTMP },
......@@ -1052,14 +1066,14 @@ export default {
// }
// );
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.KeyWords2 = ''
this.msg.CityCode = this.CitiesTicked[0]
this.msg.CityCode2 = this.CitiesTicked[0]
this.KeyCityList = []
// this.KeyCityList = []
this.resetQuery()
this.showCity = false
}
}
},
......@@ -1194,8 +1208,13 @@ export default {
</script>
<style>
.KeyCityBox:hover{
.KeyCityBox div:hover{
color: var(--q-color-primary);
}
.KeyCityBox div:hover{
text-decoration: solid;
opacity: .8;
}
.addr-list:hover {
background: #E3F2FD;
......
src/pages/SearchDida.vue
View file @ 64127f95
......@@ -1444,21 +1444,6 @@ export default {
pageIndex: 1,
pageSize: 20,
//只查询日本
// Country: "JP",
// DestinationID: '',
// City: "",
// //星级
// Star: '',
// //价格等级
// PriceLevel: 0,
// MaxPrice: 0,
// MinPrice: 0,
// HotelName: '',
// StartDate: '',
// EndDate: '',
// IsSelectImg: 1,
KeyWords: "", //关键字
KeyWords2: "", //关键字
StartPrice: 100,
......@@ -1493,27 +1478,66 @@ export default {
watch:{
'$route': {
handler(newVal, oldVal) {
var qsearchKey = this.getUrlKey("qsearchKey", window.location.href);
var qsearchDate = this.getUrlKey("qsearchDate", window.location.href);
var qsearchEndDate = this.getUrlKey("qsearchEndDate", window.location.href);
var areaId = this.getUrlKey("areaId", window.location.href);
var areaName = this.getUrlKey("areaName", window.location.href);
if (qsearchKey) {
this.qMsg.KeyWords = qsearchKey;
}else if (areaName) {
this.qMsg.KeyWords = areaName;
}else this.qMsg.KeyWords = ''
if (qsearchDate) {
this.qMsg.StartDate = qsearchDate;
}else {
this.qMsg.StartDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD")
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 (qsearchEndDate) {
this.qMsg.EndDate = qsearchEndDate;
}else {
this.qMsg.EndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), "YYYY/MM/DD")
if(newVal.query&&newVal.query.pageIndex){
this.qMsg = newVal.query
}else{
var qsearchKey = this.getUrlKey("qsearchKey", window.location.href);
var qsearchDate = this.getUrlKey("qsearchDate", window.location.href);
var qsearchEndDate = this.getUrlKey("qsearchEndDate", window.location.href);
var areaId = this.getUrlKey("areaId", window.location.href);
var areaName = this.getUrlKey("areaName", window.location.href);
if (qsearchKey) {
this.qMsg.KeyWords = qsearchKey;
}else if (areaName) {
this.qMsg.KeyWords = areaName;
}else this.qMsg.KeyWords = ''
if (qsearchDate) {
this.qMsg.StartDate = qsearchDate;
}else {
this.qMsg.StartDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), "YYYY/MM/DD")
}
if (qsearchEndDate) {
this.qMsg.EndDate = qsearchEndDate;
}else {
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) {
this.goSearchHandler();
......
src/pages/detailHotalDida.vue
View file @ 64127f95
......@@ -40,77 +40,39 @@
<div
: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">
<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>
<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>
</q-field>
<q-field v-if="$q.platform.is.desktop" stack-label label="人数及客房" standout
class="q-ml-lg"
style="min-width:190px" dense>
<div class="self-center full-width no-outline" tabindex="0">
</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}}房
</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="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.numberOfAdults"
class="col"
<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
......@@ -124,7 +86,7 @@
class="q-px-none"
flat
icon="remove"
@click="addPeople('numberOfAdults', -1,x)"
@click="addPeople('room', -1)"
/>
</template>
<template v-slot:append>
......@@ -134,60 +96,109 @@
class="q-px-none"
flat
icon="add"
@click="addPeople('numberOfAdults', 1,x)"
@click="addPeople('room', 1)"
/>
</template>
</q-input>
</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>
<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.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>
<q-separator v-if="index!=(msg.searchroomGroup.length-1)" color="grey-2" class="q-my-md" />
</div>
</div>
<q-separator v-if="index!=(msg.searchroomGroup.length-1)" color="grey-2" class="q-my-md" />
</div>
</div>
</q-popup-proxy>
</q-field>
</q-popup-proxy>
</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>
<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"/>
......@@ -360,7 +371,8 @@
class="cursor-pointer"
@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>
<span>
<span class="cursor-pointer">{{ hotelSummary.hotelStateProvince }} </span>
......@@ -720,64 +732,44 @@
<div class="q-mt-sm column" :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">
<div class="q-pb-md row no-wrap" v-if="Facilities.length > 0">
<span class="text-weight-bold q-mt-xs">酒店设施</span>
<span class="q-pl-md row wrap col">
<q-chip size="9px" clickable
text-color="white"
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 class="row no-wrap overflow-hidden">
<!-- <span class="text-weight-bold">酒店设施</span> -->
<div class="column col overflow-hidden">
<div v-if="Facilities.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>
<td :colspan="itemsPerRow" class="td01 text-weight-bold">房间设施</td>
</tr>
<tr v-for="(item,i) in Facilities" class="text-xxs">
<td v-for="(x,i) in item">{{x.description}}</td>
</tr>
</table>
</div>
</div>
</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>
<td colspan="3" class="td01">室外</td>
<td colspan="3" class="td01">屋内</td>
<td colspan="3" class="td01">蒸气浴</td>
</tr>
<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>
<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>
<td class="td02">混浴</td>
<td :colspan="itemsPerRow" class="td01 text-weight-bold">房间设施</td>
</tr>
<tr>
<td>{{bathRoom[0]}}</td>
<td>{{bathRoom[1]}}</td>
<td>{{bathRoom[2]}}</td>
<td>{{bathRoom[3]}}</td>
<td>{{bathRoom[4]}}</td>
<td>{{bathRoom[5]}}</td>
<td>{{bathRoom[6]}}</td>
<td>{{bathRoom[7]}}</td>
<td>{{bathRoom[8]}}</td>
<tr v-for="(item,i) in RoomFacilities" class="text-xxs">
<td v-for="(x,i) in item">{{x.description}}</td>
</tr>
</table>
</div>
</div>
<div class="q-pt-sm row wrap">
<q-chip size="9px" clickable
text-color="white"
color="dark" square v-for="(x,i) in HotSpring" :key="i">{{x}}</q-chip>
</div>
</div>
</div>
</div>
......@@ -950,6 +942,7 @@ import componentsMap from 'src/components/car/Map.vue';
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'
export default {
props: [],
components: {
......@@ -964,6 +957,7 @@ export default {
ImagePreview,
RoomCard,
OrderPreview,
destination,
},
data() {
return {
......@@ -1124,6 +1118,8 @@ export default {
childrenAgeList: [], //儿童年龄下拉
Facilities: [],//服务设施
RoomFacilities: [],//房型服务设施
itemsPerRow: 6,
CityCode: '',
};
},
watch: {
......@@ -1235,6 +1231,17 @@ export default {
document.getElementsByTagName("body")[0].style = "";
},
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){
// this.getDiDaPriceConfirmList(item)
let order = {
......@@ -1497,10 +1504,25 @@ export default {
})
this.dataList.images = this.images
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) {
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/>')
// this.hotelDetails.hotelDescription = []
......@@ -1563,6 +1585,9 @@ export default {
this.qMealTypeList = tempData.qMealTypeList;
this.qMealTypeList.unshift({MTypeName:'餐型(全部)'})
this.$q.loading.hide();
}else{
this.$q.loading.hide();
this.$message.error(res.data.message);
}
}, null)
},
......@@ -1630,7 +1655,7 @@ export default {
.hotel-details-table {
border: 1px solid #DCDCDC;
border-collapse: collapse;
width:680px;
/* width:680px; */
}
.hotel-details-table .td01 {
padding: 3px 15px;
......@@ -1648,11 +1673,10 @@ export default {
}
.hotel-details-table td {
width: 439px;
padding: 10px 20px;
/* padding: 10px 20px; */
vertical-align: middle;
text-align: center;
border: 1px solid #DCDCDC;
font-size: 14px;
box-sizing: border-box;
}
.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