wx-qhb/pageD/platformProducts/platformProducts.vue

<template>
  <view class="page">
    <u--input
      style="background: #f4f4f4"
      placeholder="搜索商品名称"
      shape="circle"
      prefixIcon="search"
      prefixIconStyle="font-size: 22px;color: #909399"
    ></u--input>
    <view class="content-list" v-for="item in goodsList" :key="item.id">
      <GoodsInformation status="1" :itemInfo="item" @toDetail="toDetail" />
    </view>
  </view>
</template>

<script>
import GoodsInformation from "../components/goodsInformation.vue";
export default {
  components: {
    GoodsInformation,
  },
  data() {
    return {
      goodsList: [],
      page: 1,
      total: 0,
    };
  },
  methods: {
    //获取平台库商品
    getProductsList() {
      uni.$u.http
        .post(`/api/goods/platform_goods`, { page: this.page, limit: 10 })
        .then((res) => {
          //判断是否为触底加载 不是直接赋值，是则连接两个数组
          if (this.goodsList.length == 0) {
            this.goodsList = res.data;
          } else {
            this.goodsList = this.goodsList.concat(res.data);
          }
          this.total = res.total;
          //循环数组
          this.goodsList.map((item) => {
            let arr = [];
            item.labels = [];
            //将标签名称单独取出，在子组件中使用
            if (item.label_arr.length > 0) {
              item.label_arr.forEach((items) => {
                arr.push(items.name_cn);
              });
              item.labels = arr;
            }
          });
        });
    },
    toDetail(value) {
      uni.navigateTo({
        url: `/pageD/productDetails/productDetails?goodsId=${value.id}&pageStatus=platform`,
      });
    },
  },
  onReachBottom() {
    //商品总数量小于当前获取到的商品数量
    if (this.total > this.goodsList.length) {
      this.page++;
      this.getProductsList();
    }
  },
  mounted() {
    this.getProductsList();
    uni.setNavigationBarTitle({
      title: "平台商品库",
    });
  },
};
</script>

<style scoped lang="scss">
.page {
  background-color: #fff;
  padding: 20rpx 24rpx;
  .content-list {
    margin-top: 20rpx;
  }

  ::v-deep .u-input {
    background-color: #f4f4f4;
  }
}
</style>