nsgk_mobile/src/views/homesteadSurvey/add.vue

<template>
  <div class="app-container">
    <div class="bannerBg">
      <van-nav-bar
        style="background:transparent;border-bottom-width:0;height:150px"
        @click-left="goBack()"
      >
        <template #left>
          <van-icon name="arrow-left" size="18" color="#fff" />
        </template>
        <template #right>
          <van-icon name="map-marked" size="18" color="#fff" />
        </template>
        <template #title>
          <p style="color:#fff">{{item.zjddm?"":"新增"}}入户调查</p>
        </template>
      </van-nav-bar>
    </div>
    <div style="background:#fff;border-radius:15px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);padding: 20px;
    margin: 20px;margin-top:-70px;">
      <van-row>
        <van-col span="4" :offset="1" style="text-align:center;" @click="active=1">
          <van-icon :name="require('../../assets/images/housesteadSurvey/zjd'+(active==1?'A':'D')+'.png')" size="80px" style="margin-top:0px;"/>
          <p :style="{color:(active==1?'rgb(34, 183, 242)':'#000')}">宅基地</p>
        </van-col>
        <van-col span="2">
          <div style="height: 2px; border: 2px dashed #b5b4b4;margin-top: 40px;"></div>
        </van-col>
        <van-col span="4"  style="text-align:center;" @click="active=2,getSyqrList()">
          <van-icon :name="require('../../assets/images/housesteadSurvey/nhxx'+(active==2?'A':'D')+'.png')" size="80px" style="margin-top:0px;"/>
          <p :style="{color:(active==2?'rgb(34, 183, 242)':'#000')}">农户信息</p>
        </van-col>
        <van-col span="2">
          <div style=" height: 2px; border: 2px dashed #b5b4b4;margin-top: 40px;"></div>
        </van-col>
        <van-col span="4" style="text-align:center;" @click="active=3,getZrzList()">
          <van-icon :name="require('../../assets/images/housesteadSurvey/fwxx'+(active==3?'A':'D')+'.png')" size="80px" style="margin-top:0px;"/>
          <p  :style="{color:(active==3?'rgb(34, 183, 242)':'#000')}">房屋信息</p>
        </van-col>
        <van-col span="2">
          <div style=" height: 2px; border: 2px dashed #b5b4b4;margin-top: 40px;"></div>
        </van-col>
        <van-col span="4" style="text-align:center;" @click="active=4,getFsssList()">
          <van-icon :name="require('../../assets/images/housesteadSurvey/fsss'+(active==4?'A':'D')+'.png')" size="80px" style="margin-top:0px;"/>
          <p :style="{color:(active==4?'rgb(34, 183, 242)':'#000')}">附属设施</p>
        </van-col>
      </van-row>
    </div>
    <div v-if="active==1">
      <div style="margin:20px;">
        <van-form @submit="onSubmitzjd">
          <p class="title" style="position:relative;padding-left:20px;line-height:32px;">宅基地信息</p>
          <!--<van-field
            v-model="form.deptId"
            name="行政区划名称"
            label="行政区划名称"
            placeholder="行政区划名称"
            :rules="[{ required: true, message: '' }]"
          />-->
          <van-field
            v-model="form.suyqrdm"
            name="所有权人代码"
            label="所有权人代码"
            placeholder="所有权人代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form.zjddm"
            name="宅基地代码"
            label="宅基地代码"
            placeholder="宅基地代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field name="radio" label="是否发证">
            <template #input>
              <van-radio-group v-model="form.sffz" direction="horizontal">
                <van-radio name="Y">是</van-radio>
                <van-radio name="N">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="form.yt"
            name="用途"
            label="用途"
            placeholder="用途"
          />
          <van-field
            v-model="form.zjdzsh"
            name="宅基地证书号"
            label="宅基地证书号"
            placeholder="宅基地证书号"
          />
          <van-field
            v-model="form.zjdpzmj"
            name="宅基地批准面积"
            label="宅基地批准面积"
            placeholder="宅基地批准面积"
          />
          <van-field
            v-model="form.zdmj"
            type="form.zdmj"
            name="宗地面积"
            label="宗地面积"
            placeholder="宗地面积"
          />
          <van-field
            v-model="form.zdbh"
            name="宗地代码"
            label="宗地代码"
            placeholder="宗地代码"
          />
          <van-field
            v-model="form.zl"
            name="坐落"
            label="坐落"
            placeholder="坐落"
          />
          <van-field
            v-model="form.zldwdm"
            name="坐落单位代码"
            label="坐落单位代码"
            placeholder="坐落单位代码"
          />
          <van-field
            v-model="form.zdszd"
            name="宗地四至-东"
            label="宗地四至-东"
            placeholder="宗地四至-东"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form.zdszn"
            name="宗地四至-南"
            label="宗地四至-南"
            placeholder="宗地四至-南"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form.zdszx"
            name="宗地四至-西"
            label="宗地四至-西"
            placeholder="宗地四至-西"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form.zdszb"
            name="宗地四至-北"
            label="宗地四至-北"
            placeholder="宗地四至-北"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form.lyzkName"
            name="当前利用状况"
            label="当前利用状况"
            placeholder="当前利用状况"
            @click="showlyzk = true"
          />
          <van-field
            v-model="form.lyzk"
            style="display:none"
          />
          <van-popup v-model="showlyzk" position="bottom">
            <van-picker
              show-toolbar
              :columns="lyzkOptions"
              value-key="dictLabel"
              @confirm="onConfirmlyzk"
              @cancel="showlyzk = false"
            />
          </van-popup>
          <van-field
            v-model="form.zjdxzyy"
            name="宅基地闲置原因"
            label="宅基地闲置原因"
            placeholder="宅基地闲置原因"
          />
          <van-field
            v-model="form.xzkssj"
            name="闲置开始时间"
            label="闲置开始时间"
            placeholder="闲置开始时间"
            @click="showPickerxzkssj = true"
          />
          <van-popup v-model:show="showPickerxzkssj" position="bottom">
            <van-datetime-picker
              type="date"
              @confirm="onConfirmxzkssj"
              @cancel="showPickerxzkssj = false"
            />
          </van-popup>
          <van-field name="radio" label="流转意向">
            <template #input>
              <van-radio-group v-model="form.lzyx" direction="horizontal">
                <van-radio name="1">有</van-radio>
                <van-radio name="0">无</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="有偿退出意向">
            <template #input>
              <van-radio-group v-model="form.yctcyx" direction="horizontal">
                <van-radio name="1">有</van-radio>
                <van-radio name="0">无</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="被惩处经历">
            <template #input>
              <van-radio-group v-model="form.bccjl" direction="horizontal">
                <van-radio name="1">有</van-radio>
                <van-radio name="0">无</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="form.bccbz"
            name="被惩处备注"
            label="被惩处备注"
            placeholder="被惩处备注"
          />
          <!--          <van-field
                      v-model="form.zjdqdfs"
                      name="宅基地取得方式"
                      label="宅基地取得方式"
                      placeholder="宅基地取得方式"
                      :rules="[{ required: true, message: '' }]"
                    />-->
          <van-field name="radio" label="宅基地取得方式">
            <template #input>
              <van-radio-group v-model="form.zjdqdfs" direction="horizontal">
                <van-radio v-for="dict in zjdqdfsOptions" :key="dict.dictValue" :name="dict.dictValue">{{dict.dictLabel}}</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <!--<van-field
            v-model="form.zjdxctp"
            name="宅基地现场照片"
            label="宅基地现场照片"
            placeholder="宅基地现场照片"
            :rules="[{ required: true, message: '' }]"
          />-->
          <van-field name="uploader" label="宅基地现场照片">
            <template #input>
              <van-uploader v-model="fileListzjd" :after-read="beforeReadzjd" multiple @delete="deleteFilezjd" :max-count="4"></van-uploader>
            </template>
          </van-field>
          <van-field
            v-model="form.ytmc"
            name="用途名称"
            label="用途名称"
            placeholder="用途名称"
          />
          <van-field
            v-model="form.dj"
            name="等级"
            label="等级"
            placeholder="等级"
          />
          <van-field
            v-model="form.jg"
            name="价格（万元）"
            label="价格（万元）"
            placeholder="价格（万元）"
          />
          <van-field
            v-model="form.qllx"
            name="权利类型"
            label="权利类型"
            placeholder="权利类型"
          />
          <van-field
            v-model="form.qlxz"
            name="权利性质"
            label="权利性质"
            placeholder="权利性质"
          />
          <van-field
            v-model="form.qlsdfs"
            name="权利设定方式"
            label="权利设定方式"
            placeholder="权利设定方式"
          />
          <van-field
            v-model="form.rjl"
            name="容积率"
            label="容积率"
            placeholder="容积率"
          />
          <van-field
            v-model="form.jzmd"
            name="建筑密度"
            label="建筑密度"
            placeholder="建筑密度"
          />
          <van-field
            v-model="form.zdt"
            name="宗地图"
            label="宗地图"
            placeholder="宗地图"
          />
          <van-field
            v-model="form.tfh"
            name="图幅号"
            label="图幅号"
            placeholder="图幅号"
          />
          <van-field
            v-model="form.djh"
            name="地籍号"
            label="地籍号"
            placeholder="地籍号"
          />
          <van-field
            v-model="form.sjlyName"
            name="数据来源"
            label="数据来源"
            placeholder="数据来源"
            input-align="right"
            @click="showsjly = true"
          />
          <van-field
            v-model="form.sjly"
            style="display:none"
          />
          <van-popup v-model="showsjly" position="bottom">
            <van-picker
              show-toolbar
              :columns="sjlyOptions"
              value-key="dictLabel"
              @confirm="onConfirmsjly"
              @cancel="showsjly = false"
            />
          </van-popup>
          <van-field
            v-model="form.bz"
            name="备注"
            label="备注"
            placeholder="备注"
          />
          <MapGisDrawing ref="drewingClickLoading" :message="form.theGeom" v-on:formSubmit="MapTag"></MapGisDrawing>
          <div style="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </div>
    <div v-if="active==2">
      <div style="margin:20px;">
        <p class="title" style="position:relative;padding-left:20px;line-height:32px;">使用权人</p>
      </div>
      <van-swipe-cell v-for="(item,index) in syqrlist" :key="'syqr'+index" style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px auto;background:#fff;">
        <div style="padding:20px;">
          <p style="color:#22B7F2;font-size:20px;line-height:30px;"><van-icon name="manager" color="#22b7f2" size="20" style="margin-right:10px;"/>刘茂强</p>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">证件号码</p>
            <p  style="flex:1;text-align:right;">4413215200216562255Z00026</p>
          </div>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">权利人类型</p>
            <p style="flex:1;text-align:right;">个人</p>
          </div>
          <div style="text-align:center;overflow:auto;">
            <van-button plain round color="#7AC943" size="mini" style="margin:0 auto;" @click="showPopupsyqr">查看使用权人信息</van-button>
          </div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>

      <div style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;background:#fff;padding:20px;">
        <div style="text-align:center;" >
          <p style="color:#22B7F2;font-size:20px;line-height:30px;" @click="showPopupsyqr"><van-icon name="plus" color="#22b7f2" size="20" style="margin-right:10px;"/>添加使用权人代表</p>
        </div>
      </div>
      <div style="position:fixed;bottom:50px;left:25%;width:50%;text-align:center;">
        <van-button round  size="small" color="#7AC943" style="width:40%" @click="changeActiveBack">上一项</van-button>
        <van-button round  size="small" color="#7AC943" style="width:40%" @click="changeActive">下一项</van-button>
      </div>
    </div>
    <div v-if="active==3">
      <div style="margin:20px;">
        <p class="title" style="position:relative;padding-left:20px;line-height:32px;">自然幢</p>
      </div>
      <van-swipe-cell v-for="(item,index) in zrzlist" :key="'zrz'+index" style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px auto;background:#fff;">
        <div style="padding:20px;">
          <p style="color:#22B7F2;font-size:20px;line-height:30px;"><van-icon name="wap-home" color="#22b7f2" size="20" style="margin-right:10px;"/>刘茂强</p>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">证件号码</p>
            <p  style="flex:1;text-align:right;">4413215200216562255Z00026</p>
          </div>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">权利人类型</p>
            <p style="flex:1;text-align:right;">个人</p>
          </div>
          <div style="text-align:center;overflow:auto;">
            <van-button plain round color="#7AC943" size="mini" style="margin:0 auto;" @click="showPopupzrz">查看自然幢信息</van-button>
          </div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      <div style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;background:#fff;padding:20px;">
        <div style="text-align:center;" >
          <p style="color:#22B7F2;font-size:20px;line-height:30px;" @click="showPopupzrz"><van-icon name="plus" color="#22b7f2" size="20" style="margin-right:10px;"/>添加自然幢信息</p>
        </div>
      </div>
      <div style="margin:20px;">
        <p class="title" style="position:relative;padding-left:20px;line-height:32px;">房屋信息</p>
      </div>
      <van-swipe-cell v-for="(item,index) in fwlist" :key="index" style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px auto;background:#fff;">
        <div style="padding:20px;">
          <p style="color:#22B7F2;font-size:20px;line-height:30px;"><van-icon name="wap-home" color="#22b7f2" size="20" style="margin-right:10px;"/>刘茂强</p>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">证件号码</p>
            <p  style="flex:1;text-align:right;">4413215200216562255Z00026</p>
          </div>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">权利人类型</p>
            <p style="flex:1;text-align:right;">个人</p>
          </div>
          <div style="text-align:center;overflow:auto;">
            <van-button plain round color="#7AC943" size="mini" style="margin:0 auto;" @click="showfw=true">查看房屋信息</van-button>
          </div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      <div style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;background:#fff;padding:20px;">
        <div style="text-align:center;" >
          <p style="color:#22B7F2;font-size:20px;line-height:30px;" @click="showPopupfw"><van-icon name="plus" color="#22b7f2" size="20" style="margin-right:10px;"/>添加房屋信息信息</p>
        </div>
      </div>
      <div style="position:fixed;bottom:50px;left:25%;width:50%;text-align:center;">
        <van-button round  size="small" color="#7AC943" style="width:40%" @click="changeActiveBack">上一项</van-button>
        <van-button round  size="small" color="#7AC943" style="width:40%" @click="changeActive">下一项</van-button>
      </div>
    </div>
    <div v-if="active==4">
      <div style="margin:20px;">
        <p class="title" style="position:relative;padding-left:20px;line-height:32px;">附属设施</p>
      </div>
      <van-swipe-cell v-for="(item,index) in fssslist" :key="'fsss'+index" style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px auto;background:#fff;">
        <div style="padding:20px;">
          <p style="color:#22B7F2;font-size:20px;line-height:30px;"><van-icon name="wap-home" color="#22b7f2" size="20" style="margin-right:10px;"/>刘茂强</p>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">证件号码</p>
            <p  style="flex:1;text-align:right;">4413215200216562255Z00026</p>
          </div>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">权利人类型</p>
            <p style="flex:1;text-align:right;">个人</p>
          </div>
          <div style="text-align:center;overflow:auto;">
            <van-button plain round color="#7AC943" size="mini" @click="showPopupfsss" style="margin:0 auto;">查看附属设施信息</van-button>
          </div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      <div style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;background:#fff;padding:20px;">
        <div style="text-align:center;" >
          <p style="color:#22B7F2;font-size:20px;line-height:30px;" @click="showPopup3"><van-icon name="plus" color="#22b7f2" size="20" style="margin-right:10px;"/>添加附属设施信息</p>
        </div>
      </div>
      <div style="position:fixed;bottom:50px;left:25%;width:50%;text-align:center;">
        <van-button round  size="small" color="#7AC943" style="width:40%" @click="changeActiveBack">上一项</van-button>
        <van-button round  size="small" color="#7AC943" style="width:40%" @click="changeActive">完成</van-button>
      </div>
    </div>
    <van-popup v-model="showsyqr" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="showsyqr=false"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">使用权利人</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="margin:20px;">
        <van-form @submit="onSubmit">
          <p class="title" style="position:relative;padding-left:20px;line-height:32px;">使用权人</p>
          <van-field
            v-model="form1.suyqrdm"
            name="所有权人代码"
            label="所有权人代码"
            placeholder="所有权人代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.nhdm"
            name="农户代码"
            label="农户代码"
            placeholder="农户代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.zjddm"
            name="宅基地代码"
            label="宅基地代码"
            placeholder="宅基地代码"
            :rules="[{ required: true, message: '' }]"
          />

          <van-field
            v-model="form1.nmfwdm"
            name="农民房屋代码"
            label="农民房屋代码"
            placeholder="农民房屋代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.shyqrdbxm"
            name="使用权人代表姓名"
            label="使用权人代表姓名"
            placeholder="使用权人代表姓名"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.shyqrdbzjlx"
            name="使用权人代表证件类型"
            label="使用权人代表证件类型"
            placeholder="使用权人代表证件类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.shyqrdbzjhm"
            name="使用权人代表证件号码"
            label="使用权人代表证件号码"
            placeholder="使用权人代表证件号码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.bdcdyh"
            name="不动产单元号"
            label="不动产单元号"
            placeholder="不动产单元号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.bdcqzh"
            name="不动产权证号"
            label="不动产权证号"
            placeholder="不动产权证号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.qzysxlh"
            name="权证印刷序列号"
            label="权证印刷序列号"
            placeholder="权证印刷序列号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.fzjg"
            name="发证机关"
            label="发证机关"
            placeholder="发证机关"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.sshy"
            name="所属行业"
            label="所属行业"
            placeholder="所属行业"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field name="radio" label="国家/地区">
            <template #input>
              <van-radio-group v-model="form1.gj" direction="horizontal">
                <van-radio name="1">中国</van-radio>
                <van-radio name="2">其他</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="form1.qlbl"
            name="权利比例"
            label="权利比例"
            placeholder="权利比例"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.hjszss"
            name="户籍所在省市"
            label="户籍所在省市"
            placeholder="户籍所在省市"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field name="radio" label="性别">
            <template #input>
              <van-radio-group v-model="form1.xb" direction="horizontal">
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="form1.dh"
            name="电话"
            label="电话"
            placeholder="电话"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.dz"
            name="地址"
            label="地址"
            placeholder="地址"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.ftzdmj"
            name="分摊宗地面积"
            label="分摊宗地面积"
            placeholder="分摊宗地面积"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.sfsyqrzjgy"
            name="是否使用权人之间共有"
            label="是否使用权人之间共有"
            placeholder="是否使用权人之间共有"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.qlrlx"
            name="权利人类型"
            label="权利人类型"
            placeholder="权利人类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.gyfs"
            name="共有方式"
            label="共有方式"
            placeholder="共有方式"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.sfbncjtjjzzcy"
            name="是否本农村集体经济组织成员"
            label="是否本农村集体经济组织成员"
            placeholder="是否本农村集体经济组织成员"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.hklx"
            name="户口类型"
            label="户口类型"
            placeholder="户口类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form1.bz"
            name="备注"
            label="备注"
            placeholder="备注"
            :rules="[{ required: true, message: '' }]"
          />
          <div style="text-align:center;overflow:auto;">
            <van-button plain round color="#7AC943" size="mini" style="margin:0 auto;" native-type="button" @click="showhncylist=true">查看户内成员信息</van-button>
          </div>
          <div style="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model="showzrz" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="showzrz=false"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">自然幢信息</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="margin:20px;">
        <van-form @submit="onSubmit">
          <van-field
            v-model="form3.zjddm"
            name="宅基地代码"
            label="宅基地代码"
            placeholder="宅基地代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.nmfwzh"
            name="农民房屋幢号"
            label="农民房屋幢号"
            placeholder="农民房屋幢号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.zrzh"
            name="自然幢号"
            label="自然幢号"
            placeholder="自然幢号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.jgrq"
            name="竣工日期"
            label="竣工日期"
            placeholder="竣工日期"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.jzwgd"
            name="建筑物高度"
            label="建筑物高度"
            placeholder="建筑物高度"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.zzdmj"
            name="幢占地面积"
            label="幢占地面积"
            placeholder="幢占地面积"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.zydmj"
            name="幢用地面积"
            label="幢用地面积"
            placeholder="幢用地面积"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.scjzmj"
            name="实测建筑面积"
            label="实测建筑面积"
            placeholder="实测建筑面积"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.zcs"
            name="总层数"
            label="总层数"
            placeholder="总层数"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.dscs"
            name="地上层数"
            label="地上层数"
            placeholder="地上层数"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.dxcs"
            name="地下层数"
            label="地下层数"
            placeholder="地下层数"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.fwjg"
            name="房屋结构"
            label="房屋结构"
            placeholder="房屋结构"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.sjly"
            name="数据来源"
            label="数据来源"
            placeholder="数据来源"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.bz"
            name="备注"
            label="备注"
            placeholder="备注"
            :rules="[{ required: true, message: '' }]"
          />
          <MapGisDrawing ref="drewingClickLoading" :message="form.theGeom" v-on:formSubmit="MapTag"></MapGisDrawing>
          <div style="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model="showfw" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="showfw=false"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">房屋信息</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="margin:20px;">
        <van-form @submit="onSubmit">
          <van-field
            v-model="form3.zjddm"
            name="宅基地代码"
            label="宅基地代码"
            placeholder="宅基地代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.nmfwzh"
            name="农民房屋幢号"
            label="农民房屋幢号"
            placeholder="农民房屋幢号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.zrzh"
            name="自然幢号"
            label="自然幢号"
            placeholder="自然幢号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.jgrq"
            name="竣工日期"
            label="竣工日期"
            placeholder="竣工日期"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.jzwgd"
            name="建筑物高度"
            label="建筑物高度"
            placeholder="建筑物高度"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.zzdmj"
            name="幢占地面积"
            label="幢占地面积"
            placeholder="幢占地面积"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.zydmj"
            name="幢用地面积"
            label="幢用地面积"
            placeholder="幢用地面积"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.scjzmj"
            name="实测建筑面积"
            label="实测建筑面积"
            placeholder="实测建筑面积"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.zcs"
            name="总层数"
            label="总层数"
            placeholder="总层数"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.dscs"
            name="地上层数"
            label="地上层数"
            placeholder="地上层数"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.dxcs"
            name="地下层数"
            label="地下层数"
            placeholder="地下层数"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.fwjg"
            name="房屋结构"
            label="房屋结构"
            placeholder="房屋结构"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.sjly"
            name="数据来源"
            label="数据来源"
            placeholder="数据来源"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form3.bz"
            name="备注"
            label="备注"
            placeholder="备注"
            :rules="[{ required: true, message: '' }]"
          />
          <MapGisDrawing ref="drewingClickLoading" :message="form.theGeom" v-on:formSubmit="MapTag"></MapGisDrawing>
          <div style="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model="showfsss" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="showfsss=false"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">附属设施</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="margin:20px;">
        <van-form @submit="onSubmit">
          <van-field
            v-model="form4.zjddm"
            name="宅基地代码"
            label="宅基地代码"
            placeholder="宅基地代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.fssslx"
            name="附属设施类型"
            label="附属设施类型"
            placeholder="附属设施类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.jzmj"
            name="建筑面积"
            label="建筑面积"
            placeholder="建筑面积"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.qsly"
            name="权属来源"
            label="权属来源"
            placeholder="权属来源"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.fwzt"
            name="房屋状态"
            label="房屋状态"
            placeholder="房屋状态"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.sfsp"
            name="是否审批"
            label="是否审批"
            placeholder="是否审批"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.sffz"
            name="是否发证"
            label="是否发证"
            placeholder="是否发证"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.jglx"
            name="结构类型"
            label="结构类型"
            placeholder="结构类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.sfzzsy"
            name="是否正在使用"
            label="是否正在使用"
            placeholder="是否正在使用"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.jzwqk"
            name="建筑物情况"
            label="建筑物情况"
            placeholder="建筑物情况"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.tdzk"
            name="审批或建设前土地状况"
            label="审批或建设前土地状况"
            placeholder="审批或建设前土地状况"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.tdzk"
            name="是否受过处罚"
            label="是否受过处罚"
            placeholder="是否受过处罚"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form4.bz"
            name="备注"
            label="备注"
            placeholder="备注"
            :rules="[{ required: true, message: '' }]"
          />
          <MapGisDrawing ref="drewingClickLoading" :message="form.theGeom" v-on:formSubmit="MapTag"></MapGisDrawing>
          <div style="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model="showhncy" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="showhncy=false"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">户内成员</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="margin:20px;">
        <van-form @submit="onSubmit">
          <van-field
            v-model="form5.nhdm"
            name="农户代码"
            label="农户代码"
            placeholder="农户代码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.xm"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.zjlx"
            name="证件类型"
            label="证件类型"
            placeholder="证件类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.yhzgx"
            name="与户主关系"
            label="与户主关系"
            placeholder="与户主关系"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.zjhm"
            name="证件号码"
            label="证件号码"
            placeholder="证件号码"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.xb"
            name="性别"
            label="性别"
            placeholder="性别"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.lxdh"
            name="联系电话"
            label="联系电话"
            placeholder="联系电话"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.hklx"
            name="户口类型"
            label="户口类型"
            placeholder="户口类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.hyzk"
            name="婚姻状况"
            label="婚姻状况"
            placeholder="婚姻状况"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.jzwqk"
            name="建筑物情况"
            label="建筑物情况"
            placeholder="建筑物情况"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.sfbjtjjzzcy"
            name="是否本集体经济组织成员"
            label="是否本集体经济组织成员"
            placeholder="是否本集体经济组织成员"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.cybz"
            name="成员备注"
            label="成员备注"
            placeholder="成员备注"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="form5.cybzsm"
            name="成员备注说明"
            label="成员备注说明"
            placeholder="成员备注说明"
            :rules="[{ required: true, message: '' }]"
          />
          <div style="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model="showhncylist" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="showhncylist=false"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">户内成员信息</p>
          </template>
        </van-nav-bar>
      </div>
      <van-swipe-cell v-for="(item,index) in hncylist" :key="index" @click.native="showPopuphncy" style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px auto;background:#fff;">
        <div style="padding:20px;">
          <p style="color:#22B7F2;font-size:20px;line-height:30px;"><van-icon name="wap-home" color="#22b7f2" size="20" style="margin-right:10px;"/>刘茂强</p>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">证件号码</p>
            <p  style="flex:1;text-align:right;">4413215200216562255Z00026</p>
          </div>
          <div style="display:flex;line-height:20px">
            <p style="flex:1;text-align:left;">权利人类型</p>
            <p style="flex:1;text-align:right;">个人</p>
          </div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      <div style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:calc( 100% - 40px);margin:20px;background:#fff;padding:20px;">
        <div style="text-align:center;" >
          <p style="color:#22B7F2;font-size:20px;line-height:30px;" @click="showPopuphncy"><van-icon name="plus" color="#22b7f2" size="20" style="margin-right:10px;"/>添加户内成员信息</p>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="show3" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="show1=!show1"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <template #title>
            <p style="color:#fff">农户信息</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="margin:20px;">
        <van-form @submit="onSubmit">
          <p class="title" style="position:relative;padding-left:20px;line-height:32px;">户主信息</p>
          <van-field
            v-model="username"
            name="户主名称"
            label="户主名称"
            placeholder="户主名称"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="证件类型"
            label="证件类型"
            placeholder="证件类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="证件号"
            label="证件号"
            placeholder="证件号"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field name="radio" label="性别">
            <template #input>
              <van-radio-group v-model="password" direction="horizontal">
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="password"
            type="password"
            name="电话"
            label="电话"
            placeholder="电话"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="户口类型"
            label="户口类型"
            placeholder="户口类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="权利人类型"
            label="权利人类型"
            placeholder="权利人类型"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="共有方式"
            label="共有方式"
            placeholder="共有方式"
            :rules="[{ required: true, message: '' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="户主分摊宗地面积（㎡）"
            label="户主分摊宗地面积"
            placeholder="户主分摊宗地面积"
            :rules="[{ required: true, message: '' }]"
          />
          <div style="text-align:center;overflow:auto;">
            <van-button plain round color="#7AC943" size="mini" style="margin:0 auto;">查看户主信息</van-button>
          </div>
          <div style="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {listShyqr} from "@/api/homesteadSurvey/shyqr";
  import {listZjdzd,getZjdzd,updateZjdzd,addZjdzd,uploadFile,getQueryLand} from "@/api/homesteadSurvey/zjdzd";
  import MapGisDrawing from "@/components/Map/MapGisDrawing";
  import {listZrz,getZrzZjdDmList} from "@/api/homesteadSurvey/zrz";
  import {listFsss,getFsssZjdDmList} from "@/api/homesteadSurvey/fsss";
  import { listTown, getTown } from "@/api/homesteadSurvey/town";
  import { listVillage} from "@/api/homesteadSurvey/village";
  export default {
    name: "homesteadAdd",
    components: { MapGisDrawing,},
    data() {
      return {
        active:1,
        showsjly:false,
        showPickerxzkssj:false,
        showlyzk:false,
        showsyqr: false,
        showhncylist:false,
        showhncy:false,
        show1: false,
        showzrz: false,
        showfw:false,
        showfsss:false,
        show3: false,
        username: '',
        password: '',
        // 路由数据
        item:{},
        //宅基地表单
        form:{},
        //使用权人表单
        form1:{},
        //自然幢表单
        form3:{},
        //附属设施表单
        form4:{},
        //成员信息表单
        form5:{},
        // 使用权人列表
        syqrlist:[],
        // 户内成员列表
        hncylist:[1,1,1],
        // 自然幢列表
        zrzlist:[1,1,1],
        // 房屋列表
        fwlist:[1,1],
        // 附属设施列表
        fssslist:[1,1,1,1,1],
        // 当前利用状况字典
        lyzkOptions: [],
        // 数据来源字典
        sjlyOptions:[],
        // 宅基地取得方式字典
        zjdqdfsOptions:[],
        // 宅基地图片
        fileListzjd:[],
      };
    },
    created(){
      if(this.$cookies.get("search")){
        this.item = this.$cookies.get("search");
      }else{
        this.$set(this.item,"deptId",this.$cookies.get("item").deptId)
      }
      this.getDicts("zjdlyzk").then(response => {
        this.lyzkOptions = response.data;
      });
      this.getDicts("acquisition_method").then(response => {
        this.zjdqdfsOptions = response.data;
      });
      this.getDicts("sjly").then(response => {
        this.sjlyOptions = response.data;
      });
      this.getZjd()
    },
    mounted(){
      this.mapClickLoading();
    },
    methods: {
      // 图片上传前
      beforeReadzjd(file){
        // 创建Canvas对象(画布)
        let canvas =  document.createElement('canvas')
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext('2d')
        // 创建新的图片对象
        let img = new Image()
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = file.content
        // 监听浏览器加载图片完成，然后进行进行绘制
        const height = 166
        const width = 316
        img.onload = () => {
          const h = img.height
          const w = img.width
          let ch = img.height/2
          let cw = img.width/2
          let canvas = document.createElement('canvas')
          let ctx = canvas.getContext('2d')
          canvas.height = ch
          canvas.width = cw
          ctx.clearRect(0,0,cw,ch)
          ctx.drawImage(img,0,0,cw,ch)
          let base_img = canvas.toDataURL('image/jpeg')
          const blobBin = atob(base_img.split(',')[1])
          let d = []
          for (let i=0;i<blobBin.length;i++){
            d.push(blobBin.charCodeAt(i))
          }
          const data2 = new FormData();
          data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));
          uploadFile(data2).then(res => {
            console.log(res);
            if(this.form.zjdxctp!=null&&this.form.zjdxctp!=""){
              this.form.zjdxctp = this.form.zjdxctp + "," + res.fileName
            }else{
              this.form.zjdxctp =  res.fileName
            }
          })
        }

      },
      // 图片删除
      deleteFilezjd(file){
        console.log(this.form.zjdxctp,file.baseUrl)
        let url = ","+file.baseUrl
        let url1 = file.baseUrl+","
        this.form.zjdxctp = this.form.zjdxctp.replaceAll(url,"")
        this.form.zjdxctp = this.form.zjdxctp.replaceAll(url1,"")
      },
      // 当前利用状况弹出框
      onConfirmlyzk(value){
        this.form.lyzkName = value.dictLabel
        this.form.lyzk = value.dictValue
        this.showlyzk = false
      },
      onConfirmsjly(value){
        this.form.sjlyName = value.dictLabel
        this.form.sjly = value.dictValue
        this.showsjly = false
      },
      // 闲置开始时间弹出框
      onConfirmxzkssj(val){
        let year = val.getFullYear()
        let month = val.getMonth() + 1
        let day = val.getDate()
        if (month >= 1 && month <= 9) { month = `0${month}` }
        if (day >= 1 && day <= 9) { day = `0${day}` }
        this.form.xzkssj = year+"-"+month+"-"+day
        this.showPickerxzkssj= false
      },
      goBack(){
        this.$router.push({name:'homesteadList'});
      },
      getZjd() {
        if(this.item.zjddm){
          let params = {
            "zjddm":this.item.zjddm
          }
          console.log(this.item.zjddm)
          listZjdzd(params).then(response => {
            this.form = response.rows[0];
            this.fileListzjd = []
            let li = this.form.zjdxctp.split(",");
            li.map(res => {
              this.fileListzjd.push({"url":location.protocol+"//"+location.host+process.env.VUE_APP_BASE_API+res,"baseUrl":res})
            })
            this.sjlyOptions.map(res => {
              if(res.dictValue == this.form.sjly){
                this.form.sjlyName = res.dictLabel
              }
            })
          });
        }
      },
      getSyqrList() {
        if(this.item.zjddm) {
          let params = {
            "zjddm":this.item.zjddm
          }
          listShyqr(params).then(response => {
            this.syqrlist = response.rows;
          });
        }
      },
      getZrzList() {
        if(this.item.zjddm){
          let params = {
            "zjddm":this.item.zjddm
          }
          listZrz(params).then(response => {
            this.zrzlist = response.rows;
          });
        }

      },
      getFsssList() {
        if(this.item.zjddm){
          let params = {
            "zjddm":this.item.zjddm
          }
          listFsss(params).then(response => {
            this.fssslist = response.rows;
          });
        }
      },
      onSubmitzjd(){
        if (this.form.id != null) {
          updateZjdzd(this.form).then(response => {
            let _this =this
            this.$toast({
              icon: 'success', // 找到自己需要的图标
              message: '修改成功',
              duration:"1000",
              onClose:function(){
                _this.active = 2
              }
            })
          });
        } else {
          addZjdzd(this.form).then(response => {
            let _this =this
            this.$toast({
              icon: 'success', // 找到自己需要的图标
              message: '保存成功',
              duration:"1000",
              onClose:function(){
                _this.active = 2
              }
            })
          });
        }
      },
      showPopupsyqr() {
        this.showsyqr = true;
      },
      showPopuphncy(){
        this.showhncy = true
      },
      showPopup1() {
        this.show1 = true;
      },
      showPopupzrz() {
        this.showzrz = true;
        this.mapClickLoading();
      },
      showPopupfw() {
        this.showfw = true;
      },
      showPopupfsss() {
        this.showfsss = true;
        this.mapClickLoading();
      },
      showPopup3() {
        this.show3 = true;
        this.mapClickLoading();
      },
      onSubmit(values) {
        console.log('submit', values);
      },
      changeActive(){
        if(this.active<4){
          this.active+=1
        }else{
          this.active=1
        }
      },
      changeActiveBack(){
        if(this.active>1){
          this.active-=1
        }else{
          this.active=1
        }
      },//地图加载js------start
      mapClickLoading(){
        setTimeout(() => {
          this.$refs.drewingClickLoading.drawingPaceCountryDarw();
        }, 500);
      },
      /** 查找地图中定位点 */
      MapTag: function (data) {
        this.form.theGeom = data;
      },
      //地图加载js------end
    }
  }
</script>

<style scoped>
  >>> .bannerBg{
    width: 100%;
    color:#fff;
    padding:10px;
    background: linear-gradient(134deg,#7ac943 1%, #22b7f2);
  }
  >>> .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  >>> .title:before
  {
    content:"";
    width: 6px;
    height: 32px;
    background: #7ac943;
    border-radius: 3px;
    position:absolute;
    left:0;
    bottom:0;
  }
  >>> .delete-button {
    height: 100%;
  }
</style>