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

<template>
  <div>
    <el-alert
      title="学员信息"
      :closable="false"
      class="alert"
      type="info"
      v-if="calender && calender.paymentType === 'ADD_STUDENT'"
    >
    </el-alert>
    <descriptions
      :column="2"
      v-if="calender && calender.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="分部名称：">{{
        calender.organName
      }}</descriptions-item>
      <descriptions-item label="乐团名称：">
        <overflow-text
          :text="calender.musicGroupName"
          width="100%"
        ></overflow-text>
      </descriptions-item>
      <descriptions-item label="乐团编号：">
        <copy-text>{{ calender.musicGroupId }}</copy-text>
      </descriptions-item>
      <descriptions-item label="申请时间：">{{
        calender.createTime
      }}</descriptions-item>
      <descriptions-item label="申请类型：">{{
        calender.paymentType | userPaymentTypeFormat
      }}</descriptions-item>
      <descriptions-item label="订单类型：">{{
        calender.payUserType | payUserTypeFormat
      }}</descriptions-item>
      <descriptions-item
        label="学生人数："
        v-if="
          calenderFeeJson &&
            calenderFeeJson.sutdentNumber &&
            calender.calenderFeeType == 'STUDENT'
        "
        >{{ calenderFeeJson.sutdentNumber }}</descriptions-item
      >
      <descriptions-item
        label="缴费总金额："
        v-if="calenderFeeJson && calenderFeeJson.allTotal"
        >{{
          numeral(calenderFeeJson.allTotal).format("0,0")
        }}</descriptions-item
      >
      <descriptions-item
        label="优惠金额："
        v-if="calenderFeeJson && calenderFeeJson.discountTotal"
        >{{
          numeral(calenderFeeJson.discountTotal).format("0,0")
        }}</descriptions-item
      >
      <descriptions-item label="实缴金额">{{
        numeral(calender.currentTotalAmount).format("0,0")
      }}</descriptions-item>

      <descriptions-item
        label="缴费单号："
        v-if="calender.payUserType == 'SCHOOL'"
        >{{ calender.id }}</descriptions-item
      >
      <descriptions-item
        :span="3"
        v-if="calender.payUserType !== 'SCHOOL'"
        label="缴费日期："
        >{{ calender.startPaymentDate | dayjsFormat }} -
        {{ calender.deadlinePaymentDate | dayjsFormat }}</descriptions-item
      >

      <descriptions-item
        :span="3"
        label="备注："
        style="border-bottom: none !important"
      >
        <span style="display: inline-block; max-width: 100%">
          <overflow-text
            :text="calender ? calender.memo : null"
          ></overflow-text>
        </span>
      </descriptions-item>
    </descriptions>
    <el-alert
      title="乐团课"
      :closable="false"
      class="alert"
      type="info"
      v-if="course && course.length > 0"
    >
    </el-alert>
    <descriptions
      :column="3"
      v-if="course && course.length > 0 && course[0].name"
    >
      <descriptions-item :span="2" label="收费标准：" v-if="course[0].name">{{
        course[0].name
      }}</descriptions-item>
    </descriptions>
    <el-table
      :data="course"
      stripe
      v-if="course && course.length"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <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="课程总时长(分钟)"
        width="150px"
      >
      </el-table-column>
      <el-table-column prop="courseCurrentPrice" label="售价(元)" width="100px">
        <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="原价(元)"
        width="100px"
      ></el-table-column>

      <el-table-column> </el-table-column>
    </el-table>
    <el-table
      :data="musicMerger"
      stripe
      v-if="musicMerger.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>
            {{ scope.row.courseOriginalPrice | moneyFormat }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-alert
      title="学练宝"
      :closable="false"
      class="alert"
      type="info"
      v-if="member.length > 0"
    >
    </el-alert>
    <el-table
      :data="member"
      stripe
      v-if="member.length > 0"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column prop="name" label="学练宝版本" width="120">
      </el-table-column>
      <el-table-column prop="optionalFlag" label="是否必选" width="100px">
        <template slot-scope="scope">{{
          scope.row.optionalFlag ? "是" : "否"
        }}</template>
      </el-table-column>
      <el-table-column prop="autoActivationFlag" label="自动激活" width="100px">
        <template slot-scope="scope">{{
          scope.row.autoActivationFlag ? "是" : "否"
        }}</template>
      </el-table-column>
      <el-table-column prop="courseTotalMinuties" label="会员周期" width="150">
        <template slot-scope="scope">
          <div>
            {{ scope.row.period | memberEnumType }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="数量" width="120"> </el-table-column>
      <el-table-column prop="actualAmount" label="团购价(元)" width="120">
        <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="originalAmount" label="原价(元)"></el-table-column>
      <el-table-column> </el-table-column>
    </el-table>
    <el-alert
      title="乐保"
      :closable="false"
      class="alert"
      type="info"
      v-if="repair && repair.calenderId"
    >
    </el-alert>
    <el-table
      :data="[{ ...repair }]"
      stripe
      v-if="repair && repair.calenderId"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column prop="name" label="服务" width="120">
        <template slot-scope="scope">
          <div>乐器保养</div>
        </template>
      </el-table-column>
      <el-table-column label="年限" width="100px">
        <template slot-scope="scope">{{ scope.row.num }}</template>
      </el-table-column>

      <el-table-column prop="num" label="数量" width="100px"> </el-table-column>
      <el-table-column prop="actualAmount" label="售价(元)" width="100px">
        <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="originalAmount" label="原价(元)"></el-table-column>
    </el-table>
    <el-alert
      title="乐团活动"
      :closable="false"
      class="alert"
      type="info"
      v-if="activity && activity.length > 0"
    >
    </el-alert>
    <el-table
      :data="activity"
      stripe
      v-if="activity && activity.length > 0"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column prop="activityName" label="活动方案" width="120">
      </el-table-column>
      <el-table-column prop="optionalFlag" label="是否必选" width="100px">
        <template slot-scope="scope">{{
          scope.row.optionalFlag ? "是" : "否"
        }}</template>
      </el-table-column>
      <el-table-column label="活动课程" prop="categoryName" width="100px">
        <template slot-scope="scope">{{ scope.row.categoryName }}</template>
      </el-table-column>

      <el-table-column prop="num" label="数量" width="100px"> </el-table-column>
      <el-table-column prop="actualAmount" label="售价(元)" width="100px">
        <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="originalAmount" label="原价(元)"></el-table-column>
    </el-table>
    <el-alert
      title="老师及课程配置"
      :closable="false"
      class="alert"
      type="info"
      v-if="
        calenderFeeJson &&
          calenderFeeJson.teacherFeeList &&
          calender.calenderFeeType == 'TEACHER'
      "
    >
    </el-alert>
    <el-table
      :data="calenderFeeJson.teacherFeeList"
      stripe
      v-if="
        calenderFeeJson &&
          calenderFeeJson.teacherFeeList &&
          calender.calenderFeeType == 'TEACHER'
      "
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column prop="courseType" label="课程类型">
        <template slot-scope="scope">
          {{ scope.row.courseType | courseTypeFormat }}
        </template>
      </el-table-column>
      <el-table-column prop="teacherNumber" label="老师人数"> </el-table-column>
      <el-table-column prop="courseNumber" label="课程数"> </el-table-column>
      <el-table-column prop="courseCurrentPrice" label="单课时售价(元)">
      </el-table-column>
    </el-table>

    <el-table
      :data="goods"
      stripe
      v-if="goods && goods.length > 0"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column prop="goodsName" label="商品名称">
        <template slot-scope="scope">
          {{ scope.row.goodsName }}
        </template>
      </el-table-column>
      <el-table-column prop="goodsSn" label="商品货号"> </el-table-column>
      <el-table-column prop="singlePrice" label="采购价格"> </el-table-column>
      <el-table-column prop="num" label="采购数量"> </el-table-column>
      <el-table-column prop="totalPrice" label="总价格"> </el-table-column>
    </el-table>

    <el-alert
      title="收货信息"
      :closable="false"
      class="alert"
      type="info"
      v-if="address && address.id"
    >
    </el-alert>
    <descriptions :column="2" v-if="address && address.id">
      <descriptions-item label="收货人：">{{ address.name }}</descriptions-item>
      <descriptions-item label="手机号：">{{
        address.phone
      }}</descriptions-item>
      <descriptions-item label="详细地址：" :span="2">
        {{ address.provinceName }} {{ address.cityName }}
        {{ address.regionName }}
        {{ address.address }}
      </descriptions-item>
    </descriptions>

    <el-alert
      title="缴费周期"
      :closable="false"
      class="alert"
      type="info"
      v-if="calenderRefundPeriods && calenderRefundPeriods.length > 0"
    >
    </el-alert>

    <el-table
      :data="calenderRefundPeriods"
      stripe
      v-if="calenderRefundPeriods && calenderRefundPeriods.length > 0"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column
        v-if="calender && calender.paymentType === 'GOODS_PURCHASE'"
        prop="responsiblePersonName"
        label="责任人"
      >
        <template slot-scope="scope">
                {{ scope.row.responsiblePersonName }}
                ({{ scope.row.responsiblePersonPhone }})
            </template>
      </el-table-column>
      <el-table-column prop="refundAmount" label="回款金额"> </el-table-column>
      <el-table-column prop="refundDate" label="回款状态">
        <template slot-scope="scope">
          <div
            v-if="
              calender.status == 'NO' ||
                calender.status == 'OPEN' ||
                calender.status == 'OVER' ||
                calender.status == 'PAID'
            "
          >
            {{ scope.row.refundFlag ? "已回款" : "回款中" }}
          </div>
          <div v-else>
            --
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="refundDate" label="回款时间"> </el-table-column>
    </el-table>

    <!-- 会员信息 -->

    <!--
    <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";
import Item from "@/layout/components/Sidebar/Item.vue";
Vue.use(descriptions);
const initData = {
  calender: {},
  activity: [],
  musicGroupPaymentCalenderStudentDetails: [],
  course: [],
  member: [],
  goods: [],
  address: {},
  repair: {},
  musicMerger: [],
  studentNum: 0,
  phone: "",
  username: "",
  calenderRefundPeriods: []
};
export default {
  components: { Item },
  props: ["detail"],
  data() {
    return {
      payVisible: false,
      ...initData
    };
  },
  computed: {
    musicGroupPaymentCalenderCourseSettingName() {
      const active = this.musicGroupPaymentCalenderCourseSettings[0];
      if (active) {
        return active.name;
      }
      return "";
    },
    calenderFeeJson() {
      const calenderFee = this.calender?.calenderFeeJson;
      if (calenderFee) {
        return JSON.parse(calenderFee);
      }
      return null;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    numeral,
    async init() {
      try {
        const res = await musicGroupPaymentCalenderView({
          id: this.detail.id,
          musicGroupId: this.detail.musicGroupId
        });
        for (const key in initData) {
          if (initData.hasOwnProperty(key)) {
            this[key] = res.data[key];
          }
        }
        consoe.log(this);
      } catch (error) {}
    }
  }
};
</script>
<style lang="less" scoped>
.alert {
  margin: 10px 0;
}
.description-tr {
  &:nth-last-child(1) {
    border-bottom: none !important;
  }
}
// ::v-deep  .description-view{
//   border: none;
//     .description-tr{
//       border-bottom: none;
//     }
//     .description-label{
//       border-right: none;
//       background-color: transparent;
//     }
//     .description-content{
//       border-right: none;
//     }
// }
</style>