09/19 16:30

开始动态侧边栏

src/App.vue

@@ -201,6 +201,14 @@ input[type="number"] {
       color: #fff;
       background-color: #14928a;
     }
+    .squrt {
+      position: absolute;
+      left: -25px;
+      top: 8px;
+      height: 34px;
+      width: 8px;
+      background-color: #14928a;
+    }
   }
 }
 </style>

src/api/silder.js

@@ -15,6 +15,6 @@ export function addSilder (data) {
 export function getSilder () {
   return request({
     url: '/api-auth/menu/findByUser',
-    method: 'get',
+    method: 'get'
   })
 }

src/layout/components/Sidebar/index.vue

@@ -30,7 +30,8 @@ export default {
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters([
-      'sidebar'
+      'sidebar',
+      'permission_routes'
     ]),
     routes () {
       return this.$router.options.routes

src/router/index.js

@@ -119,8 +119,7 @@ export const constantRoutes = [
   }, {
     path: '/teacher',
     component: Layout,
-    redirect: '/teacher/teacherList',
-    meta: { title: '老师管理' },
+    meta: { title: '老师管理', icon: '' },
     children: [
       {
         path: 'teacherList',
@@ -369,5 +368,7 @@ export function resetRouter () {
   const newRouter = createRouter()
   router.matcher = newRouter.matcher // reset router
 }
-
+export const asyncRoutes = {
+  Layout: Layout,
+}
 export default router

src/store/getters.js

@@ -3,6 +3,7 @@ const getters = {
   device: state => state.app.device,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
-  name: state => state.user.name
+  name: state => state.user.name,
+  permission_routes: state => state.permission.routes,
 }
 export default getters

src/store/index.js

@@ -4,6 +4,7 @@ import getters from './getters'
 import app from './modules/app'
 import settings from './modules/settings'
 import user from './modules/user'
+import permission from './modules/permission'
 
 Vue.use(Vuex)
 
@@ -11,7 +12,8 @@ const store = new Vuex.Store({
   modules: {
     app,
     settings,
-    user
+    user,
+    permission,
   },
   getters
 })

src/store/modules/permission.js

@@ -0,0 +1,84 @@
+import { asyncRoutes, constantRoutes } from '@/router'
+import { getSilder } from '@/api/silder'
+import { removeToken } from '@/utils/auth'
+import Layout from '@/layout'
+
+/**
+ * 遍历接口菜单添加页面
+ * @param asyncRoutes
+ * @param getMenu
+ */
+function generateAsyncRouter (asyncRoutes, data) {
+  if (!data) {
+    return []
+  }
+  data.forEach((item, index) => {
+    item.component = asyncRoutes[item.component]
+    if (item.children && item.children.length > 0) {
+      generateAsyncRouter(asyncRoutes, item.children)
+    }
+  })
+  return data
+}
+
+/**
+ * 判断平台端添加首页
+ * @param type
+ */
+// const type = getters.type
+
+function getHome (type) {
+  var home = {
+    path: '/',
+    component: Layout,
+    redirect: '',
+    children: []
+  }
+  // if (type.includes(1)) {
+  home.redirect = '/dashboard'
+  home.children.push({
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: () => import('@/views/dashboard/index'),
+    meta: { title: '首页', icon: 'dashboard' }
+  })
+  // }
+  return home
+}
+
+const state = {
+  routes: [],
+  addRoutes: [],
+  type: '' // 登录的平台类型
+}
+
+const mutations = {
+  SET_ROUTES: (state, routes) => {
+    state.addRoutes = routes
+    state.routes = constantRoutes.concat(routes)
+  }
+}
+
+const actions = {
+  generateRoutes ({ commit }, roles) {
+    return new Promise(resolve => {
+      // 获取接口返回的权限菜单
+      getSilder().then(res => {
+        console.log(res.data);
+        var accessedRoutes
+        // 生成异步路由表
+        accessedRoutes = generateAsyncRouter(asyncRoutes, res.data)
+        var result = accessedRoutes.concat({ path: '*', redirect: '/404', hidden: true })
+        commit('SET_ROUTES', result)
+        resolve(result)
+      })
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/views/teamBuild/components/teamBaseInfo.vue

@@ -184,6 +184,49 @@
       </div>
     </div>
     <div class="baseRight">
+      <!-- 移动端样式展示 -->
+      <header>乐团注册</header>
+      <div class="section">
+        <h2 class="title line_bottom">课程</h2>
+        <p class="indate line_bottom"
+           key="indate-price">有效期至：2019年9月1号 <span>现价:￥580</span></p>
+
+        <div class="options"
+             key="class-list">
+          <div class="option">
+            <div class="0_hd"><i class="check_default check_active"></i></div>
+            <div class="o_bd">乐团声部训练</div>
+          </div>
+          <div class="option">
+            <div class="0_hd"><i class="check_default check_active"></i></div>
+            <div class="o_bd">乐团合奏训练</div>
+          </div>
+          <div class="option">
+            <div class="0_hd"><i class="check_default check_active"></i></div>
+            <div class="o_bd">基础技能训练</div>
+          </div>
+          <div class="option">
+            <div class="0_hd"><i class="check_default check_active"></i></div>
+            <div class="o_bd">假期集中训练</div>
+          </div>
+        </div>
+        <div class="coutInfo">
+          <i class="trumpet_icon"></i>年度安排十个月训练，共计168课时，120元/课时，原价20160元，现仅支付560元/月（约合34.5元/课时）
+        </div>
+        <div class="buy">
+          <div class="price">
+            <p class="oldprice">
+              <del class="text">原价</del>
+              <del>{{ orderInfo.marketPrice }}￥</del>
+            </p>
+            <p class="now_price">
+              <span class="text">仅需支付</span>
+              <span>{{ orderInfo.referencePrice }}￥</span>
+            </p>
+          </div>
+          <a>购买</a>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -205,6 +248,14 @@ export default {
       },
       checkList: [], // 选中的集合
       chioseMonth: '', // 选中的月份
+      result: {},
+      instrument: {},
+      baseInfo: {},
+      money: 580,
+      orderInfo: {
+        marketPrice: 0, // 原价总金额
+        referencePrice: 0, // 现价总金额
+      }, // 金额列表，金额计算
     }
   },
   mounted () {
@@ -217,14 +268,15 @@ export default {
 </script>
 <style lang="scss">
 .base-container {
+  overflow: auto;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
+  flex-wrap: nowrap;
   font-size: 16px;
   color: #444;
   .banseLeft {
-    overflow: auto;
-    width: 1117px;
+    width: 1050px;
     .head {
       height: 48px;
       line-height: 48px;
@@ -242,12 +294,13 @@ export default {
       padding: 15px 11px;
     }
     .checkRow {
+      width: 1050px;
       padding-left: 28px;
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
-      // height: 72px;
-      // line-height: 72px;
+      flex-wrap: nowrap;
+      overflow: auto;
       .el-checkbox {
         line-height: 72px;
         .el-checkbox__input.is-checked + .el-checkbox__label {
@@ -329,8 +382,196 @@ export default {
       }
     }
   }
-  // .baseRight {
-  // }
+  .baseRight {
+    width: 375px;
+    margin-left: 25px;
+    header {
+      width: 375px;
+      height: 40px;
+      line-height: 40px;
+      color: #000;
+      font-size: 16px;
+      background: #fff;
+      box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.07);
+      text-align: center;
+      margin-bottom: 6px;
+    }
+    .section {
+      width: 375px;
+      padding: 16px 22px 10px;
+      background: #fff;
+      margin-bottom: 10px;
+      .line_bottom {
+        border-bottom: 1px solid #ededed;
+      }
+      > .title {
+        font-size: 20px;
+        line-height: 28px;
+        font-weight: bold;
+      }
+      .indate {
+        font-size: 12px;
+        padding: 5px 0;
+        display: flex;
+        justify-content: space-between;
+        span {
+          color: #fa101d;
+        }
+      }
+
+      .coutInfo {
+        font-size: 14px;
+        color: #f85043;
+        text-align: left;
+        border-top: 1px solid #ededed;
+        padding: 12px 0 0 25px;
+        margin-top: 10px;
+        position: relative;
+        .trumpet_icon {
+          width: 14px;
+          height: 12px;
+          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAyZJREFUSA21Vk1IVFEUPufOezNilJXQD2UQRERamWhBaUWOSS3U0SawdgZai2gR0aoQXPSDm3JRCbm0xZBjbkQZS0KDjKywDCIIkoKKEIkm35uZezr32X0jQ+bY2IU359xzzj3fPXe++4PwDy0W8JdKgjYCWOkzzWIM9X5NN42RbqCKoxOHl1nR2FVJ1MRgqGzxhCxg8VDp6TSRTpCKsQL+aitqjwPRKQ3mjCVygFPz2MGKQqvG/zxW56+c7ZsXkIJH1liB8hARdQPButmD59WR8mUCuqy6ynwd686OmpsN++XjLUiYrZ0g5E6SdJmAVri2FMWDnnIz3P8gxex07Rp/owS6jQij3h1lu7G5Oe5UOF1bcc5+MTRFlBiTEH/iflLe+htYKsh0oHwzBcpztd3bHWlHxPtEUMTFHFV2YdceOglStnLiZGV6xEIlwbBF+JQaqpa6Qw246OiUOKOkICnPus4MFYGik7m80Z6MXtCpfKHIGBN6kIm2x66tLBJM7q3amak0DbqEgD84eQNzwiUkE+Wmk1vGjwtmnydTID0eQ5EpLoDZTGvjr4b2absXzGdKlwC73FloZ6aSSTKocjC7kyu3Ku8D2xOAuOk/ANKEAwhivZKqYXt7jFdyAnl7LTrgDMTcv4sOyCddnlOVnKlU6dTYaPKS5hHg5IIO77nnnfTw0h1QPTTgjWv9MrGB97ki5zvh/JmuJzOFgv4cPm9rGO6TUVD6SGezhV2sdF7OEcEB49qRqbRi0MKVLEEBHXxu8i6YabzMpx1NGJ18OIjr2pG5pHqu7r13efY1ncsK+rfxvtzPW2LY29U3Krxd/Xe4c55PiKgO+meJsNeHVIIdPd/dHHFoUToitSnpsDQrHGn1FpbmoMcoEIJPA/0BNvFEJlVgOi0rPPAWwwPfdKy6nphE1c71tL3snrK796EOSpVUX7Xano628cBgqk/157oP1Y1PcTkChDEwzRJfqNfhyrz7EO/2fPaFI8dAiGqe3sc/gc5pI3wtPFCrwVTcvBXOTuY8on7GrqBMvms8wjhodvWl/YhaEKAG//1MvMHXUO5Cn4m/ACXBMJBwQaFpAAAAAElFTkSuQmCC)
+            no-repeat center;
+          background-size: contain;
+          position: absolute;
+          left: 0;
+          top: 14px;
+        }
+      }
+    }
+
+    .options {
+      padding-top: 8px;
+      .oc {
+        &:last-child {
+          border-top: 1px solid #ededed;
+          margin-top: 8px;
+          padding-top: 9px;
+        }
+      }
+      .protocol {
+        padding-left: 20px;
+        font-size: 10px;
+        line-height: 14px;
+      }
+      .option {
+        line-height: 26px;
+        font-size: 15px;
+        display: flex;
+        align-items: center;
+        position: relative;
+        .o_bd {
+          flex: 1;
+          .c {
+            font-size: 12px;
+          }
+        }
+        .o_ft {
+          font-size: 12px;
+          color: #fa101d;
+          del {
+            color: #aaaaaa;
+            font-size: 11px;
+          }
+        }
+        .check_default {
+          margin-right: 8px;
+          display: block;
+          width: 14px;
+          height: 14px;
+          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABK0lEQVQ4T6WSP0vDQBjGn3MIiYX+CbhYG7BR7CL5ANmS2SWQ7H4DZ3ed/QbuOcjinGz5ANGloqmQ2i5CmhZqQgZPLjRQFYS2N9297/t73+fuHoK15bruASHkijF2AeB0lXohhDwwxu4cx/moy0m9oZRaAO5VVW0qioJ2u12lsixDkiSI43gB4NK2bY/HK5BDoihSXdf3Wq0WZrMZPpfLCtxvNNDpdDCfzxGG4VdRFDaHyUreq2maTUmS8DYaoSzL9RtAEAQc9/vI8xy+7y8YYyeEUnqjquq1pml4Hg7/QHUHDp8NBoiiiMu+5RMfDcM45wXv4/GPSb8PR71eFQqC4ImDuWVZ4nQyQZqm/4KyLOOw24XnecVO4HZSd3kc7pbNv2NrA+xkuRrexOTfqpPUy7sW3D4AAAAASUVORK5CYII=)
+            no-repeat center;
+          background-size: contain;
+          &.check_active {
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABaUlEQVQ4T2NkQAKHPD1F2TmYChgZGHwZGBlUwVL/GW7/Z2DY/PPHvwl227e/hilnhDFOBXoHMbKxzhd18eATtnNg4FJQBEt9e3Cf4e2hAwyv9+z49P/X70Sz9VvXgcTBGkGa2EREVqtU1jFxSUgy/F+1geHf6bNgjUymxgyMYQEM3148Z7jT3vTv15s3oSDNjCDncfKx39Fs7+Xj+vWX4U9YAgPDo8fIPmBgkJNlYFm1gOEbGzPD9criT98//VRhPB3o2yrq5V0lFx3H8MfCBVMTzAiQ5hN7GB4tXcTwctvmNsZTgd6XNDt6dbmOn2X4W1CBahMaj3lCB8M3S2OG6xXFlxlPBXl/N16+juNfURXD/6Wr8GpkjA5jYOprYzgbGfSDAo1wp55j+FtQTsCpnQzfLI0gTiU7cMiODuwJYD3Dv9PnoAnAiIExLBAzAVCU5GCawc7mYCn4z/APJZEzMjBt/v7jD0oiBwAFDdbhAm8qEQAAAABJRU5ErkJggg==)
+              no-repeat center;
+            background-size: contain;
+          }
+        }
+      }
+    }
+
+    .configuration {
+      padding-right: 5px;
+      padding-bottom: 9px;
+      .title {
+        background: rgba(246, 246, 246, 1);
+        height: 1px;
+        position: relative;
+        margin: 15px 0;
+        span {
+          position: absolute;
+          left: 12px;
+          top: -9px;
+          display: inline-block;
+          background-color: #fff;
+          font-size: 10px;
+          padding: 0 4px;
+        }
+      }
+
+      .content {
+        font-size: 12px;
+        padding-left: 16px;
+        line-height: 22px;
+        color: #acacac;
+      }
+
+      .options {
+        padding-top: 0;
+        padding-left: 16px;
+        .option {
+          font-size: 14px;
+          color: #6f6f6f;
+        }
+      }
+    }
+
+    .buy {
+      margin-top: 200px;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 60px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      border-top: 1px solid #ffe9e9e9;
+      color: #000000;
+      font-size: 12px;
+      background: #fff;
+      .price {
+        flex: 1;
+        font-size: 16px;
+      }
+      font-size: 16px;
+      span {
+        color: #fa101d;
+      }
+      .text {
+        font-size: 12px;
+        width: 60px;
+        display: inline-block;
+        color: #000;
+      }
+      del {
+        color: #b5b5b5;
+        &.text {
+          color: #b5b5b5;
+        }
+      }
+
+      a {
+        display: inline-block;
+        font-size: 18px;
+        color: #fff;
+        background: #f1111b;
+        border-radius: 4px;
+        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
+        padding: 8px 28px;
+      }
+    }
+  }
   .classCheckBox {
     margin-right: 10px;
   }

src/views/teamBuild/components/teamSoundMoney.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class='sound-container'>
+    <div class="topMsg">
+      <p>当前选择声部数(个）：20</p>
+      <p>计划招生人数(个）：80</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss">
+.sound-container {
+  .topMsg {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+}
+</style>

src/views/teamBuild/index.vue

@@ -12,15 +12,18 @@
           <teamBaseInfo />
         </el-tab-pane>
         <el-tab-pane label="声部费用"
-                     name='2'>声部费用</el-tab-pane>
+                     name='2'>
+          <teamSoundMoney />
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
 </template>
 <script>
 import teamBaseInfo from '@/views/teamBuild/components/teamBaseInfo'
+import teamSoundMoney from '@/views/teamBuild/components/teamSoundMoney'
 export default {
-  components: { teamBaseInfo },
+  components: { teamBaseInfo, teamSoundMoney },
   name: 'teamBuild',
   data () {
     return {

src/views/teamDetail/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class='m-container'>
     <h2>
+      <div class='squrt'></div>
       武汉小学乐团
       <div class="term">第一学期</div>
       <div class="term active">第二学期</div>

vue.config.js

@@ -39,6 +39,8 @@ module.exports = {
     proxy: {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
+      // http://47.99.212.176:8000
+      // http://192.168.3.28:8000
       '/api-auth': {
         target: 'http://47.99.212.176:8000',
         changeOrigin: true,