dy-admin-manager/src/views/resetTeaming/modals/review-detail.vue

<template>
  <div>
    <el-alert title="申请信息" :closable="false" class="alert" type="info">
    </el-alert>
    <descriptions :column="2">
      <descriptions-item label="分部名称：">{{
        auditDto.organName
      }}</descriptions-item>
      <descriptions-item label="乐团名称：">{{
        auditDto.musicGroupName
      }}</descriptions-item>
      <descriptions-item label="乐团编号：">{{
        auditDto.musicGroupId
      }}</descriptions-item>
      <descriptions-item label="申请时间：">{{
        auditDto.createTime
      }}</descriptions-item>
      <descriptions-item label="申请类型：">{{
        auditDto.paymentType | userPaymentTypeFormat
      }}</descriptions-item>
      <descriptions-item label="订单类型：">{{
        auditDto.payUserType | payUserTypeFormat
      }}</descriptions-item>
      <descriptions-item label="学员数量：">{{ studentNum }}</descriptions-item>
    </descriptions>
    <el-alert title="课程信息" :closable="false" class="alert" type="info">
    </el-alert>
    <descriptions :column="3">
      <descriptions-item label="收费标准：">{{
        musicGroupPaymentCalenderCourseSettingName
      }}</descriptions-item>
    </descriptions>
    <el-table
      :data="musicGroupPaymentCalenderCourseSettings"
      stripe
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column prop="courseType" label="课程类型" width="120">
        <template slot-scope="scope">
          {{ scope.row.courseType | courseTypeFormat }}
        </template>
      </el-table-column>
      <el-table-column prop="isStudentOptional" label="是否免费" width="100">
      </el-table-column>
      <el-table-column prop="courseTotalMinuties" label="课程总时长(分钟)">
      </el-table-column>
      <el-table-column prop="courseCurrentPrice" label="现价(元)">
      </el-table-column>
      <el-table-column prop="courseOriginalPrice" label="原价(元)">
      </el-table-column>
    </el-table>
    <el-alert title="缴费周期" :closable="false" class="alert" type="info">
    </el-alert>
    <descriptions :column="2">
      <descriptions-item label="缴费金额：">{{
        auditDto.paymentAmount|moneyFormat
      }}</descriptions-item>
      <descriptions-item label="缴费方式：">{{
        auditDto.paymentPattern | paymentPatternTypeFormat
      }}</descriptions-item>
      <descriptions-item
        v-if="auditDto.payUserType !== 'SCHOOL'"
        label="缴费日期："
        >{{ auditDto.startPaymentDate|dayjsFormat }} -
        {{ auditDto.deadlinePaymentDate|dayjsFormat }}</descriptions-item
      >
      <descriptions-item label="缴费有效期："
        >{{ auditDto.paymentValidStartDate }} -
        {{ auditDto.paymentValidEndDate }}</descriptions-item
      >
    </descriptions>
    <el-alert title="其他" :closable="false" class="alert" type="info">
    </el-alert>
    <descriptions :column="2">
      <descriptions-item label="是否赠送乐团网管课：">{{
        auditDto.isGiveMusicNetwork ? "是" : "否"
      }}</descriptions-item>
      <descriptions-item label="备注：">{{ auditDto.memo }}</descriptions-item>
    </descriptions>
  </div>
</template>
<script>
import Vue from "vue";
import { musicGroupPaymentCalenderView } from "../api";
import descriptions from "@/components/Descriptions";
Vue.use(descriptions);
const initData = {
  auditDto: {},
  musicGroupPaymentCalenderCourseSettings: [],
  simpleUserDto: [],
  studentNum: 0,
};
export default {
  props: ["detail"],
  data() {
    return {
      ...initData,
    };
  },
  computed: {
    musicGroupPaymentCalenderCourseSettingName() {
      const active = this.musicGroupPaymentCalenderCourseSettings[0];
      if (active) {
        return active.name;
      }
      return "";
    },
  },
  mounted() {
    this.init();
  },
  activated() {
    this.init();
  },
  methods: {
    async init() {
        try {
          const res = await musicGroupPaymentCalenderView({
            calenderId: this.detail.id,
            musicGroupId: this.detail.musicGroupId,
          });
          for (const key in initData) {
            if (initData.hasOwnProperty(key)) {
              this[key] = res.data[key];
            }
          }
        } catch (error) {}
    },
  }
};
</script>
<style lang="less" scoped>
.alert {
  margin: 10px 0;
}
// /deep/ .description-view{
//   border: none;
//     .description-tr{
//       border-bottom: none;
//     }
//     .description-label{
//       border-right: none;
//       background-color: transparent;
//     }
//     .description-content{
//       border-right: none;
//     }
// }
</style>