mall-web-ssr/components/store/CommodityInfo.vue

<template>
  <div>
    <div class="menu-com row">
      <div class="menu-title col-md-12">
        <a href=".">商城首页</a> >
        <a href="provider/home" v-if="storeInfo.type == 'AGENCY' || storeInfo.type == 'DISTRIBUTION'" title="代理经销">代理经销</a>
        <a href="provider/factories" v-if="storeInfo.type == 'ORIGINAL_FACTORY'" title="原厂专区">原厂专区</a>
        <a :href="'/store/' + storeInfo.uuid" v-if="storeInfo.type == 'CONSIGNMENT'" title="库存寄售">库存寄售</a>
        >
        <span v-if="storeInfo.type != 'CONSIGNMENT'"><a :href="'/store/' + storeInfo.uuid" :title="storeInfo.storeName" v-text="storeInfo.storeName">storeInfo.storeName</a>> </span>
        <span>产品详情</span>
      </div>
    </div>
    <div id="commodity-info-fragment">
      <div class="commodity-detail">
        <div class="img">
          <img :src="commodity.img || '/images/store/common/default.png'" style="width: 256px;height: 256px;"/>
          <div class="box"></div>
        </div>
        <div class="content">
          <div class="code">
            <span v-text="commodity.code"></span>
          </div>
          <div class="commodity-info-detail">
            <div class="com-info">
              <span class="name">价&nbsp;格</span>：
              <span class="money">
                <span v-if="fragment.currency == 'RMB'">￥</span>
                <span v-if="fragment.currency == 'USD'">$</span>
                <span v-text="fragment.price"></span>
              </span>
            </div>
            <div class="com-info">
              <span class="name">品&nbsp;牌</span>：<span v-text="commodity.brandNameEn"></span>
            </div>
            <div class="com-info">
              <span class="name">类&nbsp;目</span>：<span v-text="commodity.kindNameCn"></span>
            </div>
            <div class="com-info">
              <span class="name">下&nbsp;载</span>：<a target="_blank" :href="component.attach">{{component.attach ? '规格书' : '暂无信息'}}</a>
            </div>
            <div class="com-info">
              <span class="name">包&nbsp;装</span>：<span v-text="commodity.packaging || '无包装信息'"></span>
            </div>
            <div class="com-info">
              <span class="name">封&nbsp;装</span>：<span v-text="commodity.encapsulation || '无封装信息'"></span>
            </div>
            <div class="com-info">
              <span class="name">库&nbsp;存</span>：<span v-text="commodity.reserve || 0"></span>
              （<span v-text="commodity.minBuyQty || 1"></span>个起订）
            </div>
            <div class="com-info">
              <span class="name">货&nbsp;期</span>：
              <div class="delivery">
                <span v-text="commodity.b2cMinDelivery || 0"></span>-
                <span v-text="commodity.b2cMaxDelivery || 0"></span>
                <span>(天)</span>
              </div>
            </div>
            <div class="com-info form-inline">
              <span class="name">数&nbsp;量</span>：
              <div class="input-group" style="width: 120px">
                <div class="input-group-addon operate" @click="subNum()" :disabled="!fragment.canAdd">-</div>
                <input type="text" class="form-control" placeholder="数量" v-model="fragment.num" @change="inputNum()"/>
                <div class="input-group-addon operate" @click="addNum()" :disabled="!fragment.canSub">+</div>
              </div>
              ×
              <div class="select">
                <select class="form-control"  :disabled="commodity.currencyName != 'RMB-USD'" v-model="fragment.currency" @change="changeCurrency()">
                  <option value="RMB">RMB</option>
                  <option value="USD">USD</option>
                </select>
              </div>
              ＝
              <span class="money">
                 <span v-if="fragment.currency == 'RMB'">￥</span>
                 <span v-if="fragment.currency == 'USD'">$</span>
                 <span v-text="calculate || 0"></span>
              </span>
            </div>
            <div class="button" ng-controller="GoodsPickUpCtrl">
              <button class="btn btn-default btn-primary" ng-click="addToCart(commodity, false, fragment.num, fragment.currency)">加入购物车</button>
              <button class="btn btn-default btn-now" ng-click="addToCart(commodity, true, fragment.num, fragment.currency)">立即购买</button>
            </div>
          </div>
          <div class="price-block">
            <div class="commodity-price">
              <div class="title">价格梯度</div>
              <div class="table">
                <div class="head">
                  <div class="fragment">数量</div>
                  <div class="price">单价￥(含税)</div>
                  <div class="price">单价$</div>
                </div>
                <ul class="list-unstyled list-inline">
                  <li v-for="price in commodity.prices">
                    <div class="fragment">
                      <span v-text="price.start"></span>+
                    </div>
                    <div class="price">
                      <span v-if="price.rMBPrice" v-text="price.rMBPrice ||0"></span>
                    </div>
                    <div class="price">
                      <span v-if="price.uSDPrice" v-text="price.uSDPrice || 0"></span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </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
  }
  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
    }
  }
}

export default {
  name: 'commodity-info',
  data () {
    return {
      fragment: { currency: 'RMB', num: 0, price: 0, canAdd: true }
    }
  },
  computed: {
    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
    },
    component () {
      return this.$store.state.shop.storeInfo.component.data
    },
    calculate () {
      this.fragment.total = this.fragment.price * this.fragment.num
      return this.fragment.total
    }
  },
  methods: {
    changeCurrency () {
      if (this.fragment.currency === 'RMB') {
        this.fragment.price = this.fragment.prices.rMBPrice
      } else if (this.fragment.currency === 'USD') {
        this.fragment.price = this.fragment.prices.uSDPrice
      }
    },
    subNum () {
      let newNum = this.fragment.num - this.commodity.minPackQty
      if (newNum >= this.commodity.minBuyQty) {
        this.fragment.num = newNum
      } else {
        this.fragment.canSub = false
      }
      this.fragment.canAdd = true
      getFragment(this.commodity, this.fragment)
    },
    addNum () {
      let newNum = this.fragment.num + this.commodity.minPackQty
      if (newNum <= this.commodity.reserve) {
        this.fragment.num = newNum
      } else {
        this.fragment.canAdd = false
      }
      this.fragment.canSub = true
      getFragment(this.commodity, this.fragment)
    },
    inputNum () {
      if (this.fragment.num < this.commodity.minBuyQty) {
        this.fragment.num = this.commodity.minBuyQty
      } else if (this.fragment.num > this.commodity.reserve) {
        this.fragment.num = this.commodity.reserve
      }
      getFragment(this.commodity, this.fragment)
    }
  }
}
</script>
<style scoped>
  .container.commodity {
		width: 1190px;
		padding-left: 0px;
		padding-right: 0px;
		font-family: "Microsoft Yahei", "微软雅黑";
	}
	.commodity .commodity-detail {
		width: 100%;
		display: inline-block;
		font-size: 0px;
	}

	.commodity-detail .img{
		float: left;
		width: 258px;
		height: 320px;
	}

	.commodity-detail .img img {
		border: 1px solid #D6D3CE;
	}

	.commodity-detail .img  .box {
		height: 62px;
	}

	.commodity-detail .content {
		width: 932px;
		float: left;
		font-size: 14px;
	}

	.commodity-detail .content {
		padding-left: 20px;
	}

	.commodity-detail .content .code {
		font-size: 24px;
		color: rgb(50, 50, 50);
		font-weight: 600;
		border-bottom: 1px solid #D6D3CE;
		line-height: 40px;
	}

	.commodity-detail .content .com-info {
		font-size: 14px;
		font-family: "Microsoft Yahei", "微软雅黑";
		line-height: 26px;
	}

	.input-group .input-group-operate {
		padding: 6px 12px;
		font-size: 14px;
		font-weight: 400;
		line-height: 1;
		color: #555;
		text-align: center;
		background-color: #eee;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.input-group .input-group-operate:last-child {
		border-bottom-left-radius: 0px;
		border-top-left-radius: 0px;
	}

	.input-group .input-group-operate:first-child {
		border-bottom-right-radius: 0px;
		border-top-right-radius: 0px;
	}

	.content .com-info .name {
		letter-spacing: 15px;
	}

	.commodity-info-detail {
		float: left;
		padding-top: 10px;
		width: 582px;
	}

	.price-block {
		float: right;
		width: 330px;
		margin-top: 10px;
		height: 220px;
	}

	.commodity-price {
		line-height: 30px;
		text-align: center;
		border: 1px solid #D6D3CE;
	}

	.commodity-price .title {
		background-color: #f7f7f7;
		border-bottom: 1px solid #D6D3CE;
	}

	.commodity-price .head {
		border-bottom: 1px solid #D6D3CE;
	}

	.commodity-price .fragment {
		display: inline-block;
		width: 70px;
	}

	.commodity-price .price {
		width: 123px;
		display: inline-block;
	}

	.com-info div.select {
		display: inline-block;
	}

	.com-info .operate {
		cursor: pointer;
	}

	.com-info .operate:hover, .com-info .operate:link {
		background-color: #00B83F;
		color: white;
	}

	.com-info .money {
		font-weight: 600;
		color: red;
	}

	.com-info select {
		border-radius: 4px;
		width: 120px!important;
	}

	ul.list-inline {
		margin: 0px;
	}

	.commodity-price ul.list-inline li {
		padding-left: 0px;
		padding-right: 0px;
		border-bottom: 1px dashed #D6D3CE;
	}

	.commodity-price .table {
		margin-bottom: 0px;
	}

	.commodity-price ul>li:last-child {
		border-bottom: none;
	}

	div.button {
		padding-top: 20px;
		float: left;
	}

	button.btn-now {
		border: 1px solid #3D76C6;
		color: #3D76C6;
		margin-left: 30px;
	}

	.com-info .delivery {
		display: inline;
	}
	#commodity-info-fragment{
		margin-bottom: 20px;
	}
</style>