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

<template>
  <div>
    <el-alert title="学员信息"
      :closable="false"
      class="alert"
      type="info"
      v-if="musicGroupPaymentCalenders[0].paymentType === 'ADD_STUDENT'"
    >
    </el-alert>
    <descriptions :column="2" v-if="musicGroupPaymentCalenders[0].paymentType === 'ADD_STUDENT'">
      <descriptions-item label="学员姓名：">{{
        username
      }}</descriptions-item>
      <descriptions-item label="手机号码：">{{
        phone
      }}</descriptions-item>
    </descriptions>
    <el-alert title="申请信息"
              :closable="false"
              class="alert"
              type="info">
    </el-alert>
    <descriptions :column="2">
      <descriptions-item label="分部名称：">{{
        auditDto.organName
      }}</descriptions-item>
      <descriptions-item label="乐团名称：">
        <overflow-text :text="auditDto.musicGroupName" width="100%"></overflow-text>
      </descriptions-item>
      <descriptions-item label="乐团编号：">
        <copy-text>{{ auditDto.musicGroupId }}</copy-text>
      </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 :span="3" label="备注：">{{ musicGroupPaymentCalenders[0] ? musicGroupPaymentCalenders[0].memo : null }}</descriptions-item>
    </descriptions>
    <el-alert title="课程信息"
              :closable="false"
              class="alert"
              type="info">
    </el-alert>
    <descriptions :column="3" v-if="musicGroupPaymentCalenderCourseSettingName">
      <descriptions-item :span="2" label="收费标准：">{{
        musicGroupPaymentCalenderCourseSettingName
      }}</descriptions-item>
    </descriptions>
    <el-table :data="musicGroupPaymentCalenderCourseSettings"
              stripe
              v-if="musicGroupPaymentCalenderCourseSettings.length"
              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="100px">
                       <template slot-scope="scope">{{scope.row.isStudentOptional ? '是' : '否'}}</template>
      </el-table-column>
      <el-table-column prop="courseTotalMinuties"
                       label="课程总时长(分钟)">
      </el-table-column>
      <el-table-column prop="courseCurrentPrice"
                       label="现价(元)">

        <template slot="header">
          <p style="position: relative">
            现价(元)
            <el-tooltip placement="top" popper-class="mTooltip">
              <div slot="content">学生实际缴费金额</div>
              <i
                class="el-icon-question"
                style="font-size: 18px; color: #f56c6c"
              ></i>
            </el-tooltip>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="courseOriginalPrice"
                       label="原价(元)">
      </el-table-column>
    </el-table>
    <el-table :data="musicGroupPaymentCalenderStudentDetails"
              stripe
              v-if="musicGroupPaymentCalenderStudentDetails.length"
              style="width: 100%; margin-top: 10px">
      <el-table-column prop="username"
                       label="学员姓名">
      </el-table-column>
      <el-table-column prop="phone"
                       label="手机号">
      </el-table-column>
      <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="100px">
                       <template slot-scope="scope">{{scope.row.isStudentOptional ? '是' : '否'}}</template>
      </el-table-column>
      <el-table-column prop="courseTime"
                       label="课程总时长(分钟)">
      </el-table-column>
      <el-table-column prop="courseCurrentPrice"
                       label="现价(元)">

        <template slot="header">
          <p style="position: relative">
            现价(元)
            <el-tooltip placement="top" popper-class="mTooltip">
              <div slot="content">学生实际缴费金额</div>
              <i
                class="el-icon-question"
                style="font-size: 18px; color: #f56c6c"
              ></i>
            </el-tooltip>
          </p>
        </template>
        <template slot-scope="scope">
          <div>
            {{ scope.row.courseCurrentPrice | moneyFormat }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="courseOriginalPrice"
                       label="原价(元)">

        <template slot-scope="scope">
          <div>
            {{ (musicGroupPaymentCalenders[0].paymentType === 'SPAN_GROUP_CLASS_ADJUST' ? scope.row.masterSubCoursePrice : scope.row.courseOriginalPrice) | moneyFormat }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-alert title="缴费周期"
              :closable="false"
              class="alert"
              type="info">
    </el-alert>
    <descriptions v-for="item in musicGroupPaymentCalenders" :key="item.id" :column="2">
      <descriptions-item label="缴费金额：">{{
        numeral(item.paymentAmount).format('0,0')
      }}</descriptions-item>
      <descriptions-item label="缴费方式：">{{
        item.paymentPattern | paymentPatternTypeFormat
      }}</descriptions-item>
      <descriptions-item :span="3" v-if="item.payUserType !== 'SCHOOL'"
                         label="缴费日期：">{{ item.startPaymentDate|dayjsFormat }} -
        {{ item.deadlinePaymentDate|dayjsFormat }}</descriptions-item>
      <descriptions-item :span="3" label="缴费有效期：">{{ item.paymentValidStartDate | dayjsFormat }} -
        {{ item.paymentValidEndDate | dayjsFormat }}</descriptions-item>
    </descriptions>
    <el-dialog :visible.sync="payVisible"
               :close-on-click-modal="false"
               append-to-body
               width="600px"
               title="查看学员">
      <el-table :data="simpleUserDto">
        <el-table-column prop="userId"
                         label="用户ID"
                         width="180">
        </el-table-column>
        <el-table-column prop="userName"
                         label="姓名"
                         width="180">
        </el-table-column>
        <el-table-column prop="subjectNames"
                         label="声部"
                         width="180">
        </el-table-column>
      </el-table>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="payVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Vue from "vue";
import numeral from 'numeral'
import { musicGroupPaymentCalenderView } from "../api";
import descriptions from "@/components/Descriptions";
Vue.use(descriptions);
const initData = {
  auditDto: {},
  musicGroupPaymentCalenderCourseSettings: [],
  musicGroupPaymentCalenderStudentDetails: [],
  simpleUserDto: [],
  musicGroupPaymentCalenders: [],
  studentNum: 0,
  phone: '',
  username: '',
};
export default {
  props: ["detail"],
  data () {
    return {
      payVisible: false,
      ...initData,
    };
  },
  computed: {
    musicGroupPaymentCalenderCourseSettingName () {
      const active = this.musicGroupPaymentCalenderCourseSettings[0];
      if (active) {
        return active.name;
      }
      return "";
    },
  },
  mounted () {
    this.init();
  },
  methods: {
    numeral,
    async init () {
      try {
        const res = await musicGroupPaymentCalenderView({
          batchNo: this.detail.batchNo,
          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>