xinyi/roamfuding-xcx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
3d0194e754
roamfuding-xcx/pages/index/index.vue

1231 lines
32 KiB
Vue
Raw Normal View History

项目创建
2023-11-27 09:57:03 +08:00
<template>
页面更新
2024-01-27 16:37:52 +08:00
<view class="page">
福鼎一机游
2025-11-08 11:21:57 +08:00
<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">
玩转福鼎
2025-11-11 09:37:46 +08:00
<input type="text" placeholder="搜索景区、酒店" disabled="true" @click="btnsousuo"/>
福鼎一机游
2025-11-08 11:21:57 +08:00
<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;">
玩转福鼎
2025-11-11 09:37:46 +08:00
<view class="icon" @click="btnpage(1)">
福鼎一机游
2025-11-08 11:21:57 +08:00
<image src="https://api.ccttiot.com/smartmeter/img/static/uNvp27XBB0SGRJdwBatm" mode="">
</image>
玩转福鼎
2025-11-11 09:37:46 +08:00
</view> <!-- 导览 -->
福鼎一机游
2025-11-08 11:21:57 +08:00
<view class="icon" @click="btnpage(2)">
<image src="https://api.ccttiot.com/smartmeter/img/static/ujtaJ9yoGaSoU2y7d8o0" mode="">
</image> <!-- 攻略 -->
页面更新
2024-01-27 16:37:52 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<view class="icon" @click="btnpage(3)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uW4U5tAEwKWIF0xk6lD3" mode="">
</image> <!-- 住宿 -->
页面更新
2024-01-27 16:37:52 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<view class="icon" @click="btnpage(4)">
<image src="https://api.ccttiot.com/smartmeter/img/static/upFUu8oBSir5xouB7iMV" mode="">
</image> <!-- 美食 -->
页面更新
2024-01-27 16:37:52 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<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> <!-- 导游 -->
页面更新
2024-01-27 16:37:52 +08:00
</view>
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
</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">
玩转福鼎
2025-11-11 09:37:46 +08:00
<input type="text" placeholder="搜索景区、酒店" disabled="true" @click="btnsousuo"/>
福鼎一机游
2025-11-08 11:21:57 +08:00
<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">
玩转福鼎
2025-11-11 09:37:46 +08:00
<view class="icon" @click="btnpage(1)">
福鼎一机游
2025-11-08 11:21:57 +08:00
<image src="https://api.ccttiot.com/smartmeter/img/static/uNvp27XBB0SGRJdwBatm" mode="">
</image>
玩转福鼎
2025-11-11 09:37:46 +08:00
</view><!-- 导览 -->
福鼎一机游
2025-11-08 11:21:57 +08:00
<view class="icon" @click="btnpage(2)">
<image src="https://api.ccttiot.com/smartmeter/img/static/ujtaJ9yoGaSoU2y7d8o0" mode="">
</image> <!-- 攻略 -->
页面更新
2024-01-27 16:37:52 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<view class="icon" @click="btnpage(3)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uW4U5tAEwKWIF0xk6lD3" mode="">
</image> <!-- 住宿 -->
页面更新
2024-01-27 16:37:52 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<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> <!-- 导游 -->
页面更新
2024-01-27 16:37:52 +08:00
</view>
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
</scroll-view>
页面更新
2024-01-27 16:37:52 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<!-- 视频介绍 -->
<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>
页面更新
2024-01-27 16:37:52 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<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>
页面更新
2024-01-27 16:37:52 +08:00
</view>
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<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>
页面更新
2024-01-27 16:37:52 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<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>
页面更新
2024-01-27 16:37:52 +08:00
</view>
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<view class="meishirt" @click="btnitem">
<view class="meishitop">
攻略推荐
<image class="jiantou"
src="https://api.ccttiot.com/smartmeter/img/static/uLbDD7xYvH9mgoM9yqXH" mode="">
</image>
11
2024-03-25 19:46:07 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<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>
页面更新
2024-01-27 16:37:52 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
</view>
页面更新
2024-01-27 16:37:52 +08:00
</view>
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<!-- 游玩推荐 @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>
111
2024-03-13 10:54:22 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<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>
111
2024-03-13 10:54:22 +08:00
</view>
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<!-- 精品路线 -->
<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}}
111
2024-03-13 10:54:22 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<view class="">
<image src="https://api.ccttiot.com/smartmeter/img/static/uHzTj0AQBMfsXZsx3bH0" mode=""></image> {{item.collections}}
111
2024-03-13 10:54:22 +08:00
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
<view class="">
<image src="https://api.ccttiot.com/smartmeter/img/static/ua4ZMQ4gPMXbXGCZXaGd" mode=""></image> {{item.forwards}}
</view>
</view> -->
111
2024-03-13 10:54:22 +08:00
</view>
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
</view>
111
2024-03-13 10:54:22 +08:00
</view>
</view>
福鼎一机游
2025-11-08 11:21:57 +08:00
</scroll-view>
11
2024-01-23 19:15:52 +08:00
<tab-bar :indexs='0'></tab-bar>
项目创建
2023-11-27 09:57:03 +08:00
</view>
</template>
福鼎一机游
2025-11-08 11:21:57 +08:00
项目创建
2023-11-27 09:57:03 +08:00
<script>
export default {
data() {
return {
页面更新
2024-01-27 16:37:52 +08:00
bgc: {
福鼎一机游
2025-11-08 11:21:57 +08:00
backgroundColor: "",
页面更新
2024-01-27 16:37:52 +08:00
},
福鼎一机游
2025-11-08 11:21:57 +08:00
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'
111
2024-03-13 10:54:22 +08:00
}
},
onLoad() {
玩转福鼎
2025-11-11 09:37:46 +08:00
this.getinfo()
福鼎一机游
2025-11-08 11:21:57 +08:00
this.gethome()
this.getlunbo()
this.addRandomData()
uni.getLocation({
type: 'gcj02', // 国内地图更兼容
isHighAccuracy: true,
accuracy:'best',
success: (res) => {
console.log('精确坐标:', res)
},
fail: (err) => {
console.error('获取位置失败:', err)
}
})
项目创建
2023-11-27 09:57:03 +08:00
},
福鼎一机游
2025-11-08 11:21:57 +08:00
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] || ''
11
2024-03-25 19:46:07 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
return [
pick(0, 0),
pick(1, 1),
pick(2, 2)
].filter(Boolean)
11
2024-03-25 19:46:07 +08:00
},
福鼎一机游
2025-11-08 11:21:57 +08:00
// 热门推荐名称（与图片索引对齐）
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)]
11
2024-03-25 19:46:07 +08:00
},
福鼎一机游
2025-11-08 11:21:57 +08:00
// 热门推荐简介（与图片索引对齐，超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)]
页面更新
2024-01-27 16:37:52 +08:00
},
福鼎一机游
2025-11-08 11:21:57 +08:00
// 推荐景点小图（第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 : ''
111
2024-03-13 10:54:22 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
}).filter(it => it.image && it.name && it.id)
111
2024-03-13 10:54:22 +08:00
},
福鼎一机游
2025-11-08 11:21:57 +08:00
// 推荐景点大图（取第一项）
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 }
111
2024-03-13 10:54:22 +08:00
},
福鼎一机游
2025-11-08 11:21:57 +08:00
// 美食图片（最多三张）
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: {
玩转福鼎
2025-11-11 09:37:46 +08:00
// 点击进行搜索
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()
}
})
}
},
})
},
福鼎一机游
2025-11-08 11:21:57 +08:00
// 请求首页景区
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 //美食
}
})
11
2024-03-25 19:46:07 +08:00
},
福鼎一机游
2025-11-08 11:21:57 +08:00
// 请求轮播图
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
})
})
11
2024-03-25 19:46:07 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
}
11
2024-03-25 19:46:07 +08:00
})
},
福鼎一机游
2025-11-08 11:21:57 +08:00
// 点击热门推荐跳转到列表
btnitem(){
11
2024-03-25 19:46:07 +08:00
uni.navigateTo({
福鼎一机游
2025-11-08 11:21:57 +08:00
url:'/page_fenbao/gonglue/index'
11
2024-03-25 19:46:07 +08:00
})
111
2024-03-13 10:54:22 +08:00
},
福鼎一机游
2025-11-08 11:21:57 +08:00
// 点击跳转游玩景点
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
})
}
111
2024-03-13 10:54:22 +08:00
},
福鼎一机游
2025-11-08 11:21:57 +08:00
// 点击热门推荐页面图片跳转
btnremen(){
111
2024-03-13 10:54:22 +08:00
uni.navigateTo({
福鼎一机游
2025-11-08 11:21:57 +08:00
url:'/page_fenbao/remen'
111
2024-03-13 10:54:22 +08:00
})
},
福鼎一机游
2025-11-08 11:21:57 +08:00
// 点击跳转页面
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('加载更多瀑布流数据')
},
项目创建
2023-11-27 09:57:03 +08:00
}
}
</script>
页面更新
2024-01-27 16:37:52 +08:00
<style lang="scss">
福鼎一机游
2025-11-08 11:21:57 +08:00
::v-deep .u-list-image-wrap{
border-radius: 0 !important;
}
111
2024-03-13 10:54:22 +08:00
page {
福鼎一机游
2025-11-08 11:21:57 +08:00
background: #E5F9F3;
border-radius: 0rpx 0rpx 0rpx 0rpx;
position: fixed;
top: 0;
left: 0;
111
2024-03-13 10:54:22 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
.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 {
111
2024-03-13 10:54:22 +08:00
display: flex;
福鼎一机游
2025-11-08 11:21:57 +08:00
gap: 20rpx;
.waterfall-left,
.waterfall-right {
flex: 1;
}
}
.demo-warter {
border-radius: 8px;
margin-bottom: 20rpx;
background-color: #ffffff;
padding: 8px;
position: relative;
.shuju{
页面更新
2024-01-27 16:37:52 +08:00
display: flex;
福鼎一机游
2025-11-08 11:21:57 +08:00
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;
页面更新
2024-01-27 16:37:52 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
}
.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;
页面更新
2024-01-27 16:37:52 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
font-weight: 600;
font-size: 28rpx;
color: #3D3D3D;
页面更新
2024-01-27 16:37:52 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
}
.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 {
页面更新
2024-01-27 16:37:52 +08:00
display: flex;
111
2024-03-13 10:54:22 +08:00
align-items: center;
福鼎一机游
2025-11-08 11:21:57 +08:00
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;
111
2024-03-13 10:54:22 +08:00
color: #FFFFFF;
}
福鼎一机游
2025-11-08 11:21:57 +08:00
image {
111
2024-03-13 10:54:22 +08:00
width: 100%;
福鼎一机游
2025-11-08 11:21:57 +08:00
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;
111
2024-03-13 10:54:22 +08:00
text-align: center;
福鼎一机游
2025-11-08 11:21:57 +08:00
}
image {
width: 150rpx;
height: 102rpx;
margin-right: 46rpx;
flex-shrink: 0;
111
2024-03-13 10:54:22 +08:00
}
}
福鼎一机游
2025-11-08 11:21:57 +08:00
}
.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 {
页面更新
2024-01-27 16:37:52 +08:00
display: flex;
111
2024-03-13 10:54:22 +08:00
align-items: center;
福鼎一机游
2025-11-08 11:21:57 +08:00
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;
111
2024-03-13 10:54:22 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
.wz {
.tit {
font-weight: 600;
font-size: 24rpx;
color: #3D3D3D;
display: block;
页面更新
2024-01-27 16:37:52 +08:00
}
111
2024-03-13 10:54:22 +08:00
福鼎一机游
2025-11-08 11:21:57 +08:00
.tits {
font-size: 20rpx;
color: #3D3D3D;
display: block;
margin-top: 4rpx;
111
2024-03-13 10:54:22 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
.dz {
font-size: 16rpx;
color: #3D3D3D;
display: block;
margin-top: 12rpx;
111
2024-03-13 10:54:22 +08:00
}
}
}
}
福鼎一机游
2025-11-08 11:21:57 +08:00
.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;
页面更新
2024-01-27 16:37:52 +08:00
}
}
福鼎一机游
2025-11-08 11:21:57 +08:00
}
.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;
页面更新
2024-01-27 16:37:52 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
.meishibot {
111
2024-03-13 10:54:22 +08:00
display: flex;
align-items: center;
福鼎一机游
2025-11-08 11:21:57 +08:00
justify-content: space-between;
width: 100%;
image {
width: 140rpx;
height: 140rpx;
border-radius: 14rpx 14rpx 14rpx 14rpx;
}
页面更新
2024-01-27 16:37:52 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
.meishitop {
页面更新
2024-01-27 16:37:52 +08:00
display: flex;
111
2024-03-13 10:54:22 +08:00
align-items: center;
福鼎一机游
2025-11-08 11:21:57 +08:00
display: flex;
justify-content: space-between;
width: 100%;
.dibiaoimg {
width: 168rpx;
height: 54rpx;
111
2024-03-13 10:54:22 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
.jiantou {
width: 32rpx;
height: 32rpx;
111
2024-03-13 10:54:22 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
}
}
}
.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;
}
111
2024-03-13 10:54:22 +08:00
}
}
福鼎一机游
2025-11-08 11:21:57 +08:00
.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;
页面更新
2024-01-27 16:37:52 +08:00
}
}
}
11
2024-03-25 19:46:07 +08:00
}
}
福鼎一机游
2025-11-08 11:21:57 +08:00
.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;
11
2024-03-25 19:46:07 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
video {
width: 622rpx;
height: 320rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 56rpx;
11
2024-03-25 19:46:07 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
}
.fenlei-container {
margin-top: 520rpx;
.fenlei-scroll {
width: 100%;
height: 288rpx;
white-space: nowrap;
11
2024-03-25 19:46:07 +08:00
}
福鼎一机游
2025-11-08 11:21:57 +08:00
.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;
页面更新
2024-01-27 16:37:52 +08:00
}
}
111
2024-03-13 10:54:22 +08:00
</style>
Reference in New Issue Copy Permalink