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 v-if="Object.keys(skuItem).length" class="pop_prices">
          <div class="lefts">
            <img :src="$tools.splitImgHost(skuItem.coverUrl)" class="imgs" />
          </div>
          <div class="rights">
            <div class="goods_titles">{{ skuItem.goodsName }}</div>
            <div class="goods_price">￥{{ skuItem.standPrice }}</div>
          </div>
        </div> -->

        <div class="check_con">
          <div
            v-for="(item, index) in specList"
            :key="index"
            class="check_items"
          >
            <div class="grades">{{ item.name }}</div>
            <div class="mains" v-if="index == 0">
              <div class="grade_names">
                <div
                  class="course_items"
                  v-for="(child, c_index) in item.specAttrList"
                  :key="c_index"
                  :class="{ nactive: child.check }"
                  @click="selectSku(child, index)"
                >
                  {{ child.name }}
                </div>
              </div>
            </div>
            <div v-if="index == 1" class="check_box">
              <el-checkbox-group v-model="checkedCities">
                <el-checkbox v-for="city in cities" :label="city" :key="city">
                  <div class="box_centen">{{ city }}<span>￥1234.88</span></div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer f_c_b">
        <!-- <el-button
          type="primary"
          size="small"
          :disabled="
            Object.keys(skuItem).length == 0 || specList.length != isCheckSku
          "
          @click="confirms()"
          >确 定</el-button
        > -->
        <div class="price">
          <div>
            <span>总价：</span><span><i>￥</i>1788.88</span>
          </div>
          <p>已选择2个商品</p>
        </div>
        <el-button
          :disabled="
            Object.keys(skuItem).length == 0 || specList.length != isCheckSku
          "
          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,
      skuItem: {},
      specList: [], // 规格列表
      checkedCities: ["上海"],
      cities: ["上海", "北京", "广州", "深圳"],
    };
  },
  watch: {
    skuModal(newV, oldV) {
      if (newV) {
        this.getSpecDetail();
      }
    },
  },
  computed: {
    isCheckSku() {
      let checkCout = 0;
      this.specList.forEach((item, index) => {
        if (item.specAttrList && item.specAttrList.length) {
          item.specAttrList.forEach((child, c_index) => {
            if (child.check) {
              checkCout++;
            }
          });
        }
      });
      return checkCout;
    },
  },
  methods: {
    cancel() {
      this.skuItem = {};
      this.$emit("update:skuModal", false);
    },
    getSpecDetail() {
      // || 35
      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.specList = data && (data.specList || []);
              this.specList.forEach((item, index) => {
                item.specAttrList.forEach((child, i_index) => {
                  this.$set(
                    this.specList[index].specAttrList[i_index],
                    "check",
                    false
                  );
                });
              });
            }
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    selectSku(item, index) {
      this.specList[index].specAttrList.forEach((i_item, i_index) => {
        if (item.specAttributeId == i_item.specAttributeId) {
          this.$set(this.specList[index].specAttrList[i_index], "check", true);
        } else {
          this.$set(this.specList[index].specAttrList[i_index], "check", false);
        }
      });
      // console.log('this.specList', this.specList, this.isCheckSku)
      if (this.specList.length == this.isCheckSku) {
        let specAttrIds = [];
        this.specList.forEach((item) => {
          let result = item.specAttrList.find((e) => e.check);
          if (result) {
            specAttrIds.push(result.specAttributeId);
          }
        });
        this.getGoodsInfos(specAttrIds);
      }
    },
    // 获取规格属性值对应的商品信息
    getGoodsInfos(specAttrIds) {
      this.loading = true;
      this.$axios({
        url: "/app/common/attr/goods",
        method: "get",
        params: {
          specTemplateId: this.specTemplateId,
          specAttrIds: specAttrIds.join(","),
        },
        noToken: true,
      })
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.skuItem = res.data || {};
          } else {
            this.skuItem = {};
            this.$message.warning("商品已下架, 请重新选择");
          }
        })
        .catch((err) => {
          this.loading = false;
          this.skuItem = {};
          this.$message.warning("商品已下架, 请重新选择");
        });
    },
    confirms() {
      if (this.specList.length != this.isCheckSku) {
        this.$message.warning("请先选择所有的规格");
        return;
      }
      if (this.skuItem.goodsStatus == 0) {
        this.$message.warning("商品已下架, 请重新选择");
        return;
      }

      let sysTime = this.$tools.timest();
      if (
        sysTime <= this.skuItem.validityStartTime ||
        sysTime >= this.skuItem.validityEndTime
      ) {
        this.$message.warning("商品不在有效期, 请重新选择");
        return;
      }

      if (this.isCarOrBuy == 1) {
        // 加入购物车
        // console.log('this.skuItem.goodsId', this.skuItem.goodsId)
        this.$emit("toShopCart", this.skuItem.goodsId);
      } else {
        this.$emit("togoBuy", this.skuItem);
      }
      this.cancel();
    },
  },
};
</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>