income.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <route lang="json5">
  2. {
  3. layout: 'default',
  4. style: {
  5. navigationBarTitleText: 'Revenue Center',
  6. navigationBarBackgroundColor: '#fff',
  7. },
  8. }
  9. </route>
  10. <script lang="ts" setup>
  11. // eslint-disable-next-line unused-imports/no-unused-imports
  12. import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
  13. import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
  14. // 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
  15. import { getWalletInfo as _getWalletInfo, accountFlowList } from '@/api/wallet'
  16. import { formatNumber } from '@/utils'
  17. defineOptions({
  18. name: 'Income', // 收益
  19. })
  20. // z-paging
  21. const paging = ref(null)
  22. // 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
  23. useZPaging(paging)
  24. const dayType = ref(1)
  25. // 搜索结果
  26. const dataList = ref([])
  27. const walletInfo = ref<any>({})
  28. async function getWalletInfo() {
  29. const res = await _getWalletInfo()
  30. console.log(res)
  31. if (res.code === '200') {
  32. walletInfo.value = res.data
  33. }
  34. }
  35. async function queryList(pageNo, pageSize) {
  36. const data = {
  37. page: pageNo,
  38. size: pageSize,
  39. type: dayType.value,
  40. }
  41. try {
  42. const res = await accountFlowList(data)
  43. paging.value.complete(res.data.list)
  44. }
  45. catch (error) {
  46. paging.value.complete(false)
  47. }
  48. }
  49. onShow(() => {
  50. getWalletInfo()
  51. })
  52. </script>
  53. <template>
  54. <z-paging ref="paging" v-model="dataList" use-page-scroll @on-refresh="getWalletInfo" @query="queryList">
  55. <view class="px-24rpx pb-24rpx">
  56. <view
  57. 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"
  58. >
  59. <view class="mb-50rpx flex items-center justify-around text-center">
  60. <view>
  61. <view class="text-22rpx">
  62. Total Earnings
  63. </view>
  64. <view class="text-40rpx font-bold">
  65. {{ formatNumber(walletInfo.totalEarnings) }}
  66. </view>
  67. </view>
  68. <view>
  69. <view class="text-22rpx">
  70. Account Balance
  71. </view>
  72. <view class="relative text-40rpx font-bold">
  73. <text>{{ formatNumber(walletInfo.balance) }}</text>
  74. <wd-icon custom-class="absolute -right-24rpx top-1/2 -translate-y-1/2" name="arrow-right" size="24rpx" />
  75. </view>
  76. </view>
  77. </view>
  78. <view class="flex items-center justify-around text-center">
  79. <view>
  80. <view class="text-22rpx">
  81. <text class="mr-1px">
  82. Settled Amount
  83. </text>
  84. <wd-icon name="help-circle" size="20rpx" />
  85. </view>
  86. <view class="text-40rpx font-bold">
  87. {{ formatNumber(walletInfo.settledAmount) }}
  88. </view>
  89. </view>
  90. <wd-divider dashed custom-class="h-60rpx!" color="#A4A4A4" vertical />
  91. <view>
  92. <view class="text-22rpx">
  93. <text class="mr-1px">
  94. Pending Amount
  95. </text>
  96. <wd-icon name="help-circle" size="20rpx" />
  97. </view>
  98. <view class="text-40rpx font-bold">
  99. {{ formatNumber(walletInfo.pendingAmount) }}
  100. </view>
  101. </view>
  102. </view>
  103. </view>
  104. <view class="mb-20rpx rounded-16rpx bg-white py-24rpx text-center">
  105. <view class="flex items-center justify-between">
  106. <view class="flex-[33.33%]">
  107. <view class="text-22rpx text-#5B5B5B">
  108. TD Earnings
  109. </view>
  110. <view class="text-26rpx font-bold">
  111. {{ formatNumber(walletInfo.tdeamings) }}
  112. </view>
  113. </view>
  114. <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
  115. <view class="flex-[33.33%]">
  116. <view class="text-22rpx text-#5B5B5B">
  117. YD Earnings
  118. </view>
  119. <view class="text-26rpx font-bold">
  120. {{ formatNumber(walletInfo.ydeamings) }}
  121. </view>
  122. </view>
  123. <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
  124. <view class="flex-[33.33%]">
  125. <view class="text-22rpx text-#5B5B5B">
  126. MTD Earnings
  127. </view>
  128. <view class="text-26rpx font-bold">
  129. {{ formatNumber(walletInfo.mtdeamings) }}
  130. </view>
  131. </view>
  132. </view>
  133. </view>
  134. <view class="mb-20rpx flex items-center justify-between gap-22rpx text-center text-32rpx">
  135. <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)]">
  136. <text class="pr-16rpx">
  137. My Group Data
  138. </text>
  139. <wd-icon name="chevron-right-circle" size="32rpx" />
  140. </view>
  141. <view class="flex-1 rounded-16rpx bg-#FEE750/50 py-32rpx shadow-[4rpx_4rpx_8rpx_0rpx_rgba(0,0,0,0.5)]">
  142. <text class="pr-16rpx">
  143. Withdraw Now
  144. </text>
  145. <wd-icon name="chevron-right-circle" size="32rpx" />
  146. </view>
  147. </view>
  148. <view>
  149. <view class="mb-20rpx text-32rpx">
  150. Revenue Record
  151. </view>
  152. <view class="mb-20rpx">
  153. <wd-radio-group v-model="dayType" shape="button">
  154. <wd-radio :value="1">
  155. DT
  156. </wd-radio>
  157. <wd-radio :value="2">
  158. YT
  159. </wd-radio>
  160. <wd-radio :value="3">
  161. L7D
  162. </wd-radio>
  163. <wd-radio :value="4">
  164. MTD
  165. </wd-radio>
  166. <wd-radio :value="5">
  167. YTD
  168. </wd-radio>
  169. </wd-radio-group>
  170. </view>
  171. <view class="rounded-16rpx bg-white px-20rpx">
  172. <view
  173. v-for="i in 3" :key="i" class="py-20rpx"
  174. :class="{ 'border-b-1 border-b-solid border-b-#E1E1E1': i !== 3 }"
  175. >
  176. <view class="mb-8rpx flex items-center justify-between text-24rpx">
  177. <text class="truncate">
  178. Group Buying Reward:PPB123456789Reward:PPB123456789Reward:PPB123456789
  179. </text>
  180. <text class="flex-shrink-0 pl-16rpx">
  181. ৳ 8
  182. </text>
  183. </view>
  184. <view class="flex items-center justify-between text-22rpx">
  185. <text class="text-#5B5B5B">
  186. 2025/05/05 12:30:30
  187. </text>
  188. <wd-text type="success" text="Completed" />
  189. </view>
  190. </view>
  191. </view>
  192. </view>
  193. </view>
  194. </z-paging>
  195. </template>
  196. <style lang="scss" scoped>
  197. :deep(.wd-radio-group) {
  198. background: transparent;
  199. .wd-radio.is-button.is-checked {
  200. .wd-radio__label {
  201. background: #ff334a !important;
  202. border-color: #ff334a !important;
  203. color: #fff !important;
  204. }
  205. }
  206. .wd-radio__label {
  207. width: 100rpx !important;
  208. height: 40rpx !important;
  209. padding: 0 !important;
  210. background: rgba(255, 255, 255, 0.2) !important;
  211. border-color: rgba(151, 151, 151, 0.2) !important;
  212. }
  213. }
  214. </style>