mall-web-ssr/components/mobile/store/StoreDetail.vue

<template>
  <div class="store-detail mobile-content">
    <div class="store-logo">
      <div class="store-logo-box">
        <img :src="store.logoUrl || '/images/component/default.png'"/>
        <i v-if="showIcon" class="iconfont icon-shoucang" :style="isFocus === 'true'?'color:#ff7800':'color: #ddd'" @click="collectStore"></i>
      </div>
      <div class="store-switch-item">
        <span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='product'">产品</span>
        <span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">介绍</span>
      </div>
    </div>

    <div class="store-info" v-if="activeType=='detail'">
      <div class="store-description">
        <h4>主营产品</h4>
        <p class="content" v-if="store.description">
          {{store.description}}
        </p>
        <div class="com-none-state" v-else>
          <p>抱歉，暂无主营产品信息</p>
        </div>
      </div>
      <div class="store-description">
        <h4>应用领域</h4>
        <p class="content" v-if="store.storeApplication">
          {{store.storeApplication}}
        </p>
        <div class="com-none-state" v-else>
          <p>抱歉，暂无应用领域信息</p>
        </div>
      </div>
      <div class="store-description">
        <h4>企业介绍</h4>
        <p class="content" v-if="store.enterprise.description">
          {{store.enterprise.description}}
        </p>
        <div class="com-none-state" v-else>
          <p>抱歉，暂无企业介绍</p>
        </div>
      </div>
     <div class="contact-info">
      <h4>联系我们</h4>
      <ul class="list-unstyled clearfix">
        <li>
          <div>电&nbsp;&nbsp;话：</div>
          <div v-if="store.enterprise.enTel"><a :href="'tel:' + store.enterprise.enTel" @click="clickTel = true" :class="{'click-tel': clickTel}">{{store.enterprise.enTel}}</a></div>
          <div v-else><span>-</span></div>
        </li>
        <li>
          <div>传&nbsp;&nbsp;真：</div>
          <div v-if="store.enterprise.enFax"> {{store.enterprise.enFax}}</div>
          <div v-else><span>-</span></div>
        </li>
        <li>
          <div>手&nbsp;&nbsp;机：</div>
          <div v-if="store.enterprise.enPhone"> <a :href="'tel:' + store.enterprise.enPhone" @click="clickPhone = true" :class="{'click-phone': clickPhone}">{{store.enterprise.enPhone}}</a></div>
          <div v-else><span>-</span></div>
        </li>
        <li>
          <div>微&nbsp;&nbsp;信：</div>
          <div v-if="store.enterprise.enWeixin"> {{store.enterprise.enWeixin}}</div>
          <div v-else><span>-</span></div>
        </li>
        <li>
          <div>Q&nbsp;&nbsp;&nbsp;Q：</div>
          <div v-if="store.enterprise.enQQ"> {{store.enterprise.enQQ.trim()}}</div>
          <div v-else>-</div>
        </li>
       <!-- <li>
          <div>店铺地址：</div>
          <div v-if="store.enterprise.address">{{store.enterprise.address}}</div>
          <div v-else><span>-</span></div>
        </li>-->
      </ul>
     </div>
    </div>
  <!--  <div class="com-none-state" v-if="activeType=='detail'">
      <img src="/images/mobile/@2x/empty-collect.png">
      <p>抱歉，暂无店铺简介</p>
      <nuxt-link to="/">返回首页</nuxt-link>
    </div>-->
    <div class="product-store" v-else>
      <div class="search-content">
        <input type="text" v-model="keyword" placeholder="品牌/类目/型号/规格" @keyup.13="search">
        <span @click="search" style="height:0.5rem;line-height:0.5rem;">
        <i class="iconfont icon-sousuo"></i>
        </span>
      </div>
      <div v-if="searchLists&&searchLists.length > 0">
        <div v-for="(item, index) in searchLists">
          <div class="middle" @click="goProductDetail(item)">
            <div class="list">
              <div class="fl">
                <div class="name">品牌：</div>
                <div class="text">{{item.brandNameEn}}</div>
              </div>
            </div>
            <div class="list">
              <div class="fl" style="width: 100%">
                <div class="name">类目(产品名称)：</div>
                <div class="text" style="color: #3f84f6">{{item.kindNameCn || '-'}}</div>
              </div>

            </div>
            <div class="list">
              <div class="fl" style="width: 100%">
                <div class="name">型号：</div>
                <div class="text">{{item.code || '-'}}</div>
              </div>
            </div>
            <div class="list">
              <div class="fl" style="width: 100%">
                <div class="name">规格：</div>
                <div class="text">{{item.spec || '-'}}</div>
              </div>
            </div>

            <div class="list">
              <div class="fl" style="width: 100%">
                <div class="name">包装：</div>
                <div class="text">{{item.packaging || '无包装信息'}}</div>
                <div class="textinfo" v-if="item.breakUp">可拆卖</div>
              </div>
            </div>

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

            <div class="list">
              <div class="fl" style="width: 100%; ">
                <div class="name">交期(天)：</div>
                <div class="text" style="color: #ef5042" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery != item.b2cMinDelivery)" v-text="item.b2cMinDelivery + '-'+ item.b2cMaxDelivery"></div>
                <div class="text" style="color: #ef5042" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery == item.b2cMinDelivery)" v-text="item.b2cMinDelivery"></div>
                <div v-if="item.minBuyQty" style="display: inline-block;margin-left: 0.2rem"><span class="order-tag">订</span>{{item.minBuyQty}}起订</div>
                <div v-if="item.reserve" style="display: inline-block;margin-left: 0.2rem"><span class="order-tag reserve-tag">库</span>{{item.reserve}}</div>
              </div>
            </div>
            <div class="list">
              <div class="name left">价格梯度<p>(pcs):</p></div>
              <div class="table left">
                <ul>
                  <li class="title">
                    <div>分段数量/PCS</div>
                    <div>分段单价</div>
                  </li>
                  <li v-for="price in item.prices">
                    <div>{{price.start}}+</div>
                    <div v-if="item.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
                    <div v-else>${{price.rMBPrice}}</div>
                  </li>
                </ul>
              </div>
            </div>

          </div>
          </div>
      </div>

      <empty-status :type="isSearch ? 'search' : 'collect'"
                    :text="isSearch ? `抱歉，暂无与“${remindKeyword}”匹配的产品信息`: '抱歉，暂无产品信息'"
                    :showLink="false"
                    v-else
      ></empty-status>
    </div>
    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
    <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox" :url="url"></login-box>
    <pull-up :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="getMoreSearch"></pull-up>
  </div>
</template>
<script>
  import {RemindBox, LoginBox, PullUp, EmptyStatus} from '~components/mobile/common'
  export default {
    data () {
      return {
        activeType: 'product',
        collectResult: '收藏成功',
        timeoutCount: 0,
        clickTel: false,
        clickPhone: false,
        searchLists: [],
        page: 1,
        count: 10,
        showLoginBox: false,
        isScrollOverTab: false,
        url: '',
        keyword: '',
        remindKeyword: '',
        isChange: false,
        isSearch: false
      }
    },
    components: {
      RemindBox,
      LoginBox,
      PullUp,
      EmptyStatus
    },
    filters: {
      currency: function (num) {
        if (typeof num === 'number') {
          if (num <= 0.000001) {
            num = 0.000001
          } else {
            if (num.toString().indexOf('.') === -1) {
              num += '.00'
            } else {
              let inputStr = num.toString()
              let arr = inputStr.split('.')
              let floatNum = arr[1]
              if (floatNum) {
                if (floatNum.length > 6) {
                  num = inputStr.substring(0, arr[0].length + 7)
                  if (Number(floatNum.charAt(6)) > 4) {
                    num = (Number(num) * 1000000 + 1) / 1000000
                  }
                } else if (floatNum.length === 1) {
                  num = num + '0'
                }
              }
            }
          }
        }
        return num
      }
    },
    created () {
      this.clickTel = false
      this.clickPhone = false
    },
    computed: {
      store () {
        return this.$store.state.shop.storeInfo.store.data
      },
      commodities () {
        let list = this.$store.state.shop.storeInfo.storeCommodity.data
        if (this.isChange) {
          this.searchLists = []
          this.page = 1
          this.isChange = false
        } else {
          this.searchLists = [...this.searchLists, ...list.content]
          this.isSearchSearchingMore = false
        }
        return list
      },
      fetching () {
        return this.$store.state.shop.storeInfo.storeCommodity.fetching
      },
      allPage () {
        return this.commodities.totalPages
      },
      isFocus () {
        return this.$store.state.shop.storeInfo.focusList.data
      },
      user () {
        return this.$store.state.option.user
      },
      showIcon() {
        return this.store.uuid !== this.$store.state.option.storeStatus.data.uuid
      }
    },
    methods: {
      scroll: function () {
        let tbodyObj = document.getElementById('product-body')
        let theadObj = document.getElementById('product-head')
        if (theadObj) {
          this.isScrollOverTab = tbodyObj.getBoundingClientRect().top - theadObj.getBoundingClientRect().height - 5 <= theadObj.getBoundingClientRect().height
        }
      },
      getMoreSearch: function () {
        this.page++
        this.pageCommodity({ page: this.page, count: this.count })
      },
      async pageCommodity (pageParams) {
        let params = { storeid: this.$route.params.uuid, origin: 'store', code: this.keyword }
        params.page = pageParams.page
        params.count = pageParams.count
        try {
          let { data } = await this.$http.get('/api/commodity/commodities', { params })
          this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', data)
        } catch (err) {
          this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_FAILURE', err)
        }
      },
      goProductDetail: function (com) {
//        if (uuid) {
//          this.$router.push('/mobile/brand/componentDetail/' + uuid)
//        } else {
//          this.collectResult = '卖家上传的产品暂无参数，请联系卖家了解具体详情。'
//          this.timeoutCount ++
//        }
        if (com.batchCode) {
          this.$router.push('/mobile/product/' + com.batchCode)
        } else {
          this.collectResult = '产品参数错误'
          this.timeoutCount ++
        }
      },
      collectStore: function () {
        if (this.user.logged) {
          if (this.isFocus === 'false') {
            this.$store.dispatch('shop/StoreFocus', {storeName: this.store.storeName, storeid: this.store.id})
              .then(response => {
                this.$store.dispatch('shop/StoreFocusList', {id: this.store.id})
                this.collectResult = '关注成功'
                this.timeoutCount++
              })
          } else if (this.isFocus === 'true') {
            this.$http.post('/trade/storeFocus/delete/storeId', [this.store.id])
              .then(response => {
                this.$store.dispatch('shop/StoreFocusList', {id: this.store.id})
                this.collectResult = '取消成功'
                this.timeoutCount++
              })
          }
        } else {
          this.url = this.$route.fullPath
          this.showLoginBox = true
        }
      },
      search: function () {
        this.page = 1
        this.isChange = true
        this.isSearch = true
        this.remindKeyword = this.keyword
        this.pageCommodity({ page: this.page, count: this.count })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-header {
    border-bottom: 0px !important;
  }
  .store-detail {
    margin: 0 auto;
    margin-bottom: 1.2rem;
    text-align: center;
    background: #f7f7f7;
    height: 100%;
    .store-logo {
      height: 4.49rem;
      width: 100%;
      display: inline-block;
      line-height: 2.13rem;
      background: #fff;
      text-align: center;
      background: url('/images/mobile/@2x/brand-bg2.jpg') no-repeat;
      background-size: cover;
      position: relative;
      .store-logo-box {
        border: .01rem solid #c7e5fd;
        border-radius: .1rem;
        height: 2.21rem;
        width: 3.73rem;
        margin: .5rem auto 0;
        background: #fff;
        position: relative;
        img {
          max-height: 2.1rem;
          max-width: 3.6rem;
        }
        >i {
          position: absolute;
          font-size: .4rem;
          background: #fff;
          width: .6rem;
          height: .6rem;
          line-height: .6rem;
          border-radius: 100%;
          box-shadow: 0 0 .05rem #aaa;
          right: -1.44rem;
          top: .75rem;
          text-align: center;
        }
      }
    }
    .store-switch-item {
      text-align: center;
      background: #fff;
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 0.83rem;
      line-height: 0.83rem;
      border-bottom: 1px solid #ccc;
      .mobile-switch-btn {
        background: #fff;
        color: #666;
        display: inline-block;
        font-size: .34rem;
        width: 1.4rem;
        height: 0.79rem;
        line-height: 0.79rem;
        &:first-child {
          margin-right: 1.78rem;
        }
        &.active {
          color: #fc5708;
          border-bottom: .04rem solid #fc5708;
        }
      }
    }
    .store-info {
      background: #f7f7f7;
      width: 100%;
      h4{
        width: 100%;
        text-align: left;
        font-size: 0.3rem;
        line-height: 0.6rem;
        height: 0.6rem;
        letter-spacing: 0px;
        color: #333;
        font-weight: normal;
        border-bottom: 1px solid #efeded;
        padding-left: 0.11rem;
        &:before{
          content: '';
          display: inline-block;
          width: 0.08rem;
          height: 0.26rem;
          background-color: #145dee;
          margin-right: 0.13rem;
          position: relative;
          top: 0.02rem;
        }
      }
      .contact-info{
        background: #fff;
        width: 6.96rem;
        margin: .2rem auto;
        border-radius: .1rem;
        ul{
          padding: 0.22rem 0rem;
          li{
            div{
              float: left;
              font-size: .28rem;
              color: #666;
              line-height: .53rem;
              width:80%;
              text-align: left;
              &:first-child{
                width: 20%;
                padding-left: 0.36rem;
                text-align: justify;
              }
              a{
                color: #145dee;
              }
              .click-tel, .click-phone{
                color: #f44336;
              }
            }
           /* &:last-child{
              div{
                width: 74%;
                padding-right:.34rem;
                word-wrap: break-word;
                &:first-child{
                  text-align: left;
                  padding: 0rem 0rem 0rem .36rem;
                  width: 26%;
                }
              }
            }*/
          }
        }
      }
      .store-description{
        background: #fff;
        width: 6.96rem;
        margin: .2rem auto;
        border-radius: .1rem;
        .content {
          text-indent:2em;
          background: #fff;
          margin: .2rem auto 0;
          padding: .04rem .34rem .4rem .34rem;
          width: 100%;
          font-size: .28rem;
          color: #666;
          text-align: left;
          height: 95%;
          /*box-shadow: 0 .03rem .01rem 0 #cdcbcb96;*/
          line-height: .5rem;
          word-break: break-all;
        }
      }
    }
    .middle {
      .order-tag {
        display: inline-block;
        font-size: .18rem;
        color: #fff;
        font-weight: bold;
        background: #ee1717;
        height: .27rem;
        width: .27rem;
        line-height: .27rem;
        text-align: center;
        border-radius: .05rem;
        position: relative;
        top: -.05rem;
        margin-right: .05rem;
        &.reserve-tag {
          background: #07bb1c;
        }
      }
      text-align: left;
      padding: 0.24rem 0.24rem;
      background: #fff;
      margin: 0.24rem 0.24rem 0;
      border-radius: 5px;
      border: 1px solid #e3e5e8;
      .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 {
        .left {
          float: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .textinfo {
          font-size: 0.18rem;
          margin-left: 0.1rem;
          display: inline-block;
          background: #3f84f6;
          color: #fff;
          font-weight: bold;
          border-radius: 3px;
          width: 0.8rem;
          height: 0.32rem;
          line-height: 0.32rem;
          text-align: center
        }
        .button {
          font-size: 0.3rem;
          color: #1a58dd;
          width: 0.92rem;
          height: 0.43rem;
          line-height: 0.43rem;
          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: 4.4rem;
          float: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .fr {
          text-align: left;
          width: 2.6rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &.list-long {
          .fl {
            width: 100% !important;
          }
        }
        .name {
          color: #333;
          font-size: 0.28rem;
          display: inline-block;
        }
        .text {
          display: inline-block;
          color: #333;
          font-size: 0.28rem
        }
        .table {
          width: 5rem;
          margin-bottom: 0;
          margin-top: 0;
          margin-left: 0.1rem;
          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: #333;
              font-size: 0.28rem;
            }
            &:nth-child(even) {
              background: #fcfcfc;
              color: #333;
              font-size: 0.28rem;
            }
            &:nth-last-of-type(1){
              color: #f31919;
            }
            &.title {
              font-size: 0.28rem;
              color: #333;
            }
          }
        }
      }
    }
    .product-store {
      margin: .2rem 0 0 0;
      table {
        width: 100%;
        font-size: .28rem;
        thead {
          background: #d5e5fb;
          &.active {
            position: fixed;
            top: .88rem;
            z-index: 2;
          }
          tr {
            th {
              text-align: center;
              height: .98rem;
              line-height: normal;
              font-size: .26rem;
              font-weight: normal;
              color: #333;
            }
          }
        }
        tbody {
          tr {
            background: #fff;
            border-bottom: 0.2rem solid #f7f7f7;
            td {
              padding: .2rem .1rem;
              text-align: left;
              &.price-level-wrap {
                text-align: center;
              }
              div {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: .2rem;
                max-width: 1.58rem;
                &:last-child {
                  margin-bottom: 0;
                }
              }
              .price-level:last-child {
                color: #fc5708;
              }
              .price-number {
                display: inline-block;
                vertical-align: middle;
                margin-bottom: 0;
                width: .9rem;
              }
              .order-tag {
                display: inline-block;
                font-size: .18rem;
                color: #fff;
                font-weight: bold;
                background: #ee1717;
                height: .27rem;
                width: .27rem;
                line-height: .27rem;
                text-align: center;
                border-radius: .05rem;
                position: relative;
                top: -.05rem;
                margin-right: .05rem;
                &.reserve-tag {
                  background: #07bb1c;
                }
              }
            }
            &:active {
              background: #e1e1e1;
            }
          }
        }
      }
      .no-store {
        background: #fff;
        padding-top: 1rem;
        img {
          display: block;
          text-align: center;
          margin: 0 auto;
          margin-bottom: .45rem;
          width: 3.31rem;
          height: 2.13rem;
        }
        div {
          width: 5.27rem;
          margin: 0 auto;
          text-align: center;
          line-height: .4rem;
          color: #999;
          .link-url {
            color: #01a44e;
          }
        }
      }
    }
    .no-product {

      background: #fff;
      padding-top: 1rem;
      img {
        display: block;
        text-align: center;
        margin: 0 auto;
        margin-bottom: .45rem;
        width: 3.31rem;
        height: 2.13rem;
      }
      div {
        width: 5.27rem;
        margin: 0 auto;
        text-align: center;
        line-height: .4rem;
        font-size: .32rem;
        color: #999;
      }
    }
  }
  .com-none-state {
    background: #fff !important;
    padding: .3rem;
    margin: 0;
    p {
      margin: 0;
      font-size: .28rem;
    }
  }
  .search-content {
    padding: .07rem 0;
    input {
      width: 6.37rem;
      border: 1px solid #376ff3;
    }
  }
</style>