patrol-gamble-mobile/inspect/list.vue

<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>