TraceabilityAPP/pages/husbandryForm/sow.vue

<template>
	<!-- 播种 -->
	<view class="content">
		<view class="card">
			<u-form labelWidth='100' :model="data.formData" ref="form1">
				<view class="c-title">种植信息</view>
				<view class="c-box">
					<u-form-item label="种植种类" prop="kind" borderBottom ref='item1' required>
						<up-input input-align="right" placeholder="请输入种类" :disabled="mode=='detail'" border="none"
							v-model="data.formData.kind"></up-input>
					</u-form-item>
					<u-form-item label="种植品种" prop="breed" borderBottom required>
						<up-input input-align="right" placeholder="请输入品种" :disabled="mode=='detail'" border="none"
							v-model="data.formData.breed"></up-input>
					</u-form-item>
					<u-form-item label="种植面积(亩)" prop="area" borderBottom required>
						<up-input input-align="right" placeholder="请输入种植面积" :disabled="mode=='detail'" type="number"
							border="none" v-model="data.formData.area"></up-input>
					</u-form-item>
					<u-form-item label="参与人员" prop="user" borderBottom required>
						<up-input input-align="right" placeholder="请输入参与人姓名" :disabled="mode=='detail'" type="txt"
							border="none" v-model="data.formData.user"></up-input>
					</u-form-item>
					<u-form-item label="种植开始日期" prop="date" borderBottom required @click="openDate">
						<up-input input-align="right" placeholder="请选择日期" suffixIcon="arrow-down"
							suffix-icon-style="color: #b6b6b6;" readonly border="none" v-model="data.formData.date"
							style="pointer-events: none;"></up-input>
					</u-form-item>
				</view>

				<view class="card-li">
					<view class="c-title">种植图片</view>
					<view class="c-box c-box-p">
						<view class="code-img1">
							<view class="" v-if="pic.length>0"
								style="display: flex;flex-direction: row;flex-wrap: wrap;margin-bottom: 30rpx;">
								<view class="" v-for="(item,i) in pic" style="margin-right: 30rpx;">
									<view class="">
										<u-icon name="close" size="15" style="margin-left:120.85rpx;" @click="delimg(i)"
											v-show="mode=='add'"></u-icon>
										<u-image :src="item" width="150.85rpx" height="150.85rpx"
											@click="perviewFn(item)"></u-image>
									</view>
								</view>
							</view>

						</view>
						<view class="code-img">
							<view class="" @click="updateImgFn">
								<view class="carime-icon">
									<u-image src="/static/main/index/upload.png" width="82rpx" height="68rpx"></u-image>
									<view class="" style="font-weight: 500;margin-top: 20rpx;">
										点击上传图片
									</view>
								</view>

							</view>

						</view>
					</view>
				</view>

				<view class="c-title">备注信息</view>
				<view class="c-box" style="padding: 0 20rpx;">
					<u-form-item borderBottom>
						<u--textarea v-model="data.formData.remark" :disabled="mode=='detail'"
							placeholder="请输入内容"></u--textarea>
					</u-form-item>
				</view>

			</u-form>
			<view>
				<!-- <uni-calendar ref="calendar" :showMonth="true" :lunar="true" :insert="false" @confirm="dateConfirmfn" /> -->
				<u-datetime-picker :show="show" v-model="value1" :maxDate="getNowTime()" mode="date"
					@confirm="dateConfirmfn" :formatter="formatter" @cancel="show=false"></u-datetime-picker>
			</view>

			<u-button class="btn" v-if="mode=='add'" style="font-size: 32rpx;" @click="addFn">添加</u-button>
		</view>
	</view>

</template>

<script setup>
	import {
		Uploads
	} from "@/api/upload.js"
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"

	import {
		addplant
	} from '@/api/api.js'

	const calendar = ref(null)
	const form1 = ref(null);
	const task_id = ref('');
	const pic = reactive([]);
	const value1 = ref(Date.now());
	const show = ref(false);
	const data = reactive({
		formData: {

			kind: '',
			breed: '',
			area: '',
			user: '',
			date: '',
			remark: '',
			pic: []
		},
		rules: {
			kind: [{
				type: 'string',
				required: true,
				message: '请填写种植种类',
				trigger: ['blur', 'change']
			}],
			breed: [{
				type: 'string',
				required: true,
				message: '请填写种植品种',
				trigger: ['blur', 'change']
			}],
			area: [{
				type: 'string',
				required: true,
				message: '请填写种植面积',
				trigger: ['blur', 'change']
			}],
			user: [{
				type: 'string',
				required: true,
				message: '请填写参与人员',
				trigger: ['blur', 'change']
			}],
			date: [{
				type: 'string',
				required: true,
				message: '请填写开始日期',
				trigger: ['blur', 'change']
			}]

		}
	})



	onReady(() => {
		form1.value.setRules(data.rules);
	});

	const openDate = () => {
		// calendar.value.open()
		show.value = true
	}
	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`;
		}
		if (type === 'month') {
			return `${value}月`;
		}
		if (type === 'day') {
			return `${value}日`;
		}
		return value;
	};

	const dateConfirmfn = (e) => {
		data.formData.date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
		show.value = false
	}

	//图片删除
	const delimg = (i) => {
		pic.splice(i, 1);
	}

	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}
	//查看图片
	const perviewFn = (url) => {
		console.log(url)
		uni.previewImage({
			urls: [url]
		})
	}
	const addFn = async () => {
		console.log(form1.value)

		try {
			const valid = await form1.value.validate();


			if (valid) {
				data.formData.land_id = task_id.value
				console.log('表单通过');
				if (pic.length == 0) {
					uni.$u.toast('请上传图片')
					return
				}
				data.formData.pic = JSON.stringify(pic)

				// 表单验证通过，执行提交操作
				addplant(data.formData).then((res) => {

					if (res.code == 1) {

						uni.navigateBack({
							delta: 1
						})
						uni.$u.toast(res.msg)
					}
				})
			} else {
				// 表单验证不通过
				console.log('表单验证未通过');
			}
		} catch (error) {
			// 捕获验证过程中的错误
			console.error(error);
		}



		// form.value.validate().then(res => {
		// 	console.log(6)
		// }).catch(errors => {
		// 	uni.$u.toast('校验失败')
		// })
		// console.log()

	}
	//图片上传
	const updateImgFn = async () => {

		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				Uploads(res.tempFilePaths[0], 'img').then(res => {
					console.log(res)
					if (res.code == 1) {

						pic.push(res.data.url)

						console.log(pic)
						uni.$u.toast('上传成功')


					}



				}).catch(err => {
					//console.log('err', err);
					// uni.$u.toast('上传失败')
				})
			},
			fail: function(err) {
				//console.log('choose失败');
				uni.$u.toast('添加失败')
			}
		});
		// let res = await Uploads()
		// data.formData.pic = res.data.image
	}

	const mode = ref('add')

	const getNowTime = () => {
		const now = new Date();

		now.setHours(0, 0, 0, 0);

		const timestamp = now.getTime();
		// console.log(timestamp)
		return timestamp

	}
	onLoad((options) => {
		task_id.value = options.id
		// if (options.task_id) {
		// 	mode.value = "detail"
		// }

	})
</script>

<style lang='scss' scoped>
	page {
		background-color: #f7fffc;

	}

	.card {
		background-color: #f7fffc;
		padding: 0;
		padding-bottom: 80rpx;

		.c-title {
			font-weight: bold;
			display: flex;
			align-items: center;
			padding: 30rpx;
			padding-bottom: 15rpx;

			&:before {
				content: '';
				display: inline-block;
				height: 0.8rem;
				width: 6rpx;
				margin-top: 0.2rem;
				margin-right: 10rpx;
				background-color: #35d190;
				border-radius: 6rpx;
			}
		}

		.c-box {
			background-color: #fff;
			padding-left: 30rpx;
			padding-right: 20rpx;
			padding-bottom: 20rpx;
			box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
		}

		.c-box-p {
			padding: 20rpx;
		}

		.btn {
			margin: 20rpx auto;
			width: 694rpx;
			height: 80rpx;
			border-radius: 80rpx;
			background-color: #4ad69b;
			color: #fff;
		}
	}

	.tit {
		display: flex;
		justify-content: space-between;
	}

	.card-li {
		position: relative;
		margin-bottom: 0;

		span {
			position: absolute;
			left: -9px;
			color: #f56c6c;
			line-height: 20px;
			font-size: 20px;
			top: 3px;
		}

	}

	.confim-btn {
		margin: 0 auto;
		width: 196.26rpx;
		height: 66.59rpx;
		/* border: ; */
		border: #00A15E 1px solid;
		color: #00A15E;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
	}

	.up-img {
		width: 341.71rpx
	}

	.today-btn {
		width: 588.79rpx;
		background-color: #00A15E;
		color: white;
		position: fixed;
		bottom: 40rpx;
		/* transform: ; */
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(to right, #00A15E, #4CC593);
		/* margin: 0 auto; */
	}

	.code-img {
		background-color: #F4F4F4;
		height: 350.47rpx;
		position: relative;
		/* margin-bottom: 100rpx; */

		.carime-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
		}

	}

	.confirm {
		position: fixed;
		height: 84.11rpx;
		display: flex;
		bottom: 30rpx;
		width: 750rpx;

		.confirm-btn {
			width: 315.42rpx;
			height: 84.11rpx;
			border: #00A15E 1px solid;
			margin: 0 auto;
			border-radius: 80rpx;
			text-align: center;
			line-height: 84rpx;
		}
	}
</style>