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.
331 lines
8.9 KiB
331 lines
8.9 KiB
<template>
|
|
<view class="v-page">
|
|
<view class="v-page-top v-p-b8">
|
|
<view class="contain row">
|
|
<uni-search-bar class="v-search-bar flex-auto" @confirm="search" :focus="true" v-model="searchValue" @cancel="cancel"
|
|
@clear="clear">
|
|
</uni-search-bar>
|
|
</view></view>
|
|
<view @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
|
|
<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
|
|
<view class='nav'>
|
|
<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
|
|
</view>
|
|
|
|
<swiper style="min-height: 100vh;padding-top: 80rpx;" :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: 110rpx;"></view>
|
|
<view class='v-card contain'>
|
|
<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 items-center">
|
|
<view class="v-card-name">
|
|
<image class="v-card-name-img" src="@/static/images/icons/icon-name-bg.svg">
|
|
</image>
|
|
<view class="v-card-name-txt">{{item.name.slice(0,1)||'-' }}</view>
|
|
</view>
|
|
<view class="v-card-content flex-auto">
|
|
<view class="v-card-title">{{item.name||'-' }}</span></view>
|
|
<view class="v-card-tip">
|
|
<image class="v-card-tip-icon"
|
|
src="@/static/images/icons/icon-address.svg"></image>
|
|
{{item.address||'-'}}
|
|
</view>
|
|
</view>
|
|
<button class="v-btn v-btn-primary" @click.stop="goDetails(item.code)">物资清单</button>
|
|
</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>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import util from '../../pages/work/util/util.js'
|
|
import refresh from '@/components/uni-list/refresh.vue';
|
|
import navTab from '@/components/uni-list/navTab.vue';
|
|
import baseUrl from '@/config'
|
|
import {
|
|
getEmergencyResourceGroupData,
|
|
getEmergencyResourceData
|
|
} from '@/api/word/emergencyResources'
|
|
export default {
|
|
components: {
|
|
refresh,
|
|
navTab
|
|
},
|
|
data() {
|
|
return {
|
|
currentPage: 'index',
|
|
toView: '', //回到顶部id
|
|
tabTitle: [], //导航栏格式 --导航栏组件
|
|
currentTab: 0, //sweiper所在页
|
|
|
|
pages: [], //第几个swiper的第几页
|
|
list: [], //数据格式
|
|
baseUrls: '',
|
|
pageBottoms: [],
|
|
resourceGroup: [], //应急资源分组数据
|
|
searchValue: '', //查询名称
|
|
searchValues: [], //查询名称集合
|
|
};
|
|
},
|
|
created() {
|
|
this.baseUrls = baseUrl
|
|
|
|
},
|
|
onLoad(e) {
|
|
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.getEmergencyResourceGroupData();
|
|
})
|
|
|
|
},
|
|
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]}页数据成功`
|
|
// })
|
|
this.getEmergencyResourceData('2', this.resourceGroup[this.currentTab].dataType,
|
|
null, this.pages[this.currentTab], 10)
|
|
// let newData = ['新数据1','新数据2','新数据3']
|
|
// resolve(newData)
|
|
}, 1000)
|
|
})
|
|
},
|
|
// swiper 滑动
|
|
swiperTab: function(e) {
|
|
var index = e.detail.current //获取索引
|
|
this.$refs.navTab.longClick(index);
|
|
this.searchValue = this.searchValues[index]
|
|
if (this.list[index].length === 0) {
|
|
this.searchValue = '';
|
|
this.getEmergencyResourceData('2', this.resourceGroup[this.currentTab].dataType, null, this.pages[
|
|
this.currentTab], 10)
|
|
}
|
|
|
|
},
|
|
// 加载更多 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(() => {
|
|
let dataType = this.resourceGroup[this.currentTab].dataType
|
|
this.list[this.currentTab] = [];
|
|
this.pageBottoms[this.currentTab] = false;
|
|
this.getEmergencyResourceData('2', dataType, null, 1, 10);
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '刷新成功'
|
|
})
|
|
|
|
this.$refs.refresh.endAfter() //刷新结束调用
|
|
}, 1000)
|
|
},
|
|
// 获取应急资源分类
|
|
getEmergencyResourceGroupData() {
|
|
getEmergencyResourceGroupData().then(res => {
|
|
if (res.code === 200) {
|
|
this.tabTitle = [];
|
|
this.resourceGroup = res.data
|
|
res.data.forEach(item => {
|
|
this.list.push([]); //存在几个集合
|
|
this.tabTitle.push(item.name); //导航栏名称
|
|
this.pageBottoms.push(false); //每个list 是否到底部
|
|
this.pages.push(1); // 页数
|
|
this.searchValues.push('')
|
|
})
|
|
if (this.resourceGroup.length > 0) {
|
|
this.getEmergencyResourceData('2', this.resourceGroup[0].dataType, null, 1, 10)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 查询应急单位信息
|
|
getEmergencyResourceData(tabType, type, name, pageNum, pageSize) {
|
|
let data = {
|
|
tabType: '2',
|
|
type: type,
|
|
name: name == null ? '' : name,
|
|
pageNum: pageNum,
|
|
pageSize: pageSize
|
|
}
|
|
getEmergencyResourceData(data).then(res => {
|
|
if (res.code === 200) {
|
|
for (let k = 0; k < res.rows.length; k++) {
|
|
this.list[this.currentTab].push(res.rows[k])
|
|
}
|
|
if (this.list[this.currentTab].length == res.total) {
|
|
this.pageBottoms[this.currentTab] = true
|
|
}
|
|
this.$forceUpdate(); //强制更新视图
|
|
}
|
|
})
|
|
},
|
|
// 查看详情
|
|
goDetail(val) {
|
|
const id = val.id
|
|
uni.navigateTo({
|
|
url: 'emergencyResourcesDetail?id=' + id
|
|
})
|
|
},
|
|
goDetails(val) {
|
|
uni.navigateTo({
|
|
url: 'emergencyResourcesList?code=' + val
|
|
})
|
|
},
|
|
search(res) {
|
|
this.list[this.currentTab] = [];
|
|
this.pageBottoms[this.currentTab] = false;
|
|
this.pages[this.currentTab] = 1;
|
|
this.searchValues[this.currentTab] = res.value
|
|
this.getEmergencyResourceData('2', this.resourceGroup[this.currentTab].dataType, res.value, 1, 10)
|
|
|
|
|
|
// uni.showToast({
|
|
// title: '搜索：' + res.value,
|
|
// icon: 'none'
|
|
// })
|
|
},
|
|
|
|
clear(res) {
|
|
this.list[this.currentTab] = [];
|
|
this.searchValues[this.currentTab] = '';
|
|
this.pageBottoms[this.currentTab] = false;
|
|
this.getEmergencyResourceData('2', this.resourceGroup[this.currentTab].dataType, '', 1, 10)
|
|
},
|
|
cancel() {
|
|
this.list[this.currentTab] = [];
|
|
this.searchValues[this.currentTab] = '';
|
|
this.pageBottoms[this.currentTab] = false;
|
|
this.getEmergencyResourceData('2', this.resourceGroup[this.currentTab].dataType, '', 1, 10)
|
|
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
::v-deep .uni-searchbar {
|
|
background: #fff
|
|
}
|
|
|
|
.container999 {
|
|
width: 100vw;
|
|
font-size: 28rpx;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
|
|
.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: 6vh;
|
|
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;
|
|
}
|
|
</style>
|
|
|