mall-web-ssr/components/mobile/Home.vue

<template>
  <div class="home">
    <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>商家地址：深圳市南山区英唐大厦6楼</div>
          <div class="content-line link-url">在线咨询</div>
          <div>致电：<a href="tel:0755-96586323" class="content-line link-url">0755-96586323</a></div>
          <div>邮件：<a href="mailto:yrsc@usoftchina.com" class="content-line link-url">yrsc@usoftchina.com</a></div>
        </div>
      </div>
    </div>
    <div v-if="!showMainSearch">
      <div class="home-header" :style="'background:url(' + bgUrl + ')no-repeat center center/100% 6.14rem'">
        <div class="home-search">
          <!--<ul>-->
          <!--<li :class="activeType=='model'?'active':''" @click="activeType='model'"><span>型号</span></li>-->
          <!--<li :class="activeType=='brand'?'active':''" @click="activeType='brand'"><span>品牌</span></li>-->
          <!--<li :class="activeType=='shops'?'active':''" @click="activeType='shops'"><span>商家</span></li>-->
          <!--</ul>-->
          <div class="home-input">
            <input type="text" placeholder="请输入您要查找的型号、品牌或商家" v-model="keyword"
                   @click="onHomeSearchClick()"/>
            <span @click="onSearch()"><i class="iconfont icon-sousuo"></i></span>
          </div>
          <!--<p style="color:#e45803;line-height:.4rem;margin-top:.1rem;width:4.2rem;margin-left:1rem;">搜品牌、搜现货 、搜好店 、搜规格书 就上优软商城</p>-->
        </div>
      </div>
      <div class="home-main">
        <nuxt-link to="/mobile/shop" class="home-main-content">
          <div>
            <img src="/images/mobile/@2x/home/shopbrand@2x.png">
          </div>
          <p>店铺列表</p>
        </nuxt-link>
        <nuxt-link to="/mobile/user" class="home-main-content">
          <div>
            <img src="/images/mobile/@2x/home/storebrand@2x.png">
          </div>
          <p>我的收藏</p>
        </nuxt-link>
        <a @click="showStoreInfo = true" class="home-main-content">
          <div>
            <img src="/images/mobile/@2x/home/phonebrand@2x.png">
          </div>
          <p>联系我们</p>
        </a>
        <a class="home-main-content">
          <div>
            <i class="icon-pinpai iconfont"></i>
          </div>
          <h2>
            {{numbrand[0]}}
          </h2>
          <p>品牌</p>
        </a>
        <a class="home-main-content">
          <div>
            <i class="icon-xinghao iconfont"></i>
          </div>
          <h2>
            {{numbrand[1]}}
          </h2>
          <p>型号</p>
        </a>
        <a class="home-main-content">
          <div>
            <i class="icon-biaoguigeshuomingshu iconfont"></i>
          </div>
          <h2>
            {{numbrand[2]}}
          </h2>
          <p>规格书</p>
        </a>
      </div>
    </div>
    <div class="main-search" v-else>
      <div class="main-search-header">
        <input type="text" v-model="keyword" placeholder="请输入您要查找的型号或品牌" @keyup.13="onSearch()" autofocus>
        <span @click="onSearch()">搜索</span>
      </div>
      <ul class="associate-list" v-show="associate.show">
        <li @click="onAssociateClick(similar.code)" v-for="similar in similarKeywords.all">
          <i class="icon-sousuo iconfont"></i>
          <span>{{similar.code}}</span>
        </li>
        <li>查找“{{keyword}}”</li>
      </ul>
      <div class="hot-history" v-show="!associate.show">
        <div class="search-history">
          <p>历史搜索</p>
          <ul>
            <li v-for="item in searchHistory" @click="onSearch(item.keyword)">
              <a>{{item.keyword}}</a>
            </li>
          </ul>
        </div>
        <div class="search-hot">
          <img src="/images/mobile/@2x/home/hot-search.png" alt="">
          <ul>
            <li v-for="hotword in hotwords">
              <nuxt-link :to="hotword.url" v-text="hotword.name"></nuxt-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data () {
      return {
        keyword: '',
        activeType: 'model',
        showMainSearch: false,
        showStoreInfo: false,
        isMore: false,
        isShow: false,
        len: 0,
        bgUrl: '/images/mobile/@2x/home/background@2x.png',
        associate: {
          show: false
        }
      }
    },
    props: {
      hotwords: {
        type: Array,
        default () {
          return [
            {name: 'DSP1-DC5V-F', url: '/mobile/brand/componentDetail/0900300200000669'},
            {name: 'Vishay', url: '/mobile/brand/30327265e42a871be050007f01003d96'},
            {name: 'Panasonic', url: '/mobile/brand/30327265e47d871be050007f01003d96'}
          ]
        }
      }
    },
//    filters: {
//      similarFilter: function (key) {
//        let keyword = this.keyword
//        let index = key.indexOf(keyword)
//        if (index !== -1) {
//          key = key.substring(0, index) + '<strong>' + key.sub(index, keyword.length) + '</strong>' + key.substring(index + keyword.length, key.length)
//        }
//        return key
//      }
//    },
    methods: {
      onHomeSearchClick () {
        this.showMainSearch = true
        this.$store.dispatch('searchData/getSearchHistory')
      },
      onBlur () {
        this.showMainSearch = false
      },
      onSearch (key) {
        if (key && key !== '') {
          this.keyword = key
        }
        if (this.keyword) {
          this.associate.show = false
          this.$router.push({path: '/mobile/search?w=' + encodeURIComponent(this.keyword)})
        }
      },
      matNumber (num) {
        if (num > 99999999) {
          this.isShow = true
          let str2 = num.toString()
          num = Math.floor(num / 100000000)
          if (parseInt(str2.charAt(str2.length - 8)) > 8) {
            num = num + 1
          }
          num += '亿'
        }
        if (num > 9999) {
          this.isMore = true
          let str = num.toString()
          num = Math.floor(num / 10000)
          if (parseInt(str.charAt(str.length - 4)) > 4) {
            num = num + 1
          }
          num += '万'
        } else {
          num += '个'
        }
        return num
      },
      forNum (numbers) {
        let num = []
        for (let i = 0; i < numbers.length; i++) {
          num.push(this.matNumber(numbers[i].count))
        }
        return num
      },
      loadCounts () {
        this.$store.dispatch('loadProductCounts', { _status: 'actived' })
      },
      onChange () {
        if (!this.keyword) {
          this.associate.show = false
          this.$store.dispatch('resetSearchKeywords')
        } else {
          this.searchKeywords()
        }
        if (this.click_flag) {
          this.associate.show = false
        }
      },
      searchKeywords () {
        this.associate.show = true
        this.$store.dispatch('searchKeywords', { keyword: this.keyword })
      },
      onAssociateClick (word) {
        this.keyword = word
        this.onSearch()
      }
    },
    created () {
      this.$store.dispatch('resetSearchKeywords')
    },
    watch: {
      'keyword': {
        handler (val, oldVal) {
          let keywords = this.similarKeywords.data
          if (!keywords || !keywords.length) {
            this.onChange()
          }
        }
      }
    },
    computed: {
      numbrand () {
        return this.forNum(this.counts)
      },
      counts () {
        return this.$store.state.product.common.counts.data
      },
      similarKeywords () {
        return this.$store.state.search.keywords.data
      },
      searchHistory () {
        console.log(this.$store.state.searchData)
        return this.$store.state.searchData.searchHistory.searchHistory.data
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~assets/scss/mobileCommon';
  .home{
    font-size:.28rem;
    background: #f7fbff;
    margin-bottom:1rem;
    .home-header{
      width:100%;
      height:6.12rem;
      padding-bottom:1rem;
      .home-search{
        width:6rem;
        line-height: .3rem;
        margin:0 auto;
        text-align: center;
        padding-top: 1.74rem;
        ul{
          display:inline-flex;
        li{
          flex:1;
          text-align:center;
          >span{
             display:inline-block;
             width:.72rem;
             line-height:.33rem;
             height:.33rem;
             background: #fff;
             color:#000;
             border-radius: .05rem .05rem 0 0 ;
           }
          }
          li.active span{
              background: #3c7cf5;
              color:#fff;
              cursor:pointer;
          }
        }
        .home-input{
          width: 6rem;
          height: .61rem;
          line-height: .61rem;
          input{
            width:5.17rem;
            display: inline-block;
            padding: 0 1rem 0 .16rem;
            margin-right:-.83rem;
            font-size:.24rem;
            border:.02rem solid #3c7cf5;
            border-radius:.05rem;
          }
          span{
             display:inline-block;
             text-align: center;
             width:.83rem;
             font-size:.23rem;
             border-left:none;
             border-radius:   0 .05rem .05rem 0;
             background: #3c7cf5;
             color:#fff;
            vertical-align: middle;
            i{
              font-size: .33rem;
            }
          }
        }
      }
    }
    }
    .home-main{
      width:100%;
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      text-align: center;
      padding-top: .46rem;
      height: 6.25rem;
    }
    .home-main a.home-main-content {
      width:33%;
      margin-bottom:.52rem;
    }
    .home-main .home-main-content div{
      border-radius: .2rem;
      width:1.14rem;
      height:1.14rem;
      margin:0 auto;
    }
    .home-main .home-main-content div>img{
      width: 100%;
      height:100%;
    }
  .home-main .home-main-content div>i {
    font-size: .8rem;
  }
  .home-main .home-main-content:nth-child(4) div>i {
    color: #ff3064;
  }
  .home-main .home-main-content:nth-child(5) div>i {
    color: #fa6743;
  }
  .home-main .home-main-content:nth-child(6) div>i {
    color: #fcb836;
  }
    .home-main .home-main-content p{
      font-size:.28rem;
      color:rgb(51,51,51);
      line-height: .52rem;
    }
    .home-main .home-main-content h2{
      font-size:.3rem;
      color:#ff7800;
      line-height: .32rem;
      margin:0;
      margin-top:.1rem;
    }
  .main-search {
    background: #fff;
    .main-search-header {
      height: .71rem;
      background: #4391f7;
      line-height: .66rem;
      padding-left: .84rem;
      input {
        width: 4.78rem;
        height: .54rem;
        line-height: .54rem;
        font-size: .23rem;
        color: #999;
        padding-left: .2rem;
        border-bottom-left-radius: .05rem;
        border-top-left-radius: .05rem;
        border: .01rem solid #fff;
        background: #fff;
      }
      span {
        display: inline-block;
        width: 1.02rem;
        text-align: center;
        height: .54rem;
        line-height: .54rem;
        color: #366df3;
        font-size: .23rem;
        margin-left: .02rem;
        border-top-right-radius: .05rem;
        border-bottom-right-radius: .05rem;
        background: #fff;
      }
    }
    .associate-list {
      padding-top: .25rem;
      background: #fff;
      li {
        height: 58px;
        line-height: 58px;
        padding: 0 45px;
        border-bottom: .01rem solid #f1f0f0;
        i {
          font-size: .4rem;
          margin-right: .24rem;
          color: #ddd;
        }
        span {
          color: #999;
          font-size: .28rem;
          line-height: 58px;
          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;
          }
        }
      }
    }
    .hot-history {
      .search-history {
        padding-left: .51rem;
        padding-top: .38rem;
        >p {
          font-size: .3rem;
          color: #333;
        }
        ul {
          text-align: left;
          margin-top: .26rem;
          li {
            display: inline-block;
            max-width: 2.83rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 10px;
            background: #f2f6ff;
            height: .56rem;
            line-height: .56rem;
            padding: 0 .12rem;
            a {
              font-size: .3rem;
              color: #666;
            }
          }
        }
      }
      .search-hot {
        text-align: center;
        margin-top: .3rem;
        >img {
          width: 2.56rem;
          height: .67rem;
        }
        ul {
          text-align: left;
          padding-left: .51rem;
          margin-top: .31rem;
          li {
            display: inline-block;
            max-width: 2.83rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 10px;
            background: #fef1eb;
            height: .56rem;
            line-height: .56rem;
            padding: 0 .12rem;
            a {
              font-size: .3rem;
              color: #666;
            }
            &:nth-child(1) {
              a {
                color: #fc5708;
              }
            }
          }
        }
      }
    }
  }
</style>