Skip to content

J
jz_Travel
Commit c21f7b6b authored by 罗超's avatar 罗超
Browse files
Options

酒店详细描述页

parent d540c46d
Hide whitespace changes
Inline Side-by-side
Showing with 413 additions and 6 deletions
pages.json
View file @ c21f7b6b
......@@ -726,6 +726,8 @@
"path": "components/time/index"
},{
"path": "picture"
},{
"path": "description"
},{
"path": "detail",
"enablePullDownRefresh": true,
......
pages/hotel/description.vue 0 → 100644
View file @ c21f7b6b
<template>
<view style="height: 100vh;">
<view style="padding:0 45rpx;">
<u-tabs :is-scroll="false" name="Name" :list="navs" active-color="#DFBE6E" :current="active" @change="changeHandler"
:show-bar="true" :activeFontSize="32" inactive-color="#111111" :bold="true" height="100" duration="0" font-size="28"></u-tabs>
</view>
<scroll-view scroll-y="true" class="hotel-descr" @scroll="scroll">
<view class="content">
<view class="flex">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622085515000_731.png" mode="widthFix" style="width: 32rpx;"></image>
<view class="h-name">九寨沟星宇国际大酒店</view>
</view>
<view class="base-box flex flex-wrap">
<view class="item">
<view class="val">2014年</view>
<view class="label">开业时间</view>
</view>
<view class="item">
<view class="val">2017年</view>
<view class="label">装修时间</view>
</view>
<view class="item">
<view class="val">200间</view>
<view class="label">房间数量</view>
</view>
<view class="item">
<view class="val">028-86898868</view>
<view class="label">联系电话</view>
</view>
<view class="item" style="width:100%">
<view class="val">中国，四川，松潘，川主寺镇漳腊磨坎坡路90号</view>
<view class="label">酒店地址</view>
</view>
</view>
<view class="desc">
<view>九寨沟星宇国际大酒店位于九寨沟风景区沟口，距九寨沟风景区沟口约1.8公里，酒店提供送景区入口摆渡车服务。</view>
<view>酒店外观独具藏式宫廷建筑特色，内部设计融入浓郁的民族元素，为您呈现藏族歌舞艺术文化底蕴。客房设计主题鲜明又不失时尚舒适，洗浴用品均按高端品质配备，满足所有出行居停的需要。中西餐厅提供豪华自助餐和川、粤、藏等精美菜式，可容300人同时就餐。大型无柱多功能厅，满足您所有的需求：会议、团建、推介、答谢、宴请......</view>
<view>酒店拥有自己的大型剧院---星宇登嘎甘㑇大剧院，让您足不出户就能享受视听盛宴！酒店深耕主题文化特色与内涵，将抽象的当地民族文化更形象、生动的植入到对客服务和体验中。民族服饰的体验、锅庄舞蹈的互动活动以及登嘎甘㑇情景剧节目等都深得当下爱玩、爱拍、爱分享的游客们喜欢，让住客不再局限于食、宿这样单一化的体验。酒店还引进了超人气机器人店导员，主题文化介绍、带人送物对她而言都是驾轻就熟的工作！可爱、有趣的萌娃天地，让您协同孩子尽享欢乐的度假时光，还可提供婴儿床。</view>
</view>
<view class="empty-block"></view>
<view class="flex" style="margin-top: 50rpx;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622086795000_201.png" mode="widthFix" style="width: 32rpx;"></image>
<view class="h-name">店内设施</view>
</view>
<view class="sheshi">
<view class="she-title">公共服务设施</view>
<view class="she-content">
<text>有可无线上网的公共区域</text>
<text>公共音响系统</text>
<text>公共区域闭路电视监控系统</text>
<text>无烟楼层</text>
<text>电梯</text>
</view>
</view>
<view class="sheshi">
<view class="she-title">房间设施</view>
<view class="she-content">
<text>房间内高速上网</text>
<text>客房WIFI覆盖</text>
<text>遮光窗帘</text>
<text>手动窗帘</text>
<text>空调</text>
<text>沙发</text>
<text>书桌</text>
<text>床具:鸭绒被</text>
<text>床具:毯子或被子</text>
<text>多种规格电源插座</text>
<text>110V电压插座</text>
<text>独立淋浴间</text>
<text>液晶电视机</text>
<text>浴衣</text>
<text>吹风机</text>
<text>24小时热水</text>
<text>拖鞋</text>
<text>电热水壶</text>
</view>
</view>
<view class="sheshi" style="margin-bottom: 50rpx;">
<view class="she-title">酒店服务</view>
<view class="she-content">
<text>行李寄存</text>
<text>24小时前台服务</text>
<text>邮政服务</text>
<text>手动窗帘</text>
<text>叫醒服务</text>
<text>一次性账单结算服务</text>
</view>
</view>
<view class="empty-block"></view>
<view class="flex" style="margin-top: 50rpx;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622094594000_166.png" mode="widthFix" style="width: 32rpx;"></image>
<view class="h-name">订房须知</view>
</view>
<ul class="title-style-one">
<li>
<view class="item-title king regular">入住时间：14:00以后</view>
<view class="item-title king regular">退房时间：13:00以前</view>
</li>
<li>
<view class="item-title">宠物政策</view>
<view class="item-content">允许携带宠物，酒店可能收取额外费用</view>
</li>
<li>
<view class="item-title">酒店提示</view>
<view class="item-content">疫情期间，请佩戴好口罩。住宿提供方支持中国（含港澳台）及外国客人入住</view>
</li>
<li>
<view class="item-title">儿童政策</view>
<view class="item-content">不接受18岁以下客人单独入住。每房间可有1名儿童使用现有床铺。不可加床</view>
</li>
</ul>
<view class="empty-block"></view>
<view class="flex" style="margin-top: 50rpx;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622094594000_166.png" mode="widthFix" style="width: 32rpx;"></image>
<view class="h-name">周边交通</view>
</view>
<view class="sheshi">
<view class="she-title">牛王庙地铁站-D口</view>
<view class="she-content">
<text>九寨沟喜来登国际大酒店·中餐厅步行8分钟</text>
</view>
</view>
<view class="sheshi">
<view class="she-title">东大门地铁站-A口</view>
<view class="she-content">
<text>距离酒店80米，步行约12分钟</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
navs:[{
Id:0,
Name:"酒店信息",
position:0
},{
Id:1,
Name:"规则设施",
position:691
},{
Id:2,
Name:"周边交通",
position:1038
}],
active:0,
scrollTop:0,
oldScrollTop:0
}
},
created() {
uni.setNavigationBarTitle({
title: "酒店详细信息",
});
},
methods: {
scroll(e) {
this.oldScrollTop = e.detail.scrollTop;
console.log(this.oldScrollTop)
this.changeActive()
},
goToPosition(posi) {
this.scrollTop = posi;//this.oldScrollTop;
this.$nextTick(function() {
this.scrollTop = posi;
});
},
changeActive(){
let t=0
this.navs.forEach((x,i)=>{
if(x.position<=this.oldScrollTop){
t=i
}
})
this.active=t
},
changeHandler(i) {
this.active = i;
console.log(this.navs[i].position)
this.goToPosition(this.navs[i].position)
// this.clickItem={};
// this.$nextTick(function(){
// this.clickItem = this.navs.navs[i];
// })
},
},
}
</script>
<style>
.hotel-descr{
height: calc(100% - 50px);
width: 100vw;
color:#111;
}
.hotel-descr .king {
color: #DFBE6E !important;
}
.hotel-descr .regular {
font-weight: 500 !important;
}
.hotel-descr .flex{
display: flex;
align-items: center;
}
.hotel-descr .empty-block{
height: 20rpx;
background: #ECF1F4;
margin: 0 -45rpx;
}
.hotel-descr .flex-wrap{
flex-wrap: wrap;
}
.hotel-descr .content{
padding: 45rpx;
}
.hotel-descr .content .h-name{
font-size: 36rpx;
font-weight: 800;
margin-left: 13rpx;
}
.hotel-descr .content .base-box{
margin: 26rpx 0 56rpx 0;
}
.hotel-descr .content .base-box .item{
width: 50%;
margin-top: 30rpx;
flex-shrink: 0;
}
.hotel-descr .content .base-box .item .val{
font-size: 30rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.hotel-descr .content .base-box .item .label{
font-size: 20rpx;
color: #878787;
}
.hotel-descr .content .desc{
font-size: 24rpx;
font-weight: 500;
color: #4B4949;
line-height: 48rpx;
padding-bottom: 50rpx;
}
.hotel-descr .content .sheshi{
margin-top: 50rpx;
}
.hotel-descr .content .sheshi .she-title{
font-size: 28rpx;
font-weight: 800;
}
.hotel-descr .content .sheshi .she-content{
margin-top: 24rpx;
}
.hotel-descr .content .sheshi .she-content text{
font-size: 24rpx;
font-weight: 500;
color: #4A4A4A;
line-height: 40rpx;
margin-right: 24rpx;
}
.hotel-descr .content .title-style-one {
padding: 0;
margin: 50rpx 0;
display: block;
}
.hotel-descr .content .title-style-one li {
list-style: none;
margin-bottom: 40rpx;
padding-left: 33rpx;
position: relative;
}
.hotel-descr .content .title-style-one li::before {
content: ' ';
display: block;
width: 10rpx;
height: 10rpx;
background: #111111;
border-radius: 50%;
position: absolute;
left: 0;
top: 15rpx;
}
.hotel-descr .content .title-style-one li:last-child {
margin-bottom: 0px;
}
.hotel-descr .content .title-style-one li .item-title {
font-size: 28rpx;
font-weight: bold;
color: #1F1F1F;
margin-bottom: 20rpx;
}
.hotel-descr .content .title-style-one li .item-content {
font-size: 24rpx;
font-weight: 500;
color: #6E6E6E;
}
</style>
pages/hotel/detail.vue
View file @ c21f7b6b
......@@ -173,7 +173,7 @@
<view class="item-title regular">健身房</view>
</li>
</ul>
<view class="hotel-more-info">酒店详情</view>
<view class="hotel-more-info" @click="openDescription">酒店详情</view>
</view>
<view class="empty-block"></view>
<view class="detail-box">
......@@ -334,6 +334,11 @@
url:"/pages/hotel/picture"
})
},
openDescription(){
uni.navigateTo({
url:"/pages/hotel/description"
})
},
chosenDateResult(obj) {
obj.startDay = this.formatMonthDay(obj.startDay)
obj.endDay = this.formatMonthDay(obj.endDay)
......
pages/hotel/list.vue
View file @ c21f7b6b
......@@ -242,7 +242,7 @@
},
created() {
uni.navigateTo({
url:"/pages/hotel/detail"
url:"/pages/hotel/description"
})
uni.setNavigationBarTitle({
title: "酒店",
......
pages/hotel/picture.vue
View file @ c21f7b6b
......@@ -3,12 +3,12 @@
<scroll-view scroll-y="true" class="hotel-pic">
<view class="content">
<view class="left">
<view v-for="(x,i) in jiList" :key="i" class="image-box">
<view v-for="(x,i) in jiList" :key="i" class="image-box" @click="previewImage(x.picUrl)">
<image :src="x.picUrl" mode="widthFix"></image>
</view>
</view>
<view class="right">
<view v-for="(x,i) in ouList" :key="i" class="image-box">
<view v-for="(x,i) in ouList" :key="i" class="image-box" @click="previewImage(x.picUrl)">
<image :src="x.picUrl" mode="widthFix"></image>
</view>
</view>
......@@ -42,13 +42,85 @@
picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
type:"酒店"
},
{
picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
type:"酒店"
},
{
picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
type:"酒店"
},
{
picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
type:"酒店"
},{
picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
type:"酒店"
},
{
picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
type:"酒店"
}
],
jiList:[],
ouList:[]
ouList:[],
allImageSrc:[]
}
},
created() {
......@@ -56,6 +128,7 @@
title: "酒店图片",
});
this.imageList.forEach((x,i)=>{
this.allImageSrc.push(x.picUrl)
if(i%2==0){
this.jiList.push(x)
}else{
......@@ -66,7 +139,22 @@
},
mounted () {
}
},
methods: {
previewImage(src) {
uni.previewImage({
urls: this.allImageSrc,
current: src,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function(data) {},
fail: function(err) {
console.log(err.errMsg);
},
},
});
}
},
}
</script>
......
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