|
|
<template>
|
|
|
<div>
|
|
|
<u-empty v-if="isEmpty"style="height:100vh" text="暂时没有数据" mode="list"></u-empty>
|
|
|
<load-refresh v-else ref="loadRefresh" :isRefresh="true" refreshType="hollowDots" color="#04C4C4" heightReduce="0"
|
|
|
backgroundCover="#F3F5F5" :currentPage="pages.page" :totalPages="pages.total" @loadMore="loadMore"
|
|
|
@refresh="runRefresh">
|
|
|
<view slot="content-list">
|
|
|
<!-- 数据列表 -->
|
|
|
<view v-for="(item,index) in list" :key="index" class="listwrap">
|
|
|
<u-row gutter="16" @click="toInfo(item.id)">
|
|
|
<u-col span="1.5">
|
|
|
<view class="listindex">
|
|
|
{{index+1}}
|
|
|
</view>
|
|
|
</u-col>
|
|
|
<u-col span="8" class="listcontent">
|
|
|
<view><span>区域：</span>{{item.area_detail?item.area_detail.value:''}}</view>
|
|
|
<view><span>河道：</span>{{item.river?item.river.name:''}}</view>
|
|
|
<view><span>地址：</span>{{item.address}}</view>
|
|
|
<view><span>问题类型：</span>{{item.ask_type?item.ask_type.name:''}}</view>
|
|
|
<view><span>问题状态：</span>{{item.ask_status_text}}</view>
|
|
|
<view><span>上报时间：</span>{{item.created_at}}</view>
|
|
|
</u-col>
|
|
|
<u-col span="2.5">
|
|
|
<view class="listbutton">详情</view>
|
|
|
</u-col>
|
|
|
</u-row>
|
|
|
</view>
|
|
|
</view>
|
|
|
</load-refresh>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import loadRefresh from '@/components/load-refresh/load-refresh.vue'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
pages: {
|
|
|
page: 1,
|
|
|
page_size: 5,
|
|
|
total: 0
|
|
|
},
|
|
|
list: [],
|
|
|
isEmpty: false
|
|
|
}
|
|
|
},
|
|
|
onReady() {
|
|
|
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.loadList()
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
loadList() {
|
|
|
var that = this;
|
|
|
that.util.request({
|
|
|
api: '/api/mobile/inspection/index',
|
|
|
method: "get",
|
|
|
data: {
|
|
|
page: that.pages.page,
|
|
|
page_size: that.pages.page_size,
|
|
|
myself:1
|
|
|
},
|
|
|
utilSuccess: function(res) {
|
|
|
console.log(res)
|
|
|
if (res.total == 0) {
|
|
|
that.isEmpty = true
|
|
|
return
|
|
|
}
|
|
|
that.pages.total = res.last_page
|
|
|
if (that.pages.page > 1) {
|
|
|
that.list.push(...res.data)
|
|
|
} else {
|
|
|
that.list = res.data
|
|
|
}
|
|
|
console.log(that.pages)
|
|
|
that.$refs.loadRefresh.completed()
|
|
|
// that.areaList = result.detail
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
that.util.alert(res);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 上划加载更多
|
|
|
loadMore() {
|
|
|
var that = this
|
|
|
setTimeout(() => {
|
|
|
that.pages.page = that.pages.page + 1
|
|
|
that.loadList()
|
|
|
}, 400)
|
|
|
},
|
|
|
// 下拉刷新数据列表
|
|
|
refresh() {
|
|
|
var that = this
|
|
|
console.log(that.pages.page)
|
|
|
// 模拟请求成功后的回调
|
|
|
setTimeout(() => {
|
|
|
that.pages.page = 1
|
|
|
that.loadList();
|
|
|
}, 400)
|
|
|
},
|
|
|
// 后期可将loadMore()与refresh()合并成一个函数方法去处理，因为本质上这两个方法只有在list赋值上面有不同
|
|
|
// 代码触发下拉刷新方法
|
|
|
runRefresh() {
|
|
|
this.$refs.loadRefresh.runRefresh()
|
|
|
},
|
|
|
toInfo(id) {
|
|
|
uni.redirectTo({
|
|
|
url: "../inspect/info?id=" + id
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.listwrap {
|
|
|
margin: 25rpx;
|
|
|
background: #fff;
|
|
|
border-radius: 30rpx;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
.listindex {
|
|
|
width: 60rpx;
|
|
|
height: 60rpx;
|
|
|
background-color: deepskyblue;
|
|
|
border-radius: 60rpx;
|
|
|
color: #fff;
|
|
|
line-height: 60rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.listcontent {}
|
|
|
|
|
|
.listcontent view {
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.listcontent view span {
|
|
|
display: inline-block;
|
|
|
width: 31%;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
.listbutton {
|
|
|
width: 100%;
|
|
|
background-color: deepskyblue;
|
|
|
text-align: center;
|
|
|
color: #fff;
|
|
|
height: 60rpx;
|
|
|
border-radius: 30rpx;
|
|
|
line-height: 60rpx;
|
|
|
}
|
|
|
</style>
|
