SteelfurnitureWeb/src/views/shops/details/product.vue

<template>
  <div class="productDetails container">
    <div class="payInfo">
      <div class="imgs fl">
        <img :src="imgs[currImgIndex]" alt="" />
        <img
          v-for="(s, index) in imgs"
          :key="`imgs${index}`"
          :src="s"
          @mouseover="currImgIndex = index"
        />
      </div>
      <div class="info fl">
        <div class="title">{{ product.name }}</div>
        <div class="desc">品牌认证</div>
        <div class="row">
          <div class="tit">价格 :</div>
          <div class="amount fl"><span>¥</span>{{ product.price }}</div>
        </div>
        <div class="row">
          <div class="tit">规格 :</div>
          <div class="items">
            <div
              v-for="({ size }, index) in product.goodsSizes"
              :key="`goodsSizes${index}`"
              :class="{ item: true, curr: form.goodsSizes === index }"
              @click="form.goodsSizes = index"
            >
              {{ size }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="tit">颜色 :</div>
          <div class="items">
            <div
              v-for="({ id, color }, index) in product.goodsColors"
              :key="`goodsColors${index}`"
              :class="{ item: true, curr: form.goodsColors === index }"
              @click="form.goodsColors = index"
            >
              {{ color }}
            </div>
          </div>
        </div>

        <div class="pay" @click="showPhone = true">
          联系商家
        </div>
        <transition name="slide-fade">
          <span v-if="showPhone" class="phone">138 388 8888</span>
        </transition>
      </div>
    </div>
    <div class="x-title">商品详情</div>
    <div class="details">
      <div class="items">
        <div class="item">商品名称：{{ product.name }}</div>
        <div class="item">商品材质：{{ product.material }}</div>
        <div class="item">商品单重：{{ product.weight }}</div>
        <div class="item">商品颜色：{{ colors }}</div>
        <div class="item">商品规格：{{ sizes }}{{ sizes }}</div>
        <div class="item">配送方式：{{ product.delivery }}</div>
        <div class="item">生产日期：{{ product.producedTime }}</div>
        <div class="item">生产地点：{{ product.producedAddress }}</div>
        <div class="item">供货仓库地址：{{ product.warehouseAddress }}</div>
        <div
          class="item"
          v-for="({ attributeName: k, value: v },
          index) in product.goodsAttributes"
          :key="`goodsAttributes${index}`"
        >
          {{ `${k}：${v}` }}
        </div>
      </div>
      <div v-html="product.des" />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component
export default class extends Vue {
  private currImgIndex = 0;
  private showPhone = false;
  private form = {
    goodsSizes: "",
    goodsColors: ""
  };
  @Prop(String)
  private pid!: string;
  private product: IAny = {};
  @Watch("pid", { immediate: true })
  async load(id: number) {
    const [err, data] = await this.$post("/goods/info/details", { id });
    if (err) return;
    this.product = data;
  }
  get imgs() {
    return (this.product.slideshow + "")
      .split(",")
      .map(x => this.$basePath + x);
  }
  get colors() {
    return (this.product.goodsColors || []).map((x: any) => x.color).join();
  }
  get sizes() {
    return (this.product.goodsSizes || []).map((x: any) => x.size).join();
  }
}
</script>
<style lang="scss" scoped>
.productDetails {
  margin-top: 20px;
  .payInfo {
    overflow: hidden;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgb(229, 229, 229);
    .imgs {
      width: 400px;
      img {
        width: 92px;
        height: 92px;
        margin-right: 10px;
        &:nth-child(1) {
          width: 400px;
          height: 400px;
          margin-bottom: 20px;
        }
      }
    }
    .info {
      overflow: hidden;
      padding: 20px 30px;
      .title {
        font-size: 16px;
        color: rgb(51, 51, 51);
        margin-bottom: 10px;
      }
      .desc {
        font-size: 12px;
        color: rgb(102, 102, 102);
        margin-bottom: 20px;
      }
      .amount {
        color: rgb(253, 85, 34);
        font-size: 20px;
        span {
          font-size: 12px;
        }
      }
      .row {
        margin-bottom: 10px;
        width: 100%;
        overflow: hidden;
        .tit {
          color: rgb(102, 102, 102);
          margin-right: 15px;
          float: left;
          margin-top: 10px;
        }
        .items {
          overflow: hidden;
          .item {
            float: left;
            border: 1px #e5e5e5 solid;
            border-radius: 4px;
            padding: 5px 15px;
            color: rgb(102, 102, 102);
            margin: 0 20px 10px 0;
            cursor: pointer;
            &.curr {
              border: 1px rgb(253, 85, 34) solid;
              color: rgb(253, 85, 34);
            }
          }
        }
      }
      .pay {
        width: 126px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 4px;
        color: #fff;
        background: rgb(253, 85, 34);
        cursor: pointer;
        display: inline-block;
      }
      .phone {
        margin-left: 20px;
        vertical-align: bottom;
        letter-spacing: 2px;
        color: rgb(253, 85, 34);
        display: inline-block;
      }
    }
  }
  .details {
    padding: 30px 20px;
    .items {
      overflow: hidden;
      .item {
        width: 33.33%;
        margin-bottom: 20px;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 30px;
        box-sizing: border-box;
      }
    }
  }
}

.slide-fade-enter-active {
  transition: all 0.5s ease;
}

.slide-fade-enter {
  transform: translateX(20px);
  opacity: 0;
}
</style>