saas_pc/src/components/goodsItem/index.vue

<template>
  <div>
    <div class="course-item" @click="goodsDetail(item)">
      <div class="course-item__img">
        <!-- <div
          class="note"
          :class="{ note__yellow: item.goodsType == 6 }"
          v-if="item.year"
        >
          {{ item.year }}
        </div> -->
        <img
          v-if="item.coverUrl"
          :src="$tools.splitImgHost(item.coverUrl)"
          alt=""
        />
      </div>
      <div class="course-item__title">
        <span v-if="item.goodsType == 6" class="note">直播</span>
        {{ item.goodsName }}
      </div>
      <div class="course-item__desc">
        <div
          class="price"
          v-if="!item.specTemplateId || (!item.maxPrice && !item.minPrice)"
        >
          <strong v-if="item.standPrice === 0">
            免费
          </strong>
          <span v-else>
            {{ item.standPrice | formatPrice }}
          </span>
        </div>
        <div v-else class="price">
          <span>{{ item.minPrice | formatPrice }}</span>
          <template v-if="item.minPrice != item.maxPrice">
            <i>-</i>
            <span>{{ item.maxPrice | formatPrice }}</span>
          </template>
        </div>
        <div v-if="item.linePrice" class="linePrice">
          ￥{{ item.linePrice | formatPrice }}
        </div>
      </div>
      <div class="course-item__btns">
        <a class="add" @click.stop="addCart(item)">加购物车</a>
        <a class="buynow" @click.stop="buyNow(item)">立即购买</a>
      </div>
    </div>

    <BuyCourseModal ref="selectClassModal"></BuyCourseModal>
    <index-sku-dialog
      :skuModal.sync="skuModal"
      :specTemplateId="item.specTemplateId"
      :isCarOrBuy="isCarOrBuy"
      @toShopCart="getAddCar($event)"
      @togoBuy="togoBuy($event)"
    ></index-sku-dialog>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import BuyCourseModal from "@/components/buyCourseModal/index";
import IndexSkuDialog from "./IndexSkuDialog.vue";
export default {
  name: "courseItem",
  components: {
    BuyCourseModal,
    IndexSkuDialog
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  props: ["item"],
  data() {
    return {
      selectClassModal: false,
      skuModal: false,
      isCarOrBuy: 1 // 1加入购物车 2立即购买
    };
  },
  mounted() {},
  methods: {
    ...mapMutations(["setCurrentRouter", "getCartCount"]),
    /**
     * 查看商品详情
     */
    goodsDetail(item) {
      console.log(item, "items");
      this.getGoodsDetail(item.goodsId).then(res => {
        if (res.goodsType === 1) {
          this.$router.push({
            path: "/course-detail/" + res.goodsId
          });
        }
        if (res.goodsType === 2) {
          this.$router.push({
            path: "/bank-detail/" + res.goodsId
          });
        }

        if (res.goodsType === 6) {
          this.$router.push({
            path: "/live-detail/" + res.goodsId
          });
        }
        if (res.goodsType === 8) {
          this.$router.push({
            path: "/handout-detail/" + res.goodsId
          });
        }
      });
    },

    buyNow(item) {
      if (!this.$tools.isLogin()) {
        this.setCurrentRouter(this.$route);
        this.$router.push({
          path: "/login"
        });
        return;
      }
      // 判断有没有规格选择
      if (this.item.specTemplateId) {
        this.isCarOrBuy = 2;
        this.getSpecDetail();
        // this.skuModal = true
        return;
      }
      this.toPayment(this.item.goodsId);
    },
    togoBuy(goodList) {
      console.log();
      if (goodList.length == 1) {
        return this.toPayment(goodList[0].goodsId);
      }
      this.goPayment(goodList);
    },
    toPayment(goodsId) {
      this.getGoodsDetail(goodsId).then(res => {
        console.log(res, "res");
        if ((res.goodsType === 1 && res.templateType) || res.sevenYear) {
          this.$refs.selectClassModal.showModal(res);
        } else {
          this.goPayment(res);
        }
        if (res.goodsType === 2 || res.goodsType === 6 || res.goodsType === 8) {
          this.goPayment(res);
        }
      });
    },
    goPayment(data) {
      if (!Array.isArray(data)) {
        data = [data];
      }
      let selectGoodsList = JSON.parse(JSON.stringify(data));
      localStorage.setItem("checkGoodsList", JSON.stringify(selectGoodsList));
      this.$router.push({
        path: "/payment"
      });
    },
    /**
     * 加入购物车
     */
    addCart(item) {
      // 判断有没有规格选择
      if (this.item.specTemplateId) {
        this.isCarOrBuy = 1;
        this.getSpecDetail();
        return;
      }
      this.getAddCar(this.item.goodsId);
    },
    getAddCar(goodsIds) {
      if (!Array.isArray(goodsIds)) {
        goodsIds = [goodsIds];
      }
      this.$request
        .addCart({ goodsIds })
        .then(res => {
          if (res) {
            this.getCartCount();
            this.$message({
              message: "加入购物车成功",
              type: "success"
            });
          }
        })
        .catch(err => {
          if (err.code == 500) {
            this.$message({
              message: err.msg,
              type: "warning"
            });
          }
        });
    },

    getGoodsDetail(goodsId) {
      return new Promise(resolve => {
        this.$request.commonGoodsDetail(goodsId).then(res => {
          resolve(res.data);
        });
      });
    },
    getSpecDetail() {
      this.$axios({
        url: `/app/common/spec/${this.item.specTemplateId}`,
        method: "get",
        noToken: true
      })
        .then(res => {
          if (res.data) {
            this.skuModal = true;
          } else {
            if (this.isCarOrBuy == 1) {
              this.getAddCar(this.item.goodsId);
            } else {
              this.toPayment(this.item.goodsId);
            }
          }
        })
        .catch(() => {});
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.course-item {
  cursor: pointer;
  margin: 94px 7px 0;
  width: 240px;
  height: 193px;
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(213, 218, 224, 0.8);
  border-radius: 10px;
  position: relative;
  background: #fff;
  padding-top: 70px;

  &__img {
    width: 224px;
    height: 125px;
    border-radius: 10px 8px 8px 8px;
    background: #ffffff;
    position: absolute;
    left: 8px;
    top: -62px;
    overflow: hidden;

    .note {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 2;
      width: 80px;
      height: 24px;
      background: #d94404;
      box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
      border-radius: 10px 0px 20px 0px;
      text-align: center;
      line-height: 24px;
      color: #fff;

      &__yellow {
        background: #ffb001;
      }
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  &__title {
    margin: 0 8px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 24px;
    height: 48px;
    overflow: hidden;

    .note {
      display: inline-block;
      width: 48px;
      height: 20px;
      background: #fff8e8;
      border: 1px solid #ffb001;
      border-radius: 10px;
      text-align: center;
      color: #ffb001;
      line-height: 18px;
      font-size: 12px;
    }
  }

  &__desc {
    height: 32px;
    margin-left: 8px;
    display: flex;
    align-items: center;

    .price {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ff2d55;
      line-height: 32px;

      span {
        font-size: 18px;
        &::before {
          content: "￥";
          font-size: 14px;
          font-weight: bold;
        }
      }
      i {
        // font-size: 18px;
        font-style: normal;
      }
    }

    .linePrice {
      color: #999999;
      font-size: 16px;
      text-decoration: line-through;
      margin-left: 10px;
    }
  }

  &__btns {
    margin: 0 8px;
    display: flex;
    justify-content: space-between;

    .add {
      display: block;
      width: 108px;
      height: 32px;
      line-height: 30px;
      border: 1px solid #bfbfbf;
      background: #fff;
      border-radius: 8px;
      font-size: 16px;
      color: #333333;
      text-align: center;
    }

    .buynow {
      display: block;
      width: 108px;
      height: 32px;
      line-height: 30px;
      background: #3f8dfd;
      border-radius: 8px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      transition: all 0.3s;

      &:hover {
        background: #2b6dd6;
      }
    }
  }
}
</style>