Skip to content

B
bigwood
Commit 6a63af77 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent e63b024c
Hide whitespace changes
Inline Side-by-side
Showing with 666 additions and 5 deletions
src/components/scattered/dida/DidaListTable.vue
View file @ 6a63af77
......@@ -33,7 +33,7 @@
<q-td
class="cursor-pointer"
:props="props"
@click="goUrl('/scattered/HotelDetails', props.row)"
@click="goUrl('/scattered/didaDetails', props.row)"
>
<span>{{ props.row.hotelName }}</span>
</q-td>
......@@ -130,7 +130,7 @@
</template>
<template v-slot:item="props">
<div
@click="goUrl('/scattered/HotelDetails', props.row)"
@click="goUrl('/scattered/didaDetails', props.row)"
class="rounded-borders bg-primary text-white col-12 q-mb-sm"
style="
padding: 12px;
......@@ -376,7 +376,6 @@ export default defineComponent({
: row.lowrateBySetCurrency
}`;
window.open(url, "_blank");
// $router.push({ path:url })
},
};
methods.initHotels();
......
src/pages/scattered/didaDetails.vue 0 → 100644
View file @ 6a63af77
<template>
<div class="q-py-lg">
<div class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px;margin: auto;" :style="{'width':$q.platform.is.desktop?'1300px':'100%'}">
<div class="row q-px-lg q-mb-lg" :class="{ 'row justify-between': $q.platform.is.desktop }">
<div :class="{ 'row items-center': $q.platform.is.desktop, 'row wrap': $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 :class="{'q-pt-sm':$q.platform.is.mobile}">
<span class=" text-orange text-weight-bold fz18" :class="{'q-pl-lg':$q.platform.is.desktop}">
円
{{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-pt-sm q-pl-sm':$q.platform.is.mobile}">
<q-rating v-model="hotelSummary.reviewRating" size="1.5em" color="orange" :max="hotelSummary.reviewRating" readonly />
</div>
</div>
</div>
<div class="col" :class="{'q-px-lg':$q.platform.is.desktop,'q-px-md':$q.platform.is.mobile}">
<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 :class="{ 'col-5': h.List.length >= 3&&$q.platform.is.desktop, 'col-7': h.List.length >= 3&&$q.platform.is.mobile, '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&&$q.platform.is.mobile">
<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 class="col q-pl-sm" v-if="h.List.length > 3&&$q.platform.is.desktop">
<div :style="{ height: h.List.length > 4 ? '50%' : '100%' }">
<q-img @click="showImageHandler(h.List[3])" :src="h.List[3]" 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 > 4">
<q-img @click="showImageHandler(h.List[4])" :src="h.List[4]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
<div class="absolute-full text-subtitle2 flex flex-center" v-if="h.List.length > 5">
<span class="fz20 text-weight-bold">+</span>
<span class="text-h5 text-weight-bold">{{ h.List.length - 5 }}</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 @goUrl="goUrl"></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="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-3':$q.platform.is.mobile}">{{ $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="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-3':$q.platform.is.mobile}">{{ $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="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-3':$q.platform.is.mobile}">{{ $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="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-3':$q.platform.is.mobile}">{{ $t('v101.scatteredDetails.titlexinxi4') }}</div>
<div class="col row text-subtitle2 text-weight-bolder">
<template v-if="InterArr.length>0">
<div class="q-mb-md q-mr-md" v-for="x in InterArr">
<span class="rounded-borders bg-blue-1 text-blue q-px-sm q-py-xs">{{x}}</span>
</div>
</template>
<template v-else>--</template>
</div>
</div>
</div>
<div :class="{'q-px-lg': $q.platform.is.desktop }">
<div class="q-mt-lg" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div class="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">{{ $t('v101.scatteredDetails.titlexinxi5') }}</div>
<div class="text-subtitle2 text-weight-bolder" :class="{'col':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<table :class="{'hotel-details-table':$q.platform.is.desktop,'hotel-details-tableMoblie':$q.platform.is.mobile}">
<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="f12 text-grey-500" :class="{'col-2':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">{{ $t('v101.scatteredDetails.titlexinxi6') }}</div>
<div class="row wrap text-subtitle2 text-weight-bolder" :class="{'col':$q.platform.is.desktop,'col-12 q-pt-sm':$q.platform.is.mobile}">
<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>
</div>
</div>
<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 = JSON.parse(localStorage.getItem(DirtionmaryHelper.SCATTERED_HOTEL_DATE))
data.urlParamsMsg = currentRouter.currentRoute.value.params
const search = reactive({
hotelId: data.urlParamsMsg.hotelId,
sort: 1,
displayFrom: 1,
arrivalDate: data.getParamsMsg.arrivalDate,//入住时间
departureDate: data.getParamsMsg.departureDate,//离房时间
roomOptionCd: "",
searchroomGroup: data.getParamsMsg.searchroomGroup,//客房数
})
provide(DirtionmaryHelper.HOTEL_QUERY_PARAM, search)
const methods = {
goUrl(url:stringify,dataObj:{}){
localStorage.removeItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER)
let d = {
searchroomGroup: search.searchroomGroup,
room: dataObj.room,
auditNum: dataObj.auditNum,
childNum: dataObj.childNum,
arrivalDate: search.arrivalDate,
departureDate: search.departureDate,
imgUrl: data.h.hotelImageUrl1
}
localStorage.setItem(DirtionmaryHelper.SCATTERED_HOTEL_ORDER,JSON.stringify(d))
window.open(url, '_blank')
// $router.push({ path:url })
},
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.GetHotelDetailScat(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){
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
}
}
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;
}
.hotel-details-tableMoblie {
border: 1px solid #DCDCDC;
border-collapse: collapse;
width:100%;
margin-top: 5px;
}
.hotel-details-tableMoblie .td01 {
padding: 3px 10px;
background: #F7F7F7;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie .td02 {
padding: 3px 5px;
background: #FAFAFA;
width: 33.33%;
height: 19px;
text-align: center;
}
.hotel-details-tableMoblie td {
width: 100%;
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 @ 6a63af77
......@@ -44,9 +44,9 @@ const routes: RouteRecordRaw[] = [{
component: () => import('pages/scattered/didaHotel.vue')
},
{
path: '/scattered/HotelDetails/:hotelId/:groupBookingFlg/:lowrateBySetCurrency',
path: '/scattered/didaDetails/:hotelId/:groupBookingFlg/:lowrateBySetCurrency',
component: () =>
import('pages/scattered/hotelDetails.vue')
import('pages/scattered/didaDetails.vue')
},
{
path: '/scattered/HotelSure/:hotelId/:roomOptionCd',
......
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