You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
482 lines
12 KiB
482 lines
12 KiB
<template>
|
|
<view class="v-page" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
|
|
|
|
<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
|
|
<view class='nav'>
|
|
<!-- #ifdef H5 -->
|
|
<view style="height: 44px;width: 100%;"></view>
|
|
<!-- #endif -->
|
|
|
|
<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
|
|
</view>
|
|
|
|
<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
|
|
<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
|
|
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
|
|
|
|
<view class='v-card contain' style="padding-top: 110rpx;">
|
|
<view class='v-card-item' v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index" @click.stop="goDetail(item)">
|
|
<view class="v-card-box row">
|
|
<view class="v-card-image" v-if="item.imageUrl">
|
|
<image style="width: 200px; height: 150px;" mode="widthFix" :src="baseUrls+item.imageUrl.split(',')[0]"></image>
|
|
</view>
|
|
<view class="v-card-image" v-else>
|
|
<image style="width: 200px; height: 150px;" mode="widthFix" src="@/static/images/icons/no-pic.jpg"></image>
|
|
</view>
|
|
<view class="v-card-content">
|
|
<view class="v-card-title">{{item.resourceName || item.carNumber || item.guideName}}</view>
|
|
<view class="v-card-tip"><span class="" v-if="item.grade &&item.grade!=0">{{item.grade + '级'}}</span></view>
|
|
<view class="v-card-tip">{{item.address}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class='noCard' v-if="!listItem||listItem.length===0">
|
|
暂无信息
|
|
</view>
|
|
</scroll-view>
|
|
<view style="width: 100%;height: 100rpx;opacity:0;">底部占位盒子</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import util from '../../pages/detail/util/util.js'
|
|
import refresh from '@/components/uni-list/refresh.vue';
|
|
import navTab from '@/components/uni-list/navTab.vue';
|
|
import config from '@/config'
|
|
|
|
import {getTouristPlacesData,getCulturalVenuesData,getPublicServiceData,getEmergencyPlaceData,getTouristServiceData,getAlEquipmentData,getCarInfoData,getTourGuideData} from '@/api/detail/resourcesStatistics.js'
|
|
|
|
const baseUrl = config.baseUrl
|
|
export default {
|
|
components: {refresh,navTab},
|
|
data() {
|
|
return {
|
|
currentPage:'index',
|
|
toView:'',//回到顶部id
|
|
tabTitle:['旅游场所','文化场馆','公共服务','应急场所','游客服务','物联网设备','车辆信息','导游信息'], //导航栏格式 --导航栏组件
|
|
currentTab: 0, //sweiper所在页
|
|
|
|
pages:[1,1,1,1,1,1,1,1], //第几个swiper的第几页
|
|
list: [[],[],[],[],[],[],[],[]],//数据格式
|
|
baseUrls:'',
|
|
pageBottoms:[false,false,false,false,false,false,false,false]
|
|
};
|
|
},
|
|
created(){
|
|
this.baseUrls = baseUrl
|
|
|
|
},
|
|
onLoad(e) {
|
|
|
|
},
|
|
mounted() {
|
|
this.getTouristPlacesData(0,10);
|
|
},
|
|
onShow() {},
|
|
onHide() {},
|
|
methods: {
|
|
toTop(){
|
|
this.toView = ''
|
|
setTimeout(()=>{
|
|
this.toView = 'top' + this.currentTab
|
|
},10)
|
|
},
|
|
changeTab(index){
|
|
this.currentTab = index;
|
|
},
|
|
// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
|
|
isRequest() {
|
|
return new Promise((resolve, reject) => {
|
|
this.pages[this.currentTab]++
|
|
|
|
var that = this
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
// uni.showToast({
|
|
// icon: 'none',
|
|
// // title: `请求第${that.currentTab + 1 }个导航栏的第${that.pages[that.currentTab]}页数据成功`
|
|
// })
|
|
switch(this.currentTab) {
|
|
case 0 :
|
|
this.getTouristPlacesData(this.pages[this.currentTab],10)
|
|
break;
|
|
case 1 :
|
|
this.getCulturalVenuesData(this.pages[this.currentTab],10)
|
|
break;
|
|
case 2 :
|
|
this.getPublicServiceData(this.pages[this.currentTab],10)
|
|
break;
|
|
case 3 :
|
|
this.getEmergencyPlaceData(this.pages[this.currentTab],10)
|
|
break;
|
|
case 4 :
|
|
this.getTouristServiceData(this.pages[this.currentTab],10)
|
|
break;
|
|
case 5 :
|
|
this.getAlEquipmentData(this.pages[this.currentTab],10)
|
|
break;
|
|
case 6 :
|
|
this.getCarInfoData(this.pages[this.currentTab],10)
|
|
break;
|
|
case 7 :
|
|
this.getTourGuideData(this.pages[this.currentTab],10)
|
|
break;
|
|
default :
|
|
this.$modal.showToast('模块建设中~');
|
|
}
|
|
|
|
// let newData = ['新数据1','新数据2','新数据3']
|
|
// resolve(newData)
|
|
}, 1000)
|
|
})
|
|
},
|
|
// swiper 滑动
|
|
swiperTab: function(e) {
|
|
var index = e.detail.current //获取索引
|
|
this.$refs.navTab.longClick(index);
|
|
switch(index){
|
|
case 0 :
|
|
if(this.list[0].length === 0){
|
|
this.getTouristPlacesData(0,10)
|
|
}
|
|
break;
|
|
case 1 :
|
|
if(this.list[1].length === 0){
|
|
this.getCulturalVenuesData(0,10)
|
|
}
|
|
break;
|
|
case 2 :
|
|
if(this.list[2].length === 0){
|
|
this.getPublicServiceData(0,10)
|
|
}
|
|
break;
|
|
case 3 :
|
|
if(this.list[3].length === 0){
|
|
this.getEmergencyPlaceData(0,10)
|
|
}
|
|
break;
|
|
case 4 :
|
|
if(this.list[4].length === 0){
|
|
this.getTouristServiceData(0,10)
|
|
}
|
|
break;
|
|
case 5 :
|
|
if(this.list[5].length === 0){
|
|
this.getAlEquipmentData(0,10)
|
|
}
|
|
break;
|
|
case 6 :
|
|
if(this.list[6].length === 0){
|
|
this.getCarInfoData(0,10)
|
|
}
|
|
break;
|
|
case 7 :
|
|
if(this.list[7].length === 0){
|
|
this.getTourGuideData(0,10)
|
|
}
|
|
break;
|
|
default :
|
|
this.$modal.showToast('出错了~');
|
|
}
|
|
},
|
|
// 加载更多 util.throttle为防抖函数
|
|
lower1: util.throttle(function(e) {
|
|
if(this.pageBottoms[this.currentTab]){
|
|
|
|
return ;
|
|
}
|
|
console.log(`加载${this.currentTab}`)//currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
|
|
uni.showLoading({
|
|
title: '加载中',
|
|
mask:true
|
|
})
|
|
this.isRequest().then((res)=>{
|
|
let tempList = this.list
|
|
tempList[this.currentTab] = tempList[this.currentTab].concat(res)
|
|
|
|
this.list = tempList
|
|
this.$forceUpdate() //二维数组，开启强制渲染
|
|
})
|
|
}, 300),
|
|
// 刷新touch监听
|
|
refreshStart(e) {
|
|
this.$refs.refresh.refreshStart(e);
|
|
},
|
|
refreshMove(e){
|
|
this.$refs.refresh.refreshMove(e);
|
|
},
|
|
refreshEnd(e) {
|
|
this.$refs.refresh.refreshEnd(e);
|
|
},
|
|
isRefresh(){
|
|
setTimeout(() => {
|
|
switch(this.currentTab){
|
|
case 0 :
|
|
this.list[0] = []
|
|
this.pageBottoms[0] = false
|
|
this.getTouristPlacesData(0,10)
|
|
break;
|
|
case 1 :
|
|
this.list[1] = []
|
|
this.pageBottoms[1] = false
|
|
this.getCulturalVenuesData(0,10)
|
|
break;
|
|
case 2 :
|
|
this.list[2] = []
|
|
this.pageBottoms[2] = false
|
|
this.getPublicServiceData(0,10)
|
|
break;
|
|
case 3 :
|
|
this.list[3] = []
|
|
this.pageBottoms[3] = false
|
|
this.getEmergencyPlaceData(0,10)
|
|
break;
|
|
case 4 :
|
|
this.list[4] = []
|
|
this.pageBottoms[4] = false
|
|
this.getTouristServiceData(0,10)
|
|
break;
|
|
case 5 :
|
|
this.list[5] = []
|
|
this.pageBottoms[5] = false
|
|
this.getAlEquipmentData(0,10)
|
|
break;
|
|
case 6 :
|
|
this.list[6] = []
|
|
this.pageBottoms[6] = false
|
|
this.getCarInfoData(0,10)
|
|
|
|
break;
|
|
case 7 :
|
|
this.list[7] = []
|
|
this.pageBottoms[7] = false
|
|
this.getTourGuideData(0,10)
|
|
break;
|
|
default :
|
|
this.$modal.showToast('出错了~');
|
|
}
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '刷新成功'
|
|
})
|
|
this.$refs.refresh.endAfter() //刷新结束调用
|
|
}, 1000)
|
|
},
|
|
|
|
// 查询资源场所分页列表
|
|
getTouristPlacesData(pageNum,pageSize) {
|
|
let data = {
|
|
pageNum: pageNum == null? 0: pageNum,
|
|
pageSize: pageSize == null? 0 : pageSize
|
|
}
|
|
getTouristPlacesData(data).then(res =>{
|
|
for(let k =0;k<res.rows.length; k++){
|
|
this.list[0].push(res.rows[k])
|
|
}
|
|
if(this.list[0].length === res.total){
|
|
this.pageBottoms[0] = true
|
|
}
|
|
})
|
|
},
|
|
//查询文化场所分页列表
|
|
getCulturalVenuesData(pageNum,pageSize){
|
|
let data = {
|
|
pageNum: pageNum == null? 0: pageNum,
|
|
pageSize: pageSize == null? 0 : pageSize
|
|
}
|
|
getCulturalVenuesData(data).then(res =>{
|
|
for(let k =0;k<res.rows.length; k++){
|
|
this.list[1].push(res.rows[k])
|
|
}
|
|
if(this.list[1].length === res.total){
|
|
this.pageBottoms[1] = true
|
|
}
|
|
})
|
|
},
|
|
// 公共服务 分页查询
|
|
getPublicServiceData(pageNum,pageSize){
|
|
let data = {
|
|
pageNum: pageNum == null? 0: pageNum,
|
|
pageSize: pageSize == null? 0 : pageSize
|
|
}
|
|
getPublicServiceData(data).then(res =>{
|
|
for(let k =0;k<res.rows.length; k++){
|
|
this.list[2].push(res.rows[k])
|
|
}
|
|
if(this.list[2].length === res.total){
|
|
this.pageBottoms[2] = true
|
|
}
|
|
})
|
|
},
|
|
// 应急场所 分页查询
|
|
getEmergencyPlaceData(pageNum,pageSize){
|
|
let data = {
|
|
pageNum: pageNum == null? 0: pageNum,
|
|
pageSize: pageSize == null? 0 : pageSize
|
|
}
|
|
getEmergencyPlaceData(data).then(res =>{
|
|
for(let k =0;k<res.rows.length; k++){
|
|
this.list[3].push(res.rows[k])
|
|
}
|
|
if(this.list[3].length === res.total){
|
|
this.pageBottoms[3] = true
|
|
}
|
|
})
|
|
},
|
|
// 游客服务 分页查询
|
|
getTouristServiceData(pageNum,pageSize){
|
|
let data = {
|
|
pageNum: pageNum == null? 0: pageNum,
|
|
pageSize: pageSize == null? 0 : pageSize
|
|
}
|
|
getTouristServiceData(data).then(res =>{
|
|
for(let k =0;k<res.rows.length; k++){
|
|
this.list[4].push(res.rows[k])
|
|
}
|
|
if(this.list[4].length === res.total){
|
|
this.pageBottoms[4] = true
|
|
}
|
|
})
|
|
},
|
|
//物联设备 分页查询
|
|
getAlEquipmentData(pageNum,pageSize){
|
|
let data = {
|
|
pageNum: pageNum == null? 0: pageNum,
|
|
pageSize: pageSize == null? 0 : pageSize
|
|
}
|
|
getAlEquipmentData(data).then(res =>{
|
|
for(let k =0;k<res.rows.length; k++){
|
|
this.list[5].push(res.rows[k])
|
|
}
|
|
if(this.list[5].length === res.total){
|
|
this.pageBottoms[5] = true
|
|
}
|
|
})
|
|
},
|
|
// 车辆信息 分页查询
|
|
getCarInfoData(pageNum,pageSize){
|
|
let data = {
|
|
pageNum: pageNum == null? 0: pageNum,
|
|
pageSize: pageSize == null? 0 : pageSize
|
|
}
|
|
getCarInfoData(data).then(res =>{
|
|
for(let k =0;k<res.rows.length; k++){
|
|
this.list[6].push(res.rows[k])
|
|
}
|
|
if(this.list[6].length === res.total){
|
|
this.pageBottoms[6] = true
|
|
}
|
|
})
|
|
},
|
|
|
|
//导游信息 分页查询
|
|
getTourGuideData(pageNum,pageSize){
|
|
let data = {
|
|
pageNum: pageNum == null? 0: pageNum,
|
|
pageSize: pageSize == null? 0 : pageSize
|
|
}
|
|
getTourGuideData(data).then(res =>{
|
|
for(let k =0;k<res.rows.length; k++){
|
|
this.list[7].push(res.rows[k])
|
|
}
|
|
if(this.list[7].length === res.total){
|
|
this.pageBottoms[7] = true
|
|
}
|
|
})
|
|
},
|
|
// 查看详情
|
|
goDetail(val){
|
|
const id = val.id
|
|
const type = val.type
|
|
uni.navigateTo({
|
|
url:'resourceDetail?id='+id+'&type='+type
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container999 {
|
|
width: 100vw;
|
|
font-size: 28rpx;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
color: #6B8082;
|
|
position: relative;
|
|
background-color: #f6f6f6;
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
}
|
|
.images{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background-color: #eee;
|
|
}
|
|
|
|
.noCard {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
margin: auto;
|
|
background-color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999999;
|
|
box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.10);
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
|
|
.nav {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
color: white;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
font-size: 24rpx;
|
|
z-index: 996;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
.searchInput999 {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 56rpx;
|
|
}
|
|
|
|
.search999 {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.searchBox999 {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.input999 {
|
|
color: #999;
|
|
width: 80%;
|
|
}
|
|
</style>
|
|
|