完成分销页面分销明细状态筛选功能

pageMarket/distribution/index.vue

@@ -64,19 +64,16 @@
         >
           <view
             class="u-font-28 filter-box u-flex u-row-between"
-            @click="showTimeArea = true"
+            @click="showActions = true"
           >
-            <template
-             v-if="false"
-            >
-              <text class="u-font-20">
-               
-              </text>
+            <template v-if="selActions&&selActions.value">
+              <text class="u-font-28 u-m-r-10">{{ selActions.name }} </text>
             </template>
             <template v-else>
               <text class="color-999 u-m-r-10">全部</text>
-              <up-icon name="arrow-down" size="12"></up-icon>
             </template>
+            <up-icon name="arrow-down" size="12"></up-icon>
+
           </view>
           <view class="u-flex-1 filter-box" style="border-radius: 100rpx">
             <up-icon name="search" size="18"></up-icon>
@@ -109,25 +106,35 @@
         </view>
         <view v-if="active == 2" class="u-flex u-p-l-32 u-p-r-32 u-m-t-32">
           <view class="u-flex-1 u-text-center">
-                <view class="u-font-32 color-main font-bold">{{  listRes.totalCount}}</view>
+            <view class="u-font-32 color-main font-bold">{{
+              listRes.totalCount
+            }}</view>
             <view class="u-font-24 color-666 u-m-t-16">支付开通人数</view>
           </view>
           <view class="u-flex-1 u-text-center">
-                <view class="u-font-32 color-main font-bold">{{  listRes.totalAmount}}</view>
+            <view class="u-font-32 color-main font-bold">{{
+              listRes.totalAmount
+            }}</view>
             <view class="u-font-24 color-666 u-m-t-16">支付开通人数</view>
           </view>
         </view>
         <view v-if="active == 3" class="u-flex u-m-t-32">
           <view class="u-flex-1 u-text-center">
-                <view class="u-font-32 color-main font-bold">{{  listRes.successAmount}}</view>
+            <view class="u-font-32 color-main font-bold">{{
+              listRes.successAmount
+            }}</view>
             <view class="u-font-24 color-666 u-m-t-16">已入账金额（元）</view>
           </view>
           <view class="u-flex-1 u-text-center">
-                <view class="u-font-32 color-main font-bold">{{  listRes.pendingAmount||0}}</view>
+            <view class="u-font-32 color-main font-bold">{{
+              listRes.pendingAmount || 0
+            }}</view>
             <view class="u-font-24 color-666 u-m-t-16">待入账金额（元）</view>
           </view>
           <view class="u-flex-1 u-text-center">
-                <view class="u-font-32 color-main font-bold">{{  listRes.balanceAmount}}</view>
+            <view class="u-font-32 color-main font-bold">{{
+              listRes.balanceAmount
+            }}</view>
             <view class="u-font-24 color-666 u-m-t-16">
               <text>运营余额（元）</text>
               <text class="color-main" @click="go.to('PAGES_PAY')">充值></text>
@@ -171,7 +178,14 @@
       @confirm="confirmTimeArea"
     ></dateAreaSel>
 
-
+    <!-- 分销明细状态 -->
+    <up-action-sheet
+      :show="showActions"
+      :actions="actions"
+      @select="handleSelect"
+      @close="showActions = false"
+      cancel-text="取消"
+    ></up-action-sheet>
   </view>
 </template>
 <script setup>
@@ -196,6 +210,31 @@ import fenxiaoMingxiVue from "./components/fenxiao-mingxi.vue";
 
 import { useDistributionStore } from "@/store/market.js";
 import { reactive } from "vue";
+
+const actions = [
+  {
+    name: "全部",
+    value: "",
+  },
+  {
+    name: "已入账",
+    value: "success",
+  },
+  {
+    name: "待入账",
+    value: "pending",
+  },
+  {
+    name: "已退款",
+    value: "refund",
+  },
+];
+const selActions=ref('')
+const showActions = ref(false);
+function handleSelect(e) {
+    selActions.value = e;
+}
+
 const distributionStore = useDistributionStore();
 distributionStore.getConfig();
 provide("distributionStore", distributionStore);
@@ -278,15 +317,13 @@ watch(
   }
 );
 
-
-
 function refresh() {
   isEnd.value = false;
   pageNum.value = 1;
   getList();
 }
 
-const listRes=ref({})
+const listRes = ref({});
 async function getList() {
   let res = null;
   if (active.value == 1) {
@@ -323,6 +360,7 @@ async function getList() {
       page: pageNum.value,
       size: 10,
       key: userComponentQuery.user,
+      status: selActions.value.value,
       startTime: userComponentQuery.startTime
         ? userComponentQuery.startTime + " 00:00:00"
         : "",
@@ -332,7 +370,7 @@ async function getList() {
     });
   }
   if (res) {
-    listRes.value=res
+    listRes.value = res;
     if (pageNum.value == 1) {
       list.value = res.records || [];
     } else {
@@ -364,6 +402,9 @@ watch(
     refresh();
   }
 );
+watch(()=>selActions.value,()=>{
+  refresh()
+})
 onReachBottom(() => {
   if (!isEnd.value) {
     pageNum.value++;