applet/pages/user/collection.vue

<template>
  <view class="container">
    <uv-navbar title="我的收藏" placeholder autoBack></uv-navbar>
    <view class="navbar">
      <view class="goodsProduct">
        <view class="u-flex-center-sb u-mt15 u-flex-warp">
          <view
            class="item-productsBottom u-mt20"
            @click="goProductDetails(item.entityId, item.productPaymentMode)"
            v-for="item in goodsList"
            :key="item.id"
          >
            <image class="u-goods336" :src="item.coverImage" mode="aspectFill"></image>
            <view class="botbox u-flex-column-start">
              <view class="u-text2 u-font24 u-1A1A1A" style="height: 64rpx">
                <!-- {{item.title}} -->
                <uv-text :lines="2" :text="item.title" color="#1A1A1A" size="24rpx"></uv-text>
              </view>
              <!-- <view class="u-font20 u-999 u-mt5">已售<text class="u-FF0000">{{item.result_sale_num}}</text>件</view> -->
              <view
                class="u-font32 u-FF0000 u-bold u-flex-center-sb u-flex1 u-mt10"
                v-if="!item.productPaymentMode"
              >
                <rich-text
                  :nodes="$mUtil.priceBigSmall(item.minSalePrice)"
                ></rich-text>
              </view>
              <view
                class="u-font32 u-FF0000 u-bold u-flex-center-sb u-flex1 u-mt10"
                v-else
              >
                {{ item.minPoints }}积分
              </view>
              <view
                class="u-font22 u-flex-center-sb u-flex1 u-mt10 u-999"
                style="width: 100%"
              >
                <text>已有{{ item.collectNum }}人收藏</text>
                <view class="iconfont u-font40" style="color: #fa6138"
                  >&#xe613;</view
                >
              </view>
            </view>
          </view>
        </view>
        <loadMore
          v-if="goodsList && goodsList.length > 0"
          :status="status"
        ></loadMore>
        <noData v-else :config="{ top: 15, content: '暂无商品~' }"></noData>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { userCollectPage_Api } from "@/api/shop";

const goodsList = ref([]);
const params = ref({
  pageNum: 1,
  pageSize: 10,
});
const status = ref("more");

const getList = () => {
  userCollectPage_Api(params.value).then((res) => {
    if (res && res.code == 200) {
      goodsList.value = goodsList.value.concat(res.rows);
      if (res.total <= goodsList.value.length) {
        status.value = "noMore";
      } else {
        status.value = "more";
      }
    }
  });
};

// 跳转商品详情
const goProductDetails = (id, type) => {
  uni.navigateTo({
    url: "/pages/shop/goodsDetails?id=" + id,
  });
};

onShow(() => {
  params.value.page = 1;
  goodsList.value = [];
  getList();
});
onReachBottom(() => {
  if (status.value === "more") {
    status.value = "loading";
    params.value.page++;
    getList();
  }
});
onPullDownRefresh(() => {
  params.value.page = 1;
  goodsList.value = [];
  getList();
  uni.stopPullDownRefresh();
});
</script>

<style>
page {
  background-color: #f4f4f4;
}
</style>

<style lang="scss" scoped>
.love-color {
  width: 40rpx;
  height: 40rpx;
}
.goodsProduct {
  padding: 0 30rpx 30rpx 30rpx;
}
.item-productsBottom {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  width: 336rpx;

  margin-bottom: 20rpx;
  .botbox {
    padding: 15rpx 20rpx;
  }
}
.u-goods336 {
  height: 267rpx;
}
</style>