TraceabilityAPP/components/InformationAdd/plant.vue

<template>

	<view class="card">
		<view class="card-li tit">
			<view class="">
				土地
			</view>
			<view style="color: #00A15E;font-weight: bold;">
				未种植
			</view>
		</view>
		<view class="card-li tit">
			<view class="">
				面积: 10亩
			</view>
		</view>
	</view>
	<view class="card">
		<view class="card-li">
			<view class="card-li-tit">
				种植品牌
			</view>
			<view class="">
				<up-input placeholder="请输入品种" border="surround" v-model="formData.crop_name"></up-input>
			</view>
		</view>
		<view class="card-li">
			<view class="card-li-tit">
				具体品种
			</view>
			<view class="">
				<up-input placeholder="请输入品种" border="surround" v-model="formData.crop_variety"></up-input>
			</view>
		</view>
		<view class="card-li">
			<view class="card-li-tit">
				种子品牌
			</view>
			<view class="">
				<up-input placeholder="请输入品种" border="surround" v-model="formData.crop_brand"></up-input>
			</view>
		</view>
		<view class="card-li">
			<view class="card-li-tit">
				种子收购时间
			</view>
			<view class="">
				<up-input placeholder="点击输入时间" border="surround" v-model="formData.crop_buy_time"
					@focus="showDatePicker=true"></up-input>
			</view>
		</view>
		<view class="card-li">
			<view class="card-li-tit">
				上传播种图片
			</view>
			<view class="code-img">
				<view class="" @click="updateImgFn">
					<view class="" v-if="formData.pic">
						<u--image :src="formData.pic" 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>


	</view>

	<!-- <view class="up-img confim-btn">
		+上传播种图片
	</view> -->
	<view class="today-btn confim-btn" @tap="sowFn">
		今日播种
	</view>

	<!-- 组件 -->
	<u-notify ref="uNotify" message="Hi uview-plus"></u-notify>
	<view class="">
		<up-calendar :closeOnClickOverlay='true' :show="showDatePicker" @confirm="confirm"
			@close="showDatePicker=false"></up-calendar>
	</view>
</template>

<script setup>
	import {
		AddlandInfoAPI
	} from "@/api/plant.js"
	import uplodeImg from "@/utils/uplodeImg.js"

	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		userInfoStore
	} from '@/store/userInfo'
	const userInfo = userInfoStore()

	const uNotify = ref()
	const show = ref(false)
	const showDatePicker = ref(false)

	const formData = reactive({
		user_id: userInfo.user_id,
		land_id: "",
		crop_name: "",
		crop_variety: "",
		crop_brand: "",
		crop_buy_time: "",
		pic: ""

	})
	const confirm = (e) => {
		console.log(e[0])
		formData.crop_buy_time = e[0]
		showDatePicker.value = false
	}
	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}
	const updateImgFn = async () => {
		let res = await uplodeImg()
		formData.pic = res.data.image
		// console.log(res.data)
	}
	const sowFn = async () => {

		let res = await AddlandInfoAPI({
			...formData
		})
		setTimeout(() => {
			uni.navigateTo({
				url: "/pages/index/index"
			})
		}, 2000)

		// show.value = true
		// uNotify.value.primary('Primary主题')
		// navgo('/pages/detail/plant')
	}
	onLoad((options) => {

		formData.land_id = options.land_id
	})
</script>

<style lang='scss' scoped>
	.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;
		}

	}
</style>