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

<template>
  <div class="courseModel" style="margin-top: 12px;">
    <template>
      <div class="yunTrain">
        <img :src="trainBg" />
        <div class="toolText">
          <p class="toolTitle">
            团练宝
            <span @click="videoStatus = true"
              >查看视频<i class="icon_video"></i
            ></span>
          </p>
          <p class="toolDate">
            购买后由机构根据教学情况，激活使用详细问题请咨询机构老师
          </p>
        </div>
      </div>
    </template>

    <div class="section">
      <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>
      <div v-for="(item, index) in toolsPackage" :key="index">
        <el-row class="option-row" @click.native="onTrainChange(item)">
          <el-col :span="12">
            <i
              class="check_default"
              :class="[
                item.isStatus ? 'check_active' : '',
                item.optionalFlag ? 'disabled' : ''
              ]"
            ></i>
            <span style="display: flex; align-items: center;">
              <template>{{ item.name }}</template>
            </span>
          </el-col>
          <el-col :span="6">
            <span style="color: #AAA; font-size: 12px;"
              >{{ item.num }}{{ item.period | unitFormat }}</span
            >
          </el-col>
          <el-col :span="6">
            <span style="color: #1A1A1A"
              >￥{{ item.actualAmount | moneyFormat }}</span
            >
          </el-col>
        </el-row>
        <el-row style="padding-left: 24px;" v-if="item.childGoodsList">
          <el-col
            v-for="(child, index) in item.childGoodsList"
            :key="child.name"
          >
            <span style="font-size: 12px; color: #808080;"
              >{{ child.name }}
              {{ item.childGoodsList.length - 1 == index ? "" : "、" }}</span
            >
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog
      title="视频"
      :visible.sync="videoStatus"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="videoDialog"
      width="30%"
    >
      <video
        style="width: 100%"
        v-if="videoStatus"
        controls="controls"
        class="ql-video"
        :src="'https://daya.ks3-cn-beijing.ksyun.com/202105/SWmqmvW.mp4'"
        :poster="require('../../../assets/images/musicGroup/video_bg.png')"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "courseModel",
  props: {
    courseViewType: [Number, String],
    toolsPackage: Array,
    trainSmallBg: String
  },
  data() {
    return {
      trainBg: require("../../../assets/images/musicGroup/yunTrain_bg.png"),
      videoStatus: false
    };
  },
  methods: {
    onTrainChange(item) {
      // 乐器练习云教练点击时
      this.$emit("onCheckItem", item);
    },
    onQuestions(item) {
      this.$emit("onQuestions", item);
    }
  },
  filters: {
    unitFormat(val) {
      let template = {
        YEAR: "年",
        MONTH: "个月",
        QUARTERLY: "个季度",
        YEAR_HALF: "半年"
      };
      return template[val];
    }
  }
};
</script>

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