Skip to content

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

酒店详情

parent 3e7ebd05
Hide whitespace changes
Inline Side-by-side
Showing with 1366 additions and 3 deletions
pages.json
View file @ 2acf50ba
......@@ -711,6 +711,12 @@
"path": "list"
},{
"path": "components/time/index"
},{
"path": "detail",
"enablePullDownRefresh": true,
"style": {
"navigationStyle": "custom"
}
}]
}
],
......
pages/hotel/components/near-good.vue 0 → 100644
View file @ 2acf50ba
<template>
<view class="near-good">
<image src="https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg" mode="aspectFill"></image>
<view class="good-name">上海宋城</view>
</view>
</template>
<script>
</script>
<style>
.near-good{
margin-right: 20rpx;
flex-shrink: 0;
}
.near-good image{
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
margin-bottom: 29rpx;
}
.near-good .good-name{
font-weight: bold;
color: #1F1F1F;
font-size: 28rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
pages/hotel/components/recommed-hotel.vue 0 → 100644
View file @ 2acf50ba
<template>
<view class="hotel-list-item">
<view class="img-box">
<image src="http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png" mode="aspectFill"></image>
</view>
<view class="hotel-info">
<view class="hotel-name">乐山禅驿·嘉定院子酒店</view>
<view class="hotel-start">
<!-- TODO：判定是否为星级酒店，如果是显示星级，不是，显示另外一种方式 -->
<view class="rate" v-if="hotelType==0">
<u-rate active-color="#FEB969" inactive-color="#FFF" current="4" active-icon="star" inactive-icon="star" disabled></u-rate>
<text style="margin-left: 20rpx;vertical-align: top;">四星</text>
</view>
<view class="other-rate" v-if="hotelType==1">
<text>温泉酒店</text>
<span class="line"></span>
</view>
<view class="other-rate" v-if="hotelType==2">
<text>精选民宿</text>
<span class="line"></span>
</view>
</view>
<view class="localtion">距该酒店直线4.1公里·近九寨千古情景区·沟口</view>
<view>
<u-tag text="亲子设施" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" size="mini"></u-tag>
</view>
<view class="price">
<text>￥</text>
<text class="money">599</text>
<text>起</text>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
hotelType:{
type:Number,
default:0
}
},
data() {
return {
key: value
}
},
}
</script>
<style>
.hotel-list-item{
margin: 30rpx 0;
padding-bottom: 30rpx;
/* border-bottom: 1rpx solid #E2E2E2; */
display: flex;
align-items: center;
}
.hotel-list-item .img-box{
width: 220rpx;
height: 280rpx;
border-radius: 20rpx;
overflow: hidden;
margin-right: 30rpx;
}
.hotel-list-item .img-box image{
width: 100%;
}
.hotel-list-item .hotel-info{
width: 1px;
flex: 1;
}
.hotel-list-item .hotel-info .hotel-name{
font-weight: 500;
color: #111111;
line-height: 30rpx;
font-size: 30rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hotel-list-item .hotel-info .hotel-start{
margin:10rpx 0;
}
.hotel-list-item .hotel-info .hotel-start .rate{
font-size: 30rpx;
font-weight: 500;
color: #999999;
line-height: 30rpx;
}
.hotel-list-item .hotel-info .hotel-start .other-rate{
display: inline-block;
position: relative;
}
.hotel-list-item .hotel-info .hotel-start .other-rate text{
position: relative;z-index: 2;
font-size: 30rpx;
line-height: 30rpx;
font-weight: 500;
color: #111;
}
.hotel-list-item .hotel-info .hotel-start .other-rate .line{
background-color: #DFBE6E;
height: 6px;
bottom: 2px;
left: 0;
right: 0;
position: absolute;
z-index: 1;
}
.hotel-list-item .hotel-info .localtion{
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 30rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 10rpx;
}
.hotel-list-item .hotel-info .price{
margin-top: 10rpx;
font-weight: 500;
color: #000;
font-size: 20rpx;
text-align: right;
}
.hotel-list-item .hotel-info .price .money{
font-size: 36rpx;
}
</style>
pages/hotel/components/room-good.vue 0 → 100644
View file @ 2acf50ba
<template>
<view class="room-good">
<view class="rm-left">
<image src="https://ak-d.tripcdn.com/images/0206l120008hti7x86A59_R_1080_808_R5_D.jpg" mode="aspectFill">
</image>
<view class="mark">12</view>
</view>
<view class="rm-right">
<view class="room-name">藏韵高级双床房</view>
<view class="f11">
<text class="king" style="margin-right: 14rpx;">含早餐</text>
<text>1.5m大床 2人入住 24㎡ 有窗</text>
</view>
<viwe class="give f11">
免费专辑接机 + 送沟口 + 1张情景演出票
</viwe>
<view class="f11 king" style="margin-top:15rpx;">入住当天18：00前可免费取消</view>
<view class="price">
<text class="f11" style="margin-right: 10rpx;">￥</text>
<text>889</text>
</view>
</view>
<view class="rm-opera">
<!-- 如果库存少于5显示 -->
<view class="warm-count">剩2间</view>
<view class="buy">
<view class="buy-content">抢</view>
<view class="buy-tips">在线订</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.room-good {
margin-bottom: 30rpx;
display: flex;
align-items: center;
}
.room-good .king {
color: #DFBE6E !important;
}
.room-good .f11 {
font-size: 22rpx;
font-weight: 500;
}
.room-good .rm-right {
width: 1px;
flex: 1;
}
.room-good .rm-opera{
margin-left: 10rpx;
display: flex;
flex-direction: column;
justify-content: center;
justify-items: center;
align-items: center;
}
.room-good .rm-opera .warm-count{
text-align: center;
font-size: 18rpx;
font-weight: 500;
color: #111111;
margin-bottom: 10rpx;
}
.room-good .rm-opera .buy{
width: 70rpx;
height: 81rpx;
background: #FFFFFF;
border: 2rpx solid #111111;
border-radius: 8rpx;
display: flex;
flex-direction: column;
}
.room-good .rm-opera .buy.disabled{
background: #EBEBEB;
border: 2rpx solid #DCDCDC;
}
.room-good .rm-opera .buy.disabled .buy-tips{
background: #A09E9E;
color: #fff;
}
.room-good .rm-opera .buy.disabled .buy-content{
color: #A09E9E;
}
.room-good .rm-opera .buy .buy-tips{
height: 27rpx;
background: #000000;
text-align: center;
color:#DFBE6E;
font-size: 18rpx;
line-height: 27rpx;
}
.room-good .rm-opera .buy .buy-content{
height: 1px;
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
font-weight: 800;
color: #111111;
}
.room-good .rm-right .room-name {
font-size: 30rpx;
font-weight: 800;
color: #111111;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.room-good .rm-right .give {
width: 278rpx;
background: #ECF1F4;
border-radius: 4rpx;
padding: 10rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-top:15rpx;
}
.room-good .rm-right .price{
font-weight: 800;
font-size: 40rpx;
color:#111;
}
.room-good .rm-left {
width: 174rpx;
height: 257rpx;
border-radius: 20rpx;
margin-right: 30rpx;
position: relative;
overflow: hidden;
}
.room-good .rm-left image {
width: 100%;
height: 100%;
}
.room-good .rm-left .mark {
padding: 14rpx;
background: rgba(0, 0, 0, .4);
color: #FFF;
border-radius: 20rpx 0px 20rpx 0px;
font-size: 24rpx;
font-weight: 500;
position: absolute;
right: 0;
bottom: 0;
}
</style>
pages/hotel/components/room-good2.vue 0 → 100644
View file @ 2acf50ba
<template>
<view class="room-good">
<view class="rm-left">
<image src="https://ak-d.tripcdn.com/images/0205w120008nyuc6gA680_R_1080_808_R5_D.jpg" mode="aspectFill">
</image>
<view class="mark">12</view>
</view>
<view class="rm-right">
<view class="room-name">藏韵高级双床房</view>
<view class="f11">
<text class="king" style="margin-right: 14rpx;">不含早餐</text>
<text>1.5m大床 2人入住 24㎡ 无窗</text>
</view>
<view class="f11 king" style="margin-top: 15px;">不可取消</view>
<view class="price">
<text class="f11" style="margin-right: 10rpx;">￥</text>
<text>500</text>
</view>
</view>
<view class="rm-opera">
<!-- 如果库存少于5显示 -->
<view class="buy disabled">
<view class="buy-content">抢</view>
<view class="buy-tips">已抢完</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.room-good {
margin-bottom: 30rpx;
display: flex;
align-items: center;
}
.room-good .king {
color: #DFBE6E !important;
}
.room-good .f11 {
font-size: 22rpx;
font-weight: 500;
}
.room-good .rm-right {
width: 1px;
flex: 1;
}
.room-good .rm-opera{
margin-left: 10rpx;
display: flex;
flex-direction: column;
justify-content: center;
justify-items: center;
align-items: center;
}
.room-good .rm-opera .warm-count{
text-align: center;
font-size: 18rpx;
font-weight: 500;
color: #111111;
margin-bottom: 10rpx;
}
.room-good .rm-opera .buy{
width: 70rpx;
height: 81rpx;
background: #FFFFFF;
border: 2rpx solid #111111;
border-radius: 8rpx;
display: flex;
flex-direction: column;
}
.room-good .rm-opera .buy.disabled{
background: #EBEBEB;
border: 2rpx solid #DCDCDC;
}
.room-good .rm-opera .buy.disabled .buy-tips{
background: #A09E9E;
color: #fff;
}
.room-good .rm-opera .buy.disabled .buy-content{
color: #A09E9E;
}
.room-good .rm-opera .buy .buy-tips{
height: 27rpx;
background: #000000;
text-align: center;
color:#DFBE6E;
font-size: 18rpx;
line-height: 27rpx;
}
.room-good .rm-opera .buy .buy-content{
height: 1px;
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
font-weight: 800;
color: #111111;
}
.room-good .rm-right .room-name {
font-size: 30rpx;
font-weight: 800;
color: #111111;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.room-good .rm-right .give {
width: 278rpx;
background: #ECF1F4;
border-radius: 4rpx;
padding: 10rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-top:15rpx;
}
.room-good .rm-right .price{
font-weight: 800;
font-size: 40rpx;
color:#111;
}
.room-good .rm-left {
width: 174rpx;
height: 257rpx;
border-radius: 20rpx;
margin-right: 30rpx;
position: relative;
overflow: hidden;
}
.room-good .rm-left image {
width: 100%;
height: 100%;
}
.room-good .rm-left .mark {
padding: 14rpx;
background: rgba(0, 0, 0, .4);
color: #FFF;
border-radius: 20rpx 0px 20rpx 0px;
font-size: 24rpx;
font-weight: 500;
position: absolute;
right: 0;
bottom: 0;
}
</style>
pages/hotel/components/time/index.vue
View file @ 2acf50ba
......@@ -354,7 +354,7 @@
},
//计算周几
getWeek(date) {
var weekDay = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
var myDate = new Date(Date.parse(date));
return weekDay[myDate.getDay()];
},
......@@ -512,6 +512,8 @@
endDay: this.endDay,
endWeek: this.endWeek,
day: this.day */
startWeek: this.startWeek,
endWeek: this.endWeek,
start: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type +
this.isFestival(this.start[0], this.start[1], true),
end: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this
......@@ -522,7 +524,7 @@
endDay: this.date[this.end[0]].month + '-' + this.isFestival(this.end[0], this.end[1], true),
day: this.day
};
/*此处应把需要的数据进行保存,如入住离开日期...添加到vuex然后再进行跳转到上一页
*不推荐使用本地缓存,下面是缓存的示例
*/
......@@ -598,7 +600,7 @@
// uni.navigateBack({
// delta: 1
// })
}
},
}
};
</script>
......
pages/hotel/detail.vue 0 → 100644
View file @ 2acf50ba
<template>
<view class="hotel-detail">
<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scroll="scroll">
<view class="media" :style="{'opacity':(100-boxOption)+'%'}">
<u-swiper :list="imgsList" :effect3d="false" :height="545" :interval="5000" :border-radius="0"
@click="previewImage" name="picUrl" v-if="active==1"></u-swiper>
<view class="video-box" v-if="active==0">
<video id="myVideo" :src="detailData.VideoUrl" style="width: 100%;height: 100%;"
:controls='controls' :show-center-play-btn='false' :show-fullscreen-btn='false'
@fullscreenchange='videoControl' object-fit='fill'></video>
<view @click="enlarge" class="play-btn">
<!-- 播放按钮 -->
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
style="width: 37rpx;height: 44rpx;" mode=""></image>
</view>
</view>
<!-- <view class="type-box" v-if="videoUrl!=''">
<u-tabs bg-color="rgba(0,0,0,0)" :is-scroll="false" name="Name" :list="typeList"
:active-color="mainColor" :current="active" @change="changeHandler" :show-bar="true"
:bold="false" height="50" duration="0" font-size="24" :activeFontSize="24" :typeStyle="2">
</u-tabs>
</view> -->
<view class="media-info">
<view class="flex">
<view class="mi-left">
<view v-if="imgsList.length>0" class="type-img-box">
<image :src="imgsList[0].picUrl" mode="aspectFill"></image>
<view class="content">
<!-- <u-icon name="photo" size="26" color="#FFF"></u-icon> -->
<text>{{imgsList.length}}</text>
</view>
</view>
</view>
<view class="mi-right">
<view style="font-size: 40rpx;font-weight: 600;text-align: right;margin-bottom: 6rpx;" class="king">5星</view>
<view style="font-weight: 500;color:#dfbe6e99;text-align: right;" class="f12">658人下单入住</view>
<!-- <view class="flex">
<text style="color:white;margin-right: 14rpx;" class="f12">星级</text>
<u-rate active-color="#DFBE6E" inactive-color="#f1f1f1" current="4" active-icon="star" inactive-icon="star" disabled></u-rate>
</view> -->
</view>
</view>
</view>
<view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]"
style="position: fixed;top: 0;left: 0;padding-left: 6rpx;">
<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx;"></u-icon>
</view>
</view>
<view class="hotel-title" :style="[titleStyle]">
<view @click="goback">
<u-icon name="arrow-left" size="44"></u-icon>
</view>
<view style="flex: 1;margin-left: 30rpx; text-align: left;">眉山黑龙滩长岛天堂洲际酒店</view>
</view>
<view class="hotel-content">
<view class="hotel-base">
<view class="head">
<view style="flex:1;">
<view class="hotel-name">九寨沟星宇国际大酒店</view>
<view class="hotel-tag">亲子设施 | 江河景房 | 环境安静 | 全家出游</view>
</view>
<!-- 关注 -->
<view class="op-box">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1621940804000_709.png"
style="margin-right: 17rpx;"></image>
<image v-if="!islike"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1621940804000_61.png"
@click="changeLike"></image>
<image v-if="islike"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1621940804000_953.png"
@click="changeLike"></image>
</view>
</view>
<view class="shebei">
<view class="sb-left">
<view class="sb-item">2014年开业</view>
<view class="sb-item">2017年装修</view>
<view class="sb-item">免费停车场</view>
</view>
<view class="sb-right">
<text style="margin-right: 20rpx;">设施/详情</text>
<u-icon name="arrow" size="20" />
</view>
</view>
<view class="location">
<view class="loc-left">
<view class="loc-name">
<u-icon name="location" size="28" />
<text style="margin-left: 14rpx;">沟口 | 九寨沟风景区沟口</text>
</view>
<view class="loc-remark">
<view>距浦东国际机场14.5km，驾车约19min</view>
<view>距车站约1km，驾车约5min</view>
</view>
</view>
<view class="loc-right">
<text style="margin-right: 20rpx;">地图详情</text>
<u-icon name="arrow" size="20" />
</view>
</view>
<view class="date-box flex" @click="showTimePopup=true">
<view class="date">
<text>{{searchObj.date.startDay}}</text>
<text class="date-week">{{searchObj.date.startWeek}}</text>
</view>
<view class="hr-line"></view>
<view class="date">
<text>{{searchObj.date.endDay}}</text>
<text class="date-week">{{searchObj.date.endWeek}}</text>
</view>
<view class="ver-line"></view>
<view class="date">
共 · {{searchObj.date.day}}晚
</view>
</view>
<view class="hotel-room">
<view class="room-type">
<view v-for="(x,i) in threeLevelList" class="item" @click="changeRoomType(i)"
:class="{'active':currentRoomType==i}">{{x.name}}</view>
</view>
<view class="room-list">
<room-good></room-good>
<room-good-test></room-good-test>
</view>
</view>
</view>
<view class="empty-block"></view>
<view class="detail-box">
<view class="big-title">
<text>订房须知</text>
</view>
<ul class="title-style-one">
<li>
<view class="item-title">酒店提示</view>
<view class="item-content">疫情期间，酒店不提供早餐，请佩戴好口罩。</view>
</li>
<li>
<view class="item-title">儿童政策</view>
<view class="item-content">不接受18岁以下客人单独入住。不含儿童早餐。
加床政策、儿童人数请参见您所选定的客房政策，若超过房型限定人数，可能需收取额外费用。提出的任何要求均需获得酒店的确认，所有服务详情以酒店告知为准。</view>
</li>
<li>
<view class="item-title">宠物政策</view>
<view class="item-content">不可携带宠物。</view>
</li>
</ul>
<view class="big-title">
<text>入离规则</text>
</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>
</ul>
<view class="big-title">
<text>设施服务</text>
</view>
<ul class="title-style-one hr">
<li>
<view class="item-title regular">接机服务</view>
</li>
<li>
<view class="item-title regular">叫醒服务</view>
</li>
<li>
<view class="item-title regular">洗衣服务</view>
</li>
<li>
<view class="item-title regular">健身房</view>
</li>
</ul>
<view class="hotel-more-info">酒店详情</view>
</view>
<view class="empty-block"></view>
<view class="detail-box">
<view class="flex">
<view class="big-title">
<text>发现周边</text>
</view>
<view class="flex" style="margin-left: 64rpx;">
<view class="nearby-type" :class="{'active':nearbyType==0}" @click="changeNearbyType(0)">景区
</view>
<view class="nearby-type" :class="{'active':nearbyType==1}" @click="changeNearbyType(1)">美食
</view>
</view>
</view>
<view class="flex" style="margin: 50rpx 0;overflow-x: auto;">
<near-good></near-good>
<near-good></near-good>
<near-good></near-good>
<near-good></near-good>
<near-good></near-good>
<near-good></near-good>
</view>
<view class="flex">
<view class="big-title">
<text>精选推荐</text>
</view>
<view class="flex" style="margin-left: 64rpx;">
<view class="nearby-type active">附近满足条件酒店(2)</view>
</view>
</view>
<view>
<recommed-hotel></recommed-hotel>
<recommed-hotel :hotelType="1"></recommed-hotel>
</view>
</view>
</view>
</scroll-view>
<u-popup v-model="showTimePopup" mode="bottom" border-radius="20" length="85%" :safe-area-inset-bottom="true">
<canlendar @finish="chosenDateResult"></canlendar>
</u-popup>
</view>
</template>
<script>
import roomGood from './components/room-good.vue';
import roomGoodTest from './components/room-good2.vue';
import nearGood from './components/near-good.vue';
import recommedHotel from './components/recommed-hotel.vue';
import canlendar from "./components/time/index.vue"
export default {
data() {
return {
imgsList: [{
picUrl: "https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg"
},
{
picUrl: "https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg"
},
{
picUrl: "https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg"
},
{
picUrl: "https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg"
}
],
id: 0,
typeList: [{
Id: 0,
Name: '视频'
}, {
Id: 1,
Name: '图片'
}],
boxOption: 0,
titleStyle: {},
mainColor: "",
showTimePopup: false,
controls: false,
videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
active: 1,
islike: false,
currentRoomType: 0,
nearbyType: 0,
searchObj: {
date: {}
},
threeLevelList: [{
name: "全部",
id: 0
},
{
name: "大床房",
id: 1
},
{
name: "双床房",
id: 2
},
{
name: "含早餐",
id: 3
},
{
name: "可取消",
id: 4
},
{
name: "优惠活动",
id: 5
}
]
}
},
components: {
roomGood,
roomGoodTest,
nearGood,
recommedHotel,
canlendar
},
created() {
let d1 = new Date();
let d = new Date();
let d2 = new Date(d.setDate(d.getDate() + 1))
var obj = {
start: `${d1.getFullYear()}-${d1.getMonth()+1}-${d1.getDate()}`,
end: `${d2.getFullYear()}-${d2.getMonth()+1}-${d2.getDate()}`,
startDay: `${this.getMonth(d1)}月${d1.getDate()}日`,
endDay: `${this.getMonth(d1)}月${d1.getDate()}日`,
startWeek: this.getWeek(d1),
endWeek: this.getWeek(d2),
day: 1
}
uni.setStorage({
key: 'Time',
data: JSON.stringify(obj)
})
this.searchObj.date = obj
},
onLoad(options) {
// this.id=options.id
// this.ProjectType=options.type
let that = this
uni.getSystemInfo({
success(res) {
that.titleStyle = {
height: "45px",
paddingTop: `${res.statusBarHeight}px`,
opacity: "0%"
};
},
});
this.mainColor = this.$uiConfig.mainColor;
},
methods: {
chosenDateResult(obj) {
obj.startDay = this.formatMonthDay(obj.startDay)
obj.endDay = this.formatMonthDay(obj.endDay)
this.searchObj.date = obj
this.showTimePopup = false
},
formatMonthDay(str) {
let temp = str.split('-')
temp[0] = temp[0] > 9 ? temp[0] : "0" + temp[0]
temp[1] = temp[1] > 9 ? temp[1] : "0" + temp[1]
return `${temp[0]}月${temp[1]}日`
},
getMonth(date) {
let m = date.getMonth() + 1
return m > 9 ? m : "0" + m
},
getDay(date) {
let d = date.getDate()
return d > 9 ? d : "0" + d
},
getWeek(date) {
let day = date.getDay();
if (day === 1) {
var week = "一";
} else if (day === 2) {
week = "二";
} else if (day === 3) {
week = "三";
} else if (day === 4) {
week = "四";
} else if (day === 5) {
week = "五";
} else if (day === 6) {
week = "六";
} else if (day === 7) {
week = "日";
}
return "周" + week
},
changeNearbyType(t) {
this.nearbyType = t
},
changeRoomType(i) {
this.currentRoomType = i
},
changeLike() {
this.islike = !this.islike
},
previewImage(i) {
uni.previewImage({
urls: this.imgsList,
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function(data) {},
fail: function(err) {
console.log(err.errMsg);
},
},
});
},
scroll(e) {
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
this.titleStyle.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) + "%"
this.$forceUpdate()
},
enlarge(file) {
// 全屏
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen({
direction: 0
})
},
videoControl(e) {
if (e.detail.fullScreen == false) {
this.videoContext.stop()
this.controls = false
} else {
this.videoContext.play()
this.controls = true
}
},
goback() {
uni.navigateBack({
delta: 1,
});
},
changeHandler(i) {
this.active = i;
},
},
}
</script>
<style>
.hotel-detail {
height: 100vh;
overflow: hidden;
width: 100vw;
font-family: 'pingfang';
}
.hotel-detail .flex {
display: flex;
align-items: center;
}
.hotel-detail .f12 {
font-size: 24rpx !important;
}
.hotel-detail .king {
color: #DFBE6E !important;
}
.hotel-detail .regular {
font-weight: 500 !important;
}
.hotel-detail .hotel-content {
position: relative;
z-index: 2;
top: -110rpx;
}
.hotel-detail .hotel-content .date-box {
margin: 30rpx 0;
background: #ECF1F4;
border-radius: 16rpx;
padding: 25rpx;
}
.hotel-detail .hotel-content .date-box .hr-line {
width: 24rpx;
height: 4rpx;
background: #222;
margin-right: 24rpx;
}
.hotel-detail .hotel-content .date-box .ver-line {
width: 1px;
height: 49rpx;
background: #A8A8A8;
opacity: 0.3;
margin-right: 24rpx;
}
.hotel-detail .hotel-content .date-box .date {
font-size: 24rpx;
font-weight: bold;
color: #111111;
margin-right: 24rpx;
}
.hotel-detail .hotel-content .date-box .date .date-week {
font-size: 24rpx;
font-weight: 500;
color: #6E6E6E;
margin-left: 18rpx;
}
.hotel-detail .hotel-content .hotel-more-info {
width: 140rpx;
height: 60rpx;
line-height: 60rpx;
background: #FFFFFF;
border: 1px solid #111111;
border-radius: 8rpx;
margin: 0 auto;
font-size: 24rpx;
font-weight: 500;
color: #1F1F1F;
text-align: center;
}
.hotel-detail .empty-block {
height: 20rpx;
background-color: #ECF1F4;
}
.hotel-detail .hotel-content .detail-box {
padding: 50rpx;
}
.hotel-detail .hotel-content .detail-box .nearby-type {
padding: 0 16rpx;
height: 40rpx;
background: #FFF;
border-radius: 20rpx;
margin-right: 10rpx;
font-size: 28rpx;
font-weight: 500;
color: #1F1F1F;
}
.hotel-detail .hotel-content .detail-box .nearby-type.active {
color: #DFBE6E;
background: rgba(223, 190, 110, .2);
}
.hotel-detail .hotel-content .title-style-one {
padding: 0;
margin: 50rpx 0;
display: block;
}
.hotel-detail .hotel-content .title-style-one.hr {
display: flex;
flex-wrap: wrap;
}
.hotel-detail .hotel-content .title-style-one.hr li {
width: 50%;
flex-shrink: 0;
margin: 0;
}
.hotel-detail .hotel-content .title-style-one li {
list-style: none;
margin-bottom: 40rpx;
padding-left: 33rpx;
position: relative;
}
.hotel-detail .hotel-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-detail .hotel-content .title-style-one li:last-child {
margin-bottom: 0px;
}
.hotel-detail .hotel-content .title-style-one li .item-title {
font-size: 28rpx;
font-weight: bold;
color: #1F1F1F;
margin-bottom: 20rpx;
}
.hotel-detail .hotel-content .title-style-one li .item-content {
font-size: 24rpx;
font-weight: 500;
color: #6E6E6E;
}
.hotel-detail .hotel-content .big-title {
position: relative;
}
.hotel-detail .hotel-content .big-title::before {
display: block;
width: 71rpx;
height: 12rpx;
background: #DFBE6E;
border-radius: 4rpx;
content: ' ';
position: absolute;
left: 0;
bottom: 6rpx;
z-index: 1;
}
.hotel-detail .hotel-content .big-title text {
font-size: 34rpx;
font-weight: bold;
color: #1F1F1F;
position: relative;
z-index: 2;
}
.hotel-detail .hotel-content .hotel-base .hotel-room .room-type {
/* padding:10rpx 30rpx; */
display: flex;
align-items: center;
overflow-x: auto;
flex-wrap: nowrap;
}
.hotel-detail .hotel-content .hotel-base .room-list {
padding-top: 40rpx;
}
.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item {
padding: 16rpx 30rpx;
background: #ECF1F4;
border-radius: 8rpx;
margin-right: 26rpx;
font-size: 22rpx;
color: #999999;
font-weight: 400;
flex-shrink: 0;
}
.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item.active {
background: #111111;
color: #FFFFFF;
}
.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item:last-child {
margin-right: 0;
}
.hotel-detail .hotel-content .hotel-base {
/* position: relative;
top: -140rpx; */
border-top-left-radius: 60rpx;
border-top-right-radius: 60rpx;
background-color: #FFF;
padding: 50rpx;
}
.location {
display: flex;
align-items: center;
}
.location .loc-left {
width: 1px;
flex: 1;
}
.location .loc-left .loc-name {
font-size: 28rpx;
font-weight: 800;
color: #111111;
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.location .loc-left .loc-remark {
font-size: 22rpx;
font-weight: 500;
color: #6E6E6E;
line-height: 34rpx;
}
.location .loc-right {
font-size: 24rpx;
font-weight: 500;
color: #111111;
display: flex;
align-items: center;
}
.hotel-detail .hotel-content .hotel-base .head {
display: flex;
align-items: center;
margin-bottom: 30rpx;
}
.hotel-detail .hotel-content .hotel-base .head .hotel-name {
font-size: 36rpx;
font-weight: 800;
color: #111111;
}
.hotel-detail .hotel-content .hotel-base .head .hotel-tag {
margin-top: 20rpx;
font-size: 22rpx;
font-weight: 500;
color: #6E6E6E;
}
.hotel-detail .hotel-content .hotel-base .head .op-box image {
width: 58rpx;
height: 58rpx;
}
.hotel-detail .hotel-content .hotel-base .shebei {
padding: 34rpx 0;
margin-bottom: 34rpx;
border-bottom: 1px solid rgba(0, 0, 0, .1);
display: flex;
align-items: center;
}
.hotel-detail .hotel-content .hotel-base .shebei .sb-left {
width: 1px;
flex: 1;
display: flex;
align-items: center;
}
.hotel-detail .hotel-content .hotel-base .shebei .sb-left .sb-item {
padding: 7rpx 13rpx;
background: #ECF1F4;
border-radius: 4rpx;
font-size: 22rpx;
font-weight: 500;
color: #111111;
margin-right: 10rpx;
}
.hotel-detail .hotel-content .hotel-base .shebei .sb-right {
font-size: 24rpx;
font-weight: 500;
color: #111111;
display: flex;
align-items: center;
}
.hotel-detail .hotel-title {
line-height: 45px !important;
font-size: 16px;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
color: #111;
box-sizing: content-box;
z-index: 5;
display: flex;
align-items: center;
background-color: #f6f6f6;
padding-left: 6rpx;
}
.hotel-detail .media {
height: 545rpx;
position: relative;
z-index: 1;
}
.hotel-detail .media .play-btn {
position: absolute;
left: 50%;
top: 50%;
margin-top: -49rpx;
margin-left: -49rpx;
width: 98rpx;
height: 98rpx;
border-radius: 20rpx;
background-color: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
.hotel-detail .media .video-box {
background-color: #111;
height: 545rpx;
position: relative;
}
.hotel-detail .media .type-box {
width: 100px;
height: 50rpx;
position: absolute;
background-color: rgba(255, 255, 255, .6);
border-radius: 50rpx;
left: 50%;
bottom: 80px;
margin-left: -50px;
}
.hotel-detail .media .media-info .type-img-box {
background-color: rgba(255, 255, 255, .5);
color: #FFF;
display: flex;
align-items: center;
height: 96rpx;
width: 96rpx;
padding: 8rpx;
border-radius: 12rpx;
position: relative;
}
.hotel-detail .media .media-info .type-img-box image {
height: 80rpx;
width: 80rpx;
border-radius: 12rpx;
opacity: 0.5;
}
.hotel-detail .media .media-info .type-img-box .content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
font-size: 20rpx;
color: #FFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-items: center;
}
.hotel-detail .media .media-info .type-img-box text {
font-size: 22rpx;
font-family: pingfang;
margin-left: 6rpx;
}
.hotel-detail .media .media-info {
position: absolute;
background-color: rgba(0, 0, 0, .35);
top: 287rpx;
bottom: 0;
left: 0;
right: 0;
padding:30rpx 50rpx;
}
.hotel-detail .media .media-info .mi-left {
flex: 1;
}
</style>
pages/hotel/list.vue
View file @ 2acf50ba
......@@ -241,6 +241,9 @@
hotelGood
},
created() {
uni.navigateTo({
url:"/pages/hotel/detail"
})
uni.setNavigationBarTitle({
title: "酒店",
});
......
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