dy-admin-manager/src/views/resetTeaming/modals/studentPayDetail.vue

<template>
  <div>
    <el-form ref="titleForm"
             :model="titleForm"
             label-width="80px">
      <el-form-item label="缴费类型">
        <div class="inputStyle">{{ titleForm.paymentType| auditPaymentType}}</div>
      </el-form-item>
      <el-form-item label="收费标准">
        <div class="inputStyle">{{ titleForm.musicGroupOrganizationCourseSettingId }}</div>
      </el-form-item>
      <el-form-item label="缴费方式">
        <div class="inputStyle">{{ titleForm.paymentPattern }}</div>
      </el-form-item>
      <el-form-item label="缴费周期">
        <div class="inputStyle">
          {{ titleForm.paymentValidStartDate|formatTimer }}~{{
            titleForm.paymentValidEndDate|formatTimer
          }}
        </div>
      </el-form-item>
      <el-form-item label="总现价">
        <div>{{allCurrentPrice |moneyFormat}}元</div>
      </el-form-item>
      <el-form-item label="总原价">
        <div>{{ allOriginalPrice | moneyFormat}}元</div>
      </el-form-item>
      <el-form-item label="课程详情">
        <div class="inputStyle">
          <div v-for="(item,index) in msgList"
               class="infoMsg">
            <p class="name">{{item.courseType | coursesType}}:</p>
            <p class="courseTime">课程时长:{{item.courseTotalMinuties}}分钟</p>
            <p>原价:{{item.courseOriginalPrice | moneyFormat}}元</p>
            <p>现价{{item.courseCurrentPrice | moneyFormat}}元</p>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { courseType } from '@/utils/searchArray'
export default {
  props: ['msgList', 'titleForm'],
  data () {
    return {
      // titleForm: {
      //   paymentType: "",
      //   musicGroupOrganizationCourseSettingId: "",
      //   paymentPattern: "",
      //   paymentValidStartDate: "",
      //   paymentValidEndDate: "",
      //   calenderSettingsName: "",
      // },

    }
  },
  mounted () { },
  methods: {},
  computed: {
    allCurrentPrice () {
      // courseType
      let num = 0;
      this.msgList.forEach(item => {
        num += item.courseCurrentPrice
      })
      return num
    },
    allOriginalPrice () {
      let num = 0;
      this.msgList.forEach(item => {
        num += item.courseOriginalPrice
      })
      return num

    }
  }
}
</script>
<style lang="scss" scoped>
.infoMsg {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  p {
    width: 120px;
    padding-right: 10px;
  }
  .name {
    text-align: right;
  }
  .courseTime {
    width: 150px;
  }
}
</style>