售后列表

ghsApp/src/admin/billing/freeRefundList.vue

@@ -1,7 +1,7 @@
 <!--
   售后/退款记录列表
-  用途：工作台「退款记录」；顶部交互对齐 home/order.vue（日期+搜客户+筛选面板）。
-  接口：GET /refund/list?useDefaultLast30=1&sameDay=&customId=
+  用途：工作台「退款记录」；顶部对齐 home/order.vue（日期+搜客户+状态Tab+筛选）。
+  接口：GET /refund/list?useDefaultLast30=1&sameDay=&status=&customId=
 -->
 <template>
   <view class="app-content">
@@ -49,6 +49,19 @@
       </view>
     </view>
 
+    <!-- 状态 Tab：对齐 home/order.vue -->
+    <view class="app-tabs">
+      <app-tabs
+        :tabs="tabs"
+        :isFixed="false"
+        :top="50"
+        :currentTab="tabIndex"
+        :height="100"
+        itemWidth="20%"
+        @change="onTabChange"
+      />
+    </view>
+
     <view class="total-bar">合计 ¥{{ totalAmount }}</view>
 
     <view class="list-wrap">
@@ -133,7 +146,7 @@
       </block>
     </view>
 
-    <!-- 筛选面板：售后类型 -->
+    <!-- 筛选面板：仅售后类型（状态已提到顶部 Tab） -->
     <view v-if="showFilterPanel" class="filter-overlay" @click="closeFilterPanel">
       <view class="filter-panel" @click.stop>
         <view class="filter-header">筛选售后</view>
@@ -152,20 +165,6 @@
               </view>
             </view>
           </view>
-          <view class="filter-section">
-            <view class="filter-title">状态</view>
-            <view class="filter-options">
-              <view
-                v-for="(item, index) in statusOptions"
-                :key="index"
-                class="filter-option"
-                :class="{ active: filterStatus === item.value }"
-                @click="onSelectStatus(index)"
-              >
-                {{ item.label }}
-              </view>
-            </view>
-          </view>
         </scroll-view>
         <view class="filter-actions">
           <button class="filter-action-btn clear-btn" @click="clearFilters">重置</button>
@@ -179,6 +178,7 @@
 <script>
 import AppWrapperEmpty from '@/components/app-wrapper-empty'
 import AppSearchModule from '@/components/module/app-search'
+import AppTabs from '@/components/plugin/tabs'
 import DateSelect from '@/components/module/dateSelect'
 import { list } from '@/mixins'
 import { refundList } from '@/api/refund'
@@ -186,7 +186,7 @@ import { getList } from '@/api/member'
 
 export default {
   name: 'freeRefundList',
-  components: { AppWrapperEmpty, AppSearchModule, DateSelect },
+  components: { AppWrapperEmpty, AppSearchModule, AppTabs, DateSelect },
   mixins: [list],
   data() {
     return {
@@ -196,28 +196,34 @@ export default {
       totalAmount: 0,
       // -1全部 1当天售后 0隔天售后
       sameDay: -1,
-      filterStatus: -1,
       customId: 0,
       searchList: [],
       showSearch: false,
       showFilterPanel: false,
+      tabIndex: 0,
+      // id=-1 全部；其余与售后单 status 一致
+      tabs: [
+        { name: '全部', value: 0, id: -1 },
+        { name: '待审核', value: 0, id: 0 },
+        { name: '已通过', value: 0, id: 1 },
+        { name: '已驳回', value: 0, id: 2 },
+        { name: '已取消', value: 0, id: 3 }
+      ],
       sameDayOptions: [
         { label: '全部', value: -1 },
         { label: '当天售后', value: 1 },
         { label: '隔天售后', value: 0 }
-      ],
-      statusOptions: [
-        { label: '全部', value: -1 },
-        { label: '待审核', value: 0 },
-        { label: '已通过', value: 1 },
-        { label: '已驳回', value: 2 },
-        { label: '已取消', value: 3 }
       ]
     }
   },
   computed: {
     hasActiveFilters() {
-      return this.sameDay !== -1 || this.filterStatus !== -1
+      return this.sameDay !== -1
+    },
+    /** 当前 Tab 对应的 status，全部为 -1 */
+    filterStatus() {
+      const tab = this.tabs[this.tabIndex]
+      return tab ? tab.id : -1
     }
   },
   onLoad() {
@@ -315,15 +321,17 @@ export default {
         this.sameDay = item.value
       }
     },
-    onSelectStatus(index) {
-      const item = this.statusOptions[index]
-      if (item) {
-        this.filterStatus = item.value
+    /** 切换状态 Tab，刷新列表 */
+    onTabChange(e) {
+      if (this.tabIndex === e.index) {
+        return
       }
+      this.tabIndex = e.index
+      this.resetList()
+      this._list()
     },
     clearFilters() {
       this.sameDay = -1
-      this.filterStatus = -1
       this.resetDefaultDateRange()
       this.closeFilterPanel()
       this.resetList()
@@ -405,6 +413,10 @@ export default {
         this.totalAmount = res.data && res.data.totalRefundPrice != null
           ? parseFloat(res.data.totalRefundPrice)
           : 0
+        // Tab 角标：当前状态下的总条数
+        if (res.data && res.data.totalNum != null && this.tabs[this.tabIndex]) {
+          this.$set(this.tabs[this.tabIndex], 'value', res.data.totalNum)
+        }
       })
     }
   }
@@ -413,7 +425,8 @@ export default {
 
 <style lang="scss" scoped>
 .app-content {
-  padding-top: 100upx;
+  /* 搜索栏 100 + 状态 Tab 100 */
+  padding-top: 200upx;
 }
 /* 与 order.vue 一致的顶部客户联想层 */
 .search-float-wrap {
@@ -511,6 +524,14 @@ export default {
   border-radius: 50%;
   background-color: #3385ff;
 }
+.app-tabs {
+  position: fixed;
+  top: 100upx;
+  left: 0;
+  width: 100%;
+  z-index: 9;
+  background: #fff;
+}
 .total-bar {
   padding: 16upx 30upx;
   font-size: 26upx;