sign/components/pagination/pagination.vue

<template>
	<view class="page" @click="pageChange">
		<view :class="onfirst ? 'prev end' : 'prev'" id="prev">{{$t('user.pre')}}</view>
		<view class="info">{{curPageNum}}</view>
		<view :class="onlast ? 'next end' : 'next'" id="next" :style="{ backgroundColor: mainColor }">
			{{$t('user.next')}}</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		onUpdated,
		ref
	} from 'vue';
	import {
		useColortore
	} from '@/store/index.js';
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		t
	} from '@/locale'

	const props = defineProps({
		curPageNum: {
			type: Number,
			default: 1
		},
		isEnd: {
			type: String,
			default: ''
		},
	});

	const curPageNum = ref(props.curPageNum)
	const isEnd = ref(props.isEnd)
	const onfirst = ref(true)
	const onlast = ref(false)

	const emit = defineEmits();

	const mainColor = ref('')

	onMounted(() => {
		const colorStore = useColortore()
		mainColor.value = colorStore.mainRed
		if (props.curPageNum != 1) onfirst.value = false
	})

	onUpdated(() => {
		if (props.isEnd == 'end') onlast.value = true
	})

	const pageChange = (e) => {
		if (e.target.id === 'prev') {
			if (curPageNum.value == 1) return
			curPageNum.value--
		} else if (e.target.id === 'next') {
			if (props.isEnd == 'end') return
			curPageNum.value++
		}
		if (curPageNum.value == 1) onfirst.value = true
		else onfirst.value = false
		if (props.isEnd == 'end') onlast.value = true
		else onlast.value = false
		emit('pageChange', curPageNum.value)
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 28rpx;
		padding-top: 30rpx;

		.prev,
		.next {
			color: #ffffff;
			font-size: 24rpx;
			border-radius: 10rpx;
			background-color: #219EFF;
			padding: 4rpx 16rpx;
		}
	}

	.end {
		background-color: #CCCCCC !important;
	}
</style>