手机端

src/permission.js

@@ -9,7 +9,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register', '/app/login', '/app/list']
+const whiteList = ['/login', '/register', '/app/login', '/app/list', '/app/edit']
 
 const isWhiteList = (path) => {
   return whiteList.some(pattern => isPathMatch(pattern, path))

src/router/index.js

@@ -87,43 +87,7 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
-  },
-  { //登录页
-    path: '/app/login',
-    name: 'appLogin',
-    meta: {
-      title: '登录',
-      hidden: true,
-    },
-    component: (resolve) => require(['@/views/app/login'], resolve)
-  },
-  { //首页
-    path: '/app/index',
-    name: 'appIndex',
-    meta: {
-      title: '首页',
-      hidden: true,
-    },
-    component: (resolve) => require(['@/views/app/index'], resolve)
-  },
-  { //用户页
-    path: '/app/user',
-    name: 'appUser',
-    meta: {
-      title: '首页',
-      hidden: true,
-    },
-    component: (resolve) => require(['@/views/app/user'], resolve)
-  },
-  { //用户页
-    path: '/app/list',
-    name: 'appList',
-    meta: {
-      title: '列表',
-      hidden: true,
-    },
-    component: (resolve) => require(['@/views/app/list'], resolve)
-  },
+  }
 ]
 
 // 动态路由，基于用户权限动态去加载
@@ -211,7 +175,61 @@ export const dynamicRoutes = [
         meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
       }
     ]
-  }
+  },
+  { //登录页
+    path: '/app/login',
+    name: 'appLogin',
+    meta: {
+      title: '登录',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/app/login'], resolve)
+  },
+  { //首页
+    path: '/app/index',
+    name: 'appIndex',
+    meta: {
+      title: '首页',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/app/index'], resolve)
+  },
+  { //用户页
+    path: '/app/user',
+    name: 'appUser',
+    meta: {
+      title: '首页',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/app/user'], resolve)
+  },
+  { //用户页
+    path: '/app/list',
+    name: 'appList',
+    meta: {
+      title: '列表',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/app/list'], resolve)
+  },
+  { //用户页
+    path: '/app/edit',
+    name: 'appEdit',
+    meta: {
+      title: '修改',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/app/edit'], resolve)
+  },
+  { //用户页
+    path: '/app/map',
+    name: 'appMap',
+    meta: {
+      title: '地图',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/app/map'], resolve)
+  },
 ]
 
 // 防止连续点击多次路由报错

src/views/app/edit.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="home_wrapper">
+    <van-nav-bar
+      title="地块信息维护"
+      left-arrow
+      placeholder
+      safe-area-inset-top
+      @click-left="onClickLeft"
+    />
+
+      <div class="main">
+        <p class="title"><i></i>经营信息</p>
+        <van-field v-model="value" label="经营面积" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="经营方式" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="经营对象类型" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="经营对象名称" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="经营对象证件类型" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="经营对象证件号码" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="是否签订合同" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="经营开始时间" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="经营结束时间" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="承包金额" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="兑现金额" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="尚欠金额" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="年收益" placeholder="请输入" input-align="right" label-width="auto" />
+        <van-field v-model="value" label="备注信息" placeholder="请输入" input-align="right" label-width="auto" />
+      </div>
+
+      <p class="subClass">提交</p>
+
+    </div>
+</template>
+
+<script>
+  // import { getMenuApp } from "@/api/app/index";
+  import Cookies from "js-cookie";
+  export default {
+    name: "appEdit",
+    data() {
+      return {
+        loading: false,
+        finished: false,
+        value:''
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      onClickLeft(){
+        history.back(-1);
+      },
+      getList(){
+
+      }
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  p{margin: 0;}
+  .home_wrapper{
+    width: 100vw;
+    min-height: 100vh;
+    background: #F6F9FB;
+  }
+  .van-nav-bar{
+    background: linear-gradient( 173deg, #91E2D3 0%, #CDFCF0 100%);
+    ::v-deep.van-icon{
+      color: #000000;
+    }
+  }
+  .main{
+    width: 94%;
+    margin: 3vw auto;
+    padding: 3vw;
+    background-color: #ffffff;
+    border-radius: 10px;
+    overflow: hidden;
+
+  }
+  .title{
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    i{
+      width: 5px;
+      height: 20px;
+      display: block;
+      background-color: #29D2AF;
+      margin-right: 10px;
+    }
+  }
+  .subClass{
+    background: linear-gradient( 270deg, #53E4A5 0%, #24DBDB 100%);
+    border-radius: 50px 50px 50px 50px;
+    width: 90%;
+    margin: 3vw auto;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    font-size: 18px;
+  }
+
+</style>

src/views/app/list.vue

@@ -11,7 +11,7 @@
       <div class="search_box">
         <div class="left">
           <p>已清查<van-icon name="play" /></p>
-          <van-field v-model="value" left-icon="smile-o" placeholder="请输入用户名" />
+          <van-field v-model="value" left-icon="search" placeholder="请输入用户名" />
         </div>
         <van-button type="primary" round >搜索</van-button>
       </div>
@@ -57,12 +57,16 @@
       return {
         loading: false,
         finished: false,
+        value:''
       };
     },
     created() {
 
     },
     methods: {
+      onClickLeft(){
+        history.back(-1);
+      },
       getList(){
 
       }

src/views/app/map.vue

@@ -0,0 +1,223 @@
+<template>
+    <div class="home_wrapper">
+    <van-nav-bar
+      title="土地列表管理"
+      left-arrow
+      placeholder
+      safe-area-inset-top
+      @click-left="onClickLeft"
+    />
+
+      <div class="search_box">
+        <div class="left">
+          <p>已清查<van-icon name="play" /></p>
+          <van-field v-model="value" left-icon="search" placeholder="请输入用户名" />
+        </div>
+        <van-button type="primary" round >搜索</van-button>
+      </div>
+
+      <div class="list_main">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="getList"
+        >
+          <!--1-->
+          <van-swipe-cell right-width="200" class="item" v-for="(item,index) in 10" :key="index">
+            <div class="item_box" @click="$router.push({name:'',query:{id:item.id}})">
+              <div class="head_block">
+                <div class="title">334656556565</div>
+                <div class="describe">已清查</div>
+              </div>
+              <div class="order_block">
+                <div class="order">名称名称名称名称名称名</div>
+                <div class="describe">67.08</div>
+              </div>
+            </div>
+            <template #right>
+              <div style="background-color: #29D2AF;height: 100%">属性<br/>修改</div>
+              <div style="background-color: #0E82EB;height: 100%">经营<br/>修改</div>
+              <div style="background-color: #ee0a24;height: 100%">删除</div>
+            </template>
+          </van-swipe-cell>
+
+        </van-list>
+      </div>
+
+    </div>
+</template>
+
+<script>
+  // import { getMenuApp } from "@/api/app/index";
+  import Cookies from "js-cookie";
+  export default {
+    name: "appMap",
+    data() {
+      return {
+        loading: false,
+        finished: false,
+        value:''
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      onClickLeft(){
+        history.back(-1);
+      },
+      getList(){
+
+      }
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  p{margin: 0;}
+  .home_wrapper{
+    width: 100vw;
+    min-height: 100vh;
+    background: #F6F9FB;
+  }
+  .van-nav-bar{
+    background: linear-gradient( 173deg, #91E2D3 0%, #CDFCF0 100%);
+    ::v-deep.van-icon{
+      color: #000000;
+    }
+  }
+  .list_main{
+    padding:0 3vw;
+    .item{
+      border-radius: 10px;
+      background: #fff;
+      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
+      margin-bottom: 20px;
+      .item_box{
+        padding:15px;
+      }
+      .head_block{
+        display: flex;
+        align-items: center;
+        width: 100%;
+        .title{
+          flex:1;
+          font-size: 16px;
+          color: #252525;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          padding-right: 20px;
+        }
+        .describe{
+          font-size: 14px;
+          color: #29D2AF;
+        }
+      }
+      .order_block{
+        display: flex;
+        align-items: center;
+        width: 100%;
+        margin-top: 10px;
+        .order{
+          flex: 1;
+          font-size: 16px;
+          color: #666666;
+        }
+        .describe{
+          font-size: 22px;
+          color: #29D2AF;
+        }
+      }
+      .function_block{
+        height: 46px;
+        display: flex;
+        align-items: center;
+        .time{
+          display: flex;
+          flex: 1;
+          align-items: center;
+          font-size: 24px;
+          color: #858585;
+          .icon{
+            width: 25px;
+            height: 25px;
+            display: block;
+            margin-right: 8px;
+          }
+        }
+        .state{
+          /*flex: 1;*/
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          &.sell{
+            color: #f69600;
+          }
+          &.scrap{
+            color: #858585;
+          }
+          &.normal{
+            color: #68c000;
+          }
+        }
+        .value{
+          flex:1;
+          display: flex;
+          align-items: center;
+          justify-content:flex-end;
+          font-size: 24px;
+          color: #858585;
+          .amount{
+            color: #eb1616;
+          }
+        }
+      }
+
+    }
+  }
+  ::v-deep .van-swipe-cell__right{
+    display: flex;
+    align-items: center;
+    width: 200PX;
+    margin-left: 5PX;
+    a,div{
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #ffffff;
+      font-size: 14PX;
+      height: 100%;
+      flex: 1;
+    }
+  }
+
+  .search_box{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 94%;
+    margin: 2vh auto;
+    .left{
+      display: flex;
+      align-items: center;
+      flex: 1;
+      background-color: #ffffff;
+      border-radius: 50vh;
+      padding-left: 6%;
+      overflow: hidden;
+      margin-right: 3vw;
+    }
+    p{
+      flex-shrink: 0;
+    }
+    button{
+      flex-shrink: 0;
+      background: linear-gradient( 271deg, #53E4A5 0%, #24DBDB 100%);
+      border: none;
+    }
+  }
+
+</style>