zhdt-miniapp/pages/data-filled/index.vue

<template>
	<view class="home">
		<cu-custom class="home-custom" bgColor=".bg-sancolor" bgImage="../../static/icons/bg.png" :isBack="true">
			<block slot="content">皖监测</block>
		</cu-custom>
		<view>
			<view class="cu-list menu content-box">
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						<text class="cuIcon-title text-green"></text>
						<text>优质农产品监测与评价</text>
						<span class="filled-instro" data-target="Modal" @tap="filledButton">（填写说明）</span>
					</view>
				</view>
				<form>
					<view class="cu-form-group ">
						<view class="title">1.基地名称</view>
						<input placeholder="请输入基地名称" name="input" ></input>
					</view>
					<!-- <view class="cu-form-group ">
						<view class="title">基地类型</view>
						<input placeholder="请输入基地类型" name="input"></input>
						<button class='cu-btn bg-green shadow'>＋</button>
					</view>
					 -->
					<view class="cu-form-group "  v-for="(item, index) in jdlx">
						<view class="title">2.基地类型</view>
						<picker @change="PickerChange" :value="item.index" :range="picker" v-model="item.name">
							<view class="picker">
								{{index>-1?picker[item.index]:'选择基地类型'}}
							</view>
						</picker>
						
					</view>	
					<!-- <button class='cu-btn bg-green' @tap="addJdlx" style="margin-left: 5px;">＋</button> -->
					<view class="padding flex flex-direction">
					  <button class="cu-btn bg-grey lg"  @tap="addJdlx">添加多个基地类型</button>
					</view>
					
					<view  v-for="(item, index) in product">
					<view class="cu-form-group margin-top">
						<view class="title">3.主要产品</view>
						<input placeholder="请输入主要产品" name="input" ></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">4.基地规模</view>
						<input placeholder="请输入基地规模" name="input"></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">5.产品产量</view>
						<input placeholder="请输入产品产量" name="input"></input>
						<view>公斤</view>
					</view>
					<view class="cu-form-group ">
						<view class="title">6.产品产值</view>
						<input placeholder="请输入产品产值" name="input"></input>
						<view>元</view>
					</view>
					<view class="cu-form-group ">
						<view class="title">7.产品分类</view>
						<picker @change="PickerCategoryChange"   :range="category">
							<view class="picker">
								{{indexCategory>-1?category[item.index]:'选择产品分类'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group ">
						<view class="title">单位</view>
						<input placeholder="请输入产品单位" name="input"></input>
					</view>
					</view>
					
					<view class="padding flex flex-direction">
					  <button class="cu-btn bg-grey lg"  @tap="addProduct">添加多个产品</button>
					</view>
					
					<view class="cu-form-group margin-top">
						<view class="title">8.社会信用代码</view>
						<input placeholder="请输入产品产量" name="input"></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">9.主要联系人</view>
						<input placeholder="请输入姓名" name="input"></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">10.联系电话</view>
						<input placeholder="请输入11位手机号" name="input"></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">11.行政区划</view>
						<input placeholder="请输入行政区划" name="input"></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">12.基地地址</view>
						<input placeholder="请输入基地详细地址" name="input"></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">13.证书编号</view>
						<input placeholder="请输入证书编号" name="input"></input>
					</view>
					<view class="cu-form-group ">
						<view class="title">14.证书有效期</view>
						<input placeholder="请输入证书有效期" name="input"></input>
					</view>
				</form>
				
				<view class="padding flex flex-direction">
				  <button class="cu-btn bg-green  lg">保存</button>
				</view>
			</view>
			
			<view class="cu-modal" :class="modalName=='Modal'?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">填写说明</view>
								<view class="action" @tap="hideModal">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl" style="text-align: left;">
								<view><span class="filled-name">1.基地名称：</span>录入基地的准确全称。有固定名称的，填写须与基地取得相关认证登记证书上的名称一致;无固定名称的，按“基地主体+所在乡镇+基地名称”格式填写。</view>
								<view><span class="filled-name">2.基地类型：</span>分为绿色食品生产基地、有机农产品生产基地、地理标志农产品核心生产基地、良好农业规范认证生产基地、全程质量控制生产基地、名特优新农产品生产基地、绿色食品原料标准化生产基地、省级绿色优质农产品生产基地8个类型。如有多个类型，需逐个录入。</view>
								<view><span class="filled-name">3.主要产品：</span>录入该基地生产的主要农产品名称。如有多种产品，需逐个录入。</view>
								<view><span class="filled-name">4.基地规模：</span>依据产品名称，分别录入应对产品规模。</view>
								<view><span class="filled-name">5.产品产量：</span>上一年度产品产量，公斤。</view>
								<view><span class="filled-name">6.产品产值：</span>上一年度产品产值，元。</view>
								<view><span class="filled-name">7.产品分类及单位：</span>①种植类，填写该基地实际种植面积，单位为亩;②畜禽类，填写该基地对应畜禽当前的存栏量，其中猪、牛、羊单位为头，鸡单位为只;③水产类，填写该基地水产品养殖面积，单位为亩。④其他类,指未列入选项的产品品种，单位由县级根据实际品种确定。</view>
								
								<view><span class="filled-name">8.社会信用代码/身份证：</span>优先录入主体统一社会信用代码，无统一社会信用代码的，可以录入主体身份号码。如农户或者家庭农场主体可填写身份证号码。</view>
								<view><span class="filled-name">9.主要联系人：</span>基地联系人姓名。。</view>
								<view><span class="filled-name">10.联系电话：</span>录入11位电话号码。</view>
								<view><span class="filled-name">11.行政区划：</span>录入对应的行政区划全称，可查看行政区域字典表。如为直管市、直管县，则两级录入同一个名称。</view>
								<view><span class="filled-name">12.基地地址：</span>录入基地详细地址。如:红岩村濮岩路219号。</view>
								<view><span class="filled-name">13.证书编号：</span>录入对应产品的证书编号。</view>
								<view><span class="filled-name">14.证书有效期：</span>为证书有效期开始日期、截止日期，按照对应证书有效期限填写。</view>
								
							</view>
						</view>
					</view>
		</view>
		</view>
</template>


<script>
	// import {_dataFilleds} from'./data-filled-model.js'
	export default {

		data() {
			return {
				sampleDetailInfo: null,
				input_diabled: false,
				modalName: null,
				
				indexCategory:0,
				picker: ['绿色食品生产基地','有机农产品生产基地','地理标志农产品核心生产基地','良好农业规范认证生产基地','全程质量控制生产基地','名特优新农产品生产基地','绿色食品原料标准化生产基地','省级绿色优质农产品生产基地'],
				category:['种植类','畜禽类','水产类','其他类'],
				jdlx:[
					{
						name:'',
						index: 0
					}
				],
				product:[{
					zycp: '',
					jdgm: '',
					cpcl: '',
					cpcz: '',
					cpfl: '',
					dw: '',
					index:0
				}]
			}
		},

		created() {

		},
		onLoad(options) {

		},

		mounted() {

		},
		methods: {
			filledButton(e){
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			PickerCategoryChange(e){
				this.indexCategory = e.detail.value
			},
			addJdlx(){
				this.jdlx.push({
					name:''
				})
			},
			addProduct(){
				this.product.push({
					zycp: '',
					jdgm: '',
					cpcl: '',
					cpcz: '',
					cpfl: '',
					dw: ''
				})
			}
			// rediectHome(){
			//    uni.redirectTo({
			//    	url:'/pages/index/index'
			//    })	
			// },
			// toSampleInfoList(id){
			// 	uni.navigateTo({
			// 		url:'/pages/sample-info-list/index?id='+id
			// 	})
			// },
			// getSampleInfoDetail(id){
			// 	_dataFilleds.getAhSampleSheetDetail(id,res=>{
			// 		console.log(res)
			// 		this.sampleDetailInfo = res.data.data
			// 	})
			// },
			// saveSampleInfoList(){
			// 	console.log(11)
			// }
		}
	}
</script>

<style scoped>
/* 	.content {
		padding: 10px;
	}

	.content-box {
		margin: 10px;
		border-radius: 5px;
	} */
	.filled-instro{
		color: cadetblue;
		text-decoration:underline;
	}
	.filled-name{
		font-weight: bold;
	}
</style>