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">
      <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="~/static/images/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="~/static/images/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">
            <span class="msg-txt">售价</span>
            <UiMoney :money="detailData.startingPrice"></UiMoney>
          </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="~/static/images/goods/more.png"
              alt="服务"
            />
          </div>
        </div>
        <div class="main__details-option">
          <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>
        <div class="main__details-pay">
          <UiButton type="yellow_line">加入购物车</UiButton>
          <UiButton type="yellow_panel" @click="buyNow">立即购买</UiButton>
        </div>
      </article>
    </main>

    <section class="section flex">
      <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"></div>
      </div>
    </section>
  </div>
</template>
<script>
import UiMoney from "@/components/UiMoney.vue";
import UiButton from "@/components/UiButton.vue";
import {
  ApiGetGoodsDetail,
  ApiGetGoodsSkus,
  ApiGetRecommendedGoodsList,
} from "@/plugins/api/goods";
import UiGoodsItem from "@/components/UiGoodsItem.vue";
export default {
  componetns: { UiMoney, UiButton, UiGoodsItem },
  data() {
    return {
      curBuyNum: 1,
      activeImg: 0,
      recommendedData: [],
      skuData: {},
      detailData: {
        pictureList: [],
      },
    };
  },
  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;
    console.log(`res1`, res1.result);
    console.log(`res2`, res2.result);
    console.log(`res3`, 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: {
    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 {
  width: 1200px;
  margin: 0 auto;
  &__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;
      }
      .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;
          }
        }
      }
    }

    &-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;
        }
      }
    }
  }
}
.section {
  width: 1200px;
  margin: 64px auto 0;
  &-recommend {
    width: 210px;
    margin-right: 30px;

    /deep/.goods-item {
      border: 1px solid #f2f2f2;
    }
  }
  &-details {
    width: 960px;
  }
  &-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;
  }
}
.attr-item__active {
  background: red !important;
}
.attr-item__disabled {
  background: cyan !important;
}
</style>