mall-web-ssr/pages/mobile/product/_batchCode.vue

<template>
  <div class="mobile-content commodity-detail">
   <!-- <div class="logo-wrap">
      <div class="wrap-title"><span class="line"></span>图片信息</div>
      <img :src="commodity.img || '/images/store/common/default.png'" alt="" v-if="commodity.img">
      <div class="commodity-infom" v-else>暂无图片，请<span @click="showStoreInfo = true">联系卖家</span>了解具体详情</div>
    </div>-->
    <div class="product-info">
      <div class="wrap-title"><span class="line"></span>产品信息</div>
      <div class="focus-wrap inline-block" :class="{'active': isFocus}">
        <i class="iconfont icon-shoucang" @click="collectStore" style="font-size: 0.43rem;"></i>
        <div>店铺</div>
        <div>关注</div>
      </div>
      <div class="middle">
        <div class="list">
          <div class="fl">
            <div class="name">品牌：</div>
            <div class="text">{{commodity.brandNameEn}}</div>
          </div>
        </div>
        <div class="list">
          <div class="fl">
            <div class="name">物料名称：</div>
            <div class="text">{{commodity.kindNameCn || '-'}}</div>
          </div>
        </div>
        <div class="list">
          <div class="name">规格：</div>
          <div class="text">{{commodity.spec || '-'}}</div>
        </div>
        <div class="list">
          <div class="name">包装方式：</div>
          <div class="text">{{commodity.packaging || '无包装信息'}}</div>
        </div>
        <div class="list">
          <div class="name">最小包装数：</div>
          <div class="text">{{commodity.minPackQty}}</div>
        </div>

        <div class="list">
          <div class="com-info">
            <span class="name">库存</span>：<span v-text="commodity.reserve || 0"></span><em style="margin-left: 3px;">PCS</em>
            （<span v-text="commodity.minBuyQty || 1"></span>个起订）
            <span class="can-div-sell" v-if="commodity.breakUp">可拆卖</span>
          </div>
        </div>

        <div class="list">
          <div class="name">交期(天)：</div>
          <div class="text" v-if="commodity.b2cMaxDelivery && (commodity.b2cMaxDelivery != commodity.b2cMinDelivery)" v-text="commodity.b2cMinDelivery + '-'+ commodity.b2cMaxDelivery"></div>
          <div class="text" v-if="commodity.b2cMaxDelivery && (commodity.b2cMaxDelivery == commodity.b2cMinDelivery)" v-text="commodity.b2cMinDelivery"></div>
        </div>

        <!--<div class="list">-->
          <!--<div class="name">最小起订量：</div>-->
          <!--<div class="text" style="color: #f31919">{{commodity.minBuyQty}}</div>-->
        <!--</div>-->

        <!--<div class="list">-->
          <!--<div class="name">生产日期：</div>-->
          <!--<div class="text" :title="item.produceDate">{{commodity.produceDate || '-'}}</div>-->
        <!--</div>-->

        <div class="list">
          <div class="name left">价格梯度：<br/>(PCS)</div>
          <div class="table left">
            <ul>
              <li class="title">
                <div>分段数量/PCS</div>
                <div>分段单价</div>
              </li>
              <li v-for="price in commodity.prices">
                <div>{{price.start}}+</div>
                <div v-if="commodity.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
                <div v-else>${{price.uSDPrice}}</div>
              </li>
            </ul>
          </div>
        </div>

      </div>
    <!--  <div class="content-line link cl-price2">
        <ul class="clearfix">
          <nuxt-link :to="`/mobile/shop/${storeInfo.uuid}`" tag="li" class="text-ellipse inline-block price-level">
            <i class="iconfont icon-dianpu"></i>
            <p>查看店铺</p>
          </nuxt-link>
          <li class="text-ellipse inline-block price-level" @click="showStoreInfo = true">
            <i class="iconfont icon-kefu1"></i>
            <p>联系卖家</p>
          </li>
          <li class="text-ellipse inline-block price-level" @click="goAttach(component.attach)">
            <i class="iconfont icon-pdf" :class="{'active': component.attach && component.attach !== '' && component.attach !== '1'}" ></i>
            <p class="lastOne" :class="{'active': component.attach && component.attach !== '' && component.attach !== '1'}">数据手册</p>
          </li>
        </ul>
      </div>-->
    </div>
    <div class="params-wrap">
      <div class="wrap-title"><span class="line"></span>产品参数</div>
      <ul v-if="component.properties && component.properties.length">
        <li v-for="prop in component.properties" v-if="prop.property">
          <span class="inline-block text-ellipse"> {{prop.property.labelCn}}：</span>
          <span class="inline-block text-ellipse" v-text="prop.value || '—'"></span>
        </li>
      </ul>
      <div class="com-none-state" v-else>
        <p>卖家上传的产品暂无参数,请 <b @click="showStoreInfo = true">联系卖家</b> 了解具体详情</p>
      </div>
    </div>
    <div class="operate-bottom">
      <div class="inline-block ob-ope">
        <nuxt-link :to="`/mobile/shop/${storeInfo.uuid}`" class="item inline-block">
          <i class="iconfont icon-dianpu"></i>
          <p>查看店铺</p>
        </nuxt-link>
        <a class="item inline-block" @click="showStoreInfo = true">
          <i class="iconfont icon-duihua"></i>
          <p>联系卖家</p>
        </a>
        <a class="item inline-block" @click="goAttach(component.attach)" :class="{'active': component.attach && component.attach !== '' && component.attach !== '1'}">
          <i class="iconfont icon-pdf"></i>
          <p>数据手册</p>
        </a>
      </div>
      <div class="inline-block ob-buy">
        <button @click="buy(false)">加入购物车</button>
        <button @click="buy(true)">立即购买</button>
      </div>
    </div>
    <div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
      <div class="mobile-modal-box mobile-link-en">
        <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
        <div class="mobile-modal-content">
<!--
          <div v-if="checkInfo(storeInfo.enterprise.enAddress)">商家地址：{{storeInfo.enterprise.enAddress}}</div>
-->
          <!--<div class="content-line link-url">在线咨询</div>-->
          <div v-if="checkInfo(storeInfo.enterprise.enTel)" class="clearfix"><span class="pull-left">电话：</span><a :href="'tel:' + storeInfo.enterprise.enTel" target="_blank" class="content-line link-url pull-left">{{storeInfo.enterprise.enTel}}</a></div>
          <div v-if="checkInfo(storeInfo.enterprise.enPhone)" class="clearfix"><span class="pull-left">手机：</span><a :href="'tel:' + storeInfo.enterprise.enPhone" target="_blank" class="content-line link-url pull-left">{{storeInfo.enterprise.enPhone}}</a></div>
          <div v-if="checkInfo(storeInfo.enterprise.enWeixin)" class="clearfix"><span class="pull-left">微信：</span><span class="content-line pull-left">{{storeInfo.enterprise.enWeixin}}</span></div>
          <div v-if="checkInfo(storeInfo.enterprise.enQQ)" class="clearfix"><span class="pull-left">Q&nbsp;Q：</span><span class="content-line pull-left">{{storeInfo.enterprise.enQQ}}</span></div>
          <div v-if="!empty">暂无联系方式</div>
          <!--
          <div v-if="checkInfo(storeInfo.enterprise.enEmail)">邮件：<a :href="'mailto:' + storeInfo.enterprise.enEmail" target="_blank" class="content-line link-url">{{storeInfo.enterprise.enEmail}}</a></div>
-->
        </div>
      </div>
    </div>
    <remind-box :title="remindText" :timeoutCount="remindCount"></remind-box>
    <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox" :url="url"></login-box>
  </div>
</template>
<script>
  import {RemindBox, LoginBox} from '~components/mobile/common'
  export default {
    layout: 'mobile',
    fetch({ store, route }) {
      return Promise.all([
        store.dispatch('shop/findCommodityOnBatchInfo', route.params)
      ])
    },
    components: {
      RemindBox,
      LoginBox
    },
    data () {
      return {
        isMore: false,
        showStoreInfo: false,
        remindText: '',
        remindCount: 1,
        url: '',
        showLoginBox: false
      }
    },
    computed: {
      commodity () {
        // console.log(this.$store.state.shop.storeInfo.commodity.data)
        return this.$store.state.shop.storeInfo.commodity.data
      },
      isRMB () {
        return this.commodity.currencyName === 'RMB'
      },
      commodityPrices () {
        return this.commodity.prices
      },
      priceLevel1 () {
        return this.commodityPrices.length > 3 ? this.commodityPrices.slice(0, 3) : this.commodityPrices
      },
      priceLevel2 () {
        return this.commodityPrices.length > 3 ? this.commodityPrices.slice(3, this.commodityPrices.length) : []
      },
      isFocus () {
        // console.log(this.$store.state.shop.storeInfo)
        return this.$store.state.shop.storeInfo.focusList.data === 'true'
      },
      storeInfo () {
        return this.$store.state.shop.storeInfo.store.data
      },
      component () {
        return this.$store.state.shop.storeInfo.component.data
      },
      empty () {
        return this.checkInfo(this.storeInfo.enterprise.enTel) || this.checkInfo(this.storeInfo.enterprise.enPhone) || this.checkInfo(this.storeInfo.enterprise.enWeixin) || this.checkInfo(this.storeInfo.enterprise.enQQ)
      }
    },
    methods: {
      checkInfo: function (str) {
        return str && str.trim() !== ''
      },
      goAttach: function (url) {
        if (this.user.logged) {
          if (url && url !== '1') {
             // console.log(url)
            window.open(url)
//            window.location.href = url
          } else {
            if (!url) {
              this.setRemindText('该产品暂无数据手册')
            } else {
              this.setRemindText('数据手册地址错误')
            }
          }
        } else {
          this.url = this.$route.fullPath
          this.showLoginBox = true
        }
      },
      collectStore: function () {
        if (this.user.logged) {
          if (!this.isFocus) {
            this.$store.dispatch('shop/StoreFocus', {storeName: this.storeInfo.storeName, storeid: this.storeInfo.id})
              .then(response => {
                this.$store.dispatch('shop/StoreFocusList', {id: this.storeInfo.id})
                this.setRemindText('关注成功')
              })
          } else {
            this.$http.post('/trade/storeFocus/delete/storeId', [this.storeInfo.id])
              .then(response => {
                this.$store.dispatch('shop/StoreFocusList', {id: this.storeInfo.id})
                this.setRemindText('取消成功')
              })
          }
        } else {
          this.url = this.$route.fullPath
          this.showLoginBox = true
        }
      },
      setRemindText: function (str) {
        this.remindText = str
        this.remindCount++
      },
      buy: function (flag) {
        this.baseUtils.buyOrCar(flag, null, this, this.commodity, '/mobile/center/user/pay/')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .commodity-detail {
    background: #f1f3f6;
    padding-bottom: 1rem;
    margin-bottom: 1.2rem;
    .wrap-title {
      color: #333;
      font-size: 0.28rem;
      border-bottom: 1px solid #d3d3d3;
      height: 0.5rem;
      text-align: left;
      padding: 0 0 0.1rem 0.05rem;
      margin: 0.17rem 0.25rem 0.13rem 0.25rem;
      line-height: 0.5rem;
      .line{
        width: 0.05rem;
        background: #3f84f6;
        display: inline-block;
        vertical-align: top;
        margin-right: 0.08rem;
        height: 0.28rem;
        margin-top: 0.09rem;
      }
    }
    .product-info {
      position: relative;
      background: #fff;
      margin: 0.2rem;
      border: 1px solid #e3e5e8;
      padding-bottom: 0.2rem;
      .focus-wrap {
        text-indent: 0.28rem;
        position: absolute;
        background-image: url('/images/mobile/product/productdetail_label.png');
        width: 0.93rem;
        height: 1.27rem;
        background-size: 100% 100%;
        font-size: 0.24rem;
        color: #666;
        right: 0px;
        top: 0px;
        i {
          color: #cacaca;
        }
        &.active {
          i {color: rgb(255, 120, 0);}
        }
      }
      .middle {
        border-radius: 5px;
        padding: 0.24rem 0.24rem 0px;
        background: #fff;
        .pms {
          color: #f57710;
          border: 1px solid #f57710;
          border-radius: 0.4rem;
          background: #fff;
          font-size: 0.24rem;
          height: 0.4rem;
          line-height: 0.4rem;
          width: 0.8rem;
          text-align: center;
        }
        .list {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .left {
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .textinfo {
            color: #0067e7;
            font-size: 0.28rem;
          }
          .button {
            font-size: 0.28rem;
            color: #1a58dd;
            width: 0.92rem;
            text-align: center;
            border-radius: 5px;
            border:1px solid #1a58dd;
            display: inline-block;
            margin-right: 0.2rem;
          }
          margin-bottom: 0.18rem;
          &::after{
            clear: both;
            display: block;
            content: ' ';
            visibility: hidden;
            zoom: 1;
          }
          .fl {
            width: 3.8rem;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .fr {
            text-align: left;
            width: 2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          &.list-long {
            .fl {
              width: 100% !important;
            }
          }
          .name {
            color: #666;
            font-size: 0.28rem;
            display: inline-block;
          }
          .text {
            display: inline-block;
            color: #333;
            font-size: 0.28rem;
            &.red {
              color: #e6353d;
            }
          }
          .table {
            width: 4.93rem;
            margin-bottom: 0;
            margin-top: 0;
            li {
              height: 0.43rem;
              line-height: 0.43rem;
              border-left: .01rem solid #c5c5c5;
              font-size: .28rem;
              &::after {
                clear: both;
                display: block;
                content: ' ';
                visibility: hidden;
                zoom: 1;
              }
              div {
                text-align: center;
                width: 50%;
                float: left;
                border-right: .01rem solid #c5c5c5;
                border-bottom: .01rem solid #c5c5c5;
              }
              &:nth-child(odd) {
                background: #ddd;
                color: #666;
                font-size: 0.28rem;
              }
              &:nth-child(even) {
                background: #fcfcfc;
                color: #666;
                font-size: 0.28rem;
              }
              &:nth-last-of-type(1){
                color: #f31919;
              }
              &.title {
                font-size: 0.28rem;
                color: #333;
              }
            }
          }
        }
      }
      .com-info {
        line-height: .5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size:0.28rem;
        .name {
          color: #666;
        }
        .can-div-sell {
          font-size: 0.18rem;
          margin-left: 0.1rem;
          display: inline-block;
          height: .3rem;
          line-height: .3rem;
          width: .7rem;
          text-align: center;
          background: #3f84f6;
          color: #fff;
          font-weight: bold;
          border-radius: 3px;
        }
      }
      .content-line {
        border-radius: 5px;
        ul {
          li {
            width: 2rem;
            height:0.54rem;
            line-height: 0.54rem;
            float: left;
            margin-right: 0.25rem;
            color: #fff;
            border-radius: 0.08rem;
            font-size: 0;
            i {
              display: inline-block;
              margin-right: 0.04rem;
              margin-left: 0.24rem;
              &.icon-pdf {
                color: #929292;
              }
              &.active {
                color: #eb062b;
              }
            }
            &:nth-last-of-type(1) {
              margin-right: 0;
              background: #fff;
              color: #3f84f6;
              border: 1px solid #3f84f6;
            }
            &:nth-child(1) {
              background: #3f84f6;
              border: 1px solid #3f84f6;
              margin-left: 0.2rem;
            }
            &:nth-child(2) {
              background: #ff6000;
              border: 1px solid #ff6000;
            }
            p {
              font-size: 0.28rem;
              display: inline-block;
              text-align: center;
              vertical-align: top;
              &.lastOne {
                color: #929292;
              }
              &.active {
                color: #3f84f6;
              }
            }
          }
        }
      }
    }
    .logo-wrap {
      max-height: 5.18rem;
      background: #fff;
      text-align: center;
      margin: 0.2rem;
      border: 1px solid #e3e5e8;
      img {
       /* border: .01rem solid #ccc;*/
        max-width: 4.06rem;
        max-height: 3.27rem;
        margin-top: 0.4rem;
        margin-bottom: 0.4rem;
      }
      div.commodity-infom {
        font-size: 0.28rem;
        color: #666;
        line-height: 1.09rem;
        span {
          color: #3f84f6;
        }
      }
    }
    .params-wrap {
      border: 1px solid #e3e5e8;
      border-radius: 5px;
      margin: 0.2rem;
      background: #fff;
      padding: 0 0 .29rem;
      p {
        font-size: .26rem;
        text-align: center;
        margin-bottom: .24rem;
      }
      ul {
        background: #fff;
        font-size: .28rem;
        padding: 0 0.24rem;
        li {
          /*border-bottom: .01rem solid #d9d9d9;*/
          span {
            /*border-right: .01rem solid #d9d9d9;*/
            height: .67rem;
            line-height: .67rem;
            text-align: center;
            /*padding: 0 .15rem;*/
            &:first-child {
              /*width: 50%;*/
              color: #666;
            }
            &:last-child {
              color: #333;
              /*width: 50%;*/
              /*text-align: left;*/
            }
          }
        }
      }
    }
    .mobile-modal-content {
      .clearfix {
        padding-left: 1rem;
      }
    }
    .operate-bottom {
      height: 1rem;
      position: fixed;
      background: #fff;
      bottom: .98rem;
      width: 100%;
      border-top: 1px solid #ccc;
      > div {
        height: 100%;
      }
      .ob-ope {
        /*width: 3.72rem;*/
        width: 49.5%;
        .item {
          width: 33.3%;
          text-align: center;
          p {
            font-size: .24rem;
            color: #666;
          }
          i {
            color: #2e2d2c;
            font-size: .4rem;
            margin: .1rem 0 .04rem;
            display: inline-block;
          }
          &.active {
            .icon-pdf {
              color: #eb062b;
            }
          }
        }
      }
      .ob-buy {
        width: 50.5%;
        button {
          width: 50%;
          height: 100%;
          background: #fff;
          border: none;
          color: #3f84f6;
          &:first-child {
            border: 1px solid #3f84f6;
          }
          &:last-child {
            background: #3f84f6;
            color: #fff;
          }
        }
      }
    }
  }
  .com-none-state {
    padding: .2rem 0;
    background: transparent;
    b {
      color: #3c7cf5;
      font-weight: normal;
    }
  }
</style>