09/27

学生页面

src/App.vue

@@ -127,7 +127,7 @@ input[type="number"] {
   justify-content: space-between;
   align-items: center;
   .left {
-    // width: 1000px;
+    width: 1100px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -160,6 +160,9 @@ input[type="number"] {
         text-align: left !important;
         width: 256px;
       }
+      &:nth-child(5n) {
+        text-align: center;
+      }
     }
   }
 }
@@ -218,4 +221,28 @@ input[type="number"] {
     }
   }
 }
+.btnWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  div {
+    width: 120px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    color: #fff;
+    border-radius: 4px;
+    margin-right: 20px;
+    cursor: pointer;
+  }
+  .nextBtn {
+    background-color: #444;
+  }
+  .okBtn {
+    background-color: #f97215;
+  }
+  .closeBtn {
+    background-color: #777;
+  }
+}
 </style>

src/router/index.js

@@ -120,31 +120,68 @@ export const constantRoutes = [
       meta: { title: 'vip详情' }
     }]
   },
-  // {
-  //   path: '/vipClass', // 小课
-  //   component: Layout,
-  //   meta: { title: 'vip管理' },
-  //   children: [
-  //     {
-  //       path: 'vipClass',
-  //       name: 'vipClass',
-  //       component: () => import('@/views/vipClass/vipList'),
-  //       meta: { title: 'vip课列表' }
-  //     },
-  //     {
-  //       path: 'vipDetail',
-  //       name: 'vipDetail',
-  //       component: () => import('@/views/vipClass/vipDetail/index'),
-  //       meta: { title: '调整记录' }
-  //     },
-  //     {
-  //       path: 'resetClass',
-  //       name: 'resetClass',
-  //       component: () => import('@/views/vipClass/resetClasss'),
-  //       meta: { title: 'vip课详情' }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/vipClass', // 小课
+    component: Layout,
+    meta: { title: 'vip管理' },
+    children: [
+      {
+        path: 'vipClass',
+        name: 'vipClass',
+        component: () => import('@/views/vipClass/vipList'),
+        meta: { title: 'vip课列表' }
+      },
+      {
+        path: 'vipDetail',
+        name: 'vipDetail',
+        component: () => import('@/views/vipClass/vipDetail/index'),
+        meta: { title: '调整记录' }
+      },
+      {
+        path: 'resetClass',
+        name: 'resetClass',
+        component: () => import('@/views/vipClass/resetClasss'),
+        meta: { title: 'vip课详情' }
+      }
+    ]
+  },
+  {
+    path: '/teacher',
+    component: Layout,
+    meta: { title: '老师管理', icon: '' },
+    children: [
+      {
+        path: 'teacherList',
+        name: 'teacherList',
+        meta: { title: '老师列表' },
+        component: () => import('@/views/teacherManager/teacherList')
+      },
+      {
+        path: 'teacherDetail',
+        name: 'teacherDetail',
+        meta: { title: '老师详情' },
+        component: () => import('@/views/teacherManager/teacherDetail/index')
+      }
+    ]
+  },
+  {
+    path: '/student',
+    component: Layout,
+    redirect: '/student/studentList',
+    meta: { title: '学生管理' },
+    children: [
+      {
+        path: 'studentList',
+        meta: { title: '学生列表' },
+        component: () => import('@/views/studentManager/studentList'),
+      },
+      {
+        path: 'studentdetaile',
+        meta: { title: '学员详情' },
+        component: () => import('@/views/studentManager/index'),
+      }
+    ]
+  },
 
   // 临时侧边栏结束-----------------------------------
   // {

src/views/buildVip/components/vipBaseInfo.vue

@@ -65,13 +65,19 @@
       <el-form-item label="购买价格(节)">
         <el-input v-model="vipForm.price"></el-input>
       </el-form-item>
+      <br />
       <el-form-item label="线上">
         <el-input v-model="vipForm.online"></el-input>
       </el-form-item>
+      <br />
       <el-form-item label="线下">
         <el-input v-model="vipForm.offline"></el-input>
       </el-form-item>
     </el-form>
+    <div class="btnWrap">
+      <div class="closeBtn">取消</div>
+      <div class="nextBtn">下一步</div>
+    </div>
   </div>
 </template>
 <script>
@@ -105,5 +111,16 @@ export default {
   .el-select {
     width: 180px !important;
   }
+  .el-date-editor.el-input,
+  .el-date-editor.el-input__inner {
+    width: 180px !important;
+  }
+  .el-input {
+    width: 180px !important;
+  }
+  .btnWrap {
+    justify-content: center;
+    margin-top: 300px;
+  }
 }
 </style>

src/views/buildVip/components/vipPlan.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class='course-container'>
+    <div class="left">
+      <el-form :model="leftFrom"
+               :inline="true">
+
+        <el-form-item label="排课起始时间">
+          <el-date-picker v-model="leftFrom.time"
+                          align="right"
+                          type="date"
+                          placeholder="选择日期"
+                          :picker-options="pickerOptions">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="循环方式">
+          <el-input v-model="leftFrom.loop"></el-input>
+        </el-form-item>
+        <el-form-item label="排课次数">
+          <el-input type="number"
+                    v-model="leftFrom.num"></el-input>
+        </el-form-item>
+      </el-form>
+      <p>周次循环<span style="margin-left:10px;">上课时间</span></p>
+      <div class="checkWrap">
+        <el-checkbox-group v-model="checkList">
+          <div class="chioseday">
+            <el-checkbox label="周一"></el-checkbox>
+            <el-time-select placeholder="起始"
+                            v-model="week.Monday.startTime"
+                            :picker-options="{
+                             start: '06:30',
+                             step: '00:05',
+                             end: '18:30'
+                                            }">
+            </el-time-select>
+
+            <el-time-select placeholder="结束"
+                            v-model="week.Monday.endTime"
+                            :picker-options="{
+                            start: '08:30',
+                            step: '00:15',
+                            end: '23:30',
+                            minTime: week.Monday.startTime
+                                            }">
+            </el-time-select>
+          </div>
+          <div class="chioseday">
+            <el-checkbox label="周二"></el-checkbox>
+            <el-time-select placeholder="起始"
+                            v-model="week.Tuesday.startTime"
+                            :picker-options="{
+                             start: '06:30',
+                             step: '00:05',
+                             end: '18:30'
+                                            }">
+            </el-time-select>
+            <el-time-select placeholder="结束"
+                            v-model="week.Tuesday.endTime"
+                            :picker-options="{
+                            start: '08:30',
+                            step: '00:15',
+                            end: '23:30',
+                            minTime: week.Tuesday.startTime
+                                            }">
+            </el-time-select>
+          </div>
+          <div class="chioseday">
+            <el-checkbox label="周三"></el-checkbox>
+            <el-time-select placeholder="起始"
+                            v-model="week.Wednesday.startTime"
+                            :picker-options="{
+                             start: '06:30',
+                             step: '00:05',
+                             end: '18:30'
+                                            }">
+            </el-time-select>
+
+            <el-time-select placeholder="结束"
+                            v-model="week.Wednesday.endTime"
+                            :picker-options="{
+                            start: '08:30',
+                            step: '00:15',
+                            end: '23:30',
+                            minTime: week.Monday.startTime
+                                            }">
+            </el-time-select>
+          </div>
+          <div class="chioseday">
+            <el-checkbox label="周四"></el-checkbox>
+            <el-time-select placeholder="起始"
+                            v-model="week.Thursday.startTime"
+                            :picker-options="{
+                             start: '06:30',
+                             step: '00:05',
+                             end: '18:30'
+                                            }">
+            </el-time-select>
+
+            <el-time-select placeholder="结束"
+                            v-model="week.Thursday.endTime"
+                            :picker-options="{
+                            start: '08:30',
+                            step: '00:15',
+                            end: '23:30',
+                            minTime: week.Thursday.startTime
+                                            }">
+            </el-time-select>
+          </div>
+          <div class="chioseday">
+            <el-checkbox label="周五"></el-checkbox>
+            <el-time-select placeholder="起始"
+                            v-model="week.Friday.startTime"
+                            :picker-options="{
+                             start: '06:30',
+                             step: '00:05',
+                             end: '18:30'
+                                            }">
+            </el-time-select>
+
+            <el-time-select placeholder="结束"
+                            v-model="week.Friday.endTime"
+                            :picker-options="{
+                            start: '08:30',
+                            step: '00:15',
+                            end: '23:30',
+                            minTime: week.Friday.startTime
+                                            }">
+            </el-time-select>
+          </div>
+          <div class="chioseday">
+            <el-checkbox label="周六"></el-checkbox>
+            <el-time-select placeholder="起始"
+                            v-model="week.Saturday.startTime"
+                            :picker-options="{
+                             start: '06:30',
+                             step: '00:05',
+                             end: '18:30'
+                                            }">
+            </el-time-select>
+
+            <el-time-select placeholder="结束"
+                            v-model="week.Saturday.endTime"
+                            :picker-options="{
+                            start: '08:30',
+                            step: '00:15',
+                            end: '23:30',
+                            minTime: week.Saturday.startTime
+                                            }">
+            </el-time-select>
+          </div>
+          <div class="chioseday">
+            <el-checkbox label="周日"></el-checkbox>
+            <el-time-select placeholder="起始"
+                            v-model="week.Sunday.startTime"
+                            :picker-options="{
+                             start: '06:30',
+                             step: '00:05',
+                             end: '18:30'
+                                            }">
+            </el-time-select>
+
+            <el-time-select placeholder="结束"
+                            v-model="week.Sunday.endTime"
+                            :picker-options="{
+                            start: '08:30',
+                            step: '00:15',
+                            end: '23:30',
+                            minTime: week.Sunday.startTime
+                                            }">
+            </el-time-select>
+          </div>
+        </el-checkbox-group>
+        <div class="holidayWrap">
+          <el-checkbox v-model="isholiday">跳过节假日</el-checkbox>
+        </div>
+        <div class="btnWrap">
+          <div class="closeBtn">取消排课</div>
+          <div class="okBtn">一件排课</div>
+        </div>
+      </div>
+
+    </div>
+    <div class="right">
+      <el-calendar>
+        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+        <template slot="dateCell"
+                  slot-scope="{date, data}">
+          <p :class="data.isSelected ? 'is-selected' : ''">
+            {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+          </p>
+        </template>
+      </el-calendar>
+      <div class="btnWrap">
+        <div class="nextBtn">下一步</div>
+        <div class="okBtn">确定</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      leftFrom: {
+        loop: '', // 循环方式
+        time: '',
+        num: ''
+      },
+      pickerOptions: {
+        disabledDate (time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [{
+          text: '今天',
+          onClick (picker) {
+            picker.$emit('pick', new Date());
+          }
+        }, {
+          text: '昨天',
+          onClick (picker) {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            picker.$emit('pick', date);
+          }
+        }, {
+          text: '一周前',
+          onClick (picker) {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', date);
+          }
+        }]
+      },
+      checkList: [],
+      week: {
+        Monday: {
+          startTime: '',
+          endTime: ''
+        },
+        Tuesday: {
+          startTime: '',
+          endTime: ''
+        },
+        Wednesday: {
+          startTime: '',
+          endTime: ''
+        },
+        Thursday: {
+          startTime: '',
+          endTime: ''
+        },
+        Friday: {
+          startTime: '',
+          endTime: ''
+        },
+        Saturday: {
+          startTime: '',
+          endTime: ''
+        },
+        Sunday: {
+          startTime: '',
+          endTime: ''
+        }
+      },
+      isholiday: false
+    }
+  }
+
+}
+</script>
+<style lang="scss">
+.course-container {
+  padding: 47px 58px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  .left {
+    width: 300px;
+    min-width: 300px;
+    margin-right: 90px;
+    .chioseday {
+      margin-top: 20px;
+      .el-date-editor.el-input,
+      .el-date-editor.el-input__inner {
+        width: 100px;
+        margin-left: 20px;
+      }
+    }
+    .holidayWrap {
+      margin-top: 34px;
+      margin-bottom: 40px;
+      display: flex;
+      flex-direction: column;
+      justify-items: center;
+      align-items: center;
+    }
+    .btnWrap {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      div {
+        width: 120px;
+        height: 40px;
+        border-radius: 4px;
+        text-align: center;
+        line-height: 40px;
+        cursor: pointer;
+        color: #fff;
+      }
+      .closeBtn {
+        background-color: #777;
+      }
+      .okBtn {
+        background-color: #14928a;
+      }
+    }
+  }
+  .right {
+    .is-selected {
+      color: #1989fa;
+    }
+    .el-calendar {
+      max-width: 950px;
+    }
+    .btnWrap {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      div {
+        width: 120px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        color: #fff;
+        border-radius: 4px;
+        margin-right: 20px;
+        cursor: pointer;
+      }
+      .nextBtn {
+        background-color: #444;
+      }
+      .okBtn {
+        background-color: #f97215;
+      }
+    }
+  }
+}
+</style>

src/views/buildVip/index.vue

@@ -12,9 +12,9 @@
                      name="1">
           <vipbase />
         </el-tab-pane>
-        <el-tab-pane label="老师列表"
+        <el-tab-pane label="排班设置"
                      name="2">
-          2222
+          <vipplan />
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -22,9 +22,11 @@
 </template>
 <script>
 import vipbase from '@/views/buildVip/components/vipBaseInfo'
+import vipplan from '@/views/buildVip/components/vipPlan'
 export default {
   components: {
-    vipbase
+    vipbase,
+    vipplan
   },
   data () {
     return {

src/views/studentManager/components/studentCashout.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <el-form :inline="true"
+             :model="searceList">
+      <el-form-item label="搜索字段XX">
+        <el-input></el-input>
+      </el-form-item>
+    </el-form>
+    <div class="tableWrap">
+      <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+        <el-table-column label=提现交易流水号>
+        </el-table-column>
+        <el-table-column label=申请时间>
+        </el-table-column>
+        <el-table-column label=提现金额>
+        </el-table-column>
+        <el-table-column label=账户余额>
+        </el-table-column>
+        <el-table-column label=提现余额>
+        </el-table-column>
+        <el-table-column label=账户号>
+        </el-table-column>
+        <el-table-column label=提现状态>
+        </el-table-column>
+        <el-table-column label=支付账号>
+        </el-table-column>
+        <el-table-column label=支付渠道>
+        </el-table-column>
+        <el-table-column label=交易流水号>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      searceList: {}
+    }
+  }
+}
+</script>
+<style lang="scss">
+</style>

src/views/studentManager/components/studentInfo.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class='studentDetail'>
+    <el-form :inline="true"
+             :model="studentForm">
+      <el-form-item label="学生姓名">
+        <el-input v-model="studentForm.name"></el-input>
+      </el-form-item>
+      <el-form-item label="学生性别">
+        <el-input value="啦啦啦"
+                  disabled></el-input>
+      </el-form-item>
+      <el-form-item label="出生年月">
+        <el-input value="啦啦啦"
+                  disabled></el-input>
+      </el-form-item>
+      <el-form-item label="家长姓名">
+        <el-input value="啦啦啦"
+                  disabled></el-input>
+      </el-form-item>
+      <el-form-item label="联系电话">
+        <el-input value="啦啦啦"
+                  disabled></el-input>
+      </el-form-item>
+      <el-form-item label="所在学校">
+        <el-input value="啦啦啦"
+                  disabled></el-input>
+      </el-form-item>
+      <el-form-item label="所属分部">
+        <el-input value="啦啦啦"
+                  disabled></el-input>
+      </el-form-item>
+      <el-form-item label="年级班级">
+        <el-input value="啦啦啦"
+                  disabled></el-input>
+      </el-form-item>
+    </el-form>
+    <div class="teamList">
+      <h4>乐团1</h4>
+      <el-form :inline="true">
+        <el-form-item label="入团日期">
+          <el-input value="2019-09-26"></el-input>
+        </el-form-item>
+        <el-form-item label="所在乐团">
+          <el-input value="2019-09-26"></el-input>
+        </el-form-item>
+        <el-form-item label="报名声部">
+          <el-input value="2019-09-26"></el-input>
+        </el-form-item>
+        <el-form-item label="乐团状态">
+          <el-input value="2019-09-26"></el-input>
+        </el-form-item>
+        <el-form-item label="乐器来源">
+          <el-input value="2019-09-26"></el-input>
+        </el-form-item>
+        <el-form-item label="所选乐器">
+          <el-input value="2019-09-26"></el-input>
+        </el-form-item>
+        <el-form-item label="XX价格">
+          <el-input value="2019-09-26"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      studentForm: {}
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+.studentDetail {
+  .teamList {
+    margin-top: 20px;
+    h4 {
+      margin-bottom: 20px;
+    }
+  }
+}
+</style>

src/views/studentManager/components/studentOrder.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class='studentOrder'>
+    <div class="headWrap">
+      <div class="left">
+        <div class="headItem">
+          <p>账户余额:<span>12345</span></p>
+        </div>
+        <div class="headItem">
+          <p>银行卡:<span>12345</span></p>
+        </div>
+        <div class="headItem">
+          <p>支付宝:<span>12345</span></p>
+        </div>
+        <div class="headItem">
+          <p>微信:<span>12345</span></p>
+        </div>
+      </div>
+    </div>
+    <div class="tableWrap">
+      <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+        <el-table-column label="订单日期"
+                         width="180px">
+        </el-table-column>
+        <el-table-column label="交易类型"
+                         width="180px">
+        </el-table-column>
+        <el-table-column label="订单说明"
+                         width="180px">
+        </el-table-column>
+        <el-table-column label="实际金额">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss" scope>
+.studentOrder {
+}
+</style>

src/views/studentManager/components/studentVip.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class='studentvip'>
+    <div class="topCard">
+      <div class="cardItem">
+        <div class="top">
+          <p class='name'>课程名称</p>
+          <p class="type">线上</p>
+        </div>
+        <div class="bottom">
+          <div>
+            <p class="title">指导老师</p>
+            <p>王老师</p>
+          </div>
+          <div>
+            <p class="title">学员数量</p>
+            <p>12</p>
+          </div>
+          <div>
+            <p class="title">剩余课时</p>
+            <p>10</p>
+          </div>
+        </div>
+      </div>
+      <div class="cardItem active">
+        <div class="top">
+          <p class='name'>课程名称</p>
+          <p class="type">线上</p>
+        </div>
+        <div class="bottom">
+          <div>
+            <p class="title">指导老师</p>
+            <p>王老师</p>
+          </div>
+          <div>
+            <p class="title">学员数量</p>
+            <p>12</p>
+          </div>
+          <div>
+            <p class="title">剩余课时</p>
+            <p>10</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tableWrap">
+      <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+        <el-table-column label="学员姓名">
+        </el-table-column>
+        <el-table-column label="性别">
+        </el-table-column>
+        <el-table-column label="联系电话">
+        </el-table-column>
+        <el-table-column label="所在学校">
+        </el-table-column>
+        <el-table-column label="年级班级">
+        </el-table-column>
+        <el-table-column label="报名专业">
+        </el-table-column>
+        <el-table-column label="乐团班级">
+        </el-table-column>
+        <el-table-column label="合奏团">
+        </el-table-column>
+        <el-table-column label="学员状态">
+        </el-table-column>
+        <el-table-column label="是否缴费">
+        </el-table-column>
+         <el-table-column label="操作">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss">
+.studentvip {
+  .topCard {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-bottom: 30px;
+    .cardItem {
+      margin-right: 15px;
+      width: 300px;
+      height: 130px;
+      padding: 20px 24px;
+      box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
+      box-sizing: border-box;
+      border-radius: 6px;
+      .top {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 23px;
+        .name {
+          font-size: 14px;
+          color: #323c47;
+          font-weight: 500;
+        }
+        .type {
+          font-size: 14px;
+          color: #aaa;
+        }
+      }
+      .bottom {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        text-align: center;
+        p {
+          font-size: 14px;
+          color: #444;
+        }
+        .title {
+          color: #aaa;
+          margin-bottom: 8px;
+        }
+      }
+    }
+    .cardItem.active {
+      background-color: #14928a;
+      .name {
+        font-size: 14px;
+        color: #fff;
+        font-weight: 500;
+      }
+      .type {
+        font-size: 14px;
+        color: #fff;
+      }
+      .bottom {
+        p {
+          color: #fff;
+        }
+        .title {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/studentManager/index.vue

@@ -10,6 +10,7 @@
                @tab-click="handleClick">
         <el-tab-pane label="基本信息"
                      name="1">
+          <studentInfo />
         </el-tab-pane>
         <el-tab-pane label="乐团&课程"
                      name="2">
@@ -17,7 +18,7 @@
         </el-tab-pane>
         <el-tab-pane label="VIP课"
                      name="3">
-
+          <studentVip />
         </el-tab-pane>
         <el-tab-pane label="上课记录"
                      name="4">
@@ -29,28 +30,38 @@
         </el-tab-pane>
         <el-tab-pane label="学员订单"
                      name="6">
+          <studentOrder />
         </el-tab-pane>
-        <el-tab-pane label="学员账户"
+        <el-tab-pane label="学员提现"
                      name="7">
+          <studentCashout />
         </el-tab-pane>
       </el-tabs>
     </div>
   </div>
 </template>
 <script>
+import studentInfo from './components/studentInfo.vue';
 import teamAndcourse from './components/teamAndcourse.vue';
 import studentRecord from './components/studentRecord.vue';
 import studentPayList from './components/studentPayList.vue';
+import studentVip from './components/studentVip.vue';
+import studentOrder from './components/studentOrder.vue';
+import studentCashout from './components/studentCashout.vue';
 export default {
   components: {
     teamAndcourse,
     studentRecord,
-    studentPayList
+    studentPayList,
+    studentInfo,
+    studentVip,
+    studentOrder,
+    studentCashout
   },
   name: 'studentDetail',
   data () {
     return {
-      activeIndex: '2'
+      activeIndex: '6'
     }
   },
   methods: {

src/views/teacherManager/teacherDetail/components/courseInfo.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class='courseInfo'>
+    <div class="tableWrap">
+      <h4>乐团课</h4>
+      <el-table :data='teamList'
+                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+        <el-table-column label="乐团编号">
+        </el-table-column>
+        <el-table-column label="乐团名称">
+        </el-table-column>
+        <el-table-column label="老师类型">
+        </el-table-column>
+        <el-table-column label="乐团职位">
+        </el-table-column>
+        <el-table-column label="执教班级">
+        </el-table-column>
+        <el-table-column label="乐团状态">
+        </el-table-column>
+        <el-table-column label="出勤次数">
+        </el-table-column>
+        <el-table-column label="操作">
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="tableWrap tableMargin">
+      <h4>vip课</h4>
+      <el-table :data='teamList'
+                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+        <el-table-column label="VIP编号">
+        </el-table-column>
+        <el-table-column label="VIP课名称">
+        </el-table-column>
+        <el-table-column label="VIP课状态">
+        </el-table-column>
+        <el-table-column label="指导老师">
+        </el-table-column>
+        <el-table-column label="班级人数">
+        </el-table-column>
+        <el-table-column label="课程单价">
+        </el-table-column>
+        <el-table-column label="活动方案">
+        </el-table-column>
+        <el-table-column label="剩余课时">
+        </el-table-column>
+        <el-table-column label="月均消耗">
+        </el-table-column>
+        <el-table-column label="开课时间">
+        </el-table-column>
+        <el-table-column label="截止时间">
+        </el-table-column>
+        <el-table-column label="申请时间">
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="tableWrap tableMargin">
+      <h4>试听课</h4>
+      <el-table :data='teamList'
+                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+        <el-table-column label="星期"
+                         width="180px">
+        </el-table-column>
+        <el-table-column label="试听安排">
+        </el-table-column>
+        <el-table-column label="试听专业"
+                         width="180px">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      teamList: []
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+.courseInfo {
+  h4 {
+    margin-bottom: 20px;
+  }
+  .tableMargin {
+    margin-top: 20px;
+  }
+}
+</style>

src/views/teacherManager/teacherDetail/components/salarySet.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="salarySet">
+    <h4>单次课次参考时长：30min</h4>
+    <div class="tableList">
+      <div class="left">
+        <el-table :data='teamTable'
+                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+          <el-table-column label="乐团课酬参考值">
+          </el-table-column>
+          <el-table-column label="主教单课次课酬">
+          </el-table-column>
+          <el-table-column label="助教单课次课酬">
+          </el-table-column>
+          <el-table-column label="操作">
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="right">
+        <el-table :data='vipTable'
+                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+          <el-table-column label="VIP课酬参考值">
+          </el-table-column>
+          <el-table-column label="线上课">
+          </el-table-column>
+          <el-table-column label="线下课">
+          </el-table-column>
+          <el-table-column label="操作">
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      teamTable: [],
+      vipTable: []
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+.salarySet {
+  h4 {
+    margin-bottom: 20px;
+    font-size: 14px;
+    color: #444;
+    font-weight: normal;
+  }
+  .tableList {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    > div {
+      flex: 1;
+    }
+  }
+}
+</style>

src/views/teacherManager/teacherDetail/components/settlement.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="headWrap">
+      <div class="left">
+        <div class="headItem">
+          <p>未结算总额:<span>12345</span></p>
+        </div>
+      </div>
+    </div>
+    <el-form :inline="true"
+             :model="searchForm">
+      <el-form-item label="课程类型">
+        <el-select v-model="type">
+          <el-option label="哈哈哈"
+                     value="1">
+
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="tableWrap">
+      <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+        <el-table-column label="上课时间">
+        </el-table-column>
+        <el-table-column label="班级名称">
+        </el-table-column>
+        <el-table-column label="课程类型">
+        </el-table-column>
+        <el-table-column label="上课类型">
+        </el-table-column>
+        <el-table-column label="当前课次">
+        </el-table-column>
+        <el-table-column label="考情状态">
+        </el-table-column>
+        <el-table-column label="老师课酬">
+        </el-table-column>
+        <el-table-column label="课时补贴">
+        </el-table-column>
+        <el-table-column label="结算状态">
+        </el-table-column>
+        <el-table-column label="操作">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      searchForm: {
+        type: ''
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+</style>

src/views/teacherManager/teacherDetail/components/teacherInfo.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="teacherInfo">
+    <div class="infoWrap">
+      <div class="left">
+        <h4>基本信息</h4>
+        <el-form :model="topForm"
+                 :inline="true">
+          <el-form-item label="老师编号">
+            <el-input v-model="topForm.teacher"></el-input>
+          </el-form-item>
+          <el-form-item label="性别">
+            <el-input v-model="topForm.sex"></el-input>
+          </el-form-item>
+          <el-form-item label="出生日期">
+            <el-input v-model="topForm.sex"></el-input>
+          </el-form-item>
+          <el-form-item label="工作类别">
+            <el-input v-model="topForm.sex"></el-input>
+          </el-form-item>
+          <el-form-item label="入职日期">
+            <el-input v-model="topForm.sex"></el-input>
+          </el-form-item>
+          <el-form-item label="教学点1">
+            <el-input v-model="topForm.sex"></el-input>
+          </el-form-item>
+          <el-form-item label="所属分部">
+            <el-input v-model="topForm.sex"></el-input>
+          </el-form-item>
+          <el-form-item label="教学点2">
+            <el-input v-model="topForm.sex"></el-input>
+          </el-form-item>
+          <el-form-item label="流动范围">
+            <el-input v-model="topForm.sex"></el-input>
+          </el-form-item>
+          <br />
+          <el-form-item label="老师简介">
+            <el-input type='textarea'
+                      v-model="topForm.sex"></el-input>
+          </el-form-item>
+        </el-form>
+        <h4>资料学历</h4>
+        <el-form :model="dataInfo"
+                 :inline="true">
+          <el-form-item label="手机号">
+            <el-input v-model="dataInfo.phone"></el-input>
+          </el-form-item>
+          <el-form-item label="毕业学校">
+            <el-input v-model="dataInfo.phone"></el-input>
+          </el-form-item>
+          <el-form-item label="电子邮箱">
+            <el-input v-model="dataInfo.phone"></el-input>
+          </el-form-item>
+          <el-form-item label="最高学历">
+            <el-input v-model="dataInfo.phone"></el-input>
+          </el-form-item>
+          <el-form-item label="专业技能">
+            <el-input v-model="dataInfo.phone"></el-input>
+          </el-form-item>
+          <el-form-item label="职称">
+            <el-input v-model="dataInfo.phone"></el-input>
+          </el-form-item>
+          <el-form-item label="证件类型">
+            <el-input v-model="dataInfo.phone"></el-input>
+          </el-form-item>
+          <el-form-item label="证件号码">
+            <el-input v-model="dataInfo.phone"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="right">
+        <div class="teacherIcon">
+          <img src="@/assets/images/base/woman.png"
+               alt="">
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      topForm: {
+        teacher: '',
+        sex: ''
+      },
+      dataInfo: {
+        phone: ''
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+.teacherInfo {
+  .infoWrap {
+    margin-top: 20px;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    .left {
+      max-width: 1000px;
+      h4 {
+        margin-bottom: 20px;
+      }
+    }
+    .right {
+      margin-left: 100px;
+      .teacherIcon {
+        width: 150px;
+        height: 150px;
+        // border: 1px solid #444;
+        border-radius: 50%;
+        overflow: hidden;
+        img {
+          width: 150px;
+          height: 150px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/teacherManager/teacherDetail/index.vue

@@ -8,10 +8,11 @@
                @tab-click="handleClick">
         <el-tab-pane label="基本信息"
                      name="1">
+          <teacherInfo />
         </el-tab-pane>
         <el-tab-pane label="课程信息"
                      name="2">
-
+          <courseInfo />
         </el-tab-pane>
         <el-tab-pane label="上课记录"
                      name="3">
@@ -21,8 +22,13 @@
                      name="4">
           <leaveRecord />
         </el-tab-pane>
-        <el-tab-pane label="财务详情"
+        <el-tab-pane label="上课结算列表"
                      name="5">
+          <settlement />
+        </el-tab-pane>
+        <el-tab-pane label="课酬设置"
+                     name="6">
+          <salarySet />
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -31,12 +37,16 @@
 <script>
 import teacherRecord from '@/views/teacherManager/teacherDetail/components/teacherRecord'
 import leaveRecord from '@/views/teacherManager/teacherDetail/components/leaveRecord'
+import teacherInfo from '@/views/teacherManager/teacherDetail/components/teacherInfo'
+import courseInfo from '@/views/teacherManager/teacherDetail/components/courseInfo'
+import settlement from '@/views/teacherManager/teacherDetail/components/settlement'
+import salarySet from '@/views/teacherManager/teacherDetail/components/salarySet'
 export default {
-  components: { teacherRecord, leaveRecord },
+  components: { teacherRecord, leaveRecord, teacherInfo, courseInfo, settlement, salarySet },
   name: 'teacherDetail',
   data () {
     return {
-      activeName: '3'
+      activeName: '1'
     }
   },
   methods: {

src/views/teamDetail/components/baseInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='base-container'>
+  <div class='basea-container'>
     <div class="baseTop">
       <div class="left">
         <el-form :inline="true"
@@ -84,7 +84,7 @@ export default {
 }
 </script>
 <style lang="scss" scope>
-.base-container {
+.basea-container {
   margin-top: 35px;
   .baseTop {
     display: flex;

src/views/vipClass/vipDetail/components/fnanceInfo.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="">
+    <!-- 头部展示 -->
+    <div class="headWrap">
+      <div class="left">
+        <div class="headItem">
+          <p>课程单价: <span> 张三，李四</span></p>
+        </div>
+        <div class="headItem">
+          <p>课程收入: <span> 张三，李四</span></p>
+        </div>
+        <div class="headItem">
+          <p>课酬标准: <span> 张三，李四</span></p>
+        </div>
+        <div class="headItem">
+          <p>扣费笔数: <span> 张三，李四</span></p>
+        </div>
+        <div class="headItem">
+          <p>扣费总额: <span> 张三，李四</span></p>
+        </div>
+        <div class="headItem">
+          <p>课酬总额: <span> 张三，李四</span></p>
+        </div>
+      </div>
+    </div>
+    <!-- 搜索栏 -->
+    <el-form :inline="true"
+             :model="searchForm">
+      <el-form-item label="时间范围">
+        <el-date-picker v-model="searchForm.time"
+                        type="date"
+                        placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+    </el-form>
+    <div class="tableWrap">
+      <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}"
+                :data='tableList'>
+        <el-table-column label="上课时间">
+        </el-table-column>
+        <el-table-column label="星期几">
+        </el-table-column>
+        <el-table-column label="当前课次">
+        </el-table-column>
+        <el-table-column label="上课学员">
+        </el-table-column>
+        <el-table-column label="是否赠送">
+        </el-table-column>
+        <el-table-column label="扣费学员数">
+        </el-table-column>
+        <el-table-column label="扣费总额">
+        </el-table-column>
+        <el-table-column label="老师课酬">
+        </el-table-column>
+        <el-table-column label="扣费状态">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      searchForm: {
+        time: ''
+      },
+      tableList: []
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+</style>

src/views/vipClass/vipDetail/components/vipBaseInfo.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class='vip-base'>
+    <el-form :inline="true"
+             :model="topForm">
+      <el-form-item label="指导老师">
+        <el-input v-model="topForm.teacherCount"></el-input>
+      </el-form-item>
+      <el-form-item label="所属分部">
+        <el-select v-model="topForm.section">
+          <el-option value="1"
+                     label="哈哈哈"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="申请时间">
+        <el-date-picker v-model="topForm.apply"
+                        type="date"
+                        placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="课程名字">
+        <el-input v-model="topForm.className"></el-input>
+      </el-form-item>
+      <el-form-item label="科目名称">
+        <el-select v-model="topForm.cuorse">
+          <el-option value="1"
+                     label="哈哈哈"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="开课时间">
+        <el-date-picker v-model="topForm.startTime"
+                        type="date"
+                        placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="班级名称">
+        <el-input v-model="topForm.className"></el-input>
+      </el-form-item>
+      <el-form-item label="课时进度">
+        <el-input v-model="topForm.progress"></el-input>
+      </el-form-item>
+      <el-form-item label="有效期">
+        <el-date-picker v-model="topForm.validity"
+                        type="date"
+                        placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="活动方案">
+        <el-select v-model="topForm.active">
+          <el-option value="1"
+                     label="哈哈哈"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="课程类型">
+        <el-input v-model="topForm.type"></el-input>
+      </el-form-item>
+      <el-form-item label="安排课时">
+        <el-input v-model="topForm.course"></el-input>
+      </el-form-item>
+      <el-form-item label="课程单价">
+        <el-input v-model="topForm.price"></el-input>
+      </el-form-item>
+    </el-form>
+    <div class="tableWrap"
+         style="width: 100%">
+      <el-table :data='tableList'>
+        <el-table-column label="学员名单"
+                         width="180">
+        </el-table-column>
+        <el-table-column label="已上课时"
+                         width="180">
+        </el-table-column>
+        <el-table-column label="操作">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      topForm: {
+        teacherCount: '',
+        section: '',
+        apply: '',
+        className: '',
+        cuorse: '',
+        startTime: '',
+        progress: '',
+        validity: '',
+        active: '',
+        type: '',
+        course: '',
+        price: ''
+
+      },
+      tableList: []
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+.vip-base {
+  .el-select {
+    width: 180px !important;
+  }
+  .el-date-editor.el-input,
+  .el-date-editor.el-input__inner {
+    width: 180px !important;
+  }
+  .el-input {
+    width: 180px !important;
+  }
+}
+</style>

src/views/vipClass/vipDetail/index.vue

@@ -8,6 +8,7 @@
                @tab-click="handleClick">
         <el-tab-pane label="基本信息"
                      name="1">
+          <vipBase />
         </el-tab-pane>
         <el-tab-pane label="教学记录"
                      name="2">
@@ -19,6 +20,7 @@
         </el-tab-pane>
         <el-tab-pane label="vip课程财务"
                      name="4">
+          <fnanceInfo />
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -26,12 +28,14 @@
 </template>
 <script>
 import teacherRecord from '@/views/vipClass/vipDetail/components/teacherRecord'
+import vipBase from '@/views/vipClass/vipDetail/components/vipBaseInfo'
+import fnanceInfo from '@/views/vipClass/vipDetail/components/fnanceInfo'
 export default {
-  components: { teacherRecord },
+  components: { teacherRecord, vipBase, fnanceInfo },
   name: 'vipDetail',
   data () {
     return {
-      activeName: '2'
+      activeName: '1'
     }
   },
   methods: {