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

<template>
  <div>
    <div class="home" v-if="!showMainSearch">
      <div class="header">
        <div v-swiper:mySwiper="swiperOption">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="home-bg" src="/images/mobile/@2x/applyPurchase/home/app-banner_01.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img class="home-bg" src="/images/mobile/@2x/applyPurchase/home/app-banner_02.jpg" alt="">
            </div>
          </div>
          <div class="swiper-pagination swiper-pagination-bullets"></div>
        </div>
        <div class="search-content">
          <input type="text" placeholder="请输入您要查找的型号、品牌或店铺" @click="onHomeSearchClick()">
          <span>
        <i class="iconfont icon-sousuo"></i>
      </span>
          <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="" @click="showStoreInfo = true">
        </div>
      </div>
      <ul class="link-list">
        <li>
          <nuxt-link to="/mobile/supplier">
            <img src="/images/mobile/@2x/home/supplier.png" alt="">
            <span>供应商</span>
          </nuxt-link>
        </li>
        <li>
          <nuxt-link to="/mobile/applyPurchase/list/businessOpportunity">
            <img src="/images/mobile/@2x/home/seek.png" alt="">
            <span>我的商机</span>
          </nuxt-link>
        </li>
        <li>
          <nuxt-link to="/mobile/shop">
            <img src="/images/mobile/@2x/home/store.png" alt="">
            <span>店铺列表</span>
           <!-- <i></i>-->
          </nuxt-link>
        </li>
        <li>
          <nuxt-link to="/mobile/brand/brandCenter/ABCD">
            <img src="/images/mobile/@2x/home/brand.png" alt="">
            <span>品牌中心</span>
          </nuxt-link>
        </li>
      </ul>
      <div class="seek-title">
        <img src="/images/mobile/@2x/applyPurchase/home/seek-title.png" alt="">
        <span>最新求购信息</span>
        <nuxt-link to="/mobile/applyPurchase/list">查看更多 <img src="/images/mobile/@2x/applyPurchase/home/arrow-right.png" alt=""></nuxt-link>
      </div>
      <seek-list :purchaseManList="purchaseManList"></seek-list>
    </div>
    <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>商家地址：深圳市南山区英唐大厦1楼</div>
          <!-- <div class="content-line link-url">在线咨询</div>-->
          <div>致电：<a href="tel:4008301818" target="_blank" class="content-line link-url">4008301818</a></div>
          <div>邮件：<a href="mailto:yrsc@usoftchina.com" target="_blank" class="content-line link-url">yrsc@usoftchina.com</a></div>
        </div>
      </div>
    </div>
    <main-search v-if="showMainSearch" @cancelSearchAction="onCancelSearch"></main-search>
  </div>
</template>
<script>
  import SeekList from './applyPurchase/SeekList.vue'
  import MainSearch from '~/components/mobile/search/MainSearch.vue'
  export default {
    data () {
      return {
        showStoreInfo: false,
        showMainSearch: false,
        swiperOption: {
          autoplay: 3000,
          initialSlide: 0,
          pagination: '.swiper-pagination',
          // 解决点击分页器后图片就不能轮播的问题
          autoplayDisableOnInteraction: false,
          paginationClickable: true,
          mousewheelControl: false,
          effect: 'fade',
          lazyLoading: true,
          loop: true,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next'
        }
      }
    },
    components: {
      SeekList,
      MainSearch
    },
    computed: {
      purchaseManList () {
        return this.$store.state.applyPurchase.purchaseManList.purchaseHomeList.data.content
      }
    },
    methods: {
      onHomeSearchClick () {
        this.showMainSearch = true
        this.$store.dispatch('searchData/getSearchHistory')
      },
      onCancelSearch: function () {
        this.showMainSearch = false
      }
    }
  }
</script>
<style lang="scss">
  .home {
    padding-bottom: 1rem;
    .header {
      height: 3.26rem;
      position: relative;
      .home-bg {
        height: 3.26rem;
        width: 100%;
      }
      .search-content {
        position: absolute;
        top: 0;
        width: 100%;
      }
      .swiper-container {
        height: 3.26rem;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;
      }
      .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: .1rem !important;
      }
      .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
        width: .16rem !important;
        height: .16rem !important;
        margin: 0 .2rem;
      }
    }
    .link-list {
      background: #f3f3f7;
      height: 1.36rem;
      li {
        position: relative;
        display: inline-block;
        width: 25%;
        text-align: center;
        float: left;
        height: 1.36rem;
        img {
          width: .63rem;
          height: .63rem;
          margin-top: .2rem;
        }
        span {
          font-size: .22rem;
          color: #666;
          display: block;
          margin-top: .15rem;
        }
        i {
          height: 0.9rem;
          width: .01rem;
          background: #ddd;
          display: block;
          position: absolute;
          right: 0;
          top: .2rem;
        }
      }
    }
  }
</style>