jichuangshe/mini/pages/product/list.vue

<template>
  <page-loading :loading="loading">
    <view class="product-page">
      <view
        class="product-list dir-left-wrap"
      >
        <view
          v-for="(item,index) in lists"
          :key="index"
          class="product-item dir-top-wrap"
          @click="$u.route({url: `/pages/product/detail?id=${item.id}`})"
        >
          <view class="cover-img">
            <image :src="item.cover_img" mode="aspectFill" />
          </view>
          <view class="detail main-center cross-center">
            {{ item.name }}
          </view>
        </view>
      </view>
      <u-loadmore
        :status="loadmore.status"
        :loading-text="loadmore.loadingText"
        :loadmore-text="loadmore.loadmoreText"
        :nomore-text="loadmore.nomoreText"
      />
    </view>
  </page-loading>
</template>

<script>
import PageLoading from '../../components/PageLoading'
export default {
  name: 'Product',
  components: { PageLoading },
  data() {
    return {
      loading: false,
      keywords: '',
      limit: 6,
      page: 1,
      isMore: true,
      lists: [],
      loadmore: {
        status: 'loadmore',
        loadingText: '努力加载中...',
        loadmoreText: '轻轻上拉',
        nomoreText: '没有更多了~'
      }
    }
  },
  computed: {},
  methods: {
    handleSearch() {
      this.getLists()
    },
    getLists() {
      this.loadmore.status = 'loading'
      this.$api.product.search({
        limit: this.limit,
        keywords: this.keywords,
        page: this.page
      }).then(res => {
        this.loading = false
        if (res.data.length) {
          this.loadmore.status = 'loadmore'
          this.lists = this.lists.concat(res.data)
        } else {
          this.loadmore.status = 'nomore'
          this.isMore = false
        }
      })
    }
  },
  onLoad(options) {
    this.keywords = options.keywords
    this.loading = true
    this.getLists()
  },
  onReachBottom(e) {
    console.log('-->data', e)
    if (!this.isMore) return
    this.page += 1
    this.getLists()
  }
}
</script>

<style lang="scss" scoped>
.product-page {
  padding: 0 30rpx 80rpx;
  .product-list{
    margin-top: 40rpx;
    .product-item{
      width: 335rpx;
      margin-bottom: 50rpx;
      &:nth-child(2n){
        margin-left: 20rpx;
      }
      .cover-img{
        width: 335rpx;
        height: 370rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .detail{
        padding: 20rpx 0;
        font-size: 24rpx;
        color: #333333;
      }
    }
  }
}
</style>