|
|
@@ -76,21 +76,13 @@ const listRef = ref();
|
|
|
const handleConfirm = (value: { startDate: string; endDate: string }) => {
|
|
|
defaultStart.value = value.startDate;
|
|
|
defaultEnd.value = value.endDate;
|
|
|
- sendIncomeData({
|
|
|
- timeType: activePeriod.value,
|
|
|
- startTime: defaultStart.value ? defaultStart.value + " 00:00:00" : "",
|
|
|
- endTime: defaultEnd.value ? defaultEnd.value + " 23:59:59" : "",
|
|
|
- });
|
|
|
+ sendIncomeData(paramsObj());
|
|
|
reloadListRef();
|
|
|
};
|
|
|
|
|
|
const reloadListRef = () => {
|
|
|
if (activePanel.value == 1) {
|
|
|
- listRef.value?.reloadList({
|
|
|
- startTime: defaultStart.value ? defaultStart.value + " 00:00:00" : "",
|
|
|
- endTime: defaultEnd.value ? defaultEnd.value + " 23:59:59" : "",
|
|
|
- timeType: activePeriod.value,
|
|
|
- });
|
|
|
+ listRef.value?.reloadList(paramsObj());
|
|
|
} else {
|
|
|
listRef.value?.reloadList({
|
|
|
inviteType: activeTabs.value,
|
|
|
@@ -138,11 +130,7 @@ function goDetails(item: any) {
|
|
|
|
|
|
const tabClick = (item: { label: string; value: string }) => {
|
|
|
activePeriod.value = item.value;
|
|
|
- sendIncomeData({
|
|
|
- timeType: activePeriod.value,
|
|
|
- startTime: defaultStart.value ? defaultStart.value + " 00:00:00" : "",
|
|
|
- endTime: defaultEnd.value ? defaultEnd.value + " 23:59:59" : "",
|
|
|
- });
|
|
|
+ sendIncomeData(paramsObj());
|
|
|
reloadListRef();
|
|
|
};
|
|
|
|
|
|
@@ -150,13 +138,17 @@ const activePanelClick = (item: { label: string; value: number }) => {
|
|
|
activePanel.value = item.value;
|
|
|
reloadListRef();
|
|
|
if (item.value === 1) {
|
|
|
- sendAmountStatistics({
|
|
|
- timeType: activePeriod.value,
|
|
|
- startTime: defaultStart.value ? defaultStart.value + " 00:00:00" : "",
|
|
|
- endTime: defaultEnd.value ? defaultEnd.value + " 23:59:59" : "",
|
|
|
- });
|
|
|
+ sendAmountStatistics(paramsObj());
|
|
|
}
|
|
|
};
|
|
|
+//参数
|
|
|
+const paramsObj = () => {
|
|
|
+ return {
|
|
|
+ timeType: activePeriod.value,
|
|
|
+ startTime: defaultStart.value ? defaultStart.value + " 00:00:00" : "",
|
|
|
+ endTime: defaultEnd.value ? defaultEnd.value + " 23:59:59" : "",
|
|
|
+ };
|
|
|
+};
|
|
|
|
|
|
const leaveClick = (item: { label: string; value: string }) => {
|
|
|
activeTabs.value = item.value;
|
|
|
@@ -178,27 +170,31 @@ const leaveClick = (item: { label: string; value: string }) => {
|
|
|
<view v-if="panelTabs.length === 2" class="panel-divider" />
|
|
|
</view>
|
|
|
|
|
|
- <view v-if="activePanel === 1" class="filter-box">
|
|
|
- <view class="list-filter">
|
|
|
- <view class="period-tabs">
|
|
|
- <view v-for="item in periodTabs" :key="item.value" class="period-tab"
|
|
|
- :class="{ active: activePeriod === item.value }" @tap="tabClick(item)">
|
|
|
- <text>{{ item.label }}</text>
|
|
|
+ <view v-if="activePanel === 1" class="filter-content">
|
|
|
+ <view class="filter-box">
|
|
|
+ <view class="filter-bar">
|
|
|
+ <view class="filter-tabs">
|
|
|
+ <view v-for="item in periodTabs" :key="item.value" class="period-tab"
|
|
|
+ :class="{ active: activePeriod === item.value }" @tap="tabClick(item)">
|
|
|
+ <text>{{ item.label }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="income-line"></view>
|
|
|
+ <view class="date-filter" @click='showPicker=true'>
|
|
|
+ <view class="date-filter-text">{{ dateRangeText }}</view>
|
|
|
+ <view class="caret" />
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="filter-divider" />
|
|
|
- <view class="date-filter" @click='showPicker=true'>
|
|
|
- <text>{{ dateRangeText }}</text>
|
|
|
- <view class="caret" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view v-else class="filter-box">
|
|
|
- <view class="income-filter">
|
|
|
- <view v-for="item in incomeFilterTabs" :key="item.value" class="period-tab"
|
|
|
- :class="{ active: activeTabs==item.value }" @tap="leaveClick(item)">
|
|
|
- <text>{{ item.label }}</text>
|
|
|
+ <view v-else class="filter-content">
|
|
|
+ <view class="filter-box">
|
|
|
+ <view class="filter-tabs">
|
|
|
+ <view v-for="item in incomeFilterTabs" :key="item.value" class="period-tab"
|
|
|
+ :class="{ active: activeTabs==item.value }" @tap="leaveClick(item)">
|
|
|
+ <text>{{ item.label }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -319,29 +315,34 @@ const leaveClick = (item: { label: string; value: string }) => {
|
|
|
}
|
|
|
|
|
|
// 筛选区域
|
|
|
+ .filter-content {
|
|
|
+ overflow: hidden;
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ border-bottom: 1rpx solid #d9d9d9;
|
|
|
+ }
|
|
|
+
|
|
|
.filter-box {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
width: 100%;
|
|
|
height: 92rpx;
|
|
|
- padding: 0 32rpx;
|
|
|
- background: #ffffff;
|
|
|
box-sizing: border-box;
|
|
|
- flex: 0 0 auto;
|
|
|
- border-bottom: 1rpx solid #d9d9d9;
|
|
|
+ align-items: center;
|
|
|
+ overflow-x: auto;
|
|
|
+ white-space: nowrap;
|
|
|
|
|
|
- .list-filter,
|
|
|
- .income-filter {
|
|
|
+ .filter-bar {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
- .period-tabs,
|
|
|
- .income-filter {
|
|
|
+ .filter-tabs {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 24rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.period-tab {
|
|
|
@@ -358,6 +359,7 @@ const leaveClick = (item: { label: string; value: string }) => {
|
|
|
line-height: 36rpx;
|
|
|
box-sizing: border-box;
|
|
|
white-space: nowrap;
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
&.active {
|
|
|
background: #ff5365;
|
|
|
@@ -365,23 +367,14 @@ const leaveClick = (item: { label: string; value: string }) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .filter-divider {
|
|
|
+ .income-line {
|
|
|
width: 1rpx;
|
|
|
height: 40rpx;
|
|
|
- margin: 0 39rpx 0 30rpx;
|
|
|
background: #d9d9d9;
|
|
|
+ margin: 0 39rpx 0 30rpx;
|
|
|
flex: 0 0 auto;
|
|
|
}
|
|
|
|
|
|
- .caret {
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- margin-left: 8rpx;
|
|
|
- border-left: 7rpx solid transparent;
|
|
|
- border-right: 7rpx solid transparent;
|
|
|
- border-top: 9rpx solid #333333;
|
|
|
- }
|
|
|
-
|
|
|
.date-filter {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -389,6 +382,17 @@ const leaveClick = (item: { label: string; value: string }) => {
|
|
|
font-size: 28rpx;
|
|
|
line-height: 28rpx;
|
|
|
white-space: nowrap;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .caret {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-left: 7rpx solid transparent;
|
|
|
+ border-right: 7rpx solid transparent;
|
|
|
+ border-top: 9rpx solid #333333;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -436,7 +440,7 @@ const leaveClick = (item: { label: string; value: string }) => {
|
|
|
width: 1rpx;
|
|
|
height: 30rpx;
|
|
|
background: #d9d9d9;
|
|
|
- margin-top:-15rpx;
|
|
|
+ margin-top: -15rpx;
|
|
|
}
|
|
|
}
|
|
|
|