|
|
@@ -2,14 +2,16 @@
|
|
|
import type { AccountDetailItem } from '@/api/income'
|
|
|
import { useRequest } from 'alova/client'
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
-import { ref } from 'vue'
|
|
|
+import { ref, watch } from 'vue'
|
|
|
import { getAccountCount } from '@/api/home'
|
|
|
-import { getCouponIssuerAccountByPageMap, PageMapResponse } from '@/api/income'
|
|
|
+import { getAccountDetailTotalAmount, getCouponIssuerAccountByPageMap } from '@/api/income'
|
|
|
+import { useScroll } from '@/hooks/useScroll'
|
|
|
|
|
|
import { LOGIN_PAGE } from '@/router/config'
|
|
|
import { useUserStore } from '@/store'
|
|
|
import { useTokenStore } from '@/store/token'
|
|
|
import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'
|
|
|
+import { getImageUrl } from '@/utils/imageUtil'
|
|
|
|
|
|
definePage({
|
|
|
style: {
|
|
|
@@ -25,7 +27,7 @@ const { userInfo } = storeToRefs(userStore)
|
|
|
const { hasLogin } = storeToRefs(tokenStore)
|
|
|
|
|
|
const show = ref(false)
|
|
|
-const filterValue = ref(Number(new Date()))
|
|
|
+const filterValue = ref(Date.now())
|
|
|
function confirm() {
|
|
|
// 函数实现
|
|
|
show.value = false
|
|
|
@@ -41,36 +43,90 @@ const { send: getAccountCountRequest, data: accountCountData } = useRequest(getA
|
|
|
immediate: false,
|
|
|
})
|
|
|
|
|
|
-const queryForm = ref({
|
|
|
- pageNo: 1,
|
|
|
- pageSize: 10,
|
|
|
- startTime: '',
|
|
|
- endTime: '',
|
|
|
- status: 0, // 0-待结算, 1-已结算/成功
|
|
|
- type: 1, // 明细类型: 1-佣金收入, 2-提现支出, 3-退款扣减, 4-系统调整
|
|
|
+const refreshing = ref(false)
|
|
|
+const status = ref(0) // 0-待结算, 1-已结算/成功
|
|
|
+const type = ref(1) // 明细类型: 1-佣金收入, 2-提现支出, 3-退款扣减, 4-系统调整
|
|
|
+
|
|
|
+const { send: getAccountDetailTotalAmountRequest, data: accountDetailTotalAmountData } = useRequest(() => getAccountDetailTotalAmount({ status: status.value, year: changtime(filterValue.value, 'YYYY'), month: changtime(filterValue.value, 'MM'), type: type.value }), {
|
|
|
+ immediate: false,
|
|
|
+})
|
|
|
+
|
|
|
+// 获取账户明细分页数据(Map格式)---待结算
|
|
|
+const {
|
|
|
+ list: pendingSettlementData,
|
|
|
+ loading: pendingSettlementLoading,
|
|
|
+ finished: pendingSettlementFinished,
|
|
|
+ refresh: pendingSettlementRefresh,
|
|
|
+ loadMore: pendingSettlementLoadMore,
|
|
|
+} = useScroll<AccountDetailItem>({
|
|
|
+ fetchData: async (page, pageSize) => {
|
|
|
+ const response = await getCouponIssuerAccountByPageMap({
|
|
|
+ pageNo: page,
|
|
|
+ pageSize,
|
|
|
+ status: 0,
|
|
|
+ year: changtime(filterValue.value, 'YYYY'),
|
|
|
+ month: changtime(filterValue.value, 'MM'),
|
|
|
+ type: type.value,
|
|
|
+ })
|
|
|
+ return response.detailList || []
|
|
|
+ },
|
|
|
+ pageSize: 5,
|
|
|
})
|
|
|
|
|
|
-// 获取账户明细分页数据(Map格式)
|
|
|
-const { send: getCouponIssuerAccountByPageMapRequest, data: couponIssuerAccountByPageMapData } = useRequest(
|
|
|
- getCouponIssuerAccountByPageMap,
|
|
|
- { immediate: false },
|
|
|
-)
|
|
|
+// 获取账户明细分页数据(Map格式)---已结算
|
|
|
+const {
|
|
|
+ list: settledData,
|
|
|
+ loading: settledLoading,
|
|
|
+ finished: settledFinished,
|
|
|
+ refresh: settledRefresh,
|
|
|
+ loadMore: settledLoadMore,
|
|
|
+} = useScroll<AccountDetailItem>({
|
|
|
+ fetchData: async (page, pageSize) => {
|
|
|
+ const response = await getCouponIssuerAccountByPageMap({
|
|
|
+ pageNo: page,
|
|
|
+ pageSize,
|
|
|
+ status: 1,
|
|
|
+ year: changtime(filterValue.value, 'YYYY'),
|
|
|
+ month: changtime(filterValue.value, 'MM'),
|
|
|
+ type: type.value,
|
|
|
+ })
|
|
|
+ return response.detailList || []
|
|
|
+ },
|
|
|
+ pageSize: 5,
|
|
|
+})
|
|
|
+
|
|
|
+// 下拉刷新
|
|
|
+async function onRefresh() {
|
|
|
+ refreshing.value = true
|
|
|
+ // 重置列表并重新加载数据
|
|
|
+ if (status.value === 0) {
|
|
|
+ await pendingSettlementRefresh()
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ await settledRefresh()
|
|
|
+ }
|
|
|
+ refreshing.value = false
|
|
|
+}
|
|
|
+
|
|
|
+// 上拉加载更多
|
|
|
+function onLoadMore() {
|
|
|
+ console.log(status.value, '执行了')
|
|
|
+ if (status.value === 0) {
|
|
|
+ pendingSettlementLoadMore()
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ settledLoadMore()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
const list = ref<AccountDetailItem[]>([])
|
|
|
|
|
|
onShow(async () => {
|
|
|
// 登录后查询收益数据
|
|
|
if (hasLogin) {
|
|
|
- try {
|
|
|
- await getAccountCountRequest()
|
|
|
- await getCouponIssuerAccountByPageMapRequest(queryForm.value)
|
|
|
- // 使用可选链和空值合并运算符避免undefined错误,直接赋值而非展开运算符
|
|
|
- list.value = couponIssuerAccountByPageMapData.value?.detailList || []
|
|
|
- }
|
|
|
- catch (error) {
|
|
|
- console.error('获取收益数据失败:', error)
|
|
|
- uni.showToast({ title: '获取数据失败', icon: 'error' })
|
|
|
- list.value = []
|
|
|
- }
|
|
|
+ await getAccountCountRequest()
|
|
|
+ await getAccountDetailTotalAmountRequest()
|
|
|
+ // 数据会在useScroll的onMounted中自动加载,这里不需要额外调用
|
|
|
}
|
|
|
})
|
|
|
|
|
|
@@ -79,26 +135,19 @@ function showTimeFilter() {
|
|
|
}
|
|
|
const wjsList = ref<AccountDetailItem[]>([])
|
|
|
const yjsList = ref<AccountDetailItem[]>([])
|
|
|
-onLoad(() => {
|
|
|
- list.value = wjsList.value
|
|
|
-})
|
|
|
const activeTab = ref('pending')
|
|
|
async function changeTab(tab: string) {
|
|
|
- console.log(999, activeTab.value, tab)
|
|
|
if (activeTab.value === tab)
|
|
|
return
|
|
|
activeTab.value = tab
|
|
|
- queryForm.value.status = tab === 'pending' ? 0 : 1
|
|
|
-
|
|
|
- try {
|
|
|
- await getCouponIssuerAccountByPageMapRequest(queryForm.value)
|
|
|
- // 使用可选链和空值合并运算符避免undefined错误,直接赋值而非展开运算符
|
|
|
- list.value = couponIssuerAccountByPageMapData.value?.detailList || []
|
|
|
+ status.value = tab === 'pending' ? 0 : 1
|
|
|
+ await getAccountDetailTotalAmountRequest()
|
|
|
+ // 切换标签时刷新对应列表数据
|
|
|
+ if (tab === 'pending') {
|
|
|
+ await pendingSettlementRefresh()
|
|
|
}
|
|
|
- catch (error) {
|
|
|
- console.error('切换标签页失败:', error)
|
|
|
- uni.showToast({ title: '获取数据失败', icon: 'error' })
|
|
|
- list.value = []
|
|
|
+ else {
|
|
|
+ await settledRefresh()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -110,41 +159,32 @@ function goPage(page: string) {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="profile-container">
|
|
|
+ <view class="profile-container"
|
|
|
+ :style="{ height: `calc(100vh - ${safeAreaInsets.top}px - ${safeAreaInsets.bottom}px)` }">
|
|
|
<!-- 顶部区域 -->
|
|
|
- <view
|
|
|
- class="income-header"
|
|
|
- style="background: url('../../static/images/income/income-bg.png') no-repeat center center; background-size: cover;"
|
|
|
- >
|
|
|
- <view
|
|
|
- class="income-header-avatar-info"
|
|
|
- :style="{ paddingTop: `${safeAreaInsets.top + menuButtonInfo.height + 12}px` }"
|
|
|
- >
|
|
|
+ <view class="income-header"
|
|
|
+ :style="{ background: `url(${getImageUrl('@img/income/income-bg.png')}) no-repeat center center`, backgroundSize: 'cover' }">
|
|
|
+ <view class="income-header-avatar-info"
|
|
|
+ :style="{ paddingTop: `${safeAreaInsets.top + menuButtonInfo.height + 12}px` }">
|
|
|
<view class="income-header-balance">
|
|
|
当前账户余额(元)
|
|
|
</view>
|
|
|
<view class="income-header-balance-num">
|
|
|
<view class="income-header-balance-num-amount">
|
|
|
- {{ accountCountData?.balance }}
|
|
|
+ {{ accountCountData?.balance || 0 }}
|
|
|
</view>
|
|
|
<view class="income-header-balance-num-btns">
|
|
|
- <view
|
|
|
- v-if="accountCountData?.status === 0"
|
|
|
- class="income-header-balance-num-btn js"
|
|
|
- @click="goPage('unlockRewards')"
|
|
|
- >
|
|
|
+ <view v-if="accountCountData?.status === 0" class="income-header-balance-num-btn js"
|
|
|
+ @click="goPage('unlockRewards')">
|
|
|
解锁
|
|
|
</view>
|
|
|
- <!-- <view class="income-header-balance-num-btn tx" @click="goPage('withdraw')">
|
|
|
- 提现
|
|
|
- </view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="income-header-tips">
|
|
|
<view class="income-header-tips-item">
|
|
|
<view class="income-header-tips-item-num">
|
|
|
- {{ accountCountData?.withdrawableAmount }}
|
|
|
+ {{ accountCountData?.withdrawableAmount || 0 }}
|
|
|
</view>
|
|
|
<view class="income-header-tips-item-des">
|
|
|
可提现金额
|
|
|
@@ -152,7 +192,7 @@ function goPage(page: string) {
|
|
|
</view>
|
|
|
<view class="income-header-tips-item">
|
|
|
<view class="income-header-tips-item-num">
|
|
|
- {{ accountCountData?.unsettledAmount }}
|
|
|
+ {{ accountCountData?.unsettledAmount || 0 }}
|
|
|
</view>
|
|
|
<view class="income-header-tips-item-des">
|
|
|
未结算金额
|
|
|
@@ -163,7 +203,7 @@ function goPage(page: string) {
|
|
|
<!-- 公告 -->
|
|
|
<view class="income-header-notice">
|
|
|
<view class="income-header-notice-icon">
|
|
|
- <image src="@/static/images/income/notice.png" mode="aspectFit" />
|
|
|
+ <image :src="getImageUrl('@img/income/notice.png')" mode="aspectFit" />
|
|
|
</view>
|
|
|
<view class="income-header-notice-content">
|
|
|
在考核周期内未达标已锁定收益,<text>前往查看~</text>
|
|
|
@@ -173,16 +213,12 @@ function goPage(page: string) {
|
|
|
<view class="income-header-menu">
|
|
|
<!-- 结算筛选 -->
|
|
|
<view class="income-header-menu-filter">
|
|
|
- <view
|
|
|
- class="income-header-menu-filter-item" :class="[activeTab === 'pending' ? 'active' : '']"
|
|
|
- @click="changeTab('pending')"
|
|
|
- >
|
|
|
+ <view class="income-header-menu-filter-item" :class="[activeTab === 'pending' ? 'active' : '']"
|
|
|
+ @click="changeTab('pending')">
|
|
|
待结算
|
|
|
</view>
|
|
|
- <view
|
|
|
- class="income-header-menu-filter-item" :class="[activeTab === 'settled' ? 'active' : '']"
|
|
|
- @click="changeTab('settled')"
|
|
|
- >
|
|
|
+ <view class="income-header-menu-filter-item" :class="[activeTab === 'settled' ? 'active' : '']"
|
|
|
+ @click="changeTab('settled')">
|
|
|
已结算
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -191,289 +227,328 @@ function goPage(page: string) {
|
|
|
<view class="income-menu-time-filter-text" @click="showTimeFilter">
|
|
|
<text>{{ changtime(filterValue) }}</text>
|
|
|
<up-icon name="arrow-down" color="#666666" size="14" />
|
|
|
+ <up-datetime-picker v-model="filterValue" :show="show" mode="year-month" close-on-click-overlay
|
|
|
+ @confirm="confirm" @cancel="cancel" />
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ 合计:¥{{ accountDetailTotalAmountData?.totalAmount || 0 }}
|
|
|
</view>
|
|
|
- <view>合计:¥{{ couponIssuerAccountByPageMapData?.totalAmount || 0 }}</view>
|
|
|
</view>
|
|
|
<!-- 优惠券列表 -->
|
|
|
- <view class="income-header-menu-list">
|
|
|
- <view v-for="item in list" :key="item.id" class="income-header-menu-item">
|
|
|
- <view class="income-header-menu-icon">
|
|
|
- <image v-if="activeTab === 'settled'" src="@/static/images/income/hb.png" mode="aspectFit" />
|
|
|
- <image v-else src="@/static/images/income/djs.png" mode="aspectFit" />
|
|
|
- <view class="income-header-menu-text">
|
|
|
- <view class="income-header-menu-text-nickname">
|
|
|
- {{ item.receiveUserName }}
|
|
|
+ <scroll-view class="income-header-menu-list" :scroll-y="true" :refresher-enabled="true"
|
|
|
+ :refresher-triggered="refreshing" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
|
|
|
+ <template v-for="item in activeTab === 'pending' ? pendingSettlementData || [] : settledData || []"
|
|
|
+ :key="item.id">
|
|
|
+ <view class="income-header-menu-item">
|
|
|
+ <view class="income-header-menu-icon">
|
|
|
+ <image v-if="activeTab === 'settled'" :src="getImageUrl('@img/income/hb.png')"
|
|
|
+ mode="aspectFit" />
|
|
|
+ <image v-else :src="getImageUrl('@img/income/djs.png')" mode="aspectFit" />
|
|
|
+ <view class="income-header-menu-text">
|
|
|
+ <view class="income-header-menu-text-nickname">
|
|
|
+ {{ item.receiveUserName }}
|
|
|
+ </view>
|
|
|
+ <view>{{ item.couponName }}</view>
|
|
|
</view>
|
|
|
- <view>{{ item.couponName }}</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="income-header-menu-left">
|
|
|
- <view class="income-header-menu-left-amount">
|
|
|
- ¥{{ item.changeAmount }}
|
|
|
- </view>
|
|
|
- <view class="income-header-menu-left-time">
|
|
|
- {{ item.settleTime }}
|
|
|
+ <view class="income-header-menu-left">
|
|
|
+ <view class="income-header-menu-left-amount">
|
|
|
+ ¥{{ item.changeAmount }}
|
|
|
+ </view>
|
|
|
+ <view class="income-header-menu-left-time">
|
|
|
+ {{ item.settleTime }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 加载状态提示 -->
|
|
|
+ <view v-if="(activeTab === 'pending' ? pendingSettlementLoading : settledLoading)" class="loading-tip">
|
|
|
+ 加载中...
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ <view
|
|
|
+ v-else-if="(activeTab === 'pending' ? pendingSettlementFinished : settledFinished) && (activeTab === 'pending' ? pendingSettlementData.length : settledData.length) > 0"
|
|
|
+ class="finished-tip">
|
|
|
+ 没有更多数据了
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 空状态 -->
|
|
|
+ <u-empty
|
|
|
+ v-if="(activeTab === 'pending' ? pendingSettlementData.length === 0 : settledData.length === 0)"
|
|
|
+ class="p-b-12 pt-12" mode="list" />
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
- <up-datetime-picker
|
|
|
- v-model="filterValue" :show="show" mode="year-month" close-on-click-overlay
|
|
|
- @confirm="confirm" @cancel="cancel"
|
|
|
- />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.profile-container {
|
|
|
- font-family: Alibaba PuHuiTi;
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #f5f5f5;
|
|
|
- line-height: 1;
|
|
|
-
|
|
|
- .income-header {
|
|
|
- height: 525rpx;
|
|
|
-
|
|
|
- .income-header-avatar-info {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 30rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
-
|
|
|
- .income-header-balance {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .income-header-balance-num {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ font-family: Alibaba PuHuiTi;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ line-height: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
- .income-header-balance-num-amount {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 65rpx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
+ /* 添加这行,设置容器高度为视口高度 */
|
|
|
|
|
|
- .income-header-balance-num-btns {
|
|
|
- display: flex;
|
|
|
- gap: 15rpx;
|
|
|
+ .income-header {
|
|
|
+ height: 525rpx;
|
|
|
|
|
|
- .income-header-balance-num-btn {
|
|
|
- padding: 20rpx 40rpx;
|
|
|
- border-radius: 33rpx;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 26rpx;
|
|
|
+ .income-header-avatar-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 30rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
|
|
|
- &.js {
|
|
|
- background: #da4c47;
|
|
|
- color: #ffffff;
|
|
|
+ .income-header-balance {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
|
|
|
- &.tx {
|
|
|
- background: #bfbfbf;
|
|
|
- color: #747474;
|
|
|
+ .income-header-balance-num {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .income-header-balance-num-amount {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 65rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .income-header-balance-num-btns {
|
|
|
+ display: flex;
|
|
|
+ gap: 15rpx;
|
|
|
+
|
|
|
+ .income-header-balance-num-btn {
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ border-radius: 33rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+
|
|
|
+ &.js {
|
|
|
+ background: #da4c47;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.tx {
|
|
|
+ background: #bfbfbf;
|
|
|
+ color: #747474;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .income-header-tips {
|
|
|
- height: 124rpx;
|
|
|
- display: flex;
|
|
|
- background: linear-gradient(114deg, #f67873, #fb847f, #f67873);
|
|
|
- border-radius: 10rpx;
|
|
|
- margin: 47rpx 24rpx 0 24rpx;
|
|
|
+ .income-header-tips {
|
|
|
+ height: 124rpx;
|
|
|
+ display: flex;
|
|
|
+ background: linear-gradient(114deg, #f67873, #fb847f, #f67873);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin: 47rpx 24rpx 0 24rpx;
|
|
|
+
|
|
|
+ .income-header-tips-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 34rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 1;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:first-child:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 0;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 2px;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .income-header-tips-item-num {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .income-header-tips-item-des {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .income-header-tips-item {
|
|
|
- flex: 1;
|
|
|
+ .income-header-notice {
|
|
|
+ margin: -50rpx 24rpx 24rpx 24rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 10rpx;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
align-items: center;
|
|
|
- gap: 15rpx;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 34rpx;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 1;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &:first-child:after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- right: 0;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 2px;
|
|
|
- height: 40rpx;
|
|
|
- background: #ffffff;
|
|
|
- }
|
|
|
+ gap: 20rpx;
|
|
|
+ padding: 28rpx 20rpx;
|
|
|
|
|
|
- .income-header-tips-item-num {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .income-header-notice-icon {
|
|
|
+ width: 52rpx;
|
|
|
+ height: 35rpx;
|
|
|
|
|
|
- .income-header-tips-item-des {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #ffffff;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .income-header-notice {
|
|
|
- margin: -50rpx 24rpx 24rpx 24rpx;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 10rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20rpx;
|
|
|
- padding: 28rpx 20rpx;
|
|
|
-
|
|
|
- .income-header-notice-icon {
|
|
|
- width: 52rpx;
|
|
|
- height: 35rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .income-header-notice-content {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333333;
|
|
|
+ .income-header-notice-content {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333333;
|
|
|
|
|
|
- text {
|
|
|
- color: #c52d27;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .income-header-menu {
|
|
|
- // background: #ffffff;
|
|
|
- border-radius: 10rpx 10rpx 0rpx 0rpx;
|
|
|
- margin: 24rpx 24rpx 0;
|
|
|
-
|
|
|
- .income-header-menu-filter {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #333333;
|
|
|
- height: 90rpx;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(213, 213, 213, 0.29);
|
|
|
- border-radius: 10rpx 10rpx 0rpx 0rpx;
|
|
|
-
|
|
|
- .income-header-menu-filter-item {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- &.active {
|
|
|
- color: #ed6b66;
|
|
|
-
|
|
|
- &:after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 67rpx;
|
|
|
- height: 6rpx;
|
|
|
- background: #ed6b66;
|
|
|
- border-radius: 3rpx;
|
|
|
- }
|
|
|
+ text {
|
|
|
+ color: #c52d27;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- .income-menu-time-filter {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333333;
|
|
|
- padding: 50rpx 20rpx 14rpx;
|
|
|
- background: #ffffff;
|
|
|
- margin-top: 4rpx;
|
|
|
-
|
|
|
- .income-menu-time-filter-text {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #000000;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .income-header-menu-list {
|
|
|
- background: #ffffff;
|
|
|
-
|
|
|
- .income-header-menu-item {
|
|
|
- height: 88rpx;
|
|
|
+ .income-header-menu {
|
|
|
+ // background: #ffffff;
|
|
|
+ border-radius: 10rpx 10rpx 0rpx 0rpx;
|
|
|
+ margin: 24rpx 24rpx 23rpx;
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
- padding: 32rpx 0 29rpx;
|
|
|
- margin: 0 20rpx;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 0;
|
|
|
+
|
|
|
+ .income-header-menu-filter {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ height: 90rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(213, 213, 213, 0.29);
|
|
|
+ border-radius: 10rpx 10rpx 0rpx 0rpx;
|
|
|
+
|
|
|
+ .income-header-menu-filter-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #ed6b66;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 67rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ background: #ed6b66;
|
|
|
+ border-radius: 3rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .income-header-menu-icon {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- gap: 19rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .income-header-menu-text {
|
|
|
+ .income-menu-time-filter {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
font-weight: 400;
|
|
|
font-size: 24rpx;
|
|
|
- color: #888888;
|
|
|
-
|
|
|
- .income-header-menu-text-nickname {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- margin-bottom: 18rpx;
|
|
|
+ color: #333333;
|
|
|
+ padding: 30rpx 20rpx 14rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ margin-top: 4rpx;
|
|
|
+
|
|
|
+ .income-menu-time-filter-text {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #000000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12rpx;
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- .income-header-menu-left {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #888888;
|
|
|
-
|
|
|
- .income-header-menu-left-amount {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- margin-bottom: 18rpx;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
+ .income-header-menu-list {
|
|
|
+ background: #ffffff;
|
|
|
+ flex: 1;
|
|
|
+ min-height: 200rpx;
|
|
|
+ overflow-y: auto;
|
|
|
+ /* 确保内容超出时可滚动 */
|
|
|
+
|
|
|
+ .income-header-menu-item {
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ padding: 32rpx 0 29rpx;
|
|
|
+ margin: 0 20rpx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .income-header-menu-icon {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 19rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .income-header-menu-text {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #888888;
|
|
|
+
|
|
|
+ .income-header-menu-text-nickname {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ margin-bottom: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .income-header-menu-left {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #888888;
|
|
|
+
|
|
|
+ .income-header-menu-left-amount {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ margin-bottom: 18rpx;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .loading-tip,
|
|
|
+ .finished-tip {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ color: #999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|