MingGaoApp_vue/MingGaoApp/pages/my/addcont.vue

<template>
	<view style="background-color: #fff;margin-top: 30rpx;">
		<view class="context_box">
			<view class="weatherbox">
				<u--form labelPosition="left" :model="weatherdatas" :rules="rules" ref="form1">
					<u-form-item label="监测事项" prop="temp" ref="item1" labelWidth="80">
						<u--input v-model="weatherdatas.temp" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="imgbox">
				<view class="title">
					图像信息
				</view>
				<view class="imgbox_box">
					<view class="addimg" @click="gainimg">
						<u-icon size="20" name="plus" color="#409eff"></u-icon>
					</view>
					<view class="imgitem" v-for="item,index in urllist" :key="index">
						<view class="icon" @click="deleimg(index)">
							<u-icon name="close" color="#fff"></u-icon>
						</view>
						<image :src="baseUrl+item" mode="scaleToFill" class="img"></image>
					</view>
				</view>
			</view>
			<view class="imgbox_tishi" v-if="urllist.length ==0 && imgtf">
				请选择图片
			</view>
			<view class="describe_box">
				<view class="title">
					内容
				</view>
				<view class="textarea">
					<u--textarea v-model="value1" placeholder="请输入内容" :maxlength="-1" :autoHeight="false" height="200">
					</u--textarea>
				</view>
			</view>
			<view class="imgbox_tishi" v-if="value1==''&&texttf">
				请填写内容
			</view>
			<u-button type="primary" text="提交" @click="submit" style="margin-top: 30rpx;"></u-button>
		</view>
		<!-- <kps-image-cutter @ok="onok" @cancel="oncancle" :url="kpsurlL" :fixed="false" :blob="false" :maxWidth="500"
			:maxHeight="500"></kps-image-cutter> -->
	</view>
</template>

<script>
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		data() {
			return {
				weatherdatas: {
					temp: ""
				},
				rules: {
					'temp': {
						type: 'string',
						max: 20,
						required: true,
						message: '请填写事项(字数最多20字)',
						trigger: ['blur', 'change'],
					},
				},
				urllist: [],
				value1: "",
				kpsurlL: "",
				imgtf: false,
				texttf: false
			}
		},
		components: {
			kpsImageCutter
		},
		watch: {
		 urllist(newName, oldName) {
				console.log(this.urllist)
				if (this.urllist != 0) {
					this.imgtf = false
				}
			},
			value1() {
				if (this.value1 != '') {
					this.texttf = false
				}
			},
			videoData(news, old) {
				console.log('触发了2222222222222222222222')
				console.log(news)
				uni.switchTab({
					url: '../response/index'
				})
				// if (news) {
				// }
			},
		},
		computed: {
			// 视频消息
			videoData() {
				return this.$store.state.video
			},
		},
		methods: {
			gainimg() { //添加图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: (res) => {
						console.log(res)
						// this.urllist.push(res.tempFilePaths[0])
						// this.kpsurlL = res.tempFilePaths[0]
						this.onok({ path: res.tempFilePaths[0] })
					}
				});
			},
			oncancle() {
				this.kpsurlL = ""
			},
			onok(ev) {
				uni.uploadFile({
					url: this.baseUrl +
					'/api/api_gateway?method=monitor_manage.cbd_manage.add_img', //仅为示例，非真实的接口地址
					filePath: ev.path,
					name: 'img_file',
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).data.src)
						this.urllist.push(JSON.parse(uploadFileRes.data).data.src)
						this.kpsurlL = ""
					}
				});
			},
			submit() {
				this.$refs.form1.validate().then(res => {
					// this.alterpass()
					if (this.urllist.length == 0) {
						this.imgtf = true
					} else if (this.value1 == '') {
						this.texttf = true
					} else {
						var objlist = JSON.parse(JSON.stringify(this.$store.state.addobj))
						var obj = {
							name: this.weatherdatas.temp,
							imglist: this.urllist,
							text: this.value1
						}
						// var arr = []
						console.log(objlist)
						objlist.push(obj)
						this.$store.state.addobj = objlist
						uni.navigateBack({
							delta: 1
						})
						// uni.setStorage({
						// 	key:"addobj",
						// 	data:JSON.stringify(obj),
						// 	success(res) {
						// 		uni.navigateBack({
						// 			delta:1
						// 		})
						// 	}
						// })
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			deleimg(index) {
				this.urllist.splice(index, 1)
			}
		},
		onLoad() {
			console.log(this.baseUrl)
		}

	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f7f7f7;
	}

	.context_box {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 40rpx;

		/deep/.u-form-item__body {
			border-bottom: 1px solid #F6F6F6;
			margin-bottom: 20rpx;
		}

		.imgbox {
			width: 100%;
			display: flex;
			margin-top: 30rpx;

			.title {
				font-size: 30rpx;
				width: 160rpx;
			}

			.imgbox_box {
				display: flex;
				flex-wrap: wrap;
				width: 80%;

				// justify-content: space-around;
				.addimg {
					width: 140rpx;
					height: 140rpx;
					border: 1px dashed #409eff;
					// text-align: center;
					display: flex;
					justify-content: space-around;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
				}

				.imgitem {
					width: 140rpx;
					height: 140rpx;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					position: relative;

					.icon {
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						z-index: 9;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						display: flex;
						justify-content: space-around;
						background-color: red;
					}

					.img {
						width: 100%;
						height: 100%;
						// border: 1px solid #409eff;
					}
				}
			}
		}

		.imgbox_tishi {
			padding-left: 160rpx;
			font-size: 24rpx;
			color: red;
		}

		.describe_box {
			width: 100%;
			display: flex;
			margin-top: 30rpx;
			margin-bottom: 30rpx;

			.title {
				font-size: 30rpx;
				width: 160rpx;
			}

			.textarea {
				width: 80%;
			}
		}
	}
</style>