mall-web-ssr/pages/mobile/center/user/collect/component/_key.vue

<template>
  <div class="mobile-center">
    <div class="com-mobile-header mobile-center-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p>器件收藏</p>
      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
    </div>
    <div class="mobile-fix-content mobile-centerfix-content" id="mobileFixContent">
      <div class="search-content search-content2" style="position: relative;padding-top: .25rem;">
        <input type="text" placeholder="请输入您要查找的型号" @input="onBrandChange" v-model="keyword" @keyup.13="searchComplist">
        <span @click.stop="searchComplist" >
          <i class="iconfont icon-sousuo"></i>
        </span>
        <ul class="similar brand-similar-list" v-show="showSimilarCodeList && keyword">
          <li v-for="sBrand in similarBrand" :key="sBrand.code" @click.stop="setBrand(sBrand.code)">{{sBrand.code}}</li>
        </ul>
      </div>
      <template v-if="compList && compList.length">
        <div class="lock_count" v-if="keyword">
          <p>搜索“<span>{{keyword}}</span>”，为您找到{{compCollectList.data.total}}条信息</p>
        </div>
        <ul>
          <li class="clearfix" :key="comp.componentid" v-for="comp in compList" @click="goUrl('/mobile/brand/componentDetail/' + comp.componentinfo.uuid)">
            <div class="fl">
              <p>品牌：<span v-text="comp.brand || '-'"></span></p>
              <p>物料名称：<span v-text="comp.kind || '-'"></span></p>
              <p>型号：<span v-text="comp.cmpCode || '-'"></span></p>
              <p>规格：<span v-text="comp.spec || '-'"></span></p>
              <p>产品描述：<span v-text="comp.description || '-'"></span></p>
            </div>
            <div class="vir"></div>
            <div class="fr">
              <i class="iconfont icon-shoucang" :style="comp.isFocus === 'true'?'color:#ff7800':'color: #ddd'" @click="cancelFocus(comp, $event)"></i>
              <a class="sa-pub" @click="compInquiry(comp, $event)">立即询价</a>
            </div>
          </li>
        </ul>
      </template>
      <empty-status :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'" v-else></empty-status>
    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
    <pull-up :fixId="'mobileFixContent'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
    <publish-supplier-seek :product="componentSeekObj" :showPublishBox="showPublishBox" @cancelAction="showPublishBox = false" @remindAction="onRemind"></publish-supplier-seek>
  </div>
</template>
<script>
  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
  import { PublishSupplierSeek } from '~components/mobile/applyPurchase'
  export default {
    middleware: 'authenticated',
    layout: 'mobileNoHeader',
    data () {
      return {
        keyword: '',
        showSimilarCodeList: false,
        similarBrand: '',
        remindText: '',
        timeoutCount: 0,
        page: 1,
        count: 10,
        isChange: false,
        compList: [],
        componentSeekObj: {
          standard: 1,
          cmpCode: '',
          pbranden: '',
          spec: null,
          kind: ''
        },
        showPublishBox: false
      }
    },
    watch: {
      'compCollectList.data': {
        handler: function (val) {
          if (val.content) {
            if (this.isChange) {
              this.compList = val.content
              this.isChange = false
            } else {
              this.compList = [...this.compList, ...val.content]
            }
          }
        },
        immediate: true
      }
    },
    created () {
      this.keyword = this.$route.params.key
      this.$store.dispatch('searchData/searchForListInMobile', { page: 1, count: 10, type: 'component', keyword: this.$route.params.key })
    },
    computed: {
      compCollectList () {
        return this.$store.state.searchData.searchList.lists
      },
      fetching () {
        return this.compCollectList.fetching
      },
      allPage () {
        return Math.floor(this.compCollectList.data.total / this.compCollectList.data.size) + Math.floor(this.compCollectList.data.total % this.compCollectList.data.size > 0 ? 1 : 0)
      },
      colList () {
        return this.$store.state.product.common.collectList.data
      }
    },
    components: {
      RemindBox,
      PullUp,
      PublishSupplierSeek,
      EmptyStatus
    },
    methods: {
      onBrandChange: function () {
        this.keyword = this.keyword.trim()
        if ((/[^\x00-\xff]/g).test(this.keyword)) {
          let chineseIndex = -1
          for (let i = 0; i < this.keyword.length; i++) {
            if ((/[^\x00-\xff]/g).test(this.keyword.charAt(i)) && !(/[\u4e00-\u9fa5]/).test(this.keyword.charAt(i))) {
              chineseIndex = i
              break
            }
          }
          if (chineseIndex > -1) {
            this.keyword = this.keyword.substring(0, chineseIndex)
          }
        } else if (this.keyword && this.baseUtils.getRealLen(this.keyword) > 50) {
          this.keyword = this.baseUtils.cutOutString(this.keyword, 50)
        } else {
          this.getSimilarBrand()
        }
      },
      getSimilarBrand: function () {
        if (this.keyword) {
          this.$http.get('/search/similarKeywords', {params: {keyword: this.keyword, type: 'component'}})
            .then(response => {
              this.similarBrand = response.data.result
              this.showSimilarCodeList = response.data.result.length > 0
            })
        } else {
          this.showSimilarCodeList = false
        }
      },
      setBrand: function (brand) {
        this.keyword = brand
        this.showSimilarCodeList = false
        this.searchComplist()
      },
      searchComplist () {
        if (this.keyword !== '') {
          this.showSimilarCodeList = false
          this.reloadList()
          this.showPublishBox = false
          this.page = 1
          this.isChange = true
        } else {
          this.remindText = '请输入您要查找的型号'
          this.timeoutCount++
        }
      },
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount++
      },
      cancelFocus: function (item, event) {
        event.stopPropagation()
        if (item.standard === 1) {
          if (!item.isFocus) {
            this.$http.post('/trade/collection/save', {cmpuuid: item.cmpUuId, kind: 2})
              .then(res => {
                if (res.data.code === 1) {
                  this.onRemind('收藏成功')
                } else {
                  this.onRemind(res.data.data || '收藏失败')
                }
              }, err => {
                this.onRemind(err.response.data || '收藏失败')
                console.log(err)
              })
          } else {
            this.$http.post('/trade/collection/delete', [item.focusId]).then(response => {
              if (response.data === 'success') {
                this.onRemind('取消收藏成功')
              } else {
                this.onRemind('取消收藏失败')
              }
            }, err => {
              console.log(err)
              this.onRemind(err.response.data || '取消收藏失败')
            })
          }
        } else {
          this.onRemind('非标物料暂不可收藏')
        }
      },
      reloadList: function () {
        this.$store.dispatch('searchData/searchForListInMobile', { page: this.page, count: this.count, type: 'component', keyword: this.keyword })
      },
      onPullUpAction: function () {
        this.page++
        this.reloadList()
      },
      compInquiry: function (item, e) {
        if (e) {
          e.stopPropagation()
        }
        this.componentSeekObj.cmpCode = item.cmpCode ? item.cmpCode : ''
        this.componentSeekObj.pbranden = item.brand ? item.brand : ''
        this.componentSeekObj.spec = item.spec ? item.spec : ''
        this.componentSeekObj.kind = item.kind ? item.kind : ''
        this.componentSeekObj = JSON.parse(JSON.stringify(this.componentSeekObj))
        this.showPublishBox = true
      },
      goUrl: function (url) {
        this.$router.push(url)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-fix-content {
    .similar {
      position: absolute;
      width: 6.5rem;
      max-height: 2.5rem;
      overflow-y: auto;
      z-index: 12;
      border: 1px solid #7e7e7e;
      border-radius: .05rem;
      top: .7rem;
      background: #fff;
      left: 0.1rem;
      right: 0;
      margin: 0 auto;
      li {
        height: .5rem;
        line-height: .5rem;
        font-size: .26rem;
        color: #999;
        padding-left: .19rem;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:focus, &:active, &:hover {
          background: #999;
          color: #fff;
        }
      }
    }
    .search-content {
      text-align: center;
      input {
        border: 1px solid #376ff3;
      }
      span{
        top:0;
      }
    }
    .lock_count{
      padding: .2rem;
      text-align: center;
      p{
        color:#666;
        span{
          color:#376ff3;
        }
      }
    }
    > ul {
      width: 7.1rem;
      margin: 0 auto;
      li {
        border-radius: .05rem;
        border: 1px solid #ccc;
        margin: .25rem 0 0 0;
        position: relative;
        background: #fff;
        .fl {
          width: 4.71rem;
          color: #666;
          padding: .25rem .1rem .25rem .23rem;
          p {
            font-size: .3rem;
            line-height: .42rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            span {
              color: #333;
            }
          }
        }
        .vir {
          position: absolute;
          top: .28rem;
          bottom: .28rem;
          right: 2.36rem;
          border-right: .01rem dashed #9f9f9f;
        }
        .fr {
          width: 2.34rem;
          text-align: center;
          margin-top: .3rem;
          i {
            display: block;
            color: #ff7800;
            font-size: .5rem;
            width: .6rem;
            height: .6rem;
            line-height: .6rem;
            text-align: center;
            margin: .29rem auto .1rem;
          }
          .sa-pub {
            display: block;
            width: 1.7rem;
            height: .47rem;
            line-height: .47rem;
            text-align: center;
            font-size: .26rem;
            color: #fff;
            background: #008bf7;
            margin: 0 auto;
            border-radius: .05rem;
          }
        }
      }
    }
  }
</style>