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" src="~/static/images/goods/more.png" alt="商品大图" />
      </aside>
      <article class="main__details">
        <p class="main__details-title">
          <span class="main__details-title--label">新品</span>
          Java从入门到项目实战（全程视频版）
          编程入门it计算机书籍算法java编程思想java从入门到精通java核心技术javascript
        </p>
        <div class="main__details-msg">
          <div class="main__details-msg--price flex">
            <span class="msg-txt">售价</span>
            <UiMoney :money="123"></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">
            <span class="line-txt">规格</span>
            <div class="line-btns">
              <UiButton
                type="yellow_line"
                v-for="(item, index) in 11"
                :key="index"
                >123</UiButton
              >
            </div>
          </div>
        </div>
        <div class="main__details-pay">
          <UiButton type="yellow_line">加入购物车</UiButton>
          <UiButton type="yellow_panel">立即购买</UiButton>
        </div>
      </article>
    </main>
  </div>
</template>
<script>
import UiMoney from "@/components/UiMoney.vue";
import UiButton from "@/components/UiButton.vue";
import { ApiGetGoodsDetail, ApiGetGoodsSkus } from "@/plugins/api/goods";
export default {
  componetns: { UiMoney, UiButton },
  data() {
    return {};
  },
  async created() {
    let id = this.$route.params.id;
    let res1 = await ApiGetGoodsDetail({ id });
    let res2 = await ApiGetGoodsSkus({ productId: id });
    console.log(`res1`, res1.result);
    console.log(`res2`, res2.result);
  },
};
</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;
  }
  &__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;
        }
      }
    }
  }
}
</style>