lixin-web/webapp/router/admin.js

vue and bootstrap

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
import { AsyncComp } from "_Will";
import { kebabCase, zipObject } from "lodash";

import LoadingBar from "../component/loading-bar";

export const menuConfig = {
  ["个人中心"]: [
    ["安全中心", "个人资料", "修改密码"],
    [
      '(SafeCenter)?|{"sync":true}',
      "Profile",
      [
        "ModifyPw",
        '(LoginPw)?|{"meta":{"deKeepAlive":true}}',
        'PayPw|{"meta":{"deKeepAlive":true}}'
      ]
    ],
    "user-center"
  ],
  ["财务中心"]: [
    ["充值提款", "充提记录"],
    [
      ["", '(Recharge)?', "Withdraw"],
      [
        "PayReport",
        '(RechargeReport)?|{"meta":{"deKeepAlive":true}}',
        'WithdrawReport|{"meta":{"deKeepAlive":true}}',
      ]
    ],
    "pay"
  ],
  ["订单报表"]:[
    ["游戏记录","追号记录","账变记录","彩票报表"],
    [
      'GameOrder|{"meta":{"deKeepAlive":true}}',
      'ChaseOrder|{"meta":{"deKeepAlive":true}}',
      'BillReport|{"meta":{"deKeepAlive":true}}',
      'LottoReport|{"meta":{"deKeepAlive":true}}'
    ],
    "report"
  ],
  ["代理管理"]:[
    ["团队总览","开户中心","团队管理","在线会员","游戏记录","账变记录","团队报表"],
    [
      "Overview","AccountCenter",
      'Manage|{"params":"username","meta":{"deKeepAlive":true}}',
      "Online","GameOrder","BillReport","TeamReport"
    ],
    "team"
  ]
};

// import SafeCenter from '../component/admin/user-center/SafeCenter'
// import after compiled can't resolve, webapp/router/admin.js:76,static require must '' not es6 template string ``
const SafeCenter = require('../component/admin/user-center/SafeCenter')

const menuValues = Object.values(menuConfig);

export const submenuLabels = menuValues.map(i => i[0].join());

export const pathRegexpOmit = /\(|\)|\?/g;

export const pathName = (name, dir) =>
(pathRegexpOmit.test(name)
  ? `(${kebabCase(name.replace(pathRegexpOmit, ""))})?`
  : kebabCase(name)) || dir;

export const menuIndexs = menuValues
  .map(i => {
    return zipObject(
      i[1].map(
        j =>
        kebabCase(
          (Array.isArray(j) ? j[0] : j).split("|")[0].replace(pathRegexpOmit, "")
        ) || i[2]
      ),
      i[0]
    );
  })
  .reduce((prev, next) => {
    return { ...prev, ...next };
  }, {});



const getRouteCfg = (i, dir, parent) => {
  let routeCfg = {};
  let name = i.split("|");
  let cfg
  let sync
  let params
  if (name.length > 1) {
    cfg = JSON.parse(name[1])
    sync = cfg.sync
    params = cfg.params;
    ['sync','params'].forEach(i => cfg[i] && delete cfg[i])
    routeCfg = cfg
  }
  name = name[0];
  return {
    path: `${parent ? "/" : ""}${pathName(name, dir)}${params ? '/:' + params + '?' : ''}`,
    component: sync ?
      eval(name.replace(pathRegexpOmit, "")) :
      AsyncComp('admin',`${dir}/${name.replace(pathRegexpOmit, "") || "index"}`),
    ...routeCfg
  };
};

const router = new Router({
  routes: [].concat(...menuValues.map(i => i[1].map(j => [j, i[2]]))).map(i => {
    let components = i[0];
    const dir = i[1];

    const hasChild = Array.isArray(components);
    let name = hasChild ? components[0] : components;

    const { path, component, ...routeCfg } = getRouteCfg(name, dir, true);

    if (hasChild) {
      return {
        path,
        component,
        ...routeCfg,
        children: components.slice(1).map(i => getRouteCfg(i, dir))
      };
    } else {
      return {
        path,
        component,
        ...routeCfg
      }
    }
  })
  // [
  // { path: '/(SafeCenter)?', component(resolve){import('../component/admin/user-center/SafeCenter').then(component => resolve(component))}},
  // {
  //   path: '/modifyPw',
  //   component: ModifyPw,
  //   children: [
  //     //replace(/\(|\)|\?/g,'') => login
  //     { path: '(login)?', component: LoginPw, meta: { deKeepAlive: true } },
  //     { path: 'pay', component: PayPw, meta: { deKeepAlive: true } }
  //   ]
  // },
  // { path: '/perinfo', component: PerInfo },
  // // { path: '/overview', component: deferLoad('team/overview') },
  // { path: '/overview',
  //   component(resolve){import('../component/admin/team/overview').then(component => resolve(component))},
  //   meta: { deKeepAlive: true }
  // },
  // {
  //   path: '/pay',
  //   component: deferLoad('pay/index'),
  //   children: [
  //     { path: '(recharge)?', component: deferLoad('pay/Recharge'), meta: { deKeepAlive: true } },
  //     { path: 'withDraw', component: deferLoad('pay/WithDraw') }
  //   ]
  // }

  // ]
  //   .concat({ path: '*',redirect: '/'})
});

const toPay = path => path.split("/")[1].includes('pay')

router.beforeEach((to, from, next) => {
  LoadingBar.start();
  //recharge withDraw tabs no scroll top
  if (!(toPay(to.path) && toPay(from.path))) {
    window.scroll(0, 0);
  }
  next();
});

router.afterEach((to, from, next) => {
  LoadingBar.finish();
});

export default router;