|
|
@@ -8,7 +8,7 @@
|
|
|
<!-- 顶部民宿图片区域 -->
|
|
|
<view class="banner">
|
|
|
<swiper autoplay circular class="swiper">
|
|
|
- <swiper-item class="swiper_item" v-for="item in info.hotelFileInfoList" :key="item.id">
|
|
|
+ <swiper-item class="swiper_item" v-for="(item, current) in info.hotelFileInfoList" :key="item.id" @click="handleClickSwiper(info.hotelFileInfoList, current)">
|
|
|
<img mode="aspectFill" class="img" :src="item.url" />
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
@@ -242,7 +242,7 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 入住时间区域 -->
|
|
|
- <view class="box_time">{{ item.liveTime.slice(0, 10) }}入住,{{ item.commentTime.slice(0, 10) }}发表 | {{ item.houseName }}</view>
|
|
|
+ <view class="box_time" v-if="item.liveTime">{{ item.liveTime.slice(0, 10) }}入住,{{ item.commentTime.slice(0, 10) }}发表 | {{ item.houseName }}</view>
|
|
|
|
|
|
<!-- 评价内容区域 -->
|
|
|
<uv-read-more show-height="85rpx" closeText="全文" color="#096663" fontSize="24rpx" textIndent="0" :toggle="true" :shadowStyle="shadowStyle">
|
|
|
@@ -287,6 +287,66 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 周边民宿区域 -->
|
|
|
+ <view class="rim">
|
|
|
+ <!-- 标题区域 -->
|
|
|
+ <view class="rim_title">周边民宿</view>
|
|
|
+ <!-- 周边民宿列表区域 -->
|
|
|
+ <view class="rim_body">
|
|
|
+ <!-- 每一个民宿区域 -->
|
|
|
+ <view class="rim_box" v-for="item in rimList" :key="item.id" @click="testGo(item)">
|
|
|
+ <img mode="aspectFill" :src="item.url" />
|
|
|
+ <view class="box_info">
|
|
|
+ <view class="info_top">{{ item.name }}</view>
|
|
|
+ <view class="info_center">{{ item.leave }}</view>
|
|
|
+ <view class="info_bottom">
|
|
|
+ <view class="bottom_rate">{{ item.rate }}分</view>
|
|
|
+ <view class="bottom_num">{{ item.num }}条评论</view>
|
|
|
+ <view class="bottom_price">
|
|
|
+ ¥{{ item.price }}
|
|
|
+ <text>起</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 查看全部 -->
|
|
|
+ <view class="rim_more" @click="test">
|
|
|
+ 查看全部
|
|
|
+ <img src="../../static/index/right.png" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 周边景点区域 -->
|
|
|
+ <view class="scenicSpot">
|
|
|
+ <!-- 标题区域 -->
|
|
|
+ <view class="scenicSpot_title">周边景点</view>
|
|
|
+ <!-- 周边景点列表区域 -->
|
|
|
+ <view class="scenicSpot_body">
|
|
|
+ <!-- 每一个景点区域 -->
|
|
|
+ <view class="scenicSpot_box" v-for="item in scenicSpotList" :key="item.id">
|
|
|
+ <img mode="aspectFill" :src="item.url" />
|
|
|
+ <view class="box_info">
|
|
|
+ <view class="info_top">{{ item.name }}</view>
|
|
|
+ <view class="info_center">距您查询酒店直线{{ item.distance }}km</view>
|
|
|
+ <view class="info_bottom">
|
|
|
+ <view class="bottom_rate">{{ item.rate }}分</view>
|
|
|
+ <view class="bottom_num">{{ item.num }}条评论</view>
|
|
|
+ <view class="bottom_price">
|
|
|
+ ¥{{ item.price }}
|
|
|
+ <text>起</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 查看全部 -->
|
|
|
+ <view class="scenicSpot_more" @click="test">
|
|
|
+ 查看全部
|
|
|
+ <img src="../../static/index/right.png" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -321,11 +381,14 @@ export default {
|
|
|
// 日历可以选择的最晚日期
|
|
|
lateTime: '',
|
|
|
activeIndex: 0,
|
|
|
- headerList: ['预定', '评价'],
|
|
|
+ headerList: ['预定', '评价', '周边'],
|
|
|
// 评价列表数据
|
|
|
commentList: [],
|
|
|
queryDom: null,
|
|
|
+ // 评价Dom距离页面顶部的距离
|
|
|
domTop: null,
|
|
|
+ // 周边Dom距离页面顶部的距离
|
|
|
+ domTopRim: null,
|
|
|
selected: [],
|
|
|
// 总评分
|
|
|
score: '',
|
|
|
@@ -344,9 +407,92 @@ export default {
|
|
|
// video 上下文 videoContext 对象
|
|
|
videoContext: null,
|
|
|
// 是否是全屏状态
|
|
|
- isFullScreen: false
|
|
|
+ isFullScreen: false,
|
|
|
+ rimList: [
|
|
|
+ {
|
|
|
+ id: 1726150980,
|
|
|
+ url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/16311442750812_8.jpg',
|
|
|
+ name: '九岭山房民宿',
|
|
|
+ leave: '金宿',
|
|
|
+ rate: 4.8,
|
|
|
+ num: 109,
|
|
|
+ price: 180
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1102488098,
|
|
|
+ url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1933617026前台.jpg',
|
|
|
+ name: '云上九岭',
|
|
|
+ leave: '白金',
|
|
|
+ rate: 4.5,
|
|
|
+ num: 21,
|
|
|
+ price: 880
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1147515780,
|
|
|
+ url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1922593201民宿图片2.jpg',
|
|
|
+ name: '靖安三闲居民宿',
|
|
|
+ leave: '白金',
|
|
|
+ rate: 4.6,
|
|
|
+ num: 89,
|
|
|
+ price: 680
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1851521611,
|
|
|
+ url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/14323863982h0k15000000ym7ji8285_W_1080_808_R5_D.jpg',
|
|
|
+ name: '野塘隐夏民宿',
|
|
|
+ leave: '白金',
|
|
|
+ rate: 4.7,
|
|
|
+ num: 81,
|
|
|
+ price: 650
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ scenicSpotList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ url: 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20230922113014_c1d59da5595928a4d865418eeae861b.png',
|
|
|
+ name: '九仙君澜水上乐园',
|
|
|
+ distance: 1.3,
|
|
|
+ rate: 4.8,
|
|
|
+ num: 69,
|
|
|
+ price: 160
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ url: 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20230922112928_113d3f4c04eda11cea9051d516613aa.png',
|
|
|
+ name: '九仙君澜温泉',
|
|
|
+ distance: 1.5,
|
|
|
+ rate: 4.5,
|
|
|
+ num: 11,
|
|
|
+ price: 880
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ url: 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20230922112955_639270c554d315e5a845d6c26ad8548.png',
|
|
|
+ name: '白沙坪度假村',
|
|
|
+ distance: 3,
|
|
|
+ rate: 4.6,
|
|
|
+ num: 89,
|
|
|
+ price: 388
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ url: 'https://jinganminsu-1320402385.cos.ap-nanjing.myqcloud.com/static//20230922112850_1bba201e62087a806240c668d0f2bf8.png',
|
|
|
+ name: '百丈山萝卜潭',
|
|
|
+ distance: 3.5,
|
|
|
+ rate: 4.7,
|
|
|
+ num: 81,
|
|
|
+ price: 550
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ // 开启转发功能
|
|
|
+ uni.showShareMenu({
|
|
|
+ withShareTicket: true,
|
|
|
+ menus: ['shareAppMessage', 'shareTimeline']
|
|
|
+ })
|
|
|
+ },
|
|
|
onLoad(options) {
|
|
|
this.getTimes()
|
|
|
this.hotelId = options.id
|
|
|
@@ -368,14 +514,45 @@ export default {
|
|
|
this.domTop = data.top
|
|
|
})
|
|
|
.exec()
|
|
|
+ this.queryDom
|
|
|
+ .select('.rim')
|
|
|
+ .boundingClientRect((data) => {
|
|
|
+ this.domTopRim = data.top
|
|
|
+ })
|
|
|
+ .exec()
|
|
|
}
|
|
|
- if (e.scrollTop > this.domTop) {
|
|
|
+ if (e.scrollTop > this.domTopRim) {
|
|
|
+ this.activeIndex = 2
|
|
|
+ } else if (e.scrollTop > this.domTop) {
|
|
|
this.activeIndex = 1
|
|
|
} else {
|
|
|
this.activeIndex = 0
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ test() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '功能开发中',
|
|
|
+ icon: 'none',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ testGo(item) {
|
|
|
+ this.info = null
|
|
|
+ this.activeIndex = 0
|
|
|
+ this.score = ''
|
|
|
+ this.scoreFw = ''
|
|
|
+ this.scoreSs = ''
|
|
|
+ this.scoreWs = ''
|
|
|
+ this.scoreWz = ''
|
|
|
+ this.commentList = []
|
|
|
+ this.getHotelInfo(item.id)
|
|
|
+ this.getEvaData(item.id)
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0
|
|
|
+ })
|
|
|
+ // this.queryDom = null
|
|
|
+ },
|
|
|
// 进入全屏和退出全屏时触发的回调
|
|
|
fullscreenchange(e) {
|
|
|
this.isFullScreen = e.detail.fullScreen
|
|
|
@@ -427,11 +604,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 获取评论数据
|
|
|
- async getEvaData() {
|
|
|
+ async getEvaData(id) {
|
|
|
const res = await this.$myRequest({
|
|
|
url: '/mhotel/abcaevaluatePage.action',
|
|
|
data: {
|
|
|
- hotelId: this.hotelId,
|
|
|
+ hotelId: id ? id : this.hotelId,
|
|
|
page: 1,
|
|
|
rows: 5,
|
|
|
status: 0
|
|
|
@@ -449,11 +626,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 获取民宿信息
|
|
|
- async getHotelInfo() {
|
|
|
+ async getHotelInfo(id) {
|
|
|
const res = await this.$myRequest({
|
|
|
url: '/mhotel/ahpgetHouseByHotelId.action',
|
|
|
data: {
|
|
|
- hotelId: this.hotelId,
|
|
|
+ hotelId: id ? id : this.hotelId,
|
|
|
userId: uni.getStorageSync('userInfo').id,
|
|
|
queryStartTime: this.startTime,
|
|
|
queryEndTime: this.endTime
|
|
|
@@ -474,10 +651,14 @@ export default {
|
|
|
uni.pageScrollTo({
|
|
|
selector: '.evaluate'
|
|
|
})
|
|
|
- } else {
|
|
|
+ } else if (this.activeIndex === 0) {
|
|
|
uni.pageScrollTo({
|
|
|
scrollTop: 0
|
|
|
})
|
|
|
+ } else if (this.activeIndex === 2) {
|
|
|
+ uni.pageScrollTo({
|
|
|
+ selector: '.rim'
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
monthSwitch(e) {
|
|
|
@@ -679,6 +860,13 @@ export default {
|
|
|
uni.navigateTo({
|
|
|
url: `/pages/appraise/appraise?hotelId=${this.hotelId}`
|
|
|
})
|
|
|
+ },
|
|
|
+ handleClickSwiper(urls, current) {
|
|
|
+ const temList = urls.map((ele) => ele.url)
|
|
|
+ uni.previewImage({
|
|
|
+ urls: temList,
|
|
|
+ current
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -690,6 +878,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
min-height: 100vh;
|
|
|
background-color: #f2f3f5;
|
|
|
|
|
|
@@ -1232,7 +1421,7 @@ export default {
|
|
|
.evaluate_body {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ // margin-bottom: 20rpx;
|
|
|
width: 710rpx;
|
|
|
border-radius: 11rpx;
|
|
|
background-color: #fff;
|
|
|
@@ -1386,5 +1575,179 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .rim {
|
|
|
+ width: 710rpx;
|
|
|
+ background-color: #f2f3f5;
|
|
|
+
|
|
|
+ .rim_title {
|
|
|
+ line-height: 83rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rim_body {
|
|
|
+ .rim_box {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ width: 710rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 126rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box_info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 584rpx;
|
|
|
+ height: 150rpx;
|
|
|
+
|
|
|
+ .info_top {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .info_center {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ .info_bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ .bottom_rate {
|
|
|
+ color: #ff5733;
|
|
|
+ }
|
|
|
+ .bottom_num {
|
|
|
+ margin-left: 15rpx;
|
|
|
+ color: #a6a6a6;
|
|
|
+ }
|
|
|
+ .bottom_price {
|
|
|
+ margin-left: auto;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #ff5733;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #a6a6a6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rim_more {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 710rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ color: #096663;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-top: 2rpx;
|
|
|
+ width: 10rpx;
|
|
|
+ height: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenicSpot {
|
|
|
+ width: 710rpx;
|
|
|
+ background-color: #f2f3f5;
|
|
|
+
|
|
|
+ .scenicSpot_title {
|
|
|
+ line-height: 83rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenicSpot_body {
|
|
|
+ .scenicSpot_box {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ width: 710rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 126rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box_info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 584rpx;
|
|
|
+ height: 150rpx;
|
|
|
+
|
|
|
+ .info_top {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .info_center {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ .info_bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ .bottom_rate {
|
|
|
+ color: #ff5733;
|
|
|
+ }
|
|
|
+ .bottom_num {
|
|
|
+ margin-left: 15rpx;
|
|
|
+ color: #a6a6a6;
|
|
|
+ }
|
|
|
+ .bottom_price {
|
|
|
+ margin-left: auto;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #ff5733;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #a6a6a6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scenicSpot_more {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 710rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ color: #096663;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-top: 2rpx;
|
|
|
+ width: 10rpx;
|
|
|
+ height: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|