lilishop-uniapp/pages/promotion/point/pointList.vue

<template>
  <view class="index">
    <user-point />
    <view class="index-head">
      <scroll-view scroll-x class="list-scroll-content" :scroll-left="currentLeft" scroll-with-animation>
        <view class="index-head-navs">
          <view class="index-head-nav" v-for="(ele, index) in categoryIndexData" :key="index"
            :class="{ 'index-head-nav-active': tabIndex == index }" @click="setCat(index)">
            {{ ele.name }}
          </view>
        </view>
      </scroll-view>
    </view>
    <swiper :current="tabIndex" class="swiper-box" @change="ontabchange" duration="300">

      <swiper-item v-for="(nav, index) in categoryIndexData" :key="index" class="swiper-item">

        <scroll-view class="scroll-v" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
          <view class="index-items">
            <view class="index-item" v-for="(item, key) in nav.goods" :key="item.id || key" @click="toGoods(item)">
              <view class="index-item-img">
                <image
                  class="index-item-image"
                  :src="item.thumbnail"
                  mode="aspectFit"
                  lazy-load
                ></image>
              </view>
              <view class="index-item-info">
                <view class="index-item-title">{{ item.goodsName || item.promotionName || '' }}</view>
                <view class="index-item-price">
                  <view class="point">
                    <text class="point-num">{{ item.points != null ? item.points : 0 }}</text>
                    <text class="point-unit">积分</text>
                  </view>
                  <text class="tipsMkt">¥{{ unitPrice(item.originalPrice) }}</text>
                </view>
              </view>
            </view>
          </view>
          <uni-load-more :status="nav.loadStatus"></uni-load-more>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { getPointsCategory, getPointsGoods } from "@/api/promotions.js";
import userPoint from "./user";
export default {
  components: {
    "user-point": userPoint,
  },
  data() {
    return {
      headOffSetTop: "0",
      tabIndex: 0,
      categoryIndexData: [
        {
          categoryId: 0,
          name: "全部",
          loadStatus: "more",
          goods: [],
          params: {
            pageNumber: 1,
            pageSize: 10,
            pointsGoodsCategoryId: "",
          },
        },
      ],
      currentLeft: 0,
      pageParams: {
        pageNumber: 1,
        pageSize: 10,
        pointsGoodsCategoryId: 0,
      },
      flag: true,
    };
  },
  onLoad() {},
  async onPullDownRefresh() {
    this.categoryIndexData[this.tabIndex].goods = [];
    this.categoryIndexData[this.tabIndex].params.pageNumber = 1;
    this.categoryIndexData[this.tabIndex].loadStatus = "more";
    this.loadGoods();
  },
  onPageScroll(e) {
    if (e.scrollTop < -40 && this.flag) {
      this.flag = false;
      this.categoryIndexData[this.tabIndex].goods = [];
      this.categoryIndexData[this.tabIndex].params.pageNumber = 1;
      this.categoryIndexData[this.tabIndex].loadStatus = "more";
      uni.startPullDownRefresh();
      this.loadGoods();
    }
  },
  watch: {
    tabIndex(val) {
      if (
        this.categoryIndexData[this.tabIndex].goods.length == 0 &&
        this.categoryIndexData[this.tabIndex].params.pageNumber == 1
      ) {
        this.loadGoods();
      }
    },
  },
  async onShow() {
    //获取顶级分类
    this.categoryIndexData = [
      {
        categoryId: 0,
        name: "全部",
        loadStatus: "more",
        goods: [],
        params: {
          pageNumber: 1,
          pageSize: 10,
          pointsGoodsCategoryId: "",
        },
      },
    ];

    let response = await getPointsCategory();

    if (response.data.success) {
      let navData = response.data.result.records;
      navData.forEach((item) => {
        this.categoryIndexData.push({
          categoryId: item.id,
          goods: [],
          loadStatus: "more",
          name: item.name,
          params: {
            pageNumber: 1,
            pageSize: 10,
            pointsGoodsCategoryId: item.id,
          },
        });
      });
    }

    this.loadGoods();
  },
  methods: {
    // 跳转
    navigateTo(url) {
      uni.navigateTo({
        url,
      });
    },

    toGoods(item) {
      //跳转详情
      uni.navigateTo({
        url: `/pages/promotion/point/detail?id=${item.id}`,
      });
    },

    async loadGoods() {
      let index = this.tabIndex;

      //获取商品数据
      let response = await getPointsGoods(this.categoryIndexData[index].params);
      if (response.data.success) {
        this.categoryIndexData[index].goods.push(
          ...response.data.result.records
        );
        if (response.data.result.records.length < 10) {
          this.categoryIndexData[index].loadStatus = "noMore";
        }
        let _this = this;
        setTimeout(function () {
          _this.flag = true;
        }, 3000);
      }

      uni.stopPullDownRefresh();
    },
    setCat(type) {
      this.tabIndex = type;
    },
    ontabchange(e) {
      this.tabIndex = e.detail.current;
      if (e.detail.current > 3) {
        this.currentLeft = (e.detail.current - 3) * 70;
      } else {
        this.currentLeft = 0;
      }
    },
    loadMore() {
      if (this.categoryIndexData[this.tabIndex].loadStatus == "more") {
        this.categoryIndexData[this.tabIndex].params.pageNumber++;
        this.loadGoods();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  height: 100%;
}
.tipsMkt {
  flex-shrink: 0;
  color: #c0c4cc;
  font-size: 24rpx !important;
  text-decoration: line-through;
  margin-left: 12rpx;
}


.index {
  height: 100vh;
  // #ifdef H5
  height: calc(100vh - 44px);
  // #endif
  width: 100%;
  overflow: hidden;
}

.index-head {
  background: #fff;
}

.list-scroll-content {
  white-space: nowrap;
  width: 100%;
  height: 100rpx;
  color: #333;
}

.index-head-navs {
  width: 100%;
  height: 92rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.index-head-nav {
  padding-bottom: 8rpx;
  margin: 20rpx;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 30rpx;
  color: #333;

  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;

  &-active {
    border-bottom: 4rpx solid $light-color;
  }
}

.swiper-box {
  // #ifdef H5
  height: calc(100vh - (100rpx + 300rpx + 44px));
  // #endif

  // #ifndef H5
  height: calc(100vh - 400rpx);
  // #endif

  .scroll-v {
    height: 100%;
  }
}

.index-items {
  padding: 20rpx 20rpx 0;
  background-color: #f7f7f7;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
}

.index-item {
  width: calc(50% - 9rpx);
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.index-item-img {
  width: 100%;
  height: 320rpx;
  overflow: hidden;
  flex-shrink: 0;
}

.index-item-image {
  width: 100%;
  height: 320rpx;
  display: block;
}

.index-item-info {
  position: relative;
  z-index: 1;
  flex: 1;
  background-color: #fff;
}

.index-item-title {
  font-size: 26rpx;
  color: #333;
  padding: 16rpx 20rpx 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index-item-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #ff3c2a;
  padding: 12rpx 20rpx 20rpx;

  .point {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    overflow: hidden;
  }

  .point-num {
    font-size: 42rpx;
    font-weight: bold;
    color: #ff3c2a;
    line-height: 1;
  }

  .point-unit {
    margin-left: 6rpx;
    font-size: 24rpx;
    color: #ff3c2a;
    flex-shrink: 0;
  }
}
</style>