品牌搜索

components/base/SupplierEmpty.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="supplier-empty">
+    <el-dialog
+      title="提示"
+      :visible.sync="showObj.show">
+      <div class="form_dialog">
+        <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <a type="button" @click="showObj.show = false">我知道了</a>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      showObj: {
+        type: Object,
+        default: () => {
+          return {
+            show: false
+          }
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss">
+  .supplier-empty {
+    .el-dialog{
+      width: 290px!important;
+      .el-dialog__header{
+        background: #4290f7;
+        line-height: 40px;
+        padding: 0 20px 0;
+        display:block;
+        .el-dialog__title{
+          color:#fff;
+        }
+        .el-dialog__headerbtn:hover .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close{
+          color:#fff;
+        }
+      }
+      .el-dialog__body{
+        padding: 10px 20px;
+      }
+      .el-dialog__footer{
+        text-align: center;
+        a{
+          display:inline-block;
+          background: #3c7cf5;
+          color:#fff;
+          font-size: 14px;
+          line-height: 30px;
+          height:30px;
+          padding:0 10px;
+          border-radius:5px;
+        }
+      }
+    }
+    .form_dialog{
+      p{
+        width:200px;
+        font-size: 14px;
+        color:#666666;
+        margin:0 auto;
+        padding-top:5px;
+        line-height: 20px;
+        span{
+          color:#eb6054;
+        }
+      }
+    }
+  }
+</style>

components/base/index.js

@@ -0,0 +1,2 @@
+import SupplierEmpty from './SupplierEmpty.vue'
+export { SupplierEmpty }

components/main/Search.vue

@@ -40,7 +40,7 @@
         v-show="showAssociate"
         @mouseenter="associate.focus=true"
         @mouseleave="associate.focus=false">
-      <li v-for="(k, index) in similarKeywords.data.all" class="item"
+      <li v-for="(k, index) in similarKeywords.result" class="item"
           :class="{'active': index==associate.activeIndex}"
           @click.stop.prevent="onAssociateClick(k)">{{k}}
       </li>
@@ -100,7 +100,8 @@
         click_flag: false,
         searchType: 'product',
         // 新版搜索控制变量
-        newSearchType: 'component'
+        newSearchType: 'component',
+        isInit: true
       }
     },
     computed: {
@@ -111,13 +112,13 @@
         return this.$store.state.hotSearchBrand.hot.data
       },
       similarKeywords () {
-        return this.$store.state.search.keywords
+        return this.$store.state.search.keywords.data || {}
       },
       showAssociate () {
         return this.keyword &&
           this.associate.show &&
-          this.similarKeywords.data &&
-          (this.similarKeywords.data.brand || this.similarKeywords.data.component || this.similarKeywords.data.kind)
+          this.similarKeywords.result &&
+          this.similarKeywords.result.length
       },
       hotSearchData () {
         let list = this.$store.state.floor.list_v3.data
@@ -171,11 +172,21 @@
     watch: {
       'keyword': {
         handler (val, oldVal) {
-          let keywords = this.similarKeywords.data
-          if (!keywords || !keywords.length || this.associate.activeIndex === null || val !== keywords[this.associate.activeIndex]) {
-            this.onChange()
+          let keywords = this.similarKeywords
+          if (!keywords.result || !keywords.result.length || this.associate.activeIndex === null || val !== keywords[this.associate.activeIndex]) {
+            this.onChange(this.isInit)
+            this.isInit = false
           }
         }
+      },
+      '$route': {
+        handler: function (route) {
+          if (route.path === '/search') {
+            this.newSearchType = route.query.type || 'component'
+            this.keyword = route.query.w || ''
+          }
+        },
+        immediate: true
       }
     },
     methods: {
@@ -194,7 +205,7 @@
         this.associate.show = this.associate.focus
       },
       onSelectChange (count) {
-        let keywords = this.similarKeywords.data
+        let keywords = this.similarKeywords
         if (keywords && keywords.length) {
           let index = this.associate.activeIndex
           if (index === null) {
@@ -210,24 +221,24 @@
           this.keyword = keywords[index]
         }
       },
-      onChange () {
-        this.associate.activeIndex = null
-        if (!this.keyword) {
-          this.associate.show = false
-          this.$store.dispatch('resetSearchKeywords')
-        } else {
-          this.searchKeywords()
-        }
-        if (this.click_flag) {
-          this.associate.show = false
-          this.click_flag = false
+      onChange (isInit) {
+        if (!isInit) {
+          this.associate.activeIndex = null
+          if (!this.keyword) {
+            this.associate.show = false
+            this.$store.dispatch('resetSearchKeywords')
+          } else {
+            this.searchKeywords()
+          }
+          if (this.click_flag) {
+            this.associate.show = false
+            this.click_flag = false
+          }
         }
       },
       searchKeywords () {
-        if (this.searchType === 'product') {
-          this.associate.show = true
-          this.$store.dispatch('searchKeywords', { keyword: this.keyword })
-        }
+        this.associate.show = true
+        this.$store.dispatch('searchKeywords', { keyword: this.keyword, type: this.newSearchType })
       },
       onSearch () {
         document.getElementsByClassName('search-input')[0].blur()

components/product/brand/BrandDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="brandDetail container">
-    <div class="menu-com row">
+    <div class="menu-com row" v-if="!supBrandObj">
       <div class="menu-title col-md-12">
         <a href="/product/brand/brandList/A">品牌中心</a> > <span>{{list.nameEn}}</span>
       </div>
@@ -27,6 +27,13 @@
 <script>
   export default {
     name: 'BrandsDetail',
+    // 主动传入的品牌
+    props: {
+      supBrandObj: {
+        type: Object,
+        default: null
+      }
+    },
     data () {
       return {
         applications: []
@@ -59,7 +66,7 @@
     },
     computed: {
       list () {
-        let list = this.baseUtils.deepCopy(this.$store.state.brandDetail.detail.data)
+        let list = this.supBrandObj || this.baseUtils.deepCopy(this.$store.state.brandDetail.detail.data)
         if (list.application && list.application !== '') {
           this.applications = list.application.split(',')
         }

components/product/component/ComponentDetail.vue

@@ -17,13 +17,13 @@
             <div class="message-detail" v-if="list.brand">
               <div class="message-item">品牌</div>
               <div class="colon">:</div>
-              <div :title="list.brand.nameCn"><a class="message-body blue" target="_blank" :href="`/product/brand/${list.brand.uuid}`">{{list.brand.nameCn}}</a></div>
+              <div :title="list.brand ? list.brand.nameCn : ''"><a class="message-body blue" target="_blank" :href="`/product/brand/${list.brand.uuid}`">{{list.brand && list.brand.nameCn ?  list.brand.nameCn : ''}}</a></div>
             </div>
             <div class="message-detail">
               <div class="message-item">物料名称(类目)</div>
               <div class="colon">:</div>
               <div class="message-body body-long">
-                {{list.kind.nameCn || '-'}}
+                {{list.kind && list.kind.nameCn ? list.kind.nameCn : '-'}}
               </div>
             </div>
             <div class="message-detail">

components/search/BrandList.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="search-brand-list">
+    <ul>
+      <li v-for="item in brands">
+        <div class="img inline-block">
+          <img :src="item.logoUrl || '/images/component/default.png'" alt="">
+        </div>
+        <div class="params inline-block">
+          <p>
+            <span class="title inline-block">主营产品：</span>
+            <span class="content inline-block" :title="item.series">{{item.series}}</span>
+          </p>
+          <p>
+            <span class="title inline-block">应用领域：</span>
+            <span class="content inline-block" :title="item.applications">{{item.applications}}</span>
+          </p>
+          <p>
+            <span class="title inline-block">品牌介绍：</span>
+            <span class="content inline-block" :title="item.brief">{{item.brief}}</span>
+          </p>
+          <p>
+            <span class="title inline-block">官网地址：</span>
+            <span class="content inline-block" :title="item.url">{{item.url}}</span>
+          </p>
+        </div>
+        <button>了解详情</button>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+  export default {
+    computed: {
+      brands () {
+        let brands = this.baseUtils.deepCopy(this.$store.state.searchData.searchList.listNew.data.brands) || []
+        if (brands.length) {
+          brands.forEach(item => {
+            if (item.application && item.application !== '') {
+              item.applications = item.application.split(',').join('|')
+            }
+          })
+        }
+        return brands
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .search-brand-list {
+    li {
+      border: 1px solid #e8e8e8;
+      border-bottom: none;
+      padding: 29px 18px 25px 30px;
+      &:last-child {
+        border-bottom: 1px solid #e8e8e8;
+      }
+      .img {
+        width: 208px;
+        height: 156px;
+        text-align: center;
+        line-height: 154px;
+        border-radius: 2px;
+        background: #fff;
+        border: 1px solid #e2e2e2;
+        img {
+          max-width: 206px;
+          max-height: 152px;
+        }
+      }
+      .params {
+        margin-left: 12px;
+        width: 743px;
+        color: #666;
+        p {
+          margin-top: 15px;
+          &:first-child {
+            margin-top: 0;
+          }
+          .title {
+            font-weight: bold;
+            vertical-align: top;
+          }
+          .content {
+            word-break: break-all;
+          }
+        }
+      }
+      button {
+        outline: none;
+        border: 1px solid #2496f1;
+        border-radius: 3px;
+        background: #fff;
+        color: #2496f1;
+        width: 100px;
+        height: 28px;
+        text-align: center;
+        &:hover {
+          background: #2496f1;
+          color: #fff;
+        }
+      }
+      &:hover {
+        background: #ecf2fd;
+        .params {
+          color: #2e91f0;
+        }
+      }
+    }
+  }
+</style>

components/search/ForwardGoodsList.vue

@@ -11,7 +11,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="item in forwardGood.components">
+        <tr v-for="item in forwardGood.content">
           <td>
             <div class="line">
               <span class="title inline-block">原厂型号</span>

components/search/GoodList.vue

@@ -54,7 +54,7 @@
           </tr>
           </thead>
           <tbody id="productList-content">
-          <tr v-for="item in good_list.components" @click="goUnstandardDetail(item)">
+          <tr v-for="item in good_list.content" @click="goUnstandardDetail(item)">
             <!--<td>-->
             <!--<nuxt-link class="component-img-box" :to="item.batchCode?`/store/${item.storeId}/${item.batchCode}`:`/product/component/${item.uuid}`">-->
               <!--&lt;!&ndash;          <img :src="item.img?item.img:item.brand&&item.brand.logoUrl?item.brand.logoUrl:'/images/component/default.png'">&ndash;&gt;-->
@@ -147,7 +147,7 @@
               </div>
             </td>
           </tr>
-          <tr v-if="!good_list.components || !good_list.components.length">
+          <tr v-if="!good_list.content || !good_list.content.length">
             <td colspan="12">
               <div class="empty">
                 <p class="empty-img">
@@ -163,14 +163,12 @@
           </tbody>
         </table>
       </div>
-      <page :total="total_count" :page-size="pageSize"
-      :current="nowPage" @childEvent="listenPage"></page>
     </div>
   </div>
 </template>
 
 <script>
-  import Page from '~components/common/page/pageComponent.vue'
+//  import Page from '~components/common/page/pageComponent.vue'
   import Buy from '~components/common/buyOrCar/buyComponent.vue'
   export default {
     data () {
@@ -188,7 +186,7 @@
       }
     },
     components: {
-      Page,
+//      Page,
       Buy
     },
     props: ['crname_click_flag'],
@@ -229,10 +227,10 @@
         return this.$store.state.searchData.searchList.listNew.data
       },
       good_list () {
-        return this.good_lists.stock
+        return this.good_lists.stock || {}
       },
       total_count () {
-        return Math.min(this.good_list.total, 100 * this.pageSize)
+        return Math.min(this.good_list.total || 0, 100 * this.pageSize)
       },
       buy_info () {
         return this.$store.state.user.buy.buyInfo.data
@@ -261,10 +259,10 @@
           })
         }
       },
-      listenPage: function (changedPage) {
-        this.nowPage = changedPage
-        this.$emit('pageEvent', this.nowPage)
-      },
+//      listenPage: function (changedPage) {
+//        this.nowPage = changedPage
+//        this.$emit('pageEvent', this.nowPage)
+//      },
       sortBy: function (param) {
         if (param === 'normal1') {
           this.sorting = {}

components/search/ResultTitle.vue

@@ -3,7 +3,7 @@
     搜索"<span class="text-inverse" >{{keyword}}</span>"
     <!--<span v-if="status != 1">暂无此型号</span>-->
     <span>，为您找到
-    <span class="text-num" v-text="count || 0"></span> 个<span v-if="status == 2">相关</span>信息
+    <span class="text-num" v-text="count || 0"></span> 条信息
     </span>：
   </div>
 </template>

components/search/SupplierList.vue

@@ -1,8 +1,186 @@
 <template>
-  <div>111</div>
+  <div class="search-suppliers-list">
+    <ul class="list-inline">
+      <li class="clearfix" v-for="item in currentGoods.content" @click="goSup(item)">
+        <div class="img">
+          <img :src="item.storeLogoUrl || item.logoUrl || '/images/all/default.png'">
+          <!--<span class="has_shop"></span>-->
+        </div>
+        <div class="content">
+          <h3 class="enterprise_name">{{item.enName}}</h3>
+          <p>
+            <span>企业执照号：</span><span :title="item.enBusinesscode">{{item.enBusinesscode || '暂无信息'}}</span>
+            <span class="split_line">|</span>
+            <span>地址：</span><span :title="item.enAddress">{{item.enAddress || '暂无信息'}}</span>
+          </p>
+          <p>
+            <span>邮箱：</span><span :title="item.enEmail">{{item.enEmail || '暂无信息'}}</span>
+            <span class="split_line">|</span>
+            <span>电话：</span><span :title="item.enTel">{{item.enTel || '暂无信息'}}</span>
+            <span class="split_line">|</span>
+            <span>行业：</span><span :title="item.enIndustry">{{item.enIndustry || '暂无信息'}}</span>
+          </p>
+        </div>
+        <div class="select_btn">{{item.storeUuid ? '进入店铺' : '了解详情'}}</div>
+      </li>
+    </ul>
+    <supplier-empty :showObj="showDialogObj"></supplier-empty>
+  </div>
 </template>
 <script>
-  export default {}
+  import { SupplierEmpty } from '~components/base'
+  export default {
+    props: {
+      resultType: {
+        type: String,
+        default: 'current'
+      }
+    },
+    components: {
+      SupplierEmpty
+    },
+    data () {
+      return {
+        showSeekObj: {
+          show: false
+        },
+        productItem: {},
+        showDialogObj: {
+          show: false
+        }
+      }
+    },
+    computed: {
+      goods () {
+        return this.$store.state.searchData.searchList.listNew.data
+      },
+      currentGoods () {
+        if (this.goods) {
+          if (this.resultType === 'current') {
+            return this.goods.stock
+          } else {
+            return this.goods.futures
+          }
+        } else {
+          return {}
+        }
+      }
+    },
+    methods: {
+      goSup (item) {
+        if (item.storeUuid) {
+          this.$router.push(`/store/${item.storeUuid}`)
+        } else {
+          this.$http.get('vendor/introduction/product/count', {params: {vendUU: item.enUU}})
+            .then(res => {
+              if (res.data.count > 0) {
+                this.$router.push('supplier/' + item.enUU)
+              } else {
+                this.showDialogObj.show = true
+              }
+            }, err => {
+              console.log(err)
+            })
+        }
+      }
+    }
+  }
 </script>
 <style lang="scss" scoped>
+  $border: 1px solid #e8e8e8;
+  .search-suppliers-list {
+    ul{
+      margin:0;
+      border: {
+        left: $border;
+        right: $border;
+        top: $border;
+      }
+      li{
+        position:relative;
+        width:100%;
+        vertical-align: top;
+        height:112px;
+        padding:15px;
+        border-bottom: $border;
+        .img{
+          position:relative;
+          float:left;
+          width:80px;
+          height:80px;
+          border:1px solid #ccc;
+          img{
+            width:100%;
+            height:100%;
+            vertical-align: top;
+          }
+          .has_shop {
+            position:absolute;
+            left:0;
+            top:0;
+            width:68px;
+            height:22px;
+            background: url(/images/supplier/icon/top_left.png)no-repeat;
+            color:#fff;
+            font-weight: bold;
+            text-align: center;
+            line-height: 22px;
+          }
+        }
+        .content{
+          margin-left:100px;
+          color:#333;
+          padding-top:2px;
+          .enterprise_name{
+            width:690px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space:nowrap;
+            font-weight: bold;
+            color:#333;
+            font-size: 16px;
+            margin:0 0 10px;
+          }
+          p{
+            width:690px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space:nowrap;
+            font-size: 14px;
+            color:#333;
+            margin:0 0 5px;
+            span{
+              &.split_line{
+                margin:0 5px;
+              }
+            }
+          }
+        }
+        .select_btn{
+          position:absolute;
+          top:40%;
+          right:20px;
+          z-index:250;
+          padding:5px 10px;
+          text-align: center;
+          background: #1891e4;
+          color:#fff;
+          border-radius:3px;
+        }
+        &:hover{
+          cursor:pointer;
+          background: #ecf2fd;
+          .content{
+            color:#2496f1;
+            .enterprise_name{
+              color:#2496f1;
+            }
+            p{
+              color:#2496f1;
+            }
+          }
+        }
+      }
+    }
+  }
 </style>

components/search/index.js

@@ -3,5 +3,6 @@ import Kind from './Kind.vue'
 import ResultTitle from './ResultTitle.vue'
 import ForwardGoodsList from './ForwardGoodsList.vue'
 import SupplierList from './SupplierList.vue'
+import BrandList from './BrandList.vue'
 
-export { GoodList, Kind, ResultTitle, ForwardGoodsList, SupplierList }
+export { GoodList, Kind, ResultTitle, ForwardGoodsList, SupplierList, BrandList }

layouts/main.vue

@@ -43,7 +43,7 @@
           }
           return ''
         } else if (path.startsWith('/product/component/')) {
-          if (this.componentDetail) {
+          if (this.componentDetail && this.componentDetail.brand) {
             return this.componentDetail.brand.nameCn + this.componentDetail.code + '参数|供应商|数据手册中文资料|规格书-优软商城'
           } else {
             return ''
@@ -81,7 +81,7 @@
           }
           return ''
         } else if (path.startsWith('/product/component/')) {
-          if (this.componentDetail) {
+          if (this.componentDetail && this.componentDetail.brand) {
             return '优软商城提供' + this.componentDetail.brand.nameCn + this.componentDetail.code + '数据手册中文资料规格书下载，' + this.componentDetail.code + '供应商及参数报价。'
           } else {
             return ''

pages/product/component/_uuid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="detail">
-    <div v-if="componentDetail">
+    <div v-if="componentDetail && componentDetail.uuid">
       <component-menu/>
       <component-detail/>
       <store-info/>

pages/search/_keyword.vue

@@ -8,7 +8,8 @@
           @crnameFilterEvent="listenCrnameFilter"
           @crnameFlagEvent="listenCrnameFlag"
     ></kind>-->
-  <div class="search-result-type">
+  <brand-detail :supBrandObj="goods.brand" v-if="searchType == 'brand' && goods.brand"></brand-detail>
+  <div class="search-result-type" v-if="!goods.brands">
     <span class="inline-block" :class="{active: resultType == 'current'}" @click="setResultType('current')">现货({{stockTotal}}条)</span>
     <span class="inline-block" :class="{active: resultType == 'forward'}" @click="setResultType('forward')">期货({{futureTotal}}条)</span>
   </div>
@@ -21,13 +22,20 @@
     ></good-list>
     <forward-goods-list v-else></forward-goods-list>
   </template>
-  <template v-if="searchType == 'product'">
+  <template v-if="searchType == 'product' || searchType == 'store' || (searchType == 'brand' && goods.brand)">
     <supplier-list></supplier-list>
   </template>
+  <template v-if="searchType == 'brand' && !goods.brand">
+    <brand-list></brand-list>
+  </template>
+  <page :total="currentCount" :page-size="pageSize"
+        :current="nowPage" @childEvent="listenPage"></page>
 </div>
 </template>
 <script>
-  import { GoodList, ResultTitle, ForwardGoodsList, SupplierList } from '~components/search'
+  import { GoodList, ResultTitle, ForwardGoodsList, SupplierList, BrandList } from '~components/search'
+  import { BrandDetail } from '~components/product'
+  import Page from '~components/common/page/pageComponent.vue'
 //  import DetailBrand from '~components/search/DetailBrand.vue'
   export default{
     layout: 'main',
@@ -56,7 +64,10 @@
       ResultTitle,
       GoodList,
       ForwardGoodsList,
-      SupplierList
+      SupplierList,
+      Page,
+      BrandList,
+      BrandDetail
 //      DetailBrand
     },
     watch: {
@@ -69,20 +80,37 @@
       }
     },
     computed: {
+      // 搜索类型
       searchType () {
         return this.$route.query.type || 'component'
       },
+      // 搜索结果
       goods () {
         return this.$store.state.searchData.searchList.listNew.data
       },
+      // 现货数量
       stockTotal () {
-        return this.goods.stock.total || 0
+        return this.goods.stock ? this.goods.stock.total : 0
       },
+      // 期货数量
       futureTotal () {
-        return this.goods.futures.total || 0
+        return this.goods.futures ? this.goods.futures.total : 0
       },
+      // 当前分页数
+      currentCount () {
+        if (this.goods.brands) {
+          return this.goods.total
+        } else {
+          return this.resultType === 'current' ? this.stockTotal : this.futureTotal
+        }
+      },
+      // 总数
       count () {
-        return this.stockTotal + this.futureTotal
+        if (this.goods.brands) {
+          return this.goods.total
+        } else {
+          return this.stockTotal + this.futureTotal
+        }
       }
     },
     methods: {
@@ -100,7 +128,7 @@
         if (this.sorting === {}) {
           this.sorting = {}
         }
-        this.$store.dispatch('searchData/searchForListNew', {count: this.pageSize, filter: this.filter, keyword: this.$route.query.w, page: this.nowPage, sorting: this.sorting, type: this.searchType})
+        return this.$store.dispatch('searchData/searchForListNew', {count: this.pageSize, filter: this.filter, keyword: this.$route.query.w, page: this.nowPage, sorting: this.sorting, type: this.searchType})
       },
 //      reloadKind: function () {
 //        if (!this.filter.goods_kindId) {
@@ -124,7 +152,7 @@
 //      },
       listenPage: function (nPage) {
         this.nowPage = nPage
-        this.reloadList()
+        return this.reloadList()
       },
       listenSort: function (sortType) {
         this.sorting = sortType
@@ -227,7 +255,16 @@
 //        }
 //      },
       setResultType: function (resultType) {
-        this.resultType = resultType
+        if (this.nowPage > 1) {
+          this.listenPage(1).then(() => {
+            this.resultType = resultType
+          })
+        } else {
+          this.resultType = resultType
+        }
+//        this.listenPage(1).then(() => {
+//          this.resultType = resultType
+//        })
       }
     }
   }