eduepos_ui_store/pages/inspect/list.vue

<template>
	<view class="inspect-list">
		<view class="list" v-if="records.length">
			<view class="item" v-for="item in records" :key="item.taskId" @click="goDetail(item)">
				<view class="top">
					<view class="left">
						<view class="name">{{ item.planName || '巡检任务' }}</view>
						<text class="rect-tag" v-if="item.rectStatus === 1 || item.rectStatus === 2">待整改</text>
						<text class="rect-tag done" v-if="item.rectStatus === 3">已整改</text>
					</view>
					<view class="pass" :class="{ good: item.passFlag == 1, bad: item.passFlag == 0 }">{{ passText(item) }}</view>
				</view>
				<view class="meta">
					<text class="date">{{ formatDate(item.taskDate) }}</text>
					<text class="inspector" v-if="item.inspectorName">巡检员：{{ item.inspectorName }}</text>
				</view>
				<view class="meta status-row">
					<text class="status-tag" :style="statusStyle(item.status)">{{ statusText(item.status) }}</text>
				</view>
				<view class="score" v-if="item.totalScore != null">
					综合得分：<b>{{ fmtScore(item.totalScore) }}</b>
					<text class="max">/{{ fmtScore(item.maxScore) }}</text>
				</view>
				<view class="score" v-else>. . .</view>
			</view>
			<view class="loadmore" @click="loadMore" v-if="hasMore">{{ loading ? '加载中…' : '上拉加载更多' }}</view>
			<view class="loadmore" v-else-if="records.length">已加载全部</view>
		</view>
		<view class="empty" v-else-if="!loading">
			<image src="/static/imgs/empty/empty2x.png" class="empty-img" mode="widthFix"></image>
			<text>暂无巡检记录</text>
		</view>
	</view>
</template>
<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			listUrl: '/inspectApi/getMyInspectList',
			records: [],
			currentPage: 1,
			pageSize: 20,
			total: 0,
			loading: false
		}
	},
	computed: {
		...mapState(['storeInfo']),
		hasMore() {
			return this.total > this.records.length
		}
	},
	methods: {
		loadData() {
			this.loading = true
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.listUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						let list = (res.data.list || [])
						let page = res.data.page || {}
						this.total = page.totalRecords || list.length
						this.records = this.currentPage === 1 ? list : this.records.concat(list)
					} else if (res.data.rtnBean.rtnMsg) {
						this.$api.msg(res.data.rtnBean.rtnMsg)
					}
					this.loading = false
					uni.stopPullDownRefresh()
				},
				fail: () => {
					this.loading = false
					uni.stopPullDownRefresh()
				}
			})
		},
		loadMore() {
			if (this.loading || !this.hasMore) return
			this.currentPage++
			this.loadData()
		},
		goDetail(item) {
			uni.navigateTo({ url: '/pages/inspect/detail?id=' + item.taskId })
		},
		formatDate(v) {
			if (!v) return ''
			let d = new Date(v)
			let p = n => (n < 10 ? '0' + n : n)
			return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate())
		},
		fmtScore(v) {
			return Number(v || 0)
		},
		passText(item) {
			if (item.status != 3) return ''
			return item.passFlag == 1 ? '及格' : '不及格'
		},
		statusText(v) {
			return { 1: '待执行', 2: '执行中', 3: '已完成', 4: '已取消', 5: '已超期' }[v] || ''
		},
		statusStyle(v) {
			var map = {
				1: { color: '#909399', bg: '#f4f4f5' },
				2: { color: '#409EFF', bg: '#ecf5ff' },
				3: { color: '#67C23A', bg: '#f0f9eb' },
				4: { color: '#F56C6C', bg: '#fef0f0' },
				5: { color: '#E6A23C', bg: '#fdf6ec' }
			}
			var s = map[v] || { color: '#909399', bg: '#f4f4f5' }
			return { color: s.color, background: s.bg }
		}
	},
	onPullDownRefresh() {
		this.currentPage = 1
		this.records = []
		this.loadData()
	},
	onReachBottom() {
		this.loadMore()
	},
	onLoad() {
		this.loadData()
	}
}
</script>
<style lang="scss" scoped>
.inspect-list {
	min-height: 100vh;
	background-color: #f5f5f5;
}
.list {
	padding: 20rpx;
	.item {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		.top {
			@include between;
			margin-bottom: 12rpx;
			.left {
				@include flexStart;
				flex: 1;
				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: $text-color;
				}
				.rect-tag {
					margin-left: 12rpx;
					font-size: $font-sm;
					padding: 2rpx 12rpx;
					border-radius: 20rpx;
					color: #E6A23C;
					background: #fdf6ec;
					&.done {
						color: #67C23A;
						background: #f0f9eb;
					}
				}
			}
			.pass {
				flex-shrink: 0;
				font-size: $font-sm;
				padding: 4rpx 14rpx;
				border-radius: 20rpx;
				color: #909399;
				background: #f4f4f5;
				&.good {
					color: #67c23a;
					background: #f0f9eb;
				}
				&.bad {
					color: #f56c6c;
					background: #fef0f0;
				}
			}
		}
		.meta {
			@include between;
			color: $desc-color;
			font-size: $font-sm;
			margin-bottom: 6rpx;
			.inspector {
				text-align: right;
			}
			&.status-row {
				margin-bottom: 10rpx;
				.status-tag {
					font-size: 22rpx;
					padding: 2rpx 12rpx;
					border-radius: 16rpx;
				}
			}
		}
		.score {
			font-size: $font-base;
			color: $text-color;
			b {
				font-size: 36rpx;
				color: $theme-color;
			}
			.max {
				color: $desc-color;
				font-size: $font-sm;
			}
		}
	}
	.loadmore {
		text-align: center;
		color: $desc-color;
		font-size: $font-sm;
		padding: 20rpx 0;
	}
}
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
	color: #cdcdcd;
	font-size: $font-lg;
	.empty-img {
		width: 240rpx;
		margin-bottom: 30rpx;
	}
}
</style>