OfficeApp/components/newArchives/breeding.vue

<template>
  <view class="">
    <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
      <block v-for="(item, index) in formData.breedingList">
        <u-form-item labelWidth="auto" label="耕地总面积" required prop="" borderBottom>
          <u--input placeholder="请输入耕地总面积"></u--input>
        </u-form-item>
        <picker :range="landPlanList" mode="selector" @change="changeLanPlan" :data-index="index">
          <u-form-item labelWidth="auto" label="土地规划" required prop="" borderBottom>
            <u--input v-model="item.landPlan" placeholder="请选择规划" disabled disabledColor="#fff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </picker>
        <u-form-item labelWidth="auto" label="有无种养殖培训" required prop="sex" borderBottom>
          <u-radio-group v-model="formData.sex" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无注册成立种植公司" required prop="sex" borderBottom>
          <u-radio-group v-model="formData.sex" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" labelPosition="top" label="备注" required prop="" borderBottom>
          <u--textarea v-model="item.course" autoHeight placeholder="请输入备注" border="surround" count></u--textarea>
        </u-form-item>
        <u-form-item labelWidth="auto" label="种养殖类型" required prop="" borderBottom>
          <u--input placeholder="请输入种养殖类型"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="面积" required prop="" borderBottom>
          <u--input placeholder="请输入面积"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="种养殖开始时间" required prop="" borderBottom>
          <u--input placeholder="请输入种养殖开始时间"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="上市时间" required prop="" borderBottom>
          <u--input placeholder="请输入上市时间"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="产量" required prop="" borderBottom>
          <u--input placeholder="请输入产量"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="预计收益" required prop="" borderBottom>
          <u--input placeholder="请输入预计收益"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="农资农具收益情况" required prop="" borderBottom>
          <u--input placeholder="请输入农资农具收益情况"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="是否生态种养殖" required prop="sex" borderBottom>
          <u-radio-group v-model="formData.sex" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="现代化程度" required prop="" borderBottom>
          <u--input placeholder="请输入现代化程度"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="预售卖价格" required prop="" borderBottom>
          <u--input placeholder="请输入预售卖价格"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="销售方式" required prop="sex" borderBottom>
          <u-radio-group v-model="formData.sex" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'自销'},{value:0,label:'定点销售'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无加工仓储" required prop="sex" borderBottom>
          <u-radio-group v-model="formData.sex" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无宣传推广" required prop="sex" borderBottom>
          <u-radio-group v-model="formData.sex" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无运输" required prop="sex" borderBottom>
          <u-radio-group v-model="formData.sex" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <button type="primary" v-if="formData.breedingList.length>1" class="delete"
          @click="removeBreedingList(index)">删除以上种养殖信息</button>
      </block>
      <button type="primary" class="plus" @click="pushBreedingList">+</button>

      <u-form-item labelWidth="auto" label="是否有扩大经营需求" required prop="sex" borderBottom>
        <u-radio-group v-model="formData.sex" style="margin: 16rpx;">
          <u-radio :customStyle="{marginRight: '16px'}"
            v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
            :name="item.value">
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item labelWidth="auto" labelPosition="top" label="种养殖需求描述" required prop="" borderBottom>
        <u--textarea autoHeight placeholder="请输入种养殖需求描述" border="surround" count></u--textarea>
      </u-form-item>
      <u-form-item labelWidth="auto" labelPosition="top" label="政策补助" required prop="" borderBottom>
        <u--textarea autoHeight placeholder="请输入政策补助" border="surround" count></u--textarea>
      </u-form-item>
    </u--form>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        landPlanList: ['自己种养', '出租', '代种养', '租更多地扩大种植'],
        formData: {
          breedingList: [{
            landPlan: '', //土地规划
          }, ]
        },
        rules: {

        }
      }
    },
    methods: {
      // 选择土地规划
      changeLanPlan(e) {
        let index = e.currentTarget.dataset.index;
        this.formData.breedingList[index].landPlan = this.landPlanList[e.detail.value];
      },
      // 新增种养殖
      pushBreedingList() {
        this.formData.breedingList.push({
            landPlan: '', //土地规划
          })
      },
      // 删除种养殖
      removeBreedingList(index) {
        uni.showModal({
          confirmColor: '#f56c6c',
          content: '确定删除吗?',
          success: (res) => {
            if (res.confirm) {
              this.formData.breedingList.splice(index, 1);
            }
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  .delete {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 54rpx;
    line-height: 54rpx;
    background: #f56c6c;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .plus {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 54rpx;
    line-height: 54rpx;
    background: $theme-oa-color;
    border-radius: 14rpx;
    color: #fff;
    text-align: center;
  }
</style>