Skip to content

M
million
Commit d68d3ce9 authored by 沈良进's avatar 沈良进
Browse files
Options

二级城市页,酒店详情页优化

parent b356a84f
Show whitespace changes
Inline Side-by-side
Showing with 1726 additions and 49 deletions
src/components/navs/hor-big-one.vue
View file @ d68d3ce9
...@@ -530,11 +530,8 @@ export default { ...@@ -530,11 +530,8 @@ export default {
}, },
methods: { methods: {
handleSelectArea(item) { handleSelectArea(item) {
this.CommonJump("/search", { this.CommonJump("/city/" + item.Id, {
qsearchKey: this.searchKey, id: item.Id
qsearchDate: this.searchDate,
qsearchEndDate: this.searchEndDate,
areaId: item.Id
}); });
}, },
handleCategoryChage(item) { handleCategoryChage(item) {
......
src/components/searchdata/kkday.vue
View file @ d68d3ce9
...@@ -723,6 +723,12 @@ this.dayArray = this.dayArray.filter(item => arr.includes(item.id)) ...@@ -723,6 +723,12 @@ this.dayArray = this.dayArray.filter(item => arr.includes(item.id))
{} {}
); );
return return
}else if(item.productType === 3) { // 住宿
this.CommonJump(
"/detailHotal/"+item.configId,
{}
);
return
} }
this.CommonJump( this.CommonJump(
"/detail/" + encodeURIComponent(item.id) + "/" + item.tcid, "/detail/" + encodeURIComponent(item.id) + "/" + item.tcid,
......
src/css/app.scss
View file @ d68d3ce9
...@@ -99,6 +99,9 @@ ...@@ -99,6 +99,9 @@
.f26 { .f26 {
font-size: 26px; font-size: 26px;
} }
.f30 {
font-size: 30px;
}
.f36 { .f36 {
font-size: 36px; font-size: 36px;
} }
......
src/pages/city/cityDetail.vue
View file @ d68d3ce9
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
height: 370px; height: 370px;
background: #e0e0e0; background: #e0e0e0;
border-radius: 8px; border-radius: 8px;
object-fit: cover;
} }
.card-img-box { .card-img-box {
width: 260px; width: 260px;
...@@ -21,6 +22,7 @@ ...@@ -21,6 +22,7 @@
height: 180px; height: 180px;
background: #e0e0e0; background: #e0e0e0;
border-radius: 8px; border-radius: 8px;
object-fit: cover;
} }
.margin-bottom { .margin-bottom {
margin-bottom: 10px; margin-bottom: 10px;
...@@ -64,25 +66,33 @@ ...@@ -64,25 +66,33 @@
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
} }
.name {
top: 20px;
left: 20px;
font-weight: bold;
font-size: 30px;
color: #fff;
}
</style> </style>
<template> <template>
<div class="back"> <div class="back">
<div class="wapper"> <div v-if="detail" class="wapper">
<q-breadcrumbs gutter="none"> <q-breadcrumbs gutter="none">
<q-breadcrumbs-el label="Home" /> <q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" /> <q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" /> <q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs> </q-breadcrumbs>
<div class="flex"> <div class="flex relative">
<div class="absolute name">{{detail.AreaName}}</div>
<img <img
class="main" class="main"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg" :src="detail.ImageList[0]"
/> />
<div class="card-img-box"> <div class="card-img-box">
<img <img
class="card-img margin-bottom" class="card-img q-mb-xs"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg" :src="detail.ImageList[1] || detail.ImageList[0]"
/> />
<img <img
class="card-img" class="card-img"
...@@ -91,7 +101,7 @@ ...@@ -91,7 +101,7 @@
</div> </div>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between q-mt-sm">
<div v-for="item in navList" :key="item.img" class="nav-item"> <div v-for="item in navList" :key="item.img" class="nav-item">
<img <img
class="nav-img" class="nav-img"
...@@ -102,61 +112,61 @@ ...@@ -102,61 +112,61 @@
</div> </div>
<div class="top-title">TOP榜单</div> <div class="top-title">TOP榜单</div>
<div>本地销量最好的商品</div> <div>本地销量最好的商品</div>
<div class="flex justify-between mt"> <div class="mt" style="height: 500px; width: 1200px; overflow-x: auto;">
<topCard v-for="item in 4" :key="item" /> <div style="width: auto">
<topCard v-for="item in detail.TopList" :data="item" :key="item.ID" /></div>
</div> </div>
<div class="top-title">最新推荐</div> <div class="top-title">最新推荐</div>
<div>已售出商品的最新榜單</div> <div>已售出商品的最新榜單</div>
<div class="flex justify-between mt"> <div class="flex justify-between flex-wrap mt">
<likeCard v-for="item in 4" :key="item" /> <likeCard v-for="item in detail.NewList" :data="item" :key="item.ID" />
</div> </div>
<div class="top-title">關於東京</div> <div class="top-title">關於{{detail.AreaName}}</div>
<div class="flex justify-between"> <div class="flex justify-between">
<div style="width: 720px"> <div style="width: 720px">
虽然曾历战火，京都之美仍然遗世独立。只要亲身到访，你就会发现京都把日本的「侘寂」美学诠释得有多淋漓尽致。 {{detail.Introduction}}
作为日本艺妓发源地，值得你深入认识这个古典的文艺世界。花一个早晨在岚山的竹林里静思，学习正宗怀石料理，或是到金阁寺体验宁谧自在。伏见稻荷大社也是另一个必到景点，那著名的鸟居隧道，仿佛引领你进入仙境。
</div> </div>
<div> <div>
<div id="baidu-map"></div> <div id="baidu-map"></div>
</div> </div>
</div> </div>
<div class="top-title">當地天氣</div> <!-- <div class="top-title">當地天氣</div> -->
<div> <div>
<div class="flex"> <!-- <div class="flex">
<div class="time-item" v-for="item in 4" :key="item"> <div class="time-item" v-for="item in 4" :key="item">
<div class="f16">12月-2月</div> <div class="f16">12月-2月</div>
<div class="f26 bold">-12° -17°</div> <div class="f26 bold">-12° -17°</div>
</div> </div>
</div> </div> -->
<div class="flex mt"> <div class="flex mt">
<div class="flex time-item"> <div class="flex items-center time-item">
<img <img
class="info-icon" class="info-icon"
:src="require(`../../assets/img/info-time.png`)" :src="require(`../../assets/img/info-time.png`)"
/> />
<div> <div>
<div class="f16 bold">時區</div> <div class="f16 bold">時區</div>
<div>-12° -17°</div> <!-- <div>-12° -17°</div> -->
</div> </div>
</div> </div>
<div class="flex time-item"> <div class="flex items-center time-item">
<img <img
class="info-icon" class="info-icon"
:src="require('../../assets/img/info-currency.png')" :src="require('../../assets/img/info-currency.png')"
/> />
<div> <div>
<div class="f16 bold">貨幣</div> <div class="f16 bold">貨幣</div>
<div>-12° -17°</div> <!-- <div>-12° -17°</div> -->
</div> </div>
</div> </div>
<div class="flex time-item"> <div class="flex items-center time-item">
<img <img
class="info-icon" class="info-icon"
:src="require(`../../assets/img/info-ele.png`)" :src="require(`../../assets/img/info-ele.png`)"
/> />
<div> <div>
<div class="f16 bold">電壓</div> <div class="f16 bold">電壓</div>
<div>-12° -17°</div> <!-- <div>-12° -17°</div> -->
</div> </div>
</div> </div>
<div class="flex time-item"> <div class="flex time-item">
...@@ -165,13 +175,13 @@ ...@@ -165,13 +175,13 @@
:src="require(`../../assets/img/info-time.png`)" :src="require(`../../assets/img/info-time.png`)"
/> />
<div> <div>
<div class="f16 bold">旅遊時間</div> <div class="f16 bold q-mt-xs">旅遊時間</div>
<div>-12° -17°</div> <!-- <div>-12° -17°</div> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<nearCity /> <nearCity :cityList="detail.AdjacentCityList" />
</div> </div>
</div> </div>
</template> </template>
...@@ -183,6 +193,7 @@ export default { ...@@ -183,6 +193,7 @@ export default {
components: { topCard, likeCard, nearCity }, components: { topCard, likeCard, nearCity },
data() { data() {
return { return {
detail: null,
navList: [ navList: [
{ {
title: "觀光行程", title: "觀光行程",
...@@ -204,11 +215,24 @@ export default { ...@@ -204,11 +215,24 @@ export default {
}; };
}, },
mounted() { mounted() {
this.getData();
this.createMap(); this.createMap();
this.addMarker(); this.addMarker();
this.addLabel() this.addLabel()
}, },
methods: { methods: {
getData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetB2CIndexCityList",
{ AreaId: decodeURIComponent(this.$route.params.id) },
(r) => {
this.detail = r.data.data
this.$q.loading.hide();
},
null
);
},
createMap() { createMap() {
if (!BMapGL) { if (!BMapGL) {
return; return;
......
src/pages/city/components/like-card.vue
View file @ d68d3ce9
...@@ -41,16 +41,16 @@ color: #36A1FA; ...@@ -41,16 +41,16 @@ color: #36A1FA;
class="iconfont icondingweixiao q-icon notranslate" class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px" style="font-size: 14px; margin-right: 8px"
></i> ></i>
<span>大阪·住宿</span> <span>大阪·{{data.ProductType}}</span>
</div> </div>
<img <img
class="card-img" class="card-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg" :src="data.ImgCover"
/> />
</div> </div>
<div class="content"> <div class="content">
<div class="title ellipsis-2">是否私联粉丝沙发萨芬很多事第三方介绍很舒服舒服是否舒服舒服所发生的多多多多多多多多多多多多多多多多多多是否舒服舒服盛世芳华</div> <div class="title ellipsis-2">{{data.Title}}</div>
<div> <!-- <div>
<i <i
class="iconfont icondingweixiao q-icon notranslate" class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px" style="font-size: 14px; margin-right: 8px"
...@@ -59,10 +59,10 @@ color: #36A1FA; ...@@ -59,10 +59,10 @@ color: #36A1FA;
</div> </div>
<div> <div>
<span class="tag-item mb mt" v-for="item in 4" :key="item">开发日志{{item}}</span> <span class="tag-item mb mt" v-for="item in 4" :key="item">开发日志{{item}}</span>
</div> </div> -->
<div class="bold mt"> <div class="bold mt">
CNY CNY
<span>200000</span> <span>{{data.B2CPrice}}</span>
<span class="ml-5 normal">起</span> <span class="ml-5 normal">起</span>
</div> </div>
</div> </div>
...@@ -70,6 +70,11 @@ color: #36A1FA; ...@@ -70,6 +70,11 @@ color: #36A1FA;
</template> </template>
<script> <script>
export default { export default {
props: {
data: {
default: () => ({})
}
},
data() { data() {
return {}; return {};
} }
......
src/pages/city/components/near-city.vue
View file @ d68d3ce9
...@@ -12,11 +12,13 @@ margin-bottom: 10px; ...@@ -12,11 +12,13 @@ margin-bottom: 10px;
width: 210px; width: 210px;
height: 290px; height: 290px;
border-radius: 10px; border-radius: 10px;
margin-right: 20px;
} }
.card-img { .card-img {
width: 210px; width: 210px;
height: 290px; height: 290px;
border-radius: 10px; border-radius: 10px;
object-fit: cover;
} }
.info { .info {
position: absolute; position: absolute;
...@@ -35,15 +37,15 @@ border-radius: 8px; ...@@ -35,15 +37,15 @@ border-radius: 8px;
<template> <template>
<div> <div>
<div class="title">附近的城市</div> <div class="title">附近的城市</div>
<div> <div class="flex">
<div class="relative card"> <div class="relative card" v-for="item in cityList" :key="item.Id">
<img <img
class="card-img" class="card-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg" :src="item.ImageList[0]"
/> />
<div class="info"> <div class="info">
<div>大版</div> <div>{{item.AreaName}}</div>
<div>10Km</div> <!-- <div>10Km</div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -57,6 +59,11 @@ border-radius: 8px; ...@@ -57,6 +59,11 @@ border-radius: 8px;
</template> </template>
<script> <script>
export default { export default {
props: {
cityList: {
default: () => []
}
},
data() { data() {
return {}; return {};
} }
......
src/pages/city/components/top-card.vue
View file @ d68d3ce9
<style scoped> <style scoped>
.card { .card {
display: inline-block;
width: 272px; width: 272px;
margin: 10px;
/* background-color: #fff; */ /* background-color: #fff; */
} }
.address { .address {
...@@ -44,7 +46,7 @@ color: #36A1FA; ...@@ -44,7 +46,7 @@ color: #36A1FA;
class="iconfont icondingweixiao q-icon notranslate" class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px" style="font-size: 14px; margin-right: 8px"
></i> ></i>
<span>大阪·住宿</span> <span>{{data.ProductType}}</span>
</div> </div>
<div class="like"> <div class="like">
<i <i
...@@ -54,11 +56,11 @@ color: #36A1FA; ...@@ -54,11 +56,11 @@ color: #36A1FA;
</div> </div>
<img <img
class="card-img" class="card-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg" :src="data.ImgCover"
/> />
</div> </div>
<div class="title ellipsis-2">是否私联粉丝沙发萨芬很多事第三方介绍很舒服舒服是否舒服舒服所发生的多多多多多多多多多多多多多多多多多多是否舒服舒服盛世芳华</div> <div class="title ellipsis-2">{{data.Title}}</div>
<div> <!-- <div>
<i <i
class="iconfont icondingweixiao q-icon notranslate" class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px" style="font-size: 14px; margin-right: 8px"
...@@ -67,16 +69,21 @@ color: #36A1FA; ...@@ -67,16 +69,21 @@ color: #36A1FA;
</div> </div>
<div> <div>
<span class="tag-item mb mt" v-for="item in 4" :key="item">开发日志{{item}}</span> <span class="tag-item mb mt" v-for="item in 4" :key="item">开发日志{{item}}</span>
</div> </div> -->
<div class="bold mt"> <div class="bold mt">
CNY CNY
<span>200000</span> <span>{{data.B2CPrice}}</span>
<span class="ml-5 normal">起</span> <span class="ml-5 normal">起</span>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: {
data: {
default: () => {}
}
},
data() { data() {
return {}; return {};
} }
......
src/pages/detailsHotal.vue 0 → 100644
View file @ d68d3ce9
<template>
<div style="min-height: 80vh">
<div
style="
position: fixed;
left: 0;
right: 0;
top: 0;
border-top: 1px solid #eee;
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
z-index: 999;
"
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"
>
<span
class="col product-price text-subtitle1 text-weight-bold f30"
style="text-align: left"
>
<span>CNY {{ moneyFormat(dataList.MinPrice, 0) }}</span>
<span class="q-ml-sm f16 text-grey-7">起</span>
</span>
<q-btn
color="primary"
unelevated
class="q-px-xl"
label="選擇方案"
@click="goScrollHandler('#scheme')"
/>
</div>
</div>
<div
v-if="dataList"
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">
<q-breadcrumbs
class="col f12 no-wrap q-mr-md"
v-if="dataList"
style="font-size: 13px"
>
<q-breadcrumbs-el
icon="home"
label="首頁"
class="cursor-pointer"
@click="CommonJump('/index', {})"
/>
<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>
</q-breadcrumbs-el>
<q-breadcrumbs-el
v-if="$q.platform.is.desktop"
:label="dataList.title"
class="text-grey-6 ellipsis"
/>
</q-breadcrumbs>
<div class="text-grey-6 f12">Product No. # {{ dataList.id }}</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>
</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="q-mt-md f12 text-grey-6">
<q-icon
name="iconfont icondingweixiao"
size="16px"
class="q-mr-sm"
/>
<span
>日本 -
<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>
</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>
</div>
<div
:style="{ width: $q.platform.is.mobile ? '100%' : '293px' }"
class="rounded-borders q-px-md"
:class="{
'q-py-lg': $q.platform.is.desktop,
'row justify-between items-center q-mt-sm q-py-sm':
$q.platform.is.mobile,
}"
>
<div class="product-price f30 bold" v-if="dataList.MinPrice > 0">
<!-- CNY：{{ dataList. }} -->
CNY：{{ moneyFormat(dataList.MinPrice, 0) }}
<span class="f16 text-grey-6 normal">起</span>
</div>
<div v-else class="text-subtitle1 f30 bold text-grey-6">暫無報價</div>
<q-btn
color="primary"
label="選擇方案"
unelevated
@click="goScrollHandler('#scheme')"
: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"
style="
position: fixed;
left: 0;
right: 0;
top: -1px;
border-top: 1px solid #eee;
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
z-index: 999;
"
v-if="currentHeight > priceListHeight + 800 && $q.platform.is.mobile"
:style="{ transform: stickyHeight }"
>
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="left"
narrow-indicator
>
<q-tab
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.id)"
:name="x.display"
:label="x.display"
></q-tab>
</q-tabs>
</div>
<div class="flex justify-between q-mx-auto" style="max-width: 1200px">
<hotel-star></hotel-star>
<hotel-des></hotel-des>
<hotel-map></hotel-map>
</div>
<div
v-if="dataList"
class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9"
ref="pricelist"
>
<div
id="scheme"
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;
padding: 20px;
border-radius: 10px;
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>
<!--方案选择区 -->
<div class="flex justify-between">
<div class="f20 flex item-center">
湖岩美术馆 & 爱宝乐园 包车一日游
<span class="cancel">3天前可免费取消</span>
</div>
<div>
<div class="f20">
CNY {{ moneyFormat(dataList.MinPrice, 0)
}}<span class="f14">起</span>
</div>
<div>最早可预订日</div>
</div>
</div>
<div class="flex bold mr about">
关于此方案
<div class="flex normal ml">
<div class="ml">3天前可免费取消</div>
</div>
</div>
<div>
<div class="mt mb bold f18">选择日期、选项</div>
<div class="flex">
<div style="width: 50%">
<div>请选择出发日期</div>
<div>
<div class="flex justify-between f20 bold padding">
<span>{{ currentYM.str }}</span>
<div>
<i
class="iconfont iconpreviewleft"
style="font-size: 28px"
:class="{ gray: isCurrent }"
@click="handleMinus"
></i
><i
@click="handlePlus"
:class="{ gray: isLast }"
class="iconfont iconpreviewright"
style="font-size: 28px"
></i>
</div>
</div>
<table class="date-table">
<thead>
<tr class="row-day">
<th class="cell-day">日</th>
<th class="cell-day">一</th>
<th class="cell-day">二</th>
<th class="cell-day">三</th>
<th class="cell-day">四</th>
<th class="cell-day">五</th>
<th class="cell-day">六</th>
</tr>
</thead>
<tbody>
<tr
class="row-date"
v-for="(item, index) in daysList"
:key="index"
>
<td
class="cell-date selectable"
v-for="(el, index) in item"
:key="index"
>
<div v-if="el && el.disabled">
<div v-if="el" class="date-num disabled">
{{ el.day }}
</div>
</div>
<div v-else>
<div v-if="el" class="date-num">{{ el.day }}</div>
<div v-if="el" class="price">
{{ el.price || "1566" }} 起
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="width: 40%; margin-left: 10%">
<div class="mt mb">车辆选择</div>
<div>
<q-btn
@click="handleSelect(item.Id)"
class="car-tag mr"
:class="{ 'car-select': item.Id === selectedCar }"
v-for="item in dataList.CarTypeList"
:key="item.Id"
>
{{ item.CarName }}({{ item.PeopleNum }}人)
</q-btn>
</div>
<div class="mt mb">选择辆数</div>
<div class="flex justify-between bold f18 mt mb">
<span>辆数</span>
<div>
<span>CNY 1,667 起/每辆</span>
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i>
<i class="iconfont iconminus"></i>
<span>1</span>
<i class="iconfont iconplus"></i>
</div>
</div>
<q-separator />
<div class="flex justify-between mt mb">
<span>总金额</span>
<span class="f20">CNY 100</span>
</div>
<div class="flex flex-end">
<q-btn class="mr" label="加入购物车"></q-btn>
<q-btn label="立即订购"></q-btn>
</div>
</div>
</div>
<div></div>
</div>
<div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
所選方案詳情
</div>
<div
class="bg-white rounded-borders q-mt-md"
v-if="dataList.priceList && dataList.priceList.length > 0"
>
<div class="q-pa-md row">
<div class="col">
<div
class="text-subtitle1 text-weight-bold row items-center"
v-if="$q.platform.is.desktop"
>
<span class="q-mr-md">行程標準出行方案</span>
<q-chip
square
color="orange"
size="sm"
text-color="grey-2"
class="text-light"
label="15天前可免費取消"
/>
</div>
<div class="text-grey f12">
<ul class="q-pl-md no-margin">
<li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i">
{{ x }}
</li>
</ul>
</div>
</div>
<div class="" v-if="$q.platform.is.desktop">
<div class="row items-center">
<span class="product-price text-h6 q-mr-md"
>CNY
{{
moneyFormat(dataList.priceList[0].originalB2CPrice, 0)
}}</span
>
<q-btn
color="primary"
outline
:label="showOrderPreview ? '取消選擇' : '選擇'"
@click="showOrderPreview = !showOrderPreview"
class="q-px-lg"
/>
</div>
<div class="text-info q-mt-md text-right">
最早可預訂日期：{{ dataList.priceList[0].startDate }}
</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
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendar"
></calendar>
</div>
<div class="col q-ml-xl">
<order-preview
:price="currentPrice"
@reset="resetHandler"
></order-preview>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="max-width: 1200px; margin-left: auto; margin-right: auto">
<div
id="comment"
class="text-h5 text-weight-bold text-left q-mt-xl mb"
ref="comment"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
评价
</div>
<comments></comments>
</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 }"
>
<div
:class="{ 'col-8': $q.platform.is.desktop, col: $q.platform.is.mobile }"
>
<div id="product">产品介绍</div>
<div
class="q-mt-md q-pb-xl"
ref="diyContext"
:style="{ zoom: zoomDiyContext }"
v-html="dataList.feature.featureHtml"
v-if="dataList.feature && dataList.feature.featureHtml != ''"
></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="{
'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-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
></div>
<div
id="warning"
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-lg trip-text bg-orange-1 q-pa-md 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
id="tips"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="tips"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
溫馨提示
</div>
<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
id="cancelTips"
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="cancelTips"
:class="{
'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
取消政策
</div>
<div
class="q-mt-lg trip-text q-mb-xl"
:class="{
'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
}"
>
<ul class="no-padding text-grey-9 q-ml-md">
<li>所选日期 15 天（含）之前取消，收取手续费 0%</li>
<li class="q-mt-sm">所选日期 8 ~ 14 天之间取消，收取手续费 30%</li>
<li class="q-mt-sm">所选日期 4 ~ 7 天之间取消，收取手续费 50%</li>
<li class="q-mt-sm">所选日期 1 ~ 3 天之间取消，收取手续费 80%</li>
<li class="q-mt-sm">所选日期 0 ~ 0 天之间取消，收取手续费 100%</li>
</ul>
<div class="q-mt-lg f12 text-grey-6">
<q-icon name="iconfont icontishi" class="q-mr-sm" />
<span
>注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
2-5
个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14
个工作天内退款。</span
>
</div>
</div>
</div>
<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
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.id)"
>
{{ x.display }}
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script>
import { slider, slideritem } from "vue-concise-slider";
import calendar from "../components/trip/calendar.vue";
import OrderPreview from "src/components/trip/orderPreview.vue";
import smaple from "src/components/trip/smaple.vue";
import Trip from "src/components/trip/trip.vue";
import block from "src/components/trip/block/index";
import hotelStar from "./hotel/hotelStar.vue";
import hotelMap from "./hotel/hotelMap.vue";
import hotelDes from "./hotel/hotelDes.vue";
import comments from "./hotel/comments.vue";
import * as dayjs from "dayjs";
export default {
props: [],
components: {
slider,
slideritem,
calendar,
OrderPreview,
smaple,
Trip,
block,
hotelStar,
hotelMap,
hotelDes,
comments,
},
data() {
return {
selectedCar: "",
currentYM: { year: 2023, month: 2, str: "2023-02" }, // 当前年月
isCurrent: false,
isLast: false,
daysList: [],
tab: "",
searchDate: "",
clickDate: "",
slide: 1,
msg: {
configId: "",
cityId: 0,
preview: 0,
tcid: 0,
teamType: 0,
isGetPriceFlight: true,
},
currentPrice: {},
isShow: false,
dataList: null,
isDirect: 1,
TripConfig: {},
isShowNav: false,
clickIndex: 1,
isLoading: false,
isShowDialog: false,
citys: [],
//Slider configuration [obj]
options: {
currentPage: 0,
speed: 300,
itemAnimation: true,
centeredSlides: true,
thresholdDistance: 100,
thresholdTime: 300,
loopedSlides: 2,
slidesToScroll: 1,
loop: true,
},
warnBuy: [
"未满 2 岁幼儿不占位可免费参加（不含座位，餐点，门票，床位），请先于下订时在「备注栏」告知。",
"如需要單人房，請購買單房",
"不占床2-11(包含)岁幼童可购买儿童价，如需占床請購買成人價",
"12歲以上皆視同成人售價",
],
showOrderPreview: false,
videoPosition: 0,
currentHeight: 0,
isPictureInPicture: false,
days: [
{
val: "",
top: 0,
isActive: false,
display: "",
},
],
navs: [
{
id: "#product",
top: 0,
isActive: false,
display: "產品介紹",
},
{
id: "#price",
top: 0,
isActive: false,
display: "費用說明",
},
{
id: "#warning",
top: 0,
isActive: false,
display: "購買須知",
},
{
id: "#tips",
top: 0,
isActive: false,
display: "溫馨提示",
},
{
id: "#cancelTips",
top: 0,
isActive: false,
display: "取消政策",
},
],
priceListHeight: 0,
stickyHeight: 0,
zoomDiyContext: 1,
};
},
watch: {
days: {
handler: function (val, oldval) {
this.days = val;
},
immediate: true,
deep: true,
},
},
created() {
if (this.$route.params.id) {
this.msg.configId = decodeURIComponent(this.$route.params.id);
}
if (this.$route.params.tcid) {
this.msg.tcid = decodeURIComponent(this.$route.params.tcid);
}
},
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.menu);
this.getData();
this.getPriceData();
},
beforeDestroy() {
document.getElementsByTagName("body")[0].style = "";
},
methods: {
handleSelect(id) {
if (this.selectedCar === id) {
this.selectedCar = "";
} else {
this.selectedCar = id;
}
},
handleMinus() {
if (this.isCurrent) return;
const { str, year, month } = this.currentYM;
if (month === 1) {
this.currentYM = {
year: year - 1,
month: 12,
str: `${year - 1}-12`,
};
} else {
this.currentYM = {
year: year,
month: month - 1,
str: `${year}-${month - 1 > 10 ? month - 1 : "0" + (month - 1)}`,
};
}
this.getPriceData();
},
handlePlus() {
if (this.isLast) return;
const { str, year, month } = this.currentYM;
if (month === 12) {
this.currentYM = {
year: year + 1,
month: 1,
str: `${year + 1}-01`,
};
} else {
this.currentYM = {
year: year,
month: month + 1,
str: `${year}-${month + 1 >= 10 ? month + 1 : "0" + (month + 1)}`,
};
}
this.getPriceData();
},
getTopNum(x) {
this.days = JSON.parse(x);
},
getScroll() {
return {
left:
window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft ||
0,
top:
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0,
};
},
goScrollHandler(id) {
console.log("scrollIntoView", id);
document.querySelector(id).scrollIntoView({ behavior: "smooth" });
},
slideHandler(e) {
this.options.currentPage = e.currentPage;
if (
e.currentPage != 0 &&
this.$refs.video &&
this.$refs.video.isPlaying
) {
this.$refs.video.pause();
}
},
playHandler(e) {},
pauseHandler(e) {},
timeChangeHandler(e) {
//console.log(e)
},
//
seekedChangeHandler(e) {
//console.log(e)
},
resetHandler() {
this.currentPrice.startDate = "";
this.$refs.calendar.reset();
},
changeChosenDateHandler(val) {
val.price.version = new Date().getTime();
this.currentPrice = JSON.parse(JSON.stringify(val.price));
this.$refs.qDateProxy.hide();
},
showDialog() {
this.isShowDialog = true;
},
//关闭弹窗
closeDialog() {
this.isShowDialog = false;
},
// 获取详情
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.imgCover = this.dataList.ImageList;
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);
});
}
this.$nextTick(() => {
if (
this.dataList.feature &&
this.dataList.feature.featureHtml != ""
) {
let tw =
parseFloat(
this.$refs.diyContext.getBoundingClientRect().width
) / 1123.0;
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;
}
}
this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
}
try {
document
.querySelector("#scrollId .q-page-container")
.addEventListener("scroll", this.handleScrollDay);
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
}
});
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
},
getPriceData() {
this.$q.loading.show();
this.apipost(
"b2c_get_GetHotelMonthPrice",
{
HotelId: decodeURIComponent(this.$route.params.id),
Month: this.currentYM.str,
},
(r) => {
let list = [[]];
let y = 0; // 元素纵向下标
let day = 0;
if (r.data.resultCode == 1) {
let week = dayjs(this.currentYM.str + "-01").day();
console.log("week", week);
list[0].length = week;
const isCurrent =
this.currentYM.year === dayjs().year() &&
this.currentYM.month === dayjs().month() + 1;
this.isCurrent = isCurrent;
this.isLast =
this.currentYM.year === dayjs().year() + 1 &&
this.currentYM.month === dayjs().month() + 1;
let days = dayjs(r.data.data[0].Date).date();
// 如果是当前月
if (isCurrent) {
day = days;
for (let i = 1; i <= days; i++) {
list[y].push({
day: i,
disabled: true,
});
week++;
if (week === 7) {
week = 0;
y++;
list[y] = [];
}
}
}
r.data.data.forEach((item, index) => {
if (!isCurrent || index >= days) {
list[y].push({
...item,
day: ++day,
});
week++;
if (week === 7) {
week = 0;
y++;
list[y] = [];
}
}
});
this.daysList = list;
console.log("list", list);
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
this.$q.loading.hide();
},
null
);
},
menu() {
this.scroll =
document.documentElement.scrollTop || document.body.scrollTop;
if (this.scroll > 300) {
this.isShowNav = true;
} else {
this.isShowNav = false;
}
},
goNavList(val) {
let newval = "#" + val;
document.querySelector(newval).scrollIntoView(true);
},
},
};
</script>
<style>
.slider-item {
transform: scale(1);
transition-timing-function: ease;
transition-duration: 300ms;
}
.slider-item.slider-active {
transform: scale(1);
z-index: 999;
}
.trip-text img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
.trip-text {
line-height: 1.6;
}
.slider-item.slider-active-copy {
transform: scale(1);
z-index: 999;
}
.active-trip-module {
color: var(--q-color-primary);
font-weight: 800;
position: relative;
}
.active-trip-module::before {
position: absolute;
content: " ";
top: 0;
bottom: 0;
left: -25px;
width: 5px;
border-radius: 5px;
background: var(--q-color-primary);
}
.trip-module {
color: #9e9e9e;
transition: all 0.3s;
font-weight: 100;
text-align: center;
line-height: 38px;
font-size: 18px;
width: 38px;
height: 38px;
border: 1px solid #ccc;
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);
}
</style>
<style scoped>
.car-select {
background: #ef7a70;
color: #fff;
}
.gray {
color: #999;
}
.date-table {
width: 100%;
padding: 5px;
border-collapse: separate;
table-layout: fixed;
}
.cell-day {
padding: 10px 0 20px;
text-align: center;
color: #666;
font-weight: 700;
}
.cell-date.selectable {
cursor: pointer;
}
.cell-date {
position: relative;
padding: 8px 4px;
border-radius: 6px;
text-align: center;
vertical-align: baseline;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cell-date .date-num {
font-size: 1.6rem;
font-weight: 700;
}
.disabled {
color: #666;
}
.option-booking .cell-date .price {
min-height: 20px;
color: #666;
font-size: 1.2rem;
}
.cell-date.selected.selected-end {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
position: relative;
}
.cell-date.selected.selected-start {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.cell-date.selected.selected-end,
.cell-date.selected.selected-start {
color: #fff;
background-color: #26bdc9;
}
.cancel {
background-color: #ef7a70;
margin-left: 10px;
padding: 4px 8px;
border-radius: 4px;
color: #fff;
font-size: 12px;
}
.about {
background-color: #f6f6f6;
padding: 15px 20px;
margin: 20px 0;
border-radius: 10px;
}
.tag {
height: 28px;
border-radius: 4px;
line-height: 28px;
padding: 0 14px;
}
.tag-blue {
background: #eff7fe;
color: #36a1fa;
}
.tag-red {
background: #ee4454;
color: #ee4454;
}
.room-item {
padding: 25px;
border-radius: 8px;
background: #ffffff;
}
.room-img {
width: 303px;
height: 176px;
border-radius: 8px;
}
.canuse {
color: #2d90ff;
}
.select-btn {
width: 100px;
height: 42px;
background: #ffffff;
border: 1px solid #ee4454;
border-radius: 8px;
color: #ee4454;
}
</style>
\ No newline at end of file
src/pages/hotel/comment.vue 0 → 100644
View file @ d68d3ce9
<style scoped>
.card {
padding: 20px;
width: 560px;
border: 1px solid #f0efef;
border-radius: 8px;
}
.avator {
width: 34px;
height: 34px;
background: #000000;
border-radius: 50%;
}
.img {
width: 80px;
height: 80px;
border-radius: 8px;
}
</style>
<template>
<div class="card">
<div class="flex item-center justify-between">
<div class="flex item-center">
<img
class="avator"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
<span class="ml">昵称</span>
</div>
<span class="f12 text-grey-14">评价日期:2023年2月21日</span>
</div>
<div class="mt mb flex">
<star :value="3.5"></star><span>超赞</span>
</div>
<div class="f12 text-grey-14">
高级双人房。两人。一晚
</div>
<div class="mt mb">
评价内容
</div>
<div class="flex flex-wrap">
<img
class="img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
</div>
</div>
</template>
<script>
import star from './star.vue'
export default {
components: {star},
data() {
return {};
},
};
</script>
src/pages/hotel/comments.vue 0 → 100644
View file @ d68d3ce9
<style scoped>
.number {
font-size: 46px;
font-weight: bold;
color: #000;
line-height: 42px;
}
.all {
height: 10px;
width: 230px;
border-radius: 5px;
background: #eee;
}
.fill {
height: 10px;
width: 230px;
border-radius: 5px;
background: #2D90FF;
}
</style>
<template>
<div class="q-mt-lg">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex items-end mr">
<span class="number">4.5</span>
<span>/5</span>
</div>
<star :value="4"></star>
</div>
<div class="ml custom-pointer" @click="showCommentsList">
<span>200+條評價</span>
</div>
</div>
<div class="flex justify-between q-mt-lg">
<div v-for="item in list" :key="item.id">
<div>{{item.label}}</div>
<div class="flex items-center">
<div class="relative all">
<span class="absolute fill" :style="{width: item.score/5 * 100 + '%'}"></span>
</div>
<span class="q-ml-sm">{{item.score}}</span>
</div>
</div>
</div>
<div class="flex justify-between wrap">
<comment class="margin" v-for="item in 3" :key="item"></comment>
</div>
</div>
</template>
<script>
import comment from "./comment.vue";
import star from "./star.vue";
export default {
components: { comment, star },
data() {
return {
list: [{
label: '位置',
score: 4,
id: 1
},{
label: '服务',
score: 5,
id: 2
},{
label: '清洁',
score: 3.6,
id: 3
},{
label: '环境&卫生',
score: 4.5,
id: 4
}]
};
},
methods: {
showCommentsList() {
this.show = true;
}
}
};
</script>
src/pages/hotel/hotelDes.vue 0 → 100644
View file @ d68d3ce9
<style scoped>
.card {width: 380px;
height: 139px;
padding: 20px;
border: 1px solid #F0EFEF;
border-radius: 8px;}
.des {
margin-top: 5px;
height: 70px;
overflow: hidden;
}
</style>
<template>
<div class="card">
<div class="f16 bold">酒店简介</div>
<div class="f12 des">[位于深圳（罗湖）]Innogo Hotel位于深圳罗湖，距离罗湖口岸只有 4 分钟车程，且距离东门步行街也只有 6 分钟车程。 此酒店距离大埔旧墟 10.3 英里（16.6 公里），距离国际贸易中心大厦 1.1 英里（1.8 公里）。 价格说明： 划线价格为参考价格，指商品或服务的门市价、服务提供商的指导价、零售价或曾经展示过的销售价格，并非原价，该价格仅供您参考。 未划线价格指商品或服务的实时标价，为划线价基础上计算出来的优惠价格。具体成交价格根据商品或服务参加活动，或会员使用优惠券等发生变化，最终以订单结算页价格为准。</div>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
src/pages/hotel/hotelMap.vue 0 → 100644
View file @ d68d3ce9
<style scoped>
.card {width: 380px;
height: 139px;
border: 1px solid #F0EFEF;
border-radius: 8px;}
</style>
<template>
<div class="card" id="baidu-map"></div>
</template>
<script>
export default {
data() {
return {}
},mounted() {
this.createMap();
this.addMarker();
this.addLabel()
},
methods: {
createMap() {
if (!BMapGL) {
return;
}
let map = new BMapGL.Map("baidu-map"); // 创建地图实例
let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
this.map = map;
},
addMarker() {
let icon = require(`../../assets/img/info-time.png`);
var myIcon = new BMapGL.Icon(icon, new BMapGL.Size(23, 25), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
// imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, { icon: myIcon });
this.map.addOverlay(marker);
},
addLabel() {
var point = new BMapGL.Point(116.404, 39.915);
var content = "label";
var label = new BMapGL.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(10, -80), // 设置标注的偏移量
});
this.map.addOverlay(label); // 将标注添加到地图中
label.addEventListener("click", function () {
alert("您点击了标注");
});
label.setStyle({
// 设置label的样式
color: "#000",
fontSize: "30px",
border: "2px solid #1E90FF",
});
},
},
}
</script>
src/pages/hotel/hotelStar.vue 0 → 100644
View file @ d68d3ce9
<style scoped>
.card {
width: 380px;
height: 139px;
padding: 20px;
border: 1px solid #f0efef;
border-radius: 8px;
}
.number {
font-size: 56px;
font-weight: bold;
color: #2d90ff;
line-height: 42px;
}
.avator {width: 34px;
height: 34px;
background: #000000;
border-radius: 50%;}
</style>
<template>
<div class="card">
<div class="flex">
<div>
<span class="number">4.5</span>
<span>/5</span>
</div>
<div class="ml">
<star :value="4"></star>
<span>
<span class="f16">超讚</span>
<span>200+條評價</span>
</span>
</div>
</div>
<div class="flex mt">
<img
class="avator"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
/>
<div class="ml f12">
<div>昵称</div>
<div class="ellipsis">评论内容</div>
</div>
</div>
</div>
</template>
<script>
import star from "./star.vue";
export default {
components: { star },
data() {
return {};
},
};
</script>
src/pages/hotel/star.vue 0 → 100644
View file @ d68d3ce9
<style scoped>
.star {
width: 17px;
height: 18px;
margin-right: 7px;
}
</style>
<template>
<div>
<img v-for="item in starValue" :key="item"
class="star"
:src="require(`../../assets/img/star-fill.png`)"
/><img v-if="isHalf"
class="star"
:src="require(`../../assets/img/star-half.png`)"
/><img v-for="item in residue" :key="item"
class="star"
:src="require(`../../assets/img/star-none.png`)"
/>
</div>
</template>
<script>
export default {
props: {
value: {
default: 5
}
},
data() {
return {
starValue: 5,
isHalf: false,
residue: 0
}
},
created() {
this.starValue = Math.floor(this.value)
this.isHalf = this.starValue !== this.value
this.residue = 5 - Math.ceil(this.value)
}
}
</script>
src/router/routes.js
View file @ d68d3ce9
...@@ -32,10 +32,14 @@ const routes = [{ ...@@ -32,10 +32,14 @@ const routes = [{
path: '/detailCar/:id', path: '/detailCar/:id',
component: () => component: () =>
import('pages/detailsCar.vue') import('pages/detailsCar.vue')
}, { // 酒店
path: '/detailHotal/:id',
component: () =>
import('pages/detailsHotal.vue')
}, { // 旅程 }, { // 旅程
path: '/detail/:id/:tcid', path: '/detail/:id/:tcid',
component: () => component: () =>
import('pages/detailsCar.vue') import('pages/detailsNew.vue')
}, { }, {
path: '/search', //签证护照管理 path: '/search', //签证护照管理
component: () => component: () =>
......
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