| xqd
@@ -82,28 +82,32 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 筛选-->
|
|
|
- <view class="search-detail" v-if="!isSelectSift" >
|
|
|
+ <view class="search-detail" v-if="!isSelectSift">
|
|
|
<view class="partner">
|
|
|
<view class="partner-top" @click="selectPartner">
|
|
|
<text>合作伙伴</text>
|
|
|
- <image v-if="isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png" mode=""></image>
|
|
|
- <image v-if="!isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png" mode=""></image>
|
|
|
+ <image v-if="isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png"
|
|
|
+ mode=""></image>
|
|
|
+ <image v-if="!isPartner" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
|
|
|
+ mode=""></image>
|
|
|
</view>
|
|
|
<view class="partner-main" v-if="isPartner">
|
|
|
<uni-data-checkbox multiple v-model="value" :localdata="partner" @change="change">
|
|
|
</uni-data-checkbox>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="partner-top" style="border-top: none;" @click="selectJoin">
|
|
|
<text>加盟品牌</text>
|
|
|
- <image v-if="isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png" mode=""></image>
|
|
|
- <image v-if="!isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png" mode=""></image>
|
|
|
+ <image v-if="isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/up02.png" mode="">
|
|
|
+ </image>
|
|
|
+ <image v-if="!isJoin" style=" width: 20rpx; height: 12rpx; " src="/static/icon/down02.png"
|
|
|
+ mode=""></image>
|
|
|
</view>
|
|
|
<view class="partner-main" v-if="isJoin">
|
|
|
<uni-data-checkbox multiple v-model="value" :localdata="partner" @change="change">
|
|
|
</uni-data-checkbox>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="search-detail-btn">
|
|
|
<view class="search-detail-btn-left">
|
|
|
<text>取消</text>
|
| xqd
@@ -117,36 +121,94 @@
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
- <view class="address">
|
|
|
+ <view class="address" v-if="isShow">
|
|
|
<view style="height:1232rpx;">
|
|
|
<hch-position></hch-position>
|
|
|
</view>
|
|
|
-
|
|
|
<view class="address-nav">
|
|
|
- <view class="address-detail" v-for="item in 3">
|
|
|
- <image src="/static/icon/Kudosbg.png" class="wait-img"></image>
|
|
|
- <view class="address-detail-main">
|
|
|
- <view class="address-detail-main-left">
|
|
|
- <text class="title">IHG酒店</text>
|
|
|
- <view class="content">
|
|
|
- <text>豪华型</text>
|
|
|
+ <view class="address-nav-btn">
|
|
|
+ <view class="">
|
|
|
+ <image style="width: 84rpx;height: 84rpx;" src="/static/icon/location.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="" @click="goHotelList">
|
|
|
+ <image style="width: 84rpx;height: 84rpx;" src="/static/icon/list.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ style="width: 100%; overflow-x: scroll; display: flex;align-items: center;justify-content: space-between;">
|
|
|
+ <view class="address-detail" v-for="item in 3">
|
|
|
+ <view class="mark">
|
|
|
+ <image style="width: 496rpx;height: 318rpx;border-radius: 10rpx;"
|
|
|
+ src="/static/icon/Kudosbg.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="inner">
|
|
|
+ <view class="address-detail-main">
|
|
|
+ <view class="address-detail-main-left">
|
|
|
+ <text class="title">IHG酒店</text>
|
|
|
+ <view class="content">
|
|
|
+ <text>豪华型</text>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <text class="bottom-left">¥</text>
|
|
|
+ <text class="bottom-right">238起</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="address-detail-main-right" @click="goBook">
|
|
|
+ <text>预订</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="bottom">
|
|
|
- <text class="bottom-left">¥</text>
|
|
|
- <text class="bottom-right">238起</text>
|
|
|
+ <view class="address-detail-position">
|
|
|
+ <image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode="">
|
|
|
+ </image>
|
|
|
+ <text style="margin-left:4rpx ;">3.3km</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="address-detail-main-right">
|
|
|
- <text>预订</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="address-detail-position">
|
|
|
- <image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode=""></image>
|
|
|
- <text style="margin-left:4rpx ;">3.3km</text>
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 酒店列表 -->
|
|
|
+ <view class="hotel-list" v-if="!isShow">
|
|
|
+ <view class="hotel-list-item" v-for="item in 10">
|
|
|
+ <view class="wrap">
|
|
|
+ <view class="mark">
|
|
|
+ <image style="width: 694rpx;height: 318rpx;border-radius: 10rpx;" src="/static/icon/Kudosbg.png"
|
|
|
+ mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="inner">
|
|
|
+ <view class="address-detail-main">
|
|
|
+ <view class="address-detail-main-left">
|
|
|
+ <text class="title">IHG酒店</text>
|
|
|
+ <view class="content">
|
|
|
+ <text>豪华型</text>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <text class="bottom-left">¥</text>
|
|
|
+ <text class="bottom-right">238起</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="address-detail-main-right" @click="goBook">
|
|
|
+ <text>预订</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="address-detail-position">
|
|
|
+ <image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode=""></image>
|
|
|
+ <text style="margin-left:4rpx ;">3.3km</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 触底 -->
|
|
|
+ <view class="home-bottom">
|
|
|
+ <uni-load-more :status="status" color="#CCCCCC" :content-text="contentText"/>
|
|
|
+ </view>
|
|
|
+ <view class="return-btn" @click="returnBtn">
|
|
|
+ <image style="width: 132rpx;height: 132rpx;border-radius: 50%;" src="/static/icon/return01.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
<view style="height: 110rpx;"></view>
|
|
|
<tab-bar></tab-bar>
|
| xqd
@@ -163,6 +225,17 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ //暂无数据
|
|
|
+ status: 'noMore',
|
|
|
+ contentText: {
|
|
|
+ contentdown: '查看更多',
|
|
|
+ contentrefresh: '加载中',
|
|
|
+ contentnomore: '—— 已经到底啦 ——'
|
|
|
+ },
|
|
|
+ //是否展示地图
|
|
|
+ isShow: true,
|
|
|
+
|
|
|
+
|
|
|
value: [0],
|
|
|
//合作伙伴
|
|
|
partner: [{
|
| xqd
@@ -174,22 +247,22 @@
|
|
|
}, {
|
|
|
text: '游泳',
|
|
|
value: 2
|
|
|
- },{
|
|
|
+ }, {
|
|
|
text: '游泳',
|
|
|
value: 3
|
|
|
- },{
|
|
|
+ }, {
|
|
|
text: '游泳',
|
|
|
value: 4
|
|
|
- },{
|
|
|
+ }, {
|
|
|
text: '游泳',
|
|
|
value: 5
|
|
|
- },{
|
|
|
+ }, {
|
|
|
text: '游泳',
|
|
|
value: 6
|
|
|
- },{
|
|
|
+ }, {
|
|
|
text: '游泳',
|
|
|
value: 7
|
|
|
- },],
|
|
|
+ }, ],
|
|
|
|
|
|
//品牌
|
|
|
brandList: [{
|
| xqd
@@ -238,19 +311,36 @@
|
|
|
//刷选
|
|
|
isSelectSift: true,
|
|
|
//是否展示合作伙伴
|
|
|
- isPartner:false,
|
|
|
+ isPartner: false,
|
|
|
//是否展示加盟品牌
|
|
|
- isJoin:false,
|
|
|
+ isJoin: false,
|
|
|
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ //去预定页面
|
|
|
+ goBook(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/map/hotel-book/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //返回上一级
|
|
|
+ returnBtn(){
|
|
|
+ this.isShow = !this.isShow
|
|
|
+ },
|
|
|
+ //打开酒店列表
|
|
|
+ goHotelList() {
|
|
|
+ console.log(111);
|
|
|
+ this.isShow = !this.isShow
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
//是否展示加盟品牌
|
|
|
- selectJoin(){
|
|
|
+ selectJoin() {
|
|
|
this.isJoin = !this.isJoin
|
|
|
},
|
|
|
//是否展示合作伙伴
|
|
|
- selectPartner(){
|
|
|
+ selectPartner() {
|
|
|
this.isPartner = !this.isPartner
|
|
|
},
|
|
|
//合作伙伴刷选
|
| xqd
@@ -289,6 +379,128 @@
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
+ .return-btn{
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ top: 927rpx;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-bottom {
|
|
|
+ height: 60rpx;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ }
|
|
|
+ .hotel-list {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ padding: 32rpx 30rpx;
|
|
|
+ padding-bottom: 200rpx;
|
|
|
+
|
|
|
+ .hotel-list-item {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 318rpx;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ width: 100%;
|
|
|
+ height: 318rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+
|
|
|
+ .address-detail-main {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 30rpx;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .address-detail-main-left {
|
|
|
+ position: absolute;
|
|
|
+ left: 20rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ margin: 12rpx 0 20rpx;
|
|
|
+ width: 92rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ background: rgba(142, 160, 166, .6);
|
|
|
+ border-radius: 17rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ .bottom-left {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-right: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-detail-main-right {
|
|
|
+ position: absolute;
|
|
|
+ right: 24rpx;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #FF6300;
|
|
|
+ box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-detail-position {
|
|
|
+ position: absolute;
|
|
|
+ top: 22rpx;
|
|
|
+ right: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.search-detail {
|
|
|
width: 100%;
|
| xqd
@@ -313,11 +525,11 @@
|
|
|
|
|
|
.partner-main {
|
|
|
margin-top: 32rpx;
|
|
|
-
|
|
|
+
|
|
|
::v-deep .uni-data-checklist .checklist-group .checklist-box {
|
|
|
width: 26%;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
|
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
| xqd
@@ -529,10 +741,18 @@
|
|
|
bottom: 34rpx;
|
|
|
padding: 0 16rpx;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
overflow-x: scroll;
|
|
|
|
|
|
+ .address-nav-btn {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.address {
|
| xqd
@@ -543,103 +763,104 @@
|
|
|
position: relative;
|
|
|
flex: none;
|
|
|
width: 496rpx;
|
|
|
- height: 318rpx;
|
|
|
- background: #000;
|
|
|
- box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
|
|
|
border-radius: 10rpx;
|
|
|
margin-right: 16rpx;
|
|
|
-
|
|
|
&:last-child {
|
|
|
margin-right: 0rpx;
|
|
|
}
|
|
|
-
|
|
|
- .wait-img {
|
|
|
+ .inner {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- opacity: 0.7;
|
|
|
- filter: alpha(opacity=60);
|
|
|
- }
|
|
|
-
|
|
|
- .address-detail-main {
|
|
|
+ height: 318rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ top: 0;
|
|
|
left: 0;
|
|
|
- bottom: 30rpx;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- justify-content: space-between;
|
|
|
|
|
|
- .address-detail-main-left {
|
|
|
+ .address-detail-main {
|
|
|
position: absolute;
|
|
|
- left: 20rpx;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- margin: 12rpx 0 20rpx;
|
|
|
- width: 92rpx;
|
|
|
- height: 34rpx;
|
|
|
- background: rgba(142, 160, 166, .6);
|
|
|
- border-radius: 17rpx;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 22rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
+ left: 0;
|
|
|
+ bottom: 30rpx;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .bottom {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
+ .address-detail-main-left {
|
|
|
+ position: absolute;
|
|
|
+ left: 20rpx;
|
|
|
|
|
|
- .bottom-left {
|
|
|
- font-size: 24rpx;
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- margin-right: 6rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
}
|
|
|
|
|
|
- .bottom-right {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
+ .content {
|
|
|
+ margin: 12rpx 0 20rpx;
|
|
|
+ width: 92rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ background: rgba(142, 160, 166, .6);
|
|
|
+ border-radius: 17rpx;
|
|
|
color: #ffffff;
|
|
|
+ font-size: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ .bottom-left {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-right: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-detail-main-right {
|
|
|
+ position: absolute;
|
|
|
+ right: 24rpx;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #FF6300;
|
|
|
+ box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- .address-detail-main-right {
|
|
|
+ .address-detail-position {
|
|
|
position: absolute;
|
|
|
+ top: 22rpx;
|
|
|
right: 24rpx;
|
|
|
- width: 120rpx;
|
|
|
- height: 44rpx;
|
|
|
- background: #FF6300;
|
|
|
- box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
|
|
|
- border-radius: 22rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 20rpx;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
- .address-detail-position {
|
|
|
- position: absolute;
|
|
|
- top: 22rpx;
|
|
|
- right: 24rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 20rpx;
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</style>
|