FE-lab-xcx/pages_safetyCheck/views/snapshotManage/snapshotRectification.vue

<!-- 随手拍隐患项整改 -->
<template>
	<view class="snapshotDetail">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="items">
				<view class="items-li">
					<view>安全类别</view>
					<view>{{newData.hazardCheckName}}</view>
				</view>
			</view>
			<view class="list">
				<view class="list-li">
					<view>检查隐患</view>
					<view style="color: #FF8C00;">
						<img src="@/pages_safetyCheck/images/icon_06.png">
					</view>
				</view>
				<view class="hidden-content">{{newData.hazardDescribe}}
				</view>
				<view class="photo">
					<img v-for="(item,index) in newData.yhDtoList" :src="baseUrl+item.fileUrl">
				</view>
				<view class="list-li">
					<view>姓名：</view>
					<view>{{newData.createName}}</view>
				</view>
				<view class="list-li">
					<view>时间：</view>
					<view>{{newData.createTime}}</view>
				</view>
				<view class="list-li">
					<view>隐患整改</view>
					<view>
						<img src="@/pages_safetyCheck/images/icon_06.png">
					</view>
				</view>
				<textarea class="describe" type="text" v-model="form.rectifyDescribe" maxlength="200"
					placeholder="请填写整改措施" placeholder-style="font-size:24rpx;color:#999;"></textarea>
				<view class="check-for-img-max-box">
					<view class="left-title-p"></view>
					<view class="right-img-box">
						<view class="img-box" v-for="(imgUrl,imgIndex) in form.imgDtoList" :key="imgIndex">
							<img class="img-data" :src="baseUrl+imgUrl.fileUrl">
							<img class="position-img" src="@/pages_safetyCheck/images/icon_ssp_closure.png"
								@click="delImg(imgIndex)">
						</view>
						<img class="add-button" src="@/pages_safetyCheck/images/img_ssp_pz@1x.png"
							@click="selectImage()" v-if="form.imgDtoList.length<6">
					</view>
				</view>
				<!-- <view class="list-li-tow">
					<view>整改方案（上传文件）</view>
					<view @click="selectFile()">
						<img src="@/pages_safetyCheck/images/icon_aqjc_sc.png">
					</view>
				</view>
				<view class="file-li" v-if="form.rectifyProjectName">
					<img src="@/pages_safetyCheck/images/icon_djc_wj.png">
					<view>{{form.rectifyProjectName}}</view>
					<img src="@/pages_safetyCheck/images/icon_yybz_sc.png">
				</view> -->
			</view>
		</scroll-view>
		<view class="sub-btn">
			<view @click="submitForm(2)">暂无法整改</view>
			<view @click="submitForm(1)">完成整改</view>
		</view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		securityAppCheckPhotoUpdate,
	} from '@/pages_safetyCheck/api/index.js'
	export default {
		name: "snapshotDetail",
		components: {

		},
		data() {
			return {
				baseUrl: config.base_url,
				inspectionItems: 0, //0有检查项 1无检查项
				form: {
					imgDtoList: [],
					rectifyProjectName: '',
					rectifyProjectUrl: '',
				},
				newData: {},
			}
		},
		onLoad(option) {
			this.$set(this, 'newData', JSON.parse(decodeURIComponent(option.infoData)));
		},
		onShow() {

		},
		mounted() {

		},
		methods: {
			//滚动事件
			scrollGet() {},
			/******文件上传******/
			selectFile() {
				let self = this;
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success(res) {
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFiles[0].path
						self.form.rectifyProjectName = res.tempFiles[0].name
						self.uploadFile(tempFilePaths);
					}
				})
			},
			async uploadFile(tempFilePaths) {
				var self = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
					url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						console.log(res)
						if (res.code == 200) {
							self.form.rectifyProjectUrl = res.data.url;
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			/******图片上传******/
			selectImage() {
				let self = this;
				let photoMaxNun = 0;
				if (this.form.imgDtoList.length > 5) {
					uni.showToast({
						title: '最多上传6张图片',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				photoMaxNun = 6 - this.form.imgDtoList.length;
				wx.chooseImage({
					count: photoMaxNun,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						if (res.tempFilePaths[0]) {
							res.tempFilePaths.forEach(function(item, index) {
								self.uploadImg(item);
							})
						}
					}
				});
			},
			async uploadImg(tempFilePaths) {
				var self = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
					url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							this.form.imgDtoList.push({
								'fileUrl': res.data.url,
								'fileName': res.data.name
							});
							console.log(res.data.url)
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			//删除图片
			delImg(minIndex) {
				this.form.imgDtoList.splice(minIndex, 1);
				this.$forceUpdate();
			},
			//整改/暂无法整改
			async submitForm(status) {
				let self = this;
				/* if (status ==2 && this.form.rectifyProjectUrl=='') {
					uni.showToast({
						title: '请上传整改方案!',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				} */
				let obj = {
					photoId: this.newData.photoId,
					rectifyStatus: status, //1已整改2暂无法整改
					rectifyDescribe: this.form.rectifyDescribe,
					imgDtoList: this.form.imgDtoList,
					rectifyProjectName: this.form.rectifyProjectName,
					rectifyProjectUrl: this.form.rectifyProjectUrl,
				}
				const {
					data
				} = await securityAppCheckPhotoUpdate(obj);
				if (data.code == 200) {
					uni.showToast({
						title: '提交成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					let infoData = this.newData;
					uni.redirectTo({
						url: '/pages_safetyCheck/views/snapshotManage/snapshotDetail?infoData=' +
							encodeURIComponent(JSON.stringify(infoData))
					});

				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.snapshotDetail {
		height: 100%;
		display flex;
		box-sizing: border-box;
		padding-bottom: 160rpx;
		box-sizing: border-box;

		#bgColor-A {
			color: #FFD400;
		}

		#bgColor-B {
			color: #FF8C00;
		}

		#bgColor-C {
			color: #E11608;
		}

		.tip {
			width: 750rpx;
			height: 80rpx;
			background: rgba(255, 140, 0, 0.2);
			font-weight: normal;
			font-size: 28rpx;
			color: #FF8C00;
			line-height: 80rpx;
			text-align: center;
		}

		.items {
			width: 690rpx;
			min-height: 80rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx 0 0 30rpx;

			.items-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E0E0E0;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.items-li:last-of-type {
				border-bottom: none;
			}

			.items-t {
				border-bottom: 1rpx solid #E0E0E0;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				.items-t-l {
					width: 175rpx;
					height: 50rpx;
					background: #E11608;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					text-align: center;
					margin-right: 14rpx;
				}

				.items-t-r {
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
				}
			}

			.items-b {
				padding: 0 30rpx;
				box-sizing: border-box;
				height: 80rpx;
				font-size: 28rpx;
				color: #666666;
				line-height: 80rpx;
				text-align: left;
			}
		}

		.items-number {
			font-size: 24rpx;
			color: #3D3D3D;
			line-height: 34rpx;
			text-align: right;
			margin: 20rpx 60rpx 0 0;

			>text {
				font-size: 24rpx;
				color: #FF0000;
				line-height: 34rpx;
				text-align: right;
			}
		}

		.list {
			width: 690rpx;
			margin: 20rpx 30rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.list-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E0E0E0;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;

					>img {
						width: 24rpx;
						height: 12rpx;
						margin-left: 10rpx;
					}
				}

			}

			.list-li-tow {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-top: 1rpx solid #E0E0E0;
				border-bottom: 1rpx solid #E0E0E0;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 80rpx;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;

					>img {
						width: 30rpx;
						height: 28rpx;
						margin-left: 10rpx;
					}
				}

			}

			.file-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				>img:nth-of-type(1) {
					width: 30rpx;
					height: 30rpx;
				}

				>view {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
					margin: 0 92rpx 0 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				>img:nth-of-type(2) {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.hidden-content {
				width: 630rpx;
				min-height: 200rpx;
				background: #F5F5F5;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: 20rpx 30rpx 0;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #666666;
				line-height: 39rpx;
				text-align: left;
			}

			.photo {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-top: 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				>img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin: 0 10rpx 10rpx 0;
				}
			}

			.describe {
				width: 636rpx;
				height: 120rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 1rpx solid #E0E0E0;
				margin: 20rpx 0 0 28rpx;
				padding: 12rpx 16rpx;
				box-sizing: border-box;
			}

			.check-for-img-max-box {
				margin: 20px 28rpx;

				.left-title-p {
					width: 100%;
					text-align: left;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
				}

				.right-img-box {
					.img-box {
						display inline-block;
						height: 150rpx;
						width: 150rpx;
						position relative;
						margin: 0 14rpx 20rpx 0;
						border-radius 10rpx;
						overflow hidden;

						.img-data {
							height: 150rpx;
							width: 150rpx;
						}

						.position-img {
							position absolute;
							right: 0;
							top: 0;
							width: 36rpx;
							height: 36rpx;
						}
					}

					.img-box:nth-of-type(4n+4) {
						margin-right: 0rpx;
					}

					.add-button {
						margin: 0 0rpx 20rpx 0;
						border-radius 10rpx;
						overflow hidden;
						display inline-block;
						height: 150rpx;
						width: 150rpx;
					}
				}
			}

			.list-li:last-of-type {
				border: none;
			}
		}

	}

	.sub-btn {
		display: flex;
		justify-content: center;
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;

		>view:nth-of-type(1) {
			width: 345rpx;
			height: 100rpx;
			background: #FF8C00;
			border-radius: 50rpx 0rpx 0rpx 50rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}

		>view:nth-of-type(2) {
			width: 345rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 0rpx 50rpx 50rpx 0rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>