mall-web-ssr/components/provider/ToggleStore.vue

<template>
  <div class="toggleStore">
    <!--原厂-->
    <div class="factory list-item" :class="{active: storeType === 'factory'}" @click="toggleStore('factory')">
      <div class="header">
        <div class="kind"><span></span>原&nbsp;&nbsp;&nbsp;&nbsp;厂</div>
        <div class="count">
          <span>已入驻</span>
          <div class="count_num">
            <span v-for="item in formatNumber(originalCount, 4)" v-text="item">1</span>
          </div>
        </div>
      </div>
      <div class="body">
        <p>原厂直营，品质保障</p>
        <p>全球品牌，自由筛选</p>
        <p>原装现货，买得放心</p>
      </div>
    </div>
    <!--代理经销-->
    <div class="agent list-item" :class="{active: storeType === 'origin'}" @click="toggleStore('origin')">
      <div class="header">
        <div class="kind"><span></span>代理经销</div>
        <div class="count">
          <span>已入驻</span>
          <div class="count_num">
            <span v-for="item in formatNumber(storeCount, 4)" v-text="item">1</span>
          </div>
        </div>
      </div>
      <div class="body">
        <p>百强代理，资源共享</p>
        <p>物料询价，极速响应</p>
        <p>千万型号，一站找齐</p>
      </div>
    </div>
    <!--寄售-->
    <div class="sale list-item" @click="open('/store/33069557578d44e69bd91ad12d28a8d4')">
      <div class="header">
        <div class="kind"><span></span>优软寄售</div>
        <a class="enter" @click="open('/store/33069557578d44e69bd91ad12d28a8d4')">进入店铺 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="body">
        <p>海量库存、不赚差价</p>
        <p>在线下单、在线跟踪</p>
        <p>价格透明、节约成本</p>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'excellent-suppliers',
  computed: {
    storeType () {
      return this.$store.state.provider.stores.storeType.data
    },
    store () {
      return this.$store.state.provider.storeCms.recommendStore.data
    },
    storeCount () {
      return this.$store.state.provider.stores.storeCount.data
    },
    originalCount () {
      return this.$store.state.provider.stores.originalCount.data
    }
  },
  methods: {
    // 切换Store
    toggleStore (type) {
      this.$store.commit('provider/stores/SET_STORETYPE', type)
      this.$store.dispatch('loadBanners', {type: type + '_banner_carousel'})
      this.$store.dispatch('provider/findSimilarStoreList', { page: 1, count: 10, type: type === 'factory' ? 'ORIGINAL_FACTORY' : 'AGENCY-DISTRIBUTION' })
    },
    // 店铺入驻数量
    formatNumber (num, key) {
      let count = ('0000' + num).substr(-key)
      let _arr = []
      for (var i = 0; i < count.length; i++) {
        _arr.push(count[i])
      }
      return _arr
    },
    // 寄售
    open (url) {
      window.open(url)
    }
  }
}
</script>
<style lang="scss" scoped>
  .toggleStore {
    float: left;
		width: 220px;
    height: 402px;
		padding: 0;
    .list-item{
      width: 100%;
      height: 134px;
      background: #fff;
      border-bottom: 1px solid #ece9ec;
      .header {
        overflow: hidden;
        padding: 10px 8px 0;
        .kind{
          float: left;
          font-size: 16px;
          font-weight: bold;
          color: #2496f1;
            span{
              display: inline-block;
              margin-right: 4px;
              width: 6px;
              height: 12px;
              background: url('/images/original/angle-blue.png') no-repeat;
            }
        }
        .count{
          overflow: hidden;
          float: right;
          padding: 0 5px;
          width: 120px;
          height: 26px;
          line-height: 24px;
          background-color: #fff;
          border-radius: 2px;
          border: solid 1px #bfbfbf;
          span {
            float: left;
            margin-right: 4px;
            font-size: 12px;
            letter-spacing: 0;
            color: #666;
          }
          .count_num{
            float: left;
            margin-top: 3px;
            span{
              display: inline-block;
              width: 14px;
              height: 18px;
              line-height: 18px;
              font-size: 12px;
              color: #fff;
              text-align: center;
              background-color: #a1a0a0;
              border-radius: 2px;
              &:last-child{
                margin-right: 0;
               }
            }
          }
        }
        .enter{
          float: right;
          display: inline-block;
          width: 72px;
          height: 22px;
          line-height: 20px;
          text-align: center;
          font-size: 12px;
          color: #2496f1;
          background-color: #ffffff;
          border-radius: 11px;
          border: solid 1px #2496f1;
          i{
            font-size: 16px;
          }
          &:hover{
            color: #fff;
            background: #2496f1;
            border: solid 1px #2496f1;
           }
        }
      }
      .body {
        margin-top: 15px;
        padding: 0 20px 0;
        p{
          width: 195px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
          letter-spacing: 0;
          color: #666666;
        }
      }
      &:hover, &.active{
         background: #fa9819;
         cursor: pointer;
        .kind {
          color: #fff;
          span{
            background: url('/images/original/angle-white.png') no-repeat;
          }
        }
        .count{
          background-color: #d87c05;
          border: solid 1px #d87c05;
          span {
            color: #fff;
          }
          .count_num{
            span{
              color: #626364;
              background-color: #fff;
            }
          }
        }
        .body{
          p{
            color: #fff;
          }
        }
      }
    }
	}
</style>