mall-web-ssr/components/mobile/supplier/List.vue

<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>
    </div>
    <ul>
      <li v-for="item in listData">
        <nuxt-link :to="`/mobile/supplier/detail/${item.enUU}?isStore=${item.isStore}`">
        <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="">
        </nuxt-link>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        keyword: '',
        isSearchSearchingMore: false,
        page: 1,
        size: 10,
        listData: [],
        isChange: false,
        isDataChange: false
      }
    },
    mounted: function () {
      this.$nextTick(() => {
        window.addEventListener('scroll', this.scroll, false)
      })
    },
    watch: {
      'list': {
        handler (val, oldVal) {
          if (this.isChange) {
            this.listData = val.content
            this.page = 1
            this.isChange = false
            this.isDataChange = true
          } else {
            this.listData = this.listData.concat(val.content)
            this.isSearchSearchingMore = false
            this.isDataChange = false
          }
        },
        immediate: true
      }
    },
    computed: {
      list () {
        return this.$store.state.supplier.data.list.data
      },
      allPage () {
        return Math.floor(this.list.totalElements / this.list.size) + Math.floor(this.list.totalElements % this.list.size > 0 ? 1 : 0)
      }
    },
    methods: {
      goLastPage: function () {
        window.history.back(-1)
      },
      scroll: function () {
        let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
        if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchSearchingMore && this.page < this.allPage) {
          this.getMoreSearch()
        }
      },
      getMoreSearch: function () {
        this.page++
        this.isSearchSearchingMore = true
        this.reloadData()
      },
      reloadData: function () {
        this.$store.dispatch('supplier/getSupplierList', {keyword: this.keyword, page: this.page, size: this.size})
      },
      search: function () {
        this.page = 1
        this.isChange = true
        this.reloadData()
      }
    }
  }
</script>
<style lang="scss" scoped>
    .supplier-list {
      height: 100%;
      background: #29a9f9;
      .mobile-header {
        position: fixed;
        top: 0;
        z-index: 10;
        width:100%;
        height:.88rem;
        line-height: .88rem;
        background: #3e82f5;
        padding:0 .2rem 0 .1rem;
        color:#fff;
        > a {
          font-size:.28rem;
          color:#fff;
          position: absolute;
          i {
            font-size: .48rem;
            margin-right: -.1rem;
          }
        }
        .search-content {
          margin-left: .5rem;
          line-height: normal;
          padding-top: .14rem;
          input {
            color: #333;
            width: 6.48rem;
            line-height: normal;
          }
          span {
            height: .46rem;
            line-height: .46rem;
          }
        }
      }
      ul {
        margin: .26rem auto 0;
        width: 6.91rem;
        li {
          position: relative;
          height: 1.21rem;
          background: #fff;
          line-height: 1.21rem;
          padding-left: .74rem;
          font-size: .32rem;
          margin-bottom: .14rem;
          border-radius: .05rem;
          .open {
            width: 1.35rem;
            position: absolute;
            top: -.08rem;
            left: -.1rem;
          }
          .tag {
            width: 1.08rem;
            position: absolute;
            right: -.1rem;
            top: .16rem;
          }
          span {
            color: #333;
          }
        }
      }
    }
</style>