eduepos_ui_store/pages/rectification/detail.vue

<template>
	<view class="rect-detail">
		<view class="card head-card" v-if="latest">
			<view class="head">
				<view class="left">
					<text class="name">{{ latest.indicatorName }}</text>
					<text class="round" v-if="rounds.length > 1">共{{ rounds.length }}轮</text>
				</view>
				<view class="tag" :style="{ color: statusMeta(latest.status).color, background: statusMeta(latest.status).bg }">
					{{ statusMeta(latest.status).text }}
				</view>
			</view>
			<view class="info">
				<view class="row"><text class="label">巡检得分</text><text>{{ fmtScore(latest.inspectScore) }}（及格 {{ fmtScore(latest.passScore) }}）</text></view>
				<view class="row"><text class="label">整改截止</text><text>{{ formatDate(latest.deadlineDate, true) }}</text></view>
			</view>
			<view class="btn-row">
				<button class="btn primary" v-if="latest.status == 1" @click="doStart(latest)">开始整改</button>
			</view>
		</view>

		<!-- 时间轴 -->
		<view class="card" v-if="rounds.length">
			<view class="title">整改时间轴</view>
			<view class="timeline">
				<view class="tl-item" v-for="(rd, idx) in rounds" :key="rd.rectId">
					<view class="tl-circle" :class="{ current: idx === rounds.length - 1 }"></view>
					<view class="tl-body">
						<view class="tl-title">
							第{{ rd.rectRound }}轮整改
							<text class="tl-tag" :style="{ color: statusMeta(rd.status).color, background: statusMeta(rd.status).bg }">{{ statusMeta(rd.status).text }}</text>
						</view>
						<view class="tl-line">下发整改通知　{{ formatDate(rd.createDate, true) }}</view>
						<view class="tl-line" v-if="rd.noticeContent">通知内容：{{ rd.noticeContent }}</view>
						<view class="tl-sub" v-if="rd.feedbackDate">
							<text class="sub-icon">门店反馈</text>
							<view class="sub-content">{{ rd.feedbackContent }}</view>
							<view class="pics" v-if="picsOf(rd.feedbackPictures).length">
								<image v-for="(u, i) in picsOf(rd.feedbackPictures)" :key="i" :src="u" mode="aspectFill" class="imgR" @click="preview(picsOf(rd.feedbackPictures), i)" />
							</view>
							<view class="tl-line">反馈时间：{{ formatDate(rd.feedbackDate, true) }}</view>
						</view>
						<view class="tl-sub recheck" v-if="rd.recheckDate">
							<text class="sub-icon">巡检员复检</text>
							<view class="tl-line">复检得分：{{ fmtScore(rd.recheckScore) }}</view>
							<view class="tl-line" v-if="rd.recheckRmk">复检备注：{{ rd.recheckRmk }}</view>
							<view class="tl-line">复检时间：{{ formatDate(rd.recheckDate, true) }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 提交整改反馈（仅整改中） -->
		<view class="card form" v-if="latest && latest.status == 2">
			<view class="title">提交整改反馈</view>
			<textarea class="textarea" v-model="content" placeholder="请填写整改说明" :maxlength="500" />
			<view class="pics">
				<view class="pic" v-for="(p, i) in pics" :key="i">
					<image :src="p.local" mode="aspectFill" class="img" @click="preview(pics.map(x => x.local), i)"></image>
					<view class="del" @click="delPic(i)">×</view>
				</view>
				<view class="pic add" v-if="pics.length < 5" @click="choosePic">
					<view class="plus">+</view>
					<text>{{ pics.length }}/5</text>
				</view>
			</view>
			<button class="btn primary submit" @click="doSubmit">提交反馈</button>
		</view>

		<view class="empty" v-if="!rounds.length && !loading">记录不存在</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			getUrl: '/rectificationApi/getRectDetail',
			submitUrl: '/rectificationApi/submitRect',
			startUrl: '/rectificationApi/startRect',
			uploadUrl: '/rectificationApi/uploadPicture',
			id: '',
			rounds: [],
			loading: true,
			content: '',
			pics: []   // {local, url}
		}
	},
	computed: {
		...mapState(['storeInfo']),
		latest() {
			return this.rounds.length ? this.rounds[this.rounds.length - 1] : null
		}
	},
	methods: {
		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' }
		},
		loadData() {
			this.loading = true
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.getUrl,
				data: {
					id: this.id,
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.rounds = (res.data.obj && res.data.obj.rounds) || []
						if (this.latest) this.content = this.latest.feedbackContent || ''
					} else if (res.data.rtnBean.rtnMsg) {
						this.$api.msg(res.data.rtnBean.rtnMsg)
					}
					this.loading = false
				},
				fail: () => {
					this.loading = false
				}
			})
		},
		doStart(rd) {
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.startUrl,
				data: {
					id: rd.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)
					}
				}
			})
		},
		choosePic() {
			let remain = 5 - this.pics.length
			if (remain <= 0) return
			uni.chooseImage({
				count: remain,
				sizeType: ['compressed'],
				success: res => {
					res.tempFiles.forEach(f => { if (f.size > 5 * 1024 * 1024) { this.$api.msg('图片不能超过5MB'); return } this.uploadPic(f.path) })
				}
			})
		},
		uploadPic(filePath) {
			uni.showLoading({ title: '上传中' })
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			var uploadUrl = this.uploadUrl
			var baseUrl = getApp().globalData.apiUrl
			if (uploadUrl.indexOf('/api/') == -1) {
				if (baseUrl.indexOf('127.0.0.1') != -1 || baseUrl.indexOf('localhost') != -1) {
					uploadUrl = 'a1' + uploadUrl
				} else {
					var json = getApp().globalData.storeInfo
					if (json) uploadUrl = json.code + uploadUrl
				}
			}
			if (uploadUrl.indexOf('http') != 0) {
				if (uploadUrl.charAt(0) == '/') uploadUrl = uploadUrl.substring(1)
				uploadUrl = baseUrl + '/' + uploadUrl
			}
			uni.uploadFile({
				url: uploadUrl,
				filePath: filePath,
				name: 'file',
				formData: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					try {
						var data = JSON.parse(res.data)
						if (data.rtnBean.rtnCode == 0 && data.obj) {
							this.pics.push({ local: filePath, url: data.obj })
						} else {
							this.$api.msg((data.rtnBean && data.rtnBean.rtnMsg) || '上传失败')
						}
					} catch(e) {
						this.$api.msg('上传失败，请检查网络')
					}
					uni.hideLoading()
				},
				fail: () => {
					uni.hideLoading()
					this.$api.msg('上传失败')
				}
			})
		},
		delPic(i) {
			this.pics.splice(i, 1)
		},
		picsOf(str) {
			if (!str) return []
			return String(str).split(',').filter(u => u && u.trim())
		},
		preview(urls, i) {
			uni.previewImage({ urls: urls, current: urls[i] })
		},
		doSubmit() {
			if (this.latest && this.latest.rectRound >= 3 && this.latest.status == 5) {
				return this.$api.msg('第3轮复检不通过，无法再次提交')
			}
			if (!this.latest) return
			if (!this.content || !String(this.content).trim()) {
				return this.$api.msg('请填写整改说明')
			}
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			let urls = this.pics.map(p => p.url)
			this.requst({
				url: this.submitUrl,
				data: {
					id: this.latest.rectId,
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					feedbackContent: String(this.content).trim(),
					feedbackPictures: urls.join(',')
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.$api.msg('已提交，等待复检')
						this.pics = []
						this.content = ''
						this.loadData()
					} else if (res.data.rtnBean.rtnMsg) {
						this.$api.msg(res.data.rtnBean.rtnMsg)
					}
				},
				fail: () => {}
			})
		},
		formatDate(v, withTime) {
			if (!v) return ''
			let d = new Date(v)
			let p = n => (n < 10 ? '0' + n : n)
			let s = d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate())
			if (withTime) s += ' ' + p(d.getHours()) + ':' + p(d.getMinutes())
			return s
		},
		fmtScore(v) {
			return Number(v || 0)
		}
	},
	onLoad(options) {
		this.id = options.id || ''
		this.loadData()
	}
}
</script>

<style lang="scss" scoped>
.rect-detail {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
	box-sizing: border-box;
}
.card {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	.head {
		@include between;
		margin-bottom: 16rpx;
		.left {
			@include flexStart;
			.name {
				font-size: 32rpx;
				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;
		}
	}
	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: $text-color;
		margin-bottom: 16rpx;
	}
	.row {
		@include flexStart;
		color: $text-color;
		font-size: $font-base;
		padding: 8rpx 0;
		.label {
			min-width: 130rpx;
			color: $desc-color;
		}
	}
	.btn {
		margin-top: 20rpx;
		height: 76rpx;
		line-height: 76rpx;
		font-size: $font-lg;
		color: #fff;
		background: $theme-color;
		border: none;
		border-radius: 38rpx;
	}
}
/* 时间轴 */
.timeline {
	padding-left: 8rpx;
	.tl-item {
		position: relative;
		padding-left: 40rpx;
		padding-bottom: 30rpx;
		border-left: 2rpx solid #e5e5e5;
		&:last-child {
			border-left-color: transparent;
		}
		.tl-circle {
			position: absolute;
			left: -12rpx;
			top: 4rpx;
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			background: #c8c9cc;
			&.current {
				background: $theme-color;
			}
		}
		.tl-title {
			font-size: $font-lg;
			font-weight: bold;
			color: $text-color;
			margin-bottom: 8rpx;
			.tl-tag {
				margin-left: 12rpx;
				font-size: $font-sm;
				font-weight: normal;
				padding: 2rpx 12rpx;
				border-radius: 16rpx;
			}
		}
		.tl-line {
			color: $icon-color;
			font-size: $font-base;
			padding: 2rpx 0;
		}
		.tl-sub {
			background: #f7f7f9;
			border-radius: 10rpx;
			padding: 16rpx;
			margin-top: 10rpx;
			.sub-icon {
				font-size: $font-sm;
				color: $theme-color;
			}
			.sub-content {
				color: $text-color;
				font-size: $font-base;
				padding: 8rpx 0;
			}
			&.recheck {
				margin-top: 8rpx;
			}
		}
	}
}
/* 图片 */
.pics {
	display: flex;
	flex-wrap: wrap;
	margin-top: 16rpx;
	.pic {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin: 0 14rpx 14rpx 0;
		overflow: hidden;
		.img {
			width: 100%;
			height: 100%;
			background: #ececec;
		}
		.del {
			position: absolute;
			top: 0;
			right: 0;
			width: 40rpx;
			height: 40rpx;
			line-height: 36rpx;
			text-align: center;
			background: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 30rpx;
		}
		&.add {
			border: 2rpx dashed #ccc;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #bbb;
			font-size: $font-sm;
			.plus {
				font-size: 50rpx;
				line-height: 50rpx;
			}
		}
	}
	.imgR {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin: 0 14rpx 14rpx 0;
		background: #ececec;
	}
}
/* 提交表单 */
.form {
	.textarea {
		width: 100%;
		height: 200rpx;
		background: #f7f7f7;
		border-radius: 10rpx;
		padding: 16rpx;
		box-sizing: border-box;
		font-size: $font-base;
	}
}
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
	color: #cdcdcd;
	font-size: $font-lg;
}
</style>