eduepos_ui_store/pages/rectification/list.vue

<template>
	<view class="rect-list">
		<view class="filter-tabs">
			<view v-for="(t, idx) in tabs" :key="t.label" class="tab" :class="{ active: activeIdx === idx }" @click="switchTab(idx)">
				{{ t.label }}
			</view>
		</view>

		<view class="list" v-if="showList.length">
			<view class="item" v-for="item in showList" :key="item.rectId" @click="goDetail(item)">
				<view class="top">
					<view class="left">
						<text class="name">{{ item.indicatorName }}</text>
						<text class="round" v-if="item.rectRound > 1">第{{ item.rectRound }}轮</text>
					</view>
					<view class="tag" :style="{ color: statusMeta(item.status).color, background: statusMeta(item.status).bg }">
						{{ statusMeta(item.status).text }}
					</view>
				</view>
				<view class="meta">
					<text>巡检得分：{{ fmtScore(item.inspectScore) }}（及格 {{ fmtScore(item.passScore) }}）</text>
				</view>
				<view class="meta deadline">截止：{{ formatDate(item.deadlineDate) }}<text class="countdown" v-if="item.status == 1 || item.status == 2"> 剩余{{ remainDays(item.deadlineDate) }}天</text></view>
				<view class="actions" v-if="item.status == 1 || item.status == 2">
					<button class="btn" v-if="item.status == 1" @tap.stop="doStart(item)">开始整改</button>
					<button class="btn primary" v-if="item.status == 2" @tap.stop="goSubmit(item)">提交反馈</button>
				</view>
			</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: '/rectificationApi/getMyRectList',
			startUrl: '/rectificationApi/startRect',
			records: [],
			loading: true,
			activeIdx: 0,
			// 按 PRD 状态分桶：待整改(1) / 进行中(2整改中,3待复检) / 已完成(4复检通过,5复检不通过,7最终不通过) / 已超期(6)
			tabs: [
				{ label: '待整改', value: [1] },
				{ label: '进行中', value: [2, 3] },
				{ label: '已完成', value: [4, 5, 7] },
				{ label: '已超期', value: [6] }
			]
		}
	},
	computed: {
		...mapState(['storeInfo']),
		showList() {
			var t = this.tabs[this.activeIdx]
			return this.records.filter(r => t.value.indexOf(r.status) > -1)
		}
	},
	methods: {
		switchTab(idx) {
			this.activeIdx = idx
		},
		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
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.records = res.data.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()
				}
			})
		},
		doStart(item) {
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.startUrl,
				data: {
					id: item.rectId,
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.$api.msg('已开始整改')
						this.loadData()
					} else if (res.data.rtnBean.rtnMsg) {
						this.$api.msg(res.data.rtnBean.rtnMsg)
					}
				},
				fail: () => {}
			})
		},
		goDetail(item) {
			uni.navigateTo({ url: '/pages/rectification/detail?id=' + item.rectId })
		},
		goSubmit(item) {
			uni.navigateTo({ url: '/pages/rectification/detail?id=' + item.rectId + '&submit=1' })
		},
		statusMeta(v) {
			var map = {
				1: { text: '待整改', color: '#E6A23C', bg: '#fdf6ec' },
				2: { text: '整改中', color: '#409EFF', bg: '#ecf5ff' },
				3: { text: '待复检', color: '#9c27b0', bg: '#f5eefb' },
				4: { text: '复检通过', color: '#67C23A', bg: '#f0f9eb' },
				5: { text: '复检不通过', color: '#F56C6C', bg: '#fef0f0' },
				6: { text: '已关闭', color: '#909399', bg: '#f4f4f5' },
				7: { text: '最终不通过', color: '#F56C6C', bg: '#fef0f0' }
			}
			return map[v] || { text: '', color: '#666', bg: '#f4f4f5' }
		},
		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())
		},
		remainDays(deadline) {
			if (!deadline) return '?'
			let now = new Date()
			let end = new Date(deadline)
			let diff = Math.ceil((end - now) / (1000 * 60 * 60 * 24))
			return diff > 0 ? diff : 0
		},
		fmtScore(v) {
			return Number(v || 0)
		}
	},
	onPullDownRefresh() {
		this.loadData()
	},
	onLoad() {
		this.loadData()
	}
}
</script>

<style lang="scss" scoped>
.rect-list {
	min-height: 100vh;
	background-color: #f5f5f5;
}
.filter-tabs {
	display: flex;
	background-color: #fff;
	padding: 20rpx;
	.tab {
		flex: 1;
		text-align: center;
		font-size: $font-lg;
		color: $text-color;
		&.active {
			color: $theme-color;
			font-weight: bold;
		}
	}
}
.list {
	padding: 20rpx;
	.item {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		.top {
			@include between;
			margin-bottom: 12rpx;
			.left {
				@include flexStart;
				.name {
					font-size: 30rpx;
					font-weight: bold;
					color: $text-color;
				}
				.round {
					margin-left: 12rpx;
					font-size: $font-sm;
					color: $theme-color;
					padding: 2rpx 12rpx;
					border: 2rpx solid $theme-color;
					border-radius: 20rpx;
				}
			}
			.tag {
				font-size: $font-sm;
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
			}
		}
		.meta {
			color: $desc-color;
			font-size: $font-base;
			margin-bottom: 8rpx;
			&.deadline {
				color: $icon-color;
			}
		}
		.actions {
			display: flex;
			justify-content: flex-end;
			margin-top: 16rpx;
			.btn {
				margin: 0 0 0 20rpx;
				padding: 0 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: $font-base;
				color: #fff;
				background: #909399;
				border: none;
				border-radius: 30rpx;
				&.primary {
					background: $theme-color;
				}
			}
		}
	}
}
.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>