dy-admin-manager/src/views/vipClass/vipDetail/components/vipBaseInfo.vue

<template>
  <div class='vip-base'>
    <div class="left">
      <el-form label-position='right'
               label-width="120px"
               :model="topForm">
        <el-form-item label="指导老师">
          <el-input v-model="topForm.teacherCount"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="科目名称">
          <el-input v-model="topForm.subject"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="活动方案">
          <el-input v-model="topForm.active"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="课程形式">
          <el-input v-model="topForm.status"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="每班人数">
          <el-input v-model="topForm.classNum"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="每课时长">
          <el-input v-model="topForm.classTime"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="教学点名称">
          <el-input v-model="topForm.address"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="线上课数">
          <el-input v-model="topForm.onlineClass"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="线下课数">
          <el-input v-model="topForm.offlineClass"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="报名开始时间">
          <el-input v-model="topForm.startTime"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="报名结束时间">
          <el-input v-model="topForm.endTime"
                    disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <el-form label-position='right'
               label-width="120px"
               :model="rightForm">
        <el-form-item label="总课时数">
          <el-input v-model="rightForm.allClass"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="课程单价(线上)">
          <el-input v-model="rightForm.onlineClass"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="课程单价(线下)">
          <el-input v-model="rightForm.offlineClass"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="课程总价">
          <el-input v-model="rightForm.allPrice"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="当前课程进度">
          <el-input v-model="rightForm.progress"
                    disabled></el-input>
        </el-form-item>
      </el-form>

    </div>

  </div>
</template>
<script>
import { getVipGroupDetail, findVipGroupStudents, leaveSchool } from '@/api/vipSeting'
export default {
  data () {
    return {
      topForm: {
        teacherCount: '',
        subject: '', // 科目名称
        active: '', // 活动名称
        status: '', //课程形式
        classNum: "", // 每班人数
        classTime: '', // 每课时长
        address: '', // 教学点名称
        onlineClass: '', //线上课数
        offlineClass: '', //线下课数
        startTime: '', // 报名开始时间
        endTime: ''
      },
      rightForm: {
        allClass: '',
        onlineClass: '',
        offlineClass: '',
        allPrice: '',
        progress: ''
      },
      tableList: []
    }
  }, mounted () {
    let id = this.$route.query.id;
    this.id = id;
    // 根据id 获取vip详情
    getVipGroupDetail({ vipGroupId: id }).then(res => {
      if (res.code == 200) {
        /**
         *  teacherCount: '',
        subject: '', // 科目名称
        active: '', // 活动名称
        status: '', //课程形式
        classNum: "", // 每班人数
        classTime: '', // 每课时长
        address: '', // 教学点名称
        onlineClass: '', //线上课数
        offlineClass: '', //线下课数
        startTime: '', // 报名开始时间
         * 
         */
        this.topForm.teacherCount = res.data.userName;
        this.topForm.subject = res.data.subjectName  //科目名称
        this.topForm.active = res.data.vipGroupActivityName;
        this.topForm.status = res.data.categoryName
        this.topForm.classNum = res.data.studentNum;
        // totalClassTimes; 总课时数
        this.topForm.classTime = res.data.singleClassMinutes;
        //  教学点
        this.topForm.address = res.data.teacherSchoolName
        this.topForm.onlineClass = res.data.onlineClassesNum;
        this.topForm.offlineClass = res.data.offlineClassesNum;
        // endTime
        this.topForm.startTime = res.data.registrationStartTime;
        this.topForm.endTime = res.data.paymentExpireDate;
        this.rightForm.allClass = res.data.totalClassTimes;
        this.rightForm.onlineClass = res.data.onlineClassesUnitPrice;
        this.rightForm.offlineClass = res.data.offlineClassesUnitPrice;
        this.rightForm.allPrice = res.data.totalPrice;
        this.rightForm.progress = res.data.currentClassTimes + '/' + res.data.totalClassTimes;
        this.$emit('getName', res.data.name);
        /**
         * allClass: '',
        onlineClass: '',
        offlineClass: '',
        allPrice: '',
        progress: ''
         */
      }
    });
    // 根据id 获取vip学员
    this.getStudents();
    // console.log(this.$route)
  },
  methods: {
    getStudents () {
      findVipGroupStudents({ vipGroupId: this.id }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
        }
      })
    },
    leaveSchool (scope) {
      let studentId = scope.row.id;
      let vipGroupId = this.id;
      leaveSchool({ studentId, vipGroupId }).then(res => {
        if (res.code == 200) {
          this.$message.success('退学成功')
          scope._self.$refs[scope.$index].doClose();
          this.getStudents();

        }
      })

    }
  },
}
</script>
<style lang="scss" scoped>
.vip-base {
  /deep/.el-select {
    width: 180px !important;
  }
  /deep/.el-date-editor.el-input,
  /deep/.el-date-editor.el-input__inner {
    width: 180px !important;
  }
  /deep/.el-input {
    width: 180px !important;
  }

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .left {
    width: 400px;
  }
  .tableWrap {
    margin-top: 40px;
    h4 {
      font-size: 16px;
      font-weight: normal;
      margin-bottom: 20px;
    }
  }
}
</style>