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="i[0]['kitType'] == 'LEASE' || isShowSalePrice ? 14 : 19"
          >
            <template v-if="i[0]['kitType'] == 'GROUP'">
              团购乐器
            </template>
            <template v-if="i[0]['kitType'] == 'LEASE'">
              乐器租赁
            </template>
            <template v-if="i[0]['kitType'] == 'FREE'">
              免费乐器
            </template>
            <template v-if="i[0]['kitType'] == 'owned'">
              自备乐器
            </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"
            style="text-align: right;"
            v-if="
              ['GROUP', 'FREE'].includes(i[0]['kitType']) && isShowSalePrice
            "
          >
            售价
          </el-col>
          <el-col
            :span="5"
            style="text-align: right;"
            v-if="i[0]['kitType'] == 'LEASE'"
            >租赁押金
          </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="con.kitType == 'LEASE' || isShowSalePrice ? 14 : 19"
              >
                <i
                  class="check_default"
                  :class="[con.isStatus ? 'check_active' : '']"
                ></i>
                <div>
                  {{ con.name }}
                </div>
              </el-col>
              <el-col :span="5">
                <del
                  style="color: #808080; font-size: 12px;"
                  v-if="con.kitType != 'owned'"
                  >￥{{ con.marketPrice | moneyFormat }}</del
                >
              </el-col>
              <el-col
                :span="5"
                v-if="
                  ['FREE', 'GROUP'].includes(con.kitType) && isShowSalePrice
                "
              >
                <span style="color: #1A1A1A" v-if="con.kitType == 'FREE'"
                  >￥{{ 0 | moneyFormat }}</span
                >
                <!-- 乐器现价 = 乐器现价 + 分部分润金额 -->
                <span style="color: #1A1A1A" v-if="con.kitType == 'GROUP'"
                  >￥{{
                  (courseViewType == 2 && organId == 55 && !toolsPackages ? Number(
                    (con.discountPrice - con.coupon + con.organShareProfit).toFixed(2)
                  ) : Number(
                    (con.price - con.coupon + con.organShareProfit).toFixed(2)
                  ))
                   | moneyFormat
                }}</span
                >
              </el-col>
              <el-col :span="5" v-if="con.kitType == 'LEASE'">
                <span style="color: #1A1A1A"
                  >￥{{
                    Number((con.depositFee - 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;border-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],
    isShowSalePrice: Boolean
  },
  methods: {
    // onLeBao() {
    //     this.$emit('onLeBao')
    // },
    instrumentF(item) {
      this.$emit("instrumentF", item, "INSTRUMENT");
    },
    onQuestions(item) {
      this.$emit("onQuestions", item);
    }
  },
  computed: {
    toolsPackages() {
      let status = false
      this.toolsPackage.forEach(item => {
        if(item.isStatus) {
          status = true
        }
      })
      return status
    },
  }
};
</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>