279 lines
10 KiB
Vue
279 lines
10 KiB
Vue
<template>
|
||
<view class="waper">
|
||
<u-navbar :autoBack="true" :bgColor="scrollTop > 10 ? '#fff' : 'transparent'" :leftIconColor="scrollTop > 10 ? '#303133' : '#fff'">
|
||
<view slot='center' class="navbar_title" :style="'color:' + (scrollTop > 10 ? '#303133' : '#fff')">酒店详情</view>
|
||
</u-navbar>
|
||
<view class="banner">
|
||
<image src="../../static/image/hotel/hotel_banner.png" mode=""></image>
|
||
<view class="data">
|
||
<view class="name">{{detail.name}}</view>
|
||
<view class="row">
|
||
<view>
|
||
<text>开业时间：{{detail.openingTime}}年</text>
|
||
<text>装修时间：{{detail.decorationTime}}年</text>
|
||
</view>
|
||
<view>酒店地址：{{detail.address}}</view>
|
||
</view>
|
||
<view class="tel_box" v-if="detail.phone">
|
||
<u-icon name="phone-fill" color="#FFFFFF" size="28rpx"></u-icon>
|
||
<text @click="callTel">酒店电话：{{detail.phone}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="content_waper">
|
||
<view class="facilities">
|
||
<view class="active">
|
||
<text>设施服务</text>
|
||
<image src="../../static/home/title_bg.png" mode=""></image>
|
||
</view>
|
||
<view class="list_box">
|
||
<view class="item" v-for="(item, index) in detail.facilitiesList" :key="index">
|
||
<image :src="$utils.setImgUrl(item.logo)" mode=""></image>
|
||
<view>{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="notice">
|
||
<view class="active">
|
||
<text>入住须知</text>
|
||
<image src="../../static/home/title_bg.png" mode=""></image>
|
||
</view>
|
||
<view class="col">
|
||
<view class="top">
|
||
<image src="../../static/image/hotel/checkInTime.png" mode=""></image>
|
||
<view>入离时间</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view>入住时间：{{detail.checkInTime}}之后 离店时间：{{detail.leaveTime}}之前</view>
|
||
</view>
|
||
</view>
|
||
<view class="col">
|
||
<view class="top">
|
||
<image src="../../static/image/hotel/minLimitedAge.png" mode=""></image>
|
||
<view>年龄限制</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view>入住办理人需满{{detail.minLimitedAge}}岁</view>
|
||
</view>
|
||
</view>
|
||
<view class="col">
|
||
<view class="top">
|
||
<image src="../../static/image/hotel/invoice.png" mode=""></image>
|
||
<view>发票</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view>
|
||
<text>{{detail.invoice == 'N' ? '不' : ''}}</text>
|
||
可开具增值税普通/专用发票
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="col">
|
||
<view class="top">
|
||
<image src="../../static/image/hotel/pet.png" mode=""></image>
|
||
<view>宠物</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view>
|
||
<text>{{detail.pet == 'N' ? '不' : ''}}</text>
|
||
允许携带宠物。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="policy">
|
||
<view class="active">
|
||
<text>订房必读</text>
|
||
<image src="../../static/home/title_bg.png" mode=""></image>
|
||
</view>
|
||
<view class="row">
|
||
<view class="label">城市通知</view>
|
||
<u-parse :content="detail.importantNotice"></u-parse>
|
||
<view class="label">入住限制</view>
|
||
<view class="text">{{detail.checkInWay}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="traffic">
|
||
<view class="active">
|
||
<text>周边景区</text>
|
||
<image src="../../static/home/title_bg.png" mode=""></image>
|
||
</view>
|
||
<view class="list">
|
||
<view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item.id)">
|
||
<view class="left">
|
||
<image :src="item.imagePage ? $utils.setImgUrl(item.imagePage.split(',')[0]) : ''" mode=""></image>
|
||
</view>
|
||
<view class="right">
|
||
<view class="title">
|
||
<view class="label" v-if="item.scenicLevelName">{{item.scenicLevelName}}</view>
|
||
<view class="name">{{item.scenicName}}</view>
|
||
</view>
|
||
<view class="tags_box" v-if="item.tagList.length > 0">
|
||
<view class="tag" v-for="(e, i) in item.tagList" :key="i" v-if="i < 3">{{e.name}}</view>
|
||
</view>
|
||
<view class="row mt15">
|
||
<u-icon name="clock" color="rgba(0,0,0,0.65)" size="32rpx"></u-icon>
|
||
<view class="text">{{item.adjust}}</view>
|
||
</view>
|
||
<view class="row">
|
||
<u-icon name="map" color="rgba(0,0,0,0.65)" size="32rpx"></u-icon>
|
||
<view class="text ads">{{item.address}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
scrollTop: 0,
|
||
id: '',
|
||
detail: {},
|
||
list: []
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
onLoad (options) {
|
||
this.id = options.id;
|
||
this.getDetail();
|
||
},
|
||
|
||
methods: {
|
||
async getDetail() {
|
||
let res=await this.$http.homestayId(this.id);
|
||
res.data.openingTime = res.data.openingTime.split('-')[0];
|
||
res.data.decorationTime = res.data.decorationTime.split('-')[0];
|
||
this.detail=res.data;
|
||
this.getList(this.detail.longitude, this.detail.latitude)
|
||
},
|
||
async getList (lo, la) {
|
||
let obj = { pageNum: 1, pageSize: 2, longitude: lo, latitude: la };
|
||
let info = await this.$http.getScenicList(obj);
|
||
this.list = info.rows;
|
||
},
|
||
callTel () {// 拨打电话
|
||
uni.makePhoneCall({ phoneNumber: this.detail.phone, fail: () => {} });
|
||
},
|
||
goDetail(id) {
|
||
uni.navigateTo({ url: '/pages/scenic/detail?id=' + id })
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.banner{
|
||
width: 100%; height: 560rpx; position: relative;
|
||
image { width: 100%; height: 100%; }
|
||
.data {
|
||
position: absolute; left: 0; top: 0; width: 100%; padding: 195rpx 32rpx 0; box-sizing: border-box;
|
||
.name { font-weight: 500; font-size: 36rpx; color: #fff; padding-bottom: 10rpx; line-height: 52rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.row {
|
||
margin-top: 20rpx; width: 100%;
|
||
view{
|
||
width: 100%; color: #fff; font-size: 24rpx; margin-bottom: 12rpx; line-height: 34rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
&:last-child{ margin-bottom: 0; }
|
||
text:last-child{ margin-left: 106rpx; }
|
||
}
|
||
}
|
||
.tel_box {
|
||
width: 100%; height: 90rpx; background: rgba(255,255,255,0.1); border-radius: 8rpx; display: flex; align-items: center; justify-content: center; margin-top: 34rpx;
|
||
text { margin-left: 8rpx; font-weight: 500; font-size: 26rpx; color: #FFFFFF; }
|
||
}
|
||
}
|
||
}
|
||
.content{
|
||
width: 100%; position: relative; z-index: 5; margin-top: -52rpx; background: #F6F6F6; border-radius: 40rpx 40rpx 0 0; overflow: hidden;
|
||
.content_waper{
|
||
width: 100%; box-sizing: border-box; padding: 32rpx 24rpx;
|
||
.active{
|
||
position: relative; display: inline-block; vertical-align: top; margin-bottom: 4rpx;
|
||
text{ font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); }
|
||
image{ width: 72rpx; height: 37rpx; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); right: -46rpx; display: block; }
|
||
}
|
||
.facilities {
|
||
background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx; box-sizing: border-box;
|
||
.list_box {
|
||
display: flex; align-items: center; flex-wrap: wrap;
|
||
.item {
|
||
margin-top: 20rpx; text-align: center; width: 25%;
|
||
image { width: 40rpx; height: 40rpx; }
|
||
view { margin-top: 8rpx; font-size: 24rpx; color: rgba(0,0,0,0.85); }
|
||
}
|
||
}
|
||
}
|
||
.notice {
|
||
margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx; box-sizing: border-box;
|
||
.col {
|
||
margin-top: 20rpx;
|
||
.top {
|
||
display: flex; align-items: center;
|
||
image {width: 24rpx; height: 24rpx; margin-right: 12rpx;}
|
||
view {font-size: 28rpx; color: rgba(0,0,0,0.85);}
|
||
}
|
||
.bottom {
|
||
margin: 12rpx 0 0 36rpx;
|
||
view { font-size: 26rpx; color: rgba(0,0,0,0.65); }
|
||
}
|
||
}
|
||
}
|
||
.policy {
|
||
margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx; box-sizing: border-box;
|
||
.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); padding-bottom: 4rpx; }
|
||
.row {
|
||
.label { font-size: 28rpx; color: rgba(0,0,0,0.85); margin: 20rpx 0 12rpx; }
|
||
.text { font-size: 26rpx; color: rgba(0,0,0,0.65); line-height: 30rpx; }
|
||
u-parse { font-size: 26rpx; color: rgba(0,0,0,0.65); line-height: 30rpx; }
|
||
}
|
||
}
|
||
.traffic {
|
||
margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx; box-sizing: border-box;
|
||
.list {
|
||
margin-top: 24rpx;
|
||
.item {
|
||
border-bottom: 1rpx solid #ECEAEA; padding: 0 0 32rpx; margin-bottom: 32rpx; display: flex; align-items: center;
|
||
&:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
|
||
.left {
|
||
width: 208rpx; height: 208rpx; margin-right: 20rpx;
|
||
image { width: 208rpx; height: 208rpx; }
|
||
}
|
||
.right {
|
||
flex: 1;
|
||
.title {
|
||
display: flex; align-items: center;
|
||
.label { height: 32rpx; padding: 0 12rpx; line-height: 32rpx; background: #03AE80; border-radius: 4rpx; font-weight: 500; font-size: 20rpx; color: #FFFFFF; margin-right: 10rpx; }
|
||
.name { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); line-height: 38rpx; width: 320rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
}
|
||
.tags_box {
|
||
margin-top: 10rpx; display: flex; align-items: center;
|
||
.tag {
|
||
height: 36rpx; padding: 0 14rpx; line-height: 36rpx; margin-right: 16rpx; font-size: 20rpx;
|
||
&:last-child{ margin-right: 0; }
|
||
&:nth-child(1) { background: rgba(71,175,195,0.1); color: #03AE80; }
|
||
&:nth-child(2) { background: rgba(94,208,191,0.1); color: #5ED0BF; }
|
||
&:nth-child(3) { background: rgba(255,180,87,0.1); color: #FFB457; }
|
||
}
|
||
}
|
||
.row {
|
||
margin-top: 7rpx; display: flex; align-items: center; font-size: 28rpx; color: rgba(0,0,0,0.65); line-height: 33rpx;
|
||
.text { margin-left: 8rpx; }
|
||
.ads { width: 380rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
}
|
||
.mt15 { margin-top: 15rpx; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |