Skip to content

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

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

parent b356a84f
Expand all Hide 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 {
},
methods: {
handleSelectArea(item) {
this.CommonJump("/search", {
qsearchKey: this.searchKey,
qsearchDate: this.searchDate,
qsearchEndDate: this.searchEndDate,
areaId: item.Id
this.CommonJump("/city/" + item.Id, {
id: item.Id
});
},
handleCategoryChage(item) {
......
src/components/searchdata/kkday.vue
View file @ d68d3ce9
......@@ -723,6 +723,12 @@ this.dayArray = this.dayArray.filter(item => arr.includes(item.id))
{}
);
return
}else if(item.productType === 3) { // 住宿
this.CommonJump(
"/detailHotal/"+item.configId,
{}
);
return
}
this.CommonJump(
"/detail/" + encodeURIComponent(item.id) + "/" + item.tcid,
......
src/css/app.scss
View file @ d68d3ce9
......@@ -99,6 +99,9 @@
.f26 {
font-size: 26px;
}
.f30 {
font-size: 30px;
}
.f36 {
font-size: 36px;
}
......
src/pages/city/cityDetail.vue
View file @ d68d3ce9
......@@ -11,6 +11,7 @@
height: 370px;
background: #e0e0e0;
border-radius: 8px;
object-fit: cover;
}
.card-img-box {
width: 260px;
......@@ -21,6 +22,7 @@
height: 180px;
background: #e0e0e0;
border-radius: 8px;
object-fit: cover;
}
.margin-bottom {
margin-bottom: 10px;
......@@ -64,25 +66,33 @@
background: #ffffff;
border-radius: 8px;
}
.name {
top: 20px;
left: 20px;
font-weight: bold;
font-size: 30px;
color: #fff;
}
</style>
<template>
<div class="back">
<div class="wapper">
<div v-if="detail" class="wapper">
<q-breadcrumbs gutter="none">
<q-breadcrumbs-el label="Home" />
<q-breadcrumbs-el label="Components" />
<q-breadcrumbs-el label="Breadcrumbs" />
</q-breadcrumbs>
<div class="flex">
<div class="flex relative">
<div class="absolute name">{{detail.AreaName}}</div>
<img
class="main"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
:src="detail.ImageList[0]"
/>
<div class="card-img-box">
<img
class="card-img margin-bottom"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
class="card-img q-mb-xs"
:src="detail.ImageList[1] || detail.ImageList[0]"
/>
<img
class="card-img"
......@@ -91,7 +101,7 @@
</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">
<img
class="nav-img"
......@@ -102,61 +112,61 @@
</div>
<div class="top-title">TOP榜单</div>
<div>本地销量最好的商品</div>
<div class="flex justify-between mt">
<topCard v-for="item in 4" :key="item" />
<div class="mt" style="height: 500px; width: 1200px; overflow-x: auto;">
<div style="width: auto">
<topCard v-for="item in detail.TopList" :data="item" :key="item.ID" /></div>
</div>
<div class="top-title">最新推荐</div>
<div>已售出商品的最新榜單</div>
<div class="flex justify-between mt">
<likeCard v-for="item in 4" :key="item" />
<div class="flex justify-between flex-wrap mt">
<likeCard v-for="item in detail.NewList" :data="item" :key="item.ID" />
</div>
<div class="top-title">關於東京</div>
<div class="top-title">關於{{detail.AreaName}}</div>
<div class="flex justify-between">
<div style="width: 720px">
虽然曾历战火，京都之美仍然遗世独立。只要亲身到访，你就会发现京都把日本的「侘寂」美学诠释得有多淋漓尽致。
作为日本艺妓发源地，值得你深入认识这个古典的文艺世界。花一个早晨在岚山的竹林里静思，学习正宗怀石料理，或是到金阁寺体验宁谧自在。伏见稻荷大社也是另一个必到景点，那著名的鸟居隧道，仿佛引领你进入仙境。
</div>
{{detail.Introduction}}
</div>
<div>
<div id="baidu-map"></div>
</div>
</div>
<div class="top-title">當地天氣</div>
<!-- <div class="top-title">當地天氣</div> -->
<div>
<div class="flex">
<!-- <div class="flex">
<div class="time-item" v-for="item in 4" :key="item">
<div class="f16">12月-2月</div>
<div class="f26 bold">-12° -17°</div>
</div>
</div>
</div> -->
<div class="flex mt">
<div class="flex time-item">
<div class="flex items-center time-item">
<img
class="info-icon"
:src="require(`../../assets/img/info-time.png`)"
/>
<div>
<div class="f16 bold">時區</div>
<div>-12° -17°</div>
<!-- <div>-12° -17°</div> -->
</div>
</div>
<div class="flex time-item">
<div class="flex items-center time-item">
<img
class="info-icon"
:src="require('../../assets/img/info-currency.png')"
/>
<div>
<div class="f16 bold">貨幣</div>
<div>-12° -17°</div>
<!-- <div>-12° -17°</div> -->
</div>
</div>
<div class="flex time-item">
<div class="flex items-center time-item">
<img
class="info-icon"
:src="require(`../../assets/img/info-ele.png`)"
/>
<div>
<div class="f16 bold">電壓</div>
<div>-12° -17°</div>
<!-- <div>-12° -17°</div> -->
</div>
</div>
<div class="flex time-item">
......@@ -165,13 +175,13 @@
:src="require(`../../assets/img/info-time.png`)"
/>
<div>
<div class="f16 bold">旅遊時間</div>
<div>-12° -17°</div>
<div class="f16 bold q-mt-xs">旅遊時間</div>
<!-- <div>-12° -17°</div> -->
</div>
</div>
</div>
</div>
<nearCity />
<nearCity :cityList="detail.AdjacentCityList" />
</div>
</div>
</template>
......@@ -183,6 +193,7 @@ export default {
components: { topCard, likeCard, nearCity },
data() {
return {
detail: null,
navList: [
{
title: "觀光行程",
......@@ -204,11 +215,24 @@ export default {
};
},
mounted() {
this.getData();
this.createMap();
this.addMarker();
this.addLabel()
},
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() {
if (!BMapGL) {
return;
......
src/pages/city/components/like-card.vue
View file @ d68d3ce9
......@@ -41,16 +41,16 @@ color: #36A1FA;
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i>
<span>大阪·住宿</span>
<span>大阪·{{data.ProductType}}</span>
</div>
<img
class="card-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
:src="data.ImgCover"
/>
</div>
<div class="content">
<div class="title ellipsis-2">是否私联粉丝沙发萨芬很多事第三方介绍很舒服舒服是否舒服舒服所发生的多多多多多多多多多多多多多多多多多多是否舒服舒服盛世芳华</div>
<div>
<div class="title ellipsis-2">{{data.Title}}</div>
<!-- <div>
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
......@@ -59,10 +59,10 @@ color: #36A1FA;
</div>
<div>
<span class="tag-item mb mt" v-for="item in 4" :key="item">开发日志{{item}}</span>
</div>
</div> -->
<div class="bold mt">
CNY
<span>200000</span>
<span>{{data.B2CPrice}}</span>
<span class="ml-5 normal">起</span>
</div>
</div>
......@@ -70,6 +70,11 @@ color: #36A1FA;
</template>
<script>
export default {
props: {
data: {
default: () => ({})
}
},
data() {
return {};
}
......
src/pages/city/components/near-city.vue
View file @ d68d3ce9
......@@ -12,11 +12,13 @@ margin-bottom: 10px;
width: 210px;
height: 290px;
border-radius: 10px;
margin-right: 20px;
}
.card-img {
width: 210px;
height: 290px;
border-radius: 10px;
object-fit: cover;
}
.info {
position: absolute;
......@@ -35,15 +37,15 @@ border-radius: 8px;
<template>
<div>
<div class="title">附近的城市</div>
<div>
<div class="relative card">
<div class="flex">
<div class="relative card" v-for="item in cityList" :key="item.Id">
<img
class="card-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
:src="item.ImageList[0]"
/>
<div class="info">
<div>大版</div>
<div>10Km</div>
<div>{{item.AreaName}}</div>
<!-- <div>10Km</div> -->
</div>
</div>
</div>
......@@ -57,6 +59,11 @@ border-radius: 8px;
</template>
<script>
export default {
props: {
cityList: {
default: () => []
}
},
data() {
return {};
}
......
src/pages/city/components/top-card.vue
View file @ d68d3ce9
<style scoped>
.card {
display: inline-block;
width: 272px;
margin: 10px;
/* background-color: #fff; */
}
.address {
......@@ -44,7 +46,7 @@ color: #36A1FA;
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
></i>
<span>大阪·住宿</span>
<span>{{data.ProductType}}</span>
</div>
<div class="like">
<i
......@@ -54,11 +56,11 @@ color: #36A1FA;
</div>
<img
class="card-img"
src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
:src="data.ImgCover"
/>
</div>
<div class="title ellipsis-2">是否私联粉丝沙发萨芬很多事第三方介绍很舒服舒服是否舒服舒服所发生的多多多多多多多多多多多多多多多多多多是否舒服舒服盛世芳华</div>
<div>
<div class="title ellipsis-2">{{data.Title}}</div>
<!-- <div>
<i
class="iconfont icondingweixiao q-icon notranslate"
style="font-size: 14px; margin-right: 8px"
......@@ -67,16 +69,21 @@ color: #36A1FA;
</div>
<div>
<span class="tag-item mb mt" v-for="item in 4" :key="item">开发日志{{item}}</span>
</div>
</div> -->
<div class="bold mt">
CNY
<span>200000</span>
<span>{{data.B2CPrice}}</span>
<span class="ml-5 normal">起</span>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
default: () => {}
}
},
data() {
return {};
}
......
src/pages/detailsHotal.vue 0 → 100644
View file @ d68d3ce9
This diff is collapsed.
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 = [{
path: '/detailCar/:id',
component: () =>
import('pages/detailsCar.vue')
}, { // 酒店
path: '/detailHotal/:id',
component: () =>
import('pages/detailsHotal.vue')
}, { // 旅程
path: '/detail/:id/:tcid',
component: () =>
import('pages/detailsCar.vue')
import('pages/detailsNew.vue')
}, {
path: '/search', //签证护照管理
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