From f34818363c8ba09d52424cea4c7c252383f475d9 Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Thu, 14 Apr 2022 09:35:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/workspace.xml                           |  10 +-
 components/pagination/pagination.vue          |  63 +++++--
 components/pagination/readme.md               |  22 +++
 pages/pagination/pagination.vue               |  53 +++++-
 uni_modules/zb-pagination/changelog.md        |   0
 .../zb-pagination/zb-pagination.vue           | 174 ++++++++++++++++++
 uni_modules/zb-pagination/package.json        |  80 ++++++++
 uni_modules/zb-pagination/readme.md           |  26 +++
 8 files changed, 401 insertions(+), 27 deletions(-)
 create mode 100644 components/pagination/readme.md
 create mode 100644 uni_modules/zb-pagination/changelog.md
 create mode 100644 uni_modules/zb-pagination/components/zb-pagination/zb-pagination.vue
 create mode 100644 uni_modules/zb-pagination/package.json
 create mode 100644 uni_modules/zb-pagination/readme.md

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1c02fec..f6866d9 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,9 +2,10 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="be7958c3-0d1c-4f74-a433-b590462e7034" name="Default Changelist" comment="修改 回显问题">
-      <change afterPath="$PROJECT_DIR$/components/pagination/pagination.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/components/pagination/readme.md" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/pages.json" beforeDir="false" afterPath="$PROJECT_DIR$/pages.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/components/pagination/pagination.vue" beforeDir="false" afterPath="$PROJECT_DIR$/components/pagination/pagination.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pages/pagination/pagination.vue" beforeDir="false" afterPath="$PROJECT_DIR$/pages/pagination/pagination.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -41,7 +42,7 @@
       <recent name="E:\dingw\pr2\zzb-table\components\pagination" />
     </key>
   </component>
-  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="false" />
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
   <component name="SvnConfiguration">
     <configuration />
   </component>
@@ -61,6 +62,7 @@
       <workItem from="1649463533571" duration="2789000" />
       <workItem from="1649581552050" duration="598000" />
       <workItem from="1649679884528" duration="1510000" />
+      <workItem from="1649843989655" duration="5216000" />
     </task>
     <task id="LOCAL-00001" summary="修改 回显问题">
       <created>1648190576831</created>
@@ -73,7 +75,7 @@
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="1" />
+    <option name="version" value="3" />
   </component>
   <component name="Vcs.Log.Tabs.Properties">
     <option name="TAB_STATES">
diff --git a/components/pagination/pagination.vue b/components/pagination/pagination.vue
index 96f14cc..869c464 100644
--- a/components/pagination/pagination.vue
+++ b/components/pagination/pagination.vue
@@ -1,5 +1,6 @@
 <template>
 	<view class="zb-pagination">
+    <view class="item-total" v-if="layout.includes('total')">共{{total}}条</view>
     <view class="item__left">
       <view class="first-page"
             v-if="layout.includes('first')"
@@ -13,16 +14,16 @@
     <view class="item__center">
       <text class="currentInnerPage">{{ currentInnerPage }}</text>
       <text>/</text>
-      <text>{{this.total}}</text>
+      <text>{{this.pageNumber}}</text>
     </view>
     <view class="item__right">
       <view class="next-page"
             v-if="layout.includes('next')"
             @click="btnOperation('next')"
-            :class="{disabled:currentInnerPage==total}">{{ nextText }}</view>
+            :class="{disabled:currentInnerPage==pageNumber}">{{ nextText }}</view>
       <view class="last-page"
             v-if="layout.includes('last')"
-            :class="{disabled:currentInnerPage==total}"
+            :class="{disabled:currentInnerPage==pageNumber}"
             @click="btnOperation('last')">尾页</view>
     </view>
 	</view>
@@ -35,6 +36,10 @@
         type:Number,
         default:0
       },
+      pageSize:{
+        type:Number,
+        default:10
+      },
       prevText:{
         type:String,
         default:'上一页'
@@ -51,10 +56,23 @@
         type:String,
         default:'下一页'
       }
+    },
+    computed:{
+	    pageNumber(){
+	      return Math.ceil(this.total/this.pageSize)
+      },
+    },
+    watch:{
+      currentPage:{
+        handler(val){
+          this.currentInnerPage = val
+        },
+        immediate:true
+      }
     },
 		data() {
 			return {
-        currentInnerPage:this.currentPage,
+        currentInnerPage:1,
         isDisabled:false
 			}
 		},
@@ -63,23 +81,23 @@
         switch (type) {
           case 'first':
             this.currentInnerPage = 1
-              this.$emit('current-change',this.currentInnerPage)
+              this.$emit('current-change',this.currentInnerPage,type)
             break;
           case 'prev':
-            if(this.currentInnerPage==1){
+            if(this.pageNumber==1){
               return false
             }
             this.currentInnerPage--
-            this.$emit('current-change',this.currentInnerPage)
+            this.$emit('current-change',this.currentInnerPage,type)
             break;
           case 'next':
-              if(this.currentInnerPage==this.total){return false}
+              if(this.currentInnerPage==this.pageNumber){return false}
               this.currentInnerPage++
-            this.$emit('current-change',this.currentInnerPage)
+            this.$emit('current-change',this.currentInnerPage,type)
             break;
           case 'last':
-            this.currentInnerPage = this.total
-            this.$emit('current-change',this.currentInnerPage)
+            this.currentInnerPage = this.pageNumber
+            this.$emit('current-change',this.currentInnerPage,type)
             break;
         }
       }
@@ -91,7 +109,13 @@
 .zb-pagination{
   display: flex;
   flex-direction: row;
-
+  .item-total{
+    font-size: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 4px;
+  }
   .item__left{
     display: flex;
     flex-direction: row;
@@ -112,19 +136,24 @@
   color: #007aff;
 }
 .first-page{
-  margin-right: 8px;
+  margin-right: 4px;
 }
 .last-page{
-  margin-left: 8px;
+  margin-left: 4px;
 }
 .first-page,
 .prev-page,
 .next-page,
 .last-page {
   cursor: pointer;
-  font-size: 27rpx;
-  // padding: 14rpx 25rpx;
-  padding: 8px 12px;
+  // font-size: 27rpx;
+  font-size: 13px;
+   // padding: 14rpx 25rpx;
+   // padding: 12rpx 22rpx;
+  padding: 4px 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   box-sizing: border-box;
   background-color: #f8f8f8;
   border: 1px solid #e5e5e5;
diff --git a/components/pagination/readme.md b/components/pagination/readme.md
new file mode 100644
index 0000000..e58af3c
--- /dev/null
+++ b/components/pagination/readme.md
@@ -0,0 +1,22 @@
+## 介绍
+基于uni-app开发的一个分页组件
+
+
+## qq群 731805264
+## -- github 永远保持最新，有啥想法的可以提PR,共同开发 [地址](https://github.com/zouzhibin/vue-admin-perfect)
+
+## drawer属性
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |是否必须|
+| ------ | ------ | ------ | ------ | ------ |------ |
+| total | 总条目数 | number | -- | -- |是|
+| page-size | 每页显示条目个数 | number | -- | 10|否|
+| current-page | 当前页数 | number | -- | 1|否|
+| layout | 组件布局，子组件名用逗号分隔 | string | total,first,prev,next,last| first,prev,next,last|否|
+| prevText | 上一页文字 | string | -- | 上一页|否|
+| nextText | 下一页文字 | string | -- | 下一页|否|
+
+
+## 事件
+|事件名称 | 说明 | 参数|
+| ------ | ------ | ------ |
+| current-change | currentPage 改变时会触发 | 当前页|
diff --git a/pages/pagination/pagination.vue b/pages/pagination/pagination.vue
index a696fb4..0d6b24c 100644
--- a/pages/pagination/pagination.vue
+++ b/pages/pagination/pagination.vue
@@ -1,16 +1,40 @@
 <template>
 	<view class="zb-pagination">
-    <zb-pagination
-        :current-page="2"
-        :total="5" @current-change="handleCurrentChange"/>
+    <uni-card title="全部功能" >
+      <zb-pagination
+          :current-page="2"
+          :total="45"
+          layout="first,prev,next,last,total"
+          :page-size="10"
+          @current-change="handleCurrentChange"/>
+    </uni-card>
+
+    <uni-card title="简单功能" >
+      <zb-pagination
+          :current-page="2"
+          :total="45"
+          layout="prev,next"
+          :page-size="10"
+          @current-change="handleCurrentChange"/>
+    </uni-card>
+
+    <uni-card title="总条数" >
+      <zb-pagination
+          :current-page="2"
+          :total="45"
+          layout="total,prev,next"
+          :page-size="10"
+          @current-change="handleCurrentChange"/>
+    </uni-card>
+
 	</view>
 </template>
 
 <script>
-import ZbPagination from '../../components/pagination/pagination'
+// import ZbPagination from '../../components/pagination/pagination'
 	export default {
     components:{
-      ZbPagination
+      // ZbPagination
     },
 		data() {
 			return {
@@ -19,6 +43,11 @@ import ZbPagination from '../../components/pagination/pagination'
 		},
 		methods: {
       handleCurrentChange(val){
+        uni.showToast({
+          icon:'none',
+          duration:3000,
+          title:`当前页: ${val}`
+        })
         console.log(`当前页: ${val}`);
       }
 		}
@@ -26,5 +55,17 @@ import ZbPagination from '../../components/pagination/pagination'
 </script>
 
 <style lang="scss" scoped>
-
+::v-deep{
+  .uni-card{
+    margin: 0px!important;
+    padding: 8px!important;
+    .uni-card__content{
+      padding: 0!important;
+      padding-top: 8px!important;
+    }
+  }
+  .uni-card__header{
+    padding-left: 0!important;
+  }
+}
 </style>
diff --git a/uni_modules/zb-pagination/changelog.md b/uni_modules/zb-pagination/changelog.md
new file mode 100644
index 0000000..e69de29
diff --git a/uni_modules/zb-pagination/components/zb-pagination/zb-pagination.vue b/uni_modules/zb-pagination/components/zb-pagination/zb-pagination.vue
new file mode 100644
index 0000000..869c464
--- /dev/null
+++ b/uni_modules/zb-pagination/components/zb-pagination/zb-pagination.vue
@@ -0,0 +1,174 @@
+<template>
+	<view class="zb-pagination">
+    <view class="item-total" v-if="layout.includes('total')">共{{total}}条</view>
+    <view class="item__left">
+      <view class="first-page"
+            v-if="layout.includes('first')"
+            :class="{disabled:currentInnerPage==1}"
+            @click="btnOperation('first')">首页</view>
+      <view class="prev-page"
+            v-if="layout.includes('prev')"
+            :class="{disabled:currentInnerPage==1}"
+            @click="btnOperation('prev')">{{ prevText }}</view>
+    </view>
+    <view class="item__center">
+      <text class="currentInnerPage">{{ currentInnerPage }}</text>
+      <text>/</text>
+      <text>{{this.pageNumber}}</text>
+    </view>
+    <view class="item__right">
+      <view class="next-page"
+            v-if="layout.includes('next')"
+            @click="btnOperation('next')"
+            :class="{disabled:currentInnerPage==pageNumber}">{{ nextText }}</view>
+      <view class="last-page"
+            v-if="layout.includes('last')"
+            :class="{disabled:currentInnerPage==pageNumber}"
+            @click="btnOperation('last')">尾页</view>
+    </view>
+	</view>
+</template>
+
+<script>
+	export default {
+	  props:{
+      total:{
+        type:Number,
+        default:0
+      },
+      pageSize:{
+        type:Number,
+        default:10
+      },
+      prevText:{
+        type:String,
+        default:'上一页'
+      },
+      currentPage:{
+        type:Number,
+        default:1
+      },
+      layout: {
+        type:String,
+        default:'first,prev,next,last'
+      },
+      nextText:{
+        type:String,
+        default:'下一页'
+      }
+    },
+    computed:{
+	    pageNumber(){
+	      return Math.ceil(this.total/this.pageSize)
+      },
+    },
+    watch:{
+      currentPage:{
+        handler(val){
+          this.currentInnerPage = val
+        },
+        immediate:true
+      }
+    },
+		data() {
+			return {
+        currentInnerPage:1,
+        isDisabled:false
+			}
+		},
+		methods: {
+      btnOperation(type){
+        switch (type) {
+          case 'first':
+            this.currentInnerPage = 1
+              this.$emit('current-change',this.currentInnerPage,type)
+            break;
+          case 'prev':
+            if(this.pageNumber==1){
+              return false
+            }
+            this.currentInnerPage--
+            this.$emit('current-change',this.currentInnerPage,type)
+            break;
+          case 'next':
+              if(this.currentInnerPage==this.pageNumber){return false}
+              this.currentInnerPage++
+            this.$emit('current-change',this.currentInnerPage,type)
+            break;
+          case 'last':
+            this.currentInnerPage = this.pageNumber
+            this.$emit('current-change',this.currentInnerPage,type)
+            break;
+        }
+      }
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.zb-pagination{
+  display: flex;
+  flex-direction: row;
+  .item-total{
+    font-size: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 4px;
+  }
+  .item__left{
+    display: flex;
+    flex-direction: row;
+  }
+  .item__center{
+    flex: 1;
+	 display: flex;
+	 flex-direction: row;
+	 justify-content: center;
+	 align-items: center;
+  }
+  .item__right{
+    display: flex;
+    flex-direction: row;
+  }
+}
+.currentInnerPage{
+  color: #007aff;
+}
+.first-page{
+  margin-right: 4px;
+}
+.last-page{
+  margin-left: 4px;
+}
+.first-page,
+.prev-page,
+.next-page,
+.last-page {
+  cursor: pointer;
+  // font-size: 27rpx;
+  font-size: 13px;
+   // padding: 14rpx 25rpx;
+   // padding: 12rpx 22rpx;
+  padding: 4px 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  background-color: #f8f8f8;
+  border: 1px solid #e5e5e5;
+  white-space: nowrap;
+
+}
+.first-page:active,
+.prev-page:active,
+.next-page:active,
+.last-page:active {
+  opacity: 0.6;
+
+}
+.disabled{
+  pointer-events: none;
+  opacity: 0.5;
+}
+</style>
diff --git a/uni_modules/zb-pagination/package.json b/uni_modules/zb-pagination/package.json
new file mode 100644
index 0000000..87633f7
--- /dev/null
+++ b/uni_modules/zb-pagination/package.json
@@ -0,0 +1,80 @@
+{
+  "id": "zb-pagination",
+  "displayName": "zb-pagination",
+  "version": "1.0.0",
+  "description": "zb-pagination",
+  "keywords": [
+    "zb-pagination"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "",
+      "data": "",
+      "permissions": ""
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "u",
+        "aliyun": "u"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "u",
+          "vue3": "u"
+        },
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "u",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "u",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/zb-pagination/readme.md b/uni_modules/zb-pagination/readme.md
new file mode 100644
index 0000000..4609eeb
--- /dev/null
+++ b/uni_modules/zb-pagination/readme.md
@@ -0,0 +1,26 @@
+## 介绍
+基于uni-app开发的一个分页组件
+
+
+## qq群 731805264  
+## -- github 第一时间会更新到github，永远保持最新，有啥想法的可以提PR,共同开发 [地址](https://github.com/zouzhibin/zb-ui)
+
+## 友情链接
+#### vue-admin-perfect —— [企业级、通用型中后台前端解决方案（基于vue3.0+TS+Element-Plus  最新版，同时支持电脑，手机，平板)](https://github.com/zouzhibin/vue-admin-perfect)
+
+
+## drawer属性
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |是否必须|
+| ------ | ------ | ------ | ------ | ------ |------ |
+| total | 总条目数 | number | -- | -- |是|
+| page-size | 每页显示条目个数 | number | -- | 10|否|
+| current-page | 当前页数 | number | -- | 1|否|
+| layout | 组件布局，子组件名用逗号分隔 | string | total,first,prev,next,last| first,prev,next,last|否|
+| prevText | 上一页文字 | string | -- | 上一页|否|
+| nextText | 下一页文字 | string | -- | 下一页|否|
+
+
+## 事件
+|事件名称 | 说明 | 参数|
+| ------ | ------ | ------ |
+| current-change | currentPage 改变时会触发 | 当前页|