抽取分装组件

pages/mall/admin/marketing/coupon/list.uvue

@@ -123,41 +123,22 @@
         </view>
 
         <!-- 分页 -->
-        <view class="pagination-footer" v-if="dataList.length > 0 || pageState.loading">
-          <text class="total-txt">共 {{ pageState.total }} 条</text>
-          
-          <picker class="page-select" :range="pageSizeOptionLabels" :value="pageSizeIndex" @change="handlePageSizeChange">
-            <view class="page-select-inner">
-              <text class="page-val">{{ pageState.pageSize }} 条/页</text>
-              <text class="arrow-down">▼</text>
-            </view>
-          </picker>
-
-          <view class="page-btns">
-            <view class="p-btn" :class="{ disabled: pageState.currentPage <= 1 }" @click="handlePageChange(pageState.currentPage - 1)">
-              <text>＜</text>
-            </view>
-            
-            <view 
-              v-for="(p, index) in visiblePages" 
-              :key="index" 
-              class="p-btn" 
-              :class="{ active: p === pageState.currentPage, 'ellipsis-btn': p === -1 }" 
-              @click="p !== -1 && handlePageChange(p)">
-              <text>{{ p === -1 ? '...' : p }}</text>
-            </view>
-            
-            <view class="p-btn" :class="{ disabled: pageState.currentPage >= totalPage }" @click="handlePageChange(pageState.currentPage + 1)">
-              <text>＞</text>
-            </view>
-          </view>
-
-          <view class="page-jump">
-            <text class="jump-txt">前往</text>
-            <input class="jump-input" type="number" v-model="pageState.jumpPageInput" @confirm="handleJumpPage" @blur="handleJumpPage" placeholder="页码" />
-            <text class="jump-txt">页</text>
-          </view>
-        </view>
+        <CommonPagination
+          v-if="dataList.length > 0 || pageState.loading"
+          :total="pageState.total"
+          :loading="pageState.loading"
+          :currentPage="pageState.currentPage"
+          :pageSize="pageState.pageSize"
+          :pageSizeOptionLabels="pageSizeOptionLabels"
+          :pageSizeIndex="pageSizeIndex"
+          :visiblePages="visiblePages"
+          :totalPage="totalPage"
+          :jumpPageInput="pageState.jumpPageInput"
+          @page-size-change="handlePageSizeChange"
+          @page-change="handlePageChange"
+          @update:jumpPageInput="(val : string) => { pageState.jumpPageInput = val }"
+          @jump-page="handleJumpPage"
+        />
 
         <!-- 空数据状态 -->
         <view class="table-empty" v-if="dataList.length === 0 && !pageState.loading">
@@ -201,6 +182,7 @@
 <script setup lang="uts">
 import { ref, reactive, onMounted, computed } from 'vue'
 import StatusSwitch from '@/components/StatusSwitch.uvue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 import supa from '@/components/supadb/aksupainstance.uts'
 
 interface CouponItem {
@@ -733,69 +715,6 @@ onMounted(() => {
   .op-links { flex-direction: column; align-items: center; }
 }
 
-/* 分页 */
-.pagination-footer {
-  padding: 16px 24px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 16px;
-  border-top: 1px solid #e8eaec;
-  background-color: #fff;
-}
-.total-txt { font-size: 14px; color: #515a6e; }
-
-.page-select {
-  border: 1px solid #dcdee2;
-  border-radius: 4px;
-  background-color: #fff;
-  cursor: pointer;
-  transition: border 0.2s;
-}
-.page-select:hover { border-color: #2d8cf0; }
-.page-select-inner {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 12px;
-  height: 32px;
-  gap: 8px;
-}
-.page-val { font-size: 14px; color: #515a6e; }
-
-.page-btns { display: flex; flex-direction: row; gap: 4px; }
-.p-btn { 
-  min-width: 32px; height: 32px; padding: 0 4px; border: 1px solid #dcdee2; border-radius: 4px; 
-  display: flex; align-items: center; justify-content: center; font-size: 14px; color: #515a6e;
-  background-color: #fff; cursor: pointer; transition: all 0.2s;
-}
-.p-btn:hover:not(.disabled):not(.active):not(.ellipsis-btn) {
-  border-color: #2d8cf0; color: #2d8cf0;
-}
-.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
-.p-btn.disabled { color: #c5c8ce; background-color: #f7f7f7; cursor: not-allowed; border-color: #dcdee2; }
-.p-btn.ellipsis-btn { border: none; cursor: default; }
-
-.page-jump {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-}
-.jump-txt { font-size: 14px; color: #515a6e; }
-.jump-input {
-  width: 50px;
-  height: 32px;
-  border: 1px solid #dcdee2;
-  border-radius: 4px;
-  text-align: center;
-  font-size: 14px;
-  color: #515a6e;
-  transition: border 0.2s;
-}
-.jump-input:focus { border-color: #2d8cf0; outline: none; }
-
 /* 空数据状态 */
 .table-empty {
   padding: 60px 0;