recycle-mobile/src/pages/goods/list.vue

<template>
  <!-- #ifdef H5 -->
  <zj-page-layout
  	:hasFooter="false"
  	:isScroll="true"
  	:refresherTriggered="refresherTriggered"
  	@refresherrefresh="refresherrefresh"
  	@scrolltolower="scrolltolower">
    <template slot="header">
      <view class="header-container">
        <u-tabs
          :list="categoryList"
          :current="categoryCurrent"
          @click="clickCategory"
          keyName="categoryName"
          :scrollable="categoryList.length === 4 ? false : true"
          lineColor="#01C30B">
        </u-tabs>
        <u-search
          placeholder="输入商品名称搜索"
          :showAction="false"
          clearabled
          v-model="keyword"
          @search="refreshList"
          @clear="refreshList">
        </u-search>
        <u-tabs
          :list="tabList"
          :current="tabCurrent"
          @click="clickTab"
          :scrollable="false"
          lineColor="#01C30B">
        </u-tabs>
      </view>
    </template>

    <view class="common-goods-list">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap="toGoodsDetail(item.id)">
        <view class="top">
          <image src="@/static/common/logo.png"></image>
          <view class="user">
            <view class="name">{{item.userName}}</view>
            <view class="time">{{item.createTime}}</view>
          </view>
          <view class="price">{{item.amount | priceFilter2}}</view>
        </view>
        <view class="title">{{item.title}}</view>
        <view class="des">{{item.content}}</view>
        <view class="imgs">
          <image :src="imgUrl + it.imgUrl" v-for="(it, idx) in item.goodsFiles" :key="idx"></image>
        </view>
        <view class="bottom">
          <view class="left-location"><text class="iconfont icon-dingwei"></text>{{item.address}}</view>
          <view class="right-stats">
            <view class="it">
              <text class="iconfont icon-dianzan"></text>
              <text class="text">2</text>
            </view>
            <view class="it">
              <text class="iconfont icon-pinglun"></text>
              <text class="text">2</text>
            </view>
            <view class="it">
              <text class="iconfont icon-liulan"></text>
              <text class="text">2</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <Loading :loadStatus="loadStatus" :dataList="dataList" />
  </zj-page-layout>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref('/pages/goods/list')"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  export default {
    data() {
      return {
        imgUrl: this.$imageUrl,
        categoryList: [],
        categoryId: '',
        tabList: [
          {name: '默认顺序', value: 0},
          {name: '在售商品', value: 1},
          {name: '离我最近', value: 2},
          {name: '人气最高', value: 3},
        ],
        tabCurrent: 0,
        keyword: '',
        dataList: [],
        pageNum: 1,
        loadStatus: 0,
        refresherTriggered: false,
      }
    },

    computed:{
    	categoryCurrent() {
        if(this.categoryId) {
          return this.categoryList.map(item => item.categoryId).indexOf(this.categoryId)
        }else {
          return 0
        }
    	}
    },

    async onLoad({categoryId, keyword}) {
      console.log(categoryId);
      console.log(keyword);
      this.categoryId = categoryId;
      this.keyword = keyword;
      await this.getCategory();
      await this.getList();
    },

    methods: {
      async getCategory() {
        return new Promise((resolve, reject) => {
          this.$api.get('/goods/category/list')
          .then(res => {
            this.categoryList = res.data || [];
          }).finally(res => {
            resolve(1);
          })
        })
      },

      //获取列表数据
      async getList() {
        let params = {};
        if(this.tabCurrent === 1) {
          params.status = '1';
        }else if(this.tabCurrent === 2) {
          params.lng = this.lng;
          params.lat = this.lat;
        }else if(this.tabCurrent === 3) {
          params.visitOrderBy = 'YES';
        }

        this.$api.get('/goods/list', {
          pageNum: this.pageNum,
          pageSize: 10,
          categoryId: this.categoryId,
          title: this.keyword,
          ...params
        }).then(res => {
          this.loadStatus = 0;
          let list = res.data.records;
          if (list.length < 10) {
            this.loadStatus = 2;
          }
          this.dataList = this.dataList.concat(list);
        }).catch(() => {
          this.loadStatus = 2;
        })
      },

      clickCategory(item) {
        this.categoryId = item.categoryId;
        this.refreshList();
      },

      clickTab(item) {
        this.tabCurrent = item.value;
        this.refreshList();
      },

      // 滚动到底部
      scrolltolower(e) {
        if (this.loadStatus === 0) {
          this.pageNum++;
          this.getList();
        }
      },

      // 触发下拉刷新
      async refresherrefresh(e) {
        this.refresherTriggered = true;
        // await this.getCategory();
        this.refreshList();
        this.refresherTriggered = false;
      },

      refreshList() {
        this.dataList = [];
        this.pageNum = 1;
        this.getList();
      },

      toGoodsDetail(id) {
        this.$navToPage({
          url: `/pages/goods/detail?${id}`
        })
      },

    }
  }
  // #endif
  // #ifndef H5

  // #endif
</script>

<style lang="scss" scoped>
.header-container {
  background: #ffffff;
  padding: 0 30rpx;
  ::v-deep .u-search {
    margin-top: 20rpx !important;
  }
}
.common-goods-list {
  padding: 0 30rpx;
  .item {
    @include zj-card;
  }
}
</style>