mall-web-ssr/pages/mobile/search/newkeycode.vue

<template>
 <div class="search-wrapper">
   <!-- 头部搜索 -->
   <div class="main-search-header">
     <div class="main-search-header-controll clearfix">
       <div style="display: flex;align-items: center;justify-content: space-between;width:100%;">
         <div :class="ChooseTop === 'component' ? 'active' : ''" @click="setChangelistHander('component')"><a>型号</a></div>
         <div :class="ChooseTop === 'kind' ? 'active' : ''" @click="setChangelistHander('kind')"><a>物料名称</a></div>
         <div :class="ChooseTop === 'store' ? 'active' : ''" @click="setChangelistHander('store')"><a>卖家</a></div>
         <div :class="ChooseTop === 'brand' ? 'active' : ''" @click="setChangelistHander('brand')"><a>品牌</a></div>
       </div>
     </div>
     <input type="text" id="search-box" v-model="keyword" @keyup.13="onClickSearchHander()" :placeholder="placeholder" @input="changeKeyWord()">
     <span @click="onClickSearchHander()">搜索</span>
     <a @click="cancelSearchHander()" style="margin-top: 0.14rem;display: inline-block;">取消</a>
   </div>
   <ul class="associate-list" v-show="associate.show" @click="associate.show = false">
     <li @click.stop="onAssociateClick(similar)" v-for="similar in similarKeywords.result">
       <i class="icon-sousuo iconfont"></i>
       <span>{{Getsimilar(similar)}}</span>
       <!--<span v-if="ChooseTop === 'component'">{{similar.code}}</span>-->
       <!--<span v-else-if="ChooseTop === 'product'">{{similar}}</span>-->
       <!--<span v-else-if="ChooseTop === 'store'">{{similar}}</span>-->
       <!--<span v-else-if="ChooseTop === 'brand'">{{similar.nameEn}}</span>-->
     </li>
     <li @click.stop="onClickTosearch(keyword)">查找“{{baseUtils.filterStringEllipsis(keyword, 30)}}”</li>
   </ul>
   <!-- 主体内容 -->
   <div class="main-search-wrapper">
     <div class="search-title">搜索“<span>{{displayKeyword}}</span>”，为您找到{{allTotal}}条信息</div>
     <template>
       <!-- 品牌精确查找 -->
       <template v-if="ChooseTop === 'brand' && brandIsAccurate">
         <div class="search-content" style="margin-bottom: 0.2rem;height: auto;position: static">
           <div class="middle">
             <div class="list clearfix" style="border-bottom: 1px solid #dcdcdc;padding-bottom: 0.1rem;line-height: 0.8rem;">
               <img :src="resourceList.brand && resourceList.brand.logoUrl || '/images/component/default.png'" class="pull-left">
               <div class="name pull-left overHidden" style="max-width: 5rem;">{{resourceList.brand && resourceList.brand.nameEn}}</div>
             </div>
             <div class="list">
               <div class="name">主打产品：</div>
               <div class="text">
                 {{resourceList.brand && resourceList.brand.series}}
               </div>
             </div>
             <div class="list">
               <div class="name">应用领域：</div>
               <div class="text">
                 {{resourceList.brand && resourceList.brand.application}}
               </div>
             </div>
             <div class="list">
               <div class="name">品牌介绍：</div>
               <div class="text">
                 {{resourceList.brand && resourceList.brand.brief}}
               </div>
             </div>
             <div class="list">
               <div class="name" style="color:#4290f7">官网地址：</div>
               <div class="text" style="width: 4.5rem">
                 <a :href="resourceList.brand && resourceList.brand.url" target="_blank">{{resourceList.brand && resourceList.brand.url}}</a>
               </div>
               <div class="pull-right lookMoreBtn" @click="showBrandDetails = true"  style="color:#4290f7">
                 查看更多
               </div>
             </div>
           </div>
         </div>
       </template>
       <div class="search-nav clearfix" v-if="brandIsAccurate || (!brandIsAccurate && ChooseTop !== 'brand')">
        <span class="pull-left" :class="navType === 'hasStore' ? 'active' : ''" @click="getReloadList('hasStore')">
          {{ChooseTop === 'component' ? '现货': '现货卖家'}}({{stockallTotal}})条
        </span>
         <span class="pull-left" :class="navType === 'noHasStore' ? 'active' : ''" @click="getReloadList('noHasStore')">
          {{ChooseTop === 'component' ? '期货': '期货卖家'}}({{futuresallTotal}})条</span>
       </div>
       <div class="search-content" id="main-search-wrapper" :class="{'searchContent2' : ChooseTop === 'brand' && brandIsAccurate, 'searchContent3': ChooseTop === 'brand' && !brandIsAccurate}">
         <!-- 品牌模糊查询 -->
         <template v-if="!brandIsAccurate && ChooseTop === 'brand'">
           <div class="middle" v-for="item in resourceList.content">
             <div class="list clearfix" style="border-bottom: 1px solid #dcdcdc;padding-bottom: 0.1rem;line-height: 0.8rem;" @click="goToBrandAccurate(item)">
               <img :src="item.logoUrl || '/images/component/default.png'" class="pull-left">
               <div class="name pull-left overHidden" style="max-width: 5rem;">{{item.nameEn}}</div>
               <div class="more_icon pull-right"><i class="iconfont icon-swiper-right"></i></div>
             </div>
             <div class="list">
               <div class="name">主打产品：</div>
               <div class="text">
                 {{item.series}}
               </div>
             </div>
             <div class="list">
               <div class="name">应用领域：</div>
               <div class="text">
                 {{item.application}}
               </div>
             </div>
             <div class="list">
               <div class="name">品牌介绍：</div>
               <div class="text">
                 {{item.brief}}
               </div>
             </div>
             <div class="list">
               <div class="name">官网地址：</div>
               <div class="text">
                 <a :href="item.url" target="_blank">{{item.url}}</a>
               </div>
             </div>
           </div>
         </template>
         <!-- /end 品牌模糊查询 -->
         <template v-if="brandIsAccurate || (!brandIsAccurate && ChooseTop !== 'brand')">
           <!-- 现货 -->
           <template v-if="navType === 'hasStore'">
             <!-- 型号结果 -->
             <template v-if="ChooseTop === 'component'">
               <div v-if="resourceList&&resourceList.stock&&resourceList.stock.content.length > 0">
                 <div v-for="(item, index) in resourceList.stock.content">
                   <!--@click="goProductDetail(item)"-->
                   <component-item :item="item" @cancatSeller="cancatSeller"></component-item>
                 </div>
               </div>
             </template>
             <!-- 卖家 物料名称 品牌-->
             <template v-else-if="ChooseTop === 'kind' || ChooseTop === 'store' || ChooseTop === 'brand'">
               <div v-if="resourceList&&resourceList.stock&&resourceList.stock.content.length > 0">
                 <div class="middle" v-for="(item, index) in resourceList.stock.content">
                   <nuxt-link :to="`/mobile/shop/${item.storeUuid}`" tag="div" class="list clearfix" style="border-bottom: 1px solid #dcdcdc;padding-bottom: 0.1rem">
                     <div class="name pull-left">{{item.enName}}</div>
                     <div class="more_icon pull-right"><i class="iconfont icon-swiper-right"></i></div>
                   </nuxt-link>
                   <div class="middle_bottom clearfix">
                     <div class="middle_bottom-left">
                       <img :src="item.storeLogoUrl || '/images/component/default.png'">
                     </div>
                     <div class="middle_bottom-left">
                       <div class="middle_bottom-leftitem clearfix">
                         <div class="bottom-title">电话</div><label style="float: left">：</label>
                         <div class="overHidden" style="width: 3.9rem">
                           <a :href="'tel:' + AlertstoreInfo.enterprise.enTel" target="_blank" class="content-line" style="color: #2d8cf0">{{item.enTel}}</a>
                         </div>
                       </div>
                       <!--<div class="middle_bottom-leftitem clearfix">-->
                         <!--<div class="bottom-title">邮箱</div><label style="float: left">：</label><div class="overHidden" style="width: 3.9rem">{{item.enEmail}}</div>-->
                       <!--</div>-->
                       <div class="middle_bottom-leftitem clearfix">
                         <div class="bottom-title">执照号</div><label style="float: left">：</label><div class="overHidden" style="width: 3.9rem">{{item.enBusinesscode}}</div>
                       </div>
                       <div class="middle_bottom-leftitem clearfix">
                         <div class="bottom-title">地址</div><label style="float: left">：</label><div style="width: 3.9rem;">{{item.enAddress}}</div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </template>
           </template>
           <!-- 期货 -->
           <template v-else>
             <!-- 型号结果 -->
             <template v-if="ChooseTop === 'component'">
               <div v-if="resourceList && resourceList.futures && resourceList.futures.content.length > 0">
                 <div class="middle" v-for="(item, index) in resourceList.futures.content">
                   <div class="list">
                     <div class="name">品牌：</div>
                     <div class="text overHidden">{{item.brandNameEn || item.brand || '—'}}</div>
                   </div>
                   <div class="list">
                     <div class="name">物料名称：</div>
                     <div class="text overHidden">{{item.kindNameCn || item.kind || '-'}}</div>
                   </div>
                   <div class="list">
                     <div class="name">型号：</div>
                     <div class="text overHidden">{{item.code || item.cmpCode || '-'}}</div>
                   </div>
                   <div class="list">
                     <div class="name">规格：</div>
                     <div class="text overHidden">{{item.spec || '-'}}</div>
                   </div>
                   <div class="list">
                     <div class="name">单位：</div>
                     <div class="text overHidden">{{item.unit || 'PCS'}}</div>
                   </div>
                   <div class="list clearfix" style="overflow: inherit;">
                     <div class="fl">
                       <div class="name">卖家：</div>
                       <div class="text overHidden" style="width: 4rem">{{item.storeName || item.enName || '-'}}</div>
                     </div>
                     <div class="pull-right sayPriBtn" @click="publish(item)">立即询价</div>
                   </div>
                 </div>
               </div>
             </template>
             <!-- 卖家 物料名称 品牌-->
             <template v-else-if="ChooseTop === 'kind' || ChooseTop === 'store' || ChooseTop === 'brand'">
               <div v-if="resourceList&&resourceList.futures &&resourceList.futures.content.length > 0">
                 <div class="middle" v-for="(item, index) in resourceList.futures.content" @click="goSupplierDetail(item)">
                   <div class="list clearfix" style="border-bottom: 1px solid #dcdcdc;padding-bottom: 0.1rem">
                     <div class="name pull-left">{{item.enName}}</div>
                     <div class="more_icon pull-right"><i class="iconfont icon-swiper-right"></i></div>
                   </div>
                   <div class="middle_bottom clearfix">
                     <div class="middle_bottom-left">
                       <img :src="item.storeLogoUrl || item.enLogoUrl || '/images/component/default.png'">
                     </div>
                     <div class="middle_bottom-left">
                       <div class="middle_bottom-leftitem clearfix">
                         <div class="bottom-title">电话</div><label style="float: left">：</label>
                         <div class="overHidden" style="width: 3.9rem">
                           <a :href="'tel:' + AlertstoreInfo.enterprise.enTel" target="_blank" class="content-line" style="color: #2d8cf0">{{item.enTel}}</a>
                         </div>
                       </div>
                       <!--<div class="middle_bottom-leftitem clearfix">-->
                         <!--<div class="bottom-title">邮箱</div><label style="float: left">：</label><div class="overHidden" style="width: 3.9rem">{{item.enEmail}}</div>-->
                       <!--</div>-->
                       <div class="middle_bottom-leftitem clearfix">
                         <div class="bottom-title">执照号</div><label style="float: left">：</label><div class="overHidden" style="width: 3.9rem">{{item.enBusinesscode}}</div>
                       </div>
                       <div class="middle_bottom-leftitem clearfix">
                         <div class="bottom-title">地址</div><label style="float: left">：</label><div style="width: 3.9rem;word-wrap:break-word;">{{item.enAddress}}</div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </template>
           </template>
         </template>
       </div>
     </template>
     <template v-if="allPage === 0">
       <div class="none-state">
         <img src="/images/mobile/@2x/search-empty.png">
         <p>暂无数据</p>
         <nuxt-link to="/">返回首页</nuxt-link>
       </div>
     </template>
   </div>
   <!-- 联系卖买家 -->
   <div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
     <div class="mobile-modal-box mobile-link-en">
       <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
       <div class="mobile-modal-content">
         <div v-if="AlertstoreInfo.enterprise.enTel"><span >电话：</span><a :href="'tel:' + AlertstoreInfo.enterprise.enTel" target="_blank" class="content-line link-url">{{AlertstoreInfo.enterprise.enTel}}</a></div>
         <div v-if="AlertstoreInfo.enterprise.enPhone"><span >手机：</span><a :href="'tel:' + AlertstoreInfo.enterprise.enPhone" target="_blank" class="content-line link-url">{{AlertstoreInfo.enterprise.enPhone}}</a></div>
         <div v-if="AlertstoreInfo.enterprise.enWeixin"><span >微信：</span><span class="content-line">{{AlertstoreInfo.enterprise.enWeixin}}</span></div>
         <div v-if="AlertstoreInfo.enterprise.enQQ"><span >Q&nbsp;Q：</span><span class="content-line">{{AlertstoreInfo.enterprise.enQQ}}</span></div>
         <div v-if="!empty">暂无联系方式</div>
       </div>
     </div>
   </div>
   <!-- 询价 -->
   <publish-supplier-seek :product="currentProduct" :showPublishBox="showPublishBox" @cancelAction="showPublishBox = false" @remindAction="setRemindText"></publish-supplier-seek>
    <!-- 查看品牌更多信息 -->
   <modal-wrapper :showModal="showBrandDetails" :title="currentBrandItem.nameEn" @closeAction="showBrandDetails=false">
     <div class="store-info" >
       <div class="store-description">
         <h4>主营产品</h4>
         <p class="content" v-if="currentBrandItem.series">
           {{currentBrandItem.series}}
         </p>
         <div class="com-none-state" v-else>
           <p>抱歉，暂无主营产品信息</p>
         </div>
       </div>
       <div class="store-description">
         <h4>应用领域</h4>
         <p class="content" v-if="currentBrandItem.application">
           {{currentBrandItem.application}}
         </p>
         <div class="com-none-state" v-else>
           <p>抱歉，暂无应用领域信息</p>
         </div>
       </div>
       <div class="store-description">
         <h4>品牌介绍</h4>
         <p class="content" v-if="currentBrandItem.brief">
           {{currentBrandItem.brief}}
         </p>
         <div class="com-none-state" v-else>
           <p>抱歉，暂无企业介绍</p>
         </div>
       </div>
       <div class="contact-info">
         <h4>联系我们</h4>
         <ul class="list-unstyled clearfix">
           <li>
             <div>电&nbsp;&nbsp;话：</div>
             <div v-if="currentBrandItem.userDefine.userTel"><a :href="'tel:' + currentBrandItem.userDefine.userTel" >{{currentBrandItem.userDefine.userTel}}</a></div>
             <div v-else><span>-</span></div>
           </li>
           <!-- <li>
              <div>店铺地址：</div>
              <div v-if="store.enterprise.address">{{store.enterprise.address}}</div>
              <div v-else><span>-</span></div>
            </li>-->
         </ul>
       </div>
     </div>
   </modal-wrapper>
   <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
   <!--<loading v-if="isSearchSearchingMore"></loading>-->
   <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox" :url="url"></login-box>
   <pull-up v-if="addShowPullup" :fixId="'main-search-wrapper'" :searchMore="isSearchSearchingMore" :allPage="allPage" :page="page" @pullUpAction="onPullUp" :FixedEl="true"></pull-up>
 </div>
</template>

<script>
  import { PublishSupplierSeek } from '~components/mobile/applyPurchase'
  import { RemindBox, Loading, LoginBox, PullUp } from '~components/mobile/common'
  import { ModalWrapper } from '~components/mobile/base'
  import axios from '~plugins/axios'
  import componentItem from '~components/mobile/search/componet-item'
  export default {
    layout: 'mobile',
    data() {
      return {
        collectResult: '', // 提示性文字
        timeoutCount: 0, // 弹出框计时数
        isSearchSearchingMore: false, // 是否正在请求数据
        showLoginBox: false, // 是否显示登录弹窗
        url: '', // 登录后跳转回来的地址
        keyword: '', // 关键字搜索
        showStoreInfo: false, // 联系买卖家弹窗
        AlertstoreInfo: { // 买卖家弹窗信息
          enterprise: {}
        },
        navType: 'hasStore', // 现货 期货
        ChooseTop: 'component', // 型号， 物料名称， 卖家， 品牌
        page: 1,
        currentProduct: {},
        currentBrandItem: { // 查看品牌详情信息
          userDefine: {}
        }, // 存放当前点击的品牌内容
        showBrandDetails: false, // 是否展示品牌详情
        brandIsAccurate: false, // 品牌是否处于精确查找
        showPublishBox: false, // 询价弹窗
        resourceList: [],
        futuresallTotal: 0,
        stockallTotal: 0,
        allPage: 0, // 总页数
        allTotal: 0, // 总条数
        associate: {
          show: false
        },
        displayKeyword: '',
        addShowPullup: true
      }
    },
    computed: {
      getNowChooseType() {
        if (this.ChooseTop === 'component') {
          return '型号'
        } else if (this.ChooseTop === 'kind') {
          return '物料'
        } else if (this.ChooseTop === 'store') {
          return '卖家'
        } else if (this.ChooseTop === 'brand') {
          return '品牌'
        }
      },
      empty () {
        return this.checkInfo(this.AlertstoreInfo.enterprise.enTel) || this.checkInfo(this.AlertstoreInfo.enterprise.enPhone) || this.checkInfo(this.AlertstoreInfo.enterprise.enWeixin) || this.checkInfo(this.AlertstoreInfo.enterprise.enQQ)
      },
      placeholder() {
        if (this.ChooseTop === 'component') {
          return '请输入您要搜索的型号'
        } else if (this.ChooseTop === 'kind') {
          return '请输入您要搜索的物料名称'
        } else if (this.ChooseTop === 'store') {
          return '请输入您要搜索的卖家名称'
        } else if (this.ChooseTop === 'brand') {
          return '请输入您要搜索的品牌'
        }
      },
      similarKeywords () {
        return this.$store.state.search.keywords.data
      }
    },
    async asyncData({store, route}) {
      let ChooseTop = route.query.choosetype || 'component'
      let keyword = route.query.keyword || ''
      let brandIsAccurate = false
      let { data } = await axios.get(`/search/201819`, {params: {count: 10, page: 1, keyword: keyword, type: ChooseTop}})
      let allTotal = 0
      let futuresallTotal = data.futures ? data.futures.total : 0
      let stockallTotal = data.stock ? data.stock.total : 0
      let allPage = 0
      let currentBrandItem = {
        userDefine: {}
      }
      if (ChooseTop === 'brand') {
        if (data.futures && data.stock) {
          // 品牌查询 精准查找
          brandIsAccurate = true
          currentBrandItem = data.brand
          // 则总条数等于 现货 + 期货
          allTotal = stockallTotal + futuresallTotal
          allPage = Math.ceil(data.stock.total / 10)
        } else {
          allTotal = data.total || 0
          allPage = Math.ceil(data.total / 10)
        }
      } else {
        // 其他情况
        allTotal = stockallTotal + futuresallTotal
        allPage = Math.ceil(data.stock.total / 10)
      }
      return {
        ChooseTop: ChooseTop,
        keyword: keyword,
        resourceList: data,
        allPage: allPage,
        stockallTotal: stockallTotal,
        futuresallTotal: futuresallTotal,
        allTotal: allTotal,
        brandIsAccurate: brandIsAccurate,
        currentBrandItem: currentBrandItem,
        displayKeyword: keyword
      }
    },
    methods: {
      onPullUp() {
        this.page++
        this.ReloadList()
      },
      // 搜索点击事件
      onClickSearchHander() {
        console.log(this.keyword)
        if (!this.keyword) {this.setRemindText('请输入关键字')}
        this.$router.push(`/mobile/search/newkeycode?choosetype=${this.ChooseTop}&keyword=${this.keyword}`)
        // this.setChangelistHander(this.ChooseTop)
        // window.location.href =
      },
      // 现货 期货切换
      getReloadList(_tp) {
        this.navType = _tp
        this.page = 1
        this.resourceList.futures.content = []
        this.resourceList.stock.content = []
        this.ReloadList()
      },
      // 刷新数据
      ReloadList(param) {
        // 如果有值，则代表 是品牌 模糊到精确
        // 这里发送数据请求
        this.isSearchSearchingMore = true
        this.$http.get(`/search/201819`, {params: {count: 10, page: this.page, keyword: this.displayKeyword, type: this.ChooseTop}}).then(res => {
          this.isSearchSearchingMore = false
          if (!this.brandIsAccurate && this.ChooseTop === 'brand') {
            // 品牌模糊查询
            this.resourceList.content = [...this.resourceList.content, ...res.data.content]
            return
          }
          if (this.navType === 'hasStore') {
            this.resourceList.stock.content = [...this.resourceList.stock.content, ...res.data.stock.content]
            this.allPage = Math.ceil(res.data.stock.total / 10) || 0
          } else {
            this.resourceList.futures.content = [...this.resourceList.futures.content, ...res.data.futures.content]
            this.allPage = Math.ceil(res.data.futures.total / 10) || 0
          }
        }, err => {
          this.isSearchSearchingMore = false
        })
      },
      // 模糊品牌查询结果点击
      goToBrandAccurate(item) {
        this.currentBrandItem = item
        this.keyword = item.nameEn
        this.setChangelistHander(this.ChooseTop)
      },
      // 取消返回事件
      cancelSearchHander() {
        this.$router.replace('/')
      },
      // 购买 加入购物车
      buy: function (item, flag, e) {
        this.baseUtils.buyOrCar(flag, e, this, item, '/mobile/center/user/pay/')
      },
      // 联系买卖家
      cancatSeller(item) {
        this.$http.get(`/api/store-service/stores?uuid=${item.storeid}`).then(res => {
          this.AlertstoreInfo = res.data
          this.showStoreInfo = true
        })
      },
      // 切换顶部一级标题
      setChangelistHander(str) {
        this.addShowPullup = false
        if (document.querySelector('#main-search-wrapper')) document.querySelector('#main-search-wrapper').scrollTop = 0
        this.ChooseTop = str
        this.page = 1
        if (!this.keyword) { this.setRemindText('请输入关键字') }
        this.displayKeyword = this.keyword
        this.brandIsAccurate = false
        this.isSearchSearchingMore = true
        this.$http.get(`/search/201819`, {params: {count: 10, page: 1, keyword: this.keyword, type: this.ChooseTop}}).then(data => {
          data = data.data
          this.resourceList = data
          this.futuresallTotal = data.futures ? data.futures.total : 0
          this.stockallTotal = data.stock ? data.stock.total : 0
          let allTotal = 0 // 总条数
          if (this.ChooseTop === 'brand') {
            if (data.futures && data.stock) {
              // 品牌查询 精准查找
              this.brandIsAccurate = true
              // 则总条数等于 现货 + 期货
              allTotal = this.stockallTotal + this.futuresallTotal
              this.currentBrandItem = data.brand
            } else {
              allTotal = data.total || 0
            }
          } else {
            // 其他情况
            allTotal = this.stockallTotal + this.futuresallTotal
          }
          this.allTotal = allTotal
          this.isSearchSearchingMore = false
          if (!this.brandIsAccurate && this.ChooseTop === 'brand') {
            // 品牌 模糊查找
            this.allPage = Math.ceil(this.resourceList.total / 10) || 0
          } else {
            if (this.navType === 'hasStore') {
              this.allPage = this.resourceList.stock && Math.ceil(this.resourceList.stock.total / 10) || 0
            } else {
              this.allPage = this.resourceList.futures && Math.ceil(this.resourceList.futures.total / 10) || 0
            }
          }
          this.associate.show = false
          this.addShowPullup = true
        })
      },
      // 供应商详情
      goSupplierDetail: function (item) {
        this.$http.get('/vendor/introduction/product/count', {params: {vendUU: item.enUU}})
          .then(response => {
            if (response.data.success && response.data.count > 0) {
              this.$router.push(`/mobile/supplier/detail/${item.enUU}?isStore=${item.isStore}`)
            } else {
              this.setRemindText('供应商正在完善产品信息，暂时不能查看更多。')
            }
          })
      },
      checkInfo: function (str) {
        return str && str.trim() !== ''
      },
      publish: function (product) {
        if (this.user.logged) {
          let item = {
            cmpCode: product.cmpCode,
            pbranden: product.brand,
            brand: product.brand,
            spec: product.spec,
            kind: product.cmpCode
          }
          console.log(item)
          console.log(product)
          this.currentProduct = item
          this.showPublishBox = true
        } else {
          this.url = this.$route.fullPath
          this.showLoginBox = true
        }
      },
      setRemindText(str) {
        this.timeoutCount++
        this.collectResult = str
      },
      onAssociateClick (word) {
        if (this.ChooseTop === 'component') {
          this.keyword = word.code
        } else if (this.ChooseTop === 'kind') {
          this.keyword = word.nameCn
        } else if (this.ChooseTop === 'store') {
          this.keyword = word.name
        } else if (this.ChooseTop === 'brand') {
          this.keyword = word.nameEn
        }
        this.associate.show = false
        this.setChangelistHander(this.ChooseTop)
      },
      Getsimilar(word) {
        if (this.ChooseTop === 'component') {
          return word.code
        } else if (this.ChooseTop === 'kind') {
          return word.nameCn
        } else if (this.ChooseTop === 'store') {
          return word.name
        } else if (this.ChooseTop === 'brand') {
          return word.nameEn
        }
      },
      onChange () {
        if (!this.keyword) {
          this.associate.show = false
          this.$store.dispatch('resetSearchKeywords')
        } else {
          this.searchKeywords()
        }
      },
      changeKeyWord() {
        this.associate.show = true
        this.onChange()
      },
      searchKeywords () {
        this.$store.dispatch('searchKeywords', {keyword: this.keyword, type: this.ChooseTop})
      },
      onClickTosearch(str) {
        this.keyword = str
        this.setChangelistHander(this.ChooseTop)
      }
    },
    components: {
      RemindBox,
      Loading,
      LoginBox,
      PublishSupplierSeek,
      ModalWrapper,
      PullUp,
      componentItem
    },
    watch: {
      '$route' (to, from) {
        this.keyword = to.query.keyword
        this.displayKeyword = to.query.keyword
        this.setChangelistHander(to.query.choosetype)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @mixin overFlowHidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @mixin lineHeight($value) {
    height: $value;
    line-height: $value;
  }
  .search-wrapper {
    background: #f1f3f6;
    width: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    .main-search-header {
      position: absolute;
      background: #3e82f5;
      padding: 0.15rem 0;
      margin-top: 0;
      z-index: 1;
      width: 100%;
      input {
        width: 5.1rem;
        height: .58rem;
        line-height: .58rem;
        font-size: .26rem;
        color: #333;
        margin-left: 0.11rem;
        /*padding-left: 1.26rem;*/
        border: .04rem solid #fff;
        background: #fff;
        outline: none;
        border-radius: 0;
        float: left;
        /*margin-top: .12rem;*/
        -webkit-appearance: none;
        border-top-left-radius: .14rem;
        border-bottom-left-radius: .14rem;
      }
      span {
        display: inline-block;
        width: 1.02rem;
        text-align: center;
        height: .58rem;
        line-height: .58rem;
        color: #366df3;
        font-size: .28rem;
        margin-left: .02rem;
        border-top-right-radius: .14rem;
        border-bottom-right-radius: .14rem;
        background: #fff;
        float: left;
        /*margin-top: .12rem;*/
      }
      a {
        font-size: .28rem;
        color: #fff;
        margin-left: .2rem;
      }
      .main-search-header-controll {
        width: 5.48rem;
        margin-left: 0.21rem;
        transform: translateY(1px);
        div {
          div {
            font-size: 0.28rem;
            color: #fff;
            margin: 0;
            border-radius: 0;
            padding: 0.1rem 0.1rem;
            &.active {
              background: #fff;
              border-top-left-radius: 0.05rem;
              border-top-right-radius: 0.05rem;
            }
            &.active a {
              color: #2d8cf0;
            }
            a {
              font-size: .26rem;
              color: #f1f1f1;
              margin-left: 0 !important;
            }
          }
       }
      }
    }
    .main-search-wrapper {
      margin-top: 1.71rem;
    }
    .search-title {
      font-size: 0.26rem;
      text-align: center;
      color: #999;
      margin: 0 auto 0.2rem;
      span {
        color: #4290f7
      }
    }
    .search-nav {
      background: #fff;
      @include lineHeight(1rem);
      padding: 0 0.2rem;
      position: relative;
      z-index: 10;
      span {
        width: 50%;
        color: #666;
        font-size: 0.28rem;
        text-align: center;
        border-bottom: 0.04rem solid #dcdcdc;
        @include lineHeight(0.7rem);
        margin-top: 0.15rem;
        &.active {
          border-bottom: 0.04rem solid #4290f7;
          color: #4290f7
        }
      }
    }
    .search-content {
      padding-top: 0;
      top: 3.41rem;
      /*height: calc(100vh - 3.41rem);*/
      overflow-y: auto;
      position: absolute;
      width: 100%;
      bottom: 0;
      .middle {
        background: #fff;
        padding: 0.2rem;
        .lookMoreBtn {
          font-size: 0.28rem;
          color: #2d8cf0
        }
        .more_icon {
          font-size: 0.34rem;
          color: #999;
        }
        .order-tag {
          display: inline-block;
          font-size: .18rem;
          color: #fff;
          font-weight: bold;
          background: #ee1717;
          height: .27rem;
          width: .27rem;
          line-height: .27rem;
          text-align: center;
          border-radius: .05rem;
          position: relative;
          top: -.05rem;
          margin-right: .05rem;
          &.reserve-tag {
            background: #07bb1c;
          }
        }
        text-align: left;
        background: #fff;
        /*border-radius: 5px;*/
        margin-bottom: 0.2rem;
        .overHidden {
          @include overFlowHidden()
        }
        .pms {
          color: #f57710;
          border: 1px solid #f57710;
          border-radius: 0.4rem;
          background: #fff;
          font-size: 0.24rem;
          height: 0.4rem;
          line-height: 0.4rem;
          width: 0.8rem;
          text-align: center;
        }
        .list {
          @include overFlowHidden();
          width: 100%;
          .left {
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .textinfo {
            font-size: 0.18rem;
            margin-left: 0.1rem;
            display: inline-block;
            background: #3f84f6;
            color: #fff;
            font-weight: bold;
            border-radius: 3px;
            width: 0.8rem;
            height: 0.32rem;
            line-height: 0.32rem;
            text-align: center
          }
          .button {
            font-size: 0.3rem;
            color: #1a58dd;
            width: 0.92rem;
            height: 0.43rem;
            line-height: 0.43rem;
            text-align: center;
            border-radius: 5px;
            border:1px solid #1a58dd;
            display: inline-block;
            margin-right: 0.2rem;
          }
          margin-bottom: 0.18rem;
          &::after{
            clear: both;
            display: block;
            content: ' ';
            visibility: hidden;
            zoom: 1;
          }
          .fl {
            width: 3.5rem;
            float: left;
          }
          .fr {
            text-align: left;
            width: 2.6rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          &.list-long {
            .fl {
              width: 100% !important;
            }
          }
          .name {
            color: #666;
            font-size: 0.28rem;
            display: inline-block;
          }
          .text {
            display: inline-block;
            color: #333;
            font-size: 0.28rem;
            vertical-align: top;
            width: 5.5rem;
            @include overFlowHidden();
          }
          .table {
            width: 5.85rem;
            margin-bottom: 0;
            margin-top: 0;
            margin-left: 0.1rem;
            li {
              height: 0.43rem;
              line-height: 0.43rem;
              border-left: .01rem solid #c5c5c5;
              font-size: .28rem;
              &::after {
                clear: both;
                display: block;
                content: ' ';
                visibility: hidden;
                zoom: 1;
              }
              div {
                text-align: center;
                width: 50%;
                float: left;
                border-right: .01rem solid #c5c5c5;
                border-bottom: .01rem solid #c5c5c5;
              }
              &:nth-child(odd) {
                background: #ddd;
                color: #333;
                font-size: 0.28rem;
              }
              &:nth-child(even) {
                background: #fcfcfc;
                color: #333;
                font-size: 0.28rem;
              }
              &:nth-last-of-type(1){
                color: #f31919;
              }
              &.title {
                font-size: 0.28rem;
                color: #333;
              }
            }
          }
          .pull-right {
            div {
              color: #3f84f6;
              font-size: 0.28rem;
              border-radius: 0.07rem;
              border: 1px solid #3f84f6;
              background: #fff;
              width: 2rem;
              line-height: 0.56rem;
              height: 0.56rem;
              text-align: center;
            }
            div:last-child {
              margin-left: 0.2rem;
              color: #fff;
              background: #3f84f6;
            }
          }
          i {
            &.icon-pdf {
              color: #929292;
              font-size: 0.4rem;
            }
            &.active {
              color: #eb062b;
            }
          }
          .cancat {
            height: 0.56rem;
            line-height: 0.56rem;
            border: 1px solid #3f84f6;
            color: #3f84f6;
            font-size: 0.26rem;
            text-align: center;
            border-radius: 3px;
            padding: 0 0.1rem;
            overflow: hidden;
            width: auto;
          }
          img.pull-left {
            width: 1.21rem;
            height: 0.8rem;
            border: 1px solid #dcdcdc;
            border-radius: 0.07rem;
            margin-top: 0;
          }
        }
        .sayPriBtn {
          width: 2rem;
          @include lineHeight(0.54rem);
          color: #fff;
          font-size: 0.28rem;
          background: #3f84f6;
          border-radius: 3px;
          text-align: center;
          margin-top: -0.1rem;
        }
        .middle_bottom {
          .middle_bottom-left {
            float: left;
            img {
              width: 1.21rem;
              height: 1.21rem;
              border: 1px solid #4290f7;
              border-radius: 0.07rem;
              overflow: hidden;
            }
            div.middle_bottom-leftitem {
              line-height: 0.5rem;
              font-size: 0.28rem;
              div {
                display: inline-block;
                color: #666;
                height: 100%;
                float: left;
                &.bottom-title {
                  display: inline-block;
                  text-align: justify;
                  vertical-align: top;
                  width: 1.5rem;
                  height: 0.5rem;
                  &::after {
                    content: "";
                    display: inline-block;
                    width: 100%;
                    overflow: hidden;
                    height: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
    .searchContent2 {
      /*height: calc(100vh - 7.3rem);*/
      top: 7.3rem;
    }
    .searchContent3 {
      /*height: calc(100vh - 2.25rem);*/
      top: 2.25rem;
    }
    .store-info {
      background: #f7f7f7;
      h4{
        width: 100%;
        text-align: left;
        font-size: 0.3rem;
        line-height: 0.6rem;
        height: 0.6rem;
        letter-spacing: 0px;
        color: #333;
        font-weight: normal;
        border-bottom: 1px solid #efeded;
        padding-left: 0.11rem;
        &:before{
          content: '';
          display: inline-block;
          width: 0.08rem;
          height: 0.26rem;
          background-color: #145dee;
          margin-right: 0.13rem;
          position: relative;
          top: 0.02rem;
        }
      }
      .contact-info{
        background: #fff;
        margin: .2rem auto;
        border-radius: .1rem;
        ul{
          padding: 0.22rem 0rem;
          li{
            div{
              float: left;
              font-size: .28rem;
              color: #666;
              line-height: .53rem;
              width:80%;
              text-align: left;
              &:first-child{
                width: 20%;
                padding-left: 0.36rem;
                text-align: justify;
              }
              a{
                color: #145dee;
              }
              .click-tel, .click-phone{
                color: #f44336;
              }
            }
            /* &:last-child{
               div{
                 width: 74%;
                 padding-right:.34rem;
                 word-wrap: break-word;
                 &:first-child{
                   text-align: left;
                   padding: 0rem 0rem 0rem .36rem;
                   width: 26%;
                 }
               }
             }*/
          }
        }
      }
      .store-description{
        background: #fff;
        /*width: 6.96rem;*/
        margin: 0 auto .2rem;
        border-radius: .1rem;
        .content {
          text-indent:2em;
          background: #fff;
          margin: .2rem auto 0;
          padding: .04rem .34rem .4rem .34rem;
          width: 100%;
          font-size: .28rem;
          color: #666;
          text-align: left;
          height: 95%;
          /*box-shadow: 0 .03rem .01rem 0 #cdcbcb96;*/
          line-height: .5rem;
          word-break: break-all;
        }
      }
    }
    .none-state{
      text-align: center;
      padding:1.5rem 0;
      background: #fff;
      margin-top:.1rem;
      width:100%;
      img{
        margin:0 auto;
        width: 4.08rem;
        height: 2.62rem;
      }
      p {
        font-size: .32rem;
        color: #999;
        margin: 1.19rem 0 0 0;
      }
      a {
        display: block;
        font-size: .28rem;
        color: #fff;
        width: 1.88rem;
        height: .54rem;
        line-height: .54rem;
        background: #418bf6;
        margin: .7rem auto 0;
        border-radius: .05rem;
      }
    }
    .associate-list {
      position: absolute;
      width: 100%;
      background: #fff;
      top: 1.4rem;
      border: 1px solid #dcdcdc;
      z-index: 100;
      height: 100%;
      left: 0;
      bottom: 0;
      right: 0;
      li {
        height: 0.7rem;
        line-height: .9rem;
        margin: 0 .45rem;
        border-bottom: .04rem solid #f1f0f0;
        @include overFlowHidden();
        i {
          font-size: .36rem;
          margin-right: .24rem;
          color: #ddd;
        }
        span {
          color: #999;
          font-size: .28rem;
          line-height: .58rem;
          height: .58rem;
          display: inline-block;
        }
        &:active, &:hover {
          background: #eee;
        }
        &:last-child {
          text-align: center;
          font-size: .3rem;
          color: #3976f4;
          border-bottom: none;
          &:active, &:hover {
            background: #fff;
          }
        }
      }
    }
  }
</style>