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

<template>
  <div class="instrumentModel">
    <h2 class="titles" v-if="instrumentResultList.length > 0">
      <img :src="trainSmallBg" />
      <span>乐器</span>
    </h2>
    <div class="section" v-if="instrumentResultList.length > 0">
      <div v-for="(i, index) in instrumentResultList" :key="index">
        <el-row class="title-row">
          <el-col :span="13">
            <template v-if="i[0]['kitType'] == 'GROUP'">
              团购乐器{{ courseViewType == 2 ? "(赠送辅件一套)" : null }}
            </template>
            <template v-if="i[0]['kitType'] == 'LEASE'">
              乐器租赁{{ courseViewType == 2 ? "(请自行购买辅件)" : null }}
            </template>
            <template v-if="i[0]['kitType'] == 'FREE'">
              免费乐器{{ courseViewType == 2 ? "(请自行购买辅件)" : null }}
            </template>
            <template v-if="i[0]['kitType'] == 'owned'">
              自备乐器{{ courseViewType == 2 ? "(请自行购买辅件)" : null }}
            </template>
          </el-col>
          <el-col :span="5" style="text-align: right;">
            <template
              v-if="['GROUP', 'LEASE', 'FREE'].includes(i[0]['kitType'])"
              >原价</template
            >
            <!-- <template v-if="i[0]['kitType'] == 'LEASE'">原价</template> -->
          </el-col>
          <el-col :span="5" :offset="1" style="text-align: right;">
            <!-- <template v-if="i[0]['kitType'] == 'GROUP' || i[0]['kitType'] == 'FREE'">现价</template> -->
            <template v-if="['GROUP', 'FREE'].includes(i[0]['kitType'])"
              >现价</template
            >
            <template v-if="i[0]['kitType'] == 'LEASE'"
              >租赁押金</template
            >
          </el-col>
        </el-row>

        <div v-for="(con, index) in i" :key="index">
          <div @click="instrumentF(con)">
            <el-row class="option-row">
              <el-col :span="12">
                <i
                  class="check_default"
                  :class="[con.isStatus ? 'check_active' : '']"
                ></i>
                <div>
                  {{ con.name }}
                </div>
              </el-col>
              <el-col :span="6">
                <del
                  style="color: #808080; font-size: 12px;"
                  v-if="con.kitType != 'owned'"
                  >￥{{ con.marketPrice | moneyFormat }}</del
                >
              </el-col>
              <el-col :span="6">
                <span style="color: #1A1A1A" v-if="con.kitType == 'LEASE'"
                  >￥{{
                    Number((con.depositFee - con.coupon).toFixed(2))
                      | moneyFormat
                  }}</span
                >
                <span style="color: #1A1A1A" v-if="con.kitType == 'FREE'"
                  >￥{{ 0 | moneyFormat }}</span
                >
                <span style="color: #1A1A1A" v-if="con.kitType == 'GROUP'"
                  >￥{{
                    Number((con.price - con.coupon).toFixed(2)) | moneyFormat
                  }}</span
                >
              </el-col>
            </el-row>

            <el-row style="padding-left: 26px; margin-bottom: 5px;">
              <el-col :span="24">
                <div style="display: flex;align-items: center;">
                    <div
                      v-if="con.goodsList"
                      style="font-size: 12px; color: #808080"
                    >
                      {{ con.goodsList[0].specification }}
                    </div>
                    <el-tag effect="plain" size="mini" style="margin-left: 10px; color: #ff4644;" @click.stop="onLookRule" v-if="con.groupRemissionCourseFee == 1 && con.kitType == 'GROUP'">课程减免</el-tag>
                  </div>
              </el-col>
            </el-row>
            <!-- <el-row
              style="padding: 8px 0 8px 24px; border-top: 1px solid #F0F0F0;"
              v-if="con.childGoodsNames && con.kitType == 'GROUP'"
            >
              <el-col :span="24" style="font-size: 14px; color: #1A1A1A"
                >赠送辅件</el-col
              >
              <el-col>
                <span style="font-size: 12px; color: #808080;">{{
                  con.childGoodsNames
                }}</span>
              </el-col>
            </el-row> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "instrumentModel",
  props: {
    courseViewType: [Number, String],
    instrumentResultList: Array,
    buyMaintenance: Boolean,
    trainSmallBg: String,
    toolsPackage: Array,
    organId: [Number, String, null]
  },
  methods: {
    // onLeBao() {
    //     this.$emit('onLeBao')
    // },
    instrumentF(item) {
      this.$emit("instrumentF", item, 'INSTRUMENT');
    },
    onQuestions(item) {
      this.$emit("onQuestions", item);
    }
  },
  computed: {
    toolsPackages() {
      return this.toolsPackage[0].isStatus;
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./signUpPayment.less");
.icon_courseFee {
	margin-left: 9px;
	display: inline-block;
	width: 17px;
	height: 15px;
	background: url('../../../assets/images/musicGroup/icon_courseFee.png');
	background-size: 100%;
}
</style>