update

src/pages/changeLog/index.vue

@@ -5,7 +5,7 @@ import SQ from '../../static/icons/搜索.png';
 import XNav from "../../components/XNav.vue";
 import filer from "../../static/icons/filer-balck.png";
 import XFilter from "../../components/XFilter.vue";
-import {reactive, ref} from "vue";
+import {reactive, ref, watch} from "vue";
 import XFilterItem from "../../components/XFilterItem.vue";
 import XRadioGroup from "../../components/XRadioGroup.vue";
 import XRadio from "../../components/XRadio.vue";
@@ -15,10 +15,16 @@ import Api from "../../api/index.js";
 const isVague = ref(false);
 const showFilter = ref(false);
 const isSearch = ref(false);
-const po = reactive({});
-const vo = reactive({});
-const sumPo = reactive({
+const po = reactive({
+    status: 0,
+    keyword: null,
     type: 0,
+    order: 0,
+});
+const vo = reactive({
+    income: 0,
+    reward: 0,
+    total: 0,
 });
 
 const {loading, pagination, initFetchData} = useTableQuery({
@@ -28,6 +34,17 @@ const {loading, pagination, initFetchData} = useTableQuery({
         Object.assign(vo, data);
     }
 });
+
+watch(
+    () => po.status,
+    () => initFetchData(),
+    {deep: true}
+)
+
+const handleSeach = async () => {
+    if (po.keyword === null || po.keyword === "") isSearch.value = false;
+    await initFetchData();
+}
 </script>
 
 <template>
@@ -35,10 +52,11 @@ const {loading, pagination, initFetchData} = useTableQuery({
     <x-nav></x-nav>
 
     <x-filter
-        v-model:model="sumPo"
+        v-model:model="po"
+        @success="initFetchData"
         v-model:visible="showFilter">
         <x-filter-item label="成员类型">
-            <x-radio-group v-model:model-value="sumPo.type">
+            <x-radio-group v-model:model-value="po.type">
                 <view class="!grid grid-cols-3 gap-[24rpx]">
                     <x-radio :value="0">我邀请的</x-radio>
                     <x-radio :value="1">他人邀请的</x-radio>
@@ -46,7 +64,7 @@ const {loading, pagination, initFetchData} = useTableQuery({
             </x-radio-group>
         </x-filter-item>
         <x-filter-item label="排序类型">
-            <x-radio-group v-model:model-value="sumPo.type">
+            <x-radio-group v-model:model-value="po.order">
                 <view class="!grid grid-cols-3 gap-[24rpx]">
                     <x-radio :value="0">按收益</x-radio>
                     <x-radio :value="1">加入时间正序</x-radio>
@@ -70,28 +88,28 @@ const {loading, pagination, initFetchData} = useTableQuery({
     <view class="!mx-[20rpx] bg-[#fff] rounded-[20rpx] !mt-[20rpx]">
         <view class="balance-card">
             <view class="p-[24rpx] !flex items-center gap-[20rpx]">
-                <view class="radio radio-cur">今天</view>
-                <view class="radio">昨天</view>
-                <view class="radio">累计</view>
+                <view :class="['radio', po.status===1?'radio-cur':'']" @click="po.status=1">今天</view>
+                <view :class="['radio', po.status===2?'radio-cur':'']" @click="po.status=2">昨天</view>
+                <view :class="['radio', po.status===0?'radio-cur':'']" @click="po.status=0">累计</view>
             </view>
             <view class="gap-line"></view>
             <view class="py-[52rpx] px-[44rpx] !grid grid-cols-3">
                 <view>
                     <view class="info-title">新增成员(个)</view>
                     <view class="info-balance">
-                        4
+                        {{ vo.total }}
                     </view>
                 </view>
                 <view>
                     <view class="info-title">团队收益(元)</view>
                     <view class="info-balance">
-                        15.64
+                        {{ vo.income.toFixed(2) }}
                     </view>
                 </view>
                 <view>
                     <view class="info-title">团队奖励(元)</view>
                     <view class="info-balance">
-                        5.60
+                        {{ vo.reward.toFixed(2) }}
                     </view>
                 </view>
             </view>
@@ -108,7 +126,7 @@ const {loading, pagination, initFetchData} = useTableQuery({
         <view :class="['btn', isSearch?'search':'']" @click="isSearch=true">
             <image class="!size-[28rpx] flex-shrink-0" mode="aspectFill" :src="SQ"></image>
             <text v-if="!isSearch">搜索</text>
-            <input @blur="isSearch=false" v-else></input>
+            <input v-model="po.keyword" @blur="handleSeach" v-else></input>
         </view>
     </view>