saas_pc/src/components/goodsItem/IndexSkuDialog.vue

<template>
  <div class="check_sku">
    <el-dialog title="选择需要购买的课程" :visible.sync="skuModal" width="680px" class="appoint-modal"
      :close-on-click-modal="false" :close-on-press-escape="false" :before-close="cancel">
      <div v-loading="loading" class="contents">
        <div class="check_con">
          <div v-for="(item, index) in specList" :key="index" class="check_items">
            <div class="grades" v-if="specList.length > 1">{{ item.name }}</div>
            <div class="mains" v-if="index == 0 && specList.length > 1">
              <div class="grade_names">
                <div class="course_items" v-for="(child, c_index) in item.specAttrList" :key="c_index"
                  :class="{ nactive: selectGoodIndex == c_index }" @click="selectGoodType(c_index)">
                  {{ child.name }}
                </div>
              </div>
            </div>
            <div v-if="index == 1 || specList.length == 1" class="check_box">
              <el-checkbox-group v-model="checkedAttrs" @change="changeCheck">
                <el-checkbox v-for="spec in specAttrList" :label="spec.specAttributeId" :key="spec.specAttributeId">
                  <div class="box_centen">{{ spec.name }}<span>{{ spec.standPrice
                      === 0 ?
                      '免费' : `￥${spec.standPrice}`
                  }}</span></div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer f_c_b">
        <div class="price">
          <div>
            <span>总价：</span><span><i>￥</i>{{ allPrice | toFixed }}</span>
          </div>
          <p>已选择{{ checkedAttrs.length }}个商品</p>
        </div>
        <el-button :disabled="
        checkedAttrs.length == 0" @click="confirms()" style="width: 136px" type="primary">{{ isCarOrBuy == 1 ?
      "加入购物车" : "立即购买"
  }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "checkSku",
  props: {
    skuModal: {
      type: Boolean,
      default: false,
    },
    specTemplateId: {
      type: [String, Number],
      default: "",
    },
    isCarOrBuy: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      loading: false,
      specList: [], // 规格列表
      checkedAttrs: [],
      selectGoodIndex: 0,
      specAttrPriceList: []
    };
  },
  watch: {
    skuModal(newV, oldV) {
      if (newV) {
        this.checkedAttrs = []
        this.getSpecDetail();
      }
    },
  },
  computed: {
    selectId() {
      if (this.specList.length < 2) {
        return
      }
      return this.specList[0].specAttrList[this.selectGoodIndex].specAttributeId
    },
    specAttrList() {
      let arr = []
      let data = this.specList.slice(-1)
      data[0].specAttrList.forEach(ele => {
        let id = ele.specAttributeId
        if (this.specList.length > 1) {
          id = this.selectId + ',' + id
        }
        let item = this.specAttrPriceList.find(e => e.specAttrIds == id)
        if (item) {
          ele.goodsId = item.goodsId
          ele.standPrice = item.standPrice
          arr.push(ele)
        }
      });
      return arr
    },
    allPrice() {
      if (!this.checkedAttrs.length) {
        return 0
      }
      return this.specAttrList.reduce((a, b) => {
        if (this.checkedAttrs.includes(b.specAttributeId)) {
          return a + b.standPrice
        }
        return a
      }, 0)
    },
    isSingleChoice() {
      if (!this.specAttrPriceList.length) {
        return false
      }
      return this.specAttrPriceList[0].specialGoods
    }
  },
  methods: {
    changeCheck(val) {
      // 二建变单选
      if (this.isSingleChoice) {
        this.checkedAttrs = val.slice(-1)
      }
    },
    selectGoodType(index) {
      if (index == this.selectGoodIndex) {
        return
      }
      this.selectGoodIndex = index
    },
    cancel() {
      this.$emit("update:skuModal", false);
    },
    getSpecDetail() {
      this.loading = true;
      this.$axios({
        url: `/app/common/spec/${this.specTemplateId}`,
        method: "get",
        noToken: true,
      })
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            let data = res.data;
            if (data) {
              this.specAttrPriceList = data.specAttrPriceList
              this.specList = data && (data.specList || []);
            }
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    confirms() {
      let goodsIds = []
      let goodList = []
      this.specAttrList.forEach(e => {
        if (this.checkedAttrs.includes(e.specAttributeId) && !goodsIds.includes(e.goodsId)) {
          goodsIds.push(e.goodsId)
          goodList.push(this.specAttrPriceList.find(ele => ele.goodsId == e.goodsId))
        }
      })
      this.$request.checkGoodsStatus({ goodsIds }).then((res) => {
        if (this.isCarOrBuy == 1) {
          // 加入购物车
          this.$emit("toShopCart", goodsIds);
        } else {
          this.$emit("togoBuy", goodList);
        }
        this.cancel();
      }).catch((e) => {
        this.$message.warning(e.msg);
      })

    },
  },
};
</script>

<style lang="scss" scoped>
.appoint-modal {
  /deep/ {
    .el-dialog__header {
      padding: 20px 28px;
      border-bottom: 1px solid #d9d9d9;

      .el-dialog__title {
        color: #222222;
        font-size: 20px;
      }
    }

    .el-checkbox {
      width: 100%;
      background: #f8f8f8;
      margin-bottom: 16px;
      padding: 0 28px 0 16px;
      box-sizing: border-box;
      color: #222222;
      border-radius: 8px;
      display: flex;
      align-items: center;

      .el-checkbox__label {
        flex: 1;
      }

      &:nth-last-of-type(1) {
        margin-bottom: 0;
      }
    }

    .is-checked {
      background: #ebf2ff;
    }
  }

  .dialog-footer {
    padding: 0 8px;

    .price {
      p {
        font-size: 16px;
        color: #666666;
        text-align: left;
      }

      div {
        span {
          &:nth-of-type(1) {
            color: #222222;
            font-size: 16px;
          }

          &:nth-of-type(2) {
            i {
              font-size: 17px;
              font-style: normal;
            }

            font-weight: bold;
            color: #eb445a;
            font-size: 28px;
          }
        }
      }
    }
  }

  .f_c_b {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.contents {
  width: 100%;
  padding: 0 8px;

  .check_con {
    width: 100%;

    .check_items {
      margin-bottom: 32px;

      &:nth-last-of-type(1) {
        margin-bottom: 10px;
      }
    }

    .grades {
      font-size: 16px;
      color: #606266;
      margin-bottom: 16px;
      //   margin-top: 32px;
    }

    .mains {
      width: 100%;
      max-height: 200px;
      overflow-y: auto;
    }

    .check_box {
      max-height: 400px;
      overflow-y: auto;

      &::-webkit-scrollbar {
        display: none;
      }

      .box_centen {
        height: 44px;
        line-height: 42px;
        display: flex;
        justify-content: space-between;

        span {
          font-weight: bold;
          color: #eb445a;
          font-size: 16px;
          font-family: DIN Alternate-Bold, DIN Alternate;
        }
      }
    }

    .grade_names {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .course_items {
      padding: 10px 16px;
      border-radius: 8px;
      margin-right: 16px;
      background: #f8f8f8;
      font-size: 14px;
      font-weight: 500;
      color: #222222;
      text-align: center;
      cursor: pointer;

      &.nactive {
        background: #ebf2ff;
        color: #3f8dfd;
      }
    }
  }
}
</style>