Skip to content

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

no message

parent 1cfa3a66
Hide whitespace changes
Inline Side-by-side
Showing with 840 additions and 347 deletions
src/App.vue
View file @ 7dacbb94
...@@ -51,6 +51,9 @@ body { ...@@ -51,6 +51,9 @@ body {
font-family: "Noto Sans SC", 微软雅黑, "Microsoft YaHei", sans-serif !important; font-family: "Noto Sans SC", 微软雅黑, "Microsoft YaHei", sans-serif !important;
font-weight: 400 !important; font-weight: 400 !important;
} }
.fz13{
font-size: 13px;
}
.fz14{ .fz14{
font-size: 14px; font-size: 14px;
} }
......
src/boot/product.js
View file @ 7dacbb94
...@@ -18,7 +18,7 @@ const product = { ...@@ -18,7 +18,7 @@ const product = {
} else if (t === 1) { } else if (t === 1) {
url = "/detail/" + encodeURIComponent(productInfo.id ? productInfo.id : productInfo.ID) + "/" + 0 + "/" + configId url = "/detail/" + encodeURIComponent(productInfo.id ? productInfo.id : productInfo.ID) + "/" + 0 + "/" + configId
} else if (t === 5) { } else if (t === 5) {
url = "/hotel/" + configId url = "/detailHotal/" + configId+'/'+productInfo.b2CPrice
} }
} else { } else {
throw new Error("參數不合法"); throw new Error("參數不合法");
......
src/pages/ScenicSpotTicket/details.vue
View file @ 7dacbb94
...@@ -898,7 +898,6 @@ export default { ...@@ -898,7 +898,6 @@ export default {
type: "negative", type: "negative",
message: r.data.message, message: r.data.message,
position: "top", position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
}); });
} }
this.$q.loading.hide(); this.$q.loading.hide();
......
src/pages/detailsHotal.vue
View file @ 7dacbb94
<template> <template>
<div style="min-height: 80vh"> <div class="detaObj" style="min-height: 80vh" ref="detaObj">
<div <div
style=" style="
position: fixed; position: fixed;
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
class="bg-white" class="bg-white"
:style="{ transform: stickyHeight }" :style="{ transform: stickyHeight }"
> >
<div <div
v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto" style="max-width: 1200px; margin-left: auto; margin-right: auto"
:class="{ 'q-px-md': $q.screen.width < 1220 }" :class="{ 'q-px-md': $q.screen.width < 1220 }"
class="q-py-sm row items-center" class="q-py-sm"
> > <div class="row items-center">
<span <span
class="col product-price text-subtitle1 text-weight-bold f30" class="col product-price text-subtitle1 text-weight-bold f30"
style="text-align: left" style="text-align: left"
...@@ -31,19 +31,169 @@ ...@@ -31,19 +31,169 @@
unelevated unelevated
class="q-px-xl" class="q-px-xl"
label="選擇方案" label="選擇方案"
@click="goScrollHandler('#scheme')" @click="goScrollHandler(priceListHeight)"
/> />
</div> </div>
<q-separator v-if="isShowNav" color="grey-2" class="q-my-sm" />
<div class="row no-wrap items-center justify-between" :class="{'q-pt-md q-mb-xs':!isShowNav,' q-pb-xs':isShowNav}">
<div class="row no-wrap">
<q-field stack-label label="入住 / 退房日期" standout
style="min-width: 190px" dense>
<div class="self-center full-width no-outline row no-wrap items-center" tabindex="0">
<span>{{dateRangeFormat}} </span>
<q-chip size="9px" clickable
text-color="white"
color="dark" square>{{liveNvm}} 晚</q-chip>
</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>
<q-field stack-label label="人数及客房" standout
class="q-ml-lg"
style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">
{{numberOfAdults}}成人
<template v-if="numberOfChildren>0"> {{numberOfChildren}}儿童</template>
{{roomGroup}}房
</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy2">
<div class="q-pa-lg q-py-lg">
<div class="row items-center">
<span class="text-grey-7 product-price fz14 q-mr-lg">客房</span>
<div>
<q-input
style="width: 150px"
v-model="roomGroup"
class="col"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="remove"
@click="addPeople('room', -1)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="add"
@click="addPeople('room', 1)"
/>
</template>
</q-input>
</div>
</div>
<q-separator color="grey-2" class="q-my-md" />
<div class="column" v-for="(x,index) in msg.searchroomGroup" :key="index">
<div class="row">
<div class="row items-center">
<span class="text-grey-7 product-price fz14 q-mr-lg">成人</span>
<q-input
style="width: 150px"
v-model="x.numberOfAdults"
class="col"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="remove"
@click="addPeople('numberOfAdults', -1,x)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="add"
@click="addPeople('numberOfAdults', 1,x)"
/>
</template>
</q-input>
</div>
<div class="row items-center q-ml-lg">
<span class="text-grey-7 product-price fz14 q-mr-lg">儿童</span>
<q-input
style="width: 150px"
v-model="x.numberOfChildren"
class="col"
mask="#"
reverse-fill-mask
dense
standout
readonly
>
<template v-slot:prepend>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="remove"
@click="addPeople('numberOfChildren', -1,x)"
/>
</template>
<template v-slot:append>
<q-btn
color="primary"
size="sm"
class="q-px-none"
flat
icon="add"
@click="addPeople('numberOfChildren', 1,x)"
/>
</template>
</q-input>
</div>
</div>
<q-separator v-if="index!=(msg.searchroomGroup.length-1)" color="grey-2" class="q-my-md" />
</div>
</div>
</q-popup-proxy>
</q-field>
</div>
<div>
<q-btn
color="primary"
unelevated
class="q-px-xl"
label="搜索"
@click="getData"
/>
</div>
</div>
</div>
</div> </div>
<div <div
v-if="dataList" v-if="hotelSummary"
style="max-width: 1200px; margin-left: auto; margin-right: auto" style="max-width: 1200px; margin-left: auto; margin-right: auto"
:class="{ 'q-px-md': $q.screen.width < 1220 }" :class="{ 'q-px-md': $q.screen.width < 1220 }"
> >
<div class="row items-center q-mt-md q-mb-lg"> <div class="row items-center q-mt-md q-mb-lg" style="padding-top: 73px;">
<q-breadcrumbs <q-breadcrumbs
class="col f12 no-wrap q-mr-md" class="col f12 no-wrap q-mr-md"
v-if="dataList"
style="font-size: 13px" style="font-size: 13px"
> >
<q-breadcrumbs-el <q-breadcrumbs-el
...@@ -54,70 +204,50 @@ ...@@ -54,70 +204,50 @@
/> />
<q-breadcrumbs-el label="日本" class="cursor-pointer" /> <q-breadcrumbs-el label="日本" class="cursor-pointer" />
<q-breadcrumbs-el> <q-breadcrumbs-el>
<span v-for="(x, i) in citys" :key="i"> <span>
<span class="cursor-pointer">{{ x }} </span> <span class="cursor-pointer">{{ hotelSummary.hotelStateProvince }} </span>
<span v-if="i + 1 != citys.length" class="q-mr-sm">，</span> <span class="q-mr-sm"></span>
</span> </span>
</q-breadcrumbs-el> </q-breadcrumbs-el>
<q-breadcrumbs-el <q-breadcrumbs-el
v-if="$q.platform.is.desktop" v-if="$q.platform.is.desktop"
:label="dataList.title" :label="hotelSummary.address"
class="text-grey-6 ellipsis" class="text-grey-6 ellipsis"
/> />
</q-breadcrumbs> </q-breadcrumbs>
<div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div> <div class="text-grey-6 f12">Product No. # </div>
</div> </div>
<div style="padding-bottom: calc((100% - 0px) / 3); position: relative"> <div class="row rounded-borders bg-white overflow-hidden relative">
<div <q-img class="col-5 cursor-pointer" :src="hotelDetails.hotelImageUrl1" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl1)"/>
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0" <div class="col column q-ml-xs">
class="overflow-hidden rounded-borders" <q-img class="cursor-pointer" :src="hotelDetails.hotelImageUrl2" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl2)"/>
> <q-img class="q-mt-xs cursor-pointer" :src="hotelDetails.hotelImageUrl3" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl3)"/>
<slider </div>
ref="slider" <div class="col column q-ml-xs">
:options="options" <q-img class="cursor-pointer" :src="hotelDetails.hotelImageUrl4" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl4)"/>
@slide="slideHandler" <q-img class="q-mt-xs cursor-pointer" :src="hotelDetails.hotelImageUrl5" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl5)"/>
style="height: 100%"
> </div>
<slideritem <div class="absolute" style="right: 10px;bottom: 10px;">
v-if="dataList.videoStr" <span class="text-white f12 q-pa-xs q-px-md row items-center cursor-pointer"
style="width: 80%" style="background: rgba(23,23,23,.5);border-radius: 30px;"
class="q-mx-sm" @click="showImageHandler(hotelDetails.hotelImageUrl1)">
key="video" <q-icon name="images"></q-icon>
> <span>{{images.length}}</span>
<vue-core-video-players </span>
ref="video"
:src="dataList.videoStr"
:title="dataList.title"
:muted="true"
:autoplay="false"
@play="playHandler"
@pause="pauseHandler"
@seeked="seekedChangeHandler"
@timeupdate="timeChangeHandler"
logo="../statics/img/transparent_logo.png"
:loop="false"
id="trip_video"
/>
</slideritem>
<slideritem
v-for="(item, index) in dataList.imgCover"
:key="index"
style="width: 80%"
class="q-mx-sm"
>
<q-img :src="item" spinner-color="grey" spinner-size="20px" />
</slideritem>
<div slot="loading">loading...</div>
</slider>
</div> </div>
</div> </div>
<div <div
class="q-py-lg" class="q-py-lg"
:class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }" :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }"
> >
<div class="col q-mr-lg"> <div class="col q-mr-lg">
<div class="f30 bold ellipsis-2-lines">{{ dataList.Name }}</div> <div class="f30 bold row items-center">
<!-- <div class="text-h6 ellipsis-2-lines">{{ dataList.Description }}</div> --> <span class="ellipsis-2-lines q-pr-lg">{{ hotelSummary.hotelName }}</span>
<q-rating v-model="roomReviewRating" size="1em"
color="orange" :max="roomReviewRating" readonly />
</div>
<div class="q-mt-md f12 text-grey-6"> <div class="q-mt-md f12 text-grey-6">
<q-icon <q-icon
name="iconfont icondingweixiao" name="iconfont icondingweixiao"
...@@ -132,19 +262,26 @@ ...@@ -132,19 +262,26 @@
<span v-if="i + 1 != citys.length" class="q-mr-sm">,</span> <span v-if="i + 1 != citys.length" class="q-mr-sm">,</span>
</span> </span>
</span> --> </span> -->
<span>{{dataList.Address}}</span> <span>{{ hotelSummary.address }}</span>
</div> </div>
<div class="flex"> <div class="q-mt-md row">
<div <q-chip
class="tag tag-blue" class="transparent q-mr-xl no-padding"
v-for="item in dataList.Array" square
:key="item" icon="iconfont iconOwner-1"
> label=" 印象自組團"
{{ item }} />
</div> <q-chip
<div class="tag tag-red" v-for="item in dataList.Array" :key="item"> class="transparent q-mr-xl no-padding"
{{ item }} square
</div> icon="iconfont icontime"
:label="`住宿時間 ${liveNvm} 晚`" />
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconnetwork-fill"
label="日本語/中文 導覽"
/>
</div> </div>
</div> </div>
<div <div
...@@ -166,26 +303,11 @@ ...@@ -166,26 +303,11 @@
color="primary" color="primary"
label="選擇方案" label="選擇方案"
unelevated unelevated
@click="goScrollHandler('#scheme')" @click="goScrollHandler(priceListHeight)"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }" :class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/> />
</div> </div>
</div> </div>
<div class="q-mt-lg" v-if="dataList.productRecommend">
<div
class="q-mt-sm"
v-for="(x, i) in dataList.productRecommend.split('\n')"
:key="i"
>
<q-icon
name="iconfont iconhongqi"
color="primary"
size="16px"
class="q-mr-md"
/>
{{ x }}
</div>
</div>
</div> </div>
<div <div
class="bg-white" class="bg-white"
...@@ -213,7 +335,7 @@ ...@@ -213,7 +335,7 @@
<q-tab <q-tab
v-for="(x, i) in navs" v-for="(x, i) in navs"
:key="i" :key="i"
@click="goScrollHandler(x.id)" @click="goScrollHandler(x.top + 20)"
:name="x.display" :name="x.display"
:label="x.display" :label="x.display"
></q-tab> ></q-tab>
...@@ -234,41 +356,6 @@ ...@@ -234,41 +356,6 @@
style="max-width: 1200px; margin-left: auto; margin-right: auto" style="max-width: 1200px; margin-left: auto; margin-right: auto"
> >
<div class="text-h6">選擇方案</div> <div class="text-h6">選擇方案</div>
<!-- <div class="flex room-item"> -->
<!-- 房型左侧 -->
<!-- <div class="mr">
<img
class="room-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
<div class="f18 bold">房型标题</div>
<div>房型描述</div>
</div> -->
<!-- 房型右侧 -->
<!-- <div class="ml col-grow"> -->
<!-- 房型规格 -->
<!-- <div class="flex justify-between">
<div>
<div>
<span class="f16 bold">含早餐</span
><span class="f16">一张大床房</span>
</div>
<div class="canuse mt mb">仅剩1间房</div>
<div>不可退款</div>
</div>
<div>
<div class="f18 bold text-right mb">CYN 3984</div>
<q-btn class="select-btn" label="选择日期"></q-btn>
</div>
</div>
<div class="text-right canuse mt mb">最早可预订日</div>
<div>
<div v-for="item in 4" :key="item">
购房{{ item }}: 注意事项{{ item }}
</div>
</div> -->
<!-- </div> -->
<!-- </div> -->
<div <div
style=" style="
background: #fff; background: #fff;
...@@ -277,39 +364,6 @@ ...@@ -277,39 +364,6 @@
margin-top: 20px; margin-top: 20px;
" "
> >
<!-- <div
class="rounded-borders bg-white q-pa-md q-mt-md"
v-if="$q.platform.is.mobile"
>
<q-field
class="q-my-md"
stack-label
label="選擇日期、選項"
standout
dense
>
<div class="self-center full-width no-outline" tabindex="0">
{{ currentPrice.startDate }}
</div>
<q-popup-proxy ref="qDateProxy">
<calendar
class="bg-white q-pa-md"
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
</q-popup-proxy>
</q-field>
<template v-if="currentPrice && currentPrice.startDate">
<order-preview
class="q-pa-md"
:price="currentPrice"
@reset="resetHandler"
></order-preview>
</template>
</div> -->
<!--方案选择区 -->
<select-room @change="(value) => MinPrice = value" :detail="dataList"></select-room>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile"> <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
所選方案詳情 所選方案詳情
</div> </div>
...@@ -317,7 +371,7 @@ ...@@ -317,7 +371,7 @@
class="bg-white rounded-borders q-mt-md" class="bg-white rounded-borders q-mt-md"
v-if="dataList.priceList && dataList.priceList.length > 0" v-if="dataList.priceList && dataList.priceList.length > 0"
> >
<!-- <div class="q-pa-md row"> <div class="q-pa-md row">
<div class="col"> <div class="col">
<div <div
class="text-subtitle1 text-weight-bold row items-center" class="text-subtitle1 text-weight-bold row items-center"
...@@ -361,29 +415,12 @@ ...@@ -361,29 +415,12 @@
最早可預訂日期：{{ dataList.priceList[0].startDate }} 最早可預訂日期：{{ dataList.priceList[0].startDate }}
</div> </div>
</div> </div>
</div> --> </div>
<div <div
class="q-pa-md" class="q-pa-md"
style="border-top: 1px solid #eee" style="border-top: 1px solid #eee"
v-if="showOrderPreview" v-if="showOrderPreview"
> >
<!-- <div class="q-pa-md bg-grey-2 row items-center rounded-borders">
<div class="text-subtitle2 text-weight-bold q-mr-xl">
關於此方案
</div>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconcancel"
label="15天前可免費取消"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconroundcheck"
label="6個工作日內（不含例休假）確認"
/>
</div> -->
<div class="q-mt-lg row" v-if="$q.platform.is.desktop"> <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col"> <div class="col">
<calendar <calendar
...@@ -419,7 +456,6 @@ ...@@ -419,7 +456,6 @@
</div> --> </div> -->
<div <div
v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto" style="max-width: 1200px; margin-left: auto; margin-right: auto"
class="q-mt-xl row" class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }" :class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }"
...@@ -431,87 +467,115 @@ ...@@ -431,87 +467,115 @@
class="text-h5 text-weight-bold text-left q-mt-xl" class="text-h5 text-weight-bold text-left q-mt-xl"
:class="{ :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" id="product">产品介绍</div> }" ref="product">產品介紹</div>
<div <div
class="q-mt-md" class="q-mt-md"
ref="diyContext" ref="diyContext"
:style="{ zoom: zoomDiyContext }" >
v-html="dataList.Descriptions" <div class="q-pb-md">{{hotelDetails.hotelDescription}}</div>
></div> <div class="q-pb-md">{{hotelDetails.bathUsage}}</div>
<div id="server" <div>{{hotelDetails.hotelRooms}}</div>
</div>
<div ref="server"
class="text-h5 text-weight-bold text-left q-mt-xl" class="text-h5 text-weight-bold text-left q-mt-xl"
:class="{ :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">服务设施</div> }">服务设施</div>
<div class="q-mt-sm flex flex-wrap"> <div class="q-mt-sm column">
<template v-for="item in dataList.FacilityServices"> <div class="q-pb-md"><span class="text-weight-bold">接送服务</span> {{hotelDetails.pickupService}}</div>
<div style="width: 25%; padding: 10px" v-for="el in item.list" :key="el.ID">{{el.Content}}</div> <div class="q-pb-md row no-wrap">
</template> <span class="text-weight-bold">客房网络连接</span>
<span class="q-pl-md row wrap col">
<q-chip size="9px" clickable
text-color="white"
color="dark" square v-for="(x,i) in InterArr" :key="i">{{x}}</q-chip>
</span>
</div>
<div class="row no-wrap">
<span class="text-weight-bold">水疗</span>
<div class="column col q-pl-md">
<table class="hotel-details-table q-pb-md">
<tr>
<td colspan="3" class="td01">室外</td>
<td colspan="3" class="td01">屋内</td>
<td colspan="3" class="td01">蒸气浴</td>
</tr>
<tr>
<td class="td02">男</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
<td class="td02">男</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
<td class="td02">男</td>
<td class="td02">女</td>
<td class="td02">混浴</td>
</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="q-pt-sm row wrap">
<q-chip size="9px" clickable
text-color="white"
color="dark" square v-for="(x,i) in HotSpring" :key="i">{{x}}</q-chip>
</div>
</div>
</div> </div>
<!-- <div
id="price"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="price"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用說明
</div> </div>
<div <div
class="text-subtitle1 text-weight-bold q-my-md" class="text-h5 text-weight-bold text-left q-mt-xl"
:class="{ ref="warning"
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用包含
</div>
<div
class="q-mt-md trip-text"
v-html="'費用包含'"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
class="text-subtitle1 text-weight-bold q-my-md"
:class="{ :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" }"
> >
費用不含 購買須知
</div> </div>
<div <div
class="q-mt-md trip-text q-pb-xl" class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
v-html="'費用不含'" style="border: 1px dashed var(--q-color-warning)"
:class="{ :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" }"
></div> --> >超過13歲視為成人處理</div>
<div <div
id="warning"
class="text-h5 text-weight-bold text-left q-mt-xl" class="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning" ref="assemblypoint"
:class="{ :class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" }"
> >
購買須知 酒店地址
</div> </div>
<div <div
class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl" class="q-mt-lg trip-text rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)" style="border: 1px dashed var(--q-color-warning)"
v-html="
dataList.feature
? dataList.feature.importantTip || '暂无购买须知'
: '暂无购买须知'
"
:class="{ :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" }">
></div> <div class="q-pa-md" style="border-bottom: 1px dashed var(--q-color-warning)">
<div class="text-weight-bold text-h6">酒店名稱：{{hotelSummary.hotelName}}</div>
<div class="text-grey-9">地址：{{`${hotelSummary.address}`}}</div>
</div>
<div class="q-pa-md" :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" v-for="(x,index) in travelLngLat" :key="index">
<componentsMap v-if="x.Lng&&x.Lat" :AddressObj="x"/>
<div v-else class="card text-center">经纬度未知</div>
</div>
</div>
<div <div
id="tips"
class="text-h5 text-weight-bold text-left q-mt-xl" class="text-h5 text-weight-bold text-left q-mt-xl"
ref="tips" ref="tips"
:class="{ :class="{
...@@ -523,17 +587,12 @@ ...@@ -523,17 +587,12 @@
<div <div
class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl" class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-info)" style="border: 1px dashed var(--q-color-info)"
v-html="
dataList.feature
? dataList.feature.warmTip || '暂无溫馨提示'
: '暂无溫馨提示'
"
:class="{ :class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile, 'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" }"
></div> >
預定成功後房間將為您整晚保留</div>
<div <div
id="cancelTips"
class="text-h5 text-weight-bold text-left q-mt-xl" class="text-h5 text-weight-bold text-left q-mt-xl"
ref="cancelTips" ref="cancelTips"
:class="{ :class="{
...@@ -570,23 +629,33 @@ ...@@ -570,23 +629,33 @@
<template v-if="$q.platform.is.desktop"> <template v-if="$q.platform.is.desktop">
<div class="col-1"></div> <div class="col-1"></div>
<div class="col q-ml-xl position-relative"> <div class="col q-ml-xl position-relative">
<div style="position: sticky; top: 100px"> <div style="position: sticky; top: 200px">
<div <div
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md" class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
v-for="(x, i) in navs" v-for="(x, i) in navs"
:key="i" :key="i"
@click="goScrollHandler(x.id)" @click="goScrollHandler(x.top + 20)"
:class="{
'active-trip-module':
currentHeight >= x.top &&
(i == navs.length - 1 || currentHeight < navs[i + 1].top),
}"
> >
{{ x.display }} {{ x.display }} -- {{x.top}}
</div> </div>
</div> </div>
</div> </div>
</template> </template>
</div> </div>
<q-dialog class="no-padding" v-model="showImagePriview"
v-if="images && images.length > 0">
<image-preview :current="currentImage" :images="images"></image-preview>
</q-dialog>
</div> </div>
</template> </template>
<script> <script>
import { date } from 'quasar'
import { slider, slideritem } from "vue-concise-slider"; import { slider, slideritem } from "vue-concise-slider";
import calendar from "../components/trip/calendar.vue"; import calendar from "../components/trip/calendar.vue";
import OrderPreview from "src/components/trip/orderPreview.vue"; import OrderPreview from "src/components/trip/orderPreview.vue";
...@@ -598,6 +667,8 @@ import hotelMap from "./hotel/hotelMap.vue"; ...@@ -598,6 +667,8 @@ import hotelMap from "./hotel/hotelMap.vue";
import hotelDes from "./hotel/hotelDes.vue"; import hotelDes from "./hotel/hotelDes.vue";
import comments from "./hotel/comments.vue"; import comments from "./hotel/comments.vue";
import selectRoom from './hotel/selectRoom.vue'; import selectRoom from './hotel/selectRoom.vue';
import componentsMap from 'src/components/car/Map.vue';
import ImagePreview from 'src/components/common/ImagePreview.vue'
export default { export default {
props: [], props: [],
components: { components: {
...@@ -612,7 +683,9 @@ export default { ...@@ -612,7 +683,9 @@ export default {
hotelMap, hotelMap,
hotelDes, hotelDes,
comments, comments,
selectRoom selectRoom,
componentsMap,
ImagePreview
}, },
data() { data() {
return { return {
...@@ -622,13 +695,61 @@ export default { ...@@ -622,13 +695,61 @@ export default {
searchDate: "", searchDate: "",
clickDate: "", clickDate: "",
slide: 1, slide: 1,
roomReviewRating: 0,
currentImage: '',
showImagePriview: false,
travelLngLat: [],//经纬度
ServeArr: [],//酒店服务与设施
InterArr: [],//网络连接
bathRoom: [],//温泉
HotSpring: [],
images: [],
hotelSummary: {},
hotelDetails: {},
roomGroup: 1,
numberOfAdults: 1,
numberOfChildren: 0,
liveNvm: 1,
dateRange:{},
dateRangeFormat: '',//入住、离店时间
roomGroupObj:{roomNum:null,numberOfAdults:1,numberOfChildren:0},
msg: { msg: {
configId: "", // configId: "",
cityId: 0, // cityId: 0,
preview: 0, // preview: 0,
tcid: 0, // tcid: 0,
teamType: 0, // teamType: 0,
isGetPriceFlight: true, // isGetPriceFlight: true,
arrivalDate: '',//开始日期
departureDate: '',//结束日期
searchroomGroup: [
{roomNum:1,numberOfAdults:1,numberOfChildren:0}
],//客房数
searchHotelIdList: [],
freeword: '',//地区名字 酒店名字
freewordType: 1, //类型 1，地区，2-酒店名称
reviewRatingUpperLimits: '',//最大评分数
reviewRatingLowerLimits: '',//最小评分数
searchHotelCategory: [], //酒店分类
searchHotelFeatures: [], //酒店特征
searchRoomType: [], //类型的房间
searchMealType: [], //饮食条件搜索
searchMinRate: '', //最小金额
searchMaxRate: '', //最大金额
displayFrom: 1,//页数
numberOfResults: 12,
rowsPerPage: 15,
sort: 1
},
detaMsg:{
groupBookingFlg: "0",
hotelId: 0,
hotelImageSize: 5,
photoGalleryGetFlg: 1
}, },
currentPrice: {}, currentPrice: {},
isShow: false, isShow: false,
...@@ -672,37 +793,37 @@ export default { ...@@ -672,37 +793,37 @@ export default {
], ],
navs: [ navs: [
{ {
id: "#product", val: "product",
top: 0, top: 0,
isActive: false, isActive: false,
display: "產品介紹", display: "產品介紹",
}, },
{ {
id: "#server", val: "server",
top: 0, top: 0,
isActive: false, isActive: false,
display: "服务设施", display: "服务设施",
}, },
// {
// id: "#price",
// top: 0,
// isActive: false,
// display: "費用說明",
// },
{ {
id: "#warning", val: "assemblypoint",
top: 0,
isActive: false,
display: "酒店地址",
},
{
val: "warning",
top: 0, top: 0,
isActive: false, isActive: false,
display: "購買須知", display: "購買須知",
}, },
{ {
id: "#tips", val: "tips",
top: 0, top: 0,
isActive: false, isActive: false,
display: "溫馨提示", display: "溫馨提示",
}, },
{ {
id: "#cancelTips", val: "cancelTips",
top: 0, top: 0,
isActive: false, isActive: false,
display: "取消政策", display: "取消政策",
...@@ -724,18 +845,23 @@ export default { ...@@ -724,18 +845,23 @@ export default {
}, },
created() { created() {
if (this.$route.params.id) { if (this.$route.params.id) {
this.msg.configId = decodeURIComponent(this.$route.params.id); this.detaMsg.hotelId = decodeURIComponent(this.$route.params.id)
} }
if (this.$route.params.tcid) { if(this.$route.params.b2CPrice){
this.msg.tcid = decodeURIComponent(this.$route.params.tcid); this.MinPrice = this.$route.params.b2CPrice
} }
}, },
mounted() { mounted() {
document.getElementsByTagName("body")[0].style.background = window.addEventListener("scroll", this.handleScroll);
"rgb(255, 255, 255)"; this.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY-MM-DD')
if (localStorage.baseifo) { this.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY-MM-DD')
this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo")); this.msg.StartDate = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY-MM-DD')
} this.msg.EndDate = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY-MM-DD')
this.dateRangeFormat = `${this.msg.StartDate} - ${this.msg.EndDate} `
window.addEventListener("scroll", this.menu); window.addEventListener("scroll", this.menu);
this.getData(); this.getData();
}, },
...@@ -743,6 +869,62 @@ export default { ...@@ -743,6 +869,62 @@ export default {
document.getElementsByTagName("body")[0].style = ""; document.getElementsByTagName("body")[0].style = "";
}, },
methods: { methods: {
showImageHandler(url) {
this.currentImage = url
this.showImagePriview = true
},
addPeople(m, i, x) {
if(m=='room'){
if(i==1){
this.roomGroup++
this.msg.searchroomGroup.push(this.roomGroupObj)
}else{
if(this.roomGroup>1){
this.roomGroup--
this.msg.searchroomGroup.pop()
}
}
}else{
x[m] = parseInt(x[m]) + i;
if(m!='numberOfChildren'){
x[m] = x[m] < 1 ? 1 : x[m]++;
}else{
x[m] = x[m] < 0 ? 0 : x[m]++;
}
}
this.CountPeople()
},
CountPeople(){
this.numberOfAdults = 0
this.numberOfChildren = 0
this.msg.searchroomGroup.forEach((x,index)=>{
x.roomNum = index+1
this.numberOfAdults += x.numberOfAdults
this.numberOfChildren += x.numberOfChildren
})
},
optionsFn(cd) {
return cd >= date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
},
// 日期筛选
dateRangeHandler(e) {
this.msg.StartDate = `${e.from.year}/${e.from.month}/${e.from.day}`
this.msg.EndDate = `${e.to.year}/${e.to.month}/${e.to.day} `
this.dateRangeFormat = `${this.msg.StartDate} - ${this.msg.EndDate} `
if (this.$refs.qDateProxy) this.$refs.qDateProxy.hide()
this.liveNvm = this.dateDiffer(this.msg.StartDate,this.msg.EndDate)
},
dateDiffer(DateStart,DateEnd) {
//date1结束时间
let date1 = new Date(DateEnd);
//date2当前时间
let date2 = new Date(DateStart);
date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
const diff = date1.getTime() - date2.getTime(); //目标时间减去当前时间
const diffDate = diff / (24 * 60 * 60 * 1000); //计算当前时间与结束时间之间相差天数
return diffDate
},
handleSelect(id) { handleSelect(id) {
if (this.selectedCar === id) { if (this.selectedCar === id) {
this.selectedCar = ""; this.selectedCar = "";
...@@ -753,6 +935,38 @@ export default { ...@@ -753,6 +935,38 @@ export default {
getTopNum(x) { getTopNum(x) {
this.days = JSON.parse(x); this.days = JSON.parse(x);
}, },
handleScroll(e) {
let temp = this.getScroll().top;
this.stickyHeight = document.querySelector(".q-header--hidden")
? "translateY(0px)"
: "translateY(0px)";
this.currentHeight = temp;
if (
this.videoPosition > 0 &&
this.videoPosition < this.currentHeight &&
this.options.currentPage == 0 &&
!this.isPictureInPicture
) {
this.isPictureInPicture = true;
let t = document.querySelectorAll("video")[0];
try {
t.requestPictureInPicture();
} catch (error) {}
} else if (
this.videoPosition > 0 &&
this.videoPosition > this.currentHeight &&
this.options.currentPage == 0 &&
this.isPictureInPicture
) {
this.isPictureInPicture = false;
document.exitPictureInPicture();
}
let h = document.location.hash;
if (h.indexOf("#/detailsHotal/") == -1) {
window.removeEventListener("scroll", this.handleScroll);
}
},
getScroll() { getScroll() {
return { return {
left: left:
...@@ -767,9 +981,8 @@ export default { ...@@ -767,9 +981,8 @@ export default {
0, 0,
}; };
}, },
goScrollHandler(id) { goScrollHandler(top) {
console.log("scrollIntoView", id); window.scrollTo(0, top);
document.querySelector(id).scrollIntoView({ behavior: "smooth" });
}, },
slideHandler(e) { slideHandler(e) {
this.options.currentPage = e.currentPage; this.options.currentPage = e.currentPage;
...@@ -810,75 +1023,320 @@ export default { ...@@ -810,75 +1023,320 @@ export default {
getData() { getData() {
this.$q.loading.show(); this.$q.loading.show();
this.apipost( this.apipost(
"b2c_get_GetHotelDetail", "dmc_post_Get_GetJAPAN_HotelDetail",
{ HotelId: decodeURIComponent(this.$route.params.id) }, this.detaMsg,
(r) => { (res) => {
if (r.data.resultCode == 1) { this.$q.loading.hide();
console.log("getData", r); if (res.data.resultCode == 1) {
this.dataList = r.data.data; this.dataList = res.data.data;
this.dataList.FacilityServices = JSON.parse(this.dataList.FacilityServices) this.hotelDetails = res.data.data.hotelDetails;
this.dataList.imgCover = this.dataList.List.map(item => { this.hotelSummary = res.data.data.hotelSummary;
return item.Path this.roomReviewRating = Number(this.hotelDetails.roomReviewRating);
this.travelLngLat.push({
Lat: this.hotelSummary.latitudeW,
Lng: this.hotelSummary.longitudeW,
name: this.hotelSummary.hotelName
}); });
conosle.log(this.dataList.imgCover) //拆分酒店服务与设施
this.isShow = true; if (this.hotelDetails.roomEquipments != "") {
this.isDirect = this.dataList.isDirect; let ServeArr = this.hotelDetails.roomEquipments.split(",");
if (this.dataList.videoStr && this.dataList.videoStr != "") { this.Services = [];
this.options.loop = false; if (ServeArr[0] == 1) {
this.options.currentPage = 1; this.Services.push("浴室和厕所");
this.$nextTick(() => { }
setTimeout(() => { if (ServeArr[1] == 0) {
let t = document.querySelectorAll(".slider-wrapper"); this.Services.push("公共汽车厕所CD（有全室巴士）");
if (t.length > 0) { }
let d = t[0].getBoundingClientRect(); if (ServeArr[1] == 1) {
this.videoPosition = d.top + d.height; this.Services.push("公共汽车厕所CD（有一部分巴士）");
} }
}, 1000); if (ServeArr[1] == 2) {
}); this.Services.push("公共汽车厕所CD（有全室厕所）");
}
if (ServeArr[1] == 3) {
this.Services.push("公共汽车厕所CD（有一部分厕所）");
}
if (ServeArr[1] == 4) {
this.Services.push("公共汽车厕所CD（所有厕所都没有）");
}
if (ServeArr[2] == 1) {
this.Services.push("淋浴-免费(全室)");
}
if (ServeArr[2] == 2) {
this.Services.push("淋浴-收费(全室)");
}
if (ServeArr[2] == 3) {
this.Services.push("淋浴-免费(部分)");
}
if (ServeArr[2] == 4) {
this.Services.push("淋浴-收费(部分)");
}
if (ServeArr[3] == 1) {
this.Services.push("冷暖气-免费(全室)");
}
if (ServeArr[3] == 2) {
this.Services.push("冷暖气-收费(全室)");
}
if (ServeArr[3] == 3) {
this.Services.push("冷暖气-免费(部分)");
}
if (ServeArr[3] == 4) {
this.Services.push("冷暖气-收费(部分)");
}
if (ServeArr[4] == 1) {
this.Services.push("全室有空调(收费)");
}
if (ServeArr[4] == 2) {
this.Services.push("部分客房有空调(免费)");
}
if (ServeArr[4] == 3) {
this.Services.push("部分客房有空调(收费)");
}
if (ServeArr[4] == 4) {
this.Services.push("没有空调");
}
if (ServeArr[5] == 0) {
this.Services.push("全房间有暖气设备(免费)");
}
if (ServeArr[5] == 1) {
this.Services.push("全部房间都有暖气(收费)");
}
if (ServeArr[5] == 2) {
this.Services.push("部分客房供暖(免费)");
}
if (ServeArr[5] == 3) {
this.Services.push("部分客房供暖(收费)");
}
if (ServeArr[5] == 4) {
this.Services.push("没有暖气设备");
}
if (ServeArr[6] == 1) {
this.Services.push("电视（免费）");
}
if (ServeArr[6] == 2) {
this.Services.push("电视（收费）");
}
if (ServeArr[7] == 1) {
this.Services.push("录像机（免费）");
}
if (ServeArr[7] == 2) {
this.Services.push("录像机（收费）");
}
if (ServeArr[8] == 1) {
this.Services.push("卫星广播（免费）");
}
if (ServeArr[8] == 2) {
this.Services.push("卫星广播（收费）");
}
if (ServeArr[9] == 1) {
this.Services.push("冰箱-有(带饮料的)");
}
if (ServeArr[9] == 2) {
this.Services.push("空冰箱");
}
if (ServeArr[10] == 1) {
this.Services.push("迷你酒吧");
}
if (ServeArr[11] == 1) {
this.Services.push("祖邦煎锅（免费）");
}
if (ServeArr[11] == 2) {
this.Services.push("祖邦煎锅（收费）");
}
} }
this.$nextTick(() => { //拆分网络连接
if ( if (this.hotelDetails.internetAccessibilityOfTheRoom != "") {
this.dataList.feature && this.InterArr = [];
this.dataList.feature.featureHtml != "" let InternetArr = this.hotelDetails.internetAccessibilityOfTheRoom.split(
) { ","
let tw = );
parseFloat( if (InternetArr[0] == 1) {
this.$refs.diyContext.getBoundingClientRect().width this.InterArr.push("客房网络连接");
) / 1123.0; }
if (InternetArr[1] == 1) {
this.InterArr.push("拨号连线");
}
if (InternetArr[2] == 1) {
this.InterArr.push("可连接LAN");
}
if (InternetArr[3] == 1) {
this.InterArr.push("无线局域网");
}
if (InternetArr[4] == 1) {
this.InterArr.push("PC贷款");
}
if (InternetArr[5] == 1) {
this.InterArr.push("免费接入网络");
}
}
//拆分温泉
if (this.hotelDetails.bathAndBathAmenities != "") {
this.HotSpring = [];
this.bathRoom = [];
let HotSpring = this.hotelDetails.bathAndBathAmenities.split(",");
this.bathRoom = HotSpring.slice(2, 11);
if (HotSpring[0] == 1) {
this.HotSpring.push("露天温泉(也有男女(包括时间交替)·可借贷");
} else if (HotSpring[0] == 2) {
this.HotSpring.push(
"露天温泉(有男女也有(包括时间交替)·不能借贷"
);
} else if (HotSpring[0] == 3) {
this.HotSpring.push(
"露天温泉(男女中只有1个(包括混浴)、可以包租)"
);
} else if (HotSpring[0] == 4) {
this.HotSpring.push(
"露天温泉(男女中只有一个(包括混浴)，不能包租"
);
}
let divArr = document.querySelectorAll("#setZoom>div"); if (HotSpring[1] == 1) {
for (let i = 0; i < divArr.length; i++) { this.HotSpring.push("有包租浴室(没有条件)");
let div = divArr[i]; } else if (HotSpring[1] == 2) {
if (this.$q.platform.is.mobile) { this.HotSpring.push("有包租浴室(有条件)");
div.style.zoom = }
div.offsetWidth > 1000
? 0.999 if (HotSpring[11] == 1) {
: document.documentElement.clientWidth / 1123.0; this.HotSpring.push("阿米尼蒂:脸·手巾(免费)");
} else { } else if (HotSpring[11] == 2) {
div.style.zoom = 1; this.HotSpring.push("阿米尼蒂:脸·手巾(收费)");
} }
} if (HotSpring[12] == 1) {
this.HotSpring.push("阿米尼蒂:牙刷、牙膏(免费)");
} else if (HotSpring[12] == 2) {
this.HotSpring.push("阿米尼蒂:牙刷、牙膏(收费)");
}
if (HotSpring[13] == 1) {
this.HotSpring.push("阿米蒂奇:浴巾(免费)");
} else if (HotSpring[13] == 2) {
this.HotSpring.push("阿米蒂奇:浴巾(收费)");
}
if (HotSpring[14] == 1) {
this.HotSpring.push("水芹菜:洗发水(免费)");
} else if (HotSpring[14] == 2) {
this.HotSpring.push("水芹菜:洗发水(收费)");
}
this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2); if (HotSpring[15] == 1) {
this.HotSpring.push("阿姆尼蒂:林斯(免费)");
} else if (HotSpring[15] == 2) {
this.HotSpring.push("阿姆尼蒂:林斯(收费)");
} }
try { if (HotSpring[16] == 1) {
document this.HotSpring.push("阿米尼蒂:沐浴露(免费)");
.querySelector("#scrollId .q-page-container") } else if (HotSpring[16] == 2) {
.addEventListener("scroll", this.handleScrollDay); this.HotSpring.push("阿米尼蒂:沐浴露(收费)");
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
} }
if (HotSpring[17] == 1) {
this.HotSpring.push("水黾:肥皂(免费)");
} else if (HotSpring[17] == 2) {
this.HotSpring.push("水黾:肥皂(收费)");
}
if (HotSpring[18] == 1) {
this.HotSpring.push("亚健康:浴衣(免费)");
} else if (HotSpring[18] == 2) {
this.HotSpring.push("亚健康:浴衣(收费)");
}
if (HotSpring[19] == 1) {
this.HotSpring.push("艾尼蒂:睡衣(免费)");
} else if (HotSpring[19] == 2) {
this.HotSpring.push("艾尼蒂:睡衣(收费)");
}
if (HotSpring[20] == 1) {
this.HotSpring.push("阿姆尼蒂:浴衣(免费)");
} else if (HotSpring[20] == 2) {
this.HotSpring.push("阿姆尼蒂:浴衣(收费)");
}
if (HotSpring[21] == 1) {
this.HotSpring.push("足球运动员:吹风机(免费)");
} else if (HotSpring[21] == 2) {
this.HotSpring.push("足球运动员:吹风机(收费)");
}
if (HotSpring[22] == 1) {
this.HotSpring.push("艾尼蒂:羽毛被褥(免费)");
} else if (HotSpring[22] == 2) {
this.HotSpring.push("艾尼蒂:羽毛被褥(收费)");
}
if (HotSpring[23] == 1) {
this.HotSpring.push("艾尼蒂:刮胡子(免费)");
} else if (HotSpring[23] == 2) {
this.HotSpring.push("艾尼蒂:刮胡子(收费)");
}
if (HotSpring[24] == 1) {
this.HotSpring.push("水黾:淋浴帽(免费)");
} else if (HotSpring[24] == 2) {
this.HotSpring.push("水黾:淋浴帽(收费)");
}
if (HotSpring[25] == 1) {
this.HotSpring.push("阿米尼蒂:棉签(免费)");
} else if (HotSpring[25] == 2) {
this.HotSpring.push("阿米尼蒂:棉签(收费)");
}
if (HotSpring[26] == 1) {
this.HotSpring.push("水黾:冲澡(免费)");
} else if (HotSpring[26] == 2) {
this.HotSpring.push("水黾:冲澡(收费)");
}
if (HotSpring[27] == 1) {
this.HotSpring.push("石梳:梳子刷(有)");
}
if (HotSpring[28] == 1) {
this.HotSpring.push("其他温泉浴:展望浴(没有条件)");
} else if (HotSpring[28] == 2) {
this.HotSpring.push("其他温泉浴:展望浴(有条件)");
}
if (HotSpring[29] == 1) {
this.HotSpring.push("其他:桑拿浴(免费)");
} else if (HotSpring[29] == 2) {
this.HotSpring.push("其他:桑拿浴(收费)");
}
if (HotSpring[30] == 1) {
this.HotSpring.push("其他:jazza(没有条件)");
} else if (HotSpring[29] == 2) {
this.HotSpring.push("其他:jazza(有条件)");
}
}
let dataImgArray=[]
for (let i = 0; i < 5; i++) {
if(this.hotelDetails[`hotelImageUrl${(i+1)}`] && this.hotelDetails[`hotelImageUrl${(i+1)}`].length>0){
dataImgArray.push(this.hotelDetails[`hotelImageUrl${(i+1)}`])
}
}
if(res.data.data.photoGalleries&&res.data.data.photoGalleries.photoGalleryInfo){
for (let i = 0; i < res.data.data.photoGalleries.photoGalleryInfo.length; i++) {
dataImgArray.push(res.data.data.photoGalleries.photoGalleryInfo[i].photoGalleryImageURL)
}
}
this.images=dataImgArray;
this.$nextTick(() => {
setTimeout(() => {
this.navs.forEach((x) => {
x.top =
this.$refs[x.val].getBoundingClientRect().top + this.currentHeight - 60;
});
this.priceListHeight =
this.$refs.pricelist.getBoundingClientRect().top +
this.currentHeight -
60;
}, 1000);
}); });
} else { } else {
this.$q.notify({ this.$q.notify({
type: "negative", type: "negative",
message: r.data.message, message: res.data.message,
position: "top", position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
}); });
} }
this.$q.loading.hide();
}, },
null null
); );
...@@ -892,15 +1350,68 @@ export default { ...@@ -892,15 +1350,68 @@ export default {
this.isShowNav = false; this.isShowNav = false;
} }
}, },
goNavList(val) {
let newval = "#" + val;
document.querySelector(newval).scrollIntoView(true);
},
}, },
}; };
</script> </script>
<style> <style>
.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;
}
.slider-item { .slider-item {
transform: scale(1); transform: scale(1);
transition-timing-function: ease; transition-timing-function: ease;
...@@ -950,26 +1461,6 @@ export default { ...@@ -950,26 +1461,6 @@ export default {
border-radius: 50%; border-radius: 50%;
font-family: lettergothicstd; font-family: lettergothicstd;
} }
.active-trip-moduleDay {
position: relative;
border: 0;
left: -15px;
font-size: 51px;
}
.active-trip-moduleDay.active::before {
opacity: 1;
}
.active-trip-moduleDay::before {
display: inline-block;
position: absolute;
top: 0px;
left: -50px;
content: "DAY";
font-size: 13px;
font-family: fangsong;
line-height: 58px;
opacity: 0;
}
#setZoom > div { #setZoom > div {
zoom: calc(100 / 1000); zoom: calc(100 / 1000);
} }
......
src/router/routes.js
View file @ 7dacbb94
...@@ -45,7 +45,7 @@ const routes = [{ ...@@ -45,7 +45,7 @@ const routes = [{
component: () => component: () =>
import ('pages/ScenicSpotTicket/orderForm.vue') import ('pages/ScenicSpotTicket/orderForm.vue')
}, { // 酒店 }, { // 酒店
path: '/detailHotal/:id', path: '/detailHotal/:id/:b2CPrice',
component: () => component: () =>
import ('pages/detailsHotal.vue') import ('pages/detailsHotal.vue')
}, { // 旅程 }, { // 旅程
......
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