fff

src/pages/rewardsDetails.vue

@@ -0,0 +1,165 @@
+<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>