applet/pages/user/pointsDetails.vue

<template>
  <view class="app-container">
    <uv-navbar title="我的积分" placeholder autoBack></uv-navbar>
    <view class="top u-flex-center-sb">
      <view class="top-item">
        <view class="num">{{ info.todayInnerIntegral || 0 }}</view>
        <view class="text">今日积分</view>
      </view>
      <view class="line"></view>
      <view class="top-item">
        <view class="num">{{ info.integralAble || 0 }}</view>
        <view class="text">积分剩余</view>
      </view>
    </view>

    <view class="middle-list">
      <view class="list-title u-flex-center">
        <image class="icon" :src="$handleImageUrl('/personalCenter/icon_points.png')" alt="" />
        <text class="text">积分明细</text>
      </view>

      <view
        class="list-item u-flex-center-sb"
        v-for="(item, index) in pointsList"
        :key="index"
      >
        <view class="info">
          <view class="remark">{{ item.remark }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
        <view
          class="num"
          :style="{ color: item.billType == 1 ? '#ff0000' : '#1a1a1a' }"
        >
          <text v-if="item.billType == 1">+</text>
          <text v-else>-</text>
          <text>{{ item.value }}</text>
        </view>
      </view>
      <loadMore v-if="pointsList.length > 0" :status="status"></loadMore>
      <noData v-else :config="{ top: 1, content: '暂无数据~' }"></noData>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { userBusinessIntegralRecordPage_Api } from "@/api/index.js";
import { userBusinessRoleInfo_Api } from "@/api/userInfo.js";

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

const getMydetailed = () => {
  userBusinessIntegralRecordPage_Api(params.value).then((res) => {
    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";
      }
    }
  });
};

const getShopInfo = () => {
  userBusinessRoleInfo_Api(params.value.businessRoleId).then((res) => {
    if (res && res.code == 200) {
      info.value = res.data;
    }
  });
};

onLoad((options) => {
  if (!options.id) {
    uni.$uv.toast("未获取到店铺信息");
    uni.navigateBack();
    return;
  }
  params.value.businessRoleId = options.id;
  pointsList.value = [];
  getShopInfo();
  getMydetailed();
});

onReachBottom(() => {
  if (status.value != "noMore") {
    params.value.pageNum++;
    getMydetailed();
  }
});

onPullDownRefresh(() => {
  getShopInfo();
  params.value.pageNum = 1;
  pointsList.value = [];
  getMydetailed();
});
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
  box-sizing: border-box;

  .top {
    width: 690rpx;
    min-height: 213rpx;
    background: #f7f6f6;
    border-radius: 20rpx;
    margin: 30rpx auto;
    box-sizing: border-box;
    .line {
      width: 1rpx;
      height: 126rpx;
      background: #e6e5e5;
      flex-shrink: 0;
    }
    .top-item {
      flex: 1;
      .num {
        font-size: 60rpx;
        font-weight: normal;
        text-align: center;
        color: #eb5153;
      }
      .text {
        font-size: 28rpx;
        font-weight: 400;
        text-align: left;
        color: #1a1a1a;
        text-align: center;
      }
    }
  }

  .middle-list {
    min-height: 30vh;
    background: linear-gradient(180deg, #fbe6e9, #ffffff 130rpx);
    border-radius: 40rpx 40rpx 0px 0px;
    padding: 30rpx 54rpx;
    .list-title {
      .icon {
        width: 44rpx;
        height: 44rpx;
        margin-right: 10rpx;
      }
      .text {
        font-size: 34rpx;
        font-weight: 700;
        color: #1a1a1a;
      }
    }
    .list-item {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      .info {
        flex: 1;
        .remark {
          font-size: 28rpx;
          color: #1a1a1a;
        }
        .time {
          font-size: 24rpx;
          color: #999999;
          margin-top: 5rpx;
        }
      }
      .num {
        flex-shrink: 0;
        margin-left: 20rpx;
        font-size: 30rpx;
        font-weight: 700;
      }
    }
  }
}
</style>