|
@@ -1,47 +1,214 @@
|
|
-<!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page;推荐使用json5,更强大,且允许注释 -->
|
|
|
|
<route lang="json5">
|
|
<route lang="json5">
|
|
-{
|
|
|
|
- layout: 'tabbar',
|
|
|
|
- style: {
|
|
|
|
- // 'custom' 表示开启自定义导航栏,默认 'default'
|
|
|
|
- navigationStyle: 'custom',
|
|
|
|
- navigationBarTitleText: '首页',
|
|
|
|
- },
|
|
|
|
-}
|
|
|
|
-</route>
|
|
|
|
|
|
+ {
|
|
|
|
+ layout: 'default',
|
|
|
|
+ style: {
|
|
|
|
+ navigationBarTitleText: 'Revenue Center',
|
|
|
|
+ navigationBarBackgroundColor: '#fff',
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ </route>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<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'
|
|
|
|
+
|
|
defineOptions({
|
|
defineOptions({
|
|
- name: 'Income',
|
|
|
|
|
|
+ name: 'Income', // 收益
|
|
})
|
|
})
|
|
|
|
|
|
-// 获取屏幕边界到安全区域距离
|
|
|
|
-let safeAreaInsets
|
|
|
|
-let systemInfo
|
|
|
|
-
|
|
|
|
-// #ifdef MP-WEIXIN
|
|
|
|
-// 微信小程序使用新的API
|
|
|
|
-systemInfo = uni.getWindowInfo()
|
|
|
|
-safeAreaInsets = systemInfo.safeArea
|
|
|
|
- ? {
|
|
|
|
- top: systemInfo.safeArea.top,
|
|
|
|
- right: systemInfo.windowWidth - systemInfo.safeArea.right,
|
|
|
|
- bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
|
|
|
|
- left: systemInfo.safeArea.left,
|
|
|
|
- }
|
|
|
|
- : null
|
|
|
|
-// #endif
|
|
|
|
-
|
|
|
|
-// #ifndef MP-WEIXIN
|
|
|
|
-// 其他平台继续使用uni API
|
|
|
|
-systemInfo = uni.getSystemInfoSync()
|
|
|
|
-safeAreaInsets = systemInfo.safeAreaInsets
|
|
|
|
-// #endif
|
|
|
|
|
|
+// z-paging
|
|
|
|
+const paging = ref(null)
|
|
|
|
+// 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
|
|
|
|
+useZPaging(paging)
|
|
|
|
+
|
|
|
|
+const dayType = ref(1)
|
|
|
|
+
|
|
|
|
+// 搜索结果
|
|
|
|
+const dataList = ref([])
|
|
|
|
+function queryList(pageNo, pageSize) {
|
|
|
|
+ // 此处请求仅为演示,请替换为自己项目中的请求
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ dataList.value = [
|
|
|
|
+ { title: '123' },
|
|
|
|
+ { title: '123' },
|
|
|
|
+ { title: '123' },
|
|
|
|
+ { title: '12345' },
|
|
|
|
+ ]
|
|
|
|
+ paging.value.complete(dataList.value)
|
|
|
|
+ }, 1000)
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
- <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
|
|
|
|
- 121212312312
|
|
|
|
- </view>
|
|
|
|
- <tabbar />
|
|
|
|
|
|
+ <z-paging ref="paging" refresher-only use-page-scroll @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">
|
|
|
|
+ 152,418
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view>
|
|
|
|
+ <view class="text-22rpx">
|
|
|
|
+ Account Balance
|
|
|
|
+ </view>
|
|
|
|
+ <view class="relative text-40rpx font-bold">
|
|
|
|
+ <text>51,200</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">
|
|
|
|
+ 102,566
|
|
|
|
+ </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">
|
|
|
|
+ 28,925
|
|
|
|
+ </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">
|
|
|
|
+ 12,566
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
|
|
|
|
+ <view class="flex-[33.33%]">
|
|
|
|
+ <view class="text-22rpx text-#5B5B5B">
|
|
|
|
+ TD Earnings
|
|
|
|
+ </view>
|
|
|
|
+ <view class="text-26rpx font-bold">
|
|
|
|
+ 12,566
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
|
|
|
|
+ <view class="flex-[33.33%]">
|
|
|
|
+ <view class="text-22rpx text-#5B5B5B">
|
|
|
|
+ TD Earnings
|
|
|
|
+ </view>
|
|
|
|
+ <view class="text-26rpx font-bold">
|
|
|
|
+ 12,566
|
|
|
|
+ </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">
|
|
|
|
+ My Group Data
|
|
|
|
+ </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>
|
|
</template>
|
|
|
|
+
|
|
|
|
+<style>
|
|
|
|
+page {
|
|
|
|
+ background: #f5f5f5;
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+
|
|
|
|
+<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>
|