scancode-miro/pages/cjx/hexiao/score_list.vue

<template>
  <view class="page-container">
    <view class="sticky-header">
      <view class="points-summary">
        <view class="summary-left">
          <text class="label">我的积分</text>
          <text class="value">{{totalPoints}}</text>
        </view>
        <button class="use-points-btn" @click="goToUsagePage">去使用</button>
      </view>
    </view>

    <scroll-view class="records-list" scroll-y="true" @scrolltolower="loadMore">
      <view v-if="recordList.length === 0 && loadStatus !== 'loading'" class="empty-list">
        <text>暂无积分记录</text>
      </view>

      <view v-for="record in recordList" :key="record.id" class="record-card">
        <view class="record-info">
          <text class="record-type">{{ record.type }}</text>
          <text class="record-detail">门店名称：{{ record.storeName }}</text>
          <text class="record-detail">获得时间：{{ record.time }}</text>
        </view>
        <view class="record-points" :class="record.amount > 0 ? 'income' : 'expense'">
          {{ record.amount > 0 ? '+' : '' }}{{ record.amount }}
        </view>
      </view>

      <uni-load-more :status="loadStatus"></uni-load-more>
    </scroll-view>
  </view>
</template>

<script>
import {scoreRecord} from "@/api/hexiao";

export default {
  data() {
    return {
      totalPoints: 0,
      recordList: [],
      pagination: { page: 1, limit: 15 },
      loadStatus: 'more', // 'more', 'loading', 'noMore'
      isLoading: false,
    };
  },
  onLoad(opt) {
    this.totalPoints = opt.pointsCount;
    this.fetchRecords(true);
  },
  onPullDownRefresh() {
    this.fetchRecords(true);
  },
  methods: {
    // 格式化数字，添加千位分隔符
    formatNumber(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    // 模拟获取积分记录
    async fetchRecords(isRefresh = false) {
      if (this.isLoading || (this.loadStatus === 'noMore' && !isRefresh)) {
        return;
      }
      if (isRefresh) {
        this.pagination.page = 1;
        this.recordList = [];
        this.loadStatus = 'more';
      }
      this.isLoading = true;
      this.loadStatus = 'loading';

      // --- 模拟API请求 ---
      console.log(`请求第 ${this.pagination.page} 页...`);

      scoreRecord(this.pagination.page,this.pagination.limit).then(res=>{
        let data = res.data;
        let mockData = data.records;
        if(mockData == null){
          mockData = [];
        }
        uni.stopPullDownRefresh();
        if (mockData.length > 0 ) {
          this.recordList = [...this.recordList, ...mockData];
          this.pagination.page++;
          this.loadStatus = 'more';
        } else {
          this.loadStatus = 'noMore';
        }
        this.isLoading = false;

      })
      // --- 模拟结束 ---


    },
    // 上拉加载更多
    loadMore() {
      this.fetchRecords();
    },
    // 跳转到积分使用页面
    goToUsagePage() {
      console.log('跳转到积分商城或使用页面');
      // uni.navigateTo({ url: '/pages/points/shop' });
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(to bottom, #e4efff, #f5f6fa 30%);
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(to bottom, #e4efff, #f5f6fa);
  padding-bottom: 20rpx;
}

.points-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  margin: 20rpx;
  background: linear-gradient(to right, #6ca1ff, #3c82f8);
  border-radius: 20rpx;
  color: #ffffff;
  box-shadow: 0 8rpx 20rpx rgba(60, 130, 248, 0.3);

  .summary-left {
    display: flex;
    flex-direction: column;
  }
  .label {
    font-size: 28rpx;
    opacity: 0.9;
  }
  .value {
    font-size: 52rpx;
    font-weight: bold;
    margin-top: 10rpx;
  }
  .use-points-btn {
    margin: 0;
    background-color: rgba(255, 255, 255, 0.9);
    color: #3c82f8;
    font-size: 26rpx;
    padding: 0 30rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 30rpx;
    font-weight: 500;
    &::after {
      border: none;
    }
  }
}

.records-list {
  flex: 1;
  height: 100%;
  padding: 0 20rpx;
}

.empty-list {
  text-align: center;
  color: #999;
  padding-top: 150rpx;
}

.record-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.record-info {
  display: flex;
  flex-direction: column;
  .record-type {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
  }
  .record-detail {
    font-size: 24rpx;
    color: #999;
    margin-top: 12rpx;
  }
}

.record-points {
  font-size: 36rpx;
  font-weight: bold;

  &.income {
    color: #4caf50; // 绿色代表收入
  }
  &.expense {
    color: #e54d42; // 红色代表支出
  }
}
</style>