Skip to content

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

酒店详情

parent 3e7ebd05
Expand all 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
This diff is collapsed.
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