mcwl-pc/app/pages/planet-earnings/index.vue

<script setup lang="ts">
import { formatAmount } from '@/utils'
import request from '@/utils/request'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import { useRoute } from 'vue-router'

definePageMeta({
  layout: 'planet',
})
// const route = useRoute()
// const message = useMessage()
interface DataDetail {
  communityIncome: {
    todayIncome: number
    yesterdayIncome: number
  }
  questionIncome: {
    todayIncome: number
    yesterdayIncome: number
  }
  totalIncome: number
}
const dataDetail = ref<DataDetail>({
  communityIncome: {
    todayIncome: 0,
    yesterdayIncome: 0,
  },
  questionIncome: {
    todayIncome: 0,
    yesterdayIncome: 0,
  },
  totalIncome: 0,
})
async function getEarningDetail() {
  try {
    const res = await request.get('/incomeInfo/communityIncome')
    if (res.code === 200) {
      dataDetail.value = res.data
    }
  }
  catch (error) {
    console.error(error)
  }
}
getEarningDetail()

const integralGold = ref({})
async function getIntegralGold() {
  try {
    const res = await request.post('/personalCenter/getPointAndWallet')
    if (res.code === 200) {
      integralGold.value = res.data
    }
  }
  catch (err) {
    console.log(err)
  }
}
getIntegralGold()

// 交易记录列表
interface TransactionRecord {
  userId: string
  userName: string
  avatar: string
  planetId: string
  planetName: string
  type: string
  amount: number
  planetIncome: number
  createTime: string
}

const transactionList = ref<TransactionRecord[]>([])
const transactionListParams = ref({
  searchContent: '',
  pageNum: 1,
  pageSize: 10,
})

const pagination = ref({
  page: 1,
  pageSize: 10,
  itemCount: 0,
})

// 获取交易记录列表
async function getTransactionList() {
  try {
    const res = await request.post('/incomeInfo/incomeList', {
      ...transactionListParams.value,
      pageNum: pagination.value.page,
      pageSize: pagination.value.pageSize,
    })
    if (res.code === 200) {
      transactionList.value = res.rows
      pagination.value.itemCount = res.total
    }
  }
  catch (error) {
    console.error(error)
  }
}

// 处理页码变化
function handlePageChange(page: number) {
  pagination.value.page = page
  getTransactionList()
}

// 处理搜索
function handleSearch() {
  pagination.value.page = 1
  getTransactionList()
}

const router = useRouter()

function openWalletPage() {
  const url = `${window.location.origin}${router.resolve('/wallet').href}`
  window.open(url, '_blank')
}

onMounted(() => {
  getTransactionList()
})
</script>

<template>
  <div class="min-h-screen bg-[#F7F8FA] py-4">
    <div class="bg-white rounded-lg py-4 px-6 max-w-[1025px] mx-auto">
      <!-- 星球收益数据卡片 -->
      <div class="grid grid-cols-4 gap-6 mb-8">
        <div class="bg-[#F7F8FA] rounded-lg p-4">
          <div class="text-sm text-gray-500 mb-2">
            星球收益(金币)
          </div>
          <div class="text-2xl font-medium">
            {{ formatAmount(dataDetail.communityIncome?.todayIncome) }}
          </div>
          <div class="text-xs mt-1">
            昨日 <span class="text-[#3f7ef7]">{{ formatAmount(dataDetail.communityIncome?.yesterdayIncome) }}</span>
          </div>
        </div>
        <div class="bg-[#F7F8FA] rounded-lg p-4">
          <div class="text-sm text-gray-500 mb-2">
            问答收益(金币)
          </div>
          <div class="text-2xl font-medium">
            {{ formatAmount(dataDetail.questionIncome?.todayIncome) }}
          </div>
          <div class="text-xs  mt-1">
            昨日 <span class="text-[#3f7ef7]">{{ formatAmount(dataDetail.questionIncome?.yesterdayIncome) }}</span>
          </div>
        </div>
        <div class="bg-[#F7F8FA] rounded-lg p-4">
          <div class="text-sm text-gray-500 mb-2">
            星球累计收益(金币)
          </div>
          <div class="text-2xl font-medium">
            {{ formatAmount(dataDetail.totalIncome) }}
          </div>
        </div>
        <div class="bg-[#F7F8FA] rounded-lg p-4">
          <div class="text-sm text-gray-500 mb-2">
            金币余额
          </div>
          <div class="text-2xl font-medium">
            {{ formatAmount(integralGold.wallet) }}
          </div>
          <div class="text-xs text-[#3f7ef7] mt-1 cursor-pointer" @click="openWalletPage">
            去提现 >
          </div>
        </div>
      </div>

      <!-- 积分收益明细 -->
      <div class="flex items-center justify-between mb-4">
        <div class="text-lg font-medium">
          金币收益明细
        </div>
        <div>
          <div class="relative">
            <input
              v-model="transactionListParams.searchContent"
              type="text"
              class="pl-3 pr-8 py-1 border border-gray-200 rounded-lg outline-none focus:border-[#3f7ef7] transition-colors"
              placeholder="请输入你需要搜索的内容"
              @keyup.enter="handleSearch"
            >
            <div
              class="absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer"
              @click="handleSearch"
            >
              <div class="i-lucide:search w-4 h-4 text-gray-400" />
            </div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-[200px_120px_120px_200px_200px_200px] border-b border-[#eee]">
        <div class="p-3 text-[#1f2329] font-medium">
          用户
        </div>
        <div class="p-3 text-[#1f2329] font-medium">
          星球名称
        </div>
        <div class="p-3 text-[#1f2329] font-medium">
          类型
        </div>
        <div class="p-3 text-[#1f2329] font-medium">
          支付金额(金币)
        </div>
        <div class="p-3 text-[#1f2329] font-medium">
          时间
        </div>
      </div>
      <div v-if="transactionList.length !== 0">
        <div
          v-for="item in transactionList"
          :key="item.id"
          class="grid grid-cols-[200px_120px_120px_200px_200px_200px] border-b border-[#eee] hover:bg-gray-50"
        >
          <div class="p-3 flex items-center gap-2 w-[200px]">
            <img :src="item.avatar" class="w-6 h-6 rounded-full" :alt="item.avatar">
            <span
              class="truncate flex-1 cursor-pointer"
              title="双击复制"
              @dblclick="copyToClipboard(item.userName)"
            >
              {{ item.userName }}
            </span>
          </div>
          <div class="p-3 flex items-center">
            {{ item.communityName }}
          </div>
          <div class="p-3 flex items-center">
            {{ item.type === 0 ? '付费加入' : '付费问答' }}
          </div>
          <div class="p-3 flex items-center">
            {{ formatAmount(item.amount) }}
          </div>
          <div class="p-3 w-[300px] flex items-center">
            {{ item.createTime || '-' }}
          </div>
        </div>
        <div class="flex justify-center mt-6">
          <n-pagination
            v-model:page="pagination.page"
            v-model:page-size="pagination.pageSize"
            :item-count="pagination.itemCount"
            :page-slot="5"
            class="py-2"
            @update:page="handlePageChange"
          />
        </div>
      </div>
      <client-only v-else>
        <div class="flex justify-center items-center min-h-[200px] text-[#86909c]">
          暂无数据
        </div>
      </client-only>

      <!-- 交易记录列表 -->
      <!-- <div class="space-y-4">
        <div class="flex items-center space-x-2">
          <div class="text-sm text-gray-500">
            用户
          </div>
          <div class="text-sm text-gray-500">
            星球
          </div>
          <div class="text-sm text-gray-500">
            类型
          </div>
          <div class="text-sm text-gray-500">
            支付金额(积分)
          </div>
          <div class="text-sm text-gray-500">
            星主收入(积分)
          </div>
          <div class="text-sm text-gray-500">
            时间
          </div>
        </div>
        <div
          v-for="item in transactionList"
          :key="item.userId"
          class="flex items-center justify-between py-2"
        >
          <div class="flex items-center gap-4">
            <div class="flex items-center gap-2">
              <img :src="item.avatar" class="w-6 h-6 rounded-full">
              <span>{{ item.userName }}</span>
            </div>
            <div>星球{{ item.planetName }}</div>
            <div>{{ item.type }}</div>
            <div>{{ item.amount }}</div>
            <div>{{ item.planetIncome }}</div>
            <div class="text-gray-400">
              {{ item.createTime }}
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<style scoped>
:deep(.n-pagination .n-pagination-item--button) {
  border: 1px solid #e5e6eb;
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  min-width: 32px;
}

:deep(.n-pagination .n-pagination-item) {
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  min-width: 32px;
  border-radius: 4px;
  margin: 0 4px;
}

:deep(.n-pagination .n-pagination-item:hover) {
  color: #1e80ff;
  background-color: #f2f3f5;
}

:deep(.n-pagination .n-pagination-item--active) {
  background-color: #1e80ff;
  color: #fff;
  border: none;
}

:deep(.n-pagination .n-pagination-item--active:hover) {
  color: #fff;
}

:deep(.n-pagination .n-pagination-quick-jumper) {
  height: 32px;
  line-height: 32px;
}

:deep(.n-pagination .n-pagination-quick-jumper input) {
  height: 32px;
  line-height: 32px;
  border: 1px solid #e5e6eb;
  border-radius: 4px;
  width: 50px;
  text-align: center;
}
</style>