1231 lines
32 KiB
Vue
1231 lines
32 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="fenlei-container fixed-container" :class="{'fade-in': fixedTabVisible && !isHiding, 'fade-out': isHiding}" v-show="fixedTabVisible || isAnimating">
|
||
<scroll-view class="fenlei-scroll" style="height: 400rpx;"
|
||
scroll-x="true"
|
||
:scroll-with-animation="true"
|
||
show-scrollbar="false">
|
||
<view class="serach">
|
||
<view class="touxiang">
|
||
<image style="width: 100%;height: 100%;border-radius: 50%;" src="https://api.ccttiot.com/21zwLDYqBJaa6b68ccc6ea37c67c785fa46193ba46c2.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="shuru">
|
||
<input type="text" placeholder="搜索景区、酒店" disabled="true" @click="btnsousuo"/>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uAO3fdmrrHTzqbVx9hYd" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="fenlei" style="height: 360rpx;padding-top: 100rpx;gap: 16rpx;">
|
||
<view class="icon" @click="btnpage(1)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uNvp27XBB0SGRJdwBatm" mode="">
|
||
</image>
|
||
</view> <!-- 导览 -->
|
||
<view class="icon" @click="btnpage(2)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ujtaJ9yoGaSoU2y7d8o0" mode="">
|
||
</image> <!-- 攻略 -->
|
||
</view>
|
||
<view class="icon" @click="btnpage(3)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uW4U5tAEwKWIF0xk6lD3" mode="">
|
||
</image> <!-- 住宿 -->
|
||
</view>
|
||
<view class="icon" @click="btnpage(4)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/upFUu8oBSir5xouB7iMV" mode="">
|
||
</image> <!-- 美食 -->
|
||
</view>
|
||
<view class="icon" @click="btnpage(5)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uMOF8Waum001gWd4IQeh" mode="">
|
||
</image> <!-- 文化 -->
|
||
</view>
|
||
<view class="icon" @click="btnpage(6)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uwj8jsmFgQn0Hqh7DsAI" mode="">
|
||
</image> <!-- 导游 -->
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- https://api.ccttiot.com/21zwLDYqBJaa6b68ccc6ea37c67c785fa46193ba46c2.png -->
|
||
|
||
<!-- <image v-if="!fixedTabVisible" src="https://api.ccttiot.com/smartmeter/img/static/uK1w7pSC1LqpVtZLz2Gc" class="topimg" mode=""></image> -->
|
||
<!-- 滚动部分内容 -->
|
||
<scroll-view class="bdbox"
|
||
scroll-y
|
||
@scroll="handleScroll"
|
||
@scrolltolower="handqixing"
|
||
:scroll-top="scrollTop">
|
||
<u-swiper class="topimg" :height="588" bg-color="#fff" :list="lists"></u-swiper>
|
||
<!-- 头部搜索 -->
|
||
<view class="serach">
|
||
<view class="touxiang">
|
||
<image style="width: 100%;height: 100%;border-radius: 50%;" src="https://api.ccttiot.com/21zwLDYqBJaa6b68ccc6ea37c67c785fa46193ba46c2.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="shuru">
|
||
<input type="text" placeholder="搜索景区、酒店" disabled="true" @click="btnsousuo"/>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uAO3fdmrrHTzqbVx9hYd" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<!-- 首页公告 -->
|
||
<view class="gonggao">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uumGjcsuiyoV00YMt8s9" mode=""></image>
|
||
<view class="">
|
||
福鼎市文化旅游地图
|
||
</view>
|
||
</view>
|
||
<view class="fenlei-container">
|
||
<scroll-view class="fenlei-scroll"
|
||
scroll-x="true"
|
||
:scroll-with-animation="true"
|
||
show-scrollbar="false">
|
||
<view class="fenlei">
|
||
<view class="icon" @click="btnpage(1)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uNvp27XBB0SGRJdwBatm" mode="">
|
||
</image>
|
||
</view><!-- 导览 -->
|
||
<view class="icon" @click="btnpage(2)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ujtaJ9yoGaSoU2y7d8o0" mode="">
|
||
</image> <!-- 攻略 -->
|
||
</view>
|
||
<view class="icon" @click="btnpage(3)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uW4U5tAEwKWIF0xk6lD3" mode="">
|
||
</image> <!-- 住宿 -->
|
||
</view>
|
||
<view class="icon" @click="btnpage(4)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/upFUu8oBSir5xouB7iMV" mode="">
|
||
</image> <!-- 美食 -->
|
||
</view>
|
||
<view class="icon" @click="btnpage(5)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uMOF8Waum001gWd4IQeh" mode="">
|
||
</image> <!-- 文化 -->
|
||
</view>
|
||
<view class="icon" @click="btnpage(6)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uwj8jsmFgQn0Hqh7DsAI" mode="">
|
||
</image> <!-- 导游 -->
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 视频介绍 -->
|
||
<view class="videoxc">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uKX1Cv1H2ZjWi4y03xU4" mode=""></image>
|
||
<video :src="video"
|
||
loop="true" autoplay="true" muted="true"></video>
|
||
</view>
|
||
<!-- 热门推荐 -->
|
||
<view class="remen">
|
||
<view class="rementitle">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uQfz6J8VHnar8K3BwFlD" mode=""></image>
|
||
</view>
|
||
<view class="rmtopimg" @click="btnremen">
|
||
<view class="rmltimg" v-if="hotAreaImages[0]">
|
||
<view class="">
|
||
<image style="border-radius: 16rpx;" :src="hotAreaImages[0]" mode="aspectFill"></image>
|
||
<text class="name">{{ hotAreaNames[0] }}</text>
|
||
<text class="jianjie">{{ hotAreaDescriptions[0] }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="rmrtimg">
|
||
<view class="" v-if="hotAreaImages[1]">
|
||
<image style="border-radius: 16rpx;" :src="hotAreaImages[1]" mode="aspectFill">
|
||
</image>
|
||
<text class="name">{{ hotAreaNames[1] }}</text>
|
||
<text class="jianjie">{{ hotAreaDescriptions[1] }}</text>
|
||
</view>
|
||
<view class="" v-if="hotAreaImages[2]">
|
||
<image style="border-radius: 16rpx;" :src="hotAreaImages[2]" mode="aspectFill">
|
||
</image>
|
||
<text class="name">{{ hotAreaNames[2] }}</text>
|
||
<text class="jianjie">{{ hotAreaDescriptions[2] }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="meishi" style="margin-top:30rpx;">
|
||
<view class="meishilt" @click="btnpage(4)">
|
||
<view class="meishitop">
|
||
<image class="dibiaoimg"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/u1emV89uj8AQR1i5MfPs" mode="">
|
||
</image>
|
||
<image class="jiantou"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uxhocoNzXasArlGLa2j5" mode="">
|
||
</image>
|
||
</view>
|
||
<image class="daimg" v-if="dishImages[0]" :src="dishImages[0]"
|
||
mode="aspectFill"></image>
|
||
<view class="meishibot">
|
||
<image v-if="dishImages[1]" :src="dishImages[1]" mode="aspectFill">
|
||
</image>
|
||
<image v-if="dishImages[2]" :src="dishImages[2]" mode="aspectFill">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view class="meishirt" @click="btnitem">
|
||
<view class="meishitop">
|
||
攻略推荐
|
||
<image class="jiantou"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uLbDD7xYvH9mgoM9yqXH" mode="">
|
||
</image>
|
||
</view>
|
||
<view class="mieshilist">
|
||
<view class="meishiitem" v-for="(item,index) in strategyList" :key="index">
|
||
<image :src="item.photo" mode="aspectFill" style="margin-right: 10rpx;"></image>
|
||
<view class="wz">
|
||
<text class="tit" v-if="item.name">{{item.name.length > 7 ? item.name.slice(0,6) + '...' : item.name}}</text>
|
||
<text class="tits" v-if="item.description">{{item.description.length > 7 ? item.description.slice(0,7) + '...' : item.description}}</text>
|
||
<text class="dz" v-if="item.areaAddress">{{item.areaAddress.length > 10 ? item.areaAddress.slice(0,9) + '...' : item.areaAddress}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 游玩推荐 @click="btnremen" -->
|
||
<view class="youwan">
|
||
<scroll-view class="ywtab" scroll-x="true" show-scrollbar="false" enhanced="true">
|
||
<view class="ywcontent">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uPDjdxan6aR8Dhjwrxzn" mode=""></image>
|
||
<!-- <view class="ywitem" v-for="(item,index) in 15" :key="index">
|
||
{{ ['柏杨村', '太姥山', '牛郎岗', '渔井村', '白琳镇', '点头镇', '管阳镇', '磻溪镇', '叠石乡', '贯岭镇', '前岐镇', '沙埕镇', '店下镇', '龙安镇', '佳阳乡'][index] }}
|
||
</view> -->
|
||
</view>
|
||
</scroll-view>
|
||
<view class="ywimg" v-if="recommendAreaHero" @click="btnyouwan(recommendAreaHero, 1)">
|
||
<image :src="recommendAreaHero.image" mode="aspectFill"></image>
|
||
<view class="">
|
||
{{ recommendAreaHero.name }}
|
||
</view>
|
||
</view>
|
||
<view class="ywlist">
|
||
<view class="" v-for="(it, idx) in recommendAreaCards" :key="idx" @click="btnyouwan(it, 2)">
|
||
<image :src="it.image" mode="aspectFill"></image>
|
||
<text>{{ it.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 精品路线 -->
|
||
<view class="wenhua">
|
||
<scroll-view class="ywtab" scroll-x="true" show-scrollbar="false" enhanced="true">
|
||
<view class="ywcontent">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ukcE3BtUtcWmzNPYIAOK" mode=""></image>
|
||
<!-- <view class="ywitem" v-for="(item,index) in 5" :key="index">
|
||
{{ ['文化之旅', '休闲之旅', '研学之旅', '渔井村', '白琳镇', '点头镇'][index] }}
|
||
</view> -->
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="wrap">
|
||
<view class="waterfall-container">
|
||
<view class="waterfall-left">
|
||
<view class="demo-warter" v-for="(item, index) in flowList.filter((_, i) => i % 2 === 0)" :key="index" @click="btngonglue(item)">
|
||
<u-lazy-load threshold="-450" border-radius="10" :image="item.photo"
|
||
:index="index"></u-lazy-load>
|
||
<view class="dizhi">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/utLEbsdQEquhFgaY1awN" mode=""></image>
|
||
{{item.areaAddress}}
|
||
</view>
|
||
<view class="cont">
|
||
{{item.name && item.name.length > 10 ? item.name.slice(0,10) + '...' : item.name}}
|
||
</view>
|
||
<!-- <view class="shuju">
|
||
<view class="">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u0pAKdQ4zhTD4R9nSua4" mode=""></image> {{item.views}}
|
||
</view>
|
||
<view class="">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uHzTj0AQBMfsXZsx3bH0" mode=""></image> {{item.collections}}
|
||
</view>
|
||
<view class="">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ua4ZMQ4gPMXbXGCZXaGd" mode=""></image> {{item.forwards}}
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="waterfall-right">
|
||
<view class="demo-warter" v-for="(item, index) in flowList.filter((_, i) => i % 2 === 1)" :key="index" @click="btngonglue(item)">
|
||
<u-lazy-load threshold="-450" border-radius="10" :image="item.photo"
|
||
:index="index"></u-lazy-load>
|
||
<view class="dizhi">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/utLEbsdQEquhFgaY1awN" mode=""></image>
|
||
{{item.areaAddress}}
|
||
</view>
|
||
<view class="cont">
|
||
{{item.name && item.name.length > 10 ? item.name.slice(0,10) + '...' : item.name}}
|
||
</view>
|
||
<!-- <view class="shuju">
|
||
<view class="">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u0pAKdQ4zhTD4R9nSua4" mode=""></image> {{item.views}}
|
||
</view>
|
||
<view class="">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uHzTj0AQBMfsXZsx3bH0" mode=""></image> {{item.collections}}
|
||
</view>
|
||
<view class="">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ua4ZMQ4gPMXbXGCZXaGd" mode=""></image> {{item.forwards}}
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<tab-bar :indexs='0'></tab-bar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "",
|
||
},
|
||
loadStatus: 'loadmore',
|
||
flowList: [],
|
||
list: [],
|
||
fixedTabVisible:false,
|
||
isAnimating: false,
|
||
isHiding: false,
|
||
video:'',
|
||
lists:[],
|
||
hotAreaList:[],// 热门景点
|
||
recommendAreaList:[],// 推荐景点
|
||
strategyList:[],// 攻略
|
||
dishList:[],// 美食
|
||
pageNum:1,
|
||
total:0
|
||
}
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: '玩转福鼎',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
// 分享到朋友圈
|
||
onShareTimeline: function() {
|
||
return {
|
||
title: '玩转福鼎',
|
||
query: '',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getinfo()
|
||
this.gethome()
|
||
this.getlunbo()
|
||
this.addRandomData()
|
||
uni.getLocation({
|
||
type: 'gcj02', // 国内地图更兼容
|
||
isHighAccuracy: true,
|
||
accuracy:'best',
|
||
success: (res) => {
|
||
console.log('精确坐标:', res)
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败:', err)
|
||
}
|
||
})
|
||
},
|
||
onReachBottom() {
|
||
// 检查是否还有更多数据
|
||
if(this.flowList.length >= this.total){
|
||
return
|
||
}
|
||
this.loadStatus = 'loading'
|
||
this.addRandomData()
|
||
// 延迟重置加载状态
|
||
setTimeout(() => {
|
||
this.loadStatus = 'loadmore'
|
||
}, 500)
|
||
},
|
||
computed: {
|
||
// 热门推荐
|
||
hotAreaImages() {
|
||
const list = Array.isArray(this.hotAreaList) ? this.hotAreaList : []
|
||
const pick = (itemIndex, pictureIndex) => {
|
||
const item = list[itemIndex]
|
||
if (!item || !item.picture) return ''
|
||
const parts = String(item.picture).split(',').filter(Boolean)
|
||
return parts[pictureIndex] || parts[0] || ''
|
||
}
|
||
return [
|
||
pick(0, 0),
|
||
pick(1, 1),
|
||
pick(2, 2)
|
||
].filter(Boolean)
|
||
},
|
||
// 热门推荐名称（与图片索引对齐）
|
||
hotAreaNames() {
|
||
const list = Array.isArray(this.hotAreaList) ? this.hotAreaList : []
|
||
const nameAt = (idx) => {
|
||
const item = list[idx]
|
||
return item && item.name ? String(item.name) : ''
|
||
}
|
||
return [nameAt(0), nameAt(1), nameAt(2)]
|
||
},
|
||
// 热门推荐简介（与图片索引对齐，超10字截断）
|
||
hotAreaDescriptions() {
|
||
const list = Array.isArray(this.hotAreaList) ? this.hotAreaList : []
|
||
const descAt = (idx) => {
|
||
const item = list[idx]
|
||
const raw = item && item.description ? String(item.description) : ''
|
||
if (!raw) return ''
|
||
return raw.length > 10 ? (raw.slice(0, 10) + '...') : raw
|
||
}
|
||
return [descAt(0), descAt(1), descAt(2)]
|
||
},
|
||
// 推荐景点小图（第2-4项，最多三项）
|
||
recommendAreaCards() {
|
||
const list = Array.isArray(this.recommendAreaList) ? this.recommendAreaList : []
|
||
return list.slice(1, 4).map(it => {
|
||
const src = (it && it.picture) ? String(it.picture) : ''
|
||
const img = src ? src.split(',').filter(Boolean)[0] || '' : ''
|
||
return {
|
||
image: img,
|
||
name: (it && it.name) ? it.name : '',
|
||
id: (it && it.id) ? it.id : ''
|
||
}
|
||
}).filter(it => it.image && it.name && it.id)
|
||
},
|
||
// 推荐景点大图（取第一项）
|
||
recommendAreaHero() {
|
||
const list = Array.isArray(this.recommendAreaList) ? this.recommendAreaList : []
|
||
if (!list.length) return null
|
||
const first = list[0]
|
||
if (!first) return null
|
||
const src = first.picture ? String(first.picture) : ''
|
||
const img = src ? src.split(',').filter(Boolean)[0] || '' : ''
|
||
const name = first.name || ''
|
||
const id = first.id || ''
|
||
if (!img || !name || !id) return null
|
||
return { image: img, name, id }
|
||
},
|
||
// 美食图片（最多三张）
|
||
dishImages() {
|
||
const list = Array.isArray(this.dishList) ? this.dishList : []
|
||
const firstThree = list.slice(0, 3)
|
||
const toImage = (item) => {
|
||
if (!item) return ''
|
||
// 优先使用 imageUrl；若包含多图逗号分隔，取第一张；再兜底到 picture
|
||
const primary = item.imageUrl || item.image_url || ''
|
||
const fallback = item.picture || ''
|
||
const src = primary || fallback
|
||
if (!src) return ''
|
||
const parts = String(src).split(',').filter(Boolean)
|
||
return parts[0] || ''
|
||
}
|
||
return firstThree.map(toImage).filter(Boolean)
|
||
}
|
||
},
|
||
methods: {
|
||
// 点击进行搜索
|
||
btnsousuo(){
|
||
uni.navigateTo({
|
||
url:'/page_user/sousuo/index'
|
||
})
|
||
},
|
||
// 请求个人信息
|
||
getinfo(){
|
||
this.$u.get("/getInfo").then(res =>{
|
||
if(res.code == 200){
|
||
|
||
}else if(res.code == 401){
|
||
this.getlogo()
|
||
}
|
||
})
|
||
},
|
||
// 静默登录
|
||
getlogo(){
|
||
let taht = this
|
||
wx.login({
|
||
success(res) {
|
||
if (res.code) {
|
||
let data = {
|
||
loginCode: res.code,
|
||
appId:taht.$store.state.appid
|
||
}
|
||
taht.$u.post('/wxLogin', data).then(res => {
|
||
if (res.code == 200) {
|
||
uni.setStorageSync('token', res.token)
|
||
taht.getinfo()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
},
|
||
// 请求首页景区
|
||
gethome(){
|
||
this.$u.get(`/app/home`).then(res =>{
|
||
if(res.code == 200){
|
||
this.hotAreaList = res.data.hotAreaList; //热门景点
|
||
this.recommendAreaList = res.data.recommendAreaList //推荐景点
|
||
this.strategyList = res.data.strategyList //攻略
|
||
this.dishList = res.data.dishList //美食
|
||
}
|
||
})
|
||
},
|
||
|
||
// 请求轮播图
|
||
getlunbo(){
|
||
// this.lists.push({
|
||
// image:'https://api.ccttiot.com/smartmeter/img/static/u2qU0tM0WQqCfXzJO8lX'
|
||
// })
|
||
this.$u.get(`/app/app/basicInfo/1`).then(res =>{
|
||
if(res.code == 200){
|
||
this.video = res.data.videoUrl
|
||
if(res.data.carousel){
|
||
let arr = res.data.carousel.split(',')
|
||
arr.forEach(item =>{
|
||
this.lists.push({
|
||
image:item
|
||
})
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击热门推荐跳转到列表
|
||
btnitem(){
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/gonglue/index'
|
||
})
|
||
},
|
||
// 点击跳转游玩景点
|
||
btnyouwan(item, num){
|
||
if(!item || !item.id) {
|
||
console.error('缺少景点ID', item)
|
||
return
|
||
}
|
||
if(num == 1){
|
||
// 点击大图跳转
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/remenxq?id=' + item.id
|
||
})
|
||
}else if(num == 2){
|
||
// 点击小图跳转
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/remenxq?id=' + item.id
|
||
})
|
||
}
|
||
},
|
||
// 点击热门推荐页面图片跳转
|
||
btnremen(){
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/remen'
|
||
})
|
||
},
|
||
// 点击跳转页面
|
||
btnpage(num){
|
||
if(num == 1){ //跳转导览
|
||
uni.navigateTo({
|
||
url:'/page_user/daolan'
|
||
})
|
||
}else if(num == 2){ //跳转攻略
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/gonglue/index'
|
||
})
|
||
}else if(num == 3){ //跳转住宿
|
||
// uni.navigateTo({
|
||
// url:'/'
|
||
// })
|
||
uni.navigateToMiniProgram({ //跳转到美团app预定酒店
|
||
appId: 'wx7649daed8f2335c4', // 目标小程序的 AppID（必须正确）
|
||
path: '', // 跳转路径，空字符串表示首页
|
||
success(res) {
|
||
console.log('跳转成功', res);
|
||
},
|
||
fail(err) {
|
||
console.error('跳转失败', err);
|
||
// 常见失败原因：AppID错误、用户拒绝跳转、目标小程序未上线
|
||
}
|
||
})
|
||
}else if(num == 4){ //跳转美食
|
||
uni.navigateTo({
|
||
url:'/page_user/meishi/index'
|
||
})
|
||
}else if(num == 5){ //跳转文化
|
||
uni.navigateTo({
|
||
url:'/page_user/wenhua/index'
|
||
})
|
||
}else if(num == 6){ //跳转导游
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/daoyou/index'
|
||
})
|
||
}
|
||
},
|
||
// 点击攻略跳转到攻略详情
|
||
btngonglue(item){
|
||
console.log(item);
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/gonglue/gongluexq?id=' + item.id
|
||
})
|
||
},
|
||
// 瀑布流添加数据
|
||
addRandomData() {
|
||
// 直接添加所有数据，确保每个数据都能显示
|
||
this.$u.get(`/app/strategy/list?pageNum=${this.pageNum}&pageSize=20`).then(res => {
|
||
if(res.code == 200){
|
||
this.total = res.total
|
||
if(this.pageNum == 1){
|
||
// 第一页时清空列表
|
||
this.flowList = []
|
||
this.list = res.rows
|
||
}else{
|
||
// 后续页面追加数据
|
||
this.list = this.list.concat(res.rows)
|
||
}
|
||
// 处理数据并映射字段
|
||
res.rows.forEach((item, index) => {
|
||
// let newItem = {
|
||
// id: this.$u.guid(),
|
||
// image: item.photo || '', // 映射图片字段
|
||
// title: item.name || '', // 映射标题字段
|
||
// dizhi: item.areaAddress || '' // 映射地址字段
|
||
// }
|
||
this.flowList.push(item)
|
||
})
|
||
// 页码自增，为下次加载做准备
|
||
this.pageNum++
|
||
}
|
||
}).catch(err => {
|
||
console.error('加载瀑布流数据失败:', err)
|
||
})
|
||
},
|
||
// 页面滚动监听
|
||
onPageScroll(e) {
|
||
console.log(e,'监听页面滚动数据')
|
||
this.fixedTabVisible = e.scrollTop >= 6
|
||
// console.log('222',this.fixedTabVisible)
|
||
},
|
||
// 列表容器滚动监听
|
||
handleScroll(e) {
|
||
// 获取滚动容器的滚动位置
|
||
const scrollTop = e.detail.scrollTop || 0
|
||
const shouldShow = scrollTop >= 220
|
||
if (shouldShow !== this.fixedTabVisible && !this.isAnimating) {
|
||
if (shouldShow) { //根据shouldShow状态来确定头部的显示与隐藏
|
||
// 显示上下移动过渡动画
|
||
this.isHiding = false
|
||
this.fixedTabVisible = true
|
||
this.isAnimating = true
|
||
setTimeout(() => {
|
||
this.isAnimating = false
|
||
}, 500)
|
||
} else {
|
||
// 隐藏上下移动过渡动画
|
||
this.isHiding = true
|
||
this.isAnimating = true
|
||
setTimeout(() => {
|
||
this.fixedTabVisible = false
|
||
this.isHiding = false
|
||
this.isAnimating = false
|
||
}, 500)
|
||
}
|
||
}
|
||
console.log('111',this.fixedTabVisible, 'isHiding:', this.isHiding)
|
||
},
|
||
// 上拉加载更多
|
||
handqixing(){
|
||
console.log(this.total,this.flowList.length);
|
||
if(this.total > this.flowList.length){
|
||
this.addRandomData()
|
||
}
|
||
console.log('加载更多瀑布流数据')
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
::v-deep .u-list-image-wrap{
|
||
border-radius: 0 !important;
|
||
}
|
||
page {
|
||
background: #E5F9F3;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.bdbox {
|
||
width: 100%;
|
||
height: 88vh;
|
||
overflow: scroll;
|
||
box-sizing: border-box;
|
||
}
|
||
.bdboxs {
|
||
width: 100%;
|
||
height: 75vh;
|
||
overflow: scroll;
|
||
padding-bottom: 50rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 9;
|
||
background: #E5F9F3;
|
||
}
|
||
.wenhua {
|
||
margin-top: 26rpx;
|
||
width: 100%;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
.waterfall-container {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
.waterfall-left,
|
||
.waterfall-right {
|
||
flex: 1;
|
||
}
|
||
}
|
||
.demo-warter {
|
||
border-radius: 8px;
|
||
margin-bottom: 20rpx;
|
||
background-color: #ffffff;
|
||
padding: 8px;
|
||
position: relative;
|
||
.shuju{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10rpx;
|
||
justify-content: flex-end;
|
||
view{
|
||
font-size: 14rpx;
|
||
color: #3D3D3D;
|
||
margin-left: 32rpx;
|
||
image{
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.cont{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
padding-left: 18rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
.dizhi{
|
||
margin-top: 16rpx;
|
||
padding-left: 18rpx;
|
||
|
||
image{
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
.u-close {
|
||
position: absolute;
|
||
top: 32rpx;
|
||
right: 32rpx;
|
||
}
|
||
.demo-image {
|
||
width: 100%;
|
||
border-radius: 4px;
|
||
}
|
||
.demo-title {
|
||
font-size: 30rpx;
|
||
margin-top: 5px;
|
||
color: $u-main-color;
|
||
}
|
||
.demo-tag {
|
||
display: flex;
|
||
margin-top: 5px;
|
||
}
|
||
.demo-tag-owner {
|
||
background-color: $u-type-error;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 50rpx;
|
||
font-size: 20rpx;
|
||
line-height: 1;
|
||
}
|
||
.demo-tag-text {
|
||
border: 1px solid $u-type-primary;
|
||
color: $u-type-primary;
|
||
margin-left: 10px;
|
||
border-radius: 50rpx;
|
||
line-height: 1;
|
||
padding: 4rpx 14rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 50rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
.demo-price {
|
||
font-size: 30rpx;
|
||
color: $u-type-error;
|
||
margin-top: 5px;
|
||
}
|
||
.demo-shop {
|
||
font-size: 22rpx;
|
||
color: $u-tips-color;
|
||
margin-top: 5px;
|
||
}
|
||
.ywtab {
|
||
width: 100%;
|
||
.ywcontent {
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
padding: 20rpx 0;
|
||
}
|
||
.ywitem {
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #606060;
|
||
margin-right: 46rpx;
|
||
flex-shrink: 0;
|
||
min-width: 120rpx;
|
||
text-align: center;
|
||
}
|
||
image {
|
||
width: 150rpx;
|
||
height: 102rpx;
|
||
margin-right: 46rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
.youwan {
|
||
margin-top: 26rpx;
|
||
width: 100%;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
.ywlist {
|
||
display: flex;
|
||
margin-top: 42rpx;
|
||
gap: 28rpx;
|
||
view {
|
||
width: 224rpx;
|
||
height: 118rpx;
|
||
border-radius: 6rpx;
|
||
position: relative;
|
||
padding-top: 78rpx;
|
||
padding-left: 14rpx;
|
||
image {
|
||
width: 224rpx;
|
||
height: 118rpx;
|
||
border-radius: 6rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
text {
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
.ywimg {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 264rpx;
|
||
padding-top: 182rpx;
|
||
padding-left: 40rpx;
|
||
view {
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
image {
|
||
width: 100%;
|
||
height: 264rpx;
|
||
border-radius: 6rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
.ywtab {
|
||
width: 100%;
|
||
.ywcontent {
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
padding: 20rpx 0;
|
||
}
|
||
.ywitem {
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #606060;
|
||
margin-right: 46rpx;
|
||
flex-shrink: 0;
|
||
min-width: 120rpx;
|
||
text-align: center;
|
||
}
|
||
image {
|
||
width: 150rpx;
|
||
height: 102rpx;
|
||
margin-right: 46rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
.meishi {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.meishirt {
|
||
width: 352rpx;
|
||
height: 514rpx;
|
||
background: #F7B782;
|
||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||
.mieshilist {
|
||
width: 342rpx;
|
||
height: 456rpx;
|
||
background: linear-gradient(153deg, #FFFFFF 20%, rgba(255, 255, 255, 0) 100%);
|
||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||
margin-top: 12rpx;
|
||
padding-top: 22rpx;
|
||
.meishiitem {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 298rpx;
|
||
height: 126rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
||
padding: 12rpx;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
margin-bottom: 18rpx;
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
.wz {
|
||
.tit {
|
||
font-weight: 600;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
display: block;
|
||
}
|
||
|
||
.tits {
|
||
font-size: 20rpx;
|
||
color: #3D3D3D;
|
||
display: block;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.dz {
|
||
font-size: 16rpx;
|
||
color: #3D3D3D;
|
||
display: block;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.meishitop {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #664608;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
padding-top: 8rpx;
|
||
box-sizing: border-box;
|
||
image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
.meishilt {
|
||
width: 342rpx;
|
||
height: 514rpx;
|
||
background: linear-gradient(41deg, #82D3F7 0%, rgba(218, 190, 255, 0) 100%);
|
||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
.daimg {
|
||
width: 1;
|
||
height: 278rpx;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
margin-top: 4rpx;
|
||
margin-bottom: 14rpx;
|
||
}
|
||
.meishibot {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
image {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
}
|
||
}
|
||
.meishitop {
|
||
display: flex;
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
.dibiaoimg {
|
||
width: 168rpx;
|
||
height: 54rpx;
|
||
}
|
||
.jiantou {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.remen {
|
||
width: 100%;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
.rementitle {
|
||
image {
|
||
width: 150rpx;
|
||
height: 102rpx;
|
||
}
|
||
}
|
||
.rmtopimg {
|
||
margin-top: 28rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
.rmltimg {
|
||
image {
|
||
width: 342rpx;
|
||
height: 342rpx;
|
||
}
|
||
view {
|
||
position: relative;
|
||
height: 342rpx;
|
||
width: 342rpx;
|
||
padding-top: 256rpx;
|
||
padding-left: 18rpx;
|
||
image {
|
||
width: 342rpx;
|
||
height: 342rpx;
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
.name {
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
display: block;
|
||
}
|
||
.jianjie {
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 4rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.rmrtimg {
|
||
view {
|
||
position: relative;
|
||
height: 186rpx;
|
||
width: 352rpx;
|
||
padding-top: 56rpx;
|
||
padding-left: 18rpx;
|
||
image {
|
||
width: 352rpx;
|
||
height: 156rpx;
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
.name {
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
display: block;
|
||
}
|
||
.jianjie {
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 4rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.videoxc {
|
||
position: relative;
|
||
top: -40rpx;
|
||
width: 100%;
|
||
height: 440rpx;
|
||
background-color: #E5F9F3;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
image {
|
||
width: 706rpx;
|
||
height: 420rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 20rpx;
|
||
}
|
||
video {
|
||
width: 622rpx;
|
||
height: 320rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 56rpx;
|
||
}
|
||
}
|
||
.fenlei-container {
|
||
margin-top: 520rpx;
|
||
.fenlei-scroll {
|
||
width: 100%;
|
||
height: 288rpx;
|
||
white-space: nowrap;
|
||
}
|
||
.fenlei {
|
||
width: 750rpx;
|
||
height: 280rpx;
|
||
overflow: scroll;
|
||
background: linear-gradient(17deg, #2FC1DE 0%, #9CF1BB 62%, rgba(212, 248, 174, 1) 100%), rgba(0, 0, 0, 0.1);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
gap: 30rpx;
|
||
.icon {
|
||
flex-shrink: 0;
|
||
width: 104rpx;
|
||
height: 136rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
image {
|
||
width: 104rpx;
|
||
height: 136rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.gonggao {
|
||
width: 670rpx;
|
||
height: 66rpx;
|
||
background: #E8FFFB;
|
||
border-radius: 37rpx 37rpx 37rpx 37rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 26rpx;
|
||
position: absolute;
|
||
top: 554rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 2;
|
||
image {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
margin-right: 26rpx;
|
||
}
|
||
view {
|
||
font-size: 30rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
.serach {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
top: 100rpx;
|
||
z-index: 999 !important;
|
||
.touxiang {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
margin-left: 24rpx;
|
||
}
|
||
.shuru {
|
||
position: relative;
|
||
margin-left: 24rpx;
|
||
image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
position: absolute;
|
||
left: 38rpx;
|
||
top: 18rpx;
|
||
}
|
||
input {
|
||
width: 306rpx;
|
||
height: 60rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
padding-left: 86rpx;
|
||
}
|
||
}
|
||
}
|
||
.topimg {
|
||
width: 750rpx;
|
||
height: 588rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 固定分类容器样式 */
|
||
.fixed-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
margin-top: 0;
|
||
background: linear-gradient(17deg, #2FC1DE 0%, #9CF1BB 62%, #d4f8ae 100%), rgba(0, 0, 0, 0.1);
|
||
width: 100%;
|
||
}
|
||
|
||
/* 上下移动动画样式 */
|
||
.fade-in {
|
||
animation: slideDown 0.5s ease-out forwards;
|
||
}
|
||
|
||
.fade-out {
|
||
animation: slideUp 0.5s ease-in forwards;
|
||
}
|
||
|
||
@keyframes slideDown {
|
||
from {
|
||
transform: translateY(-100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
to {
|
||
transform: translateY(-100%);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
</style> |