shop-pc/pages/goods/detail/_id.vue

<template>
  <div>
    <nav class="nav flex flex-middle flex-center">
      <p class="nav__crumbs">
        全部商品
        <i class="el-icon-arrow-right"></i>
        开发书籍
        <i class="el-icon-arrow-right"></i>
        后端书籍
        <i class="el-icon-arrow-right"></i>
        Java从入门到项目实战
      </p>
    </nav>
    <main class="main flex" v-if="detailData.isEnable">
      <aside class="main__preview">
        <img
          class="main__preview-big"
          :src="detailData.pictureList[activeImg]"
          alt="商品大图"
        />
        <div class="main__preview-control">
          <img
            class="main__preview-control--left"
            src="~/assets/img/goods/left.png"
            alt="左侧切换"
            @click="onImgLeft"
          />
          <div
            class="main__preview-control--imgs"
            :style="
              activeImg > 4
                ? 'transform: translateX(-' + (activeImg - 4) * 78 + 'px);'
                : ''
            "
          >
            <img
              :class="index == activeImg ? 'img-active' : ''"
              :src="item"
              alt=""
              v-for="(item, index) in detailData.pictureList"
              :key="index"
              @click="onActiveImg(index)"
            />
          </div>
          <img
            class="main__preview-control--right"
            src="~/assets/img/goods/right.png"
            alt="右侧切换"
            @click="onImgRight"
          />
        </div>
      </aside>
      <article class="main__details">
        <p class="main__details-title">
          <span class="main__details-title--label">新品</span>
          {{ detailData.name }}
        </p>
        <div class="main__details-msg">
          <div class="main__details-msg--price flex flex-middle">
            <span class="msg-txt">售价</span>
            <UiMoney :money="detailData.startingPrice"></UiMoney>
            <div
              v-if="
                detailData.productActivityVO.isActivity &&
                !detailData.productActivityVO.isStartActivity
              "
              class="main__details-msg--skill flex flex-column flex-bottom"
            >
              <span class="skill-txt">即将开始秒杀</span>
              <div class="skill-2" v-if="isToday()">
                <span>08</span>
                <span>08</span>
                <span>08</span>
              </div>
              <span class="skill-1" v-else>{{ getBeginTime() }}</span>
            </div>
          </div>
          <div class="hr"></div>
          <div class="main__details-msg--service flex flex-middle">
            <span class="msg-txt">服务</span>
            <span class="msg-service"
              >假一赔四 · 全国包邮 · 不支持7天无理由退换</span
            >
            <img
              class="msg-icon"
              src="~/assets/img/goods/more.png"
              alt="服务"
            />
          </div>
        </div>
        <div class="main__details-option" v-if="skuData.stock">
          <div
            class="main__details-option--line flex flex-middle"
            v-for="(item, index) in detailData.attributeGroupList"
            :key="item.id"
          >
            <span class="line-txt">{{ item.name }}</span>
            <div class="line-btns">
              <UiButton
                type="yellow_line"
                v-for="val in item.attributes"
                :key="val.symbol"
                @click="handleAttrItem(val, index)"
                :class="{
                  'attr-item__active': val.active,
                  'attr-item__disabled': val.disabled,
                }"
                >{{ val.name }}</UiButton
              >
            </div>
          </div>
          <div class="main__details-option--line flex flex-middle">
            <span class="line-txt">数量</span>
            <div class="line-btns">
              <el-input-number v-model="curBuyNum" :min="1"></el-input-number>
            </div>
          </div>
        </div>
        <div class="main__details-none flex flex-middle" v-else>
          <img src="@/assets/img/goods/tips.png" alt="" />
          <span>此商品暂无库存啦~看看其他的吧</span>
        </div>
        <div class="main__details-pay">
          <UiButton type="yellow_line">加入购物车</UiButton>
          <UiButton type="yellow_panel" @click="buyNow">立即购买</UiButton>
        </div>
      </article>
    </main>

    <main v-else class="main">
      <img class="main-none-img" src="@/assets/img/goods/none.png" alt="" />
      <p class="main-none-txt">商品已下架啦，去逛逛别的吧~</p>
    </main>
    <section class="section flex" v-if="detailData.isEnable">
      <div class="section-recommend">
        <p class="section-title">看了又看</p>
        <UiGoodsItem
          v-for="item in recommendedData"
          :item="item"
          :key="item.id"
        ></UiGoodsItem>
      </div>
      <div class="section-details">
        <p class="section-title">商品详情</p>
        <div
          class="rich"
          v-html="detailData.detail"
          v-if="detailData.detail"
        ></div>
        <div class="section-details--none" v-else>
          <img src="@/assets/img/goods/none.png" alt="" />
          <p>暂无详情</p>
        </div>
      </div>
    </section>
    <BsChosen v-else></BsChosen>
  </div>
</template>
<script>
import UiMoney from "@/components/UiMoney.vue";
import UiButton from "@/components/UiButton.vue";
import UiGoodsItem from "@/components/UiGoodsItem.vue";
import BsChosen from "@/components/BsChosen.vue";
import {
  ApiGetGoodsDetail,
  ApiGetGoodsSkus,
  ApiGetRecommendedGoodsList,
} from "@/plugins/api/goods";
export default {
  componetns: { UiMoney, UiButton, UiGoodsItem, BsChosen },
  data() {
    return {
      curBuyNum: 1,
      activeImg: 0,
      recommendedData: [],
      skuData: {},
      detailData: {
        isEnable: false,
        pictureList: [],
        productActivityVO: {},
      },
      surplus: {},
    };
  },
  async created() {
    let vm = this;
    let id = this.$route.params.id;
    let res1 = await ApiGetGoodsDetail({ id });
    let res2 = await ApiGetGoodsSkus({ productId: id });
    let res3 = await ApiGetRecommendedGoodsList();
    vm.detailData = res1.result;
    vm.skuData = res2.result;
    vm.recommendedData = res3.result;
  },
  computed: {
    /**
     * 当前选中SKU，根据选中规格计算
     */
    curSku() {
      return (
        this.skuData.find(
          (i) => i.attributeSymbolList === this.selectedSymbol.join(",")
        ) || {}
      );
    },
    // [1,.,3]
    selectedSymbol() {
      return this.detailData.attributeGroupList
        .map((item) => {
          const activeAttr = item.attributes.find((i) => i.active);
          return activeAttr ? activeAttr.symbol : ".";
        })
        .filter((i) => i); //.sort();
    },
    /**
     * 最大可购买数量
     * 1、有限购则对比限购跟库存，取最小值
     * 2、没限购取库存
     */
    maxBuyNum() {
      const singleBuyLimit = this.detailData.singleBuyLimit;
      const stock = this.curSku.stock;
      return singleBuyLimit ? Math.min(singleBuyLimit, stock || 1) : stock;
    },
  },
  methods: {
    /* 获取倒计时 */
    getSurplus(startTime, endTime) {
      let nowtime = new Date(startTime), //获取当前时间
        endtime = new Date(endTime); //定义结束时间
      let leftObj = {};
      leftObj["lefttime"] = endtime.getTime() - nowtime.getTime(); //距离结束时间的毫秒数
      leftObj["leftd"] = Math.floor(
        leftObj["lefttime"] / (1000 * 60 * 60 * 24)
      ); //计算天数
      leftObj["lefth"] = Math.floor(
        (leftObj["lefttime"] / (1000 * 60 * 60)) % 24
      ); //计算小时数
      leftObj["leftm"] = Math.floor((leftObj["lefttime"] / (1000 * 60)) % 60); //计算分钟数
      leftObj["lefts"] = Math.floor((leftObj["lefttime"] / 1000) % 60); //计算秒数
      return leftObj;
    },
    setSurplus() {
      let vm = this;
      let startTime = new Date(
        vm.detailData.productActivityVO.currentTime
      ).getTime();
      let endTime = new Date(
        vm.detailData.productActivityVO.activityEndTime
      ).getTime();
      vm.surplus = getSurplus(startTime, endTime);
      if (vm.timer) {
        return false;
      }
      vm.timer = setInterval(() => {
        vm.startTime += 1000;
        vm.surplus = getSurplus(vm.startTime, vm.endTime);
        if (vm.surplus.lefttime <= 0) {
          clearInterval(vm.timer);
          location.reload();
        }
      }, 1000);
    },
    isToday() {
      let vm = this;
      let begin = new Date(
        vm.detailData.productActivityVO.activityStartTime
      ).getTime();
      let now = new Date(vm.detailData.productActivityVO.currentTime).getTime();
      if (new Date(begin).toDateString() === new Date(now).toDateString()) {
        return true;
      } else if (new Date(begin) < new Date()) {
        return false;
      }
    },
    getBeginTime() {
      let vm = this;
      let begin = new Date(
        vm.detailData.productActivityVO.activityStartTime
      ).getTime();
      let timestr = new Date(begin);
      let month = timestr.getMonth() + 1;
      let date = timestr.getDate();
      let hour = timestr.getHours();
      let minute = timestr.getMinutes();
      let datetime = `${month}月${date}日 ${hour}:${minute} 开始`;
      return datetime;
    },
    onActiveImg(i) {
      this.activeImg = i;
    },
    onImgLeft() {
      let vm = this;
      if (vm.activeImg > 0) {
        vm.activeImg--;
      }
    },
    onImgRight() {
      let vm = this;
      if (vm.activeImg < vm.detailData.pictureList.length - 1) {
        vm.activeImg++;
      }
    },
    /**
     * 设置默认选中规格
     */
    setDefaultAttr() {
      let vm = this;
      const curSku = vm.skuData.find((i) => i.stock > 0);
      if (!curSku) {
        return false;
      }
      vm.detailData.attributeGroupList.forEach((item, index) => {
        for (let i of item.attributes) {
          if (curSku.attributeSymbolList.includes(i.symbol)) {
            this.$set(i, "active", true);
            this.setDisabledItem(i, index, true);
            break;
          }
        }
      });
      this.$emit("input", this.curSku);
    },
    /**
     * 点击属性项，设置选中和禁用项
     */
    handleAttrItem(item, groupIndex) {
      let vm = this;
      // 禁用选项
      if (item.disabled) {
        return false;
      }
      // 每次重选规格，购买数量都置为1
      vm.curBuyNum = 1;
      const active = item.active;
      // 把当前选项组的装先置为未选状态
      vm.detailData.attributeGroupList[groupIndex].attributes.forEach(
        (item) => {
          this.$set(item, "active", false);
        }
      );
      // 设置当前点击选项选中
      this.$set(item, "active", !active);
      this.setDisabledItem(item, groupIndex);
    },
    /**
     * 每次点击选项属性时，计算不可选属性
     */
    setDisabledItem(item, groupIndex) {
      let vm = this;
      vm.detailData.attributeGroupList.forEach((group, idx) => {
        // 拿到已选项数组，这个是按照项组顺序排序好的缓存数组
        let symbolCache = Object.assign([], this.selectedSymbol);
        // 跳过当前属性组
        if (groupIndex === idx) return false;
        // 遍历其他选项组中的选项
        group.attributes.forEach((item) => {
          // 根据选项组下标，补位选项属性
          symbolCache[idx] = item.symbol;
          const reg = new RegExp(symbolCache.join(","));
          // 根据补位选项寻找是否有有效SKU，有则可选，没有则禁用
          const res = vm.skuData
            .filter((i) => reg.test(i.attributeSymbolList))
            .find((i) => i.stock > 0);
          if (res) {
            item.disabled = false;
          } else {
            item.disabled = true;
          }
        });
      });
    },
    buyNow() {
      if (!this.curSku.skuId) {
        this.$message.error("请选择规格~");
        return false;
      }

      let query = {
        mode: "buyNow",
        skuId: this.curSku.skuId,
        num: this.curBuyNum,
        activityType: 1,
      };
      console.log(query);
      this.$router.push({
        path: "/order/submit",
        query,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.nav {
  width: 100%;
  height: 40px;
  background: #f2f4f6;
  margin-bottom: 14px;
  &__crumbs {
    width: 1200px;
  }
}
.main {
  @include layout-box;
  &__preview {
    width: 456px;
    margin-right: 30px;
    &-big {
      width: 456px;
      height: 456px;
      margin-bottom: 24px;
    }
    &-control {
      width: 100%;
      height: 58px;
      position: relative;
      overflow: hidden;
      padding-left: 43px;
      &::before {
        content: "";
        width: 43px;
        height: 58px;
        background: #fff;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
      &::after {
        content: "";
        width: 43px;
        height: 58px;
        background: #fff;
        position: absolute;
        right: 0;
        top: 0;
      }
      &--left,
      &--right {
        width: 20px;
        height: 34px;
        position: absolute;
        top: 12px;
        z-index: 1;
        cursor: pointer;
      }
      &--left {
        left: 0;
      }
      &--right {
        right: 0;
      }
      &--imgs {
        width: 1500px;
        img {
          width: 58px;
          height: 58px;
          margin-right: 20px;
          cursor: pointer;
        }
        .img-active {
          border: 1px solid #ff512b;
        }
      }
    }
  }
  &__details {
    width: 714px;
    &-title {
      font-size: 16px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      padding-bottom: 20px;
      &--label {
        display: inline-block;
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #3083ff;
        padding: 4px 8px;
        margin-right: 6px;
        background: rgba(48, 131, 255, 0.1);
      }
    }

    &-msg {
      width: 714px;
      height: 127px;
      background: #f8f8f8;
      padding: 30px 20px 0;
      .msg-txt {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #9e9e9e;
        margin-right: 20px;
      }

      .msg-service {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #666666;
      }
      .msg-icon {
        margin-left: 6px;
        width: 12px;
        height: 12px;
      }
      &--price {
        padding-bottom: 30px;
      }

      &--skill {
        margin-left: auto;

        .skill-1 {
          font-size: 16px;
          font-family: PingFang SC-常规体, PingFang SC;
          font-weight: normal;
          color: #e83710;
        }

        .skill-2 {
          margin-top: 6px;
          span {
            display: inline-block;
            width: 22px;
            height: 22px;
            background: #e83710;
            border-radius: 2px;
            font-size: 14px;
            font-family: PingFang SC-常规体, PingFang SC;
            font-weight: normal;
            color: #ffffff;
            text-align: center;
            line-height: 22px;
          }
        }
      }
      .hr {
        width: 673px;
        height: 1px;
        background: #dddddd;
      }
      &--service {
        padding-top: 16px;
      }
    }

    &-option {
      padding-top: 24px;

      &--line {
        margin-bottom: 6px;
        .line-txt {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #9e9e9e;
          margin-left: 20px;
          margin-right: 33px;
        }
        .line-btns {
          width: 600px;
          /deep/.ui-button__yellow_line {
            background: #fff;
            margin-right: 14px;
            color: #666;
            margin-bottom: 6px;
            border-color: #ccc;
          }
          .attr-item__active {
            border: 1px solid #ff512b;
          }
          .attr-item__disabled {
            color: #999999;
            background: #eeeeee;
          }
        }
      }
    }

    &-none {
      width: 713px;
      height: 40px;
      background: #f3f3f3;
      margin-top: 20px;
      padding: 0 20px;

      img {
        width: 18px;
        height: 18px;
        margin-right: 12px;
      }

      span {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #666666;
      }
    }

    &-pay {
      margin-top: 40px;
      button {
        width: 144px;
        height: 46px;
        margin-right: 30px;
        font-size: 18px;
        &:nth-child(1) {
          background: #fff;
        }
        &:nth-child(2) {
          border: none;
        }
      }
    }
  }
  &-none-img {
    display: block;
    width: 228px;
    height: 144px;
    margin: 60px auto 20px;
  }
  &-none-txt {
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-family: PingFang SC-常规体, PingFang SC;
    font-weight: normal;
    color: #999999;
    margin-bottom: 50px;
  }
}
.section {
  width: 1200px;
  margin: 64px auto 0;
  &-recommend {
    width: 210px;
    margin-right: 30px;

    /deep/.goods-item {
      border: 1px solid #f2f2f2;
    }
  }
  &-details {
    width: 960px;

    &--none {
      img {
        display: block;
        width: 228px;
        height: 144px;
        margin: 133px auto 20px;
      }

      p {
        width: 100%;
        text-align: center;
        font-size: 14px;
        font-family: PingFang SC-常规体, PingFang SC;
        font-weight: normal;
        color: #999999;
      }
    }
  }
  &-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #f7f7f7;
    border: 1px solid #f2f2f2;
    padding-left: 16px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
}
</style>