discounts-minapp/hotel/introduce.vue

<template>
	<view class="introduce">
		<view class="content info">
			<image class="img" :src="info.pictures[0].path" mode=""></image>
			<view class="title">
				{{info.chineseName}}
			</view>
			<view class="star-box">
				<image class="star" src="@/static/star.png" mode=""></image>
				<image class="star" src="@/static/star.png" mode=""></image>
				<image class="star" src="@/static/star.png" mode=""></image>
				<image class="star" src="@/static/star.png" mode=""></image>
				<image class="star" src="@/static/star.png" mode=""></image>
			</view>
			<view class="desc-box">
				<view class="text">
					{{info.debutYear}}年开业
				</view>
				<view class="text" v-if="info.decorateDate">
					{{info.decorateDate}}年装修
				</view>
				<view class="text">
					{{info.roomCount}}间房
				</view>
			</view>
			
			<view class="desc-text">
				{{info.instruction}}
			</view>
		</view>
		
		
		<view class="content">
			<view class="content-title">
				服务设施
			</view>
			<view v-for="(item,key) in facilities" :key="key">
				<view class="sub-title">
					{{item.typeName}}
				</view>
				<view class="box">
					<view class="item" v-for="(i,d) in item.list" :key="d">
						{{i.name}}
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="content">
			<view class="content-title">
				酒店政策
			</view>
			<view class="sub-title">
				入离时间
			</view>
			<view class="value">
				{{info.policy.arrivalDeparture || '-'}}
			</view>
			<view class="sub-title">
				宠物政策
			</view>
			<view class="value">
				{{info.policy.pet || '-'}}
			</view>
			<view class="sub-title">
				儿童政策
			</view>
			<view class="value">
				{{info.policy.children || '-'}}
			</view>
			<view class="sub-title">
				特殊要求
			</view>
			<view class="value">
				{{info.policy.requirements  || '-'}}
			</view>
			<view class="sub-title">
				入住需要
			</view>
			<view class="value">
				{{info.policy.depositPrepaid  || '-'}}
			</view>
			<view class="sub-title">
				退订规则
			</view>
			<view class="value">
				{{info.policy.cancel || '-'}}
			</view>
		</view>
		
		
		<view class="btn-box">
			<view class="btn" @click="goDetail">
				查看房型
			</view>
			<view class="btn call-btn" @click="handleCall">
				联系酒店
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {getHotelDetail} from '@/api/hotel.js'
	export default {
		data() {
			return {
				info: null,
				facilities:{}
			}
		},
		
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url:`/hotel/hotelDetail?id=${this.info.hotelId}`
				})
			},
			handleCall() {
				if(this.info.tel){
					uni.makePhoneCall({
						phoneNumber: this.info.shopInfo.tel //仅为示例
					});
				}else{
					uni.showToast({
						title:'商家没有预留电话',
						icon:'none'
					})
				}
			},
			getHotelDetail(hotelId){
				getHotelDetail({hotelId}).then(res=>{
					if(res.state == 'Success'){
						this.info = res.content.data
						this.info.facilities.map(item=>{
							if(this.facilities[item.typeCode]){
								this.facilities[item.typeCode].list.push(item)
							}else{
								this.facilities[item.typeCode] = {}
								this.facilities[item.typeCode].typeName = item.typeName
								this.facilities[item.typeCode].list = [item]
							}
						})
					}
				})
			}
		},
		onLoad(options) {
			this.getHotelDetail(options.id)
		}
	}
</script>

<style lang="scss" scoped>
.introduce{
	background: #F9F9F9;
	padding-bottom: 200rpx;
	.content{
		padding: 20rpx 24rpx;
		background: #fff;
		margin-bottom: 20rpx;
		.content-title{
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}
		.sub-title{
			font-weight: 600;
			font-size: 24rpx;
			color: #222222;
			margin-top: 28rpx;
		}
		.box{
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 33%;
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 20rpx;
			}
		}
		.value{
			font-size: 24rpx;
			color: #AAAAAA;
			line-height: 40rpx;
			margin-top: 20rpx;
		}
	}
	.info{
		
		.img{
			width: 100%;
			height: 376rpx;
			border-radius: 16rpx;
		}
		.title{
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
			width: 650rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top: 24rpx;
		}
		.star-box{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.star{
				width: 21rpx;
				height: 17rpx;
				margin-left: 3rpx;
			}
		}
		.desc-box{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 20rpx;
			.text{
				padding-right: 10rpx;
			}
			.text+.text{
				border-left: 2rpx solid #F0F0F0;
				padding-left: 10rpx;
			}
		}
		.desc-text{
			font-size: 24rpx;
			color: #222222;
			line-height: 40rpx;
			margin-top: 20rpx;
		}
	}
	
	.btn-box{
		position: fixed;
		bottom: 0%;
		left: 0%;
		background: #fff;
		z-index: 2;
		width: 100%;
		line-height: 98rpx;
		display: flex;
		justify-content: flex-end;
		padding: 0 0 env(safe-area-inset-bottom);
		border-top: 1rpx solid #EEEEEE;
		.btn{
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #EE4320;
			font-weight: 600;
			font-size: 28rpx;
			color: #EE4320;
			margin-top: 9rpx;
			margin-right: 24rpx;
		}
		.btn.call-btn{
			background: #EE4320;
			color: #FFFFFF;
		}
	}
}
</style>