H5_module/promote/products/products.vue

<template>
<view>
<!--promote/products/products.wxml-->
<view class="top dflex">
  <view class="search dflex flex">
    <image src="/promote/static/promote/images/ssico.png"></image>
    <input placeholder="查询" placeholder-class="placeholder" class="flex" @input="intTitle" @confirm="confirmInt"></input>
  </view>
  <view class="filter dflex">
    <picker @change="bindPickerChange" :value="timeIndex" :range="timeType" range-key="name">
      <view class="picker">
        {{timeType[timeIndex].name}}
      </view>
    </picker>
    <image src="/promote/static/promote/images/bico.png"></image>
  </view>
</view>
<view class="list" v-if="pageList.length > 0">
  <view v-for="(item, index) in pageList" :key="index" class="li">
    <view class="info dflex">
      <image :src="item.pic" mode="aspectFit"></image>
      <view class="infos flex">
        <view class="title">{{item.title}}</view>
        <view class="nums">规格：<block v-for="(itemGuige,idx) in item.specs" :key="idx">{{itemGuige.value}}</block><text>编码：{{item.productNumber}}</text></view>
      </view>
    </view>
    <view class="datas dflex">
      <view class="dflex">销售额<text>{{item.payMoney}}</text></view>
      <view class="dflex">转化购买数<text>{{item.quantity}}</text></view>
    </view>
  </view>
</view>
<view class="nodata" v-if="ishow">
    <image :src="picUrlss+'empty_sp.png'"></image>
    <text>暂无商品</text>
  </view>
</view>
</template>

<script>
// promote/products/products.js
const app = getApp();
const req = require("../../utils/request.js");

export default {
  data() {
    return {
		picUrlss: req.public.picUrls,
      pageList: [],
      form: {
        page: 1,
        limit: 10
      },
      title: '',
      timeType: [{
        name: '全部',
        value: 0
      }, {
        name: '今天',
        value: 1
      }, {
        name: '近7天',
        value: 7
      }, {
        name: '近一月',
        value: 30
      }],
      timeIndex: 0,
      isLoad: true,
      isShow: false,
      ishow: false
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getList(this.timeType[this.timeIndex].value);
  },

  onReachBottom() {
    this.form.page++;
    this.getList(this.timeType[this.timeIndex].value);
  },

  methods: {
    intTitle(e) {
      this.setData({
        title: e.detail.value
      });
    },

    confirmInt() {
      this.setData({
        form: {
          page: 1,
          limit: 10
        },
        isLoad: true
      });
      this.getList(this.timeType[this.timeIndex].value);
    },

    bindPickerChange: function (e) {
      this.setData({
        timeIndex: e.detail.value,
        form: {
          page: 1,
          limit: 10
        },
        isLoad: true
      });
      this.getList(this.timeType[this.timeIndex].value);
    },

    getList(timeType) {
      let isShowLoading = false;

      if (this.form.page == 1 && !isShowLoading) {
        // console.log('一直在加载');
        req.loadIng('加载中');
        isShowLoading = true;
      }

      let that = this;
      // console.log("===============", that.isLoad);
      if (!that.isLoad) return false;
      // console.log("11111111111111111");
      that.isLoad = false;

      if (timeType == 0) {
        that.form.timeType = '';
      } else {
        that.form.timeType = timeType;
      }

      this.form.title = this.title;
      req.getRequest('/api/distribution/getDistributionProduct', that.form, data => {
        if (data && data.length >= 10) that.isLoad = true;
        if (that.form.page > 1) data = that.pageList.concat(data);
        that.setData({
          pageList: data
        });

        if (this.pageList && this.pageList.length <= 0) {
          that.setData({
            ishow: true
          });
        } else {
          that.setData({
            ishow: false
          });
        }

        if (isShowLoading) {
          uni.hideLoading();
          isShowLoading = false;
        }
      });
    }

  }
};
</script>
<style>
@import "./products.css";
</style>