抽取分装组件

components/CommonPagination/CommonPagination.uvue

@@ -0,0 +1,145 @@
+<template>
+  <view class="pagination-footer">
+    <text class="total-txt">共 {{ total }} 条</text>
+
+    <picker class="page-select" :range="pageSizeOptionLabels" :value="pageSizeIndex" @change="onPageSizeChange">
+      <view class="page-select-inner">
+        <text class="page-val">{{ pageSize }} 条/页</text>
+        <text class="arrow-down">▼</text>
+      </view>
+    </picker>
+
+    <view class="page-btns">
+      <view class="p-btn" :class="{ disabled: currentPage <= 1 }" @click="onPageBtnClick(currentPage - 1)">
+        <text>＜</text>
+      </view>
+
+      <view
+        v-for="(p, index) in visiblePages"
+        :key="index"
+        class="p-btn"
+        :class="{ active: p === currentPage, 'ellipsis-btn': p === -1 }"
+        @click="onPageBtnClick(p)">
+        <text>{{ p === -1 ? '...' : p }}</text>
+      </view>
+
+      <view class="p-btn" :class="{ disabled: currentPage >= totalPage }" @click="onPageBtnClick(currentPage + 1)">
+        <text>＞</text>
+      </view>
+    </view>
+
+    <view class="page-jump">
+      <text class="jump-txt">前往</text>
+      <input
+        class="jump-input"
+        type="number"
+        :value="jumpPageInput"
+        @input="onJumpInputChange"
+        @confirm="onJumpPage"
+        @blur="onJumpPage"
+        placeholder="页码"
+      />
+      <text class="jump-txt">页</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+const props = defineProps({
+  total: { type: Number, default: 0 },
+  loading: { type: Boolean, default: false },
+  currentPage: { type: Number, default: 1 },
+  pageSize: { type: Number, default: 10 },
+  pageSizeOptionLabels: { type: Array, default: (): string[] => [] },
+  pageSizeIndex: { type: Number, default: 0 },
+  visiblePages: { type: Array, default: (): number[] => [] },
+  totalPage: { type: Number, default: 1 },
+  jumpPageInput: { type: String, default: '' }
+})
+
+const emit = defineEmits(['page-size-change', 'page-change', 'update:jumpPageInput', 'jump-page'])
+
+const onPageSizeChange = (e : any) => {
+  emit('page-size-change', e)
+}
+
+const onPageBtnClick = (p : number) => {
+  if (p !== -1) {
+    emit('page-change', p)
+  }
+}
+
+const onJumpInputChange = (e : any) => {
+  emit('update:jumpPageInput', e.detail.value as string)
+}
+
+const onJumpPage = () => {
+  emit('jump-page')
+}
+</script>
+
+<style scoped lang="scss">
+/* 分页 */
+.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; }
+.arrow-down { font-size: 10px; color: #c0c4cc; }
+
+.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; }
+</style>