parent
ab016deac8
commit
333a19bbb8
@ -1,19 +1,557 @@ |
||||
<template> |
||||
<view> |
||||
|
||||
</view> |
||||
<view class="container999" @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 :id="'top'+listIndex" style="width: 100%;height: 120rpx;"></view> |
||||
<view class='content'> |
||||
<view class='card' v-for="(item,index) in listItem" v-if="listItem.length > 0" :key="index" @click.stop="goDetail(item)"> |
||||
<view class="card-content"> |
||||
<view class="title-top"> |
||||
<text class="eee-status">{{item.statusName}}</text> |
||||
<text class="title-status">【{{item.waringName}}】</text> |
||||
<text class="title-status">{{item.title}}</text> |
||||
</view> |
||||
<view class="title-bottom">上报时间:{{item.reportTime}}</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> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
}; |
||||
import util from '../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: [[ |
||||
{ |
||||
"id": 62, |
||||
"reportTime": "2023-04-17 16:39:55", |
||||
"title": "咨询演练", |
||||
"waringName": "咨询", |
||||
"statusName": "待接警", |
||||
"status": "1" |
||||
}, |
||||
{ |
||||
"id": 63, |
||||
"reportTime": "2023-04-17 16:49:29", |
||||
"title": "咨询演练", |
||||
"waringName": "咨询", |
||||
"statusName": "待接警", |
||||
"status": "1" |
||||
} |
||||
],[],[],[],[],[],[],[]],//数据格式 |
||||
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:'reportDetail' |
||||
}) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
<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%; |
||||
} |
||||
|
||||
.card { |
||||
width: 100%; |
||||
height: 150rpx; |
||||
background-color: white; |
||||
margin: 0 auto 6rpx auto; |
||||
background: #FFFFFF; |
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.10); |
||||
border-radius: 5px; |
||||
position: relative; |
||||
|
||||
.card-content{ |
||||
display: flex; |
||||
align-items: start; |
||||
justify-content: space-between; |
||||
padding: 20rpx 32rpx; |
||||
flex-direction: column; |
||||
|
||||
.title-top{ |
||||
|
||||
.eee-status{ |
||||
background: #eee; |
||||
padding: 3px 5px; |
||||
border-radius: 12px; |
||||
color: #b5b5b5; |
||||
} |
||||
} |
||||
.title-bottom{ |
||||
margin-top: 15px; |
||||
} |
||||
|
||||
.images{ |
||||
width: 180rpx; |
||||
height: 180rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
overflow: hidden; |
||||
background-color: #eee; |
||||
} |
||||
|
||||
.introduce{ |
||||
flex: 1; |
||||
color: #000; |
||||
margin-left: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
overflow: hidden; |
||||
|
||||
.big-font{ |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.start{ |
||||
display: inline-block; |
||||
border: solid 1px rgb(241, 150, 83); |
||||
border-radius: 20rpx; |
||||
color: rgb(241, 150, 83); |
||||
margin-left: 20rpx; |
||||
margin-top: 0; |
||||
padding: 2rpx 20rpx; |
||||
} |
||||
} |
||||
|
||||
.small-font{ |
||||
color: #909090; |
||||
margin-top: 18rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
|
||||
.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> |
||||
|
Loading…
Reference in new issue