uni-qnc-tob-c/src/pages/rewardsDetails.vue

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 收益列表 -->
    <uni-list :loading="loading" :loadmore="loadMoreStatus" @loadmore="onLoadMore">
      <!-- 空状态提示 -->
      <view v-if="!loading && list.length === 0" class="flex flex-col items-center justify-center py-16">
        <image src="/static/image/empty.svg" mode="aspectFit" class="w-48 h-48 mb-4" />
        <text class="text-gray-400 text-base">暂无收益记录</text>
      </view>

      <view v-for="(item, index) in list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm">
        <view class="flex justify-between items-center mb-2">
          <text class="text-gray-500 text-sm">{{ item.create_time || '-' }}</text>
          <text class="text-green-500 font-bold">+{{ item.amount.toFixed(2) }}</text>
        </view>
        <view class="flex items-center">
          <text class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
            :class="getReportTypeStyle(item.type)">
            <text class="w-2 h-2 rounded-full mr-1 inline-block" :class="getDotColor(item.type)"></text>
            {{ typeToChinese(item.type) }}
          </text>
        </view>
      </view>

      <!-- 加载更多/加载完成提示 -->
      <uni-load-more :status="loadMoreStatus" />
    </uni-list>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getAgentRewards } from '@/apis/agent'

// 类型映射配置
const typeConfig = {
  descendant_promotion: {
    chinese: '下级推广奖励',
    color: { bg: 'bg-blue-100', text: 'text-blue-800', dot: 'bg-blue-500' }
  },
  descendant_upgrade_vip: {
    chinese: '下级升级VIP奖励',
    color: { bg: 'bg-green-100', text: 'text-green-800', dot: 'bg-green-500' }
  },
  descendant_upgrade_svip: {
    chinese: '下级升级SVIP奖励',
    color: { bg: 'bg-purple-100', text: 'text-purple-800', dot: 'bg-purple-500' }
  },
  descendant_stay_activedescendant: {
    chinese: '下级活跃奖励',
    color: { bg: 'bg-pink-100', text: 'text-pink-800', dot: 'bg-pink-500' }
  },
  new_active: {
    chinese: '新增活跃奖励',
    color: { bg: 'bg-orange-100', text: 'text-orange-800', dot: 'bg-orange-500' }
  },
  descendant_withdraw: {
    chinese: '下级提现奖励',
    color: { bg: 'bg-indigo-100', text: 'text-indigo-800', dot: 'bg-indigo-500' }
  },
  default: {
    chinese: '其他奖励',
    color: { bg: 'bg-gray-100', text: 'text-gray-800', dot: 'bg-gray-500' }
  }
}

const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const list = ref([])
const loading = ref(false)
const loadMoreStatus = ref('more') // 'more'|'loading'|'noMore'

// 类型转中文
const typeToChinese = (type) => {
  return typeConfig[type]?.chinese || typeConfig.default.chinese
}

// 获取颜色样式
const getReportTypeStyle = (type) => {
  const config = typeConfig[type] || typeConfig.default
  return `${config.color.bg} ${config.color.text}`
}

// 获取小圆点颜色
const getDotColor = (type) => {
  return typeConfig[type]?.color.dot || typeConfig.default.color.dot
}

// 加载更多数据
const onLoadMore = async () => {
  if (loadMoreStatus.value === 'noMore') return

  page.value++
  await getData()
}

// 获取数据
const getData = async () => {
  try {
    loading.value = true
    loadMoreStatus.value = 'loading'

    const res = await getAgentRewards({
      page: page.value,
      page_size: pageSize.value
    })

    if (res.code === 200) {
      if (page.value === 1) {
        list.value = res.data.list
        total.value = res.data.total
      } else {
        list.value.push(...res.data.list)
      }

      if (list.value.length >= res.data.total || res.data.list.length < pageSize.value) {
        loadMoreStatus.value = 'noMore'
      } else {
        loadMoreStatus.value = 'more'
      }
    } else {
      uni.showToast({
        title: res.msg || '加载失败',
        icon: 'none'
      })
    }
  } catch (error) {
    uni.showToast({
      title: '网络错误',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 页面加载
onMounted(() => {
  getData()
})

// 页面下拉刷新
const onPullDownRefresh = () => {
  page.value = 1
  loadMoreStatus.value = 'more'
  getData().then(() => {
    uni.stopPullDownRefresh()
  })
}

// 导出页面生命周期方法
defineExpose({
  onPullDownRefresh
})
</script>

<route type="page" lang="json">
{
  "layout": "page",
  "title": "收益明细",
  "agent": true,
  "auth": true
}
</route>