463 lines
14 KiB
Vue
463 lines
14 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='36' 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" />
|
|||
|
|
</view>
|
|||
|
|
<view class="search-btn" @tap="handleSearch">
|
|||
|
|
<text>搜索</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 筛选器 -->
|
|||
|
|
<view class="filter-container">
|
|||
|
|
<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="showDaysPicker">
|
|||
|
|
<text :class="{active: showDays}">{{ selectedDays > 4 ? selectedDays + '天以上' : selectedDays < 5 ? selectedDays + '天' : selectedDays}}</text>
|
|||
|
|
<text class="arrow" :class="{ 'arrow-up': showDays }">▼</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="filter-item-wrapper">
|
|||
|
|
<view class="filter-item" @tap="showThemePicker">
|
|||
|
|
<text :class="{active: showTheme}">{{ selectedTheme }}</text>
|
|||
|
|
<text class="arrow" :class="{ 'arrow-up': showTheme }">▼</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 下拉菜单容器 -->
|
|||
|
|
<view class="dropdown-container" v-if="showSort || showDays || showTheme">
|
|||
|
|
<!-- 智能排序下拉菜单 -->
|
|||
|
|
<view class="dropdown-menu" v-if="showSort">
|
|||
|
|
<view class="dropdown-item" :class="{selected: selectedSort===item}" v-for="(item, index) in sortOptions" :key="index" @tap="selectSort(item)">
|
|||
|
|
<text>{{ item.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 行程天天下拉菜单 -->
|
|||
|
|
<view class="dropdown-menu" v-if="showDays">
|
|||
|
|
<view class="dropdown-item" :class="{selected: selectedDays===item}" v-for="(item, index) in daysOptions" :key="index" @tap="selectDays(item)">
|
|||
|
|
<text>{{ item > 4 ? item + '天以上' : item + '天' }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 主题玩法下拉菜单 -->
|
|||
|
|
<view class="dropdown-menu" v-if="showTheme">
|
|||
|
|
<view class="dropdown-item" :class="{selected: selectedTheme===item}" v-for="(item, index) in themeOptions" :key="index" @tap="selectTheme(item)">
|
|||
|
|
<text>{{ item.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 景点列表 -->
|
|||
|
|
<scroll-view class="attractions-list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
|
|||
|
|
<!-- 遮罩层，只覆盖景点列表区域 -->
|
|||
|
|
<view class="dropdown-mask" v-if="showSort || showDays || showTheme" @tap="closeAllDropdowns"></view>
|
|||
|
|
<view class="attraction-card" v-for="(item, index) in attractionsList" :key="index" @click="goToDetail(item)">
|
|||
|
|
<view class="card-image">
|
|||
|
|
<image :src="item.photo" mode="aspectFill" style="width: 100%; height: 400rpx;"></image>
|
|||
|
|
<view class="card-title">{{ item.name }}</view>
|
|||
|
|
<view class="card-info">
|
|||
|
|
<view class="info-item">
|
|||
|
|
<image class="info-icon" src="https://api.ccttiot.com/smartmeter/img/static/uaXZbuu10macCqUHCY5o" mode=""></image>
|
|||
|
|
<text>{{ item.spotNum }}个景点</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<image class="info-icon" src="https://api.ccttiot.com/smartmeter/img/static/utR3KxdGuUgrdvIIv2bU" mode=""></image>
|
|||
|
|
<text>约{{ item.duration }}小时</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item">
|
|||
|
|
<image class="info-icon" src="https://api.ccttiot.com/smartmeter/img/static/uSCX0XFEULmiznMgSO2e" mode=""></image>
|
|||
|
|
<text>{{ item.distance == null ? '--' : item.distance }}公里</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="" style="margin-top: 30rpx;text-align: center;color: #ccc;width: 100%;">
|
|||
|
|
当前没有更多攻略了...
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: "#fff",
|
|||
|
|
},
|
|||
|
|
searchKeyword: '',
|
|||
|
|
showSort: false,
|
|||
|
|
showDays: false,
|
|||
|
|
showTheme: false,
|
|||
|
|
// 选中项显示
|
|||
|
|
selectedSort: '智能排序',
|
|||
|
|
selectedSortvalue:'',
|
|||
|
|
selectedDays: '行程天数',
|
|||
|
|
selectedTheme: '主题玩法',
|
|||
|
|
selectedThemeid:'',
|
|||
|
|
sortOptions: [{name:'智能排序',value:''},{name:'距离最近',value:'distance_asc'},{name:'评分最高',value:'rating_desc'},{name:'价格最低',value:'price_asc'}],
|
|||
|
|
daysOptions: ['1', '2', '3', '4', '5'],
|
|||
|
|
themeOptions: [{name:'自然风光',id:1},{name:'历史文化',id:2},{name:'美食体验',id:3},{name:'休闲娱乐',id:4},{name:'亲子游',id:5}],
|
|||
|
|
attractionsList: [],
|
|||
|
|
isRefreshing:false,
|
|||
|
|
pageNum:1,
|
|||
|
|
total:0,
|
|||
|
|
lat:'',
|
|||
|
|
lng:''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.getlist()
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
// 页面显示时关闭所有下拉菜单
|
|||
|
|
this.closeAllDropdowns()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 请求攻略列表
|
|||
|
|
getlist(){
|
|||
|
|
let url = ''
|
|||
|
|
let jingweidu = ''
|
|||
|
|
if(this.selectedDays < 5){
|
|||
|
|
url = `&dayNumber=${this.selectedDays}`
|
|||
|
|
}else if(this.selectedDays >= 1){
|
|||
|
|
url = `&minDayNumber=4`
|
|||
|
|
}else{
|
|||
|
|
url = ''
|
|||
|
|
}
|
|||
|
|
if(this.selectedSortvalue == 'distance_asc'){
|
|||
|
|
jingweidu = `currLat=${this.lat == null ? '' : this.lat}&currLon=${this.lng == null ? '' : this.lng}`
|
|||
|
|
}else{
|
|||
|
|
jingweidu = ''
|
|||
|
|
}
|
|||
|
|
this.$u.get(`/app/strategy/list?keyword=${this.searchKeyword}${url}&theme=${this.selectedThemeid}&pageNum${this.pageNum}&pageSize=20&sortBy=${this.selectedSortvalue}&${jingweidu}`).then((res) => {
|
|||
|
|
if(res.code == 200){
|
|||
|
|
this.total = res.total
|
|||
|
|
if(this.pageNum == 1){
|
|||
|
|
this.pageNum++
|
|||
|
|
this.attractionsList = res.rows
|
|||
|
|
}else{
|
|||
|
|
this.pageNum++
|
|||
|
|
this.attractionsList = this.attractionsList.concat(res.rows)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 上拉加载更多
|
|||
|
|
handqixing() {
|
|||
|
|
if(this.attractionsList.length < this.total){
|
|||
|
|
this.getlist()
|
|||
|
|
}
|
|||
|
|
console.log(11)
|
|||
|
|
},
|
|||
|
|
// 下拉刷新列表
|
|||
|
|
onRefresh() {
|
|||
|
|
this.isRefreshing = true
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.getlist()
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.isRefreshing = false
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 点击搜索查询列表
|
|||
|
|
handleSearch() {
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.getlist()
|
|||
|
|
},
|
|||
|
|
// 点击展示下拉菜单智能排序
|
|||
|
|
showSortPicker() {
|
|||
|
|
if (this.showSort) {
|
|||
|
|
this.showSort = false
|
|||
|
|
} else {
|
|||
|
|
this.closeAllDropdowns()
|
|||
|
|
this.showSort = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 点击展示下拉菜单行程天数
|
|||
|
|
showDaysPicker() {
|
|||
|
|
if (this.showDays) {
|
|||
|
|
this.showDays = false
|
|||
|
|
} else {
|
|||
|
|
this.closeAllDropdowns()
|
|||
|
|
this.showDays = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 点击展示下拉菜单主题玩法
|
|||
|
|
showThemePicker() {
|
|||
|
|
if (this.showTheme) {
|
|||
|
|
this.showTheme = false
|
|||
|
|
} else {
|
|||
|
|
this.closeAllDropdowns()
|
|||
|
|
this.showTheme = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 点击隐藏下拉菜单
|
|||
|
|
closeAllDropdowns() {
|
|||
|
|
this.showSort = false
|
|||
|
|
this.showDays = false
|
|||
|
|
this.showTheme = false
|
|||
|
|
},
|
|||
|
|
// 点击选择排序
|
|||
|
|
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) => {
|
|||
|
|
console.log('精确坐标:', 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()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 点击选择行程天数
|
|||
|
|
selectDays(item) {
|
|||
|
|
this.selectedDays = item
|
|||
|
|
this.showDays = false
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.getlist()
|
|||
|
|
},
|
|||
|
|
// 点击选择主题
|
|||
|
|
selectTheme(item) {
|
|||
|
|
this.selectedTheme = item.name
|
|||
|
|
this.selectedThemeid = item.id
|
|||
|
|
this.showTheme = false
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.getlist()
|
|||
|
|
},
|
|||
|
|
// 跳转到详情页
|
|||
|
|
goToDetail(item) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/page_fenbao/gonglue/gongluexq?id=' + item.id
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
.page {
|
|||
|
|
background: #fff;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
}
|
|||
|
|
// 搜索栏样式
|
|||
|
|
.search-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 40rpx 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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.search-btn {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
min-width: 120rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 筛选器样式
|
|||
|
|
.filter-container {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 0 30rpx 20rpx;
|
|||
|
|
gap: 40rpx;
|
|||
|
|
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;
|
|||
|
|
.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%;
|
|||
|
|
.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: #4db4fd;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
&.selected {
|
|||
|
|
color: #4db4fd;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 景点列表样式
|
|||
|
|
.attractions-list {
|
|||
|
|
background: #fff;
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 73vh;
|
|||
|
|
overflow: scroll;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
.attraction-card {
|
|||
|
|
margin: auto;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
background: #fff;
|
|||
|
|
width: 700rpx;
|
|||
|
|
.card-image {
|
|||
|
|
position: relative;
|
|||
|
|
height: 400rpx;
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.card-title {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
background: linear-gradient(rgba(0, 0, 0, 0.7) 20%,transparent);
|
|||
|
|
}
|
|||
|
|
.card-info {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
|||
|
|
padding: 60rpx 30rpx 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
.info-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
.info-icon {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
}
|
|||
|
|
text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 遮罩层样式 - 只覆盖景点列表区域
|
|||
|
|
.dropdown-mask {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.3);
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 响应式设计
|
|||
|
|
@media screen and (max-width: 750rpx) {
|
|||
|
|
.search-container {
|
|||
|
|
padding: 15rpx 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-container {
|
|||
|
|
padding: 0 20rpx 15rpx;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.attractions-list {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|