mall-web-ssr/components/pcb/product/Detail.vue

<template>
  <div class="detail">
    <div class="item">
      <div class="img inline-block">
        <img :src="commodity.img || '/images/store/common/default.png'" alt=""/>
      </div>
      <div class="info inline-block">
        <p class="name">{{commodity.code}}</p>
        <p class="remind"><span>官方自营，品质保障</span>厂家直销，品质保证</p>
        <!--<div class="price-area">-->
          <!--<span class="left inline-block">价格<span><i>￥</i>1899.00</span></span>-->
          <!--<span class="right inline-block"><span>6500</span><br/>浏览数</span>-->
        <!--</div>-->
        <div class="price-level">
          <span class="left inline-block">
              <div>单价&nbsp;¥&nbsp;(含税)：</div>
              起订量：
          </span>
          <ul class="inline-block">
            <li :class="{active: getPriceLevel(fragment.num) == index}" v-for="(price, index) in commodity.prices">
              <span class="price"><em>{{commodity.currencyName == 'RMB' ? '¥' : '$'}}</em>{{price.rMBPrice}}</span>
              <div class="level" :title="price.start + '-' + price.end">{{price.start}}-{{price.end}}</div>
              <i class="arrow"></i>
            </li>
          </ul>
        </div>
        <div class="input-area">
          <!--<div class="operate-btn inline-block">-</div>
          <input type="text" class="form-control">
          <div class="operate-btn inline-block">+</div>-->
          <div class="operate-btn inline-block" @click="fragment.canSub ?subNum():''" :style="!fragment.canSub ?'cursor: not-allowed;':''">-</div>
          <input type="text" class="form-control" placeholder="数量" v-model="fragment.num" @change="inputNum()"style="padding: 0;min-width: 100px;text-align: center;"/>
          <div class="operate-btn inline-block" @click="fragment.canAdd ?addNum():''" :style="!fragment.canAdd ?'cursor: not-allowed;':''">+</div>
          <span class="reserve-info">
            库存：{{commodity.reserve}}&nbsp;{{commodity.unit}}&nbsp;&nbsp;({{commodity.minBuyQty + commodity.unit}}&nbsp;起订)
          </span>
        </div>
        <div class="operate-area">
          <a class="inline-block operate-buy" @click="buy(true)">立即购买</a>
          <a class="inline-block" @click="buy(false)">加入购物车</a>
        </div>
      </div>
      <div class="shop inline-block fr">
        <div class="search-area">
          <input type="search" class="form-control" placeholder="产品名称/品牌/类目">
          <span class="search-btn inline-block">搜索</span>
        </div>
        <p class="shop-info-title">
          商家信息
        </p>
        <div class="shop-info">
          <p class="shop-name">{{storeInfo.storeName}}</p>
          <img class="identify" src="/images/pcb/identified.png">
          <div class="info-line">
            <span class="inline-block">电话：</span>
            <span class="inline-block">{{storeInfo.enterprise.enTel}}</span>
          </div>
          <div class="info-line">
            <span class="inline-block">传真：</span>
            <span class="inline-block">{{storeInfo.enterprise.enFax}}</span>
          </div>
          <div class="info-line">
            <span class="inline-block">地址：</span>
            <span class="inline-block">{{storeInfo.enterprise.enAddress}}</span>
          </div>
          <div class="link">
            <span class="link-btn"><img src="/images/pcb/link.png" alt="">联系卖家</span>
          </div>
        </div>
      </div>
    </div>
    <ul class="kind">
      <li class="inline-block" v-for="prop in properties">
        {{prop[1].labelCn}}：{{prop[0].value || '-'}}
      </li>
    </ul>
  </div>
</template>
<script>
  function initFragment (commodity) {
    if (!commodity) {
      return {}
    }
    let fragment = {}
    let prices = commodity.prices[0]
    fragment.num = commodity.minBuyQty
    fragment.prices = prices

    if (commodity.currencyName !== 'USD') {
      fragment.currency = 'RMB'
    } else {
      fragment.currency = 'USD'
    }

    if (fragment.currency !== 'USD') {
      fragment.price = prices.rMBPrice
    } else {
      fragment.price = prices.uSDPrice
    }
    fragment.canAdd = true
    fragment.canSub = false
    return fragment
  }
  function getFragment (commodity, fragment) {
    // 判断是否小于第一分段的起订量
    if (commodity.prices[0].start > fragment.num) {
      fragment.num = commodity.prices[0].start
    }
    // 获取分段的信息
    let prices = commodity.prices
    for (let i = 0; i < prices.length; i++) {
      if (fragment.num <= prices[i].end) {
        fragment.prices = prices[i]
        break
      }
    }
  }
  import { buyOrCar } from '~utils/baseUtils'
  export default {
    data () {
      return {
        fragment: {
          currency: 'RMB',
          num: 0,
          price: 0,
          canAdd: true,
          canSub: true}
      }
    },
    computed: {
      properties () {
        return this.$store.state.pcb.product.detail.data
      },
      storeInfo () {
        return this.$store.state.shop.storeInfo.store.data
      },
      commodity () {
        let commodity = this.$store.state.shop.storeInfo.commodity.data
        this.fragment = initFragment(commodity)
        return commodity
      }
    },
    methods: {
      getPriceLevel: function (num) {
        let prices = this.commodity.prices
        if (this.commodity.prices) {
          for (let i = 0; i < prices.length; i++) {
            if (num >= prices[i].start && num <= prices[i].end) {
              return i
            }
          }
        }
        return -1
      },
      changeNum: function (newNum) {
        let pack = this.commodity.perQty || this.commodity.minPackQty
        let buy = this.commodity.minBuyQty
        let reserve = this.commodity.reserve
        if (newNum < buy) {
          this.$message.error('该商品最少购买' + buy + '件')
          this.fragment.num = buy
          this.fragment.canSub = false
          if (this.fragment.num > reserve) {
            this.$message.error('库存不足')
            this.fragment.num = reserve - (reserve % pack)
            this.fragment.canAdd = false
          } else {
            if (reserve - this.fragment.num - pack < 0) {
              this.fragment.canAdd = false
            } else {
              this.fragment.canAdd = true
            }
          }
        } else {
          if (newNum - buy - pack < 0) {
            this.fragment.canSub = false
          } else {
            this.fragment.canSub = true
          }
          //    console.log(newNum) 2222
          if (newNum % pack === 0) {
            this.fragment.num = newNum
          } else {
            this.fragment.num = (Math.floor(newNum / pack) + 1) * pack
          }
          if (this.fragment.num > reserve) {
            this.$message.error('库存不足')
            this.fragment.num = reserve - (reserve % pack)
            this.fragment.canAdd = false
          } else {
            if (reserve - this.fragment.num - pack < 0) {
              this.fragment.canAdd = false
            } else {
              this.fragment.canAdd = true
            }
          }
        }
      },
      subNum () {
        let pack = this.commodity.perQty || this.commodity.minPackQty
        let newNum = this.fragment.num - pack
        this.changeNum(newNum)
        getFragment(this.commodity, this.fragment)
      },
      addNum () {
        let pack = this.commodity.perQty || this.commodity.minPackQty
        let newNum = this.fragment.num + pack
        this.changeNum(newNum)
        getFragment(this.commodity, this.fragment)
      },
      inputNum () {
        if ((/^[\d]*$/).test(this.fragment.num)) {
          this.changeNum(this.fragment.num)
          getFragment(this.commodity, this.fragment)
        } else {
          this.$message.error('请输入数字')
          this.fragment.num = this.commodity.minBuyQty
        }
      },
      buy (flag) {
        buyOrCar(flag, null, this, this.commodity)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .detail {
    .inline-block {
      display: inline-block;
      vertical-align: middle;
    }
    .item {
      .img {
        width: 300px;
        height: 356px;
        line-height: 356px;
        text-align: center;
        box-shadow: 0 0 7px 0 rgba(199, 200, 200, .35);
        img {
          max-width: 300px;
          max-height: 356px;
        }
      }
      .info {
        margin-left: 17px;
        height: 356px;
        padding-top: 10px;
        .name {
          font-size: 24px;
          font-weight: bold;
          color: #666;
          margin-bottom: 17px;
        }
        .remind {
          margin: 17px 0;
          span {
            background: #e4393c;
            color: #fff;
            padding: 4px 8px;
            border-radius: 3px;
            margin-right: 10px;
          }
        }
        /*.price-area {
          width: 449px;
          height: 75px;
          background: url('/images/pcb/price-bg.png') no-repeat;
          .left {
            color: #666;
            margin-left: 13px;
            line-height: 40px;
            height: 40px;
            width: 339px;
            border-right: 1px solid #c8e5ff;
            margin-top: 18px;
            span {
              margin-left: 17px;
              font-size: 32px;
              color: #e4393c;
              i {
                font-size: 18px;
                font-style: normal;
              }
            }
          }
          .right {
            margin: 22px 0 0 30px;
            font-size: 12px;
            color: #666;
            span {
              font-size: 14px;
              color: #ffa133;
              margin-bottom: 8px;
            }
          }
        }*/
        .price-level {
          width: 570px;
          height: 87px;
          padding: 17px 0 0 7px;
          background: #fffaf1;
          .left {
            color: #999;
            div {
              margin-bottom: 19px;
            }
          }
          ul {
            margin-left: 15px;
            li {
              width: 83px;
              margin-right: 4px;
              float: left;
              text-align: center;
              .price {
                color: #ffb385;
                font-size: 22px;
                margin-bottom: 19px;
                em {
                  font-style: normal;
                  font-size: 13px;
                  margin-right: 4px;
                }
              }
              .level {
                width: 82px;
                height: 21px;
                line-height: 21px;
                font-size: 12px;
                color: #999;
                background: #e4e4e4;
                margin-top: 9px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              &.active {
                position: relative;
                .price {
                  color: #ff7800;
                }
                .level {
                  background: #ccc;
                  color: #333;
                }
                .arrow {
                  content: '';
                  position: absolute;
                  top: 28px;
                  left: 37px;
                  border: {
                    left: 4px solid transparent;
                    right: 4px solid transparent;
                    bottom: 8px solid #ccc;
                  }
                }
              }
            }
          }
        }
        .input-area {
          margin-top: 25px;
          .operate-btn {
            width: 33px;
            height: 45px;
            text-align: center;
            line-height: 45px;
            border: 1px solid #d9d9d9;
            background: #f4f4f4;
            cursor: pointer;
            font-size: 20px;
            user-select: none;
          }
          .form-control {
            border: 1px solid #d9d9d9;
            background: #fff;
            width: 77px;
            height: 45px;
            border-radius: 0;
            vertical-align: middle;
            text-align: center;
          }
          .reserve-info {
            color: #999;
            margin-left: 10px;
            vertical-align: bottom;
          }
        }
        .operate-area {
          margin-top: 12px;
          .inline-block {
            width: 126px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 18px;
            color: #fff;
            background: #418cf6;
            border: 1px solid #418cf6;
            &.operate-buy {
              color: #418cf6;
              background: #fff;
              margin-right: 8px;
            }
          }
        }
      }
      $base-color: #ffa133;
      .shop {
        height: 356px;
        width: 259px;
        text-align: center;
        .search-area {
          .form-control {
            width: 198px;
            height: 28px;
            font-size: 12px;
            padding: 0 14px;
            border: 1px solid $base-color;
            vertical-align: middle;
            border: {
              bottom-left-radius: 13px;
              top-left-radius: 13px;
              top-right-radius: 0;
              bottom-right-radius: 0;
            };
          }
          .search-btn {
            width: 60px;
            height: 28px;
            line-height: 28px;
            color: #fff;
            background: $base-color;
            border: 1px solid $base-color;
            border: {
              bottom-left-radius: 0;
              top-left-radius: 0;
              top-right-radius: 13px;
              bottom-right-radius: 13px;
            };
            cursor: pointer;
          }
        }
        .shop-info-title {
          position: relative;
          font-size: 16px;
          color: #ffa133;
          border: 1px solid #fee9d0;
          line-height: 35px;
          margin: 8px 0 0 0;
          &::before {
            content: '';
            background: #fff;
            width: 24px;
            height: 24px;
            position: absolute;
            left: -12px;
            top: -12px;
            border-right: 1px solid #fee9d0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
          }
          &::after {
            content: '';
            position: absolute;
            left: 1px;
            top: 1px;
            border: {
              top: 15px solid $base-color;
              right: 15px solid transparent;
            }
          }
        }
        .shop-info {
          border: 1px solid #fee9d0;
          .shop-name {
            margin: 19px 0 9px;
            color: #666;
          }
          .identify {
            margin-bottom: 20px;
          }
          .info-line {
            margin-bottom: 21px;
            padding: 0 16px;
            text-align: left;
            .inline-block {
              vertical-align: top;
              &:first-child {
                color: #666;
              }
              &:last-child {
                max-width: 182px;
              }
            }
          }
          .link {
            height: 70px;
            width: 232px;
            margin: 0 auto;
            border-top: 1px dashed $base-color;
            .link-btn {
              display: block;
              margin: 23px auto 0;
              width: 124px;
              height: 26px;
              background: $base-color;
              color: #fff;
              line-height: 26px;
              border-radius: 13px;
              img {
                margin-right: 7px;
              }
            }
          }
        }
      }
    }
    .kind {
      background: #f8fbfd;
      margin: 38px 0 80px;
      border: 1px solid #d6ebfd;
      li {
        width: 25%;
        color: #666;
        height: 40px;
        line-height: 40px;
        padding-left: 47px;
        border-bottom: 1px solid #d6ebfd;
        &:nth-last-child(-n + 4) {
          border-bottom: none;
        }
        a {
          color: #418cf6;
        }
      }
    }
  }
</style>