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

<template>
  <div class="container marketing">
    <div class="toggle-store">
      <toggle-store/>
    </div>
    <!--供应商-->
    <div class="carousel" v-if="storeType === 'supplier'">
      <banner/>
    </div>
    <!--品牌-->
    <div class="carousel" v-else-if="storeType === 'brand'">
      <recommend-brand></recommend-brand>
    </div>
    <!--店铺-->
    <div class="carousel" v-else>
      <!--<carousel :banners="banners" v-for="item in init" v-if="item.show" :key="item.id" />-->
      <carousel :banners="banners"/>
    </div>
  </div>
</template>
<script>
import ToggleStore from './ToggleStore.vue'
import Carousel from './Carousel.vue'
import Banner from '~components/supplier/banner.vue'
import RecommendBrand from '~components/brandCenter/RecommendBrand.vue'

export default {
  name: 'recommend-store',
  data () {
    return {
      init: [{id: 0, show: true}]
    }
  },
  components: {
    ToggleStore,
    Carousel,
    Banner,
    RecommendBrand
  },
  computed: {
    storeType () {
        return this.$route.params.type
    },
    // providerType () {
    //   return this.$route.path === '/provider/home' ? 'agency' : 'original'
    // },
    banners () {
      if (this.$store.state.carousel.banners) {
        this.init[this.init.length - 1].show = false
        this.init.push({
          id: this.init.length,
          show: true
        })
        return this.$store.state.carousel.banners.data.data
      } else {
        return ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';

  .marketing {
    width: 1190px;
    height: 422px;
    padding-top: 20px!important ;
    overflow: hidden;
    .toggle-store {
      float: left;
      margin-right: 15px;
      width: 220px;
      height: 402px
    }

    .carousel {
      width: 955px;
      min-height: 400px;
      display: inline-block;
      float: left;
      border-radius: 5px;
    }

    /*.carousel_670 {*/
      /*width: 670px;*/
      /*min-height: 360px;*/
      /*display: inline-block;*/
      /*float: left;*/
      /*border: 1px solid #D6D3CE;*/
    /*}*/

    .new-store {
      width: 280px;
      min-height: 360px;
      float: left;
      display: inline-block;
    }
  }
</style>