Skip to content

B
bigwood
Commit 51ebd09e authored by youjie's avatar youjie
Browse files
Options

no message

parent e07d9883
Hide whitespace changes
Inline Side-by-side
Showing with 2336 additions and 4 deletions
src/api/scattered.ts 0 → 100644
View file @ 51ebd09e
import { HttpResponse } from '../@types'
import request from './request'
class HotelService {
//获取相似数据
static async GetHotelRoomsList(param:any): Promise<HttpResponse> {
return request('dmc_post_Get_GetJAPAN_RoomsList', param)
}
//
//获取酒店详情
static async GetHotelDetailScat(param:any): Promise<HttpResponse> {
return request('dmc_post_Get_GetJAPAN_HotelDetail', param)
}
// 获取散客酒店列表
static async GetJAPANHotelList(param:any):Promise<HttpResponse>{
param.reviewRatingUpperLimits=param.reviewRatingUpperLimits&&param.reviewRatingUpperLimits!=''?param.reviewRatingUpperLimits:0
param.reviewRatingLowerLimits=param.reviewRatingLowerLimits&&param.reviewRatingLowerLimits!=''?param.reviewRatingLowerLimits:0
param.searchMaxRate=param.searchMaxRate&&param.searchMaxRate!=''?param.searchMaxRate:0
param.searchMinRate=param.searchMinRate&&param.searchMinRate!=''?param.searchMinRate:0
return request('dmc_post_Get_GetJAPAN_HotelList',param)
}
}
export default HotelService
src/assets/svg/scattered/The.svg 0 → 100644
View file @ 51ebd09e
<?xml version="1.0" encoding="UTF-8"?>
<svg t="1670564176126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2186" width="1024" height="1024"><path d="M701.5 548.7c71.6-56.2 117.7-143.4 117.7-241.5C819.2 137.5 681.7 0 512 0S204.8 137.5 204.8 307.2c0 98.1 46.1 185.2 117.7 241.5C133.6 624 0 808.2 0 1024h1024c0-215.8-133.6-400-322.5-475.3z" fill="#9d9da6" p-id="2187"></path></svg>
\ No newline at end of file
src/components/hotel/list/hotelCard.vue
View file @ 51ebd09e
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="q-px-sm"> <div class="q-px-sm">
<img v-for="item in 5" class="q-mr-xs" width="15" height="11" src="../../../assets/images/hotelCard0.png" /> <img v-for="item in 5" class="q-mr-xs" width="15" height="11" src="../../../assets/images/hotelCard0.png" />
</div> </div>
<div class="q-px-sm row items-center justify-between nowrap absolute" style="left: 0;right: 0;bottom: 16px;"> <div class="q-px-sm row items-center justify-between no-wrap absolute" style="left: 0;right: 0;bottom: 16px;">
<div> <div>
<q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon> <q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
<span class="fz12 text-weight-bold text-grey-7">日本东京</span> <span class="fz12 text-weight-bold text-grey-7">日本东京</span>
......
src/components/hotel/list/hotelDetails.vue
View file @ 51ebd09e
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<a class="fz14 text-weight-bold text-blue q-ml-sm" :href="h.URL" target="_blank">{{ h.URL }}</a> <a class="fz14 text-weight-bold text-blue q-ml-sm" :href="h.URL" target="_blank">{{ h.URL }}</a>
</div> </div>
</div> </div>
<div class="q-py-lg nowrap col" :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }"> <div class="q-py-lg no-wrap col" :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }">
<div class="row rounded-borders relative-position" :class="{ 'col-6': $q.platform.is.desktop, 'height-320': $q.platform.is.mobile }" style="overflow: hidden" v-if="h.List"> <div class="row rounded-borders relative-position" :class="{ 'col-6': $q.platform.is.desktop, 'height-320': $q.platform.is.mobile }" style="overflow: hidden" v-if="h.List">
<div v-if="h.ChainBrand" class="f12 absolute-left bg-white" style="padding: 5px; bottom: unset; z-index: 1; border-bottom-right-radius: 4px"> <div v-if="h.ChainBrand" class="f12 absolute-left bg-white" style="padding: 5px; bottom: unset; z-index: 1; border-bottom-right-radius: 4px">
<div class="row items-center rounded-borders" style="overflow: hidden"> <div class="row items-center rounded-borders" style="overflow: hidden">
......
src/components/scattered/list/DetailsList.vue 0 → 100644
View file @ 51ebd09e
<template>
<div class="rounded-borders bg-white row items-center q-pb-md">
<q-field v-if="$q.platform.is.desktop" stack-label :label="$t('v101.scatteredDetails.ruzhuTime')+'/'+$t('v101.scatteredDetails.tuifangTime')" standout class="col-2" style="min-width: 200px" dense>
<div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape @range-end="dateRangeHandler"></q-date>
</q-popup-proxy>
</q-field>
<div class="row">
<q-select class="q-ml-lg" style="min-width: 90px;z-index: 99999;" unelevated v-model="room" dense :options="theRooms" emit-value option-label="name" option-value="id" map-options :label="$t('v101.scattered.kefang')" standout @update:model-value="getRoomList">
</q-select>
<q-btn unelevated class="bg-white hover q-px-xs q-py-sm q-ml-xs text-grey-6" icon="person">
<div class="text-dark q-ml-xs">
{{auditNum}}{{$t('v101.scattered.chengren')}}
<span class="q-px-sm">.</span>
<template v-if="childNum>0">{{childNum}}</template>
{{$t('v101.scattered.ertong')}}
</div>
<q-popup-proxy class="no-shadow absolute" style="z-index: 0;box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="isShowPop">
<q-card class="row wrap q-pa-md rounded-borders" style="max-width:697px;">
<div class="q-mr-md" v-for="(item,index) in search.searchroomGroup" :key="index" style="min-width: 150px;">
<div class="q-mb-md text-subtitle2">{{ $t('v101.scattered.kefang') }}{{index+1}}</div>
<div class="q-my-md">
<q-select v-model="item.numberOfAdults" dense :options="adultList" emit-value map-options :label="$t('v101.scattered.chengren')" standout @update:model-value="setPeopleNum"/>
</div>
<div class="q-my-md">
<q-select v-model="item.numberOfChildren" dense :options="childrenList" emit-value map-options :label="$t('v101.scattered.ertong')" standout @update:model-value="setPeopleNum"/>
</div>
</div>
</q-card>
</q-popup-proxy>
</q-btn>
</div>
<div class="q-pl-lg text-red-6 row items-center" style="position: relative;">
<q-icon class="absolute" style="left: 85px;top: 0;" name="information" size="18px"></q-icon>
<span class="q-pl-lg">{{ $t('v101.scatteredDetails.prompt') }}</span>
</div>
<div class="col"></div>
<q-btn color="primary" unelevated :label="$t('query')" @click="initHotel"/>
</div>
<div class="bg-light-blue-1 q-pa-md fz14 rounded-borders row items-center">
<div class="text-weight-bold">{{ $t('v101.scatteredDetails.fuheTJroom') }}</div>
</div>
<q-card class="q-my-md">
<template v-if="SimilarList.length!=0">
<div class="row" v-for="(item,index) in SimilarList" :key="index">
<div class="col-3 col row no-wrap justify-between q-pa-sm q-pr-lg" style="border-right: 1px solid #eeeeee;">
<!-- @click="showImageHandler" -->
<div class="col-6" style="height: 100px;">
<q-img :src="item.roomImageURL" style="height: 100px;" spinner-color="drk" spinner-size="20px" height="100%" mode="cover"/>
</div>
<div class="col column q-pl-xs">
<div class="text-right text-green q-pt-md">
{{getGradeType(item.gradeType)}}{{getRoomType(item.roomType)}}
</div>
<div class="row no-wrap justify-end q-pt-md text-right">
<span class="text-blue bg-blue-1 q-px-sm q-mr-sm" style="white-space: nowrap;">
<template v-if="item.smoking==0">{{$t('v101.scatteredDetails.jinyan')}}</template>
<template v-if="item.smoking==1">{{$t('v101.scatteredDetails.kexiyan')}}</template>
</span>
<span class="text-blue bg-blue-1 q-px-sm" style="white-space: nowrap;">
<template v-if="item.withBath==0">{{$t('v101.scatteredDetails.wuyushi')}}</template>
<template v-if="item.withBath==1">{{$t('v101.scatteredDetails.youyushi')}}</template>
</span>
</div>
</div>
</div>
<div class="col">
<div class="relative-position" v-for="(subItem,subIndex) in item.roomOptions" :key="subIndex">
<q-separator v-if="subIndex!=0"/>
<div class="col q-ml-lg q-pt-lg q-pb-md q-pr-md" >
<div class="col row items-center no-wrap q-pt-sm" >
<div class="absolute text-white q-px-lg" style="left: 0;top: 0;border-bottom-right-radius: 10px;"
:class="getMealType(subItem.meals)==ScatMeaList[0].name?'HD_Black':'HD_Green'">{{getMealType(subItem.meals)}}</div>
<div class="col-2 text-grey-6">{{subItem.bookingDeadline}}</div>
<div class="col-3 q-pl-lg">{{subItem.minNights}}</div>
<div class="row justify-between text-red q-pl-lg">
<div class="column">
<span>{{$t('v101.scatteredDetails.Time1')}}</span>
<span>{{subItem['check-inStartTime']}}</span>
</div>
<div class="column q-pl-md">
<span>{{$t('v101.scatteredDetails.Time2')}}</span>
<span>{{subItem['finalCheck-inTime']}}</span>
</div>
<div class="column q-pl-md">
<span>{{$t('v101.scatteredDetails.Time3')}}</span>
<span>{{subItem['finalCheck-outTime']}}</span>
</div>
</div>
<div class="col row no-wrap justify-end items-center q-pl-lg">
<div class="row no-wrap items-center q-pr-lg">
<span class="text-grey-6">円</span>
<span class="fz20 text-red q-px-sm">{{getPrice(subItem.chargeableRateInfoPerPersonForANightBySetCurrency)}}</span>
<span class="text-grey-6">/{{$t('v101.scatteredDetails.renju')}}</span>
</div>
<div class="q-pt-xs">
<q-btn class="bg-green-6 hover q-px-md q-py-xs q-ml-xs text-white" @click="goUrl('/scattered/HotelSure',subItem)" :label="$t('v101.scatteredDetails.yuyue')"/>
</div>
</div>
</div>
<div class="q-pt-sm">
<span class="text-green fz12 q-px-sm" style="border:1px solid green">{{subItem.minNights}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<div v-else class="col q-pa-lg text-center">
{{$t('noneData')}}
</div>
</q-card>
</template>
<script lang="ts">
import { useI18n } from 'vue-i18n'
import svgIcon from '../../global/svg-icon.vue'
import { computed, inject, provide, reactive, ref, toRefs, defineComponent, onMounted, watch } from 'vue'
import HotelService from '../../../api/scattered'
import message from '../../../utils/message'
import { ApiResult } from '../../../@types/enumHelper'
import { date } from 'quasar'
import { HotelRate,HotelArea, useHotel } from '../../../utils/hotelRate'
import { useQuasar } from 'quasar'
import useScrollModule from '../../../module/scrollbar/scrollModule'
import { DirtionmaryHelper } from '../../../config/dictionary'
import { moneyFormat } from '../../../utils/tools'
export default defineComponent({
components: { svgIcon },
setup() {
const $q = useQuasar()
const qDateProxy = ref(null) as any
const qNameProxy = ref(null) as any
const { locale, t } = useI18n()
const data = reactive({
scrollStyle: {} as any,
Areas: [] as Array<HotelArea>,//区域
cascader: {
addressValue: null
} as any,
dateRange: {} as any,//当前日期
dateRangeFormat: '',//可选日期
loading: false,
canHide: false,//更多筛选
theRooms: [] as Array<Number>,//客房下拉
room: 1,//客房数
auditNum: 1,
childNum: null as any,
adultList: [] as Array<Number>,//成人下拉
childrenList: [] as Array<Number>,//儿童下拉
isShowPop: false,//房间
SimilarList: [] as Array<any>,
JapanIncrease: 0,//除以
RoomTypeList: [] as Array<HotelArea>,//房间等级
scatteredRoomTypeList: [] as Array<HotelArea>,//散客房间类型
ScatMeaList: [] as Array<HotelArea>//散客房间餐型
})
for(let i=1;i<11;i++){
data.theRooms.push(i)
}
for(let i=1;i<10;i++){
data.adultList.push(i)
}
for(let i=0;i<6;i++){
data.childrenList.push(i)
}
data.scrollStyle = useScrollModule().scrollStyle
const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
search.searchroomGroup.push({
roomNum: 1,
numberOfAdults: 1,
numberOfChildren: 0
})
data.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY/MM/DD')
data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
data.dateRangeFormat = `${data.dateRange.from} - ${data.dateRange.to}`
search.arrivalDate = data.dateRange.from
search.departureDate = data.dateRange.to
data.RoomTypeList = useHotel.getHotelRoomType()
data.scatteredRoomTypeList = useHotel.getHotelScatRoom()
data.ScatMeaList = useHotel.getHotelScatMeal()
const methods = {
goUrl(url:stringify,row: {}){
url = `${url}/${search.hotelId}/${row.roomOptionCd}`
window.open(url, '_blank')
},
getPrice(price){
return Math.ceil(price / data.JapanIncrease)
},
//获取餐
getMealType(meals) {
if (meals != "") {
let mealType = meals.split(",");
if (mealType[0] == 0 && mealType[2] == 0) {
return data.ScatMeaList[0].name;
}
if (mealType[0] == 1 && mealType[2] == 1) {
return data.ScatMeaList[1].name;
}
if (mealType[0] == 1 && mealType[2] == 0) {
return data.ScatMeaList[2].name;
}
if (mealType[0] == 0 && mealType[2] == 1) {
return data.ScatMeaList[30].name;
}
}
},
//获取房间等级
getRoomType(type) {
let gradeType = "";
switch (parseInt(type)) {
case 1:
gradeType = data.scatteredRoomTypeList[0].name;
break;
case 2:
gradeType = data.scatteredRoomTypeList[1].name;
break;
case 3:
gradeType = data.scatteredRoomTypeList[2].name;
break;
case 4:
gradeType = data.scatteredRoomTypeList[3].name;
break;
case 5:
gradeType = data.scatteredRoomTypeList[4].name;
break;
case 6:
gradeType = data.scatteredRoomTypeList[5].name;
break;
case 7:
gradeType = data.scatteredRoomTypeList[6].name;
break;
case 8:
gradeType = data.scatteredRoomTypeList[7].name;
break;
case 9:
gradeType = data.scatteredRoomTypeList[8].name;
break;
}
return gradeType;
},
//获取房型
getGradeType(type) {
let gradeType = "";
switch (parseInt(type)) {
case 1:
gradeType = data.RoomTypeList[0].name;
break;
case 2:
gradeType = data.RoomTypeList[1].name;
break;
case 3:
gradeType = data.RoomTypeList[2].name;
break;
case 4:
gradeType = data.RoomTypeList[3].name;
break;
case 5:
gradeType = data.RoomTypeList[4].name;
break;
case 6:
gradeType = data.RoomTypeList[5].name;
break;
}
return gradeType;
},
initHotel() {
data.loading = true
let param = Object.assign(search)
HotelService.GetHotelRoomsList(param)
.then(r => {
data.SimilarList = [] as Array<any>
if (r.data.resultCode == ApiResult.SUCCESS) {
if (
Object.prototype.toString.call(r.data.data.roomRateDetails) ==
"[object Object]"
) {
data.SimilarList.push(r.data.data.roomRateDetails);
} else {
data.SimilarList = r.data.data.roomRateDetails;
}
data.SimilarList.forEach(x => {
if (
Object.prototype.toString.call(x.roomOptions) ==
"[object Object]"
) {
let arr = [];
arr.push(x.roomOptions);
x.roomOptions = arr;
}
});
data.JapanIncrease = r.data.data.JapanIncrease;
}
}).catch(e => {
data.loading = false
message.errorMsg(e.message)
})
},
//设置房间里面成人数改变总成人数和儿童数
setPeopleNum() {
data.auditNum = 0;
data.childNum = 0;
search.searchroomGroup.forEach(x => {
data.auditNum += x.numberOfAdults;
data.childNum += x.numberOfChildren;
})
if (data.auditNum == null || data.auditNum == undefined) {
data.auditNum = 1
}
if (data.childNum == null || data.childNum == undefined) {
data.childNum = 1
}
},
//房间数改变
getRoomList(roomNum) {
let length = search.searchroomGroup.length
if(roomNum>length){
for (let i = 1; i <= roomNum-length; i++) {
let obj = {
roomNum: i,
numberOfAdults: 1,
numberOfChildren: 0
}
search.searchroomGroup.push(obj);
}
}else{
search.searchroomGroup = search.searchroomGroup.filter((x:any,i:Number)=>{
if(roomNum>i)return x
})
}
data.auditNum = 0;
data.childNum = 0;
search.searchroomGroup.forEach(x => {
data.auditNum += x.numberOfAdults;
data.childNum += x.numberOfChildren;
})
data.isShowPop = true
search.auditNum = data.auditNum;
search.childNum = data.childNum;
},
dateRangeHandler(e: any) {
search.arrivalDate = `${e.from.year}/${e.from.month}/${e.from.day}`
if(search.arrivalDate!=`${e.to.year}/${e.to.month}/${e.to.day}`){
search.departureDate = `${e.to.year}/${e.to.month}/${e.to.day}`
data.dateRangeFormat = `${search.arrivalDate} - ${search.departureDate} `
if (qDateProxy.value) qDateProxy.value.hide()
}else{
// message.errorMsg(`${t('v101.scatteredDetails.timeTis')}`)
}
},
optionsFn(cd: any) {
return cd >= date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
},
setData(){
let d = {
searchroomGroup: search.searchroomGroup,
room: data.room,
auditNum: data.auditNum,
childNum: data.childNum,
arrivalDate: search.arrivalDate,
departureDate: search.departureDate,
}
localStorage.setItem(DirtionmaryHelper.SCATTERED_HOTEL_DATE,JSON.stringify(d))
}
}
const searchCnt = computed(() => {
let setCnt = 0
return setCnt
})
watch(search.searchroomGroup, (n, o) => {
methods.setData()
})
watch(data.room, (n, o) => {
methods.setData()
})
watch(data.auditNum, (n, o) => {
methods.setData()
})
watch(data.childNum, (n, o) => {
methods.setData()
})
onMounted(()=>{
methods.initHotel()
methods.setData()
})
return {
...toRefs(data),
...methods,
qDateProxy,
qNameProxy,
searchCnt,
search,
}
}
})
</script>
<style>
.HD_Black{
background-color: black;
}
.HD_Green{
background-color: green;
}
</style>
\ No newline at end of file
src/components/scattered/list/ListHeader.vue 0 → 100644
View file @ 51ebd09e
<template>
<div class="rounded-borders bg-white row items-center q-pa-md">
<q-select style="min-width: 190px;" unelevated v-model="placeKeyWords" dense :options="Areas" emit-value option-label="name" option-value="name" map-options :label="$t('hotel.area')" standout />
<q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2" style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape @range-end="dateRangeHandler"></q-date>
</q-popup-proxy>
</q-field>
<div class="row">
<q-select class="q-ml-lg" style="min-width: 90px;z-index: 99999;" unelevated v-model="room" dense :options="theRooms" emit-value option-label="name" option-value="id" map-options :label="$t('v101.scattered.kefang')" standout @update:model-value="getRoomList">
</q-select>
<q-btn unelevated class="bg-white hover q-px-xs q-py-sm q-ml-xs text-grey-6" icon="person">
<div class="text-dark q-ml-xs">
{{auditNum}}{{$t('v101.scattered.chengren')}}
<span class="q-px-sm">.</span>
<template v-if="childNum>0">{{childNum}}</template>
{{$t('v101.scattered.ertong')}}
</div>
<q-popup-proxy class="no-shadow absolute" style="z-index: 0;box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="isShowPop">
<q-card class="row wrap q-pa-md rounded-borders" style="max-width:697px;">
<div class="q-mr-md" v-for="(item,index) in search.searchroomGroup" :key="index" style="min-width: 150px;">
<div class="q-mb-md text-subtitle2">{{ $t('v101.scattered.kefang') }}{{index+1}}</div>
<div class="q-my-md">
<q-select v-model="item.numberOfAdults" dense :options="adultList" emit-value map-options :label="$t('v101.scattered.chengren')" standout @update:model-value="setPeopleNum"/>
</div>
<div class="q-my-md">
<q-select v-model="item.numberOfChildren" dense :options="childrenList" emit-value map-options :label="$t('v101.scattered.ertong')" standout @update:model-value="setPeopleNum"/>
</div>
</div>
</q-card>
</q-popup-proxy>
</q-btn>
</div>
<div class="col"></div>
<!-- <q-btn class="hover q-mr-md" v-for="(item,index) in 2"
:class="{'bg-blue text-white':search.sort==index+1,'bg-grey-3':search.sort!=index+1}" @click="search.sort=index+1">
{{index+1==1?$t('v101.scattered.anrenqi'):$t('v101.scattered.anjiage')}}
</q-btn> -->
<q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
<q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt" v-if="searchCnt > 0" />
<svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
<q-tooltip>{{ $t('morequery') }}</q-tooltip>
<q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="canHide">
<q-card class="q-pa-md rounded-borders" style="width: 300px">
<div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
<div class="q-my-md">
<q-select v-model="search.searchHotelCategory" dense :options="HotelLiveRates" emit-value option-label="name" option-value="id" clearable multiple map-options :label="$t('v101.scattered.zhusutype')" standout />
</div>
<div class="q-my-md row items-center">
<q-input v-model="search.searchMinRate" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('hotel.minPrice')" />
<q-input v-model="search.searchMaxRate" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" />
</div>
<div class="q-my-md">
<q-select v-model="search.searchRoomType" dense :options="HotelRoomTypes" emit-value option-label="name" option-value="id" clearable multiple map-options :label="$t('v101.scattered.fangxingtype')" standout />
</div>
<div class="q-my-md">
<q-select v-model="search.searchMealType" dense :options="HotelMealTypes" emit-value option-label="name" option-value="id" clearable multiple map-options :label="$t('v101.scattered.canxingtype')" standout />
</div>
<div class="q-my-md">
<q-select v-model="search.searchHotelFeatures" dense :options="HotelConceptTypes" emit-value option-label="name" option-value="id" clearable multiple map-options :label="$t('v101.scattered.liniantype')" standout />
</div>
<div class="q-my-md row items-center">
<q-input v-model="search.reviewRatingLowerLimits" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('v101.scattered.minpingfen')" />
<q-input v-model="search.reviewRatingUpperLimits" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('v101.scattered.maxpingfen')" />
</div>
<div class="q-my-md">
<q-input v-model="keyWords" class="col" reverse-fill-mask dense type="text" standout :label="$t('v101.scattered.jiudianName')" />
</div>
</q-card>
</q-popup-proxy>
</q-btn>
<q-btn color="primary" unelevated :label="$t('query')" />
</div>
</template>
<script lang="ts">
import { useI18n } from 'vue-i18n'
import svgIcon from '../../global/svg-icon.vue'
import { computed, inject, provide, reactive, ref, toRefs, defineComponent, onMounted, watch } from 'vue'
import HotelService from '../../../api/hotel'
import message from '../../../utils/message'
import { ApiResult } from '../../../@types/enumHelper'
import { CascaderOption,NCascader,NSelect } from 'naive-ui'
import { date } from 'quasar'
import { HotelRate,HotelArea, useHotel } from '../../../utils/hotelRate'
import { useQuasar } from 'quasar'
import useScrollModule from '../../../module/scrollbar/scrollModule'
// import { dateDiffer } from '../../../utils/tools'
import ListCar from "./ListCar.vue"
import { DirtionmaryHelper } from '../../../config/dictionary'
export default defineComponent({
components: { svgIcon, ListCar, NCascader, NSelect },
setup() {
const $q = useQuasar()
const qDateProxy = ref(null) as any
const qNameProxy = ref(null) as any
const { locale, t } = useI18n()
const data = reactive({
scrollStyle: {} as any,
Areas: [] as Array<HotelArea>,//区域
cascader: {
addressValue: null
} as any,
dateRange: {} as any,//当前日期
dateRangeFormat: '',//可选日期
loading: false,
hotelsRates: [] as Array<HotelRate>,
canHide: false,//更多筛选
theRooms: [] as Array<Number>,//客房下拉
room: 1,//客房数
auditNum: 1,
childNum: null as any,
adultList: [] as Array<Number>,//成人下拉
childrenList: [] as Array<Number>,//儿童下拉
isShowPop: false,//房间
HotelLiveRates: [] as Array<HotelRate>,//住宿类型
HotelRoomTypes: [] as Array<HotelRate>,//房类型
HotelMealTypes: [] as Array<HotelRate>,//餐型
HotelConceptTypes: [] as Array<HotelRate>,//理念
keyWords: '' as stringify,
placeKeyWords: t('v101.scattered.HotelArea1'),
})
for(let i=1;i<11;i++){
data.theRooms.push(i)
}
for(let i=1;i<10;i++){
data.adultList.push(i)
}
for(let i=0;i<6;i++){
data.childrenList.push(i)
}
data.scrollStyle = useScrollModule().scrollStyle
const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
search.searchroomGroup.push({
roomNum: 1,
numberOfAdults: 1,
numberOfChildren: 0
})
data.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY/MM/DD')
data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
data.dateRangeFormat = `${data.dateRange.from} - ${data.dateRange.to}`
search.arrivalDate = data.dateRange.from
search.departureDate = data.dateRange.to
data.hotelsRates = useHotel.getHotelRate()
data.HotelLiveRates = useHotel.getAccommodationType()
data.Areas = useHotel.getHotelArea()
data.HotelRoomTypes = useHotel.getHotelRoom()
data.HotelMealTypes = useHotel.getHotelMeal()
data.HotelConceptTypes = useHotel.getHotelConcept()
if (data.keyWords == '') {
search.freewordType = 1;
search.freeword = data.placeKeyWords;
} else {
search.freewordType = 2;
search.freeword = data.keyWords;
}
const methods = {
//设置房间里面成人数改变总成人数和儿童数
setPeopleNum() {
data.auditNum = 0;
data.childNum = 0;
search.searchroomGroup.forEach(x => {
data.auditNum += x.numberOfAdults;
data.childNum += x.numberOfChildren;
})
if (data.auditNum == null || data.auditNum == undefined) {
data.auditNum = 1
}
if (data.childNum == null || data.childNum == undefined) {
data.childNum = 1
}
},
//房间数改变
getRoomList(roomNum) {
let length = search.searchroomGroup.length
if(roomNum>length){
for (let i = 1; i <= roomNum-length; i++) {
let obj = {
roomNum: i,
numberOfAdults: 1,
numberOfChildren: 0
}
search.searchroomGroup.push(obj);
}
}else{
search.searchroomGroup = search.searchroomGroup.filter((x:any,i:Number)=>{
if(roomNum>i)return x
})
}
data.auditNum = 0;
data.childNum = 0;
search.searchroomGroup.forEach(x => {
data.auditNum += x.numberOfAdults;
data.childNum += x.numberOfChildren;
})
data.isShowPop = true
search.auditNum = data.auditNum;
search.childNum = data.childNum;
},
dateRangeHandler(e: any) {
search.arrivalDate = `${e.from.year}/${e.from.month}/${e.from.day}`
search.departureDate = `${e.to.year}/${e.to.month}/${e.to.day} `
data.dateRangeFormat = `${search.arrivalDate} - ${search.departureDate} `
if (qDateProxy.value) qDateProxy.value.hide()
},
optionsFn(cd: any) {
return cd >= date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
},
setData(){
let d = {
searchroomGroup: search.searchroomGroup,
room: data.room,
auditNum: data.auditNum,
childNum: data.childNum,
arrivalDate: search.arrivalDate,
departureDate: search.departureDate,
}
localStorage.setItem(DirtionmaryHelper.SCATTERED_HOTEL_DATE,JSON.stringify(d))
}
}
const searchCnt = computed(() => {
let setCnt = 0
if (data.keyWords) setCnt++
if (search.reviewRatingUpperLimits) setCnt++
if (search.reviewRatingLowerLimits) setCnt++
if (search.searchHotelCategory&&search.searchHotelCategory.length>0) setCnt++
if (search.searchHotelFeatures&&search.searchHotelFeatures.length>0) setCnt++
if (search.searchRoomType&&search.searchRoomType.length>0) setCnt++
if (search.searchMealType&&search.searchMealType.length>0) setCnt++
if (search.searchMinRate) setCnt++
if (search.searchMaxRate) setCnt++
if (data.keyWords == '') {
search.freewordType = 1;
search.freeword = data.placeKeyWords;
} else {
search.freewordType = 2;
search.freeword = data.keyWords;
}
return setCnt
})
watch(search.searchroomGroup, (n, o) => {
methods.setData()
})
watch(data.room, (n, o) => {
methods.setData()
})
watch(data.auditNum, (n, o) => {
methods.setData()
})
watch(data.childNum, (n, o) => {
methods.setData()
})
onMounted(()=>{
methods.setData()
})
return {
...toRefs(data),
...methods,
qDateProxy,
qNameProxy,
searchCnt,
search,
}
}
})
</script>
<style>
</style>
src/components/scattered/list/ListTable.vue 0 → 100644
View file @ 51ebd09e
<template>
<div class="full-height column hotel-list">
<q-table v-if="$q.platform.is.desktop" :loading="loading" :rows="hotels" :loading-label="$t('loading')" class="col sticky-header-column-table" flat :pagination="pages" :no-data-label="$t('noneData')" :columns="cols">
<template v-slot:top>
<div class="row full-width">
<div class="col"></div>
<q-btn class="hover q-mr-md" v-for="(item,index) in 2"
:class="{'bg-blue text-white':pages.sort==index+1,'bg-grey-3':pages.sort!=index+1}" @click="pages.sort=index+1,initHotels()">
{{index+1==1?$t('v101.scattered.anrenqi'):$t('v101.scattered.anjiage')}}
</q-btn>
</div>
</template>
<template v-slot:body-cell-hotelName="props">
<q-td class="cursor-pointer" :props="props" @click="goUrl('/scattered/hotelDetails',props.row)">
<span>{{props.row.hotelName}}</span>
</q-td>
</template>
<template v-slot:body-cell-reviewRating="props">
<q-td :props="props">
<div class="row no-wrap items-center">
<q-rating v-model="props.row.reviewRating" size="1.5em" color="orange" :max="props.row.reviewRating" readonly />
<span class="q-ml-xs" v-if="props.row.reviewRating>0">{{props.row.reviewRating}}</span>
</div>
</q-td>
</template>
<template v-slot:body-cell-lowrateBySetCurrency="props">
<q-td :props="props">
<span class="q-ml-xs text-orange text-weight-bold fz18" >
円
<template v-if="props.row.type==1">
{{getPrice(props.row.lowrateBySetCurrency)}}
</template>
<template v-else>
{{props.row.lowrateBySetCurrency}}
</template>
</span>
<span class="text-grey-8 q-pl-xs">{{$t('v101.scattered.qi')}}</span>
</q-td>
</template>
<template v-slot:body-cell-type="props">
<q-td :props="props">
<span class="q-ml-xs text-green-4 fz14" >
{{props.row.type==2?$t('v101.scattered.ziying'):$t('v101.scattered.jalan')}}
</span>
</q-td>
</template>
<template v-slot:body-cell-hotelFeaturesMask="props">
<q-td :props="props">
<span v-for="(subItem,index) in props.row.hotelFeaturesMask" :key="index">
<span class="rounded-borders bg-blue-1 text-blue q-mr-xs q-px-sm q-py-xs" v-if="subItem">
{{subItem==1?themeList[index].name:''}}
</span>
</span>
</q-td>
</template>
<template v-slot:bottom>
<q-pagination class="full-width justify-end" v-model="pages.displayFrom" color="primary" :max="pageCount" :input="true" @update:model-value="changePageHandler" />
</template>
</q-table>
</div>
</template>
<script lang="ts">
import { useRouter } from 'vue-router'
import HotelService from '../../../api/scattered'
import { DirtionmaryHelper } from '../../../config/dictionary'
import message from '../../../utils/message'
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
import { date,useQuasar } from 'quasar'
import { useI18n } from 'vue-i18n'
import { HotelArea, useHotel } from '../../../utils/hotelRate'
export default defineComponent({
components: { },
name: 'list-table',
setup() {
const $q=useQuasar()
const { t } = useI18n()
const search = inject(DirtionmaryHelper.HOTEL_QUERY_PARAM) as any
const $router = useRouter()
watch(search, (n, o) => {
if (data.loading) return
search.displayFrom = 1
methods.initHotels()
})
const data = reactive({
groupBookingFlg: '' as any,
JapanIncrease: '' as any,
travelLngLat: [] as Array<any>,//地图坐标
themeList: [] as Array<HotelArea>,
hotels: [] as Array<any>,
loading: false,
cols: [
{ name: 'hotelName', label: t('v101.scattered.titleHeard1'), align: 'left' },
{ name: 'reviewRating', label: t('v101.scattered.titleHeard2'), field: (row: any) => (row.reviewRating), align: 'left' },
{ name: 'lowrateBySetCurrency', label: t('v101.scattered.titleHeard3'), align: 'left' },
{ name: 'type', label: t('v101.scattered.titleHeard4'), field: (row: any) => row.type==2?t('v101.scattered.ziying'):t('v101.scattered.jalan'), align: 'left' },
{ name: 'hotelFeaturesMask', label: t('v101.scattered.titleHeard5'), align: 'left' },
{ name: 'address', label: t('v101.scattered.titleHeard6'), field: (row: any) => (row.address), align: 'left' },
] as any,
pages: {
displayFrom: 1,//页数
numberOfResults: 12,
rowsPerPage: 15,
sort: 1
},
pageCount: 0,
pageTitle: '' as (string | undefined),
mobileCols:[
],
showPriceList:false,
queryHotelObj:{},
orderSubmitObj:{} as any,
orderSubmitItemObj:{} as any,
showOrderPreview: false,
showHotelDetailId: 0,
})
data.themeList = useHotel.getHotelTheme()
console.log(data.themeList,'-----')
data.pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY)
const methods = {
initHotels() {
data.loading = true
data.hotels = []
let dataList = [];
data.travelLngLat = [];
let param = Object.assign(data.pages, search)
HotelService.GetJAPANHotelList(param)
.then(r => {
if (r.data.data.parmResult && r.data.data.parmResult.hotelSummary) {
dataList = r.data.data.parmResult.hotelSummary;
}
var ourHotelList = r.data.data.ourHotelList;
if (ourHotelList && ourHotelList.length > 0) {
ourHotelList.forEach(x => {
x.type = 2
})
}
if (dataList && dataList.length > 0) {
//获取酒店坐标
dataList.forEach(x => {
x.reviewRating = parseFloat(x.reviewRating);
x.lowrateBySetCurrency = parseFloat(x.lowrateBySetCurrency);
let obj = {
lat: x.latitudeW,
lng: x.longitudeW,
name: x.hotelName
}
data.travelLngLat.push(obj);
x.type = 1
})
}
data.hotels = ourHotelList.concat(dataList);
data.hotels.forEach(x=>{
if(isNaN(x.reviewRating)){
x.reviewRating=0
}
x.hotelFeaturesMask = x.hotelFeaturesMask.split(',')
})
//按价格升序
if(data.pages.sort==2){
data.hotels.sort(methods.getSortFun('asc', 'lowrateBySetCurrency'));
}
//按照星级降序
if(data.pages.sort==1){
data.hotels.sort(methods.getSortFun('desc', 'reviewRating'));
}
let jalanTotalCount = 0
if (r.data.data.parmResult && r.data.data.parmResult.numberOfResultMatched) {
jalanTotalCount = r.data.data.parmResult.numberOfResultMatched;
}
let ourHotelTotalCount = 0;
if (ourHotelList && ourHotelList.length > 0) {
ourHotelTotalCount = ourHotelList[0].totalHotelCount;
}
let totalCount = Number(jalanTotalCount) + Number(ourHotelTotalCount);
data.pageCount = r.data.data.parmResult.numberOfResultMatched
data.groupBookingFlg = r.data.data.parmResult.groupBookingFlg;
data.JapanIncrease = r.data.data.parmResult.JapanIncrease;
data.loading = false
})
.catch(e => {
data.loading = false
})
},
//数组排序
getSortFun(order, sortBy) {
var ordAlpah = (order == 'asc') ? '>' : '<';
var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');
return sortFun;
},
//获取价格
getPrice(price) {
return Math.ceil(price / data.JapanIncrease);
},
changePageHandler(n: any) {
data.pages.displayFrom = n
methods.initHotels()
},
showHotelDetailHandler(hotelId:number){
data.showHotelDetailId=hotelId
},
goUrl(url:string,row: {}){
url = `${url}/${row.hotelId}/${data.groupBookingFlg}/${row.type==1?methods.getPrice(row.lowrateBySetCurrency):row.lowrateBySetCurrency}`
window.open(url, '_blank')
// $router.push({ path:url })
},
}
methods.initHotels()
return { ...toRefs(data), ...methods }
}
})
</script>
<style>
</style>
src/i18n/zh-TW/index.ts
View file @ 51ebd09e
import { HotelType } from './../../@types/index'; import { HotelType, RoomType } from './../../@types/index';
export default { export default {
//#region ending v1.0.0 //#region ending v1.0.0
failed: '執行失敗', failed: '執行失敗',
...@@ -653,7 +653,39 @@ export default { ...@@ -653,7 +653,39 @@ export default {
ruzhuTime: '入住時間', ruzhuTime: '入住時間',
tuifangTime: '退房時間', tuifangTime: '退房時間',
timeTis: '退房時間必須大於當前時間', timeTis: '退房時間必須大於當前時間',
prompt: '超過13歲視為成人處理' prompt: '超過13歲視為成人處理',
HotelMeal1: '無餐',
HotelMeal2: '含早餐',
HotelMeal3: '含晚餐',
HotelMeal4: '包含早餐.晚餐',
RoomType1: '標準',
RoomType2: '普通',
RoomType3: '經濟',
RoomType4: '精品',
RoomType5: '豪華',
RoomType6: '套房',
HotelRoom1: '單人間',
HotelRoom2: '雙人間',
HotelRoom3: '大床房',
HotelRoom4: '三人間',
HotelRoom5: '四人間',
HotelRoom6: '日式房',
HotelRoom7: '日式+西式混合',
HotelRoom8: '大床房(小型)',
HotelRoom9: '未知房型',
jinyan: '禁煙',
kexiyan: '可吸煙',
wuyushi: '無浴室',
youyushi: '有浴室',
iscan1: '無餐',
iscan2: '含早晚餐',
iscan3: '含早餐',
iscan4: '含晚餐',
Time1: '入住時間',
Time2: '最遲入住時間',
Time3: '最遲退房時間',
renju: '人均',
yuyue: '預約',
}, },
} }
......
src/pages/scattered/HotelList.vue 0 → 100644
View file @ 51ebd09e
<template>
<div class="fix-height-subpage column no-wrap q-pa-md">
<list-header></list-header>
<div class="col q-mt-md" :class="{'light-shadow q-pa-md bg-white rounded-border':$q.platform.is.desktop}">
<list-table></list-table>
</div>
<hotel-tips></hotel-tips>
</div>
</template>
<script lang="ts">
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import svgIcon from '../../components/global/svg-icon.vue'
import { defineComponent, inject, provide, reactive, ref, toRefs } from 'vue'
import { DirtionmaryHelper } from '../../config/dictionary'
import ListHeader from '../../components/scattered/list/ListHeader.vue'
import ListTable from '../../components/scattered/list/ListTable.vue'
import HotelTips from '../../components/hotel/list/HotelTips.vue'
import { date } from 'quasar'
export default defineComponent({
components: { svgIcon, ListHeader, ListTable, HotelTips },
setup() {
const data = reactive({})
let { setTitle } = useMetaModule()
const { locale, t } = useI18n()
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
pageTitle.value = t('hotel.pageTitle')
setTitle(pageTitle.value)
const search = reactive({
arrivalDate: '',//开始日期
departureDate: '',//结束日期
searchroomGroup: [] as Array<ang>,//客房数
searchHotelIdList: [],
freeword: '',//地区名字 酒店名字
freewordType: 1, //类型 1，地区，2-酒店名称
reviewRatingUpperLimits: '',//最大评分数
reviewRatingLowerLimits: '',//最小评分数
searchHotelCategory: [], //酒店分类
searchHotelFeatures: [], //酒店特征
searchRoomType: [], //类型的房间
searchMealType: [], //饮食条件搜索
searchMinRate: '', //最小金额
searchMaxRate: '', //最大金额
})
provide(DirtionmaryHelper.HOTEL_QUERY_PARAM, search)
const menu=inject(DirtionmaryHelper.MENU_KEYS) as any
menu.value=14
const methods = {}
return {
...toRefs(data),
...methods
}
}
})
</script>
<style></style>
src/pages/scattered/HotelSure.vue 0 → 100644
View file @ 51ebd09e
<template>
<div class="q-pa-lg">
<div style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);margin: auto;" :style="{'width':$q.platform.is.desktop?'70vw':'100vw'}">
<div class="bg-white rounded-border q-mb-md q-px-lg q-py-md">
<div class="row items-center text-orange-6">
<q-btn class="bg-orange-6 text-white" round size="sm" icon="person" />
<!-- <q-icon class="absolute" style="left: 0;top: 5px;width: inherit;" name="person" size="18px"></q-icon> -->
<span class="fz18 q-pl-lg">超过13岁视为成人处理</span>
</div>
<div class="row items-center text-green-6 q-mt-xs q-pt-sm">
<q-btn class="bg-green-6 text-white" round size="sm" icon="wallet" />
<span class="fz18 q-pl-lg">预定成功后房间将为您整晚保留</span>
</div>
</div>
<div class="col row justify-between bg-white rounded-border q-mb-md q-pa-lg">
<div class="col row">
<div class="col-6">
<q-img class="q-mr-lg" src="../../assets/images/logo.png" style="height: auto;width: 80px;" spinner-color="drk" spinner-size="20px" mode="cover"/>
</div>
<div class="col-6 column">
<div class="text-red fz18 text-weight-bold">酒店名称</div>
<div class="q-pt-xs">
<q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
<span class="col fz14 text-weight-bold text-blick">地名</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">房型</span>
<span class="text-grey-9 q-pr-lg">
<!-- {{getGradeType(dataList.roomRateDetails.gradeType)}}{{getRoomType(dataList.roomRateDetails.roomType)}} -->
</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">吸烟</span>
<span class="text-grey-9">禁烟</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">厕所</span>
<span class="text-grey-9">无</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6 q-pr-lg">露天客房</span>
<span class="text-grey-9">无</span>
</div>
</div>
</div>
<div class="column q-pl-lg col-4">
<div class="text-red fz18 text-weight-bold">订单总额</div>
<div class="q-pt-md">
<div>
<span class="text-grey-6">円</span>
<span class="text-red fz16 text-weight-bold q-pl-lg">10940</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6">优惠</span>
<span class="text-red fz16 text-weight-bold q-pl-lg">0</span>
</div>
<div class="q-pt-xs">
<span class="text-grey-6">实付</span>
<span class="text-h6 text-red text-weight-bold q-pl-lg">564</span>
</div>
</div>
</div>
</div>
<div class="col column bg-white rounded-border q-mb-md">
<div class="bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center text-weight-bold">
预定信息
</div>
<div class="q-pa-lg column">
<div class="row items-center q-mb-md">
<span class="text-grey-6">房型信息</span>
<div class="q-pl-lg">
<span class="q-pr-lg"></span>
</div>
</div>
<div class="row items-center q-mb-md">
<span class="text-grey-6">入住人数</span>
<div class="q-pl-lg"></div>
</div>
<div class="row items-center q-mb-md">
<span class="text-grey-6">入住日期</span>
<div class="q-pl-lg row">
<div class="row items-center">
<q-field v-if="$q.platform.is.desktop" stack-label label="入住时间" standout class="col-2" style="min-width: 200px" dense>
<div class="self-center full-width no-outline" tabindex="0">
{{dateRange}}
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="dateRange" mask="YYYY/MM/DD" :options="optionsFn" @range-end="dateRangeHandler"></q-date>
</q-popup-proxy>
</q-field>
<span class="q-ml-md">周六</span>
<div class="q-ml-sm text-grey-6">
<span>16:00</span>
<span class="q-ml-sm">之后</span>
</div>
</div>
<div class="row items-center q-px-md"><q-separator class=" q-px-sm bg-dark"/></div>
<div class="row items-center">
<q-field v-if="$q.platform.is.desktop" stack-label label="入住时间" standout class="col-2" style="min-width: 200px" dense>
<div class="self-center full-width no-outline" tabindex="0">
{{dateRange}}
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="dateRange" mask="YYYY/MM/DD" :options="optionsFn" @range-end="dateRangeHandler"></q-date>
</q-popup-proxy>
</q-field>
<span class="q-ml-md">周六</span>
<div class="q-ml-sm text-grey-6">
<span>18:00</span>
<span class="q-ml-sm">之前</span>
</div>
</div>
</div>
</div>
<div class="row items-center q-mb-md">
<span class="text-grey-6">房间数量</span>
<div class="q-pl-lg row items-center">
<span>1</span>
<div class="relative-position q-ml-md">
<q-icon class="absolute text-orange-6" style="left: 0;top: 1px;width: inherit;" name="information" size="18px"></q-icon>
<span class="q-pl-lg">仅剩3间</span>
</div>
</div>
</div>
<div class="row items-center">
<span class="text-grey-6">房间情况</span>
<div class="q-pl-lg row">
<q-card flatv class="row items-end q-px-md q-pb-sm q-mr-md">
<div class="text-grey-9">12/24/2022</div>
<div class="q-ml-lg row items-end">
<span>円</span>
<span class="text-red text-weight-bold fz18 q-px-xs">
<span class="relative-position" style="top:3px">2345</span>
</span>
<span class="text-grey-6">/晚</span>
</div>
</q-card>
</div>
</div>
</div>
</div>
<div class="col column bg-white rounded-border q-mb-md">
<div class="bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center justify-between">
<span class="text-weight-bold">入住信息</span>
<span class="relative-position text-orange-6">
<q-icon class="absolute text-orange-6" style="left: 0;top: 1px;width: inherit;" name="information" size="18px"></q-icon>
<span class="q-pl-lg">所填姓名需和入住时所持证件一致</span>
</span>
</div>
<div class="q-px-lg q-py-lg">
<q-form
dense
@submit="onSubmit"
@reset="onReset"
class="row wrap"
>
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"><span class="text-red">*</span> 入住时间</span>
<q-input
class="col"
dense
size="xs"
filled
v-model="name"
label="Your name"
hint=""
lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
/>
</div>
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"><span class="text-red">*</span> 预定人</span>
<div class="col row justify-between">
<div class="col-6">
<q-input
dense
size="xs"
filled
v-model="name"
label="姓"
hint=""
lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
/>
</div>
<div class="col-6">
<q-input
class="q-pl-lg"
dense
size="xs"
filled
v-model="name"
label="名"
hint=""
lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
/>
</div>
</div>
</div>
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"><span class="text-red">*</span> 当前地址</span>
<q-input
class="col"
dense
size="xs"
filled
v-model="name"
label="Your name"
hint=""
lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
/>
</div>
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"><span class="text-red">*</span> Email</span>
<q-input
class="col"
dense
size="xs"
filled
v-model="name"
label="Your name"
hint=""
lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
/>
</div>
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"><span class="text-red">*</span> 电话</span>
<q-input
class="col"
dense
size="xs"
filled
v-model="name"
label="Your name"
hint=""
lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
/>
</div>
<div class="col-12 row">
<div class="col-6 row">
<span class="q-px-lg HotelSure-text"><span class="text-red"></span> 客户需求</span>
<q-input
class="col"
dense
size="xs"
filled
autogrow
type="textarea"
v-model="name"
label="Your name"
hint=""
lazy-rules
/>
</div>
</div>
<div class="col-12 row">
<div class="col-6 row q-mb-md" v-for="item in 1">
<span class="q-px-lg HotelSure-text"><span class="text-red"></span> 房间1</span>
<div class="col row">
<div class="col-4 row">
<span class="q-mx-md">成人男</span>
<q-select class="col" v-model="numberOfAdults" dense :options="adultList" emit-value map-options :label="$t('v101.scattered.chengren')" standout @update:model-value="setPeopleNum"/>
</div>
<div class="col-4 row">
<span class="q-mx-md">成人女</span>
<q-select class="col" v-model="numberOfAdults" dense :options="adultList" emit-value map-options :label="$t('v101.scattered.chengren')" standout @update:model-value="setPeopleNum"/>
</div>
<div class="col-4 row">
<span class="q-mx-md">儿童数</span>
<q-select class="col" v-model="numberOfChildren" dense :options="childrenList" emit-value map-options :label="$t('v101.scattered.ertong')" standout @update:model-value="setPeopleNum"/>
</div>
</div>
</div>
</div>
<div class="column text-red q-pl-lg">
<span>没有通知取消，手续费：100%</span>
<span>入住当日取消，手续费：100%</span>
</div>
</q-form>
</div>
</div>
<div class="col column bg-white rounded-border q-mb-md">
<div class="bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center justify-between">
<span class="text-weight-bold">优惠信息 </span>
</div>
<div class="q-px-lg q-py-lg">
<div class="row">
<div class="col-3">
<q-input
dense
size="xs"
filled
v-model="name"
label="Your name"
hint=""
lazy-rules
/>
</div>
<div class="q-ml-lg"><q-btn class="q-px-lg q-py-sm" color="primary" dense unelevated label="兑换"/></div>
</div>
<div class="column">
<span class="fz16 text-weight-bold q-pb-md">优惠券使用</span>
<span>暂无可用优惠券</span>
</div>
</div>
</div>
<div class="col row q-mb-md">
<q-btn class="col-12 bg-blue rounded-border text-white q-py-sm" label="下单" :loading="submLoading" @click="submitForm"/>
</div>
</div>
</div>
</template>
<script lang="ts">
import svgIcon from '../../components/global/svg-icon.vue'
import { defineComponent, ref, reactive, toRef, toRefs, provide, onMounted, inject, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from '../../config/dictionary'
import { date } from 'quasar'
import message from '../../utils/message'
import { moneyFormat, dateDiffer } from '../../utils/tools'
import HotelService from '../../api/scattered'
import { currentRouter } from 'src/router'
import { HotelRate,HotelArea, useHotel } from '../../utils/hotelRate'
export default defineComponent({
components: { svgIcon },
props: {
HotelRow: {
type: Object,
require: false
},
hotelInfor: {
type: Object,
require: false
}
},
emits:['close'],
setup(props, context) {
const { t } = useI18n()
const qDateProxy = ref(null) as any
// const HotelLength = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_LENGTH) as any
const data = reactive({
params:{
// hotelId:'',
sort:1,
displayFrom:1,
arrivalDate:'',
departureDate:'',
searchroomGroup:[]
},
getParamsMsg:{} as any,
urlParamsMsg:{} as any,
adultList: [] as Array<Number>,//成人下拉
childrenList: [] as Array<Number>,//儿童下拉
numberOfAdults: 0,
numberOfChildren: 0,
submLoading: false,
loading: false,
dateRange: '' as any,//当前日期
dateRangeFormat: '',//可选日期
dataList: [] as Array<any>,
//确认MSG参数
sureMsg:{
dataId:'',
hotelId:'',
totalRoomCount:'',
arrivalDate:'',
checkInTime:'',
departureDate:'',
roomOptionCd:'',
totalChargeableRateInfo:'',
totalPriceJapanese:'',
roomGroup:[] as Array<any>,
guestLastName:'',
guestFirstName:'',
guestAddress:'',
guestPhoneNumber:'',
guestEmail:'',
//备注
guestRequest:'',
CustomerId:0,
HotelName:'',
HotelPic:'',
EmployeeIdStr:'',
OldTotalPrice:0,
CustomerPayMoney:0,
DiscountMoney:0,
OrderSource:2,
OrderForm:1,
},
auditNum:0,
childNum:0,
TotalChildCount:0,//孩子能否报入
chekedChildCount:0,//选了的儿童数
isBaoChild: false,
SettlementPrice : 0,
price: 0,
isShowTime: true,
isLoginB2B: true,
pickerBeginDateBefore:'',//入住时间前可选范围
pickerBeginDateAfter:'',//入住时间后可选范围
RoomTypeList: [] as Array<HotelArea>,//房间等级
scatteredRoomTypeList: [] as Array<HotelArea>,//散客房间类型
name: '',
age: '',
})
for(let i=0;i<21;i++){
data.adultList.push(i)
data.childrenList.push(i)
}
data.getParamsMsg = JSON.parse(localStorage.getItem(DirtionmaryHelper.SCATTERED_HOTEL_DATE))
data.params.arrivalDate = data.getParamsMsg.arrivalDate
data.params.departureDate = data.getParamsMsg.departureDate
data.params.searchroomGroup = data.getParamsMsg.searchroomGroup
data.urlParamsMsg = currentRouter.currentRoute.value.params
data.dateRange = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY/MM/DD')
data.RoomTypeList = useHotel.getHotelRoomType()
data.scatteredRoomTypeList = useHotel.getHotelScatRoom()
// data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
// data.dateRangeFormat = data.dateRange
// watch(
// () => data.urlParamsMsg.hotelId,
// (o, n) => {
// methods.initHotel()
// }
// )
const methods = {
submitForm () {
},
onReset () {
data.name.value = null
data.age.value = null
},
//设置房间里面成人数改变总成人数和儿童数
setPeopleNum() {
// data.auditNum = 0;
// data.childNum = 0;
// search.searchroomGroup.forEach(x => {
// data.auditNum += x.numberOfAdults;
// data.childNum += x.numberOfChildren;
// })
// if (data.auditNum == null || data.auditNum == undefined) {
// data.auditNum = 1
// }
// if (data.childNum == null || data.childNum == undefined) {
// data.childNum = 1
// }
},
optionsFn(cd: any) {
return cd >= date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
},
dateRangeHandler(e: any) {
if (qDateProxy.value) qDateProxy.value.hide()
},
//获取房间等级
getRoomType(type) {
let gradeType = "";
switch (parseInt(type)) {
case 1:
gradeType = data.scatteredRoomTypeList[0].name;
break;
case 2:
gradeType = data.scatteredRoomTypeList[1].name;
break;
case 3:
gradeType = data.scatteredRoomTypeList[2].name;
break;
case 4:
gradeType = data.scatteredRoomTypeList[3].name;
break;
case 5:
gradeType = data.scatteredRoomTypeList[4].name;
break;
case 6:
gradeType = data.scatteredRoomTypeList[5].name;
break;
case 7:
gradeType = data.scatteredRoomTypeList[6].name;
break;
case 8:
gradeType = data.scatteredRoomTypeList[7].name;
break;
case 9:
gradeType = data.scatteredRoomTypeList[8].name;
break;
}
return gradeType;
},
//获取房型
getGradeType(type) {
let gradeType = "";
switch (parseInt(type)) {
case 1:
gradeType = data.RoomTypeList[0].name;
break;
case 2:
gradeType = data.RoomTypeList[1].name;
break;
case 3:
gradeType = data.RoomTypeList[2].name;
break;
case 4:
gradeType = data.RoomTypeList[3].name;
break;
case 5:
gradeType = data.RoomTypeList[4].name;
break;
case 6:
gradeType = data.RoomTypeList[5].name;
break;
}
return gradeType;
},
initHotel() {
console.log(data.urlParamsMsg,'----')
// return
data.loading = true
let param = Object.assign(data.params,data.urlParamsMsg)
HotelService.GetHotelDetailScat(param)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.dataList = r.data.data;
console.log(data.dataList.roomRateDetails,'---1111')
if(Object.prototype.toString.call(data.dataList.roomGroup) == '[object Object]'){
let arr = [];
arr.push(data.dataList.roomGroup);
data.dataList.roomGroup=arr;
}
data.sureMsg.totalChargeableRateInfo=0;
data.sureMsg.totalPriceJapanese=0;
data.TotalChildCount = 0;
let rateGrouoLen = 0;
data.dataList.roomGroup.forEach(x=>{
if(Object.prototype.toString.call(x.rateGroup) == '[object Object]'){
let arr = [];
arr.push(x.rateGroup);
x.rateGroup= arr;
}
let tt = 0;
let tt2 = 0;
let AdultTotalPrice = 0;
let childToTalPrice = 0;
let AdultCount = 0;
let childCount = 0;
let AdultJapanPrice = 0;
let ChildJapanPrice = 0;
let AdultJapanCount = 0;
let childJapanCount = 0;
//原始成人
let oldAount=0;
let childAount=0;
let oldAuditPrice=0;
let oldChildPrice=0;
data.TotalChildCount+=x.roomChildCount*x.rateGroup.length;
rateGrouoLen+= x.rateGroup.length;
data.chekedChildCount = data.childNum*rateGrouoLen;
if(data.TotalChildCount<data.chekedChildCount){
data.isBaoChild=true;
}
//无价格 只有房间价格
let onlyRoomPrice=0;
let onlyJanpnase=0;
x.rateGroup.forEach(z=>{
if(z.perAdultRateBySetCurrency){
z.oldAuditPrice = z.perAdultRateBySetCurrency;
z.oldchildPrice = z.perChildRateBySetCurrency;
z.perAdultRateBySetCurrency = Math.ceil(z.perAdultRateBySetCurrency/data.dataList.JapanIncrease);
z.perChildRateBySetCurrency = Math.ceil(z.perChildRateBySetCurrency/data.dataList.JapanIncrease);
if(x.roomAdultCount>0){
AdultTotalPrice+=parseFloat(z.perAdultRateBySetCurrency);
oldAuditPrice+=parseFloat(z.oldAuditPrice);
AdultJapanPrice+=parseFloat(z.perAdultRate);
}
if(x.roomChildCount>0){
childToTalPrice+=parseFloat(z.perChildRateBySetCurrency);
oldChildPrice+=parseFloat(z.oldchildPrice);
ChildJapanPrice+=parseFloat(z.perChildRate);
}
}
if(z.totalPerRoomRateBySetCurrency){
z.totalPerRoomRateBySetCurrency = Math.ceil(z.totalPerRoomRateBySetCurrency/data.dataList.JapanIncrease);
onlyRoomPrice+=parseFloat(z.totalPerRoomRateBySetCurrency);
onlyJanpnase+=parseFloat(z.totalPerRoomRate);
}
})
AdultCount+=AdultTotalPrice*x.roomAdultCount;
childCount+=childToTalPrice*x.roomChildCount;
oldAount+=oldAuditPrice;
childAount+=childAount;
data.sureMsg.totalChargeableRateInfo += parseFloat(AdultCount+childCount+onlyRoomPrice);
data.sureMsg.OldTotalPrice+=parseFloat(oldAount+childAount+onlyRoomPrice);
AdultJapanCount+=AdultJapanPrice*x.roomAdultCount;
childJapanCount+=ChildJapanPrice*x.roomChildCount;
data.SettlementPrice=data.sureMsg.totalChargeableRateInfo;
data.SettlementPrice=data.sureMsg.totalChargeableRateInfo;
data.price=data.sureMsg.totalChargeableRateInfo;
data.sureMsg.totalPriceJapanese += parseFloat(AdultJapanCount+childJapanCount+onlyJanpnase);
})
}
data.loading = false
}).catch(e => {
data.loading = false
message.errorMsg(e.message)
})
},
// 获取优惠券
getUserCanUseCouponList(){
let msg={
lineId:0,
lineteamId:0,
CouponsUseScope:10,
};
let param = Object.assign(msg)
// HotelService.GetHotelDetailScat(param)
// .then(r => {
// if (r.data.resultCode == ApiResult.SUCCESS) {
// }
// }).catch(e => {
// data.loading = false
// message.errorMsg(e.message)
// })
},
}
onMounted(()=>{
methods.initHotel()
})
return { ...toRefs(data), ...methods,qDateProxy }
}
})
</script>
<style>
.HotelSure-text{
width: 120px;
}
</style>
\ No newline at end of file
src/pages/scattered/hotelDetails.vue 0 → 100644
View file @ 51ebd09e
<template>
<!-- class="row items-center justify-center q-pt-lg q-pb-lg" -->
<div class="q-pt-lg">
<q-card class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px; width: 1300px; height: 88vh;margin: auto;">
<div class="q-px-lg q-mb-lg" :class="{ 'row justify-between': $q.platform.is.desktop }">
<div :class="{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }">
<div class="mobile-only row items-center">
<div class="text-weight-bold fz20 ellipsis" style="width: 280px">{{ hotelSummary.hotelName }}</div>
</div>
<div class="text-weight-bold fz20 ellipsis desktop-only">{{ hotelSummary.hotelName }}</div>
<div>
<span class="q-ml-lg text-orange text-weight-bold fz18" >
円
{{urlParamsMsg.lowrateBySetCurrency}}
</span>
<span class="text-grey-8 q-pl-xs">/{{$t('v101.scattered.qi')}}</span>
</div>
<div :class="{'q-ml-md':$q.platform.is.desktop}">
<q-rating v-model="h.roomReviewRating" size="1.5em" color="orange" :max="h.roomReviewRating" readonly />
</div>
</div>
</div>
<q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col q-px-lg">
<div class="row nowrap">
<q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
<span class="col fz14 text-weight-bold text-blick">{{ hotelSummary.address }}</span>
</div>
<div class="q-py-lg no-wrap col" :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }">
<div class="row rounded-borders relative-position" :class="{ 'col-6': $q.platform.is.desktop, 'height-320': $q.platform.is.mobile }" style="overflow: hidden" v-if="h.List">
<div v-if="h.ChainBrand" class="f12 absolute-left bg-white" style="padding: 5px; bottom: unset; z-index: 1; border-bottom-right-radius: 4px">
<div class="row items-center rounded-borders" style="overflow: hidden">
<div class="bg-dark text-white" style="padding: 0 4px; font-size: 12px"></div>
<div class="text-dark" style="padding: 0 4px; font-size: 12px; background: #f0bd86"></div>
</div>
</div>
<div class="col-7" :class="{ 'col-7': h.List.length >= 3, 'col-6': h.List.length == 2, 'col-12': h.List.length == 1 }">
<q-img @click="showImageHandler(h.List[0])" :src="h.List[0]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
</div>
<div class="col q-pl-sm" v-if="h.List.length > 1">
<div :style="{ height: h.List.length > 2 ? '50%' : '100%' }">
<q-img @click="showImageHandler(h.List[1])" :src="h.List[1]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
</div>
<div class="row items-end q-pt-sm" style="height: 50%" v-if="h.List.length > 2">
<q-img @click="showImageHandler(h.List[2])" :src="h.List[2]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
<div class="absolute-full text-subtitle2 flex flex-center" v-if="h.List.length > 3">
<span class="fz20 text-weight-bold">+</span>
<span class="text-h5 text-weight-bold">{{ h.List.length - 3 }}</span>
</div>
</q-img>
</div>
</div>
</div>
<div class="rounded-borders" :class="{ 'q-ml-sm col': $q.platform.is.desktop, 'q-mt-sm height-320': $q.platform.is.mobile }" style="overflow: hidden" id="baiduMap">
<GoogleMap api-key="AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg" style="width: 100%; height: 100%" :center="center" :zoom="15" v-if="center">
<Marker :options="{ position: center }" />
</GoogleMap>
</div>
</div>
<DetailsList></DetailsList>
<div class="bg-light-blue-1 q-pa-md fz14 rounded-borders">
<div class="text-weight-bold">{{ $t('v101.scatteredDetails.jiudianxinxi') }}</div>
<!-- <div class="text-grey-8 q-mt-sm">{{ h.Descriptions }}</div> -->
</div>
<div :class="{ 'q-px-lg': $q.platform.is.desktop }">
<div class="q-mt-lg row">
<div class="col-3 f12 text-grey-500">{{ $t('v101.scatteredDetails.titlexinxi1') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ h.pickupService?h.pickupService:'--' }}</div>
</div>
</div>
<div :class="{ 'q-px-lg': $q.platform.is.desktop }">
<div class="q-mt-lg row">
<div class="col-3 f12 text-grey-500">{{ $t('v101.scatteredDetails.titlexinxi2') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ h.amenitiesNotes?h.amenitiesNotes:'--' }}</div>
</div>
</div>
<div :class="{ 'q-px-lg': $q.platform.is.desktop }">
<div class="q-mt-lg row">
<div class="col-3 f12 text-grey-500">{{ $t('v101.scatteredDetails.titlexinxi3') }}</div>
<div class="col text-subtitle2 text-weight-bolder">
{{ h.hotelRooms!=''?h.hotelRooms:'--' }}
</div>
</div>
</div>
<div :class="{ 'q-px-lg': $q.platform.is.desktop }">
<div class="q-mt-lg row">
<div class="col-3 f12 text-grey-500">{{ $t('v101.scatteredDetails.titlexinxi4') }}</div>
<div class="col text-subtitle2 text-weight-bolder">
<template v-if="InterArr.length>0">
<span class="rounded-borders bg-blue-1 text-blue q-mr-md q-px-sm q-py-xs q-mb-sm" v-for="x in InterArr">{{x}}</span>
</template>
<template v-else>--</template>
</div>
</div>
</div>
<div :class="{ 'q-px-lg': $q.platform.is.desktop }">
<div class="q-mt-lg row">
<div class="col-3 f12 text-grey-500">{{ $t('v101.scatteredDetails.titlexinxi5') }}</div>
<div class="col text-subtitle2 text-weight-bolder">
<table class="hotel-details-table">
<tr>
<td colspan="3" class="td01">{{$t('v101.scatteredDetails.shiwai')}}</td>
<td colspan="3" class="td01">{{$t('v101.scatteredDetails.wunei')}}</td>
<td colspan="3" class="td01">{{$t('v101.scatteredDetails.zhengqiyu')}}</td>
</tr>
<tr>
<template v-for="item in 3">
<td class="td02">{{$t('v101.scatteredDetails.nan')}}</td>
<td class="td02">{{$t('v101.scatteredDetails.nv')}}</td>
<td class="td02">{{$t('v101.scatteredDetails.hunyu')}}</td>
</template>
</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>
</table>
<div class="row wrap q-pt-md">
<span class="rounded-borders bg-blue-1 text-blue q-mr-md q-px-sm q-py-xs q-mb-sm" v-for="item in HotSpring">{{item}}</span>
</div>
</div>
</div>
</div>
<div :class="{ 'q-px-lg': $q.platform.is.desktop }">
<div class="q-mt-lg row">
<div class="col-3 f12 text-grey-500">{{ $t('v101.scatteredDetails.titlexinxi6') }}</div>
<div class="col row wrap text-subtitle2 text-weight-bolder">
<span class="rounded-borders bg-blue-1 text-blue q-mr-md q-px-sm q-py-xs q-mb-sm" v-for="item in Services">{{item}}</span>
</div>
</div>
</div>
<div class="q-mt-lg">
<div class="bg-orange-1 q-pa-md rounded-borders fz14" style="border: 1px dashed orange">
<div class="text-weight-bold">{{ $t('v101.scatteredDetails.miaoshu') }}</div>
<div class="text-grey-700 q-mt-sm">{{ h.hotelDescription }}</div>
</div>
</div>
</q-scroll-area>
</q-card>
<q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
</div>
<q-dialog class="no-padding" v-model="showImagePriview" persistent v-if="images && images.length > 0">
<image-preview :current="currentImage" :images="images"></image-preview>
</q-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch, onBeforeUnmount, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useQuasar } from 'quasar'
import useScrollModule from 'src/module/scrollbar/scrollModule'
import HotelService from 'src/api/scattered'
import message from 'src/utils/message'
import { ApiResult } from 'src/@types/enumHelper'
import ImagePreview from 'src/components/common/ImagePreview.vue'
import { GoogleMap, Marker } from 'vue3-google-map'
import { DirtionmaryHelper } from 'src/config/dictionary'
import { currentRouter } from 'src/router'
import { HotelArea, useHotel } from '../../utils/hotelRate'
import DetailsList from "../../components/scattered/list/DetailsList.vue"
export default defineComponent({
components: { ImagePreview, GoogleMap, Marker, DetailsList },
props: {
// hotelId: {
// type: Number,
// required: true
// }
},
setup(props, context) {
const { t } = useI18n()
// watch(
// () => props.hotelId,
// (n, o) => {
// data.hotelId = n
// methods.initHotel()
// }
// )
const $q = useQuasar()
const data = reactive({
scrollStyle: {} as any,
loading: true,
h: {} as any,
images: [] as Array<string>,
currentImage: '',
showImagePriview: false,
center: null as any,
params:{
hotelId: "",
hotelImageSize: 5,
photoGalleryGetFlg: 1,
groupBookingFlg: 1
},
hotelSummary:{} as any,
getParamsMsg:{} as any,
urlParamsMsg:{} as any,
InterList: [] as Array<HotelArea>,
InterArr: [] as Array<String>,//客房有网络连接
HotSpringList: [] as Array<HotelArea>,
HotSpring: [] as Array<String>,//洗漱用品是否免费
bathRoom: [],
ServicesList: [] as Array<HotelArea>,//设施与服务
Services: [] as Array<String>
})
data.InterList = useHotel.getHotelInter()
data.HotSpringList = useHotel.getHotelSpring()
data.ServicesList = useHotel.getHotelServices()
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
pageTitle.value = t('v101.scatteredDetails.xiangqing')
// data.scrollStyle = useScrollModule().scrollStyle
data.getParamsMsg = localStorage.getItem(DirtionmaryHelper.SCATTERED_HOTEL_DATE)
data.urlParamsMsg = currentRouter.currentRoute.value.params
console.log(data.urlParamsMsg.hotelId,'----')
const search = reactive({
hotelId: data.urlParamsMsg.hotelId,
sort: 1,
displayFrom: 1,
arrivalDate: "",//入住时间
departureDate: "",//离房时间
roomOptionCd: "",
searchroomGroup: [],//客房数
})
provide(DirtionmaryHelper.HOTEL_QUERY_PARAM, search)
const methods = {
initMap(lat: any, lng: any) {
let country=localStorage.getItem(DirtionmaryHelper.USER_IN_COUNTRY) ?? 'GW'
if(country!='CN'){
data.center = { lat: parseFloat(lng), lng: parseFloat(lat) }
}else{
let Bmap = window.BMapGL // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）
var b = new Bmap.Map('baiduMap')
b.centerAndZoom(new Bmap.Point(lat, lng), 15)
b.enableScrollWheelZoom(true)
b.addOverlay(new Bmap.Marker(new Bmap.Point(lat, lng)))
}
},
initHotel() {
data.loading = true
data.params.hotelId = data.urlParamsMsg.hotelId
let param = Object.assign(data.params)
HotelService.GetHotelDetail(param)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.h = r.data.data.hotelDetails;
data.hotelSummary = r.data.data.hotelSummary;
data.h.roomReviewRating = parseFloat(
data.h.roomReviewRating
);
data.h.hotelRooms = data.h.hotelRooms.substr(8)
data.h.List = []
data.h.List.push(data.h.hotelImageUrl1)
data.h.List.push(data.h.hotelImageUrl2)
data.h.List.push(data.h.hotelImageUrl3)
data.h.List.push(data.h.hotelImageUrl4)
data.h.List.push(data.h.hotelImageUrl5)
data.images = data.h.List
//拆分网络连接
if (data.h.internetAccessibilityOfTheRoom != "") {
data.InterArr = [] as Array<any>;
let InternetArr = data.h.internetAccessibilityOfTheRoom.split(
","
);
InternetArr.forEach((x:String,index:Number)=>{
if(x==1){
console.log(data.InterList[index].name,'====')
data.InterArr.push(data.InterList[index].name)
}
})
}
//拆分温泉
if (data.h.bathAndBathAmenities != "") {
data.HotSpring = [];
data.bathRoom = [];
let HotSpring = data.h.bathAndBathAmenities.split(",");
data.bathRoom = HotSpring.slice(2, 11);
if (HotSpring[0] == 1) {
data.HotSpring.push(data.HotSpringList[0].name);
} else if (HotSpring[0] == 2) {
data.HotSpring.push(data.HotSpringList[1].name);
} else if (HotSpring[0] == 3) {
data.HotSpring.push(data.HotSpringList[2].name);
} else if (HotSpring[0] == 4) {
data.HotSpring.push(data.HotSpringList[3].name);
}
if (HotSpring[1] == 1) {
data.HotSpring.push(data.HotSpringList[4].name+`(${t('v101.scatteredDetails.SpringStatesTJ0')})`);
} else if (HotSpring[1] == 2) {
data.HotSpring.push(data.HotSpringList[4].name+`(${t('v101.scatteredDetails.SpringStatesTJ1')})`);
}
if (HotSpring[11] == 1) {
data.HotSpring.push(data.HotSpringList[5].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[11] == 2) {
data.HotSpring.push(data.HotSpringList[5].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[12] == 1) {
data.HotSpring.push(data.HotSpringList[6].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[12] == 2) {
data.HotSpring.push(data.HotSpringList[6].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[13] == 1) {
data.HotSpring.push(data.HotSpringList[7].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[13] == 2) {
data.HotSpring.push(data.HotSpringList[7].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[14] == 1) {
data.HotSpring.push(data.HotSpringList[8].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[14] == 2) {
data.HotSpring.push(data.HotSpringList[8].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[15] == 1) {
data.HotSpring.push(data.HotSpringList[9].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[15] == 2) {
data.HotSpring.push(data.HotSpringList[9].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[16] == 1) {
data.HotSpring.push(data.HotSpringList[10].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[16] == 2) {
data.HotSpring.push(data.HotSpringList[10].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[17] == 1) {
data.HotSpring.push(data.HotSpringList[11].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[17] == 2) {
data.HotSpring.push(data.HotSpringList[11].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[18] == 1) {
data.HotSpring.push(data.HotSpringList[12].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[18] == 2) {
data.HotSpring.push(data.HotSpringList[12].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[19] == 1) {
data.HotSpring.push(data.HotSpringList[13].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[19] == 2) {
data.HotSpring.push(data.HotSpringList[13].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[20] == 1) {
data.HotSpring.push(data.HotSpringList[14].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[20] == 2) {
data.HotSpring.push(data.HotSpringList[14].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[21] == 1) {
data.HotSpring.push(data.HotSpringList[15].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[21] == 2) {
data.HotSpring.push(data.HotSpringList[15].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[22] == 1) {
data.HotSpring.push(data.HotSpringList[16].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[22] == 2) {
data.HotSpring.push(data.HotSpringList[16].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[23] == 1) {
data.HotSpring.push(data.HotSpringList[17].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[23] == 2) {
data.HotSpring.push(data.HotSpringList[17].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[24] == 1) {
data.HotSpring.push(data.HotSpringList[18].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[24] == 2) {
data.HotSpring.push(data.HotSpringList[18].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[25] == 1) {
data.HotSpring.push(data.HotSpringList[19].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[25] == 2) {
data.HotSpring.push(data.HotSpringList[19].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[26] == 1) {
data.HotSpring.push(data.HotSpringList[20].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[26] == 2) {
data.HotSpring.push(data.HotSpringList[20].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[27] == 1) {
data.HotSpring.push(data.HotSpringList[21].name+`(${t('v101.scatteredDetails.SpringStatesY1')})`);
}
if (HotSpring[28] == 1) {
data.HotSpring.push(data.HotSpringList[22].name+`(${t('v101.scatteredDetails.SpringStatesTJ0')})`);
} else if (HotSpring[28] == 2) {
data.HotSpring.push(data.HotSpringList[22].name+`(${t('v101.scatteredDetails.SpringStatesTJ1')})`);
}
if (HotSpring[29] == 1) {
data.HotSpring.push(data.HotSpringList[23].name+`(${t('v101.scatteredDetails.SpringStatesMF0')})`);
} else if (HotSpring[29] == 2) {
data.HotSpring.push(data.HotSpringList[23].name+`(${t('v101.scatteredDetails.SpringStatesMF1')})`);
}
if (HotSpring[30] == 1) {
data.HotSpring.push(data.HotSpringList[24].name+`(${t('v101.scatteredDetails.SpringStatesTJ0')})`);
} else if (HotSpring[29] == 2) {
data.HotSpring.push(data.HotSpringList[24].name+`(${t('v101.scatteredDetails.SpringStatesTJ1')})`);
}
}
//拆分酒店服务与设施
if (data.h.roomEquipments != "") {
let ServeArr = data.h.roomEquipments.split(",");
data.Services = [];
if (ServeArr[0] == 1) {
data.Services.push(data.ServicesList[0].name);
}
if (ServeArr[1] == 0) {
data.Services.push(data.ServicesList[1].name);
}
if (ServeArr[1] == 1) {
data.Services.push(data.ServicesList[2].name);
}
if (ServeArr[1] == 2) {
data.Services.push(data.ServicesList[3].name);
}
if (ServeArr[1] == 3) {
data.Services.push(data.ServicesList[4].name);
}
if (ServeArr[1] == 4) {
data.Services.push(data.ServicesList[5].name);
}
if (ServeArr[2] == 1) {
data.Services.push(data.ServicesList[6].name);
}
if (ServeArr[2] == 2) {
data.Services.push(data.ServicesList[7].name);
}
if (ServeArr[2] == 3) {
data.Services.push(data.ServicesList[8].name);
}
if (ServeArr[2] == 4) {
data.Services.push(data.ServicesList[9].name);
}
if (ServeArr[3] == 1) {
data.Services.push(data.ServicesList[10].name);
}
if (ServeArr[3] == 2) {
data.Services.push(data.ServicesList[11].name);
}
if (ServeArr[3] == 3) {
data.Services.push(data.ServicesList[12].name);
}
if (ServeArr[3] == 4) {
data.Services.push(data.ServicesList[13].name);
}
if (ServeArr[4] == 1) {
data.Services.push(data.ServicesList[14].name);
}
if (ServeArr[4] == 2) {
data.Services.push(data.ServicesList[15].name);
}
if (ServeArr[4] == 3) {
data.Services.push(data.ServicesList[16].name);
}
if (ServeArr[4] == 4) {
data.Services.push(data.ServicesList[17].name);
}
if (ServeArr[5] == 0) {
data.Services.push(data.ServicesList[18].name);
}
if (ServeArr[5] == 1) {
data.Services.push(data.ServicesList[19].name);
}
if (ServeArr[5] == 2) {
data.Services.push(data.ServicesList[20].name);
}
if (ServeArr[5] == 3) {
data.Services.push(data.ServicesList[21].name);
}
if (ServeArr[5] == 4) {
data.Services.push(data.ServicesList[22].name);
}
if (ServeArr[6] == 1) {
data.Services.push(data.ServicesList[23].name);
}
if (ServeArr[6] == 2) {
data.Services.push(data.ServicesList[24].name);
}
if (ServeArr[7] == 1) {
data.Services.push(data.ServicesList[25].name);
}
if (ServeArr[7] == 2) {
data.Services.push(data.ServicesList[26].name);
}
if (ServeArr[8] == 1) {
data.Services.push(data.ServicesList[27].name);
}
if (ServeArr[8] == 2) {
data.Services.push(data.ServicesList[28].name);
}
if (ServeArr[9] == 1) {
data.Services.push(data.ServicesList[29].name);
}
if (ServeArr[9] == 2) {
data.Services.push(data.ServicesList[30].name);
}
if (ServeArr[10] == 1) {
data.Services.push(data.ServicesList[31].name);
}
if (ServeArr[11] == 1) {
data.Services.push(data.ServicesList[32].name);
}
if (ServeArr[11] == 2) {
data.Services.push(data.ServicesList[33].name);
}
}
methods.initMap(data.hotelSummary.longitudeW, data.hotelSummary.latitudeW)
} else {
message.errorMsg(r.data.message)
}
data.loading = false
})
.catch(e => {
data.loading = false
message.errorMsg(e.message)
})
},
showImageHandler(url: string) {
data.currentImage = url
data.showImagePriview = true
console.log('===')
}
}
onMounted(() => {
methods.initHotel()
})
return { ...toRefs(data), ...methods }
}
})
</script>
<style>
.hotelCard-img {
width: 228px;
height: 162px;
overflow: hidden;
}
.hotelCard-title {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hotel-info-item::before {
display: inline;
content: '·';
font-weight: bolder;
margin-right: 4px;
}
.height-320 {
height: 250px;
}
.hotel-details-table {
border: 1px solid #DCDCDC;
border-collapse: collapse;
width:680px;
}
.hotel-details-table .td01 {
padding: 3px 15px;
background: #F7F7F7;
width: 226px;
height: 19px;
text-align: center;
}
.hotel-details-table .td02 {
padding: 3px 15px;
background: #FAFAFA;
width: 69px;
height: 19px;
text-align: center;
}
.hotel-details-table td {
width: 439px;
padding: 10px 20px;
vertical-align: middle;
text-align: center;
border: 1px solid #DCDCDC;
font-size: 14px;
box-sizing: border-box;
}
.HD_hotelComIntroduce{
margin:auto;
height:auto;
border-bottom:1px solid #DCDCDC;
color:#111111;
}
.HD_hotelComIntroduce span{
display:inline-block;
margin-bottom:10px;
}
.HD_inTitle{
font-size:14px;
font-weight: bold;
color:#111111;
margin-bottom:20px;
}
.HD_ServiceList span{
display: inline-block;
margin:0 30px 10px 0;
white-space: nowrap;
}
</style>
\ No newline at end of file
src/router/routes.ts
View file @ 51ebd09e
...@@ -13,6 +13,7 @@ const routes: RouteRecordRaw[] = [ ...@@ -13,6 +13,7 @@ const routes: RouteRecordRaw[] = [
{ path: '/personal', component: () => import('pages/personal/personal.vue')}, { path: '/personal', component: () => import('pages/personal/personal.vue')},
{ path: '/scattered', component: () => import('pages/scattered/HotelList.vue')}, { path: '/scattered', component: () => import('pages/scattered/HotelList.vue')},
{ path: '/scattered/hotelDetails/:hotelId/:groupBookingFlg/:lowrateBySetCurrency', component: () => import('pages/scattered/hotelDetails.vue')}, { path: '/scattered/hotelDetails/:hotelId/:groupBookingFlg/:lowrateBySetCurrency', component: () => import('pages/scattered/hotelDetails.vue')},
{ path: '/scattered/HotelSure/:hotelId/:roomOptionCd', component: () => import('pages/scattered/HotelSure.vue')},
{ path: '/comingsoon', component: () => import('pages/ComingSoon.vue')} { path: '/comingsoon', component: () => import('pages/ComingSoon.vue')}
] ]
}, },
......
src/utils/hotelRate.ts
View file @ 51ebd09e
...@@ -6,6 +6,7 @@ interface HotelRate { ...@@ -6,6 +6,7 @@ interface HotelRate {
interface HotelArea { interface HotelArea {
name:string, name:string,
} }
const {t} =i18n.global const {t} =i18n.global
const useHotel={ const useHotel={
// 酒店星级 // 酒店星级
...@@ -118,6 +119,30 @@ const useHotel={ ...@@ -118,6 +119,30 @@ const useHotel={
} }
return rates return rates
}, },
// 房间等级标准、豪华等
getHotelRoomType():HotelArea[]{
let rates=[] as HotelArea[]
for(let i=1;i<35;i++){
rates.push({name:t(`v101.scatteredDetails.RoomType${i}`)})
}
return rates
},
// 散客详情房型
getHotelScatRoom():HotelArea[]{
let rates=[] as HotelArea[]
for(let i=1;i<10;i++){
rates.push({name:t(`v101.scatteredDetails.HotelRoom${i}`)})
}
return rates
},
// 散客详情含餐
getHotelScatMeal():HotelArea[]{
let rates=[] as HotelArea[]
for(let i=1;i<10;i++){
rates.push({name:t(`v101.scatteredDetails.iscan${i}`)})
}
return rates
},
} }
export {useHotel, export {useHotel,
type HotelRate, type HotelRate,
......
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