确权APP

src/router/index.js

@@ -5558,6 +5558,33 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/contracted/village/employer/employer'], resolve)
   },
+  {
+    path: '/contracted/village/massif',
+    name: 'contractedVillageMassif',
+    meta: {
+      title: '地块',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/contracted/village/massif/massif'], resolve)
+  },
+  {
+    path: '/contracted/village/massifDetail',
+    name: 'contractedVillageMassifDetail',
+    meta: {
+      title: '地块',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/contracted/village/massif/massifDetail'], resolve)
+  },
+  {
+    path: '/contracted/village/map',
+    name: 'contractedVillageMap',
+    meta: {
+      title: '地图',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/contracted/village/map/map'], resolve)
+  },
 ];
 
 

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

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
 
-    <van-nav-bar title="B村" left-arrow fixed placeholder @click-left="onClickLeft" />
+    <van-nav-bar title="B村" left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" />
 
     <div class="tap_block">
       <p class="active">承包方</p>

src/views/contracted/village/employer/employer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
 
-    <van-nav-bar left-arrow fixed placeholder @click-left="onClickLeft" >
+    <van-nav-bar left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" >
       <template #title>
         <div class="tb_main">
           B村

src/views/contracted/village/map/map.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="app-container">
+
+    <van-nav-bar title="B村" left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" />
+
+    <div class="head">
+      <div class="tap_block">
+        <p @click="$router.push({path:'/contracted/village/contractor'})">承包方</p>
+        <p @click="$router.push({path:'/contracted/village/employer'})">发包方</p>
+        <p @click="$router.push({path:'/contracted/village/massif'})">地块</p>
+        <p class="active">地图</p>
+      </div>
+    </div>
+
+    <div style="position:relative;">
+      <div class="legend_main">
+        <div class="legend">
+          <p class="legend_tt">图例
+            <img src="../../../../../static/images/contracted/map_icon_01.png" alt="">
+          </p>
+          <div><i></i><p>承包地</p></div>
+          <div><i></i><p>自留地</p></div>
+          <div><i></i><p>机动地</p></div>
+          <div><i></i><p>开荒地</p></div>
+          <div><i></i><p>其他地</p></div>
+        </div>
+        <div class="legend_second">
+          <p class="legend_tt">
+            <img src="../../../../../static/images/contracted/map_icon_02.png" alt="">画图
+          </p>
+        </div>
+      </div>
+      <div class="mapBox"></div>
+    </div>
+
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "contractedVillageContractor",
+    data() {
+      return {
+        loading:false,
+        finished:true,
+        value:''
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  };
+</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;
+  }
+
+  /deep/ .van-nav-bar{
+    background: transparent;
+  }
+
+  /deep/ .van-nav-bar .van-icon{
+    color: #000000;
+  }
+
+  /deep/ .van-hairline--bottom::after{
+    border: none;
+  }
+
+  .head{
+    padding: 0 4vw;
+  }
+
+  .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;
+    }
+  }
+
+  .legend_main{
+    position: absolute;
+    top: 2vh;
+    right: 2vw;
+  }
+
+  .legend_second{
+    background: rgba(255,255,255,.5);
+    padding: 2vh;
+    border-radius: 10PX;
+    margin-top: 2vh;
+  }
+
+  .legend_tt{
+    font-size: 16PX;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    img{
+      width: 20PX;
+    }
+  }
+
+  .legend{
+    background: rgba(255,255,255,.5);
+    padding: 2vh;
+    border-radius: 10PX;
+    div{
+      display: flex;
+      align-items: center;
+      margin-top: 2vh;
+      i{
+        display: block;
+        width: 15PX;
+        height: 15PX;
+        border: 1px solid;
+        border-radius: 3PX;
+        margin-right: 10PX;
+      }
+      &:nth-child(2) i{
+        background: rgba(12,255,0,.5);
+        border-color: rgba(12,255,0,1);
+      }
+      &:nth-child(3) i{
+        background: rgba(255,137,5,.5);
+        border-color: rgba(255,137,5,1);
+      }
+      &:nth-child(4) i{
+        background: rgba(246,255,0,.5);
+        border-color: rgba(246,255,0,1);
+      }
+      &:nth-child(5) i{
+        background: rgba(168,0,255,.5);
+        border-color: rgba(168,0,255,1);
+      }
+      &:nth-child(6) i{
+        background: rgba(0,234,255,.5);
+        border-color: rgba(0,234,255,1);
+      }
+    }
+  }
+
+  .mapBox{
+    margin-top: 2vh;
+    height: 88vh;
+    width: 100%;
+    background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
+  }
+
+</style>

src/views/contracted/village/massif/massif.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="app-container">
 
-    <van-nav-bar title="B村" left-arrow fixed placeholder @click-left="onClickLeft" />
+    <van-nav-bar title="B村" left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" />
 
     <div class="tap_block">
-      <p class="active">承包方</p>
+      <p @click="$router.push({path:'/contracted/village/contractor'})">承包方</p>
       <p @click="$router.push({path:'/contracted/village/employer'})">发包方</p>
-      <p @click="$router.push({path:'/contracted/village/massif'})">地块</p>
+      <p class="active">地块</p>
       <p @click="$router.push({path:'/contracted/village/map'})">地图</p>
     </div>
 
@@ -27,21 +27,24 @@
     </div>
 
     <div class="second_tap">
-      <p class="active">待调查 1553</p>
-      <p>挂起 527</p>
-      <p>已完成 321</p>
+      <p class="active">承包</p>
+      <p>自留</p>
+      <p>机动</p>
+      <p>开荒</p>
+      <p>其他</p>
     </div>
 
+    <p class="page_tab">自留地 <span>5153亩</span></p>
     <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-col span="9">地块代码</van-col>
+        <van-col span="10">地块名称</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="9">45412353553</van-col>
+          <van-col span="10">西湖地地块名称</van-col>
           <van-col span="5" style="color: #f78200">7</van-col>
         </van-row>
         <template #right>
@@ -50,7 +53,6 @@
       </van-swipe-cell>
     </div>
 
-
   </div>
 </template>
 <script>
@@ -75,7 +77,7 @@
 
       },
       goDetail(){
-        this.$router.push({path:'/contracted/village/contractorDetail'});
+        this.$router.push({path:'/contracted/village/massifDetail'});
       }
     },
   };
@@ -171,14 +173,28 @@
     }
   }
 
+  .page_tab{
+    position: absolute;
+    background: rgba(255,255,255,.5);
+    padding: 3PX 10PX 15PX;
+    color: #828282;
+    right: 4vw;
+    border-top-left-radius: 10PX;
+    border-top-right-radius: 10PX;
+    margin-top: 1.5vh;
+    span{
+      color: #f78200;
+    }
+  }
+
   .list_main{
-    margin-top: 2vh;
+    margin-top: 4vh;
     overflow-y: scroll;
     text-align: center;
     background: #ffffff;
     border-top-left-radius: 10PX;
     border-top-right-radius: 10PX;
-    height: 77vh;
+    height: 75vh;
     overflow-y: scroll;
     .van-col{
       padding: 15PX 0;

src/views/contracted/village/massif/massifDetail.vue

@@ -0,0 +1,349 @@
+<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/contractor'})">承包方</p>
+      <p @click="$router.push({path:'/contracted/village/employer'})">发包方</p>
+      <p class="active">地块</p>
+      <p @click="$router.push({path:'/contracted/village/map'})">地图</p>
+    </div>
+
+    <div class="list_main">
+      <van-field v-model="value" label="地块代码：" placeholder="请输入地块代码" required :border="false" input-align="right" label-width="auto" />
+      <van-field v-model="value" label="地块名称：" placeholder="请输入地块名称" required :border="false" input-align="right" label-width="auto" />
+
+      <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="showSYQXZ" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="typeOptions"
+          value-key="dictLabel"
+          @confirm="onConfirmTypeOptions"
+          @cancel="showSYQXZ = false"
+        />
+      </van-popup>
+
+      <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="showDKLB" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="zjTypeOptions"
+          value-key="dictLabel"
+          @confirm="onConfirmZjTypeOptions"
+          @cancel="showDKLB = false"
+        />
+      </van-popup>
+
+      <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"
+        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"
+        right-icon="arrow-down"
+        label-width="auto"
+        readonly
+        clickable
+        @click="showTDYT = true"
+      />
+      <van-popup v-model="showTDYT" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="TDYTOptions"
+          value-key="dictLabel"
+          @confirm="onConfirmTDYTOptions"
+          @cancel="showTDYT = 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" label-width="auto" />
+      <van-field v-model="value" label="指界：" placeholder="请输入指界" required :border="false" input-align="right" label-width="auto" />
+      <van-field v-model="value" label="东面：" placeholder="请输入东面" required :border="false" input-align="right" label-width="auto" />
+      <van-field v-model="value" label="西面：" placeholder="请输入西面" required :border="false" input-align="right" label-width="auto" />
+      <van-field v-model="value" label="南面：" placeholder="请输入南面" required :border="false" input-align="right" label-width="auto" />
+      <van-field v-model="value" label="北面：" placeholder="请输入北面" required :border="false" input-align="right" label-width="auto" />
+      <van-field v-model="value" label="备注：" placeholder="请输入备注" required :border="false" input-align="right" label-width="auto" />
+
+      <div class="mapBox"></div>
+
+      <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,
+        showTDYT:false,
+        showSYQXZ:false,
+        showDKLB:false,
+        typeOptions:[{
+          dictLabel:'类型1',
+          dictValue:'1',
+        }],
+        zjTypeOptions:[{
+          dictLabel:'类型2',
+          dictValue:'1',
+        }],
+        TDYTOptions:[{
+          dictLabel:'类型2',
+          dictValue:'1',
+        }],
+        radio:1,
+        minDate: new Date(2020, 0, 1),
+        maxDate: new Date(2025, 10, 1),
+        currentDate: new Date(2021, 0, 17),
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      getList(){
+
+      },
+      onSearch(){
+
+      },
+      onConfirmTypeOptions(){
+
+      },
+      onConfirmZjTypeOptions(){
+
+      },
+      onConfirmTDYTOptions(){
+
+      },
+
+    },
+  };
+</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;
+    }
+  }
+
+  .mapBox{
+    width: 94%;
+    height: 50vw;
+    background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
+    border-radius: 10PX;
+    margin: 2vh auto;
+  }
+
+</style>