1

src/layout/common/page.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="page">
+    <el-row>
+      <el-col :span="24" class="main">
+        <van-pagination v-model="currentPage" @change="changePage" :total-items="total" :items-per-page="limit" :show-page-size="5" force-ellipses />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'page',
+  props: {
+    total: { type: Number },
+    limit: { type: String, default: () => '6' },
+  },
+  components: {},
+  data: function () {
+    return {
+      currentPage: 1,
+    };
+  },
+  created() {},
+  methods: {
+    changePage(page) {
+      this.$emit('search', { skip: (page - 1) * this.limit });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/layout/common/top.md

@@ -0,0 +1,7 @@
+<!-- 头部类型 -->
+# topType
+## topType=="1" 带有查询，查询方法:search
+
+## topType=="2" 带有标题和返回，返回方法：upback
+
+## topType=="3" 带有返回和查询，返回方法：upback，查询方法：search

src/layout/common/top.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="top">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one" v-if="topType == '1'">
+          <van-search v-model="searchName" placeholder="请输入信息标题" @search="search" />
+        </el-col>
+        <el-col :span="24" class="two" v-else-if="topType == '2'">
+          <van-nav-bar :title="this.$route.meta.title" :left-arrow="leftArrow" @click-left="upBack">
+            <template #left>
+              <span v-if="leftArrow"><van-icon name="arrow-left" /><span style="color: #409eff">返回</span> </span></template
+            >
+          </van-nav-bar>
+        </el-col>
+        <el-col :span="24" class="thr" v-else-if="topType == '3'">
+          <el-col :span="4" class="back" @click.native="upBack"> <van-icon name="arrow-left" />返回 </el-col>
+          <el-col :span="20" class="search">
+            <van-search v-model="searchName" placeholder="请输入赠与人名称" @search="search" />
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'top',
+  props: {
+    topType: { type: String, default: () => '1' },
+    // 只有类型为2时，有用
+    leftArrow: { type: Boolean, default: () => true },
+  },
+  components: {},
+  data: function () {
+    return {
+      searchName: '',
+    };
+  },
+  created() {},
+  methods: {
+    // 查询
+    search() {
+      this.$emit('search', { searchName: this.searchName });
+    },
+    // 返回
+    upBack() {
+      this.$emit('upBack');
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    /deep/.van-search {
+      padding: 3px 5px;
+    }
+  }
+  .two {
+    /deep/.van-nav-bar__content {
+      height: 40px;
+    }
+    /deep/.van-icon {
+      top: 2px;
+    }
+  }
+  .thr {
+    .back {
+      color: #409eff;
+      padding: 8px 0;
+      text-align: center;
+      .van-icon {
+        top: 3px;
+      }
+    }
+    .search {
+      /deep/.van-search {
+        padding: 2px 5px 2px 0px;
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -2,27 +2,30 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import store from '@/store/index';
 const jwt = require('jsonwebtoken');
-
+const originalPush = VueRouter.prototype.push;
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch((err) => err);
+};
 Vue.use(VueRouter);
-const routes = [
+const web = [
   {
     path: '/',
-    meta: { title: 'index', isleftarrow: false },
+    name: 'index',
+    meta: { title: '网站首页' },
     component: () => import('../views/index.vue'),
   },
 ];
-
+const routes = [...web];
 const router = new VueRouter({
   mode: 'history',
-  base: process.env.NODE_ENV === 'development' ? '' : process.env.VUE_APP_ROUTER,
+  base: process.env.VUE_APP_ROUTER,
   routes,
 });
 // router.beforeEach((to, from, next) => {
 //   document.title = `${to.meta.title} `;
-//   let token = localStorage.getItem('token');
-//   console.log(token);
-//   if (to.path == '/account/index') {
-//     if (token == null) {
+//   const token = localStorage.getItem('token');
+//   if (to.path == '/adminCenter/homeIndex') {
+//     if (!token) {
 //       next('/login');
 //     } else {
 //       let user = jwt.decode(token);
@@ -35,10 +38,5 @@ const router = new VueRouter({
 //     next();
 //   }
 // });
-const originalPush = VueRouter.prototype.push;
-VueRouter.prototype.push = function push(location, onResolve, onReject) {
-  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject);
-  return originalPush.call(this, location).catch((err) => err);
-};
 
 export default router;

src/views/index.vue

@@ -1,22 +1,41 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="main"> test </el-col>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <top topType="2" :leftArrow="false"></top>
+        </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }"> 内容 </el-col>
+        <el-col :span="24" class="foot"> 底部 </el-col>
+      </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import top from '@/layout/common/top.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    top,
+  },
   data: function () {
-    return {};
+    return {
+      clientHeight: '',
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 90;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+  methods: {
+    search({ skip = 0, limit = 10, searchName, ...info } = {}) {},
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
@@ -33,4 +52,21 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #f1f1f1;
+  }
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .foot {
+    height: 50px;
+    overflow: hidden;
+    border-top: 1px solid #f1f1f1;
+  }
+}
+</style>