zhangzl
/
nsgk_mobile


			
				
					
						
						
							
							<template>
  <div class="app-container">
    <div class="bannerBg">
      <van-nav-bar
        style="background:transparent;border-bottom-width:0;height:150px"
        @click-left="$router.back(-1)"
      >
        <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">刘茂强</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">
          <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">
          <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">
          <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;">
        <p class="title" style="position:relative;padding-left:20px;line-height:32px;">使用权人</p>
      </div>
      <van-swipe-cell 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;">查看户主信息</van-button>
          </div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
      <van-swipe-cell 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="showPopup1">查看户主信息</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="showPopup"><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%;">
        <van-button round block color="#7AC943" @click="changeActive">下一项</van-button>
      </div>
    </div>
    <van-popup v-model="show" style="height:100%;width:100%;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;"
          @click-left="show=!show"
        >
          <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="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model="show1" 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 v-if="active==2">
      <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="margin: 16px;">
            <van-button round block color="#7AC943" native-type="submit">保存</van-button>
          </div>
        </van-form>
      </div>
    </div>
    <div v-if="active==3">
      <div style="position:fixed;bottom:50px;left:25%;width:50%;">
        <van-button round block color="#7AC943" @click="changeActive">下一项</van-button>
      </div>
    </div>
    <div v-if="active==4">
      <div style="position:fixed;bottom:50px;left:25%;width:50%;">
        <van-button round block color="#7AC943" @click="changeActive">完成</van-button>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "homesteadAdd",
      data() {
        return {
          active:1,
          list:[1,1],
          show: false,
          show1: false,
          username: '',
          password: '',
        };
      },
      mounted(){

      },
      methods: {
        showPopup() {
          this.show = true;
        },
        showPopup1() {
          this.show1 = true;
        },
        onSubmit(values) {
          console.log('submit', values);
        },
        changeActive(){
          if(this.active<4){
            this.active+=1
          }else{
            this.active=1
          }
        }
      }
    }
</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>