修改

src/api/journal.js

@@ -0,0 +1,13 @@
+// 通用设置api文件
+import request from '@/utils/request'
+import qs from 'qs'
+let api = '/api-web'
+
+// 查询用户未读消息条数
+export function queryCountOfUnread(data) {
+    return request({
+        url: api + '/sysMessage/queryCountOfUnread',
+        method: 'get',
+        params: data
+    })
+}  

src/api/user.js

@@ -24,3 +24,12 @@ export function logout (data) {
     data: qs.stringify(data)
   })
 }
+
+// 获取首页数据
+export function getIndex (data) {
+  return request({
+    url: '/api-web/index',
+    method: 'get',
+    params: data
+  })
+}

src/views/businessManager/orderManager/income.vue

@@ -43,7 +43,7 @@
           <el-table-column align='center' prop="orderNo"
                           label="订单号">
           </el-table-column>
-          <el-table-column align='center' prop="payTime"
+          <el-table-column align='center' prop="createTime"
                           label="订单日期">
           </el-table-column>
           <el-table-column align='center'

src/views/journal/index.vue

@@ -4,18 +4,23 @@
     </h2>
     <div class="m-core">
       <el-tabs type="border-card"
-               v-model="activeIndex">
-        <el-tab-pane label="基本信息"
+               v-model="activeIndex" @tab-click="handleClick">
+        <el-tab-pane label="系统通知"
+                     name='0'>
+          <item v-if="activeStatus[0]" />
+        </el-tab-pane>
+        <el-tab-pane label="学员投诉信息"
                      name='1'>
-          <item />
+          <studentComplain v-if="activeStatus[1]" />
         </el-tab-pane>
-        <el-tab-pane label="建团日志"
+        <el-tab-pane label="退团退课"
                      name='2'>
+          <musicGroup v-if="activeStatus[2]" />
         </el-tab-pane>
-        <el-tab-pane label="审批日志"
+        <el-tab-pane label="请假处理"
                      name='3'>
+          <leaveOperation v-if="activeStatus[3]" />
         </el-tab-pane>
-
       </el-tabs>
 
     </div>
@@ -23,13 +28,23 @@
 </template>
 <script>
 import item from './journalItem'
+import studentComplain from './studentComplain'
+import musicGroup from './musicGroup'
+import leaveOperation from './leaveOperation'
 export default {
   components: {
-    item
+    item, studentComplain, musicGroup, leaveOperation
   },
   data () {
     return {
-      activeIndex: '1'
+      activeIndex: '0',
+      activeStatus: [true, false, false, false]
+    }
+  },
+  methods: {
+    handleClick (val) {
+      this.activeIndex = val.name
+      this.activeStatus[val.name] = true
     }
   }
 }

src/views/journal/journalItem.vue

@@ -3,7 +3,7 @@
     <div class="left">
       <div class="unread"> <img :src="img.boxicon"
              alt=""> 未读消息
-        <div class="count">84</div>
+        <div class="count">{{ noReadMessage }}</div>
       </div>
       <div class="read">
         <img :src="img.bookicon"
@@ -81,6 +81,7 @@
   </div>
 </template>
 <script>
+import { queryCountOfUnread } from '@/api/journal'
 export default {
   data () {
     return {
@@ -94,7 +95,21 @@ export default {
       },
       activities: [{
 
-      }]
+      }],
+      noReadMessage: 0, // 未读消息
+    }
+  },
+  mounted() {
+    this.__init()
+  },
+  methods: {
+    __init() {
+      // 未读消息
+      queryCountOfUnread().then(res => {
+        if(res.code == 200) {
+          this.noReadMessage = res.data
+        }
+      })
     }
   }
 }

src/views/journal/leaveOperation.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class='infoWrap'>
+    <div class="left">
+      <div class="unread"> <img :src="img.boxicon"
+             alt=""> 未读消息
+        <div class="count">84</div>
+      </div>
+      <div class="read">
+        <img :src="img.bookicon"
+             alt="">
+        已读消息</div>
+      <div class="recovery">
+        <img :src="img.trashicon"
+             alt="">
+        回收站</div>
+    </div>
+    <div class="middle">
+      <div class="msgItem">
+        <h6 class="type">审批</h6>
+        <h4 class="name">黄老师 <span class='time'>10:03</span>
+          <div class="dot"></div>
+        </h4>
+        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
+      </div>
+      <div class="msgItem active">
+        <h6 class="type">审批</h6>
+        <h4 class="name">黄老师 <span class='time'>10:03</span>
+          <div class="dot"></div>
+        </h4>
+        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
+      </div>
+    </div>
+    <div class="right">
+      <div class="rightWrap">
+        <img src="@/assets/images/base/placehorder-icon.png"
+             class="header"
+             alt="">
+        <div class="info">
+          <h2>黄老师<span>【185****2109】</span></h2>
+          <p class="subMsg">发至 <span class='san'></span> <span style="margin-left:30px">我</span></p>
+          <div class="textWrap">
+            <p>审批事项: 合班</p>
+            <p>开始时间: 2019-09-01 09:00</p>
+            <p>结束时间: 2019-09-01 09:00</p>
+            <p>备注:班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少</p>
+          </div>
+          <div class="timeline">
+            <el-timeline>
+              <el-timeline-item placement='center'>
+                <div class='timeMsg'>
+                  <p class="name">我</p>
+                  <p class='status'>审批中</p>
+                </div>
+                <div slot='dot'>
+                  <img class='dot'
+                       src="@/assets/images/base/clock.png"
+                       alt="">
+                </div>
+              </el-timeline-item>
+              <el-timeline-item placement='center'>
+                <div class='timeMsg'>
+                  <p class="name">我</p>
+                  <p class='status'>审批中</p>
+                </div>
+                <div slot='dot'>
+                  <img class='dot'
+                       src="@/assets/images/base/clock.png"
+                       alt="">
+                </div>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+
+        </div>
+      </div>
+      <div class="infoFoot">
+        <div class="noBtn">拒绝</div>
+        <div class="yesBtn">同意</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      img: {
+        bookicon: require('@/assets/images/base/bookicon.png'),
+        Hbookicon: require('@/assets/images/base/bookicon-h.png'),
+        trashicon: require('@/assets/images/base/trashicon.png'),
+        Htrashicon: require('@/assets/images/base/trashicon-h.png'),
+        boxicon: require('@/assets/images/base/boxicon.png'),
+        Hboxicon: require('@/assets/images/base/boxicon-h.png')
+      },
+      activities: [{
+
+      }]
+    }
+  }
+}
+</script>
+<style lang="scss">
+.infoWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  height: calc(100vh - 266px);
+  overflow: auto;
+  .left {
+    padding-top: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    > div {
+      height: 26px;
+      line-height: 26px;
+      margin-top: 26px;
+      img {
+        position: relative;
+        top: 6px;
+      }
+    }
+    .unread {
+      position: relative;
+      img {
+        width: 26px;
+        height: 25px;
+      }
+      .count {
+        position: absolute;
+        width: 38px;
+        height: 23px;
+        background: rgba(20, 146, 138, 0.5);
+        border-radius: 100px;
+        font-size: 12px;
+        line-height: 23px;
+        text-align: center;
+        color: #225551;
+        right: -44px;
+        top: 8px;
+      }
+    }
+    .read {
+      img {
+        width: 20px;
+        height: 26px;
+      }
+    }
+    .recovery {
+      img {
+        width: 19px;
+        height: 26px;
+      }
+    }
+  }
+  .middle {
+    width: 390px;
+    margin-left: 76px;
+    padding-top: 50px;
+    overflow: auto;
+    .msgItem {
+      padding: 16px 18px 23px 30px;
+      .type {
+        font-size: 14px;
+        color: #777;
+        font-weight: 400;
+        padding-bottom: 4px;
+      }
+      .name {
+        position: relative;
+        color: #444;
+        font-size: 16px;
+        padding-bottom: 9px;
+        clear: both;
+        .time {
+          font-weight: 400;
+          color: #aaa;
+          float: right;
+        }
+        .dot {
+          width: 7px;
+          height: 7px;
+          background-color: #f97215;
+          border-radius: 50%;
+          position: absolute;
+          left: -13px;
+          top: 4px;
+        }
+      }
+      .msg {
+        color: #444;
+        font-size: 14px;
+        line-height: 24px;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+    .msgItem.active {
+      background-color: #f3f4f8;
+      border-radius: 5px;
+      .msg {
+        color: #aaa;
+      }
+    }
+  }
+  .right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 1px solid #e4e8eb;
+    margin-left: 25px;
+    position: relative;
+    overflow: auto;
+    .rightWrap {
+      // overflow: auto;
+      padding: 18px 24px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      width: 570px;
+      box-sizing: border-box;
+      .header {
+        width: 30px;
+        height: 30px;
+        position: relative;
+        top: 7px;
+        border-radius: 50%;
+        margin-right: 12px;
+      }
+      .info {
+        position: relative;
+        h2 {
+          color: #212223;
+          font-size: 16px;
+          margin-bottom: 0px;
+          span {
+            font-size: 12px;
+            color: #444;
+          }
+        }
+        .subMsg {
+          position: relative;
+          font-size: 12px;
+          color: #444;
+          margin-bottom: 12px;
+          .san {
+            // margin-left: 110px;
+            float: left;
+            position: absolute;
+            top: 0px;
+            width: 0;
+            height: 0;
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent #909191 transparent transparent;
+            transform: rotate(180deg); /*顺时针旋转90°*/
+            margin: 0 8px;
+          }
+        }
+        .textWrap {
+          width: 316px;
+          line-height: 21px;
+          font-size: 14px;
+          color: #212223;
+          margin: 12px 0 34px;
+        }
+        .dot {
+          width: 20px;
+          height: 20px;
+        }
+        .timeMsg {
+          position: relative;
+          top: 5px;
+          margin-left: 20px;
+          .name {
+            font-size: #444;
+            font-size: 16px;
+            margin-bottom: 3px;
+            font-weight: 600;
+          }
+          .status {
+            font-size: 14px;
+            color: #62a070;
+          }
+          .status.waring {
+            color: #f97215;
+          }
+          .status.end {
+            color: #aaaaaa;
+          }
+        }
+      }
+    }
+    .infoFoot {
+      min-height: 60px;
+      height: 60px;
+      line-height: 60px;
+      border-top: 1px solid #e4e8eb;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      .noBtn {
+        cursor: pointer;
+        width: 100px;
+        height: 32px;
+        line-height: 32px;
+        color: #444;
+        border-radius: 3px;
+        border: 1px solid rgba(228, 232, 235, 1);
+        text-align: center;
+        margin-left: 70px;
+      }
+      .yesBtn {
+        cursor: pointer;
+        margin-left: 15px;
+        text-align: center;
+        width: 100px;
+        height: 32px;
+        line-height: 32px;
+        background: rgba(249, 114, 21, 1);
+        border-radius: 3px;
+        color: #fff;
+      }
+      // width: 570px;
+    }
+  }
+}
+.el-timeline-item__dot {
+  width: 20px;
+  height: 20px;
+}
+.el-timeline-item {
+  min-height: 80px !important;
+}
+.el-timeline-item__tail {
+  left: 9px !important;
+}
+</style>

src/views/journal/musicGroup.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class='infoWrap'>
+    <div class="left">
+      <div class="unread"> <img :src="img.boxicon"
+             alt=""> 未读消息
+        <div class="count">84</div>
+      </div>
+      <div class="read">
+        <img :src="img.bookicon"
+             alt="">
+        已读消息</div>
+      <div class="recovery">
+        <img :src="img.trashicon"
+             alt="">
+        回收站</div>
+    </div>
+    <div class="middle">
+      <div class="msgItem">
+        <h6 class="type">审批</h6>
+        <h4 class="name">黄老师 <span class='time'>10:03</span>
+          <div class="dot"></div>
+        </h4>
+        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
+      </div>
+      <div class="msgItem active">
+        <h6 class="type">审批</h6>
+        <h4 class="name">黄老师 <span class='time'>10:03</span>
+          <div class="dot"></div>
+        </h4>
+        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
+      </div>
+    </div>
+    <div class="right">
+      <div class="rightWrap">
+        <img src="@/assets/images/base/placehorder-icon.png"
+             class="header"
+             alt="">
+        <div class="info">
+          <h2>黄老师<span>【185****2109】</span></h2>
+          <p class="subMsg">发至 <span class='san'></span> <span style="margin-left:30px">我</span></p>
+          <div class="textWrap">
+            <p>审批事项: 合班</p>
+            <p>开始时间: 2019-09-01 09:00</p>
+            <p>结束时间: 2019-09-01 09:00</p>
+            <p>备注:班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少</p>
+          </div>
+          <div class="timeline">
+            <el-timeline>
+              <el-timeline-item placement='center'>
+                <div class='timeMsg'>
+                  <p class="name">我</p>
+                  <p class='status'>审批中</p>
+                </div>
+                <div slot='dot'>
+                  <img class='dot'
+                       src="@/assets/images/base/clock.png"
+                       alt="">
+                </div>
+              </el-timeline-item>
+              <el-timeline-item placement='center'>
+                <div class='timeMsg'>
+                  <p class="name">我</p>
+                  <p class='status'>审批中</p>
+                </div>
+                <div slot='dot'>
+                  <img class='dot'
+                       src="@/assets/images/base/clock.png"
+                       alt="">
+                </div>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+
+        </div>
+      </div>
+      <div class="infoFoot">
+        <div class="noBtn">拒绝</div>
+        <div class="yesBtn">同意</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      img: {
+        bookicon: require('@/assets/images/base/bookicon.png'),
+        Hbookicon: require('@/assets/images/base/bookicon-h.png'),
+        trashicon: require('@/assets/images/base/trashicon.png'),
+        Htrashicon: require('@/assets/images/base/trashicon-h.png'),
+        boxicon: require('@/assets/images/base/boxicon.png'),
+        Hboxicon: require('@/assets/images/base/boxicon-h.png')
+      },
+      activities: [{
+
+      }]
+    }
+  }
+}
+</script>
+<style lang="scss">
+.infoWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  height: calc(100vh - 266px);
+  overflow: auto;
+  .left {
+    padding-top: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    > div {
+      height: 26px;
+      line-height: 26px;
+      margin-top: 26px;
+      img {
+        position: relative;
+        top: 6px;
+      }
+    }
+    .unread {
+      position: relative;
+      img {
+        width: 26px;
+        height: 25px;
+      }
+      .count {
+        position: absolute;
+        width: 38px;
+        height: 23px;
+        background: rgba(20, 146, 138, 0.5);
+        border-radius: 100px;
+        font-size: 12px;
+        line-height: 23px;
+        text-align: center;
+        color: #225551;
+        right: -44px;
+        top: 8px;
+      }
+    }
+    .read {
+      img {
+        width: 20px;
+        height: 26px;
+      }
+    }
+    .recovery {
+      img {
+        width: 19px;
+        height: 26px;
+      }
+    }
+  }
+  .middle {
+    width: 390px;
+    margin-left: 76px;
+    padding-top: 50px;
+    overflow: auto;
+    .msgItem {
+      padding: 16px 18px 23px 30px;
+      .type {
+        font-size: 14px;
+        color: #777;
+        font-weight: 400;
+        padding-bottom: 4px;
+      }
+      .name {
+        position: relative;
+        color: #444;
+        font-size: 16px;
+        padding-bottom: 9px;
+        clear: both;
+        .time {
+          font-weight: 400;
+          color: #aaa;
+          float: right;
+        }
+        .dot {
+          width: 7px;
+          height: 7px;
+          background-color: #f97215;
+          border-radius: 50%;
+          position: absolute;
+          left: -13px;
+          top: 4px;
+        }
+      }
+      .msg {
+        color: #444;
+        font-size: 14px;
+        line-height: 24px;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+    .msgItem.active {
+      background-color: #f3f4f8;
+      border-radius: 5px;
+      .msg {
+        color: #aaa;
+      }
+    }
+  }
+  .right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 1px solid #e4e8eb;
+    margin-left: 25px;
+    position: relative;
+    overflow: auto;
+    .rightWrap {
+      // overflow: auto;
+      padding: 18px 24px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      width: 570px;
+      box-sizing: border-box;
+      .header {
+        width: 30px;
+        height: 30px;
+        position: relative;
+        top: 7px;
+        border-radius: 50%;
+        margin-right: 12px;
+      }
+      .info {
+        position: relative;
+        h2 {
+          color: #212223;
+          font-size: 16px;
+          margin-bottom: 0px;
+          span {
+            font-size: 12px;
+            color: #444;
+          }
+        }
+        .subMsg {
+          position: relative;
+          font-size: 12px;
+          color: #444;
+          margin-bottom: 12px;
+          .san {
+            // margin-left: 110px;
+            float: left;
+            position: absolute;
+            top: 0px;
+            width: 0;
+            height: 0;
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent #909191 transparent transparent;
+            transform: rotate(180deg); /*顺时针旋转90°*/
+            margin: 0 8px;
+          }
+        }
+        .textWrap {
+          width: 316px;
+          line-height: 21px;
+          font-size: 14px;
+          color: #212223;
+          margin: 12px 0 34px;
+        }
+        .dot {
+          width: 20px;
+          height: 20px;
+        }
+        .timeMsg {
+          position: relative;
+          top: 5px;
+          margin-left: 20px;
+          .name {
+            font-size: #444;
+            font-size: 16px;
+            margin-bottom: 3px;
+            font-weight: 600;
+          }
+          .status {
+            font-size: 14px;
+            color: #62a070;
+          }
+          .status.waring {
+            color: #f97215;
+          }
+          .status.end {
+            color: #aaaaaa;
+          }
+        }
+      }
+    }
+    .infoFoot {
+      min-height: 60px;
+      height: 60px;
+      line-height: 60px;
+      border-top: 1px solid #e4e8eb;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      .noBtn {
+        cursor: pointer;
+        width: 100px;
+        height: 32px;
+        line-height: 32px;
+        color: #444;
+        border-radius: 3px;
+        border: 1px solid rgba(228, 232, 235, 1);
+        text-align: center;
+        margin-left: 70px;
+      }
+      .yesBtn {
+        cursor: pointer;
+        margin-left: 15px;
+        text-align: center;
+        width: 100px;
+        height: 32px;
+        line-height: 32px;
+        background: rgba(249, 114, 21, 1);
+        border-radius: 3px;
+        color: #fff;
+      }
+      // width: 570px;
+    }
+  }
+}
+.el-timeline-item__dot {
+  width: 20px;
+  height: 20px;
+}
+.el-timeline-item {
+  min-height: 80px !important;
+}
+.el-timeline-item__tail {
+  left: 9px !important;
+}
+</style>

src/views/journal/studentComplain.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class='infoWrap'>
+    <div class="left">
+      <div class="unread"> <img :src="img.boxicon"
+             alt=""> 未读消息
+        <div class="count">84</div>
+      </div>
+      <div class="read">
+        <img :src="img.bookicon"
+             alt="">
+        已读消息</div>
+      <div class="recovery">
+        <img :src="img.trashicon"
+             alt="">
+        回收站</div>
+    </div>
+    <div class="middle">
+      <div class="msgItem">
+        <h6 class="type">审批</h6>
+        <h4 class="name">黄老师 <span class='time'>10:03</span>
+          <div class="dot"></div>
+        </h4>
+        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
+      </div>
+      <div class="msgItem active">
+        <h6 class="type">审批</h6>
+        <h4 class="name">黄老师 <span class='time'>10:03</span>
+          <div class="dot"></div>
+        </h4>
+        <p class='msg'>那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见那家纯四季花城教学总结爱喝酒收到货就暗示的看见爱上大家超级好吃就撒客户看见爱上当看见</p>
+      </div>
+    </div>
+    <div class="right">
+      <div class="rightWrap">
+        <img src="@/assets/images/base/placehorder-icon.png"
+             class="header"
+             alt="">
+        <div class="info">
+          <h2>黄老师<span>【185****2109】</span></h2>
+          <p class="subMsg">发至 <span class='san'></span> <span style="margin-left:30px">我</span></p>
+          <div class="textWrap">
+            <p>审批事项: 合班</p>
+            <p>开始时间: 2019-09-01 09:00</p>
+            <p>结束时间: 2019-09-01 09:00</p>
+            <p>备注:班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少班人数较少较少</p>
+          </div>
+          <div class="timeline">
+            <el-timeline>
+              <el-timeline-item placement='center'>
+                <div class='timeMsg'>
+                  <p class="name">我</p>
+                  <p class='status'>审批中</p>
+                </div>
+                <div slot='dot'>
+                  <img class='dot'
+                       src="@/assets/images/base/clock.png"
+                       alt="">
+                </div>
+              </el-timeline-item>
+              <el-timeline-item placement='center'>
+                <div class='timeMsg'>
+                  <p class="name">我</p>
+                  <p class='status'>审批中</p>
+                </div>
+                <div slot='dot'>
+                  <img class='dot'
+                       src="@/assets/images/base/clock.png"
+                       alt="">
+                </div>
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+
+        </div>
+      </div>
+      <div class="infoFoot">
+        <div class="noBtn">拒绝</div>
+        <div class="yesBtn">同意</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      img: {
+        bookicon: require('@/assets/images/base/bookicon.png'),
+        Hbookicon: require('@/assets/images/base/bookicon-h.png'),
+        trashicon: require('@/assets/images/base/trashicon.png'),
+        Htrashicon: require('@/assets/images/base/trashicon-h.png'),
+        boxicon: require('@/assets/images/base/boxicon.png'),
+        Hboxicon: require('@/assets/images/base/boxicon-h.png')
+      },
+      activities: [{
+
+      }]
+    }
+  }
+}
+</script>
+<style lang="scss">
+.infoWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  height: calc(100vh - 266px);
+  overflow: auto;
+  .left {
+    padding-top: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    > div {
+      height: 26px;
+      line-height: 26px;
+      margin-top: 26px;
+      img {
+        position: relative;
+        top: 6px;
+      }
+    }
+    .unread {
+      position: relative;
+      img {
+        width: 26px;
+        height: 25px;
+      }
+      .count {
+        position: absolute;
+        width: 38px;
+        height: 23px;
+        background: rgba(20, 146, 138, 0.5);
+        border-radius: 100px;
+        font-size: 12px;
+        line-height: 23px;
+        text-align: center;
+        color: #225551;
+        right: -44px;
+        top: 8px;
+      }
+    }
+    .read {
+      img {
+        width: 20px;
+        height: 26px;
+      }
+    }
+    .recovery {
+      img {
+        width: 19px;
+        height: 26px;
+      }
+    }
+  }
+  .middle {
+    width: 390px;
+    margin-left: 76px;
+    padding-top: 50px;
+    overflow: auto;
+    .msgItem {
+      padding: 16px 18px 23px 30px;
+      .type {
+        font-size: 14px;
+        color: #777;
+        font-weight: 400;
+        padding-bottom: 4px;
+      }
+      .name {
+        position: relative;
+        color: #444;
+        font-size: 16px;
+        padding-bottom: 9px;
+        clear: both;
+        .time {
+          font-weight: 400;
+          color: #aaa;
+          float: right;
+        }
+        .dot {
+          width: 7px;
+          height: 7px;
+          background-color: #f97215;
+          border-radius: 50%;
+          position: absolute;
+          left: -13px;
+          top: 4px;
+        }
+      }
+      .msg {
+        color: #444;
+        font-size: 14px;
+        line-height: 24px;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+    .msgItem.active {
+      background-color: #f3f4f8;
+      border-radius: 5px;
+      .msg {
+        color: #aaa;
+      }
+    }
+  }
+  .right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 1px solid #e4e8eb;
+    margin-left: 25px;
+    position: relative;
+    overflow: auto;
+    .rightWrap {
+      // overflow: auto;
+      padding: 18px 24px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      width: 570px;
+      box-sizing: border-box;
+      .header {
+        width: 30px;
+        height: 30px;
+        position: relative;
+        top: 7px;
+        border-radius: 50%;
+        margin-right: 12px;
+      }
+      .info {
+        position: relative;
+        h2 {
+          color: #212223;
+          font-size: 16px;
+          margin-bottom: 0px;
+          span {
+            font-size: 12px;
+            color: #444;
+          }
+        }
+        .subMsg {
+          position: relative;
+          font-size: 12px;
+          color: #444;
+          margin-bottom: 12px;
+          .san {
+            // margin-left: 110px;
+            float: left;
+            position: absolute;
+            top: 0px;
+            width: 0;
+            height: 0;
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent #909191 transparent transparent;
+            transform: rotate(180deg); /*顺时针旋转90°*/
+            margin: 0 8px;
+          }
+        }
+        .textWrap {
+          width: 316px;
+          line-height: 21px;
+          font-size: 14px;
+          color: #212223;
+          margin: 12px 0 34px;
+        }
+        .dot {
+          width: 20px;
+          height: 20px;
+        }
+        .timeMsg {
+          position: relative;
+          top: 5px;
+          margin-left: 20px;
+          .name {
+            font-size: #444;
+            font-size: 16px;
+            margin-bottom: 3px;
+            font-weight: 600;
+          }
+          .status {
+            font-size: 14px;
+            color: #62a070;
+          }
+          .status.waring {
+            color: #f97215;
+          }
+          .status.end {
+            color: #aaaaaa;
+          }
+        }
+      }
+    }
+    .infoFoot {
+      min-height: 60px;
+      height: 60px;
+      line-height: 60px;
+      border-top: 1px solid #e4e8eb;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      .noBtn {
+        cursor: pointer;
+        width: 100px;
+        height: 32px;
+        line-height: 32px;
+        color: #444;
+        border-radius: 3px;
+        border: 1px solid rgba(228, 232, 235, 1);
+        text-align: center;
+        margin-left: 70px;
+      }
+      .yesBtn {
+        cursor: pointer;
+        margin-left: 15px;
+        text-align: center;
+        width: 100px;
+        height: 32px;
+        line-height: 32px;
+        background: rgba(249, 114, 21, 1);
+        border-radius: 3px;
+        color: #fff;
+      }
+      // width: 570px;
+    }
+  }
+}
+.el-timeline-item__dot {
+  width: 20px;
+  height: 20px;
+}
+.el-timeline-item {
+  min-height: 80px !important;
+}
+.el-timeline-item__tail {
+  left: 9px !important;
+}
+</style>

src/views/main/index.vue

@@ -4,7 +4,25 @@
     </h2>
     <div class="m-core">
       <div class="itemWrap">
-        <div class="item">
+        <div class="item" v-if="dataInfo.musicDatas">
+          <h4> <p>分部乐团数</p> <img src="" alt=""> </h4>
+          <div class="infos">
+            <div class="info">
+              <p class="sub">全部</p>
+              <p class='msg'>{{ dataInfo.musicDatas.total }}</p>
+            </div>
+            <div class="info">
+              <p class="sub">进行中</p>
+              <p class='msg'>{{ dataInfo.musicDatas.progress_num_ }}</p>
+            </div>
+            <div class="info">
+              <p class="sub">已完成</p>
+              <p class='msg'>{{ dataInfo.musicDatas.pause_num_ }}</p>
+            </div>
+          </div>
+        </div>
+        <!--  -->
+        <div class="item" v-if="dataInfo.incomeExpendMap">
           <h4>
             <p>本月收入</p>
             <img src=""
@@ -12,62 +30,169 @@
           </h4>
           <div class="infos">
             <div class="info">
-              <p class="sub">笔数</p>
-              <p class='msg'>1200</p>
+              <p class="sub">收入笔数</p>
+              <p class='msg'>{{ dataInfo.incomeExpendMap.income_num_ }}</p>
             </div>
             <div class="info">
-              <p class="sub">总计</p>
-              <p class='msg'>23,000,000</p>
+              <p class="sub">收入金额</p>
+              <p class='msg'>{{ dataInfo.incomeExpendMap.income_total_ }}</p>
             </div>
           </div>
         </div>
-        <!--  -->
-        <div class="item">
+
+        <div class="item" v-if="dataInfo.incomeExpendMap">
           <h4>
-            <p>本月收入</p>
+            <p>本月支出</p>
             <img src=""
                  alt="">
           </h4>
           <div class="infos">
             <div class="info">
-              <p class="sub">笔数</p>
-              <p class='msg'>1200</p>
+              <p class="sub">支出笔数</p>
+              <p class='msg'>{{ dataInfo.incomeExpendMap.expend_num_ }}</p>
             </div>
             <div class="info">
+              <p class="sub">支出金额</p>
+              <p class='msg'>{{ dataInfo.incomeExpendMap.expend_total_ }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="item" v-if="dataInfo.teacherDatas">
+          <h4>
+            <p>本月支出</p>
+            <img src=""
+                 alt="">
+          </h4>
+          <div class="infos">
+            <div class="info">
               <p class="sub">总计</p>
-              <p class='msg'>23,000,000</p>
+              <p class='msg'>{{ dataInfo.teacherDatas.total }}</p>
+            </div>
+            <div class="info">
+              <p class="sub">全职人数</p>
+              <p class='msg'>{{ dataInfo.teacherDatas.full_time_num_ }}</p>
+            </div>
+            <div class="info">
+              <p class="sub">兼职人数</p>
+              <p class='msg'>{{ dataInfo.teacherDatas.part_time_num_ }}</p>
             </div>
           </div>
         </div>
-        <!--  -->
-        <div class="item">
+
+        <div class="item" v-if="dataInfo.vipDatas">
           <h4>
-            <p>分部乐团数</p>
+            <p>VIP课数</p>
             <img src=""
                  alt="">
           </h4>
           <div class="infos">
             <div class="info">
-              <p class="sub">全部</p>
-              <p class='msg'>23</p>
+              <p class="sub">总计</p>
+              <p class='msg'>{{ dataInfo.vipDatas.total }}</p>
             </div>
             <div class="info">
               <p class="sub">进行中</p>
-              <p class='msg'>23</p>
+              <p class='msg'>{{ dataInfo.vipDatas.applying_num_ }}</p>
             </div>
             <div class="info">
               <p class="sub">已完成</p>
-              <p class='msg'>23</p>
+              <p class='msg'>{{ dataInfo.vipDatas.finished_num_ }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="item" v-if="dataInfo.demoDatas">
+          <h4>
+            <p>试听课</p>
+            <img src=""
+                 alt="">
+          </h4>
+          <div class="infos">
+            <div class="info">
+              <p class="sub">总计</p>
+              <p class='msg'>{{ dataInfo.demoDatas.booked_num_ + dataInfo.demoDatas.unbooked_num_ }}</p>
+            </div>
+            <div class="info">
+              <p class="sub">已预约</p>
+              <p class='msg'>{{ dataInfo.demoDatas.booked_num_ }}</p>
+            </div>
+            <div class="info">
+              <p class="sub">未完成</p>
+              <p class='msg'>{{ dataInfo.demoDatas.unbooked_num_ }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="item" v-if="dataInfo.studentDatas">
+          <h4>
+            <p>分部学生数</p>
+            <img src=""
+                 alt="">
+          </h4>
+          <div class="infos">
+            <div class="info">
+              <p class="sub">总计</p>
+              <p class='msg'>{{ dataInfo.studentDatas.total_num_ }}</p>
+            </div>
+            <div class="info">
+              <p class="sub">本月新增</p>
+              <p class='msg'>{{ dataInfo.studentDatas.new_num_ }}</p>
+            </div>
+            <div class="info">
+              <p class="sub">本月退团</p>
+              <p class='msg'>{{ dataInfo.studentDatas.quit_num_ }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="item">
+          <h4>
+            <p>本月预计上课</p>
+            <img src=""
+                 alt="">
+          </h4>
+          <div class="infos">
+            <div class="info">
+              <p class="sub">乐团课</p>
+              <p class='msg'>{{ dataInfo.musicGroupNum }}</p>
+            </div>
+            <div class="info">
+              <p class="sub">VIP课</p>
+              <p class='msg'>{{ dataInfo.vipGroupNum }}</p>
+            </div>
+            <div class="info">
+              <p class="sub">试听课</p>
+              <p class='msg'>{{ dataInfo.demoGroupNum }}</p>
             </div>
           </div>
         </div>
+
       </div>
     </div>
   </div>
 </template>
 <script>
+import { getIndex } from '@/api/user'
 export default {
-
+  // name: 'main',
+  data() {
+    return {
+      dataInfo: {}
+    }
+  },
+  mounted() {
+    this.__init()
+  },
+  methods: {
+    __init() {
+      getIndex().then(res => {
+        if(res.code == 200) {
+          this.dataInfo = res.data
+        }
+      })
+    }
+  }
 }
 </script>
 <style lang="scss" scope>

src/views/teamBuild/signupList.vue

@@ -513,6 +513,7 @@ export default {
     onCreateQRCode () { // 生成报名二维码
       this.qrcodeStatus = true
       let id = this.$route.query.id
+      let teamName = this.$route.query.name
       if (this.qrcodes) {
         this.qrcodes = false
         setTimeout(() => {
@@ -533,8 +534,8 @@ export default {
             colorLight: '#ffffff',
             correctLevel: QRCode.CorrectLevel.H
           })
-          this.qrcode2.makeCode('http://mstudev.dayaedu.com/#/login?musicGroupId=' + id)
-          this.codeUrl2 = 'http://mstudev.dayaedu.com/#/login?musicGroupId=' + id
+          this.qrcode2.makeCode('http://mstudev.dayaedu.com/#/order?musicGroupId=' + id + '&musicGroupName=' + teamName)
+          this.codeUrl2 = 'http://mstudev.dayaedu.com/#/order?musicGroupId=' + id + '&musicGroupName=' + teamName
         }, 500)
       }
     },

vue.config.js

@@ -17,10 +17,10 @@ const name = defaultSettings.title || 'vue Admin Template' // page title
 // http://47.99.212.176:8000
 // 
 // let target = 'http://192.168.3.27:8000' // 箭河
-let target = 'http://192.168.3.28:8000' //邹璇
+// let target = 'http://192.168.3.28:8000' //邹璇
 // let target = 'http://192.168.3.8:8000' //勇哥
 // let target = 'http://47.99.212.176:8000' // 测试服
-// let target = 'http://192.168.3.48:8000' // 乔
+let target = 'http://192.168.3.48:8000' // 乔
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**