nsgk_mobile/src/views/contracted/village/contractor/contractorFamilyDetail.vue

<template>
  <div class="app-container">

    <van-nav-bar left-arrow fixed placeholder @click-left="onClickLeft" >
      <template #title>
        <div class="tb_main">
<!--          B村<p><span class="tb">签字完成</span><span class="tb">异常挂起</span></p>-->
          1111111
        </div>
      </template>
    </van-nav-bar>

    <div class="tap_block">
      <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p>
      <p class="active">家庭成员</p>
      <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p>
      <p @click="$router.push({path:'/contracted/village/contractorLand'})">承包地</p>
    </div>

    <div class="list_main">
      <van-field v-model="value" label="姓名：" placeholder="请输入姓名" required :border="false" input-align="right" />
      <van-field v-model="value" label="性别：" required :border="false" input-align="right" >
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        v-model="value"
        label="与户主关系："
        placeholder="请选择与户主关系"
        required
        :border="false"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
        readonly
        clickable
        @click="showType = true"
      />
      <van-popup v-model="showType" position="bottom">
        <van-picker
          show-toolbar
          :columns="typeOptions"
          value-key="dictLabel"
          @confirm="onConfirmTypeOptions"
          @cancel="showType = false"
        />
      </van-popup>

      <van-field v-model="value" label="是否共有人：" required :border="false" input-align="right" >
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="2">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        v-model="value"
        label="证件类型："
        placeholder="请选择证件类型"
        required
        :border="false"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
        readonly
        clickable
        @click="showZjType = true"
      />
      <van-popup v-model="showZjType" position="bottom">
        <van-picker
          show-toolbar
          :columns="zjTypeOptions"
          value-key="dictLabel"
          @confirm="onConfirmZjTypeOptions"
          @cancel="showZjType = false"
        />
      </van-popup>

      <van-field v-model="value" label="证件号码：" placeholder="请输入证件号码" required :border="false" input-align="right" />

      <van-field
        v-model="value"
        label="成员备注："
        placeholder="请选择成员备注"
        required
        :border="false"
        input-align="right"
        right-icon="arrow-down"
        label-width="auto"
        readonly
        clickable
        @click="showCYBZ = true"
      />
      <van-popup v-model="showCYBZ" position="bottom">
        <van-picker
          show-toolbar
          :columns="CYBZOptions"
          value-key="dictLabel"
          @confirm="onConfirmCYBZOptions"
          @cancel="showCYBZ = false"
        />
      </van-popup>

      <van-field v-model="value" label="备注说明：" placeholder="请输入备注说明" required :border="false" input-align="right" />
      <van-field v-model="value" label="持股份数：" placeholder="请输入持股份数" required :border="false" input-align="right" />
      <van-field v-model="value" label="股权编号：" placeholder="请输入股权编号" required :border="false" input-align="right" />
      <p class="btn">保存</p>
    </div>


  </div>
</template>
<script>
  import Cookies from "js-cookie";
  export default {
    name: "contractedVillageContractor",
    data() {
      return {
        loading:false,
        finished:true,
        value:'',
        showType:false,
        showZjType:false,
        typeOptions:[{
          dictLabel:'类型1',
          dictValue:'1',
        }],
        zjTypeOptions:[{
          dictLabel:'类型2',
          dictValue:'1',
        }],
        CYBZOptions:[{
          dictLabel:'类型2',
          dictValue:'1',
        }],
        radio:1
      };
    },
    created() {

    },
    methods: {
      getList(){

      },
      onSearch(){

      },
      onConfirmTypeOptions(){

      },
      onConfirmZjTypeOptions(){

      },
      onConfirmCYBZOptions(){

      },

    },
  };
</script>
<style scoped lang="scss">

  .app-container{
    background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;
    background-size: 100% 100%;
    height: 100vh;
    padding: 0 4vw;
    overflow: hidden;
  }

  /deep/ .van-nav-bar{
    background: transparent;
  }

  /deep/ .van-nav-bar .van-icon{
    color: #000000;
  }

  /deep/ .van-hairline--bottom::after{
    border: none;
  }

  /deep/ .van-search__content{
    background: rgba(255,255,255,.5);
  }
  /deep/ .van-search{
    padding: 0;
    flex: 1;
  }

  /deep/ .van-ellipsis{
    overflow: initial;
  }

  .tb_main{
    position: relative;
    p{
      position: absolute;
      display: inline-block;
      margin-left: 10PX;
    }
  }

  .tb{
    font-size: 12px;
    color: #ff8900;
    background: #daf6e7;
    border: 1px solid #d7be6e;
    padding: 2PX 8PX;
    border-radius: 50PX;
    margin-right: 5PX;
  }

  .tap_block{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #ebfaf2;
    padding: 2PX 4PX;
    border-radius: 10PX;
    margin-top: 1vh;
    .active{
      background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
      box-shadow: 0 0 10PX #cccccc;
      color: #333333;
    }
    p{
      width: 25%;
      text-align: center;
      padding: 5PX 0;
      border-radius: 10PX;
      color: #666666;
    }
  }

  .search_main{
    display: flex;
    margin-top: 2vh;
    .search_btn{
      background: rgba(255,255,255,.5);
      width: 25%;
      border-radius: 50PX;
      margin-left: 10PX;
      padding: 2PX;
      .active{
        background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
        color: #333333;
        border-radius: 50PX;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    }
  }

  .second_tap{
    display: flex;
    align-items: center;
    margin-top: 1vh;
    p{
      background: #dbf1ea;
      border: 1px solid #cdcdcd;
      color: #5f5f5f;
      padding: 5PX 15PX;
      margin-right: 3vw;
      border-radius: 50PX;
    }
    .active{
      background: #99eecb;
      border-color: #48e5a2;
      color: #333333;
    }
  }

  .list_main{
    margin-top: 2vh;
    overflow-y: scroll;
    text-align: center;
    background: #ffffff;
    border-top-left-radius: 10PX;
    border-top-right-radius: 10PX;
    height: 88vh;
    .btn{
      background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
      box-shadow: 0 0 10PX #cccccc;
      padding: 10PX 0PX;
      border-radius: 50PX;
      display: inline-block;
      width: 40%;
      margin-top: 2vh;
    }
  }

</style>