店铺、供应商搜索

assets/scss/common.scss

@@ -735,3 +735,9 @@ img.new-animate{
   display: inline-block;
   vertical-align: middle;
 }
+
+.text-ellipse {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

components/mobile/applyPurchase/SayPrice.vue

@@ -93,11 +93,18 @@
     watch: {
       showSayPriceBox: function (val, old) {
          if (val) {
-           document.body.style.position = 'fixed'
-           document.body.style.left = '0'
-           document.body.style.right = '0'
+//           document.body.style.position = 'fixed'
+//           document.body.style.left = '0'
+//           document.body.style.right = '0'
+//           document.documentElement.style['overflow'] = 'hidden'
+//           document.body.style.overflow = 'hidden'
+           document.documentElement.addEventListener('touchmove', function(event) {
+             event.preventDefault()
+           }, false)
          } else {
-          document.body.style.position = 'static'
+//          document.body.style.position = 'static'
+//           document.documentElement.style['overflow'] = 'auto'
+//           document.body.style.overflow = 'auto'
          }
         this.resetSayPrice()
       }

components/mobile/base/SearchHeader.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="search-content com-mobile-header">
+    <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+    <input type="text" v-model="keyword" @input="getSimilarList()" :placeholder="placeholder" @keyup.13="onSearch">
+    <span @click="onSearch()"><i class="iconfont icon-sousuo"></i></span>
+    <ul v-if="type == 'supplier' && keyword && keyword !== '' && showSimilarWord">
+      <template v-if="similarList.pCmpCode && similarList.pCmpCode.length">
+        <li class="title text-ellipse">型号</li>
+        <li class="text-ellipse" v-for="code in similarList.pCmpCode.slice(0, 4)" @click="onSearch(code.pCmpCode, 'pCmpCode', $event)">{{code.pCmpCode}}</li>
+      </template>
+      <template v-if="similarList.pBrandEn && similarList.pBrandEn.length">
+        <li class="title text-ellipse">品牌</li>
+        <li class="text-ellipse" v-for="brand in similarList.pBrandEn.slice(0, 4)" @click="onSearch(brand.nameCn, 'pBrandEn', $event)">{{brand.nameCn}}</li>
+      </template>
+      <template v-if="similarList.kind && similarList.kind.length">
+        <li class="title text-ellipse">类目</li>
+        <li class="text-ellipse" v-for="kind in similarList.kind.slice(0, 4)" @click="onSearch(kind.kind, 'kind', $event)">{{kind.kind}}</li>
+      </template>
+    </ul>
+    <ul v-if="type == 'default' && keyword && keyword !== '' && showSimilarWord">
+      <template v-if="similarList.component && similarList.component.length">
+        <li class="title text-ellipse">型号</li>
+        <li class="text-ellipse" v-for="code in similarList.component.slice(0, 4)" @click="onSearch(code.code, 'code', $event)">{{code.code}}</li>
+      </template>
+      <template v-if="similarList.brand && similarList.brand.length">
+        <li class="title text-ellipse">品牌</li>
+        <li class="text-ellipse" v-for="brand in similarList.brand.slice(0, 4)" @click="onSearch(brand.nameCn, 'brand', $event)">{{brand.nameCn}}</li>
+      </template>
+      <template v-if="similarList.kind && similarList.kind.length">
+        <li class="title text-ellipse">类目</li>
+        <li class="text-ellipse" v-for="kind in similarList.kind.slice(0, 4)" @click="onSearch(kind.nameCn, 'kind', $event)">{{kind.nameCn}}</li>
+      </template>
+    </ul>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      placeholder: {
+        type: String,
+        default: '请输入要查找的内容'
+      },
+      similarUrl: {
+        type: String,
+        default: '/search/similarKeywords'
+      },
+      type: {
+        type: String,
+        default: 'default'
+      }
+    },
+    data () {
+      return {
+        keyword: '',
+        similarList: {},
+        showSimilarWord: false
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        document.onclick = () => {
+          this.showSimilarWord = false
+        }
+      })
+    },
+    methods: {
+      onSearch: function (key, type, e) {
+        if (e) {
+          e.stopPropagation()
+        }
+        if (key) {
+          this.keyword = key
+          this.$emit('searchAction', {
+            keyword: this.keyword,
+            type: type
+          })
+        } else {
+          this.$emit('searchAction', {
+            keyword: this.keyword
+          })
+        }
+        this.showSimilarWord = false
+      },
+      getSimilarList: function () {
+        if (this.keyword && this.keyword !== '') {
+          this.$http.get(this.similarUrl, {params: {keyword: this.keyword}}).then(
+            res => {
+              this.similarList = res.data
+              this.showSimilarWord = true
+            }
+          )
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .search-content {
+    color: #333;
+    input {
+      margin: 0 0 0 .5rem;
+      line-height: normal;
+    }
+    ul {
+      width: 6.48rem;
+      background: #fff;
+      position: absolute;
+      left: .6rem;
+      top: .72rem;
+      border: 1px solid #ccc;
+      border-radius: .05rem;
+      li {
+        height: .6rem;
+        line-height: .6rem;
+        padding: 0 .1rem;
+        font-size: .26rem;
+        &.title {
+          color: #666;
+          border-bottom: 1px solid #ddd;
+          font-weight: bold;
+          background: #f6f5f5;
+        }
+      }
+    }
+  }
+</style>

components/mobile/base/index.js

@@ -0,0 +1,3 @@
+import SearchHeader from './SearchHeader.vue'
+
+export { SearchHeader }

components/mobile/supplier/List.vue

@@ -1,32 +1,27 @@
 <template>
-  <div class="supplier-list mobile-content">
-    <div class="mobile-header">
-      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
-      <div class="search-content">
-        <input type="text" v-model="keyword" placeholder="请输入您要查找的供应商" @keyup.13="search">
-        <span @click="search">
-        <i class="iconfont icon-sousuo"></i>
-        </span>
+  <div>
+    <search-header @searchAction="search" :similarUrl="similarUrl" :type="'supplier'" :placeholder="'可通过型号/品牌/类目/名称查找供应商'"></search-header>
+    <div class="supplier-list mobile-content">
+      <ul v-if="listData && listData.length">
+        <li v-for="item in listData" @click="goSupplierDetail(item)">
+          <img v-if="item.isStore == 1" class="open" src="/images/mobile/supplier/is-open.png" alt="">
+          <span>{{item.enName}}</span>
+          <!--<img class="tag" src="/images/mobile/supplier/tag.png" alt="">-->
+          <i class="tag iconfont icon-xiangyou"></i>
+        </li>
+      </ul>
+      <div class="com-none-state" v-else>
+        <img src="/images/mobile/@2x/search-empty.png">
+        <p>抱歉，暂无搜索结果</p>
+        <nuxt-link to="/">返回首页</nuxt-link>
       </div>
+      <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
     </div>
-    <ul v-if="listData && listData.length">
-      <li v-for="item in listData" @click="goSupplierDetail(item)">
-        <img v-if="item.isStore == 1" class="open" src="/images/mobile/supplier/is-open.png" alt="">
-        <span>{{item.enName}}</span>
-        <!--<img class="tag" src="/images/mobile/supplier/tag.png" alt="">-->
-        <i class="tag iconfont icon-xiangyou"></i>
-      </li>
-    </ul>
-    <div class="com-none-state" v-else>
-      <img src="/images/mobile/@2x/search-empty.png">
-      <p>抱歉，暂无搜索结果</p>
-      <nuxt-link to="/">返回首页</nuxt-link>
-    </div>
-    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
   </div>
 </template>
 <script>
   import { RemindBox } from '~components/mobile/common'
+  import {SearchHeader} from '~components/mobile/base'
   export default {
     data () {
       return {
@@ -38,11 +33,14 @@
         isChange: false,
         isDataChange: false,
         remindText: '',
-        timeoutCount: 0
+        timeoutCount: 0,
+        similarUrl: '/search/product/similarKeywords',
+        field: null
       }
     },
     components: {
-      RemindBox
+      RemindBox,
+      SearchHeader
     },
     mounted: function () {
       this.$nextTick(() => {
@@ -90,9 +88,14 @@
         this.reloadData()
       },
       reloadData: function () {
-        this.$store.dispatch('supplier/getSupplierList', {keyword: this.keyword, page: this.page, size: this.size})
+        this.$store.dispatch('supplier/getSupplierList', {keyword: this.keyword, page: this.page, size: this.size, field: this.field})
       },
-      search: function () {
+      search: function (searchObj) {
+        if (searchObj) {
+          this.keyword = searchObj.keyword
+          console.log(searchObj)
+          this.field = searchObj.type || null
+        }
         this.page = 1
         this.isChange = true
         this.reloadData()

middleware/authenticated.js

@@ -2,6 +2,6 @@ export default function ({ isServer, store, req, redirect, route }) {
   // If nuxt generate, pass this middleware
   if (isServer && !req) return
   if (!store.state.option.user.logged) {
-    return redirect('/auth/login')
+    return redirect(`/auth/login?returnUrl=${'http://' + req.headers.host + route.fullPath}`)
   }
 }

pages/mobile/applyPurchase/list/businessOpportunity.vue

@@ -29,6 +29,7 @@
   import {Loading, EmptyStatus} from '~components/mobile/common'
   export default {
     layout: 'mobile',
+    middleware: 'authenticated',
     components: {
       SeekList,
       Loading,

pages/mobile/center/user/index.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="mobile-fix-content">
       <div class="seek-banner block-wrap">
-        <img src="/images/mobile/center/adv.png" alt="">
+        <img src="/images/mobile/center/user/adv.jpg" alt="">
       </div>
       <div class="block-wrap seek-operation">
         <p><i></i>我的求购</p>

pages/mobile/center/vendor/index.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="mobile-fix-content">
       <div class="seek-banner block-wrap">
-        <img src="/images/mobile/center/adv.png" alt="">
+        <img src="/images/mobile/center/vendor/adv.jpg" alt="">
       </div>
       <div class="block-wrap seek-operation">
         <p><i></i>产品管理</p>

pages/mobile/shop/index.vue

@@ -1,58 +1,62 @@
 <template>
-  <div class="shop mobile-content">
-    <div class="shop-top">
-      <p><i class="iconfont icon-dianpu1"></i><span>{{list.totalElements || 0}}</span>家店铺</p>
-      <span @click="onClick()">{{downName}} <i class="iconfont icon-arrow-down"></i></span>
-      <ul class="supdown" v-if="down">
-        <li @click="onDown('ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT')" v-show="downName !== '全部'">全部</li>
-        <li @click="onDown('ORIGINAL_FACTORY')" v-show="downName !== '原厂'">原厂</li>
-        <li @click="onDown('AGENCY')" v-show="downName !== '代理'">代理</li>
-        <li @click="onDown('DISTRIBUTION')" v-show="downName !== '经销'">经销</li>
-        <li @click="onDown('CONSIGNMENT')" v-show="downName !== '寄售'">寄售</li>
-      </ul>
-    </div>
-    <div v-if="searchLists && searchLists.length">
-      <div class="shop-list" v-for="item in searchLists" @click="goStoreDetail(item.uuid)">
-        <h3>{{item.storeName}}</h3>
-        <div class="list-item">
-          <div class="item-img">
-            <i :style="'background:url(' + isType(item.type) + ')no-repeat 0 0/.65rem .33rem;'"></i>
-            <img :src="item.logoUrl || '/images/component/default.png'">
-          </div>
-          <div class="list-item-phone">
-            <p>电话：<span>{{item.enterprise.enTel}}</span></p>
-            <p>传真：<span>{{item.enterprise.enFax}}</span></p>
-            <!--<p>商家介绍： <nuxt-link :to="'/mobile/merchantDescription/'+item.uuid">点击查看</nuxt-link></p>-->
-            <p>联系商家：<a @click="selectStoreInfo(item, $event)">点击查看</a></p>
-            <i class="iconfont icon-shoucang" :style="item.isFocus=='true'?'color:#ff7800':'color:#bbb'" @click="focusStore(item, $event)"></i>
+  <div>
+    <search-header @searchAction="onSearch" :placeholder="'可通过型号/品牌/类目/名称查找店铺'"></search-header>
+    <div class="shop mobile-content">
+      <div class="shop-top">
+        <p><i class="iconfont icon-dianpu1"></i><span>{{list.totalElements || 0}}</span>家店铺</p>
+        <span @click="onClick($event)">{{downName}} <i class="iconfont icon-arrow-down"></i></span>
+        <ul class="supdown" v-if="down">
+          <li @click="onDown('ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT', $event)" v-show="downName !== '全部'">全部</li>
+          <li @click="onDown('ORIGINAL_FACTORY', $event)" v-show="downName !== '原厂'">原厂</li>
+          <li @click="onDown('AGENCY', $event)" v-show="downName !== '代理'">代理</li>
+          <li @click="onDown('DISTRIBUTION', $event)" v-show="downName !== '经销'">经销</li>
+          <li @click="onDown('CONSIGNMENT', $event)" v-show="downName !== '寄售'">寄售</li>
+        </ul>
+      </div>
+      <div v-if="searchLists && searchLists.length">
+        <div class="shop-list" v-for="item in searchLists" @click="goStoreDetail(item.uuid)">
+          <h3>{{item.storeName}}</h3>
+          <div class="list-item">
+            <div class="item-img">
+              <i :style="'background:url(' + isType(item.type) + ')no-repeat 0 0/.65rem .33rem;'"></i>
+              <img :src="item.logoUrl || '/images/component/default.png'">
+            </div>
+            <div class="list-item-phone">
+              <p>电话：<span>{{item.enterprise.enTel}}</span></p>
+              <p>传真：<span>{{item.enterprise.enFax}}</span></p>
+              <!--<p>商家介绍： <nuxt-link :to="'/mobile/merchantDescription/'+item.uuid">点击查看</nuxt-link></p>-->
+              <p>联系商家：<a @click="selectStoreInfo(item, $event)">点击查看</a></p>
+              <i class="iconfont icon-shoucang" :style="item.isFocus=='true'?'color:#ff7800':'color:#bbb'" @click="focusStore(item, $event)"></i>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="com-none-state" v-else>
-      <img src="/images/mobile/@2x/search-empty.png">
-      <p>抱歉，暂无搜索结果</p>
-      <nuxt-link to="/">返回首页</nuxt-link>
-    </div>
-    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
-    <loading v-show="isSearchingMore"></loading>
-    <div class="mobile-modal" v-if="showStoreInfo">
-      <div class="mobile-modal-box">
-        <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
-        <div class="mobile-modal-content">
-          <div v-if="checkInfo(enterpriseInfo.enAddress || enterpriseInfo.address)">商家地址：{{enterpriseInfo.enAddress || enterpriseInfo.address}}</div>
-          <!--<div class="content-line link-url">在线咨询</div>-->
-          <div v-if="checkInfo(enterpriseInfo.enTel)">致电：<a :href="'tel:' + enterpriseInfo.enTel" target="_blank" class="content-line link-url">{{enterpriseInfo.enTel}}</a></div>
-          <div v-if="checkInfo(enterpriseInfo.enEmail)">邮件：<a :href="'mailto:' + enterpriseInfo.enEmail" target="_blank" class="content-line link-url">{{enterpriseInfo.enEmail}}</a></div>
+      <div class="com-none-state" v-else>
+        <img src="/images/mobile/@2x/search-empty.png">
+        <p>抱歉，暂无搜索结果</p>
+        <nuxt-link to="/">返回首页</nuxt-link>
+      </div>
+      <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
+      <loading v-show="isSearchingMore"></loading>
+      <div class="mobile-modal" v-if="showStoreInfo">
+        <div class="mobile-modal-box">
+          <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
+          <div class="mobile-modal-content">
+            <div v-if="checkInfo(enterpriseInfo.enAddress || enterpriseInfo.address)">商家地址：{{enterpriseInfo.enAddress || enterpriseInfo.address}}</div>
+            <!--<div class="content-line link-url">在线咨询</div>-->
+            <div v-if="checkInfo(enterpriseInfo.enTel)">致电：<a :href="'tel:' + enterpriseInfo.enTel" target="_blank" class="content-line link-url">{{enterpriseInfo.enTel}}</a></div>
+            <div v-if="checkInfo(enterpriseInfo.enEmail)">邮件：<a :href="'mailto:' + enterpriseInfo.enEmail" target="_blank" class="content-line link-url">{{enterpriseInfo.enEmail}}</a></div>
+          </div>
         </div>
       </div>
+      <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox"></login-box>
     </div>
-    <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox"></login-box>
   </div>
 </template>
 
 <script>
   import {RemindBox, Loading, LoginBox} from '~components/mobile/common'
+  import {SearchHeader} from '~components/mobile/base'
   export default {
     layout: 'mobileNoHeader',
     data () {
@@ -70,28 +74,30 @@
         isChange: false,
         showStoreInfo: false,
         enterpriseInfo: {},
-        showLoginBox: false
+        showLoginBox: false,
+        keyword: ''
       }
     },
     components: {
       RemindBox,
       Loading,
-      LoginBox
-    },
-    watch: {
-      '$route.query.keyword': {
-        handler: function (val) {
-          this.isChange = true
-          this.page = 1
-          this.type = 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT'
-          this.$store.dispatch('provider/findStoreListInMobil', { page: this.page, count: this.count, types: this.types, keyword: this.$route.query.keyword || null })
-        },
-        immediate: false
-      }
+      LoginBox,
+      SearchHeader
     },
+//    watch: {
+//      '$route.query.keyword': {
+//        handler: function (val) {
+//          this.isChange = true
+//          this.page = 1
+//          this.type = 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT'
+//          this.$store.dispatch('provider/findStoreListInMobil', { page: this.page, count: this.count, type: this.types, keyword: this.keyword || null })
+//        },
+//        immediate: false
+//      }
+//    },
     fetch ({ store, query }) {
       return Promise.all([
-        store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, types: 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT', keyword: query.keyword || null })
+        store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, type: 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT' })
       ])
     },
     computed: {
@@ -120,6 +126,9 @@
         window.addEventListener('scroll', function () {
           _this.scroll()
         }, false)
+        document.body.onclick = () => {
+          this.down = false
+        }
       })
     },
     methods: {
@@ -133,7 +142,7 @@
         if (!this.isSearchingMore) {
           this.page++
           this.isSearchingMore = true
-          this.$store.dispatch('provider/findStoreListInMobil', { page: this.page, count: this.count, types: this.types, keyword: this.$route.query.keyword || null })
+          this.$store.dispatch('provider/findStoreListInMobil', { page: this.page, count: this.count, type: this.types, keyword: this.keyword || null })
         }
       },
       isType (type) {
@@ -149,10 +158,16 @@
         }
         return bgurl
       },
-      onClick () {
+      onClick (e) {
+        if (e) {
+          e.stopPropagation()
+        }
         this.down = !this.down
       },
-      onDown (type) {
+      onDown (type, e) {
+        if (e) {
+          e.stopPropagation()
+        }
         this.isChange = true
         this.down = !this.down
         this.types = type
@@ -167,7 +182,7 @@
         } else if (type === 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT') {
           this.downName = '全部'
         }
-        this.$store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, types: type, keyword: this.$route.query.keyword || null })
+        this.$store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, type: type, keyword: this.keyword || null })
       },
       focusStore: function (item, $event) {
 //        item.isFocus = item.isFocus === 'false' ? 'true' : 'false'
@@ -202,6 +217,11 @@
       },
       checkInfo: function (str) {
         return str && str.trim() !== ''
+      },
+      onSearch: function (keyObj) {
+        this.keyword = keyObj.keyword
+        this.onDown('ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT')
+        this.down = false
       }
     }
   }

pages/mobile/supplier/index.vue

@@ -4,7 +4,7 @@
 <script>
   import { List } from '~components/mobile/supplier'
   export default {
-    layout: 'mobile',
+    layout: 'mobileNoHeader',
     fetch ({ store }) {
       return Promise.all([
         store.dispatch('supplier/getSupplierList', {page: 1, size: 10})

store/provider.js

@@ -106,7 +106,7 @@ export const actions = {
       })
   },
   findStoreListInMobil ({ commit }, params = {}) {
-    params.op = 'pageByType'
+    params.op = 'similar'
     commit('stores/REQUEST_STORE_LIST')
     return axios.get('/api/store-service/stores', { params })
       .then(response => {