驼驼-商城

htmldev/loan/src/router/index.js

@@ -37,9 +37,37 @@ const routes = [
     }
   },
   {
-    path: '/loan/mine', // 我的
-    name: 'loanMine',
-    component: _import('views/loan/mine/index')
+    path: '/loan/mall', // 商城入口
+    component: _import('views/loan/mall/index'),
+    children: [
+      {
+        path: '', // 销售
+        name: 'loanIndex',
+        component: _import('views/loan/index/index'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
+      },
+      {
+        path: '/loan/calculator', // 贷款工具
+        name: 'loanCalculator',
+        component: _import('views/loan/calculator/index'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
+      },
+      {
+        path: '/loan/mine', // 我的
+        name: 'loanMine',
+        component: _import('views/loan/mine/index'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
+      }
+    ]
   },
   {
     path: '/loan/invite', // 邀请记录

htmldev/loan/src/views/loan/calculator/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>calculator</div>
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

htmldev/loan/src/views/loan/index/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>marketing</div>
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

htmldev/loan/src/views/loan/mall/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="ttyf-container">
+    <keep-alive>
+      <router-view v-if="$route.meta.keepAlive"></router-view>
+    </keep-alive>
+    <router-view v-if="!$route.meta.keepAlive"></router-view>
+    <div class="footer">
+      <router-link :to="{path: '/loan/mall'}" replace>
+        <img src="./image/tab_xiaoshou_nor@2x.png" alt="" v-show="$route.name !== 'loanIndex'">
+        <img src="./image/tab_xiaoshou_sel@2x.png" alt="" v-show="$route.name === 'loanIndex'">
+        <span>销售</span>
+      </router-link>
+      <router-link :to="{path: '/loan/calculator'}" replace>
+        <img src="./image/tab_jisuanqi_nor@2x.png" alt="" v-show="$route.name !== 'loanCalculator'">
+        <img src="./image/tab_jisuanqi_sel@2x.png" alt="" v-show="$route.name === 'loanCalculator'">
+        <span>贷款工具</span>
+      </router-link>
+      <router-link :to="{path: '/loan/mine'}" replace>
+        <img src="./image/tab_wode_nor@2x.png" alt="" v-show="$route.name !== 'loanMine'">
+        <img src="./image/tab_wode_sel@2x.png" alt="" v-show="$route.name === 'loanMine'">
+        <span>我的</span>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style lang="scss" scoped>
+.ttyf-container {
+  padding-bottom: 200px;
+}
+
+.footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  border-radius: 10px 10px 0 0;
+  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.04);
+  background: #fff;
+
+  a {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 4px 0;
+
+    img {
+      width: 29px;
+      height: 28px;
+    }
+
+    span {
+      margin-top: 1px;
+      line-height: 14px;
+      font-size: 10px;
+      color: #999;
+    }
+  }
+}
+</style>