TBtools-个人中心改版

htmldev/TBTools/src/router/index.js

@@ -6,7 +6,6 @@
  */
 import Vue from 'vue'
 import Router from 'vue-router'
-// import { clearLoginInfo } from '@/utils'
 
 Vue.use(Router)
 
@@ -91,16 +90,55 @@ export const toolsRoutes = [
 // 个人中心
 const mineRoutes = [
   {
-    path: '/mine-paycheck',
-    component: _import('modules/mine/mine-paycheck'),
-    name: 'minePaycheck',
-    meta: { title: '账户余额充值' }
-  },
-  {
-    path: '/mine-wallet',
-    component: _import('modules/mine/mine-wallet'),
-    name: 'mineWallet',
-    meta: { title: '我的钱包' }
+    path: '/mine',
+    component: _import('modules/mine/index'),
+    children: [
+      {
+        path: '',
+        component: _import('modules/mine/user'),
+        name: 'mine',
+        meta: {
+          title: '个人中心',
+          isTab: true
+        }
+      },
+      {
+        path: '/order-check-order',
+        component: _import('modules/mine/order/order-check-order'),
+        name: 'orderCheckOrder',
+        meta: {
+          title: '订单查询',
+          isTab: true
+        }
+      },
+      {
+        path: '/order-check-package',
+        component: _import('modules/mine/order/order-check-package'),
+        name: 'orderCheckPackage',
+        meta: {
+          title: '包裹查询',
+          isTab: true
+        }
+      },
+      {
+        path: '/pay-check',
+        component: _import('modules/mine/pay/pay-check'),
+        name: 'payCheck',
+        meta: {
+          title: '充值',
+          isTab: true
+        }
+      },
+      {
+        path: '/pay-wallet',
+        component: _import('modules/mine/pay/pay-wallet'),
+        name: 'payWallet',
+        meta: {
+          title: '我的钱包',
+          isTab: true
+        }
+      }
+    ]
   }
 ]
 
@@ -121,15 +159,7 @@ const mainRoutes = {
     { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
     ...toolsRoutes,
     ...mineRoutes
-  ],
-  beforeEnter (to, from, next) {
-    // let token = Vue.cookie.get('token')
-    // if (!token || !/\S/.test(token)) {
-    //   clearLoginInfo()
-    //   next({ name: 'login' })
-    // }
-    next()
-  }
+  ]
 }
 
 const router = new Router({

htmldev/TBTools/src/views/main-content.vue

@@ -91,3 +91,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.site-content--tabs {
+  padding: 0;
+}
+</style>

htmldev/TBTools/src/views/main-navbar.vue

@@ -20,16 +20,16 @@
             </el-dropdown-menu>
           </el-dropdown>
         </li>
+        <li>
+          <router-link :to="{name: 'home'}">礼品商城</router-link>
+        </li>
       </ul>
       <template v-if="token">
         <el-dropdown class="TT-login" :show-timeout="0" placement="bottom" style="cursor: pointer;">
-          <span class="el-dropdown-link">个人中心</span>
+          <span class="el-dropdown-link">我的</span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>
-              <router-link :to="{name: 'minePaycheck'}">充值</router-link>
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <router-link :to="{name: 'mineWallet'}">我的钱包</router-link>
+              <router-link :to="{path: '/mine'}">个人中心</router-link>
             </el-dropdown-item>
             <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
             <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>

htmldev/TBTools/src/views/modules/mine/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="TT-mine-wrapper">
+    <MainSidebar/>
+    <div class="mine-main">
+      <keep-alive>
+        <router-view/>
+      </keep-alive>
+    </div>
+  </div>
+</template>
+
+<script>
+import MainSidebar from './main-sidebar'
+
+export default {
+  name: 'index',
+  components: {
+    MainSidebar
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.TT-mine-wrapper {
+  position: relative;
+  left: 0;
+  top: 0;
+  // 左侧导航宽度
+  padding-left: 230px;
+}
+
+.mine-main {
+  width: 100%;
+}
+</style>

htmldev/TBTools/src/views/modules/mine/main-sidebar.vue

@@ -0,0 +1,114 @@
+<template>
+  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
+    <div class="site-sidebar__inner">
+      <el-menu
+        :default-active="menuActiveName || 'mine'"
+        :collapse="sidebarFold"
+        :collapseTransition="false"
+        class="site-sidebar__menu">
+        <el-menu-item index="mine" @click="$router.push({ path: '/mine' })">
+          <icon-svg name="admin" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">个人中心</span>
+        </el-menu-item>
+        <el-submenu index="order">
+          <template slot="title">
+            <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
+            <span>订单管理</span>
+          </template>
+          <el-menu-item index="demo-echarts" @click="$router.push({ name: 'orderCheckOrder' })">
+            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
+            <span slot="title">订单查询</span>
+          </el-menu-item>
+          <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'orderCheckPackage' })">
+            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
+            <span slot="title">包裹查询</span>
+          </el-menu-item>
+        </el-submenu>
+        <el-submenu index="pay">
+          <template slot="title">
+            <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
+            <span>我的钱包</span>
+          </template>
+          <el-menu-item index="demo-echarts" @click="$router.push({ name: 'payCheck' })">
+            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
+            <span slot="title">充值</span>
+          </el-menu-item>
+          <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'payWallet' })">
+            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
+            <span slot="title">流水</span>
+          </el-menu-item>
+        </el-submenu>
+      </el-menu>
+    </div>
+  </aside>
+</template>
+
+<script>
+import { isURL } from '@/utils/validate'
+
+export default {
+  data () {
+    return {}
+  },
+  computed: {
+    sidebarLayoutSkin: {
+      get () { return this.$store.state.common.sidebarLayoutSkin }
+    },
+    sidebarFold: {
+      get () { return this.$store.state.common.sidebarFold }
+    },
+    menuActiveName: {
+      get () { return this.$store.state.common.menuActiveName },
+      set (val) { this.$store.commit('common/updateMenuActiveName', val) }
+    },
+    mainTabs: {
+      get () { return this.$store.state.common.mainTabs },
+      set (val) { this.$store.commit('common/updateMainTabs', val) }
+    },
+    mainTabsActiveName: {
+      get () { return this.$store.state.common.mainTabsActiveName },
+      set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
+    }
+  },
+  watch: {
+    $route: 'routeHandle'
+  },
+  created () {
+    this.routeHandle(this.$route)
+  },
+  methods: {
+    // 路由操作
+    routeHandle (route) {
+      if (route.meta.isTab) {
+        // tab选中, 不存在先添加
+        var tab = this.mainTabs.filter(item => item.name === route.name)[0]
+        if (!tab) {
+          tab = {
+            menuId: route.meta.menuId || route.name,
+            name: route.name,
+            title: route.meta.title,
+            type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
+            iframeUrl: route.meta.iframeUrl || '',
+            params: route.params,
+            query: route.query
+          }
+          this.mainTabs = this.mainTabs.concat(tab)
+        }
+        this.menuActiveName = tab.menuId + ''
+        this.mainTabsActiveName = tab.name
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.site-sidebar {
+  position: absolute;
+  left: -20px;
+  top: -20px;
+  bottom: -20px;
+  width: 230px;
+  min-height: 100vh;
+}
+</style>

htmldev/TBTools/src/views/modules/mine/order/order-check-order.vue

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

htmldev/TBTools/src/views/modules/mine/order/order-check-package.vue

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

htmldev/TBTools/src/views/modules/mine/mine-paycheck.vue → htmldev/TBTools/src/views/modules/mine/pay/pay-check.vue

@@ -1,12 +1,12 @@
 <template>
   <el-row class="pay-check">
-    <el-col :span="10" :offset="2">
+    <el-col :span="10">
       <h3 class="TT-title">请打开支付扫一扫扫码充值</h3>
       <div class="qrcode-wrap">
         <img :src="payConfig.aliPayImg" alt="">
       </div>
     </el-col>
-    <el-col :span="10">
+    <el-col :span="10" :offset="2">
       <ul class="TT-steps">
         <li>
           <p>
@@ -39,11 +39,11 @@
         <el-row>
           <el-col :span="11">
             <p class="label">QQ：112012666</p>
-            <img class="qrcode" src="../../../../static/img/kefu0000.jpeg" alt="">
+            <img class="qrcode" src="../../../../../static/img/kefu0000.jpeg" alt="">
           </el-col>
           <el-col :span="11" :offset="2">
             <p class="label">微信二维码</p>
-            <img class="qrcode" src="../../../../static/img/kefu0001.jpeg" alt="">
+            <img class="qrcode" src="../../../../../static/img/kefu0001.jpeg" alt="">
           </el-col>
         </el-row>
       </div>
@@ -53,7 +53,7 @@
 
 <script>
 export default {
-  name: 'mine-paycheck',
+  name: 'pay-check',
   data () {
     return {
       payConfig: {}
@@ -81,10 +81,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.pay-check {
-  margin-top: 100px;
-}
-
 .TT-title {
   font-size: 20px;
   font-weight: bold;

htmldev/TBTools/src/views/modules/mine/mine-wallet.vue → htmldev/TBTools/src/views/modules/mine/pay/pay-wallet.vue

@@ -2,7 +2,6 @@
   <div>
     <el-row>
       <el-col class="TT-header">
-        <h3>流水记录</h3>
         <p>
           <span class="TT-label">您拥有金币：</span>
           <span class="TT-value">{{ userInfo.userBalance ? userInfo.userBalance.toFixed(2) : '0.00'}}</span>
@@ -77,6 +76,7 @@
 
 <script>
 export default {
+  name: 'pay-wallet',
   data () {
     return {
       dataForm: {
@@ -109,7 +109,7 @@ export default {
       userInfo: {}
     }
   },
-  created () {
+  activated () {
     this.getDataList()
   },
   methods: {

htmldev/TBTools/src/views/modules/mine/user.vue

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