update: 增加分页

This commit is contained in:
admin 2024-03-19 14:29:27 +08:00
parent 824b4de324
commit 9ddfeecae0
12 changed files with 108 additions and 25 deletions

View File

@ -0,0 +1,67 @@
<template>
<scroll-view
:scroll-y="true"
class="scroll-view-custom"
@scrolltolower="loadMore"
:style="{ height: clientHeight + 'px' }"
>
<slot></slot>
<!-- 加载更多提示 -->
<view v-if="isLoading" class="loading-text">加载中...</view>
<view v-if="noMoreData" class="no-more-data-text">
<u-loadmore :status="'nomore'" :line="true" :fontSize="12" :marginTop="30"/>
</view>
</scroll-view>
</template>
<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
const props = withDefaults(
defineProps<{
noMoreData: boolean;
}>(),
{
noMoreData: false,
}
);
const emit = defineEmits(["loadList"]);
const isLoading = ref(false);
const clientHeight = ref(500);
const loadMore = () => {
if (props.noMoreData) return; //
emit("loadList", true);
};
const getBarHeight = () => {
const res = uni.getSystemInfoSync();
console.log(res);
if (res.platform === "ios" || res.osName === "ios") {
return 44;
} else if (res.platform === "android") {
return 48;
} else {
return 0;
}
};
//
const getClineHeight = () => {
uni.getSystemInfo({
success: (res) => {
clientHeight.value = res.windowHeight - uni.upx2px(80) - getBarHeight();
},
});
};
onLoad(() => {
// #ifdef APP-PLUS || MP-WEIXIN
getClineHeight();
// #endif
});
</script>
<style lang="scss">
.no-more-data-text {
font-size: 24rpx;
}
</style>

View File

@ -107,7 +107,7 @@ onMounted(() => {
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx; border-radius: 13rpx;
padding: 10rpx 25rpx; padding: 10rpx 20rpx;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #000000; color: #000000;

View File

@ -119,7 +119,7 @@ onMounted(() => {
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx; border-radius: 13rpx;
padding: 10rpx 25rpx; padding: 10rpx 20rpx;
font-weight: 400; font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #000000; color: #000000;

View File

@ -106,7 +106,7 @@ onMounted(() => {
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx; border-radius: 13rpx;
padding: 10rpx 25rpx; padding: 10rpx 20rpx;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #000000; color: #000000;

View File

@ -104,7 +104,7 @@ onMounted(() => {
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx; border-radius: 13rpx;
padding: 10rpx 25rpx; padding: 10rpx 20rpx;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #000000; color: #000000;

View File

@ -119,7 +119,7 @@ onMounted(() => {
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx; border-radius: 13rpx;
padding: 10rpx 25rpx; padding: 10rpx 20rpx;
font-weight: 400; font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #000000; color: #000000;

View File

@ -106,7 +106,7 @@ onMounted(() => {
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx; border-radius: 13rpx;
padding: 10rpx 25rpx; padding: 10rpx 20rpx;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #000000; color: #000000;

View File

@ -108,7 +108,7 @@ onMounted(() => {
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx; border-radius: 13rpx;
padding: 10rpx 25rpx; padding: 10rpx 20rpx;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #000000; color: #000000;

View File

@ -141,7 +141,7 @@ onMounted(() => {
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx; border-radius: 13rpx;
padding: 10rpx 25rpx; padding: 10rpx 20rpx;
font-weight: 400; font-weight: 400;
font-size: 28rpx; font-size: 28rpx;
color: #000000; color: #000000;

View File

@ -106,7 +106,7 @@ onMounted(() => {
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx; border-radius: 13rpx;
padding: 10rpx 25rpx; padding: 10rpx 20rpx;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #000000; color: #000000;

View File

@ -12,23 +12,28 @@
></u-search> ></u-search>
<view class="btn" @click="add"> 新增 </view> <view class="btn" @click="add"> 新增 </view>
</view> </view>
<view class="box">
<view v-for="(item, index) in pageList.list" :key="index"> <page-view @loadList="(v) => {getList(v)}" :noMoreData="pageList.noMoreData">
<view> <view class="box">
<view>{{ item.name }}</view> <view v-for="(item, index) in pageList.list" :key="index">
<view>{{ item.phone }}</view> <view>
<view>{{ item.roleVos.length > 0 ? item.roleVos[0].roleName : '-'}}</view> <view>{{ item.name }}</view>
</view> <view>{{ item.phone }}</view>
<view class="op-box"> <view>{{
<view class="btn" @click="edit(item)"> 编辑 </view> item.roleVos.length > 0 ? item.roleVos[0].roleName : "-"
<view class="btn" @click="deleteCustomer(item)"> 下线 }}</view>
</view> </view>
<view class="op-box">
<view class="btn" @click="edit(item)"> 编辑 </view>
<view class="btn" @click="deleteCustomer(item)"> 下线 </view>
</view>
</view> </view>
</view> </view>
</view> </page-view>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import PageView from "@/components/PageView/index.vue";
import { ProfileApi, StockCardApi } from "@/services"; import { ProfileApi, StockCardApi } from "@/services";
import { StockCardType } from "@/utils/enum"; import { StockCardType } from "@/utils/enum";
@ -38,6 +43,7 @@ const state = reactive<any>({
name: "", name: "",
}); });
const pageList: PageResult<User> = reactive({ const pageList: PageResult<User> = reactive({
noMoreData: false,
total: 0, total: 0,
list: [], list: [],
pageNum: 1, pageNum: 1,
@ -65,16 +71,25 @@ const deleteCustomer = (item: any) => {
const handleSearch = () => { const handleSearch = () => {
getList(); getList();
}; };
const getList = () => { const getList = (v?: boolean) => {
if (v) {
if (Math.ceil(pageList.total / pageList.pageSize) > pageList.pageNum) {
pageList.pageNum ++
} else {
pageList.noMoreData = true
return
}
}
let params: any = { let params: any = {
pageSize: 10, pageSize: pageList.pageSize,
pageNum: 1, pageNum: pageList.pageNum,
name: state.name, name: state.name,
}; };
ProfileApi.getUserListByPage(params).then((res) => { ProfileApi.getUserListByPage(params).then((res) => {
if (res.code === 200) { if (res.code === 200) {
if (res.code === 200) { if (res.code === 200) {
(pageList as any).list = (res.data as any).list; (pageList as any).list = (res.data as any).list;
pageList.total = (res.data as any).total
} }
} }
}); });
@ -106,7 +121,7 @@ onMounted(() => {
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12); box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx; border-radius: 13rpx;
padding: 10rpx 25rpx; padding: 10rpx 20rpx;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #000000; color: #000000;

View File

@ -1,4 +1,5 @@
interface PageResult<T> { interface PageResult<T> {
noMoreData?: boolean,
total: number; total: number;
list: T[]; list: T[];
pageNum: number; pageNum: number;