cultivationApp/pages/husbandryForm/sow.vue

<template>
	<!-- 播种 -->
	<view class="content">
		<view class="card">
			<u--form labelPosition="top" labelWidth='100' :model="formData" :rules="rules" ref="form">
				<u-form-item label="种植种类" prop="formData.breed" borderBottom ref='item1' required>
					<up-input placeholder="请输入种植种类" :disabled="mode=='detail'" border="surround"
						v-model="formData.breed"></up-input>
				</u-form-item>
				<u-form-item label="种植品种" prop="formData.breed" borderBottom required>
					<up-input placeholder="请输入品种" :disabled="mode=='detail'" border="surround"
						v-model="formData.breed"></up-input>
				</u-form-item>
				<u-form-item label="开始日期" prop="formData.breed" borderBottom required>
					<up-input placeholder="请选择日期" @blur="openDate" :disabled="mode=='detail'" border="surround"
						v-model="formData.breed"></up-input>
				</u-form-item>
				<u-form-item label="作业地块" prop="formData.breed" borderBottom required>
					<up-input placeholder="请输入作业地块" :disabled="mode=='detail'" border="surround"
						v-model="formData.breed"></up-input>
				</u-form-item>
				<u-form-item label="种植面积" prop="formData.breed" borderBottom required>
					<up-input placeholder="请输入种植面积" :disabled="mode=='detail'" type="number" border="surround"
						v-model="formData.breed"></up-input>
				</u-form-item>
				<u-form-item label="参与人" prop="formData.breed" borderBottom required>
					<up-input placeholder="请输入参与人" :disabled="mode=='detail'" type="number" border="surround"
						v-model="formData.breed"></up-input>
				</u-form-item>
				<view class="card-li">
					<view class="card-li-tit">
						种植图片
					</view>
					<view class="code-img">
						<view class="" @click="updateImgFn">
							<view class="" v-if="formData.buy_cert">
								<u--image :src="formData.buy_cert" width="637.85rpx" height="350.47rpx"></u--image>
							</view>
							<view class="carime-icon" v-else>
								<u--image src="/static/img/DJSC.png" width="91.12rpx" height="91.12rpx"></u--image>
								<view class="">
									点击上传图片
								</view>
							</view>

						</view>
					</view>
				</view>
				<u-form-item label="备注" prop="formData.breed" borderBottom required>
					<u--textarea v-model="formData.breed" :disabled="mode=='detail'" placeholder="请输入内容"></u--textarea>
				</u-form-item>

			</u--form>
			<view>
				<uni-calendar ref="calendar" :showMonth="true" :lunar="true" :insert="false" @confirm="dateConfirmfn" />

			</view>
		</view>


		<view class="confirm" v-if="mode=='add'">
			<view class="confirm-btn" style="color: white;background-color: #0AA565;" @click="addFn">
				完成添加
			</view>

		</view>



	</view>

</template>

<script setup>
	import uplodeImg from "@/utils/uplodeImg.js"
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"

	const calendar = ref(null)
	const form = ref(null)
	const openDate = () => {
		calendar.value.open()
	}
	// console.log()
	const formData = reactive({

		breed: ""

	})
	const dateConfirmfn = (e) => {
		console.log(e)
	}
	const rules = {
		'formData.breed': {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change']
		},
	}
	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}
	const addFn = () => {
		form.value.validate().then(res => {
			console.log(6)
		}).catch(errors => {
			uni.$u.toast('校验失败')
		})
		console.log()
		return
		this.$refs.uForm.validate().then(res => {
			uni.$u.toast('校验通过')
		}).catch(errors => {
			uni.$u.toast('校验失败')
		})
		navgo('/pages/index/index')
	}

	const updateImgFn = async () => {
		if (mode.value == 'detail') return
		let res = await uplodeImg()
		formData.buy_cert = res.data.image
	}
	const mode = ref('add')
	onLoad((options) => {
		if (options.task_id) {
			mode.value = "detail"
		}

	})
</script>

<style lang='scss' scoped>
	.content {
		padding-bottom: 100rpx;
	}

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

	.card-li-tit {
		margin-bottom: 20rpx;
	}

	.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>