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

<template>
  <div class="courseModel" style="margin-top: 12px;">
    <h2 class="titles" v-if="accessOries.length > 0">
      <img :src="trainSmallBg" />
      <span>辅件</span>
    </h2>
    <div class="section" v-if="accessOries.length > 0" key="accessOries">
      <!-- <h2 class="titles">辅件</h2> -->
      <el-row class="title-row">
        <el-col :span="isShowSalePrice ? 14 : 19">辅件商品</el-col>
        <!--  -->
        <el-col :span="5" style="text-align: right">原价</el-col>
        <el-col :span="5" style="text-align: right" v-if="isShowSalePrice"
          >现价</el-col
        >
      </el-row>

      <div v-for="(instr, index) in accessOries" :key="index">
        <el-row class="option-row" @click.native="onAuxiliarie(instr)">
          <el-col :span="isShowSalePrice ? 14 : 19">
            <i
              class="check_default"
              :class="[instr.isStatus ? 'check_active' : '']"
            ></i
            >{{ instr.name }}
          </el-col>
          <el-col :span="5">
            <del style="color: #808080; font-size: 12px"
              >￥{{
                instr.goodsList[0]
                  ? instr.goodsList[0].marketPrice
                  : 0 | moneyFormat
              }}</del
            >
          </el-col>
          <el-col :span="5" v-if="isShowSalePrice">
            <span style="color: #1a1a1a" v-if="instr.price == 0">免费</span>
            <span style="color: #1a1a1a" v-else
              >￥{{ (isGiveAccessories ? 0 : instr.price) | moneyFormat }}</span
            >
          </el-col>
        </el-row>
        <el-row style="padding-left: 24px" v-if="instr.childGoodsList">
          <el-col
            v-for="(child, index) in instr.childGoodsList"
            :key="child.id"
          >
            <span style="font-size: 12px; color: #808080"
              >{{ child.name }}
              {{ instr.childGoodsList.length - 1 == index ? "" : "、" }}</span
            >
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "courseModel",
  props: {
    trainSmallBg: String,
    accessOries: Array,
    isGiveAccessories: Boolean, // 是否赠送辅件，如果为是，则不价格为0
    isShowSalePrice: Boolean
  },
  data() {
    return {};
  },
  methods: {
    onAuxiliarie(item) {
      this.$emit("onAuxiliarie", item);
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./signUpPayment.less");
</style>