586 lines
15 KiB
Vue
586 lines
15 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="酒店" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
|
title-size='36' height='46' id="navbar">
|
|
</u-navbar>
|
|
|
|
<!-- 搜索栏 -->
|
|
<view class="search-container">
|
|
<view class="search-bar">
|
|
<image class="search-icon" src="https://api.ccttiot.com/smartmeter/img/static/uAO3fdmrrHTzqbVx9hYd" mode=""></image>
|
|
<input class="search-input" placeholder="搜索酒店、民宿" v-model="searchKeyword" @confirm="handleSearch" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 筛选器 -->
|
|
<view class="filter-container">
|
|
<view class="filter-item-wrapper">
|
|
<view class="filter-item" @tap="showAreaPicker">
|
|
<text :class="{active: showArea}">{{ selectedArea }}</text>
|
|
<text class="arrow" :class="{ 'arrow-up': showArea }">▼</text>
|
|
</view>
|
|
</view>
|
|
<view class="filter-item-wrapper">
|
|
<view class="filter-item" @tap="showSortPicker">
|
|
<text :class="{active: showSort}">{{ selectedSort }}</text>
|
|
<text class="arrow" :class="{ 'arrow-up': showSort }">▼</text>
|
|
</view>
|
|
</view>
|
|
<view class="filter-item-wrapper">
|
|
<view class="filter-item" @tap="showPricePicker">
|
|
<text :class="{active: showPrice}">{{ selectedPrice }}</text>
|
|
<text class="arrow" :class="{ 'arrow-up': showPrice }">▼</text>
|
|
</view>
|
|
</view>
|
|
<view class="filter-item-wrapper">
|
|
<view class="filter-item" @tap="showFilterPicker">
|
|
<text :class="{active: showFilter}">筛选</text>
|
|
<text class="arrow" :class="{ 'arrow-up': showFilter }">▼</text>
|
|
</view>
|
|
</view>
|
|
<!-- 下拉菜单容器 -->
|
|
<view class="dropdown-container" v-if="showArea || showSort || showPrice || showFilter">
|
|
<!-- 区域/位置下拉菜单 -->
|
|
<view class="dropdown-menu" v-if="showArea">
|
|
<view class="dropdown-item" :class="{selected: selectedArea===item.name}" v-for="(item, index) in areaOptions" :key="index" @tap="selectArea(item)">
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 综合排序下拉菜单 -->
|
|
<view class="dropdown-menu" v-if="showSort">
|
|
<view class="dropdown-item" :class="{selected: selectedSort===item.name}" v-for="(item, index) in sortOptions" :key="index" @tap="selectSort(item)">
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 价格下拉菜单 -->
|
|
<view class="dropdown-menu" v-if="showPrice">
|
|
<view class="dropdown-item" :class="{selected: selectedPrice===item.name}" v-for="(item, index) in priceOptions" :key="index" @tap="selectPrice(item)">
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 筛选下拉菜单 -->
|
|
<view class="dropdown-menu" v-if="showFilter">
|
|
<view class="dropdown-item" :class="{selected: selectedFilter===item.name}" v-for="(item, index) in filterOptions" :key="index" @tap="selectFilter(item)">
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 酒店列表 -->
|
|
<scroll-view class="hotel-list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
|
|
<!-- 遮罩层 -->
|
|
<view class="dropdown-mask" v-if="showArea || showSort || showPrice || showFilter" @tap="closeAllDropdowns"></view>
|
|
<view class="hotel-item" v-for="(item, index) in hotelList" :key="index" @click="goToDetail(item)">
|
|
<view class="hotel-image">
|
|
<image :src="getFirstImage(item.picture)" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="hotel-info">
|
|
<view class="hotel-name">{{ item.name }}</view>
|
|
<view class="hotel-rating">
|
|
<view class="rating-score">{{ item.rating || '4.9' }}</view>
|
|
<view class="rating-text" v-if="item.tags && item.tags.length > 0" v-for="(val,indexs) in item.tags" :key="indexs">{{val}}</view>
|
|
</view>
|
|
<view class="hotel-location">
|
|
<text>据您直线{{ item.distance || '--' }}公里</text>
|
|
<text v-if="item.address"> · {{ item.address.length > 10 ? item.address.slice(0,10) + '...' : item.address }}</text>
|
|
</view>
|
|
<view class="hotel-price" style="display: flex;justify-content: space-between;">
|
|
<text></text>
|
|
<view class="" style="display: flex;align-items: center;">
|
|
<!-- <text class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</text> -->
|
|
<text class="current-price" style="margin-left: 24rpx;">¥{{ item.priceMin || '0' }} <text style="color: #333;font-size: 24rpx;font-weight: 400;">起</text> </text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="no-more">
|
|
当前没有更多酒店了...
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
searchKeyword: '',
|
|
showArea: false,
|
|
showSort: false,
|
|
showPrice: false,
|
|
showFilter: false,
|
|
// 选中项显示
|
|
selectedArea: '区域/位置',
|
|
selectedSort: '综合排序',
|
|
selectedPrice: '价格',
|
|
selectedFilter: '筛选',
|
|
// 筛选选项
|
|
areaOptions: [
|
|
{name:'全部',
|
|
value:''}
|
|
],
|
|
sortOptions: [
|
|
{name: '综合排序', value: ''},
|
|
{name: '距离最近', value: 'distance_asc'},
|
|
{name: '评分最高', value: 'rating_desc'},
|
|
{name: '价格最低', value: 'price_asc'},
|
|
{name: '价格最高', value: 'price_desc'}
|
|
],
|
|
priceOptions: [{name: '价格', value: ''},
|
|
{name: '100以下', value: '0,100'},
|
|
{name: '100-200', value: '100,200'},
|
|
{name: '200-300', value: '200,300'},
|
|
{name: '300以上', value: '300'}],
|
|
filterOptions: [
|
|
{name: '全部', value: ''},
|
|
],
|
|
hotelList: [],
|
|
isRefreshing: false,
|
|
pageNum: 1,
|
|
total: 0,
|
|
lat: '',
|
|
lng: '',
|
|
selectedAreaValue: '',
|
|
selectedSortValue: '',
|
|
selectedPriceValue: '',
|
|
selectedFilterValue: ''
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.gettiaojian()
|
|
this.getshuaixuan()
|
|
// 初始化筛选选项
|
|
// 获取位置信息
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
isHighAccuracy: true,
|
|
accuracy: 'best',
|
|
success: (res) => {
|
|
this.lat = res.latitude
|
|
this.lng = res.longitude
|
|
this.getlist()
|
|
},
|
|
fail: (err) => {
|
|
console.error('获取位置失败:', err)
|
|
this.getlist()
|
|
}
|
|
})
|
|
},
|
|
onShow() {
|
|
// 页面显示时关闭所有下拉菜单
|
|
this.closeAllDropdowns()
|
|
},
|
|
methods: {
|
|
// 请求酒店筛选条件
|
|
getshuaixuan(){
|
|
this.$u.get(`/system/dict/data/type/hotel_type`).then(res =>{
|
|
if(res.code == 200){
|
|
res.data.forEach(item =>{
|
|
this.filterOptions.push({
|
|
name:item.dictLabel,
|
|
value:item.dictValue
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 请求酒店位置条件
|
|
gettiaojian(){
|
|
this.$u.get(`/system/dict/data/type/hotel_location`).then(res =>{
|
|
if(res.code == 200){
|
|
res.data.forEach(item =>{
|
|
this.areaOptions.push({
|
|
name:item.dictLabel,
|
|
value:item.dictValue
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 获取第一张图片
|
|
getFirstImage(pictureString) {
|
|
if (!pictureString) return '';
|
|
// 如果包含逗号，取第一张图片
|
|
if (pictureString.includes(',')) {
|
|
return pictureString.split(',')[0].trim();
|
|
}
|
|
return pictureString.trim();
|
|
},
|
|
// 请求酒店列表
|
|
getlist() {
|
|
this.$u.get(`/app/hotel/list?keyword=${this.searchKeyword}&pageNum=${this.pageNum}&pageSize=20&currLon=${this.lng}&currLat=${this.lat}&priceRange=${this.selectedPriceValue}&sortBy=${this.selectedSortValue}&location=${this.selectedAreaValue}&type=${this.selectedFilterValue}`).then((res) => {
|
|
if(res.code == 200){
|
|
this.total = res.total
|
|
if(this.pageNum == 1){
|
|
this.pageNum++
|
|
this.hotelList = res.rows
|
|
}else{
|
|
this.pageNum++
|
|
this.hotelList = this.hotelList.concat(res.rows)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 上拉加载更多
|
|
handqixing() {
|
|
if (this.hotelList.length < this.total) {
|
|
this.getlist()
|
|
}
|
|
},
|
|
// 下拉刷新列表
|
|
onRefresh() {
|
|
this.isRefreshing = true
|
|
this.pageNum = 1
|
|
this.getlist()
|
|
setTimeout(() => {
|
|
this.isRefreshing = false
|
|
}, 1000)
|
|
},
|
|
// 点击搜索查询列表
|
|
handleSearch() {
|
|
this.pageNum = 1
|
|
this.getlist()
|
|
},
|
|
// 点击展示下拉菜单 - 区域
|
|
showAreaPicker() {
|
|
if (this.showArea) {
|
|
this.showArea = false
|
|
} else {
|
|
this.closeAllDropdowns()
|
|
this.showArea = true
|
|
}
|
|
},
|
|
// 点击展示下拉菜单 - 排序
|
|
showSortPicker() {
|
|
if (this.showSort) {
|
|
this.showSort = false
|
|
} else {
|
|
this.closeAllDropdowns()
|
|
this.showSort = true
|
|
}
|
|
},
|
|
// 点击展示下拉菜单 - 价格
|
|
showPricePicker() {
|
|
if (this.showPrice) {
|
|
this.showPrice = false
|
|
} else {
|
|
this.closeAllDropdowns()
|
|
this.showPrice = true
|
|
}
|
|
},
|
|
// 点击展示下拉菜单 - 筛选
|
|
showFilterPicker() {
|
|
if (this.showFilter) {
|
|
this.showFilter = false
|
|
} else {
|
|
this.closeAllDropdowns()
|
|
this.showFilter = true
|
|
}
|
|
},
|
|
// 点击隐藏下拉菜单
|
|
closeAllDropdowns() {
|
|
this.showArea = false
|
|
this.showSort = false
|
|
this.showPrice = false
|
|
this.showFilter = false
|
|
},
|
|
// 点击选择区域
|
|
selectArea(item) {
|
|
this.selectedArea = item.name
|
|
this.selectedAreaValue = item.value
|
|
this.showArea = false
|
|
this.pageNum = 1
|
|
this.getlist()
|
|
},
|
|
// 点击选择排序
|
|
selectSort(item) {
|
|
this.selectedSort = item.name
|
|
this.selectedSortValue = item.value
|
|
this.showSort = false
|
|
if (this.selectedSortValue == 'distance_asc') {
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
isHighAccuracy: true,
|
|
accuracy: 'best',
|
|
success: (res) => {
|
|
this.lat = res.latitude
|
|
this.lng = res.longitude
|
|
this.pageNum = 1
|
|
this.getlist()
|
|
},
|
|
fail: (err) => {
|
|
console.error('获取位置失败:', err)
|
|
this.lat = ''
|
|
this.lng = ''
|
|
this.pageNum = 1
|
|
this.getlist()
|
|
}
|
|
})
|
|
} else {
|
|
this.pageNum = 1
|
|
this.getlist()
|
|
}
|
|
},
|
|
// 点击选择价格
|
|
selectPrice(item) {
|
|
this.selectedPrice = item.name
|
|
this.selectedPriceValue = item.value
|
|
this.showPrice = false
|
|
this.pageNum = 1
|
|
this.getlist()
|
|
},
|
|
// 点击选择筛选
|
|
selectFilter(item) {
|
|
this.selectedFilter = item.name
|
|
this.selectedFilterValue = item.value
|
|
this.showFilter = false
|
|
this.pageNum = 1
|
|
this.getlist()
|
|
},
|
|
// 跳转到详情页
|
|
goToDetail(item) {
|
|
uni.navigateTo({
|
|
url: '/page_fenbao/jiudian/jiudianxq?id=' + item.id
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
::v-deep .u-icon__icon,
|
|
::v-deep .u-title {
|
|
padding-bottom: 22rpx !important;
|
|
}
|
|
page {
|
|
background: #fff;
|
|
}
|
|
.page {
|
|
background: #fff;
|
|
min-height: 100vh;
|
|
}
|
|
// 搜索栏样式
|
|
.search-container {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 30rpx;
|
|
background: #fff;
|
|
gap: 20rpx;
|
|
z-index: 1002;
|
|
.search-bar {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #f5f5f5;
|
|
border-radius: 50rpx;
|
|
padding: 16rpx 30rpx;
|
|
gap: 20rpx;
|
|
.search-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
.search-input {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
border: none;
|
|
background: transparent;
|
|
outline: none;
|
|
&::placeholder {
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 筛选器样式
|
|
.filter-container {
|
|
position: relative;
|
|
display: flex;
|
|
background: #fff;
|
|
padding: 0 30rpx 20rpx;
|
|
gap: 20rpx;
|
|
z-index: 1002;
|
|
box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
|
|
.filter-item-wrapper {
|
|
flex: 1;
|
|
.filter-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10rpx 0;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
border-bottom: 2rpx solid transparent;
|
|
transition: all 0.3s ease;
|
|
text {
|
|
&.active {
|
|
color: #1EC28B;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.arrow {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
transition: transform 0.3s ease;
|
|
margin-left: 10rpx;
|
|
}
|
|
.arrow-up {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 下拉菜单容器样式
|
|
.dropdown-container {
|
|
position: fixed;
|
|
top: 366rpx;
|
|
left: 0;
|
|
background: #fff;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
z-index: 1001;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
.dropdown-menu {
|
|
width: 100%;
|
|
.dropdown-item {
|
|
padding: 30rpx 20rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
transition: all 0.3s ease;
|
|
background: #fff;
|
|
position: relative;
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
&:active {
|
|
background: #1EC28B;
|
|
color: #fff;
|
|
}
|
|
&.selected {
|
|
color: #1EC28B;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 酒店列表样式
|
|
.hotel-list {
|
|
background: #fff;
|
|
width: 750rpx;
|
|
height: 77vh;
|
|
overflow: scroll;
|
|
margin: auto;
|
|
margin-top: 20rpx;
|
|
.hotel-item {
|
|
display: flex;
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
width: 730rpx;
|
|
margin: auto;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
.hotel-image {
|
|
width: 180rpx;
|
|
height: 232rpx;
|
|
flex-shrink: 0;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
.hotel-info {
|
|
flex: 1;
|
|
padding: 24rpx 20rpx;
|
|
padding-left: 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.hotel-name {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #262B37;
|
|
margin-bottom: 15rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.hotel-rating {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15rpx;
|
|
gap: 10rpx;
|
|
flex-wrap: wrap;
|
|
.rating-score {
|
|
background: #1EC28B;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
padding: 6rpx 14rpx;
|
|
border-radius: 6rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.rating-text {
|
|
background: #E8FFFB;
|
|
color: #1EC28B;
|
|
font-size: 22rpx;
|
|
padding: 6rpx 14rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
.hotel-location {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-bottom: 15rpx;
|
|
line-height: 1.5;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.hotel-price {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10rpx;
|
|
width: 490rpx;
|
|
.original-price {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
text-decoration: line-through;
|
|
}
|
|
.current-price {
|
|
font-size: 32rpx;
|
|
color: #FF0000;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.no-more {
|
|
margin-top: 30rpx;
|
|
text-align: center;
|
|
color: #ccc;
|
|
font-size: 24rpx;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
}
|
|
// 遮罩层样式
|
|
.dropdown-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
z-index: 1;
|
|
}
|
|
</style>
|