123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- <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>
|