1

src/components/js/menu.js

@@ -0,0 +1,5 @@
+// 菜单
+export const menuOne = [
+  { name: '我的额度', index: '/cashing/quota', icon: 'after-sale' },
+  { name: '我的订单', index: '/cashing/order', icon: 'cart-o' },
+];

src/layout/common/foot.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="foot">
+    <el-row>
+      <el-col :span="24" class="main">
+        <van-tabbar route>
+          <van-tabbar-item v-for="(i, index) in menuList" :key="index" :to="i.index" :icon="i.icon">{{ i.name }}</van-tabbar-item>
+        </van-tabbar>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const { menuOne, menuTwo, menuThr } = require('@c/js/menu');
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'foot',
+  props: {
+    type: { type: Number, default: 1 },
+  },
+  components: {},
+  data: function () {
+    return {
+      menuList: [],
+    };
+  },
+  created() {},
+  methods: {
+    searchMenu() {
+      if (this.type == 1) {
+        this.$set(this, `menuList`, menuOne);
+      } else if (this.type == 2) {
+        this.$set(this, `menuList`, menuTwo);
+      } else if (this.type == 3) {
+        this.$set(this, `menuList`, menuThr);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    type: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.searchMenu();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/router/index.js

@@ -33,10 +33,16 @@ const web = [
     component: () => import('../views/apply/apply.vue'),
   },
   {
-    path: '/cashing',
-    name: 'cashing',
-    meta: { title: '我要兑付' },
-    component: () => import('../views/cashing/index.vue'),
+    path: '/cashing/quota',
+    name: 'cashing_quota',
+    meta: { title: '我的额度' },
+    component: () => import('../views/cashing/quota.vue'),
+  },
+  {
+    path: '/cashing/order',
+    name: 'cashing_order',
+    meta: { title: '我的订单' },
+    component: () => import('../views/cashing/order.vue'),
   },
   {
     path: '/service',
@@ -60,7 +66,7 @@ const router = new VueRouter({
 router.beforeEach((to, from, next) => {
   document.title = `${to.meta.title} `;
   const token = localStorage.getItem('token');
-  if (to.path == '/apply' || to.path == '/cashing' || to.path == '/service') {
+  if (to.path == '/apply' || to.path == '/cashing/quota' || to.path == '/service') {
     if (!token) {
       next(`/login?path=${to.path}`);
     } else {

src/views/cashing/index.vue

@@ -1,12 +1,14 @@
 <template>
-  <div id="index">
+  <div id="order">
     <el-row>
       <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 :span="24" class="info" :style="{ height: clientHeight + 'px' }"> 我的订单 </el-col>
+        <el-col :span="24" class="foot">
+          <foot :type="1"></foot>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -14,12 +16,14 @@
 
 <script>
 import top from '@/layout/common/top.vue';
+import foot from '@/layout/common/foot.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  name: 'index',
+  name: 'order',
   props: {},
   components: {
     top,
+    foot,
   },
   data: function () {
     return {
@@ -28,7 +32,7 @@ export default {
   },
   async created() {},
   mounted() {
-    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 90;
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 80;
     this.$set(this, `clientHeight`, clientHeight);
   },
   methods: {},
@@ -60,7 +64,7 @@ export default {
     overflow-y: auto;
   }
   .foot {
-    height: 50px;
+    height: 40px;
     overflow: hidden;
     border-top: 1px solid #f1f1f1;
   }

src/views/cashing/quota.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="quota">
+    <el-row>
+      <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">
+          <foot :type="1"></foot>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import top from '@/layout/common/top.vue';
+import foot from '@/layout/common/foot.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'quota',
+  props: {},
+  components: {
+    top,
+    foot,
+  },
+  data: function () {
+    return {
+      clientHeight: '',
+    };
+  },
+  async created() {},
+  mounted() {
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 80;
+    this.$set(this, `clientHeight`, clientHeight);
+  },
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    height: 40px;
+    overflow: hidden;
+    border-bottom: 1px solid #f1f1f1;
+  }
+  .info {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .foot {
+    height: 40px;
+    overflow: hidden;
+    border-top: 1px solid #f1f1f1;
+  }
+}
+</style>

src/views/index.vue

@@ -7,7 +7,7 @@
         </el-col>
         <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
           <van-button @click="$router.push('apply')">我要申领</van-button>
-          <van-button @click="$router.push('cashing')">我要兑付</van-button>
+          <van-button @click="$router.push('/cashing/quota')">我要兑付</van-button>
           <van-button @click="$router.push('service')">我要服务</van-button>
         </el-col>
         <el-col :span="24" class="foot"> 底部 </el-col>