task 虫害APP

src/permission.js

@@ -195,6 +195,11 @@ const whiteList = [
   '/contracted/login',//登录
   '/contracted/index',//首页
 
+  //虫害APP
+  '/pest/pestLogin',//登录
+  '/pest/index',//首页
+  '/pest/agriculturalRecords',//农事记录
+
 ]
 
 router.beforeEach((to, from, next) => {
@@ -285,6 +290,8 @@ router.beforeEach((to, from, next) => {
         next(`/lawEnforcement/login?redirect=${to.fullPath}`)
       } else if (to.path.indexOf('/sunVillage') !== -1) {
         next(`/sunVillage/login`)
+      }  else if (to.path.indexOf('/pest') !== -1) {
+        next(`/pest/pestLogin`)
       } else {
         next(`/login?redirect=${to.fullPath}`)
       }

src/router/index.js

@@ -5954,6 +5954,34 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/contracted/user/passWord'], resolve)
   },
+  //<--------------------------------------虫害APP-------------------------------------->
+  {
+    path: '/pest/pestLogin',
+    name: 'pestLogin',
+    meta: {
+      title: '登录',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/pest/pestLogin'], resolve)
+  },
+  {
+    path: '/pest/index',
+    name: 'pestIndex',
+    meta: {
+      title: '首页',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/pest/index'], resolve)
+  },
+  {
+    path: '/pest/agriculturalRecords',
+    name: 'pestAgriculturalRecords',
+    meta: {
+      title: '农事记录',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/pest/agriculturalRecords'], resolve)
+  },
 ];
 
 

src/views/pest/agriculturalRecords.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="app-container">
+
+    <van-nav-bar
+      title="农事记录"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="$router.push({path:'/pest/index'})"
+    />
+
+
+
+    <div class="list_main">
+      <van-list>
+        <van-swipe-cell v-for="(item,index) in 10" :key="index" >
+          <div class="item" @click="goDetail(item)">
+            <img src="../../../static/images/pest/index/pest_index_icon_15.png" alt="">
+            <div class="info">
+              <div class="title">
+                <p class="news_title">物品名称名称名称名称</p>
+                <p class="tips_mark">仓库</p>
+              </div>
+              <div class="time">
+                <p>库存量 <span>+100</span></p>
+                <p>预警值 <span>50</span></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";
+  import { listSurveyTask } from "@/api/contracted";
+  import { getInfo, logout } from "@/api/login";
+
+  export default {
+    name: "contractedIndex",
+    data() {
+      return {
+        showPopover: false,
+        // 通过 actions 属性来定义菜单选项
+        actions: [
+          { text: '修改密码',value:1 },
+          { text: '退出登录',value:2 }
+        ],
+        nickName: null,
+        phone: null,
+        // 调查任务
+        surveyTask: {
+          'FINISHED': [],         // 已完成任务
+          'UNFINISHED': []        // 进行中任务
+        },
+        // 任务选项
+        taskOption: 'FINISHED',
+      };
+    },
+    created() {
+      this.getUserInfo();
+    },
+    methods: {
+      getUserInfo() {
+        getInfo().then(response => {
+          this.nickName = response.user.nickName;
+          this.phone = response.user.phonenumber;
+          this.getList(response.user.userId);
+        });
+      },
+      getList(userId){
+        listSurveyTask({userId: userId}).then(response => {
+          this.surveyTask = response.data;
+        });
+      },
+      goDetail(item){
+        // 调查任务完成状态：已完成标记为1，未完成标记为2
+        let status = '1';
+        if (item.surStatus === 'UNFINISHED') {
+          status = '2';
+        }
+        Cookies.set('taskStatus', status, { expires: 30 });
+        this.$router.push({path:'/contracted/village/contractor', query: { deptId: item.deptId, deptName: item.deptName }})
+      },
+      onSelect(action) {
+        switch (action.value) {
+          case 1:
+            this.$router.push({path:'/contracted/user/passWord'})
+            break;
+          case 2:
+            this.loginOut();
+            break;
+        }
+      },
+      changeTaskOption(option) {
+        this.taskOption = option;
+      },
+      loginOut() {
+        logout().then(res => {
+          this.$router.push({ path: '/contracted/login' });
+        })
+      }
+    },
+  };
+</script>
+<style scoped lang="scss">
+
+  .app-container{
+    background: #F2F6F2 url("../../../static/images/pest/index/pest_index_bg.png") no-repeat top;
+    background-size: 100% auto;
+    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;
+  }
+
+  .list_main{
+    margin-top: 15PX;
+    /*height: 35vh;*/
+    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: 14PX;
+            color: #1C234C;
+            text-align: center;
+            flex-shrink: 0;
+            background: linear-gradient(to right,#8AE15B,#BBFE9C);
+            padding: 5px 25px;
+            border-radius: 100vh;
+          }
+        }
+        .time{
+          font-size: 16PX;
+          color: #c1c1c1;
+          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;
+            span{
+              color: #5fe495;
+              font-weight: bold;
+            }
+          }
+          p:last-child{
+            font-size: 16PX;
+            text-align: center;
+            flex-shrink: 0;
+            span{
+              color: #5fe495;
+              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/pest/index.vue

@@ -0,0 +1,479 @@
+<template>
+  <div class="app-container">
+
+    <div class="header">
+      <div class="header_block">
+        <img class="header_img" src="../../../static/images/contracted/contracted_index_head.png" alt="">
+        <p>{{ nickName }}</p>
+      </div>
+      <div class="icon_block">
+        <img class="header_setting" src="../../../static/images/pest/index/index_icon_01.png" alt="">
+        <img class="header_setting" src="../../../static/images/pest/index/login_out.png" alt="">
+      </div>
+    </div>
+
+    <div class="tab">
+      <div class="tab_block">
+        <div style="flex: 1;">
+          <p>新住作物有限公司</p>
+          <p>部门名称名称</p>
+        </div>
+        <img src="../../../static/images/pest/index/pest_index_icon_4.png" alt="">
+      </div>
+      <div class="tab_block" @click="changeTaskOption('UNFINISHED')">
+        <div style="flex: 1;">
+          <div class="tab_tit">
+            <p>小麦</p>
+            <span>切换作物 ></span>
+          </div>
+          <p>返青期</p>
+        </div>
+        <img src="../../../static/images/pest/index/pest_index_icon_5.png" alt="">
+      </div>
+    </div>
+
+    <img src="../../../static/images/pest/index/pest_index_icon_6.png" width="100%" style="border-radius: 4vw;margin-top: 15px;box-shadow: 0 5PX 10PX #DDDDDD;" alt="">
+
+    <van-grid :column-num="4" :border="false" style="background-color: #ffffff;border-radius: 4vw;overflow: hidden;margin-top: 15px;box-shadow: 0 5PX 10PX #DDDDDD;">
+      <van-grid-item :to="{name:'pestAgriculturalRecords'}">
+        <img src="../../../static/images/pest/index/pest_index_icon_7.png" alt="">
+        <p>农事记录</p>
+      </van-grid-item>
+      <van-grid-item>
+        <img src="../../../static/images/pest/index/pest_index_icon_8.png" alt="">
+        <p>虫情监测</p>
+      </van-grid-item>
+      <van-grid-item>
+        <img src="../../../static/images/pest/index/pest_index_icon_9.png" alt="">
+        <p>土壤检测</p>
+      </van-grid-item>
+      <van-grid-item>
+        <img src="../../../static/images/pest/index/pest_index_icon_10.png" alt="">
+        <p>气象服务</p>
+      </van-grid-item>
+      <van-grid-item>
+        <img src="../../../static/images/pest/index/pest_index_icon_11.png" alt="">
+        <p>温湿度</p>
+      </van-grid-item>
+      <van-grid-item>
+        <img src="../../../static/images/pest/index/pest_index_icon_12.png" alt="">
+        <p>长势监测</p>
+      </van-grid-item>
+      <van-grid-item>
+        <img src="../../../static/images/pest/index/pest_index_icon_13.png" alt="">
+        <p>物联网设备</p>
+      </van-grid-item>
+    </van-grid>
+
+    <div class="list_tt">
+      <p>预警 <img src="../../../static/images/pest/index/pest_index_icon_14.png" style="vertical-align: middle;" alt=""></p>
+      <p>
+        <span>查看全部 ></span>
+      </p>
+    </div>
+
+    <div class="list_main">
+      <van-list>
+        <van-swipe-cell v-for="(item,index) in 10" :key="index" >
+          <div class="item" @click="goDetail(item)">
+            <img src="../../../static/images/pest/index/pest_index_icon_15.png" alt="">
+            <div class="info">
+              <div class="title">
+                <p class="news_title">物品名称名称名称名称</p>
+                <p class="tips_mark">仓库</p>
+              </div>
+              <div class="time">
+                <p>库存量 <span>+100</span></p>
+                <p>预警值 <span>50</span></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";
+  import { listSurveyTask } from "@/api/contracted";
+  import { getInfo, logout } from "@/api/login";
+
+  export default {
+    name: "contractedIndex",
+    data() {
+      return {
+        showPopover: false,
+        // 通过 actions 属性来定义菜单选项
+        actions: [
+          { text: '修改密码',value:1 },
+          { text: '退出登录',value:2 }
+        ],
+        nickName: null,
+        phone: null,
+        // 调查任务
+        surveyTask: {
+          'FINISHED': [],         // 已完成任务
+          'UNFINISHED': []        // 进行中任务
+        },
+        // 任务选项
+        taskOption: 'FINISHED',
+      };
+    },
+    created() {
+      this.getUserInfo();
+    },
+    methods: {
+      getUserInfo() {
+        getInfo().then(response => {
+          this.nickName = response.user.nickName;
+          this.phone = response.user.phonenumber;
+          this.getList(response.user.userId);
+        });
+      },
+      getList(userId){
+        listSurveyTask({userId: userId}).then(response => {
+          this.surveyTask = response.data;
+        });
+      },
+      goDetail(item){
+        // 调查任务完成状态：已完成标记为1，未完成标记为2
+        let status = '1';
+        if (item.surStatus === 'UNFINISHED') {
+          status = '2';
+        }
+        Cookies.set('taskStatus', status, { expires: 30 });
+        this.$router.push({path:'/contracted/village/contractor', query: { deptId: item.deptId, deptName: item.deptName }})
+      },
+      onSelect(action) {
+        switch (action.value) {
+          case 1:
+            this.$router.push({path:'/contracted/user/passWord'})
+            break;
+          case 2:
+            this.loginOut();
+            break;
+        }
+      },
+      changeTaskOption(option) {
+        this.taskOption = option;
+      },
+      loginOut() {
+        logout().then(res => {
+          this.$router.push({ path: '/contracted/login' });
+        })
+      }
+    },
+  };
+</script>
+<style scoped lang="scss">
+
+  .app-container{
+    background: #F2F6F2 url("../../../static/images/pest/index/pest_index_bg.png") no-repeat top;
+    background-size: 100% auto;
+    height: 100vh;
+    padding: 0 4vw;
+  }
+
+  /deep/ .van-popover__wrapper{
+    margin-left: auto;
+  }
+
+  /deep/ .van-grid-item{
+    &:nth-child(-n+4){
+      .van-grid-item__content {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  /deep/ .van-grid-item__content{
+    p{
+      margin-top: 15px;
+      color: #1C234C;
+    }
+  }
+
+  .header{
+    display: flex;
+    align-items: center;
+    padding: 5vh 0 0;
+    .header_img{
+      display: block;
+      width: 10vw;
+      height: 10vw;
+      border-radius: 50%;
+      border: 3PX solid #ffffff;
+    }
+    .header_block{
+      display: flex;
+      align-items: center;
+      background-color: rgba(255,255,255,.8);
+      padding-right: 5vw;
+      border-radius: 100vh;
+      p{
+        font-size: .4rem;
+        margin-left: 10px;
+      }
+    }
+    .icon_block{
+      display: flex;
+      margin-left: auto;
+    }
+    .header_setting{
+      width: 4.5vw;
+      margin-bottom: auto;
+      margin-left: 40px;
+    }
+  }
+
+  .tab{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .tab_block{
+      width: 45vw;
+      height: 18vw;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 2vw;
+      border-radius: 4vw;
+      margin-top: 3vh;
+      position: relative;
+      box-shadow: 0 5PX 10PX #DDDDDD;
+      &:nth-child(1){
+        background: #ffffff url("../../../static/images/pest/index/pest_index_icon_2.png") no-repeat center;
+        background-size: 100% 100%;
+      }
+      &:nth-child(2){
+        background: #ffffff url("../../../static/images/pest/index/pest_index_icon_3.png") no-repeat center;
+        background-size: 100% 100%;
+      }
+      img{
+        width: 10vw;
+        display: block;
+        margin-left: 2vw;
+      }
+      .tab_tit{
+        display: flex;
+        align-items: center;
+        span{
+          font-size: .25rem;
+          border: 1px solid #FCC762;
+          background-color: #FED565;
+          color: #F58D1F;
+          padding: 2px 10px;
+          border-radius: 100vh;
+          margin-left: auto;
+        }
+      }
+      p{
+        display: flex;
+        align-items: center;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        word-break: break-all;
+        overflow: hidden;
+        &:nth-child(1){
+          font-size: .35rem;
+        }
+        &:nth-child(2){
+          font-size: .3rem;
+          align-items: end;
+          line-height: 1;
+          margin-top: 2vw;
+          color: rgba(28,35,76,.5);
+        }
+      }
+    }
+  }
+
+  .list_tt{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 3vh;
+    p{
+      &:first-child{
+        font-size: .38rem;
+      }
+      &: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: 35vh;
+    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: 14PX;
+            color: #1C234C;
+            text-align: center;
+            flex-shrink: 0;
+            background: linear-gradient(to right,#8AE15B,#BBFE9C);
+            padding: 5px 25px;
+            border-radius: 100vh;
+          }
+        }
+        .time{
+          font-size: 16PX;
+          color: #c1c1c1;
+          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;
+            span{
+              color: #5fe495;
+              font-weight: bold;
+            }
+          }
+          p:last-child{
+            font-size: 16PX;
+            text-align: center;
+            flex-shrink: 0;
+            span{
+              color: #5fe495;
+              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/pest/pestLogin.vue

@@ -0,0 +1,470 @@
+<template>
+  <div class="app-container">
+    <div class="title">
+      <img style="display: block;width: 90%;margin: 0 auto;" src="../../../static/images/pest/pest_login_header.png" alt="">
+    </div>
+    <van-tabs v-model="active" color="#1D6FE9" :swipeable="true" style="margin-top:0.5rem;padding:0 10px;">
+      <van-tab title="密码登录" name="1">
+        <van-form style="padding:50px 0;height: 100vh;" v-if="!showMessage">
+          <van-field
+            v-model="formData.username"
+            placeholder="请输入手机号/账号"
+            left-icon="contact"
+            :rules="[{ required: true, message:''  }]"
+          />
+          <van-field
+            v-model="formData.password"
+            type="password"
+            left-icon="edit"
+            style="margin-top: 20px"
+            placeholder="请输入密码"
+            :rules="[{ required: true, message:''  }]"
+          />
+          <div style="display: flex;width: 90%;margin: 20px auto 0;">
+            <van-field
+              v-model="formData.code"
+              left-icon="shield-o"
+              center
+              clearable
+              placeholder="图形验证码"
+            />
+            <div style="border-radius: 100vh;width: 120px;margin-left: 20px;overflow: hidden;flex-shrink: 0;">
+              <img style="width: 120px;display: block;transform: scale(1.1);" :src="codeUrl" @click="getCode" />
+            </div>
+          </div>
+
+          <van-checkbox style="float: left;margin-top:10px;margin-left:20px;" v-model="formData.rememberMe" checked-color="#44da6e" shape="square">{{showMessage ? "记住手机号" : "记住密码"}}</van-checkbox>
+          <p style="float: right;margin-top:10px;margin-right:20px;color:#44da6e ">忘记密码</p>
+          <div class="clear"></div>
+          <div style="margin: 50px 16px 16px;border-radius: 100vh;overflow: hidden;">
+            <van-button block type="info" native-type="submit" color="linear-gradient(to right, #a4f68b, #38d375)" @click="handleLogin">登录</van-button>
+<!--            <p style="text-align: center;margin-top: 20px;color:#878787 " @click="showMessagePop">短信验证码登录</p>-->
+          </div>
+        </van-form>
+      </van-tab>
+      <van-tab title="短信登录" name="2">
+        <van-form style="padding:50px 0;height: 100vh;">
+          <van-field
+            v-model="formData.mobile"
+            left-icon="phone-o"
+            name="请输入手机号"
+            placeholder="请输入手机号"
+            :rules="[{ required: true, message: '' }]"
+          />
+          <div style="display: flex;width: 90%;margin: 20px auto 0;">
+            <van-field
+              v-model="formData.code"
+              left-icon="shield-o"
+              center
+              clearable
+              placeholder="图形验证码"
+            />
+            <div style="border-radius: 100vh;width: 120px;margin-left: 20px;overflow: hidden;flex-shrink: 0;">
+              <img style="width: 120px;display: block;transform: scale(1.1);" :src="codeUrl" @click="getCode" />
+            </div>
+          </div>
+          <div style="margin: 50px 16px 16px;">
+            <van-button block type="info" native-type="submit" color="linear-gradient(to right, #a4f68b, #38d375)" @click="getSmsCode">获取验证码</van-button>
+<!--            <p style="text-align: center;margin-top: 20px;color:#878787 " @click="showMessagePop">密码登录</p>-->
+          </div>
+        </van-form>
+<!--        <van-form style="margin:50px 0;">-->
+<!--          <van-field-->
+<!--            v-model="formData.memberName"-->
+<!--            name="请输入姓名"-->
+<!--            placeholder="请输入姓名"-->
+<!--            :rules="[{ required: true, message: '' }]"-->
+<!--          />-->
+<!--          <van-field-->
+<!--            v-model="formData.idcard"-->
+<!--            name="请输入身份证号"-->
+<!--            style="margin-top: 20px"-->
+<!--            placeholder="请输入身份证号"-->
+<!--            :rules="[{ required: true, message: '' }]"-->
+<!--          />-->
+<!--          <van-field-->
+<!--            v-model="formData.mobile"-->
+<!--            name="请输入手机号"-->
+<!--            style="margin-top: 20px"-->
+<!--            placeholder="请输入手机号"-->
+<!--            :rules="[{ required: true, message: '' }]"-->
+<!--          />-->
+<!--           <van-field-->
+<!--            v-model="formData.code"-->
+<!--            center-->
+<!--            clearable-->
+<!--            label="验证码"-->
+<!--            placeholder="图形验证码"-->
+<!--          >-->
+<!--            <template #button>-->
+<!--              <img style="width: 100px" :src="codeUrl" @click="getCode" />-->
+<!--            </template>-->
+<!--          </van-field>-->
+<!--          <van-field-->
+<!--            v-model="formData.smsCode"-->
+<!--            style="margin-top: 20px"-->
+<!--            placeholder="请输入验证码"-->
+<!--            :rules="[{ required: true, message: '' }]"-->
+<!--          >-->
+<!--            <template #button>-->
+<!--              &lt;!&ndash; <van-button size="mini" type="info" @click="getRegisterSmsCode" >获取验证码</van-button> &ndash;&gt;-->
+<!--              <div  class="registerSmsBtn" @click="getRegisterSmsCode">{{-->
+<!--                computeTime > 0 ? `(${computeTime}s)已发送` : "获取短信码"-->
+<!--              }}</div>-->
+
+
+<!--            </template>-->
+<!--          </van-field>-->
+<!--          <div style="margin: 50px 16px 16px;">-->
+<!--            <van-button block type="info" native-type="submit" @click="registerSubmit">注册</van-button>-->
+<!--          </div>-->
+<!--        </van-form>-->
+      </van-tab>
+    </van-tabs>
+    <van-popup v-model="showKeyboard" :style="{ height: '100%',width:'100%' }" >
+      <van-nav-bar
+        left-arrow
+        fixed
+        placeholder
+        @click-left="showPopup"
+      />
+      <div style="padding: 20px">
+        <h1>输入短信验证码</h1>
+        <h3 style="color: #878787">验证码已发送至{{(formData.mobile+"").substr(0,3) + "****" + (formData.mobile+"").substr(7)}}，请在下方输入框内输入4位数字验证码</h3>
+      </div>
+      <van-password-input
+        :value="smsCodeValue"
+        :length="4"
+        :focused="showKeyboard"
+        @focus="showKeyboard = true"
+      />
+      <van-number-keyboard
+        v-model="smsCodeValue"
+        :show="showKeyboard"
+        theme="custom"
+        close-button-text="完成"
+      />
+    </van-popup>
+  </div>
+</template>
+<style scoped>
+  .app-container{
+    background: url("../../../static/images/pest/pest_login_bg.png") no-repeat center;
+    background-size: 100% 100%;
+    height: 100vh;
+    overflow: hidden;
+  }
+  /deep/ .van-tabs__content{
+    background: #ffffff;
+    border-radius: 30px;
+  }
+  /deep/ .van-tabs__nav--line{
+    background: transparent;
+  }
+  .title{
+    /*padding-top: 20%;*/
+    width: 100%;
+    margin: 0 auto;
+  }
+  .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;
+  }
+  /deep/ .van-tabs__line{
+    background-color: transparent!important;
+    width: 0;
+    height: 0;
+    border-top: .5rem solid transparent;
+    border-right: .5rem solid transparent;
+    border-left: .5rem solid transparent;
+    border-bottom: .3rem solid #ffffff;
+  }
+  /deep/ .van-cell{
+    background: #f6f8f4;
+    border-radius: 100vh;
+    width: 90%;
+    margin: 0 auto;
+  }
+</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: "yinnongLogin",
+  data() {
+    return {
+      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: "/pest/index" }).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: "/pest/index" }).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: "/pest/index" }).catch(() => {});
+              });
+            }
+          })
+        }
+      })
+
+    }
+  },
+};
+</script>