|
@@ -0,0 +1,196 @@
|
|
|
+<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"
|
|
|
+ >¥{{ 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
|
|
|
+ },
|
|
|
+ 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>
|