bandhuBuy-uniapp/src/pages/income/income.vue

<route lang="json5">
  {
    layout: 'default',
    style: {
      navigationBarTitleText: 'Revenue Center',
      navigationBarBackgroundColor: '#fff',
    },
  }
  </route>

<script lang="ts" setup>
// eslint-disable-next-line unused-imports/no-unused-imports
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）

import { getWalletInfo as _getWalletInfo, accountFlowList } from '@/api/wallet'
import { formatNumber } from '@/utils'

defineOptions({
  name: 'Income', // 收益
})

// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)

const dayType = ref(1)

// 搜索结果
const dataList = ref([])
const walletInfo = ref<any>({})
async function getWalletInfo() {
  const res = await _getWalletInfo()
  console.log(res)
  if (res.code === '200') {
    walletInfo.value = res.data
  }
}
async function queryList(pageNo, pageSize) {
  const data = {
    page: pageNo,
    size: pageSize,
    type: dayType.value,
  }
  try {
    const res = await accountFlowList(data)
    paging.value.complete(res.data.list)
  }
  catch (error) {
    paging.value.complete(false)
  }
}
onShow(() => {
  getWalletInfo()
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" use-page-scroll @on-refresh="getWalletInfo" @query="queryList">
    <view class="px-24rpx pb-24rpx">
      <view
        class="mb-20rpx rounded-16rpx from-[rgba(52,52,52,0.95)] to-[rgba(16,16,16,0.95)] bg-gradient-to-br pb-28rpx pt-44rpx text-white"
      >
        <view class="mb-50rpx flex items-center justify-around text-center">
          <view>
            <view class="text-22rpx">
              Total Earnings
            </view>
            <view class="text-40rpx font-bold">
              {{ formatNumber(walletInfo.totalEarnings) }}
            </view>
          </view>
          <view>
            <view class="text-22rpx">
              Account Balance
            </view>
            <view class="relative text-40rpx font-bold">
              <text>{{ formatNumber(walletInfo.balance) }}</text>
              <wd-icon custom-class="absolute -right-24rpx top-1/2 -translate-y-1/2" name="arrow-right" size="24rpx" />
            </view>
          </view>
        </view>
        <view class="flex items-center justify-around text-center">
          <view>
            <view class="text-22rpx">
              <text class="mr-1px">
                Settled Amount
              </text>
              <wd-icon name="help-circle" size="20rpx" />
            </view>
            <view class="text-40rpx font-bold">
              {{ formatNumber(walletInfo.settledAmount) }}
            </view>
          </view>
          <wd-divider dashed custom-class="h-60rpx!" color="#A4A4A4" vertical />
          <view>
            <view class="text-22rpx">
              <text class="mr-1px">
                Pending Amount
              </text>
              <wd-icon name="help-circle" size="20rpx" />
            </view>
            <view class="text-40rpx font-bold">
              {{ formatNumber(walletInfo.pendingAmount) }}
            </view>
          </view>
        </view>
      </view>
      <view class="mb-20rpx rounded-16rpx bg-white py-24rpx text-center">
        <view class="flex items-center justify-between">
          <view class="flex-[33.33%]">
            <view class="text-22rpx text-#5B5B5B">
              TD Earnings
            </view>
            <view class="text-26rpx font-bold">
              {{ formatNumber(walletInfo.tdeamings) }}
            </view>
          </view>
          <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
          <view class="flex-[33.33%]">
            <view class="text-22rpx text-#5B5B5B">
              YD Earnings
            </view>
            <view class="text-26rpx font-bold">
              {{ formatNumber(walletInfo.ydeamings) }}
            </view>
          </view>
          <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
          <view class="flex-[33.33%]">
            <view class="text-22rpx text-#5B5B5B">
              MTD Earnings
            </view>
            <view class="text-26rpx font-bold">
              {{ formatNumber(walletInfo.mtdeamings) }}
            </view>
          </view>
        </view>
      </view>
      <view class="mb-20rpx flex items-center justify-between gap-22rpx text-center text-32rpx">
        <view class="flex-1 rounded-16rpx bg-[rgba(var(--wot-color-theme-rgb),0.5)] py-32rpx shadow-[4rpx_4rpx_8rpx_0rpx_rgba(0,0,0,0.5)]">
          <text class="pr-16rpx">
            My Group Data
          </text>
          <wd-icon name="chevron-right-circle" size="32rpx" />
        </view>
        <view class="flex-1 rounded-16rpx bg-#FEE750/50 py-32rpx shadow-[4rpx_4rpx_8rpx_0rpx_rgba(0,0,0,0.5)]">
          <text class="pr-16rpx">
            Withdraw Now
          </text>
          <wd-icon name="chevron-right-circle" size="32rpx" />
        </view>
      </view>
      <view>
        <view class="mb-20rpx text-32rpx">
          Revenue Record
        </view>
        <view class="mb-20rpx">
          <wd-radio-group v-model="dayType" shape="button">
            <wd-radio :value="1">
              DT
            </wd-radio>
            <wd-radio :value="2">
              YT
            </wd-radio>
            <wd-radio :value="3">
              L7D
            </wd-radio>
            <wd-radio :value="4">
              MTD
            </wd-radio>
            <wd-radio :value="5">
              YTD
            </wd-radio>
          </wd-radio-group>
        </view>
        <view class="rounded-16rpx bg-white px-20rpx">
          <view
            v-for="i in 3" :key="i" class="py-20rpx"
            :class="{ 'border-b-1 border-b-solid border-b-#E1E1E1': i !== 3 }"
          >
            <view class="mb-8rpx flex items-center justify-between text-24rpx">
              <text class="truncate">
                Group Buying Reward：PPB123456789Reward：PPB123456789Reward：PPB123456789
              </text>
              <text class="flex-shrink-0 pl-16rpx">
                ৳ 8
              </text>
            </view>
            <view class="flex items-center justify-between text-22rpx">
              <text class="text-#5B5B5B">
                2025/05/05 12:30:30
              </text>
              <wd-text type="success" text="Completed" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
:deep(.wd-radio-group) {
  background: transparent;

  .wd-radio.is-button.is-checked {
    .wd-radio__label {
      background: #ff334a !important;
      border-color: #ff334a !important;
      color: #fff !important;
    }
  }

  .wd-radio__label {
    width: 100rpx !important;
    height: 40rpx !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(151, 151, 151, 0.2) !important;
  }
}
</style>