ldb-safe-hh/pages/my-fillin/index.vue

<template>
	<view class="my-fillin-container">
		<title-status />
		<h-navbar title="我的填报" />
		<scroll-view class="type-layout" scroll-x>
			<view :class="['type-item', currentType === index ? 'active' : '']" v-for="(item, index) in typeList" :key="index" @click="typeItemClick(index)">
				{{ item.value }}
			</view>
		</scroll-view>
		<view class="content-layout">
			<view v-for="(item, index) in listData" :key="index" class="content-item" @click="itemClick(item)">
				<view class="item-head">
					<view class="item-address text-one">{{ item.safeThingsAddressId || '' }}</view>
					<view class="item-date">{{ item.queryTime || '' }}</view>
				</view>
				<view style="display: flex;padding: 24rpx 20rpx;">
					<view class="item-left">
						<view class="item-title text-one">{{ item.thingTitle || '' }}</view>
						<view class="item-type text-one">事件类型：{{ item.safeThingsTypeName || '' }}</view>
						<view class="item-type text-one">违规所属：{{ item.violationType | violationTypeFormat }}</view>
					</view>
					<view class="item-right" v-if="item.status && item.status > 0">
						<u-image :src="`/static/images/${typeIcon[item.status - 1] || null}`" width="120rpx" height="120rpx" loadingIcon="" lazy-load />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { list } from '@/network/module/my-fillin.api.js'
	import TitleStatus from '@/components/title-status/title-status'
	import HNavbar from '@/components/h-navbar/h-navbar.vue'
	
	export default {
		components: {
			TitleStatus,
			HNavbar
		},
		data() {
			return {
				page: {
					pageNum: 0,
					pageSize: 10,
					total: 0
				},
				// 类型列表
				typeList: [
					{
						key: null,
						value: '全部'
					},
					{
						key: 1,
						value: '待确认'
					},
					{
						key: 2,
						value: '待受案'
					},
					{
						key: 3,
						value: '已受案'
					},
					{
						key: 4,
						value: '已完成'
					}
				],
				// 选中的类型
				currentType: 0,
				typeIcon: ['progress1.png','progress2.png','progress3.png','progress4.png'],
				listData: []
			}
		},
		filters: {
			violationTypeFormat(value) {
				if(!value) {
					return ''
				}
				if(value === 1) {
					return '旅客'
				} else if(value === 2) {
					return '货代'
				} else if(value === 3) {
					return '工作人员'
				}
				return ''
			}
		},
		watch: {
			currentType(newVal, oldVal) {
				this.getPageList(true)
			}
		},
		onLoad() {
			this.getPageList()
		},
		// page时下拉刷新,需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
		onPullDownRefresh() {
			  this.getPageList(true)
		},
		// page时上拉加载更多
		onReachBottom() {
			  this.getPageList()
		},
		methods: {
			typeItemClick(index) {
				if(index === this.currentType) {
					return
				}
				this.currentType = index
			},
			async getPageList(isRefresh = false) {
				if(isRefresh) {
					this.page.pageNum = 0
				}
				this.page.pageNum++
				const result = await list({pageNum: this.page.pageNum, pageSize: this.page.pageSize, data: {status: this.typeList[this.currentType].key}})
				if(isRefresh) {
					this.listData = []
				}
				this.page.total = result.data.total
				if(result.data.records) {
					this.listData = this.listData.concat(result.data.records)
				} else {
					this.page.pageNum = this.page.pageNum === 1 ? 1 : (this.page.pageNum - 1)
				}
				uni.stopPullDownRefresh()
			},
			itemClick(value) {
				if(!value) {
					return
				}
				this.$navigate.navigateToPage(this.$config.route.myFillinDetail,{obj: encodeURIComponent(JSON.stringify(value))})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F3F4F6;
	}
</style>
<style lang="scss" scoped>
	.my-fillin-container {
		display: flex;
		flex-direction: column;
		.type-layout {
			width: 100%;
			// height: 122rpx;
			white-space: nowrap;
			background-color: #fff;
			padding: 24rpx 0;
			.type-item {
				text-align: center;
				display: inline-block;
				width: 140rpx;
				height: 74rpx;
				line-height: 74rpx;
				margin-left: 24rpx;
				color: #909399;
				font-size: 28rpx;
				font-weight: 400;
				background: #F3F4F6;
				border-radius: 46rpx;
				&:first-of-type {
					margin-left: 30rpx;
				}
				&:last-of-type {
					margin-right: 30rpx;
				}
			}
			.active {
				color: #fff;
				background: #4583FD;
			}
		}
		.content-layout {
			display: flex;
			flex-direction: column;
			align-items: center;
			.content-item {
				width: 660rpx;
				// height: 264rpx;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				margin-bottom: 24rpx;
				
				&:first-of-type {
					margin-top: 24rpx;
				}
				
				.item-head {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 24rpx;
					border-bottom: 2rpx solid #F3F4F6;
					.item-address {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
					.item-date {
						font-weight: 400;
						font-size: 28rpx;
						color: #909399;
					}
				}
				.item-left {
					display: flex;
					flex-direction: column;
					flex: auto;
					.item-title {
						font-size: 34rpx;
						font-weight: 500;
						color: #333333;
					}
					.item-type {
						font-size: 30rpx;
						font-weight: 400;
						color: #333333;
						margin-top: 2rpx;
					}
				}
				.item-right {
					flex: none;
					width: 120rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}
		}
	}
</style>