添加

src/constant/index.js

@@ -354,3 +354,10 @@ export const organPayState = {
   0: '未缴费',
   1: '已缴费'
 }
+
+// 机构交易类型
+export const tenantStatus = {
+  "TENANT_OPEN": '机构开通缴费',
+  "TENANT_RENEW": '机构续费',
+  "CLOUD_TEACHER": '激活团练宝'
+}

src/layout/components/Navbar.vue

@@ -540,7 +540,6 @@ export default {
     }
     &:hover,
     &.active {
-      color: #14928a;
       span {
         background: #fff;
         border-radius: 6px;

src/layout/components/Sidebar/index.vue

@@ -168,25 +168,25 @@ export default {
   font-size: 14px;
 }
 
-/deep/.el-menu-item.is-active {
-  font-weight: bold;
-  background-color: #eef4f4 !important;
-  color: #14928a !important;
-  position: relative;
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    content: " ";
-    width: 6px;
-    background-color: #14928a;
-    display: block;
-    height: 100%;
-  }
-}
-/deep/.el-submenu .el-menu-item.is-active {
-  color: #14928a !important;
-}
+// /deep/.el-menu-item.is-active {
+//   font-weight: bold;
+//   background-color: #eef4f4 !important;
+//   color: #14928a !important;
+//   position: relative;
+//   &::after {
+//     position: absolute;
+//     top: 0;
+//     right: 0;
+//     content: " ";
+//     width: 6px;
+//     background-color: #14928a;
+//     display: block;
+//     height: 100%;
+//   }
+// }
+// /deep/.el-submenu .el-menu-item.is-active {
+//   color: #14928a !important;
+// }
 /deep/.el-menu .menu-wrapper .el-menu-item {
   color: #666666;
 }

src/main.js

@@ -23,7 +23,7 @@ import * as constant from '@/constant'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import 'default-passive-events'
 import 'babel-polyfill'
-import './theme/index.css'
+// import './theme/index.css'
 
 // import './global.scss'
 

src/styles/sidebar.scss

@@ -1,4 +1,83 @@
-#app {
+#app, #app.green {
+  .indexlayout-top-menu-li {
+    &:hover, &.active {
+      color: $menuActiveText2 !important;
+    }
+  }
+  .sidebar-container {
+    background-color: $menuBg;
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: $menuHover !important;
+        color: $menuActiveText2 !important;
+        &::after{
+          background-color: $menuActiveText2;
+        }
+      }
+    }
+    .is-active>.el-submenu__title {
+      color: $subMenuActiveText !important;
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      background-color: $subMenuBg!important;
+
+      &:hover {
+        background-color: $subMenuHover!important;
+        color: $menuActiveText2 !important;
+        &::after{
+          background-color: $menuActiveText2;
+        }
+      }
+    }
+
+    & .el-menu-item {
+      &:hover {
+        background-color: $subMenuHover!important;
+        color: $menuActiveText2 !important;
+        &::after{
+          background-color: $menuActiveText2;
+        }
+      }
+    }
+  }
+
+  .el-submenu .el-menu-item.is-active {
+    background-color: $subMenuActiveBg!important;
+    &::after{
+      background-color: $menuActiveText2;
+    }
+  }
+
+  .el-menu-item.is-active {
+    background-color: $menuHover !important;
+    color: $menuActiveText2 !important;
+    &::after {
+      background-color: $menuActiveAfter;
+    }
+  }
+  .el-submenu .el-menu-item.is-active {
+    color: $menuActiveText2 !important;
+  }
+
+
+  .el-menu-item.is-active {
+    font-weight: bold;
+    position: relative;
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      content: " ";
+      width: 6px;
+      display: block;
+      height: 100%;
+    }
+  }
+
 
   .main-container {
     min-height: 100%;
@@ -10,7 +89,6 @@
   .sidebar-container {
     transition: width 0.28s;
     width: $sideBarWidth !important;
-    background-color: $menuBg;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -77,8 +155,6 @@
       align-items: center;
 
       &:hover {
-        background-color: $menuHover !important;
-        color: #14928A !important;
         position: relative;
         &::after{
           position: absolute;
@@ -86,7 +162,6 @@
           right: 0;
           content: ' ';
           width: 6px;
-          background-color: $menuActiveText2;
           display: block;
           height: 100%;
         }
@@ -95,17 +170,13 @@
 
     .is-active>.el-submenu__title {
       i{color: #909399;}
-      color: $subMenuActiveText !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
-      background-color: $subMenuBg!important;
 
       &:hover {
-        background-color: $subMenuHover!important;
-        color: #14928A !important;
         position: relative;
         &::after{
           position: absolute;
@@ -113,7 +184,6 @@
           right: 0;
           content: ' ';
           width: 6px;
-          background-color: $menuActiveText2;
           display: block;
           height: 100%;
         }
@@ -121,8 +191,6 @@
     }
     & .el-menu-item {
       &:hover {
-        background-color: $subMenuHover!important;
-        color: #14928A !important;
         position: relative;
         &::after{
           position: absolute;
@@ -130,7 +198,6 @@
           right: 0;
           content: ' ';
           width: 6px;
-          background-color: $menuActiveText2;
           display: block;
           height: 100%;
         }
@@ -138,7 +205,6 @@
     }
   }
   .el-submenu .el-menu-item.is-active {
-    background-color: $subMenuActiveBg!important;
     position: relative;
     &::after{
       position: absolute;
@@ -146,7 +212,6 @@
       right: 0;
       content: ' ';
       width: 6px;
-      background-color: $menuActiveText2;
       display: block;
       height: 100%;
     }
@@ -236,55 +301,141 @@
       transition: none;
     }
   }
+
+  .el-menu-item.is-active {
+    font-weight: bold;
+    position: relative;
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      content: " ";
+      width: 6px;
+      display: block;
+      height: 100%;
+    }
+  }
 }
 
-// when menu collapsed
-.el-menu--vertical {
-  &>.el-menu {
-    .svg-icon {
-      margin-right: 16px;
+#app.dark {
+  .indexlayout-top-menu-li {
+    &:hover, &.active {
+      color: $darkmenuActiveText2 !important;
     }
   }
+  .sidebar-container {
+    background-color: $darkmenuBg;
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: $darkmenuHover !important;
+        color: $darkmenuActiveText2 !important;
+        &::after{
+          background-color: $darkmenuActiveText2;
+        }
+      }
+    }
+    .is-active>.el-submenu__title {
+      color: $darksubMenuActiveText !important;
+    }
 
-  // .nest-menu .el-submenu>.el-submenu__title,
-  .el-menu-item {
-    &:hover {
-      // you can use $subMenuHover
-      background-color: $menuHover !important;
-      color: #14928A !important;
-      position: relative;
-      &::after{
-        position: absolute;
-        top: 0;
-        right: 0;
-        content: ' ';
-        width: 6px;
-        background-color: $menuActiveText2;
-        display: block;
-        height: 100%;
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      background-color: $darksubMenuBg!important;
+
+      &:hover {
+        background-color: $darksubMenuHover!important;
+        color: $darkmenuActiveText2 !important;
+        &::after{
+          background-color: $darkmenuActiveText2;
+        }
       }
     }
-    .is-active {
-      background-color:$subMenuActiveBg !important;
+
+    & .el-menu-item {
+      &:hover {
+        background-color: $darksubMenuHover!important;
+        color: $darkmenuActiveText2 !important;
+        &::after{
+          background-color: $darkmenuActiveText2;
+        }
+      }
     }
   }
 
-  // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
+  .el-submenu .el-menu-item.is-active {
+    background-color: $darksubMenuActiveBg!important;
+    &::after{
+      background-color: $darkmenuActiveText2;
     }
+  }
 
-    &::-webkit-scrollbar {
-      width: 6px;
+  .el-menu-item.is-active {
+    background-color: $darkmenuHover !important;
+    color: $darkmenuActiveText2 !important;
+    &::after {
+      background-color: $darkmenuActiveAfter;
     }
+  }
+  .el-submenu .el-menu-item.is-active {
+    color: $darkmenuActiveText2 !important;
+  }
 
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
+  .navbar {
+    background: #000;
+    .left-menu {
+      color: #fff;
     }
   }
 }
+
+// when menu collapsed
+// .el-menu--vertical {
+//   &>.el-menu {
+//     .svg-icon {
+//       margin-right: 16px;
+//     }
+//   }
+
+//   // .nest-menu .el-submenu>.el-submenu__title,
+//   .el-menu-item {
+//     &:hover {
+//       // you can use $subMenuHover
+//       background-color: $menuHover !important;
+//       color: #14928A !important;
+//       position: relative;
+//       &::after{
+//         position: absolute;
+//         top: 0;
+//         right: 0;
+//         content: ' ';
+//         width: 6px;
+//         background-color: $menuActiveText2;
+//         display: block;
+//         height: 100%;
+//       }
+//     }
+//     .is-active {
+//       background-color:$subMenuActiveBg !important;
+//     }
+//   }
+
+//   // the scroll bar appears when the subMenu is too long
+//   >.el-menu--popup {
+//     max-height: 100vh;
+//     overflow-y: auto;
+
+//     &::-webkit-scrollbar-track-piece {
+//       background: #d3dce6;
+//     }
+
+//     &::-webkit-scrollbar {
+//       width: 6px;
+//     }
+
+//     &::-webkit-scrollbar-thumb {
+//       background: #99a9bf;
+//       border-radius: 20px;
+//     }
+//   }
+// }

src/styles/variables.scss

@@ -1,20 +1,32 @@
-// sidebar
+// 默认大雅绿样式
 $menuText:#1a1a1a;    // #000
 $menuActiveText:#fff;
 $menuActiveText2:#14928A;
 $subMenuActiveText:#1a1a1a; //https://github.com/ElemeFE/element/issues/12951
-// :#13817A;
-$menuBg:#fff;
-$menuHover: #EEF4F4;
+$menuBg:#fff; // 侧边栏一级默认样式
+$menuHover: #EEF4F4; // 侧边栏一级滑动样式
+$subMenuBg:#fff; // 侧边栏二级默认样式
+$subMenuHover:#EEF4F4; // 侧边栏二级鼠标滑动样式
+$subMenuActiveBg:#EEF4F4; // 侧边栏二级选中样式
+$menuActiveAfter: #14928A;
+
+// 第二套样式配置
+$darkmenuText:#fff;
+$darkmenuActiveText:#fff;
+$darkmenuActiveText2:#000;
+$darksubMenuActiveText:#fff; //https://github.com/ElemeFE/element/issues/12951
+$darkmenuBg:#000; // 侧边栏一级默认样式
+$darkmenuHover: #177ddc; // 侧边栏一级滑动样式
+$darksubMenuBg:#000; // 侧边栏二级默认样式
+$darksubMenuHover:#177ddc; // 侧边栏二级鼠标滑动样式
+$darksubMenuActiveBg:#177ddc; // 侧边栏二级选中样式
+$darkmenuActiveAfter: #000;
+
 
-$subMenuBg:#fff;
-$subMenuHover:#EEF4F4;
-$subMenuActiveBg:#EEF4F4;
 
 $sideBarWidth: 195px;
 /* 改变主题色变量 */
-// $--color-primary: rgb(19, 129, 122);
-$--color-primary:red;
+$--color-primary: rgb(19, 129, 122);
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
@@ -26,6 +38,24 @@ $--color-primary:red;
   menuHover: $menuHover;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
+  menuActiveAfter: $menuActiveAfter;
   sideBarWidth: $sideBarWidth;
-  --color-primary: $--color-primary;
+
+  darkmenuText: $darkmenuText;
+  darkmenuActiveText: $darkmenuActiveText;
+  darkmenuActiveText2: $darkmenuActiveText2;
+  darksubMenuActiveText: $darksubMenuActiveText;
+  darkmenuBg: $darkmenuBg;
+  darkmenuHover: $darkmenuHover;
+  darksubMenuBg: $darksubMenuBg;
+  darksubMenuHover: $darksubMenuHover;
+  darkmenuActiveAfter: $darkmenuActiveAfter
 }
+
+/* 改变主题色变量 */
+$--color-primary: teal;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/utils/vueFilter.js

@@ -770,3 +770,7 @@ Vue.filter('couponTypeFilter', (value) => {
   return constant.couponType[value]
 })
 // couponType
+
+Vue.filter('tenantStatus', value => {
+  return constant.tenantStatus[value]
+})

src/views/tenantSetting/tenantTradeManager.vue

@@ -104,7 +104,7 @@
         </el-table-column>
         <el-table-column align="center" label="交易类型">
           <template slot-scope="scope">
-            {{ scope.row.orderType }}
+            {{ scope.row.orderType | tenantStatus }}
           </template>
         </el-table-column>
         <el-table-column align="center" label="订单金额">
@@ -124,7 +124,7 @@
             {{ scope.row.orderState | tenantOrderStatus }}
           </template>
         </el-table-column>
-        <el-table-column align="center" label="操作">
+        <!-- <el-table-column align="center" label="操作">
           <template slot-scope="scope">
             <el-button
               @click="openService(scope.row)"
@@ -132,7 +132,7 @@
               type="text"
               >查看</el-button>
           </template>
-        </el-table-column>
+        </el-table-column> -->
       </el-table>
       <pagination
         :saveKey="'tenantTradeManager'"
@@ -207,8 +207,8 @@ export default {
           page: this.pageInfo.page,
           rows: this.pageInfo.limit,
         });
-        this.pageInfo.total = res.data.total;
-        this.tableList = res.data.rows;
+        this.pageInfo.total = res.total;
+        this.tableList = res.rows;
       } catch (e) {}
     },
     search() {
@@ -229,7 +229,8 @@ export default {
     tenantOrderStatus(val) {
       const template = {
         0: "待支付",
-        1: "已支付"
+        1: "已支付",
+        2: "支付失败"
       }
       return template[val]
     }