08/28 19:32

src/api/table.js

@@ -57,4 +57,13 @@ export function updateClass (data) {
     method: 'post',
     data
   })
+}
+
+// 查询学生订单
+export function checkOrderList (data) {
+  return request({
+    url: 'order/checkOrderList',
+    method: 'POST',
+    data
+  })
 }

src/layout/components/Navbar.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <!-- <hamburger :is-active="sidebar.opened"
+               class="hamburger-container"
+               @toggleClick="toggleSideBar" /> -->
 
-    <breadcrumb class="breadcrumb-container" />
+    <!-- <breadcrumb class="breadcrumb-container" /> -->
 
     <!-- <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
@@ -48,10 +50,10 @@ export default {
     ])
   },
   methods: {
-    toggleSideBar() {
+    toggleSideBar () {
       this.$store.dispatch('app/toggleSideBar')
     },
-    async logout() {
+    async logout () {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
     }
@@ -65,18 +67,18 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -103,10 +105,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }

src/layout/components/Sidebar/index.vue

@@ -1,18 +1,20 @@
 <template>
   <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+    <logo v-if="showLogo"
+          :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="variables.menuBg"
-        :text-color="variables.menuText"
-        :unique-opened="false"
-        :active-text-color="variables.menuActiveText"
-        :collapse-transition="false"
-        mode="vertical"
-      >
-        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
+      <el-menu :default-active="activeMenu"
+               :collapse="isCollapse"
+               :background-color="variables.menuBg"
+               :text-color="variables.menuText"
+               :unique-opened="false"
+               :active-text-color="variables.menuActiveText"
+               :collapse-transition="false"
+               mode="vertical">
+        <sidebar-item v-for="route in routes"
+                      :key="route.path"
+                      :item="route"
+                      :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -30,10 +32,10 @@ export default {
     ...mapGetters([
       'sidebar'
     ]),
-    routes() {
+    routes () {
       return this.$router.options.routes
     },
-    activeMenu() {
+    activeMenu () {
       const route = this.$route
       const { meta, path } = route
       // if set path, the sidebar will highlight the path you set
@@ -41,14 +43,15 @@ export default {
         return meta.activeMenu
       }
       return path
+
     },
-    showLogo() {
+    showLogo () {
       return this.$store.state.settings.sidebarLogo
     },
-    variables() {
+    variables () {
       return variables
     },
-    isCollapse() {
+    isCollapse () {
       return !this.sidebar.opened
     }
   }

src/layout/index.vue

@@ -1,10 +1,13 @@
 <template>
-  <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+  <div :class="classObj"
+       class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened"
+         class="drawer-bg"
+         @click="handleClickOutside" />
     <sidebar class="sidebar-container" />
     <div class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
-        <navbar />
+        <!-- <navbar /> -->
       </div>
       <app-main />
     </div>
@@ -24,16 +27,16 @@ export default {
   },
   mixins: [ResizeMixin],
   computed: {
-    sidebar() {
+    sidebar () {
       return this.$store.state.app.sidebar
     },
-    device() {
+    device () {
       return this.$store.state.app.device
     },
-    fixedHeader() {
+    fixedHeader () {
       return this.$store.state.settings.fixedHeader
     },
-    classObj() {
+    classObj () {
       return {
         hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
@@ -43,7 +46,7 @@ export default {
     }
   },
   methods: {
-    handleClickOutside() {
+    handleClickOutside () {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     }
   }
@@ -51,43 +54,43 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/mixin.scss";
-  @import "~@/styles/variables.scss";
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
 
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .fixed-header {
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
-    transition: width 0.28s;
   }
+}
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>

src/permission.js

@@ -10,51 +10,51 @@ import 'nprogress/nprogress.css' // progress bar style
 
 // const whiteList = ['/login'] // no redirect whitelist
 
-// router.beforeEach(async(to, from, next) => {
+// router.beforeEach(async (to, from, next) => {
 //   // start progress bar
-//   NProgress.start()
-
-//   // set page title
-//   // document.title = getPageTitle(to.meta.title)
-
-//   // // determine whether the user has logged in
-//   // const hasToken = getToken()
-
-//   // if (hasToken) {
-//   //   if (to.path === '/login') {
-//   //     // if is logged in, redirect to the home page
-//   //     next({ path: '/' })
-//   //     NProgress.done()
-//   //   } else {
-//   //     const hasGetUserInfo = store.getters.name
-//   //     if (hasGetUserInfo) {
-//   //       next()
-//   //     } else {
-//   //       try {
-//   //         // get user info
-//   //         await store.dispatch('user/getInfo')
-//   //         next()
-//   //       } catch (error) {
-//   //         // remove token and go to login page to re-login
-//   //         await store.dispatch('user/resetToken')
-//   //         Message.error(error || 'Has Error')
-//   //         next(`/login?redirect=${to.path}`)
-//   //         NProgress.done()
-//   //       }
-//   //     }
-//   //   }
-//   // } else {
-//   //   /* has no token*/
-
-//   //   if (whiteList.indexOf(to.path) !== -1) {
-//   //     // in the free login whitelist, go directly
-//   //     next()
-//   //   } else {
-//   //     // other pages that do not have permission to access are redirected to the login page.
-//   //     next(`/login?redirect=${to.path}`)
-//   //     NProgress.done()
-//   //   }
-//   // }
+//   NProgress.start();
+//   }
+// set page title
+// document.title = getPageTitle(to.meta.title)
+
+// // determine whether the user has logged in
+// const hasToken = getToken()
+
+// if (hasToken) {
+//   if (to.path === '/login') {
+//     // if is logged in, redirect to the home page
+//     next({ path: '/' })
+//     NProgress.done()
+//   } else {
+//     const hasGetUserInfo = store.getters.name
+//     if (hasGetUserInfo) {
+//       next()
+//     } else {
+//       try {
+//         // get user info
+//         await store.dispatch('user/getInfo')
+//         next()
+//       } catch (error) {
+//         // remove token and go to login page to re-login
+//         await store.dispatch('user/resetToken')
+//         Message.error(error || 'Has Error')
+//         next(`/login?redirect=${to.path}`)
+//         NProgress.done()
+//       }
+//     }
+//   }
+// } else {
+//   /* has no token*/
+
+//   if (whiteList.indexOf(to.path) !== -1) {
+//     // in the free login whitelist, go directly
+//     next()
+//   } else {
+//     // other pages that do not have permission to access are redirected to the login page.
+//     next(`/login?redirect=${to.path}`)
+//     NProgress.done()
+//   }
+// }
 // })
 
 router.afterEach(() => {

src/router/index.js

@@ -6,6 +6,7 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'
 import dashboard from '@/views/dashboard/index'
+import order from '@/views/order/index'
 
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -41,11 +42,29 @@ export const constantRoutes = [
     path: '/',
     redirect: '/dashboard'
   },
-
   {
     path: '/dashboard',
-    component: dashboard,
-    hidden: true
+    component: Layout,
+    children: [{
+      path: '',
+      name: 'dashboard',
+      component: dashboard,
+      hidden: false,
+      meta: { title: '乐团查询', icon: 'form' }
+    }],
+
+  },
+  {
+    path: '/order',
+    component: Layout,
+    children: [{
+      path: 'order',
+      name: 'order',
+      component: order,
+      hidden: false,
+      meta: { title: '订单查询', icon: 'eye-open' }
+    }],
+
   },
   {
     path: '/404',

src/styles/variables.scss

@@ -1,10 +1,10 @@
 // sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
+$menuText:#fff;
+$menuActiveText:#ffc10d;
 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#304156;
-$menuHover:#263445;
+$menuBg:#14928A;
+$menuHover:#14928A;
 
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;

src/utils/request.js

@@ -36,7 +36,7 @@ export function tryHideFullScreenLoading () {
 
 // create an axios instance
 const service = axios.create({
-  // '/user'
+  // '/user/api'
   baseURL: '/api', // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout

src/views/dashboard/index.vue

@@ -196,7 +196,7 @@ import {
 } from "@/api/table";
 import { setTimeout } from "timers";
 export default {
-  name: "Dashboard",
+  name: "dashboard",
   data () {
     return {
       topForm: {
@@ -439,16 +439,18 @@ export default {
 
 <style scoped>
 .dashboard-container {
+  padding-left: 10px;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   flex-wrap: nowrap;
 }
 .dashboard-container .left {
-  width: 300px;
+  width: 200px;
   min-height: 100vh;
-  background-color: #14928a;
+  /* background-color: #14928a; */
   padding-top: 15px;
+  border-right: 1px solid #ccc;
 }
 .dashboard-container .left h2 {
   margin-top: 15px;
@@ -458,11 +460,11 @@ export default {
   text-align: center;
   margin: 0;
   padding: 0;
-  color: #fff;
+  color: #333;
 }
 .dashboard-container .right {
   padding: 15px 0;
-  width: calc(100% - 300px);
+  width: calc(100% - 200px);
 }
 .topWrap {
   margin-left: 40px;
@@ -482,7 +484,7 @@ export default {
   display: block;
   text-align: center;
   list-style: none;
-  color: #fff;
+  color: #333;
   font-size: 14px;
   line-height: 70px;
   cursor: pointer;

src/views/order/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class='container'>
+    <el-form :inline="true"
+             v-model="topForm">
+      <el-form-item label="乐团">
+        <el-select v-model="topForm.team"
+                   placeholder="请选择乐团名称">
+          <el-option v-for='(item,index) in brancheList'
+                     :key='index'
+                     :label="item.branchName"
+                     :value="item.branchId"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="收费类型">
+        <el-select v-model="topForm.money"
+                   placeholder="请选择乐团名称">
+          <el-option label="新报名"
+                     value="1"></el-option>
+          <el-option label="乐团续费"
+                     value="2"></el-option>
+          <el-option label="小课续费"
+                     value="3"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-button type="primary"
+                 icon="el-icon-search"
+                 plain
+                 @click="getstudentList">搜索</el-button>
+      <el-button type="success"
+                 icon="el-icon-refresh"
+                 plain
+                 @click="resetStudentList">重置</el-button>
+    </el-form>
+    <div class="tableWrap">
+      <el-table :data='tableList'>
+        <el-table-column align="center"
+                         label="学生编号"></el-table-column>
+        <el-table-column align="center"
+                         label="学生姓名"></el-table-column>
+        <el-table-column align="center"
+                         label="订单编号"></el-table-column>
+        <el-table-column align="center"
+                         label="方式"></el-table-column>
+        <el-table-column align="center"
+                         label="收款账户"></el-table-column>
+        <el-table-column align="center"
+                         label="支付金额"></el-table-column>
+        <el-table-column align="center"
+                         label="到账时间"></el-table-column>
+        <el-table-column align="center"
+                         label="备注"></el-table-column>
+      </el-table>
+      <div class="paginationWrap">
+        <el-pagination background
+                       class="pagination"
+                       layout="prev, pager, next"
+                       :total="total"
+                       :current-page.sync="currentPage"
+                       :page-size.sync="limit"
+                       @current-change="handleCurrentChange"></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getBranches, checkOrderList } from "@/api/table";
+import qs from "qs";
+import { scrollTo } from '@/utils/scroll-to'
+export default {
+  data () {
+    return {
+      topForm: {
+        team: '',
+        money: ''
+      },
+      tableList: [],
+      limit: 20,
+      total: 0,
+      page: 1,
+      brancheList: []
+
+    }
+  },
+  computed: {
+    currentPage: {
+      get () {
+        return this.page
+      },
+      set (val) {
+        this.$emit('update:page', val)
+      }
+    },
+  },
+  mounted () {
+    this.getBranches();
+  },
+  methods: {
+    handleCurrentChange (val) {
+      this.page = val;
+      // this.limit = pageSize;
+      // this.getstudentList();
+      // if (this.autoScroll) {
+      scrollTo(0, 800);
+      // }
+    },
+    // 获取选项卡
+    getBranches () {
+      getBranches().then(res => {
+        if (res.code == 200) {
+          this.brancheList = res.data;
+          // console.log(this.brancheList)
+        }
+      });
+    },
+    getstudentList () {
+      checkOrderList(qs.stringify({ classId: this.topForm.team, type: this.topForm.money })).then(res => {
+        console.log(res);
+      })
+    },
+    resetStudentList () {
+      this.topForm.team = "";
+      this.topForm.money = "";
+      this.page = 1;
+      this.getstudentList();
+    }
+  }
+}
+</script>
+<style lang="scss">
+.container {
+  padding: 30px;
+  .paginationWrap {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+  .pagination {
+    margin-top: 20px;
+  }
+}
+</style>

vue.config.js

@@ -42,8 +42,9 @@ module.exports = {
       // http://admin.dayaedu.com
       // http://192.168.3.27
       // http://192.168.3.28:8005
+      // 192.168.3.38:8088
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://admin.dayaedu.com/`,
+        target: `http://192.168.3.38:8088`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''