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

<template>
  <div class="mobile-content commodity-detail">
    <div class="logo-wrap">
      <img :src="commodity.img || '/images/store/common/default.png'" alt="">
    </div>
    <div class="content-wrap">
      <div class="content-line cl-title">
        <span class="code text-ellipse inline-block">{{commodity.code}}</span>
        <div class="focus-wrap inline-block" :class="{'active': isFocus}">
          <i class="iconfont icon-shoucang"></i>
          <span>店铺关注</span>
        </div>
      </div>
      <div class="content-line cl-price1">
        <div class="fl">
          <p class="price-tag">价格:</p>
          <span>数量:</span>
        </div>
        <ul>
          <li class="text-ellipse inline-block price-level" v-for="price in priceLevel1">
            <p><span>{{isRMB ? '¥' : '$'}}</span>
              {{isRMB ? price.rMBPrice : price.uSDPrice}}
            </p>
            <span>{{price.start}}+</span>
          </li>
        </ul>
        <i :class="`iconfont icon-arrow-${isMore ? 'up' : 'down'}`" @click="isMore = !isMore" v-if="priceLevel2.length"></i>
      </div>
      <div class="content-line cl-price2" v-if="priceLevel2.length && isMore">
        <ul>
          <li class="text-ellipse inline-block price-level" v-for="price in priceLevel2">
            <p><span>$</span>159.00</p>
            <span>1+</span>
          </li>
        </ul>
      </div>
      <div class="content-line link cl-price2">
        <ul>
          <nuxt-link :to="`/mobile/shop/${storeInfo.uuid}`" tag="li" class="text-ellipse inline-block price-level">
            <i class="iconfont icon-shouye-copy"></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" :class="{'active': component.attach && component.attach != '1'}" @click="goAttach(component.attach)">
            <i class="iconfont icon-pdf"></i>
            <p>数据手册</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="params-wrap">
      <p>产品参数</p>
      <ul v-if="component.properties && component.properties.length">
        <li v-for="prop in component.properties" v-if="prop.property">
          <span class="inline-block" v-text="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="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
      <div class="mobile-modal-box">
        <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)">致电：<a :href="'tel:' + storeInfo.enterprise.enTel" target="_blank" class="content-line link-url">{{storeInfo.enterprise.enTel}}</a></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 () {
        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
      }
    },
    methods: {
      checkInfo: function (str) {
        return str && str.trim() !== ''
      },
      goAttach: function (url) {
        if (this.user.logged) {
          if (url && url !== '1') {
            window.open(url)
//            window.location.href = url
          } else {
            if (!url) {
              this.onRemind('该产品暂无数据手册')
            } else {
              this.onRemind('数据手册地址错误')
            }
          }
        } else {
          this.url = this.$route.fullPath
          this.showLoginBox = true
        }
      },
      onRemind: function (str) {
        this.remindText = str
        this.remindCount++
      }
    }
  }
</script>
<style lang="scss" scoped>
  .commodity-detail {
    .logo-wrap {
      height: 5.18rem;
      line-height: 5.18rem;
      background: #fff;
      text-align: center;
      img {
        border: .01rem solid #ccc;
        max-width: 4.06rem;
        max-height: 3.27rem;
      }
    }
    .content-wrap {
      -webkit-box-shadow: 0 0 7px 0 rgba(143, 141, 141, 0.25);
      -moz-box-shadow: 0 0 7px 0 rgba(143, 141, 141, 0.25);
      box-shadow: 0 0 7px 0 rgba(143, 141, 141, 0.25);
      .content-line {
        height: 1.04rem;
        border-bottom: .01rem solid #d9d9d9;
        &.cl-title {
          padding: .14rem 0 .14rem .2rem;
          .code {
            font-size: .3rem;
            font-weight: bold;
            width: 6.22rem;
            padding-right: .3rem;
            border-right: .01rem solid #e1e1e1;
            line-height: .76rem;
          }
          .focus-wrap {
            width: .8rem;
            text-align: center;
            margin-left: .15rem;
            i {
              font-size: .4rem;
              display: block;
              color: #dddddd;
            }
            span {
              font-size: .2rem;
            }
            &.active {
              i {
                color: #ff7803;
              }
            }
          }
        }
        .price-level {
          text-align: center;
          font-size: .24rem;
          border-right: .01rem solid #b0b0b0;
          &:last-child {
            border-right: none;
          }
          p {
            font-size: .44rem;
            color: #f42d29;
            span {
              font-size: .22rem;
            }
          }
        }
        &.cl-price1 {
          padding: .1rem .18rem 0;
          .fl {
            font-size: .24rem;
            text-align: center;
            margin-top: .08rem;
            .price-tag {
              width: .69rem;
              height: .34rem;
              line-height: .34rem;
              text-align: center;
              background: #f42d29;
              border-radius: .1rem;
              color: #fff;
              margin: .02rem 0 .06rem;
            }
          }
          ul {
            display: inline-block;
            li {
              width: 1.96rem;
            }
          }
          i {
            font-size: .32rem;
          }
        }
        &.cl-price2 {
          padding-top: .1rem;
          ul {
            text-align: center;
            li {
              width: 2.83rem;
            }
          }
        }
        &.link {
          padding-top: .18rem;
          ul {
            li {
              width: 33%;
              &.active {
                i {
                  color: #d81e06;
                }
              }
            }
            i {
              font-size: .39rem;
              &.icon-kefu1 {
                font-size: .44rem;
                position: relative;
                top: -.05rem;
                & + p {
                  margin-top: -.07rem;
                }
              }
            }
            p {
              font-size: .2rem;
              color: #333;
            }
          }
        }
      }
    }
    .params-wrap {
      background: #f4f4f4;
      padding: .29rem .23rem;
      p {
        font-size: .26rem;
        text-align: center;
        margin-bottom: .24rem;
      }
      ul {
        border-left: .01rem solid #d9d9d9;
        border-top: .01rem solid #d9d9d9;
        background: #fff;
        font-size: .24rem;
        li {
          border-bottom: .01rem solid #d9d9d9;
          span {
            border-right: .01rem solid #d9d9d9;
            height: .67rem;
            line-height: .67rem;
            text-align: center;
            &:first-child {
              width: 25%;
            }
            &:last-child {
              width: 75%;
              text-align: left;
              padding: 0 .15rem;
            }
          }
        }
      }
    }
  }
  .com-none-state {
    padding: .2rem 0;
    background: transparent;
    b {
      color: #3c7cf5;
      font-weight: normal;
    }
  }
</style>