zhgdyunapp_vue3/pages/projectEnd/betonManage/addInspectionRecord.vue

<template>
	<view>
		<view class="fixedheader">
			<headers  :showBack="true">
			<view class="headerName">
				添加送检记录
			</view>
		</headers>
		</view>
		
		<view class="form_box">
			<view class="form_item">
				<view class="form_label">送检组数<text class="start">*</text></view>
				<view class="form_vaule">
					<input type="text" :value="formData.name" placeholder="请输入" />
				</view>
			</view>
			<view class="form_item">
				<view class="form_label">送检状态<text class="start">*</text></view>
				<view class="form_vaule">
					<picker :value="formData.date" range-key="name" :range="statusList"  @change="bindDateChange">
					    <view class="uni-input">{{statusList[formData.date] ? statusList[formData.date].name:''}}<text v-if="!statusList[formData.date]" style="color: grey">请选择</text><uni-icons2 class="right_arrow" type="arrowright" size="14"></uni-icons2></view>
					</picker>
				</view>
			</view>
			<view class="form_item form_file">
				<view class="form_label">送检报告<text class="start">*</text></view>
				<view class="uni-form-input imgBox_wrap">
					<view class="imgBox" v-show="imgFileList.length>0" v-for="(item,index) in imgFileList" :key="index">
						<image :src="url_config+'image/'+item.url" class="img"
							@click="previewImage(url_config+'image/'+item.url)"></image>
						<uni-icons2 @click="deleteImg(item,1)" class="deleteImg" type="clear" size="12" color="#F65352"></uni-icons2>
					</view>
					<view class="addImgBox" @click="uploadImg" v-if="imgFileList.length<5">
						<image src="/static/icon-add.png" class="icon-add"></image>
					</view>
				</view>
			</view>

		</view>
		
		<view class="add_btn">提交</view>
	
	</view>
</template>

<script>
export default{
	data(){
		return{
			formData:{
				name: '',
				date: ''
			},
			statusList:[{
				name: '合格',
				value: 1
			},{
				name: '不合格',
				value: 2
			}],
			imgFileList:[]
		}
	},
	methods:{
		bindDateChange(e){
			console.log(e)
			this.formData.date = e.detail.value
		},
		previewImage(url) {
			uni.previewImage({
				urls: [url]
			})
		},
		uploadImg(){
			var that = this
			uni.chooseImage({
				count: 5 - that.imgFileList.length,
				success(res) {
					const tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'files',
						success: (uploadFileRes) => {
							let data = {
								name: JSON.parse(uploadFileRes.data).data[0].filename,
								url: JSON.parse(uploadFileRes.data).data[0].imageUrl
							};
							that.imgFileList.push(data)
						}
					});
				}
			})
		},
		deleteImg(val, type) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确定删除该附件吗?',
				success: function(res) {
					if (res.confirm) {
						if (type == 1) {
							let fileArr = JSON.parse(JSON.stringify(that.imgFileList));
							fileArr.forEach((item, index) => {
								if (item.url == val.url) {
									fileArr.splice(index, 1)
								}
							})
							that.imgFileList = fileArr;
						}
		
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		
		},
	}
}
</script>

<style lang="scss" scoped>
	.form_box{
		.form_item{
			height: 90rpx;
			border-bottom: 1rpx solid #E7E7E7;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			font-size: 28rpx;
			.form_label{
				color: #2A2E3F;
				width: 40%;
				line-height: 90rpx;
				font-size: 28rpx;
				.start{
					color: #F65352;
					line-height: 90rpx;
				}
			}
			.form_vaule{
				flex: 1;
				height: 90rpx;
				font-size: 28rpx;
				uni-input{
					height: 100%;
					font-size: 28rpx;
				}
				.uni-input{
					width: 100%;
					height: 90rpx;
					position: relative;
					line-height: 90rpx;
					.right_arrow{
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}
		.form_file{
			border-bottom: 0;
			align-items: flex-start;
		}
	}
	.imgBox_wrap {
		display: flex;
		flex-wrap: wrap;
		// margin-top: 20rpx;
		padding-top: 26rpx;
		width: 75%;
	}
	
	.imgBox {
		width: 76rpx;
		height: 76rpx;
		display: inline-flex;
		position: relative;
		margin-right: 30rpx;
		margin-bottom: 32rpx;
	
		.img {
			width: 100%;
			height: 100%;
			// border-radius: 20rpx;
		}
	
		.deleteImg {
			position: absolute;
			right: -12rpx;
			top: -16rpx;
		}
	
	}
	
	.addImgBox {
		border: 1px dashed rgba(42, 43, 91, 0.1);
		background-color: #fff;
		width: 76rpx;
		height: 76rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		// border-radius: 20rpx;
		font-size: 24rpx;
	
		.icon-add {
			width: 20rpx;
			height: 20rpx;
			color: #999;
		}
	}
	
	.bottom_nav{
		background: rgba(#5181F6,0.1);
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		align-items: center;
		height: 152rpx;
		width: 100%;
		justify-content: space-around;
		.bottom_nav_item{
			width: 100rpx;
			height: 100rpx;
			border: 1rpx solid rgba(81, 129, 246, 0.6);
			border-radius: 50%;
			background: #fff;
			font-size: 28rpx;
			color: #5181F6;
			box-shadow: 0px 4rpx 4px 0px rgba(81, 129, 246, 0.3);
			text-align: center;
			padding: 10rpx;
			box-sizing: border-box;
		}
	}
	.bottom_box{
		position: fixed;
		bottom: 40rpx;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		.bottom_btn{
			height: 100rpx;
			width: 280rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 40rpx;
		}
		.error_btn{
			color: #F65352;
			border: 1rpx solid #F65352;
			margin-right: 80rpx;
		}
		.success_btn{
			color: #fff;
			background: #5181F6;
		}
	}
	.add_btn{
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		width: 88%;
		transform: translateX(-50%);
		height: 100rpx;
		background: #5181F6;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
	}
	
</style>