first

2024-09-10 10:49:08 +08:00
parent b5fd06b800
commit dd4f5938da
6391 changed files with 722800 additions and 0 deletions
--- a/components/my-components/my-pagination.vue
+++ b/components/my-components/my-pagination.vue
@@ -0,0 +1,145 @@
+<template>
+	<view v-if="pagesData.length">
+		<view class="u-flex pagination u-row-center u-font-28">
+			<view class="prve btn" :class="{disabled:currentPage===1}" @tap="btnClick('')">上一页</view>
+			<view>
+				<picker @change="pageChange" :value="defaultPaageIndex" :range="pagesData">
+					<view class="u-flex current-page u-col-center btn">
+						<text class="page color-main font-bold">{{currentPage}}</text>
+						<!-- <text class="page color-main font-bold">{{currentPage}}/{{maxPage}}</text> -->
+						<view class="arrow-down"></view>
+					</view>
+				</picker>
+			</view>
+			<!-- <view class="u-flex current-page u-col-center btn">
+
+				<text class="page color-main font-bold">{{page}}</text>
+				<view class="arrow-down"></view>
+			</view> -->
+			<view class="next btn" :class="{disabled:currentPage===maxPage}" @tap="btnClick('add')">下一页</view>
+		</view>
+
+	</view>
+</template>
+
+<script setup>
+	import {
+		computed,
+		reactive,
+		ref,
+		watch
+	} from 'vue';
+	const props = defineProps({
+		size: {
+			type: Number,
+			default: 10
+		},
+		totalElements: {
+			type: Number,
+			default: 0
+		},
+		page: {
+			type: Number,
+			default: 1
+		},
+		pages: {
+			type: [Array, Number],
+			default: [1]
+		},
+		defaultPaageIndex: {
+			type: Number,
+			default: 0
+		}
+	})
+	const emits = defineEmits(['change'])
+
+	let currentPage = ref(props.page === 0 ? 1 : props.page)
+	
+	function returnMaxPage() {
+		return Math.ceil(props.totalElements / props.size)
+	}
+	let maxPage=ref(returnMaxPage())
+	const pagesData = computed(() => {
+		maxPage.value=returnMaxPage()
+		return new Array(returnMaxPage()).fill(1).map((v, index) => index + 1)
+	})
+
+
+	// const pagesData = ref( Array.isArray(props.pages) ? props.pages : new Array(props.pages).fill(1).map((v,index)=>index+1))
+	// const maxPage=ref( Array.isArray(props.pages)?  (props.pages[props.pages.length - 1] +1): (props.pages+1))
+	let defaultPaageIndex = ref(props.defaultPaageIndex > 0 ? props.defaultPaageIndex : props.page - 1)
+
+	//设置页码值
+	function setCurrentPage(page) {
+		currentPage.value = page
+	}
+
+	function pageChange(e) {
+		setCurrentPage(e.detail.value * 1 + 1)
+	}
+	//看是否到达临界值来决定是否改变页码
+	function btnClick(isAdd) {
+		let newPage = currentPage.value * 1 + (isAdd == 'add' ? 1 : -1)
+		if (newPage <= 0) {
+			return
+		}
+		if (newPage > maxPage.value) {
+			return
+		}
+		setCurrentPage(newPage)
+	}
+
+	watch(() => currentPage.value, (newval) => {
+		emits('change', newval)
+		defaultPaageIndex.value = newval - 1
+	})
+</script>
+
+<style lang="scss" scoped>
+	.btn {
+		box-sizing: border-box;
+		border: 2px solid $my-main-color;
+		padding: 8rpx 46rpx;
+	}
+
+	.pagination {
+		gap: 30rpx;
+
+		.current-page {
+			position: relative;
+			padding-left: 18rpx;
+
+			.page {
+				margin-right: 74rpx;
+			}
+		}
+
+		.prve,
+		.next {
+			background-color: $my-main-color;
+			color: #fff;
+		}
+
+		.prve,.next {
+			&.disabled {
+				background-color: #ccc;
+				border-color: #ccc;
+			}
+		}
+
+	}
+
+	.arrow-down {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		right: 12rpx;
+		margin-top: 10rpx;
+		width: 0;
+		height: 0;
+		border-top: 20rpx solid $my-main-color;
+		border-right: 20rpx solid transparent;
+		border-left: 20rpx solid transparent;
+		border-bottom: 20rpx solid transparent;
+	}
+</style>