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 {
font-family: "Noto Sans SC", 微软雅黑, "Microsoft YaHei", sans-serif !important;
font-weight: 400 !important;
}
.fz13{
font-size: 13px;
}
.fz14{
font-size: 14px;
}
......
src/boot/product.js
View file @ 7dacbb94
......@@ -18,7 +18,7 @@ const product = {
} else if (t === 1) {
url = "/detail/" + encodeURIComponent(productInfo.id ? productInfo.id : productInfo.ID) + "/" + 0 + "/" + configId
} else if (t === 5) {
url = "/hotel/" + configId
url = "/detailHotal/" + configId+'/'+productInfo.b2CPrice
}
} else {
throw new Error("參數不合法");
......
src/pages/ScenicSpotTicket/details.vue
View file @ 7dacbb94
......@@ -898,7 +898,6 @@ export default {
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
......
src/pages/detailsHotal.vue
View file @ 7dacbb94
<template>
<div style="min-height: 80vh">
<div class="detaObj" style="min-height: 80vh" ref="detaObj">
<div
style="
position: fixed;
......@@ -13,12 +13,12 @@
class="bg-white"
:style="{ transform: stickyHeight }"
>
<div
v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto"
: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
class="col product-price text-subtitle1 text-weight-bold f30"
style="text-align: left"
......@@ -31,19 +31,169 @@
unelevated
class="q-px-xl"
label="選擇方案"
@click="goScrollHandler('#scheme')"
@click="goScrollHandler(priceListHeight)"
/>
</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
v-if="dataList"
v-if="hotelSummary"
style="max-width: 1200px; margin-left: auto; margin-right: auto"
: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
class="col f12 no-wrap q-mr-md"
v-if="dataList"
style="font-size: 13px"
>
<q-breadcrumbs-el
......@@ -54,70 +204,50 @@
/>
<q-breadcrumbs-el label="日本" class="cursor-pointer" />
<q-breadcrumbs-el>
<span v-for="(x, i) in citys" :key="i">
<span class="cursor-pointer">{{ x }} </span>
<span v-if="i + 1 != citys.length" class="q-mr-sm">，</span>
<span>
<span class="cursor-pointer">{{ hotelSummary.hotelStateProvince }} </span>
<span class="q-mr-sm"></span>
</span>
</q-breadcrumbs-el>
<q-breadcrumbs-el
v-if="$q.platform.is.desktop"
:label="dataList.title"
:label="hotelSummary.address"
class="text-grey-6 ellipsis"
/>
</q-breadcrumbs>
<div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div>
<div class="text-grey-6 f12">Product No. # </div>
</div>
<div style="padding-bottom: calc((100% - 0px) / 3); position: relative">
<div
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
class="overflow-hidden rounded-borders"
>
<slider
ref="slider"
:options="options"
@slide="slideHandler"
style="height: 100%"
>
<slideritem
v-if="dataList.videoStr"
style="width: 80%"
class="q-mx-sm"
key="video"
>
<vue-core-video-players
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 class="row rounded-borders bg-white overflow-hidden relative">
<q-img class="col-5 cursor-pointer" :src="hotelDetails.hotelImageUrl1" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl1)"/>
<div class="col column q-ml-xs">
<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)"/>
</div>
<div class="col column q-ml-xs">
<q-img class="cursor-pointer" :src="hotelDetails.hotelImageUrl4" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl4)"/>
<q-img class="q-mt-xs cursor-pointer" :src="hotelDetails.hotelImageUrl5" :ratio="16/9" @click="showImageHandler(hotelDetails.hotelImageUrl5)"/>
</div>
<div class="absolute" style="right: 10px;bottom: 10px;">
<span class="text-white f12 q-pa-xs q-px-md row items-center cursor-pointer"
style="background: rgba(23,23,23,.5);border-radius: 30px;"
@click="showImageHandler(hotelDetails.hotelImageUrl1)">
<q-icon name="images"></q-icon>
<span>{{images.length}}</span>
</span>
</div>
</div>
<div
class="q-py-lg"
:class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }"
>
<div class="col q-mr-lg">
<div class="f30 bold ellipsis-2-lines">{{ dataList.Name }}</div>
<!-- <div class="text-h6 ellipsis-2-lines">{{ dataList.Description }}</div> -->
<div class="f30 bold row items-center">
<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">
<q-icon
name="iconfont icondingweixiao"
......@@ -132,19 +262,26 @@
<span v-if="i + 1 != citys.length" class="q-mr-sm">,</span>
</span>
</span> -->
<span>{{dataList.Address}}</span>
<span>{{ hotelSummary.address }}</span>
</div>
<div class="flex">
<div
class="tag tag-blue"
v-for="item in dataList.Array"
:key="item"
>
{{ item }}
</div>
<div class="tag tag-red" v-for="item in dataList.Array" :key="item">
{{ item }}
</div>
<div class="q-mt-md row">
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconOwner-1"
label=" 印象自組團"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont icontime"
:label="`住宿時間 ${liveNvm} 晚`" />
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconnetwork-fill"
label="日本語/中文 導覽"
/>
</div>
</div>
<div
......@@ -166,26 +303,11 @@
color="primary"
label="選擇方案"
unelevated
@click="goScrollHandler('#scheme')"
@click="goScrollHandler(priceListHeight)"
:class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
/>
</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
class="bg-white"
......@@ -213,7 +335,7 @@
<q-tab
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.id)"
@click="goScrollHandler(x.top + 20)"
:name="x.display"
:label="x.display"
></q-tab>
......@@ -234,41 +356,6 @@
style="max-width: 1200px; margin-left: auto; margin-right: auto"
>
<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
style="
background: #fff;
......@@ -277,39 +364,6 @@
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>
......@@ -317,7 +371,7 @@
class="bg-white rounded-borders q-mt-md"
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="text-subtitle1 text-weight-bold row items-center"
......@@ -361,29 +415,12 @@
最早可預訂日期：{{ dataList.priceList[0].startDate }}
</div>
</div>
</div> -->
</div>
<div
class="q-pa-md"
style="border-top: 1px solid #eee"
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="col">
<calendar
......@@ -419,7 +456,6 @@
</div> -->
<div
v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto"
class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }"
......@@ -431,87 +467,115 @@
class="text-h5 text-weight-bold text-left q-mt-xl"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}" id="product">产品介绍</div>
}" ref="product">產品介紹</div>
<div
class="q-mt-md"
ref="diyContext"
:style="{ zoom: zoomDiyContext }"
v-html="dataList.Descriptions"
></div>
<div id="server"
>
<div class="q-pb-md">{{hotelDetails.hotelDescription}}</div>
<div class="q-pb-md">{{hotelDetails.bathUsage}}</div>
<div>{{hotelDetails.hotelRooms}}</div>
</div>
<div ref="server"
class="text-h5 text-weight-bold text-left q-mt-xl"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}">服务设施</div>
<div class="q-mt-sm flex flex-wrap">
<template v-for="item in dataList.FacilityServices">
<div style="width: 25%; padding: 10px" v-for="el in item.list" :key="el.ID">{{el.Content}}</div>
</template>
<div class="q-mt-sm column">
<div class="q-pb-md"><span class="text-weight-bold">接送服务</span> {{hotelDetails.pickupService}}</div>
<div class="q-pb-md row no-wrap">
<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
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
class="text-subtitle1 text-weight-bold q-my-md"
:class="{
'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="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
費用不含
購買須知
</div>
<div
class="q-mt-md trip-text q-pb-xl"
v-html="'費用不含'"
class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)"
: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
id="warning"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="warning"
ref="assemblypoint"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
購買須知
酒店地址
</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)"
v-html="
dataList.feature
? dataList.feature.importantTip || '暂无购买须知'
: '暂无购买须知'
"
:class="{
'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
id="tips"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="tips"
:class="{
......@@ -523,17 +587,12 @@
<div
class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-info)"
v-html="
dataList.feature
? dataList.feature.warmTip || '暂无溫馨提示'
: '暂无溫馨提示'
"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
>
預定成功後房間將為您整晚保留</div>
<div
id="cancelTips"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="cancelTips"
:class="{
......@@ -570,23 +629,33 @@
<template v-if="$q.platform.is.desktop">
<div class="col-1"></div>
<div class="col q-ml-xl position-relative">
<div style="position: sticky; top: 100px">
<div style="position: sticky; top: 200px">
<div
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
v-for="(x, i) in navs"
: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>
</template>
</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>
</template>
<script>
import { date } from 'quasar'
import { slider, slideritem } from "vue-concise-slider";
import calendar from "../components/trip/calendar.vue";
import OrderPreview from "src/components/trip/orderPreview.vue";
......@@ -598,6 +667,8 @@ import hotelMap from "./hotel/hotelMap.vue";
import hotelDes from "./hotel/hotelDes.vue";
import comments from "./hotel/comments.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 {
props: [],
components: {
......@@ -612,7 +683,9 @@ export default {
hotelMap,
hotelDes,
comments,
selectRoom
selectRoom,
componentsMap,
ImagePreview
},
data() {
return {
......@@ -622,13 +695,61 @@ export default {
searchDate: "",
clickDate: "",
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: {
configId: "",
cityId: 0,
preview: 0,
tcid: 0,
teamType: 0,
isGetPriceFlight: true,
// configId: "",
// cityId: 0,
// preview: 0,
// tcid: 0,
// teamType: 0,
// 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: {},
isShow: false,
......@@ -672,37 +793,37 @@ export default {
],
navs: [
{
id: "#product",
val: "product",
top: 0,
isActive: false,
display: "產品介紹",
},
{
id: "#server",
val: "server",
top: 0,
isActive: false,
display: "服务设施",
},
// {
// id: "#price",
// top: 0,
// isActive: false,
// display: "費用說明",
// },
{
id: "#warning",
val: "assemblypoint",
top: 0,
isActive: false,
display: "酒店地址",
},
{
val: "warning",
top: 0,
isActive: false,
display: "購買須知",
},
{
id: "#tips",
val: "tips",
top: 0,
isActive: false,
display: "溫馨提示",
},
{
id: "#cancelTips",
val: "cancelTips",
top: 0,
isActive: false,
display: "取消政策",
......@@ -724,18 +845,23 @@ export default {
},
created() {
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) {
this.msg.tcid = decodeURIComponent(this.$route.params.tcid);
if(this.$route.params.b2CPrice){
this.MinPrice = this.$route.params.b2CPrice
}
},
mounted() {
document.getElementsByTagName("body")[0].style.background =
"rgb(255, 255, 255)";
if (localStorage.baseifo) {
this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
}
window.addEventListener("scroll", this.handleScroll);
this.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY-MM-DD')
this.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY-MM-DD')
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);
this.getData();
},
......@@ -743,6 +869,62 @@ export default {
document.getElementsByTagName("body")[0].style = "";
},
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) {
if (this.selectedCar === id) {
this.selectedCar = "";
......@@ -753,6 +935,38 @@ export default {
getTopNum(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() {
return {
left:
......@@ -767,9 +981,8 @@ export default {
0,
};
},
goScrollHandler(id) {
console.log("scrollIntoView", id);
document.querySelector(id).scrollIntoView({ behavior: "smooth" });
goScrollHandler(top) {
window.scrollTo(0, top);
},
slideHandler(e) {
this.options.currentPage = e.currentPage;
......@@ -810,75 +1023,320 @@ export default {
getData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetHotelDetail",
{ HotelId: decodeURIComponent(this.$route.params.id) },
(r) => {
if (r.data.resultCode == 1) {
console.log("getData", r);
this.dataList = r.data.data;
this.dataList.FacilityServices = JSON.parse(this.dataList.FacilityServices)
this.dataList.imgCover = this.dataList.List.map(item => {
return item.Path
"dmc_post_Get_GetJAPAN_HotelDetail",
this.detaMsg,
(res) => {
this.$q.loading.hide();
if (res.data.resultCode == 1) {
this.dataList = res.data.data;
this.hotelDetails = res.data.data.hotelDetails;
this.hotelSummary = res.data.data.hotelSummary;
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;
this.isDirect = this.dataList.isDirect;
if (this.dataList.videoStr && this.dataList.videoStr != "") {
this.options.loop = false;
this.options.currentPage = 1;
this.$nextTick(() => {
setTimeout(() => {
let t = document.querySelectorAll(".slider-wrapper");
if (t.length > 0) {
let d = t[0].getBoundingClientRect();
this.videoPosition = d.top + d.height;
}
}, 1000);
});
//拆分酒店服务与设施
if (this.hotelDetails.roomEquipments != "") {
let ServeArr = this.hotelDetails.roomEquipments.split(",");
this.Services = [];
if (ServeArr[0] == 1) {
this.Services.push("浴室和厕所");
}
if (ServeArr[1] == 0) {
this.Services.push("公共汽车厕所CD（有全室巴士）");
}
if (ServeArr[1] == 1) {
this.Services.push("公共汽车厕所CD（有一部分巴士）");
}
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 (
this.dataList.feature &&
this.dataList.feature.featureHtml != ""
) {
let tw =
parseFloat(
this.$refs.diyContext.getBoundingClientRect().width
) / 1123.0;
//拆分网络连接
if (this.hotelDetails.internetAccessibilityOfTheRoom != "") {
this.InterArr = [];
let InternetArr = this.hotelDetails.internetAccessibilityOfTheRoom.split(
","
);
if (InternetArr[0] == 1) {
this.InterArr.push("客房网络连接");
}
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");
for (let i = 0; i < divArr.length; i++) {
let div = divArr[i];
if (this.$q.platform.is.mobile) {
div.style.zoom =
div.offsetWidth > 1000
? 0.999
: document.documentElement.clientWidth / 1123.0;
} else {
div.style.zoom = 1;
}
}
if (HotSpring[1] == 1) {
this.HotSpring.push("有包租浴室(没有条件)");
} else if (HotSpring[1] == 2) {
this.HotSpring.push("有包租浴室(有条件)");
}
if (HotSpring[11] == 1) {
this.HotSpring.push("阿米尼蒂:脸·手巾(免费)");
} else if (HotSpring[11] == 2) {
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 {
document
.querySelector("#scrollId .q-page-container")
.addEventListener("scroll", this.handleScrollDay);
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
if (HotSpring[16] == 1) {
this.HotSpring.push("阿米尼蒂:沐浴露(免费)");
} else if (HotSpring[16] == 2) {
this.HotSpring.push("阿米尼蒂:沐浴露(收费)");
}
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 {
this.$q.notify({
type: "negative",
message: r.data.message,
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
......@@ -892,15 +1350,68 @@ export default {
this.isShowNav = false;
}
},
goNavList(val) {
let newval = "#" + val;
document.querySelector(newval).scrollIntoView(true);
},
},
};
</script>
<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 {
transform: scale(1);
transition-timing-function: ease;
......@@ -950,26 +1461,6 @@ export default {
border-radius: 50%;
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 {
zoom: calc(100 / 1000);
}
......
src/router/routes.js
View file @ 7dacbb94
......@@ -45,7 +45,7 @@ const routes = [{
component: () =>
import ('pages/ScenicSpotTicket/orderForm.vue')
}, { // 酒店
path: '/detailHotal/:id',
path: '/detailHotal/:id/:b2CPrice',
component: () =>
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