店铺/供应商/品牌合并

assets/scss/reset.scss

@@ -121,15 +121,6 @@ p {
   margin: 0 0 10px;
 }
 
-.article{
-  float:left;
-  width:220px;
-}
-.section{
-  margin-left:235px;
-  vertical-align: top;
-}
-
 // 发布求购 小图标
 .purchase_icon{
   display:inline-block;

components/brandCenter/RecommendBrand.vue

@@ -1,18 +1,9 @@
 <template>
   <div class="recommend-brand">
+    <div class="brand-toggle">
+      <toggle-store/>
+    </div>
     <div class="brand-content">
-      <div class="brand-index-tab">
-        <div class="index-head">
-          <img src="/images/brandCenter/search-index.png"/>品牌索引
-        </div>
-        <div style="padding-top: 8px;">
-          <div class="brand-index-group index-group" v-for="(indexGroup, index) in indexGroups">
-            <span v-if="index == 5"></span>
-            <a @click="goBrandIndex(group_index)" v-for="group_index in indexGroup" :class="{'active': activeIndex==group_index}">{{group_index}}</a>
-            <span v-if="index == 5"></span>
-          </div>
-        </div>
-      </div>
       <div v-swiper:mySwiper="swiperOption" class="swiper-container">
         <div class="swiper-wrapper">
           <div class="swiper-slide" v-for="banner in sliceBanners">
@@ -29,21 +20,10 @@
   </div>
 </template>
 <script>
+  import ToggleStore from '~components/provider/ToggleStore.vue'
   export default {
     data () {
       return {
-        indexGroups: [
-          ['A', 'B', 'C', 'D', 'E'],
-          ['F', 'G', 'H', 'I', 'J'],
-          ['K', 'L', 'M', 'N', 'O'],
-          ['P', 'Q', 'R', 'S', 'T'],
-          ['U', 'V', 'W', 'X', 'Y', 'Z'],
-          ['0~9']
-        ],
-        nowPage: 1,
-        keyword: '',
-        isSearch: false,
-        activeSlide: 0,
         swiperOption: {
           autoplay: 6000,
           pagination: '.swiper-pagination',
@@ -65,67 +45,15 @@
         }
       }
     },
-    filters: {
-      applicationFilter: function (str) {
-        return str.split(',').join('|')
-      },
-      introduceFilter: function (title) {
-        if (title === '') {
-          return title
-        }
-        let len = 0
-        let index = 0
-        for (let i = 0; i < title.length; i++) {
-          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
-            len = len + 2
-          } else {
-            len++
-          }
-          if (len > 60) {
-            index = i
-            break
-          }
-        }
-        if (index > 0) {
-          return title.substring(0, index) + '...'
-        } else {
-          return title
-        }
-      }
+    components: {
+      ToggleStore
     },
     computed: {
-      floors () {
-        return this.$store.state.floor.list.data
-      },
       banners () {
         return this.$store.state.carousel.brandCarousel.data
       },
       sliceBanners () {
         return this.banners.data && this.banners.data.length ? this.banners.data.slice(0, 3) : []
-      },
-      activeIndex () {
-        return !this.isSearch ? this.$route.params.initial : ''
-      }
-    },
-    methods: {
-      goBrandIndex: function (index) {
-        if (index === this.$route.params.initial) {
-          this.initParams()
-          this.reloadData()
-        } else {
-          this.$router.push('/product/brand/brandList/' + index)
-//            window.location.href = '/product/brand/brandList/' + index + '#index'
-//            window.open('/product/brand/brandList/' + index + '#index', '_self')
-        }
-      },
-      initParams: function () {
-        this.nowPage = 1
-        this.isSearch = false
-        this.keyword = ''
-        this.reloadData()
-      },
-      reloadData: function () {
-        !this.isSearch ? this.$store.dispatch('product/loadBrandsPager', {'initial': this.$route.params.initial, 'page': this.nowPage, 'count': this.pageSize, 'keyword': this.keyword}) : this.searchData()
       }
     }
   }
@@ -135,63 +63,13 @@
     width: 1190px;
     margin: 0 auto;
     padding-top: 20px;
+    overflow: hidden;
+    .brand-toggle {
+      float: left;
+      margin-right: 15px;
+    }
     .brand-content{
-      overflow: hidden;
-      .brand-index-tab {
-        margin-right: 15px;
-        float: left;
-        width: 220px;
-        height: 400px;
-        background-color: #ffffff;
-        border-radius: 5px;
-        /*border: solid 1px #d2d2d2;*/
-        .index-head {
-          padding-left: 10px;
-          width: 220px;
-          height: 34px;
-          line-height: 34px;
-          background-color: #2496f1;
-          font-size: 14px;
-          font-weight: bold;
-          border-top-left-radius: 5px;
-          border-top-right-radius: 5px;
-          color: #fff;
-          img{
-            margin-right: 6px;
-            margin-top: -2px;
-          }
-        }
-        .brand-index-group {
-          margin: 0 auto 22px;
-          width: 200px;
-          height: 40px;
-          background-color: rgba(36, 150, 241, 0.1);
-          border-radius: 4px;
-          /*opacity: 0.1;*/
-          a{
-            display: inline-block;
-            width: 40px;
-            height: 40px;
-            line-height: 40px;
-            text-align: center;
-            font-size: 16px;
-            color: #666;
-            border-radius: 5px;
-            /*background-color: #2496f1;*/
-            &:hover{
-               background-color: #2496f1;
-               color: #fff;
-             }
-          }
-          &:last-child{
-             margin-bottom: 0;
-           }
-           &:last-child a{
-              letter-spacing: 15px;
-              padding-left: 12px;
-            }
-        }
-      }
+      float: left;
     }
     .swiper-container {
       z-index: 2;

components/mobile/center/Seek.vue

@@ -14,6 +14,10 @@
         <span :class="overdue==='attention'?'mobile-switch-btn active':'mobile-switch-btn'" @click="ChangeTab('attention')">未截止</span>
         <span :class="overdue==='isattention'?'mobile-switch-btn active':'mobile-switch-btn'" @click="ChangeTab('isattention')">已截止</span>
       </div>
+      <div class="seek-title com-switch-item" v-if="userType == 'saler' && seekType == 'done'">
+        <span class="mobile-switch-btn" :class="{'active': activeType=='all'}" @click="switchActiveType('all')">公司报价</span>
+        <span class="mobile-switch-btn" :class="{'active': activeType=='self'}" @click="switchActiveType('self')">我的报价</span>
+      </div>
       <div class="search-content">
         <input type="text" v-model="seekKeyword" :placeholder="userType == 'buyer' ? '品牌/型号' : '品牌/物料名称/型号/规格/公司'" @keyup.13="onSearch">
         <span @click="onSearch"><i class="iconfont icon-sousuo"></i></span>

components/provider/RecommendStore.vue

@@ -3,7 +3,16 @@
     <div class="toggle-store">
       <toggle-store/>
     </div>
-    <div class="carousel">
+    <!--供应商-->
+    <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" />
     </div>
   </div>
@@ -11,6 +20,8 @@
 <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',
@@ -21,12 +32,17 @@ export default {
   },
   components: {
     ToggleStore,
-    Carousel
+    Carousel,
+    Banner,
+    RecommendBrand
   },
   computed: {
-    providerType () {
-      return this.$route.path === '/provider/home' ? 'agency' : 'original'
+    storeType () {
+      return this.$store.state.provider.stores.storeType.data
     },
+    // providerType () {
+    //   return this.$route.path === '/provider/home' ? 'agency' : 'original'
+    // },
     banners () {
       if (this.$store.state.carousel.banners) {
         this.init[this.init.length - 1].show = false
@@ -47,7 +63,7 @@ export default {
 
   .marketing {
     width: 1190px;
-    min-height: 360px;
+    height: 422px;
     padding-top: 20px!important ;
     overflow: hidden;
     .toggle-store {

components/provider/RecommendStoreShow.vue

@@ -1,12 +1,23 @@
 <template>
   <div class="container showAll">
-    <div class="new-store">
-      <new-store/>
-      <recommend-original/>
-      <hot-commodity/>
+    <!--供应商-->
+    <div v-if="storeType === 'supplier'">
+      <article-two/>
     </div>
-    <div class="search">
-      <suppliers/>
+    <!--品牌-->
+    <!--<div v-else-if="storeType = 'brand'">-->
+      <!--<brand-index/>-->
+    <!--</div>-->
+    <!--店铺-->
+    <div v-else>
+      <div class="new-store">
+        <new-store/>
+        <recommend-original/>
+        <hot-commodity/>
+      </div>
+      <div class="search">
+        <suppliers/>
+      </div>
     </div>
   </div>
 </template>
@@ -15,6 +26,8 @@ import NewStore from './NewStore.vue'
 import RecommendOriginal from './RecommendOriginal.vue'
 import HotCommodity from './HotCommodity.vue'
 import Suppliers from './Suppliers.vue'
+import ArticleTwo from '~components/supplier/articleTwo.vue'
+import BrandIndex from '~components/brandCenter/BrandIndex.vue'
 
 export default {
   name: 'recommend-store',
@@ -22,7 +35,14 @@ export default {
     NewStore,
     RecommendOriginal,
     HotCommodity,
-    Suppliers
+    Suppliers,
+    ArticleTwo,
+    BrandIndex
+  },
+  computed: {
+    storeType () {
+      return this.$store.state.provider.stores.storeType.data
+    }
   }
 }
 </script>

components/provider/ToggleStore.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="toggleStore">
+    <!--寄售-->
+    <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>
+      </div>
+    </div>
     <!--原厂-->
     <div class="factory list-item" :class="{active: storeType === 'factory'}" @click="toggleStore('factory')">
       <div class="header">
@@ -13,8 +23,6 @@
       </div>
       <div class="body">
         <p>原厂直营，品质保障</p>
-        <p>全球品牌，自由筛选</p>
-        <p>原装现货，买得放心</p>
       </div>
     </div>
     <!--代理经销-->
@@ -29,21 +37,37 @@
         </div>
       </div>
       <div class="body">
-        <p>百强代理，资源共享</p>
-        <p>物料询价，极速响应</p>
-        <p>千万型号，一站找齐</p>
+        <p>百强代理，一站找齐</p>
       </div>
     </div>
-    <!--寄售-->
-    <div class="sale list-item" @click="open('/store/33069557578d44e69bd91ad12d28a8d4')">
+    <!--供应商-->
+    <div class="agent list-item" :class="{active: storeType === 'supplier'}" @click="toggleStore('supplier')">
       <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 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>
+        <p>产业资源，免费共享</p>
+      </div>
+    </div>
+    <!--品牌墙-->
+    <div class="agent list-item" :class="{active: storeType === 'brand'}" @click="toggleStore('brand')">
+      <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>
       </div>
     </div>
   </div>
@@ -66,6 +90,11 @@ export default {
       return this.$store.state.provider.stores.originalCount.data
     }
   },
+  mounted () {
+    if (this.$route.path === '/product/brand/brandList') {
+      this.$store.commit('provider/stores/SET_STORETYPE', type)
+    }
+  },
   methods: {
     // 切换Store
     toggleStore (type) {
@@ -73,6 +102,20 @@ export default {
       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' })
+      if (type === 'brand') {
+        this.$router.push('/product/brand/brandList/A')
+      } else {
+        if (type === 'origin') {
+          this.$store.commit('provider/stores/SET_STORETYPE', 'origin')
+        }
+        if (type === 'supplier') {
+          this.$store.commit('provider/stores/SET_STORETYPE', 'supplier')
+        }
+        if (type === 'factory') {
+          this.$store.commit('provider/stores/SET_STORETYPE', 'factory')
+        }
+        this.$router.push('/provider/shop')
+      }
     },
     // 店铺入驻数量
     formatNumber (num, key) {
@@ -98,7 +141,7 @@ export default {
 		padding: 0;
     .list-item{
       width: 100%;
-      height: 134px;
+      height: 81px;
       background: #fff;
       border-bottom: 1px solid #ece9ec;
       .header {

components/supplier/articleOne.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="supplier_one">
-    <div class="count">
-      已入驻 <span v-text="all"></span>
-    </div>
+    <!--<div class="count">-->
+      <!--已入驻 <span v-text="all"></span>-->
+    <!--</div>-->
+    <div class="title">新入驻供应商</div>
     <ul class="list-unstyled">
       <li v-for="item in list.content" @click="jumpResource(item.enUU)">
         <div class="content_name" v-text="item.storeName">深圳英优软科技有限公司</div>
@@ -64,7 +65,6 @@
 <style type="text/scss" lang="scss">
 .supplier_one{
   position:relative;
-  padding-top:90px;
   border-radius:5px;
   padding-bottom:5px;
   margin-bottom:15px;
@@ -114,16 +114,6 @@
       }
     }
   }
-  &:before{
-    content: '';
-    position:absolute;
-    top:0;
-    left:0;
-    display:block;
-    width:100%;
-    height:92px;
-    background: url(/images/supplier/header_img.png)no-repeat center center
-  }
   .count{
     text-align: center;
     font-size: 25px;
@@ -131,10 +121,24 @@
     font-weight: bold;
     margin-bottom:5px;
   }
+  .title{
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+    background-color: #2496f1;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+  }
   ul{
+    padding: 13px 0 0 7px;
+    height: 366px;
     li{
       position:relative;
       padding: 0 18px 0 20px;
+      margin-bottom: 10px;
       line-height: 25px;
       height:25px;
       color:#666;

components/supplier/articleTwo.vue

@@ -1,44 +1,60 @@
 <template>
-  <div class="supplier_two">
-    <div class="title">
-      <span>供应商推荐</span>
-    </div>
-    <div class="empty" v-if="!list.content || list.content.length === 0">
-      <div class="supplier-empty-info">
-        <p>暂无供应商推荐信息</p>
-      </div>
-    </div>
-    <ul class="list-unstyled">
-      <li v-for="item in list.content" @click="jumpResource(item.uu)">
-        <div class="img">
-          <img :src="item.enLogoUrl || '/images/all/default.png'">
+  <div class="supplier-show">
+    <div class="supplier-list">
+      <template>
+        <article-one/>
+      </template>
+      <div class="supplier_two">
+        <div class="title">
+          <span>供应商推荐</span>
         </div>
-        <div class="content_name" v-text="item.enName">深圳英优软科技有限公司</div>
-      </li>
-    </ul>
-    <el-dialog
-      title="提示"
-      :visible.sync="hasDialog ">
-      <div class="form_dialog">
-        <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
-      </div>
-      <span slot="footer" class="dialog-footer">
+        <div class="empty" v-if="!list.content || list.content.length === 0">
+          <div class="supplier-empty-info">
+            <p>暂无供应商推荐信息</p>
+          </div>
+        </div>
+        <ul class="list-unstyled">
+          <li v-for="item in list.content.slice(0,10)" @click="jumpResource(item.uu)">
+            <div class="img">
+              <img :src="item.enLogoUrl || '/images/all/default.png'">
+            </div>
+            <div class="content_name" v-text="item.enName">深圳英优软科技有限公司</div>
+          </li>
+        </ul>
+        <el-dialog
+          title="提示"
+          :visible.sync="hasDialog ">
+          <div class="form_dialog">
+            <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
+          </div>
+          <span slot="footer" class="dialog-footer">
         <a type="button" @click="hasDialog=false">我知道了</a>
       </span>
-    </el-dialog>
+        </el-dialog>
+      </div>
+    </div>
+    <div class="supplier-table">
+      <merchant-view/>
+    </div>
   </div>
 </template>
 
 <script>
+  import MerchantView from '~components/supplier/merchant.vue'
+  import ArticleOne from '~components/supplier/articleOne.vue'
   export default {
     data () {
       return {
         hasDialog: false
       }
     },
+    components: {
+      MerchantView,
+      ArticleOne,
+    },
     computed: {
       list () {
-        return this.$store.state.supplier.merchant.recommend.data
+        return this.$store.state.supplier.merchant.recommend.data ? this.$store.state.supplier.merchant.recommend.data : []
       }
     },
     methods: {
@@ -65,13 +81,20 @@
 </script>
 
 <style type="text/scss" lang="scss">
+  .supplier-show {
+    overflow: hidden;
+    .supplier-list {
+      float: left;
+      margin-right: 15px;
+      width: 220px;
+    }
+    .supplier-table {
+      float: left;
+      width: 955px;
+    }
+  }
   .supplier_two{
     position:relative;
-    border-radius:5px;
-    padding-bottom:5px;
-    margin-bottom:15px;
-    background: #fff;
-    height:1205px;
     overflow: hidden;
     .el-dialog{
       width: 290px!important;
@@ -121,8 +144,9 @@
       height: 34px;
       line-height: 34px;
       text-align: center;
-      background: #2496f1;
-      margin-bottom:5px;
+      background-color: #2496f1;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
       span{
         line-height: 35px;
         font-size: 14px;
@@ -138,6 +162,10 @@
       }
     }
     > ul{
+      padding-top: 17px;
+      border-radius:5px;
+      background: #fff;
+      height: 614px;
       li{
         position:relative;
         padding: 0 10px;

components/supplier/merchant.vue

@@ -17,7 +17,7 @@
       </div>
     </div>
     <ul class="list-inline">
-      <li v-for="item in list.content" @click="jumpResource(item.enUU)" class="clearfix">
+      <li v-for="item in list.content.slice(0,8)" @click="jumpResource(item.enUU)" class="clearfix">
         <div class="img">
           <img :src="item.storeLogoUrl || item.logoUrl || '/images/all/default.png'">
           <span class="has_shop" v-if="item.isStore === 1"></span>
@@ -82,7 +82,7 @@
     },
     computed: {
       list () {
-        return this.$store.state.supplier.merchant.merchant.data
+        return this.$store.state.supplier.merchant.merchant.data ? this.$store.state.supplier.merchant.merchant.data : []
       }
     },
     methods: {
@@ -235,7 +235,7 @@
     }
   }
   .list_info{
-    height: 1120px;
+    height: 983px;
     background: #fff;
     .empty{
       padding-top:600px;

pages/product/brand/brandList/_initial.vue

@@ -10,8 +10,14 @@
   export default {
     name: 'brandCenterIndex',
     layout: 'default',
+    mounted () {
+      if (this.$route.path === '/product/brand/brandList/A') {
+        this.$store.commit('provider/stores/SET_STORETYPE', 'brand')
+      }
+    },
     fetch ({store, route}) {
       return Promise.all([
+        store.commit('provider/stores/SET_STORETYPE', 'factory'),
         store.dispatch('loadFloors'),
         store.dispatch('loadBanners', {type: 'Brand-v3'}),
         store.dispatch('loadBrandCarousel'),

pages/provider/shop.vue

@@ -12,9 +12,10 @@ import { RecommendStore, RecommendStoreShow } from '~components/provider'
 
 export default {
   layout: 'main',
-  fetch ({ store }) {
+  fetch ({ store, route }) {
     return Promise.all([
       store.commit('provider/stores/SET_STORETYPE', 'factory'),
+      // 店铺
       store.dispatch('loadBanners', {type: 'factory_banner_carousel'}),
       store.dispatch('provider/loadSalesStore', { isOriginal: true }),
       store.dispatch('provider/loadNewStores', { types: 'ORIGINAL_FACTORY', size: 5 }),
@@ -23,7 +24,19 @@ export default {
       store.dispatch('provider/loadHotComponents'),
       store.dispatch('provider/loadFactoriesCount'),
       store.dispatch('provider/loadAgencyCount'),
-      store.dispatch('loadStoreStatus', { op: 'check' })
+      store.dispatch('loadStoreStatus', { op: 'check' }),
+      // 供应商
+      store.dispatch('supplier/loadVendorList', {page: 1, size: 10}),
+      store.dispatch('supplier/loadVendorAll', {page: 1, size: 20}),
+      store.dispatch('supplier/loadNewMerchant', {filter: 'page', size: 10}),
+      store.dispatch('supplier/loadRecommend', {size: 19}),
+      // 品牌
+      store.dispatch('loadFloors'),
+      store.dispatch('loadBanners', {type: 'Brand-v3'}),
+      store.dispatch('loadBrandCarousel'),
+      store.dispatch('loadBrandBanner'),
+      store.dispatch('product/loadRecommends'),
+      store.dispatch('product/loadBrandsPager', {'initial': route.params.initial, 'page': 1, 'count': 60, 'keyword': ''})
     ])
   },
   components: {

pages/supplier/index.vue

@@ -2,7 +2,6 @@
   <div class="supplier" style="background: #f2f1f1;padding-top:20px;">
     <div class="container">
       <div class="article">
-        <article-one></article-one>
         <article-two></article-two>
       </div>
       <div class="section">
@@ -10,7 +9,6 @@
         <!--<carousel>-->
         <!--<kind-category @loadchild="loadProductKinds"></kind-category>-->
         <!--</carousel>-->
-        <merchant-view/>
       </div>
     </div>
   </div>