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

<template>
  <div class="courseModel" style="margin-top: 12px;">
    <template v-if="courseViewType == 1 && courseShowInfo.length > 0">
      <div class="yunTrain">
        <img :src="trainBg" />
        <div class="toolText">
          <p class="toolTitle">服务</p>
          <p class="toolDate" v-if="serviceValidDate">
            服务有效期:{{ serviceValidDate }}
          </p>
        </div>
      </div>
    </template>

    <h2
      class="titles"
      v-if="
        (courseViewType == 0 || courseViewType == 2) && courseInfo.length > 0
      "
    >
      <img :src="trainSmallBg" />
      <span>乐团课程</span>
    </h2>

    <template v-if="courseInfo">
      <!-- 可选课程信息集合 -->
      <div
        class="section"
        v-if="
          (courseViewType == 0 || courseViewType == 2) && courseInfo.length > 0
        "
      >
        <el-row class="title-row">
          <el-col :span="12">课程类型</el-col>
          <!-- 原价 -->
          <el-col :span="5" :offset="1" style="text-align: right;">时长</el-col>
          <el-col :span="6" style="text-align: right;">价格</el-col>
        </el-row>
        <el-row
          class="option-row"
          @click.native="onCheckItem(item)"
          v-for="(item, index) in courseInfo"
          :key="index"
        >
          <el-col :span="12">
            <i
              class="check_default"
              :class="[
                item.isStatus ? 'check_active' : '',
                item.isStudentOptional ? 'disabled' : ''
              ]"
            ></i
            ><template v-if="item.courseType == 'PROJECT'">{{
              item.name
            }}</template
            ><template v-else>{{ item.courseType | coursesType }}</template>
          </el-col>
          <el-col :span="6">
            <span style="color: #AAA; font-size: 12px;"
              >{{ item.courseTotalMinuties }}分钟</span
            >
          </el-col>
          <el-col :span="6">
            <span style="color: #1A1A1A"
              >￥{{ (remissionCourseFeeStatus ? 0 : item.courseCurrentPrice) | moneyFormat }}</span
            >
          </el-col>
        </el-row>
      </div>
      <!-- 所有不可选的课程合集 courseShowStatus -->
      <div
        class="section"
        v-if="courseViewType == 1 && courseShowInfo.length > 0"
      >
        <el-row
          class="option-row"
          v-for="(item, index) in courseShowInfo"
          :key="index"
          @click.native="onCheckItem(item)"
        >
          <el-col :span="16">
            <i
              class="check_default"
              :class="[
                item.isStatus ? 'check_active' : '',
                item.isStudentOptional ? 'disabled' : ''
              ]"
            ></i>
            <span style="display: flex; align-items: center;">
              <template v-if="item.courseType == 'PROJECT'"
                >{{ chargeTypeName }} </template
              ><template v-else>{{ item.courseType | coursesType }}</template>
            </span>
            <el-icon
              v-if="item.courseType == 'PROJECT'"
              name="question"
              @click.stop="onQuestions('amr')"
            />
          </el-col>
          <!-- <el-col :span="5">
						<del style="color: #AAA; font-size: 12px;">￥{{ item.courseOriginalPrice | moneyFormat }}</del>
					</el-col> -->
          <el-col :span="8">
            <span style="color: #1A1A1A"
              >￥{{ item.courseCurrentPrice | moneyFormat }}</span
            >
          </el-col>
        </el-row>
      </div>
      <!-- 赠送课程 -->
      <div class="section" v-if="memberCourseShowFlag && courseViewType == 2">
        <el-row class="title-row">
          <el-col :span="12">赠送课程</el-col>
          <el-col :span="5" :offset="1" style="text-align: right;">原价</el-col>
          <el-col :span="6" style="text-align: right;">现价</el-col>
        </el-row>
        <el-row
          class="option-row"
          style="line-height: 20px; padding-top: 8px; font-size: 12px;"
          v-for="member in memberCoursePrice"
          :key="member.name"
        >
          <el-col
            :span="12"
            style="padding-left: 24px;color: #808080; position: relative"
            ><i class="small_point"></i> {{ member.name }}</el-col
          >
          <el-col :span="6"
            ><del style="color: #AAA; font-size: 12px;"
              >￥{{ member.price | moneyFormat }}</del
            ></el-col
          >
          <el-col :span="6"
            ><span style="color: #1A1A1A">￥{{ 0 | moneyFormat }}</span></el-col
          >
        </el-row>
      </div>
    </template>
  </div>
</template>

<script>
// import videoPlayer from '@/components/video'
export default {
  name: "courseModel",
  props: {
    courseViewType: [Number, String],
    courseShowInfo: Array, // 无用
    courseInfo: Array,
    toolsPackage: Array, // 无用
    trainSmallBg: String,
    cloudTeacherFee: [Number, String], // 无用
    serviceValidDate: String,
    chargeTypeName: String,
    memberCoursePrice: Array,
    memberCourseShowFlag: Boolean,
    remissionCourseFeeStatus: Boolean
  },
  components: {
    // videoPlayer
  },
  data() {
    return {
      trainBg: require("../../../assets/images/musicGroup/yunTrain_bg.png"),
      videoStatus: false
    };
  },
  methods: {
    onCheckItem(item) {
      this.$emit("onCourseChange", item);
    },
    onQuestions(item) {
      this.$emit("onQuestions", item);
    }
  }
};
</script>

<style lang="less" scoped>
.giveTitle {
  margin-top: 16px;
  padding-top: 8px;
  color: #1a1a1a;
  font-size: 14px;
  padding-left: 24px;
}
.small_point {
  position: absolute;
  left: 8px;
  top: 7px;
  width: 6px;
  height: 6px;
  background: #01c1b5;
  border-radius: 50%;
}
@import url("./signUpPayment.less");
</style>