确权APP

src/permission.js

@@ -181,6 +181,11 @@ const whiteList = [
 
   '/plotPremisesMobile/index',//闲置资源
 
+
+  //承包地确权
+  '/contracted/login',//登录
+  '/contracted/index',//首页
+
 ]
 
 router.beforeEach((to, from, next) => {

src/router/index.js

@@ -5457,6 +5457,71 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/plotPremisesMobile/index'], resolve)
   },
+
+  //<--------------------------------------承包地确权-------------------------------------->
+  {
+    path: '/contracted/login',
+    name: 'contractedLogin',
+    meta: {
+      title: '登录',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/contracted/login'], resolve)
+  },
+  {
+    path: '/contracted/index',
+    name: 'contractedIndex',
+    meta: {
+      title: '首页',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/contracted/index'], resolve)
+  },
+  {
+    path: '/contracted/village/contractor',
+    name: 'contractedVillageContractor',
+    meta: {
+      title: '承包方列表',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/contracted/village/contractor/contractor'], resolve)
+  },
+  {
+    path: '/contracted/village/contractorDetail',
+    name: 'contractedVillageContractorDetail',
+    meta: {
+      title: '承包方详情',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/contracted/village/contractor/contractorDetail'], resolve)
+  },
+  {
+    path: '/contracted/village/contractorFamily',
+    name: 'contractedVillageContractorFamily',
+    meta: {
+      title: '承包方家庭成员',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/contracted/village/contractor/contractorFamily'], resolve)
+  },
+  {
+    path: '/contracted/village/contractorFamilyDetail',
+    name: 'contractedVillageContractorFamilyDetail',
+    meta: {
+      title: '承包方家庭成员新增',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/contracted/village/contractor/contractorFamilyDetail'], resolve)
+  },
+  {
+    path: '/contracted/village/contractorWord',
+    name: 'contractedVillageContractorWord',
+    meta: {
+      title: '承包合同',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/contracted/village/contractor/contractWord'], resolve)
+  },
 ];
 
 

src/views/contracted/index.vue

@@ -0,0 +1,348 @@
+<template>
+  <div class="app-container">
+
+    <div class="header">
+      <img class="header_img" src="../../../static/images/contracted/contracted_index_head.png" alt="">
+      <div class="header_block">
+        <p>欢迎，张三</p>
+        <p>13306311234</p>
+      </div>
+      <img class="header_setting" src="../../../static/images/contracted/contracted_index_icon_1.png" alt="">
+    </div>
+
+    <div class="tab">
+      <div>
+        <p><img src="../../../static/images/contracted/contracted_index_icon_4.png" alt="">已完成任务</p>
+        <p><span>84</span>个</p>
+      </div>
+      <div>
+        <p><img src="../../../static/images/contracted/contracted_index_icon_5.png" alt="">进行中任务</p>
+        <p><span>84</span>个</p>
+      </div>
+    </div>
+
+    <div class="list_tt">
+      <p>任务清单（112）</p>
+      <p>
+        <span><i></i>已完成</span>
+        <span><i></i>总数</span>
+      </p>
+    </div>
+
+    <div class="list_main">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="getList"
+      >
+        <van-swipe-cell v-for="(item,index) in 10" :key="index" >
+          <div class="item" @click="goDetail(item.id)">
+            <img src="../../../static/images/contracted/contracted_index_icon_6.png" alt="">
+            <div class="info">
+              <div class="title">
+                <p class="news_title">A镇 B村</p>
+                <p class="tips_mark">200</p>
+              </div>
+              <div class="time">
+                <p>张三、李四、王五</p>
+                <p>800</p>
+              </div>
+            </div>
+          </div>
+          <template #right>
+            <div class="operation">
+              <!-- delete 删除 edit编辑 view查看 list榜单 -->
+              <div class="opera_btn">
+                <img src="../../assets/images/sunVillage_info/signature_icon_02.png" alt="" width="35">
+                <p>签名</p>
+              </div>
+              <div class="opera_btn" style="margin: 0 10px;">
+                <img src="../../assets/images/sunVillage_info/signature_icon_03.png" alt="" width="35">
+                <p>预览</p>
+              </div>
+              <div class="opera_btn">
+                <img src="../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35">
+                <p>电子合同</p>
+              </div>
+              <div class="opera_btn">
+                <img src="../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35">
+                <p>线下合同</p>
+              </div>
+            </div>
+          </template>
+        </van-swipe-cell>
+      </van-list>
+    </div>
+
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "contractedIndex",
+    data() {
+      return {
+        loading:false,
+        finished:true
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      getList(){
+
+      },
+      goDetail(id){
+        this.$router.push({path:'/contracted/village/contractor'})
+      },
+    },
+  };
+</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;
+  }
+
+  .header{
+    display: flex;
+    align-items: center;
+    padding: 5vh 0 0;
+    .header_img{
+      display: block;
+      width: 15vw;
+      height: 15vw;
+      border-radius: 50%;
+      border: 3PX solid #ffffff;
+    }
+    .header_block{
+      margin-left: 4vw;
+      p{
+        font-size: .4rem;
+        &:nth-child(1){
+          font-size: .5rem;
+          font-weight: bold;
+          margin-bottom: 1vh;
+        }
+      }
+    }
+    .header_setting{
+      margin-left: auto;
+      width: 6vw;
+      margin-bottom: auto;
+    }
+  }
+
+  .tab{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    div{
+      width: 44vw;
+      height: 22vw;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 0 5vw;
+      box-shadow: 0 5PX 10PX #c9c9c9;
+      border-radius: 4vw;
+      margin-top: 3vh;
+      &:nth-child(1){
+        background: url("../../../static/images/contracted/contracted_index_icon_2.png") no-repeat center;
+        background-size: 100% 100%;
+      }
+      &:nth-child(2){
+        background: url("../../../static/images/contracted/contracted_index_icon_3.png") no-repeat center;
+        background-size: 100% 100%;
+      }
+      img{
+        width: 5vw;
+        display: block;
+        margin-right: 2vw;
+      }
+      p{
+        display: flex;
+        align-items: center;
+        &:nth-child(1){
+          font-size: .4rem;
+        }
+        &:nth-child(2){
+          font-size: .3rem;
+          align-items: end;
+          line-height: 1;
+          padding-left: 8vw;
+          margin-top: 2vw;
+          span{
+            font-size: .5rem;
+            font-weight: bold;
+            margin-right: 2vw;
+          }
+        }
+      }
+    }
+  }
+
+  .list_tt{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 3vh;
+    p{
+      &:first-child{
+        font-size: .38rem;
+        font-weight: bold;
+      }
+      &:last-child{
+        span{
+          color: #999999;
+          margin-left: 2vh;
+          i{
+            display: inline-block;
+            width: 1vh;
+            height: 1vh;
+            border-radius: 100%;
+            margin-right: 5PX;
+          }
+          &:first-child i{
+            background: #fc8e13;
+          }
+          &:last-child i{
+            background: #5fe495;
+          }
+        }
+      }
+    }
+  }
+
+  .list_main{
+    margin-top: 15PX;
+    height: 65vh;
+    overflow-y: scroll;
+    .item{
+      border-radius: 30px;
+      background: #fff;
+      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+      padding:25px 32px;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      img{
+        width: 12%;
+        margin-right: 2vh;
+      }
+      .info{
+        flex: 1;
+        .title{
+          display: flex;
+          font-size: 32px;
+          align-items: center;
+          height: 58px;
+          justify-content: space-between;
+          .news_title{
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            word-break: break-all;
+            overflow: hidden;
+            font-weight: bold;
+          }
+          .tips_mark{
+            font-size: 16PX;
+            color: #fc8e13;
+            text-align: center;
+            flex-shrink: 0;
+            font-weight: bold;
+          }
+        }
+        .time{
+          font-size: 16PX;
+          color: #999999;
+          display: flex;
+          align-items: center;
+          margin-top: 5PX;
+          justify-content: space-between;
+          p:first-child{
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            word-break: break-all;
+            overflow: hidden;
+          }
+          p:last-child{
+            font-size: 16PX;
+            color: #5fe495;
+            text-align: center;
+            flex-shrink: 0;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+
+    .operation{
+      display: flex;
+      align-items: center;
+      justify-content: right;
+      text-align: center;
+      border-radius: 30px;
+      background: #fff;
+      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+      height: 100%;
+      padding: 0 15Px;
+      margin-left: 10PX;
+      .opera_btn{
+        border-radius: 50%;
+        &.delete{
+          background:#df0707;
+          margin-left: 10PX;
+          .icon{
+            width: 22PX;
+            height: 29PX;
+            background: url('../../assets/images/sunVillage_info/signature_icon_03.png') no-repeat;
+            background-size: 100% 100%;
+            display: block;
+          }
+        }
+        &.edit{
+          background: #79cf13;
+          margin-left: 10PX;
+          .icon {
+            width: 26PX;
+            height: 25PX;
+            background: url('../../assets/images/sunVillage_info/signature_icon_02.png') no-repeat;
+            background-size: 100% 100%;
+            display: block;
+          }
+        }
+        &.view{
+          background: #3494ff;
+          margin-left: 10PX;
+          .icon {
+            width: 29PX;
+            height: 21PX;
+            background: url('../../assets/images/sunVillage_info/signature_icon_04.png') no-repeat;
+            background-size: 100% 100%;
+            display: block;
+          }
+        }
+        &.list{
+          background: #79cf13;
+          margin-left: 10PX;
+          .icon {
+            width: 29px;
+            height: 21px;
+            background: url('../../assets/images/sunVillage_info/list_icon_10.png') no-repeat;
+            background-size: 100% 100%;
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+</style>

src/views/contracted/login.vue

@@ -0,0 +1,425 @@
+<template>
+  <div class="app-container">
+    <div class="title">
+      <img style="display: inline-block;margin-right: 10px;" src="../../../static/images/contracted/login_logo.png" alt="">
+      <p>农村承包地调查</p>
+    </div>
+    <van-form style="width: 88%;margin: 0 auto;margin-top: 50px;" v-if="!showMessage">
+      <van-field
+        v-model="formData.username"
+        placeholder="请输入手机号/账号"
+        :rules="[{ required: true, message:''  }]"
+        clearable
+        left-icon="../../../static/images/contracted/contracted_login_icon_1.png"
+      />
+      <van-field
+        v-model="formData.password"
+        type="password"
+        style="margin: 20px 0"
+        placeholder="请输入密码"
+        :rules="[{ required: true, message:''  }]"
+        clearable
+        left-icon="../../../static/images/contracted/contracted_login_icon_2.png"
+      />
+      <van-row>
+        <van-col :span="16">
+          <van-field
+            v-model="formData.code"
+            center
+            clearable
+            placeholder="图形验证码"
+            left-icon="../../../static/images/contracted/contracted_login_icon_3.png"
+          />
+        </van-col>
+        <van-col :span="8">
+          <img style="width: 100px;display: block;margin-left: 10px;" :src="codeUrl" @click="getCode" />
+        </van-col>
+      </van-row>
+
+      <van-checkbox style="margin-top:20px;margin-left:20px;" v-model="formData.rememberMe" shape="square">{{showMessage ? "记住手机号" : "记住密码"}}</van-checkbox>
+
+      <div style="margin: 50px 16px 16px;border-radius: 30px;overflow: hidden;">
+        <van-button block type="info" native-type="submit" @click="handleLogin">登录</van-button>
+      </div>
+<!--      <div style="margin: 0px 16px;border-radius: 30px;overflow: hidden;">-->
+<!--        <van-button block type="info" @click="registerShow=true">注册</van-button>-->
+<!--      </div>-->
+
+      <van-popup v-model:show="registerShow" style="width: 80%" round>
+        <div style="background: #FFF;padding: 5% 2%;">
+          <p style="text-align: center;font-size: 0.45rem;margin-bottom: 5%;">请选择注册类型</p>
+          <van-row>
+            <van-col :span="12" align="center">
+              <router-link :to="{name:'lawEnforcementUser'}">
+                <van-image
+                  round
+                  width="50%"
+                  src="../../../static/images/lawEnforcement/sh.png"
+                />
+              </router-link>
+              <p style="font-size: 0.4rem;margin-top: 3%">个体工商户</p>
+            </van-col>
+            <van-col :span="12" align="center">
+              <router-link :to="{name:'lawEnforcementCompanyRegister'}">
+              <van-image
+                round
+                width="50%"
+                src="../../../static/images/lawEnforcement/qy.png"
+              />
+              </router-link>
+              <p style="font-size: 0.4rem;margin-top: 3%">企业</p>
+            </van-col>
+          </van-row>
+        </div>
+      </van-popup>
+
+    </van-form>
+  </div>
+</template>
+<style scoped lang="scss">
+
+  input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
+    -webkit-text-fill-color: #ededed !important;
+    -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
+    background-color:transparent;
+    background-image: none;
+    transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
+  }
+  input {
+    background-color:transparent;
+  }
+  .app-container{
+    background: #fff url("../../../static/images/contracted/login_bg.png") no-repeat center;
+    background-size: 100% 100%;
+    height: 100vh;
+  }
+  /deep/ .van-cell{
+    padding: 0;
+    padding: 0.2rem 0.5rem;
+    border-radius: 0.5rem;
+    background-color: rgba(255,255,255,.5);
+    box-shadow: 0 5px 10px #DDDDDD;
+    .van-field__control{
+
+    }
+    &:after{
+      border: none;
+    }
+    .van-icon__image{
+      width: 20PX;
+      height: 20PX;
+      object-fit: contain;
+      vertical-align: middle;
+    }
+  }
+  /deep/ .van-checkbox__icon--checked .van-icon{
+    background-color: #30d391;
+    border-color: #30d391;
+  }
+  /deep/ .van-button--info{
+    background-color: #30d391;
+    border-color: #30d391;
+  }
+  .title{
+    padding-top: 20%;
+    width: 88%;
+    margin: 0 auto;
+    text-align: center;
+    p{
+      font-size: 0.6rem;
+      color: #333333;
+      margin-top: 10PX;
+      font-weight: bold;
+    }
+    img{
+      width: 30%;
+    }
+  }
+  .van-tab--active{
+    font-size: .6rem;
+    font-weight: bold;
+  }
+  .van-tabs__line{
+    background:#1D6FE9;
+    width: 0.15rem;
+    height: 0.15rem;
+    border-radius: 0.07rem;
+    bottom: 0.3rem;
+  }
+  .van-tabs__nav{
+    padding:0
+  }
+  .van-tab{
+    display: inline-block;
+    flex: inherit;
+    margin-left: 30px;
+    line-height: .8rem;
+  }
+  .van-tab__text--ellipsis {
+    overflow: auto;
+  }
+  .van-password-input{
+    width: 50%;
+    margin: 0 auto;
+  }
+  [class*=van-hairline]::after{
+    border:none;
+  }
+  .van-password-input__security li{
+    margin: 0 10px;
+    border-bottom: 3px solid black;
+  }
+  .registerSmsBtn{
+    color: rgb(29, 111, 233);
+    font-size: 0.34rem;
+
+  }
+</style>
+<script>
+  import { getCodeImg, getSmsCode ,getRegisterSmsCode,registerCheck,registerOn} from "../../api/login";
+  import Cookies from "js-cookie";
+  import { encrypt, decrypt } from "../../utils/jsencrypt";
+  //引用wx sdk
+  import wx from "weixin-js-sdk";
+  export default {
+    name: "login",
+    data() {
+      return {
+        registerShow:false,
+        showMessage:false,
+        smsCodeValue:"",
+        showKeyboard:false,
+        formData: {
+          username: "", //账号
+          password: "", //密码
+          code: null, //图片验证码
+          uuid: null, //识别uuid
+          mobile: null, //手机号
+          smsCode: null, //短信验证码
+          memberName:null, //身份信息
+          idcard:null, //身份号码
+          rememberMe:false
+        },
+        loading: false,
+        codeUrl: "", //验证码
+        isSmsLogin: false, //是否手机验证码
+        computeTime: 0,
+        active:1
+      };
+    },
+    created() {
+      this.getCode();
+      this.getCookie();
+      this.reset();
+    },
+    methods: {
+      reset(){
+
+      },
+      showPopup(){
+        this.showKeyboard = !this.showKeyboard
+      },
+      showMessagePop(){
+        this.showMessage = !this.showMessage
+      },
+      getCode() {
+        getCodeImg().then((res) => {
+          this.formData.uuid = res.uuid;
+          this.codeUrl = "data:image/gif;base64," + res.img;
+        });
+      },
+      getCookie() {
+        const username = Cookies.get("username");
+        const password = Cookies.get("password");
+        const rememberMe = Cookies.get("rememberMe");
+        this.formData = {
+          username: username === undefined ? this.formData.username : username,
+          password:
+            password === undefined ? this.formData.password : decrypt(password),
+          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+        };
+      },
+      getSmsCode() {
+        if (this.formData.code == "") {
+          this.$dialog.alert({
+            message: '图片验证码不能为空',
+          });
+          return false;
+        }
+        if (!this.computeTime) {
+          let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+          if (!myreg.test(this.formData.mobile)) {
+            this.$dialog.alert({
+              message: '手机号格式不正确',
+            });
+            return false;
+          }
+          /* getSmsCode(this.formData.mobile).then((res) => {
+             if (res.code === 200) {
+                this.$dialog.alert({
+                 message: '验证码已发送',
+               });
+               this.showKeyboard = !this.showKeyboard;
+               this.loginForm.uuid = res.uuid;
+               this.computeTime = 60;
+               this.timer = setInterval(() => {
+                 this.computeTime--;
+                 if (this.computeTime <= 0) {
+                   clearInterval(this.timer);
+                 }
+               }, 1000);
+             }
+           });*/
+        }
+      },
+      handleLogin(values) {
+        if (this.isSmsLogin) {
+          //短信登录
+          let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+          if (!myreg.test(this.formData.mobile)) {
+            this.$dialog.alert({
+              message: '手机号格式不正确',
+            });
+            return false;
+          } else if (this.formData.smsCode == "") {
+            this.$dialog.alert({
+              message: '短信验证码不能为空',
+            });
+            return false;
+          }
+          this.loading = true;
+          this.$store
+            .dispatch("SmsLogin", this.formData)
+            .then(() => {
+              this.$router.push({ path: "/onlineHomeIndex" }).catch(() => {});
+            })
+            .catch((error) => {
+              this.loading = false;
+            });
+        } else {
+          if (this.formData.rememberMe) {
+            Cookies.set("username", this.formData.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.formData.password), { expires: 30 });
+            Cookies.set("rememberMe", this.formData.rememberMe, { expires: 30 });
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove("rememberMe");
+          }
+          //账号密码登录
+          if (this.formData.username == "") {
+            this.$dialog.alert({
+              message: '账号不能为空',
+            });
+            return false;
+          } else if (this.formData.password == "") {
+            this.$dialog.alert({
+              message: '密码不能为空',
+            });
+            return false;
+          } else if (this.formData.code == "") {
+            this.$dialog.alert({
+              message: '图片验证码不能为空',
+            });
+            return false;
+          }
+          this.$store.dispatch("Login", this.formData)
+            .then(() => {
+              this.$router.push({ path: "/lawEnforcement/index_new" }).catch(() => {});
+            })
+            .catch((error) => {
+              console.log(error)
+              this.loading = false;
+              this.getCode();
+            });
+        }
+      },
+      getRegisterSmsCode(){
+        if (!this.computeTime) {
+          let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+          if (!myreg.test(this.formData.mobile)) {
+            this.$dialog.alert({
+              message: '手机号格式不正确',
+            });
+            return false;
+          }else if (this.formData.code == "") {
+            this.$dialog.alert({
+              message: '图片验证码不能为空',
+            });
+            return false;
+          }
+          if (this.active==2) {
+            let formObj = {
+              code :this.formData.code,
+              mobile:this.formData.mobile,
+              uuid:this.formData.uuid
+            }
+            getRegisterSmsCode(formObj).then((res) => {
+              console.log(res)
+              console.log(res.code == 200)
+              if(res.code == 200) {
+                this.$dialog.alert({
+                  message: '验证码已发送',
+                });
+                this.formData.uuid = res.uuid;
+                this.computeTime = 60;
+                this.timer = setInterval(() => {
+                  this.computeTime--;
+                  if (this.computeTime <= 0) {
+                    clearInterval(this.timer);
+                  }
+                }, 1000);
+              }
+            }).catch((res)=>{
+              if(res=='Error: 验证码已失效'){
+                this.getCode()
+              }
+            });
+          }
+        }
+      },
+      registerSubmit(){
+
+        //注册
+        if (this.formData.memberName == "") {
+          this.$dialog.alert({
+            message: '姓名不能为空',
+          });
+          return false;
+        } else if (this.formData.idcard == "") {
+          this.$dialog.alert({
+            message: '身份证号不能为空',
+          });
+          return false;
+        } else if (this.formData.mobile == "") {
+          this.$dialog.alert({
+            message: '手机号码不能为空',
+          });
+          return false;
+        }else if (this.formData.smsCode == "") {
+          this.$dialog.alert({
+            message: '短信验证码不能为空',
+          });
+          return false;
+        }
+        //registerCheck,registerOn
+        console.log(this.formData)
+        registerCheck(this.formData).then((res)=>{
+          if(res.code == 200){
+            registerOn(this.formData).then((res)=>{
+              if(res.code == 200){
+                //
+                this.$dialog.alert({
+                  message: '您的初始密码：'+res.password,
+                }).then(() => {
+                  this.$router.push({ path: "/onlineHome/workbench" }).catch(() => {});
+                });
+              }
+            })
+          }
+        })
+
+      }
+    },
+  };
+</script>

src/views/contracted/village/contractor/contractWord.vue

@@ -0,0 +1,263 @@
+<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>
+        </div>
+      </template>
+    </van-nav-bar>
+
+    <div class="tap_block">
+      <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p>
+      <p @click="$router.push({path:'/contracted/village/contractorFamilyDetail'})">家庭成员</p>
+      <p class="active">承包合同</p>
+      <p>承包地</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="原承包合同代码：" 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"
+        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="承包方名称：" 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"
+        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" />
+      <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>

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

@@ -0,0 +1,188 @@
+<template>
+  <div class="app-container">
+
+    <van-nav-bar title="B村" left-arrow fixed placeholder @click-left="onClickLeft" />
+
+    <div class="tap_block">
+      <p class="active">承包方</p>
+      <p>发包方</p>
+      <p>地块</p>
+      <p>地图</p>
+    </div>
+
+    <div class="search_main">
+
+      <van-search
+        v-model="value"
+        shape="round"
+        background="transparent"
+        placeholder="请输入姓名搜索"
+        @search="onSearch"
+      ></van-search>
+
+      <div class="search_btn">
+        <p class="active"> + 新增</p>
+      </div>
+
+    </div>
+
+    <div class="second_tap">
+      <p class="active">待调查 1553</p>
+      <p>挂起 527</p>
+      <p>已完成 321</p>
+    </div>
+
+    <div class="list_main">
+      <van-row style="color: #888888;font-size: 14px;">
+        <van-col span="5">姓名</van-col>
+        <van-col span="14">证件号</van-col>
+        <van-col span="5">成员数</van-col>
+      </van-row>
+      <van-swipe-cell v-for="(item,index) in 50">
+        <van-row @click="goDetail">
+          <van-col span="5">张三</van-col>
+          <van-col span="14">230381199770511239</van-col>
+          <van-col span="5" style="color: #f78200">7</van-col>
+        </van-row>
+        <template #right>
+          <van-button square type="danger" text="删除" />
+        </template>
+      </van-swipe-cell>
+    </div>
+
+
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "contractedVillageContractor",
+    data() {
+      return {
+        loading:false,
+        finished:true,
+        value:''
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      getList(){
+
+      },
+      onSearch(){
+
+      },
+      goDetail(){
+        this.$router.push({path:'/contracted/village/contractorDetail'});
+      }
+    },
+  };
+</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;
+  }
+
+  /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;
+  }
+
+  .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: 77vh;
+    overflow-y: scroll;
+    .van-col{
+      padding: 15PX 0;
+    }
+  }
+
+</style>

src/views/contracted/village/contractor/contractorDetail.vue

@@ -0,0 +1,256 @@
+<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>
+        </div>
+      </template>
+    </van-nav-bar>
+
+    <div class="tap_block">
+      <p class="active">承包方</p>
+      <p @click="$router.push({path:'/contracted/village/contractorFamily'})">家庭成员</p>
+      <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p>
+      <p>承包地</p>
+    </div>
+
+    <div class="list_main">
+      <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="名称：" 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"
+        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" />
+      <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="调查记事：" type="textarea" rows="3" 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',
+        }],
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      getList(){
+
+      },
+      onSearch(){
+
+      },
+      onConfirmTypeOptions(){
+
+      },
+      onConfirmZjTypeOptions(){
+
+      },
+
+    },
+  };
+</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>

src/views/contracted/village/contractor/contractorFamily.vue

@@ -0,0 +1,293 @@
+<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>
+        </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>承包地</p>
+    </div>
+
+    <div class="list_main">
+
+      <van-swipe-cell v-for="(item,index) in 10">
+
+        <div class="item" @click="goDetail">
+
+          <div class="item_left">
+            <div class="item_left_tt">
+              <p class="name">
+                <img src="../../../../../static/images/contracted/family_icon_01.png" alt="">
+                张三
+              </p>
+              <p>户主</p>
+              <p class="sex">
+                男
+                <img src="../../../../../static/images/contracted/family_icon_man.png" alt="">
+              </p>
+            </div>
+            <p class="id_card">
+              <img src="../../../../../static/images/contracted/family_icon_02.png" alt="">
+              230381199705551762
+            </p>
+          </div>
+          <p class="item_right">是</p>
+
+        </div>
+        <template #right>
+          <div class="operation">
+            <!-- delete 删除 edit编辑 view查看 list榜单 -->
+            <div class="opera_btn delete">
+              <p>删除</p>
+            </div>
+            <div class="opera_btn edit">
+              <p>分户</p>
+            </div>
+            <div class="opera_btn view">
+              <p>移户</p>
+            </div>
+            <div class="opera_btn list">
+              <p>设为<br/>户主</p>
+            </div>
+          </div>
+        </template>
+      </van-swipe-cell>
+
+      <p class="btn" @click="goDetail">新增</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',
+        }],
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      getList(){
+
+      },
+      onSearch(){
+
+      },
+      onConfirmTypeOptions(){
+
+      },
+      onConfirmZjTypeOptions(){
+
+      },
+      goDetail(){
+        this.$router.push({path:'/contracted/village/contractorFamilyDetail'});
+      }
+
+    },
+  };
+</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;
+    }
+  }
+  .list_main{
+    margin-top: 2vh;
+    text-align: center;
+    height: 88vh;
+    overflow-y: scroll;
+    padding-bottom: 15vh;
+    .item{
+      border-radius: 30px;
+      background: #fff;
+      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+      padding:25px 32px;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .item_left{
+        flex: 1;
+        .item_left_tt{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 14PX;
+          .name{
+            display: flex;
+            align-items: center;
+            font-size: 16PX;
+            img{
+              width: 5vw;
+              margin-right: 2vw;
+            }
+          }
+          .sex{
+            display: flex;
+            align-items: center;
+            img{
+              width: 3vw;
+              margin-left: 1vw;
+            }
+          }
+        }
+        .id_card{
+          display: flex;
+          align-items: center;
+          font-size: 14PX;
+          margin-top: 1vh;
+          img{
+            width: 5vw;
+            margin-right: 2vw;
+          }
+        }
+      }
+      .item_right{
+        margin-left: 15vw;
+        padding: 2PX 15PX;
+        background: #d0f4e5;
+        color: #2ecb8a;
+        border: 1px solid #8be3be;
+        border-radius: 30PX;
+      }
+    }
+    .operation{
+      display: flex;
+      align-items: center;
+      justify-content: right;
+      text-align: center;
+      background: #fff;
+      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+      height: 100%;
+      border-radius: 30px;
+      margin-left: 2vw;
+      overflow: hidden;
+      .opera_btn{
+        height: 100%;
+        display: flex;
+        align-items: center;
+        color: #ffffff;
+        padding: 0 5vw;
+        &.delete{
+          background:#ff3737;
+        }
+        &.edit{
+          background: #a5f790;
+        }
+        &.view{
+          background: #48e5a2;
+        }
+        &.list{
+          background: #fb9627;
+        }
+      }
+    }
+    .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: 2vh auto 0;
+      text-align: center;
+    }
+  }
+
+</style>

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

@@ -0,0 +1,302 @@
+<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>
+        </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>承包地</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>