applet/pages/user/pointsList.vue

<template>
  <view>
    <uv-navbar title="我的积分" placeholder autoBack></uv-navbar>
    <view class="points-main">
      <view class="points-main-item" v-for="v in pointsList" :key="v.id">
        <image class="item-img" v-if="v.businessVo && v.businessVo.image" :src="v.businessVo.image" alt="" />
        <view class="item-info">
          <view class="item-name" v-if="v.businessVo">{{ v.businessVo.businessName }}</view>
          <view class="item-address">
            <text class="iconfont">&#xe990;</text>
            <text class="address" v-if="v.businessVo">{{ v.businessVo.address }}</text>
          </view>
          <view class="item-integral">
            <text>剩余积分：</text>
            <text class="integral">{{ v.integralAble }}</text>
          </view>
          <view class="item-more">
            <view class="item-more-text" @click="itemClick(v)">积分明细</view>
          </view>
        </view>
      </view>
      <noData v-if="pointsList.length == 0" :config="{ top: 2, content: '暂无数据~' }"></noData>
      <loadMore v-if="pointsList.length > 0" :status="status"></loadMore>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { userBusinessRolePage_Api } from "@/api/userInfo";
const params = ref({ pageNum: 1, pageSize: 15 });
const pointsList = ref([]);
const status = ref("loading");

// 获取店铺积分
const getList = () => {
  status.value = "loading";
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  userBusinessRolePage_Api(params.value)
    .then((res) => {
      uni.hideLoading();
      if (res && res.code == 200) {
        uni.stopPullDownRefresh();
        pointsList.value = pointsList.value.concat(res.rows);
        if (res.total <= pointsList.value.length) {
          status.value = "noMore";
        } else {
          status.value = "more";
        }
      }
    })
    .catch((err) => {
      uni.hideLoading();
    });
};

const itemClick = (v) => {
  uni.navigateTo({
    url: `/pages/user/pointsDetails?id=${v.id}`,
  });
};

onLoad((options) => {
  console.log(options);
  params.value.pageNum = 1;
  pointsList.value = [];
  getList();
});

onReachBottom(() => {
  if (status.value !== "loading" && status.value !== "noMore") {
    params.value.pageNum++;
    getList();
  }
});
onPullDownRefresh(() => {
  params.value.pageNum = 1;
  pointsList.value = [];
  getList();
});
</script>
<style>
page{
  background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.points-main {
  padding: 30rpx;
  background: #f7f7f7;
  // min-height: 100vh;
  box-sizing: border-box;

  .points-main-item {
    display: flex;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    margin-bottom: 30rpx;

    .item-img {
      width: 210rpx;
      height: 210rpx;
      border-radius: 10rpx;
      flex-shrink: 0;
    }

    .item-info {
      flex: 1;
      padding-left: 30rpx;

      .item-name {
        font-size: 28rpx;
        font-weight: 700;
      }

      .item-address {
        font-size: 24rpx;
        color: #999999;
        margin: 6rpx 0;
      }

      .item-integral {
        font-size: 26rpx;

        .integral {
          color: #ff8000;
        }
      }

      .item-more {
        text-align: right;
        margin-top: 20rpx;

        .item-more-text {
          display: inline-block;
          width: 165rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #eb5153;
          border-radius: 30rpx;
          text-align: center;
          font-size: 24rpx;
          color: #ffffff;
        }
      }
    }
  }
}
</style>