源文件

jeepay-ui-uapp-agent/components/newComponents/JScroll/JScroll.vue

@@ -0,0 +1,156 @@
+<template>
+	<view v-if="vdata.dataList.length > 0">
+		<view class="bind-title">{{ props.title }}</view>
+		<view class="layout" >
+			<scroll-view scroll-y="true" :style="{maxHeight: props.maxH}" 
+			 @scrolltoupper="reset"	@scrolltolower="refresh"
+			>
+				<view v-for="(item, index) in vdata.dataList" :key="index">
+					<slot :info="item" :index="index"></slot>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+
+import { ref, reactive } from 'vue'
+import { onShow , onLoad } from '@dcloudio/uni-app'
+
+const props = defineProps({
+	title: { type: String, default: '' }, 
+	maxH: { type: String, default: '424rpx' }, // 最高高度
+	pd: { type: String, default: '30rpx 50rpx' },
+	requestFun: { type: Function, default: () => {} },
+	params: { type: Object, default: () => ({}) },
+	flag: { type: Boolean, default: true },
+	isonshow: { type: Boolean, default: true },
+	pageSize: { type: Number, default: 10 },
+})
+
+const emits = defineEmits(['reset', 'refresh'])
+
+	const vdata = reactive({
+		dataList: [], // 数据列表
+	})
+	
+	const listParams = {} // 页面传参对象 getList方法中传的参数
+
+	const queryObj = reactive({
+		pageNumber: 1, // 默认是1
+		pageSize: props.pageSize, // 默认10条，可传参修改
+		isLoad: false, // 是否为上拉加载
+		titlePage: '' // 总页数
+	})
+
+	const getList = (listParamObj) => {
+		// 非下拉刷新才显示加载提示
+		if (queryObj.isLoad) {
+			uni.showLoading({ title: '加载中' })
+		}
+
+		// listParamObj 父组件在函数中携带的请求参数，与页码页数，固定参数，合并到一起，并且当该参数对象在调用时有具体值，会将页码重置为1
+		let paramObj // 参数合并
+
+		if (listParamObj) {
+			queryObj.pageNumber = 1
+			Object.keys(listParamObj).forEach((item) => {
+				listParams[item] = listParamObj[item]
+			})
+			vdata.dataList = []
+		}
+
+		paramObj = Object.assign(
+			{
+				pageNumber: queryObj.pageNumber,
+				pageSize: queryObj.pageSize
+			},
+			props.params,
+			listParams
+		)
+
+		props.requestFun(paramObj)
+			.then(({ bizData }) => {
+				uni.hideLoading()
+
+				queryObj.titlePage = Math.ceil(bizData.total / queryObj.pageSize) // 页码总数
+
+				let data = bizData.records ? bizData.records : bizData
+
+				// 下拉刷新重置数据， 上拉加载新增数据
+				if (queryObj.isLoad) {
+					vdata.dataList.push(...data)
+				} else {
+					vdata.dataList = data
+				}
+			})
+			.catch((err) => uni.hideLoading())
+	}
+
+	// 只在onshow时调用一次， 请求方法
+	const onShowGetList = () => {
+		if (!props.flag) return false
+		uni.showLoading({ title: '加载中' })
+		queryObj.pageNumber = 1 // 页码固定为1
+		let paramObj = Object.assign(
+			{
+				// 合并请求参数
+				pageNumber: 1,
+				pageSize: queryObj.pageSize
+			},
+			props.params
+		)
+
+		props.requestFun(paramObj)
+			.then(({ bizData }) => {
+			
+				uni.hideLoading()
+				queryObj.titlePage = Math.ceil(bizData.total / queryObj.pageSize)
+
+				let data = bizData.records ? bizData.records : bizData
+
+				vdata.dataList = data // 由于只在onShow 中调用一次，所以数据重新赋值
+			})
+	}
+
+	onShow(() => {
+		if (props.isonshow) {
+			onShowGetList()
+		}
+	})
+	onLoad(() => {
+		if (!props.isonshow) {
+			onShowGetList()
+		}
+	})
+
+	// 下拉刷新
+	const reset = () => {
+		queryObj.pageNumber = 1
+		queryObj.isLoad = false
+		getList()
+	}
+
+	// 上拉加载
+	const refresh = () => {
+		queryObj.pageNumber++
+		if (queryObj.pageNumber > queryObj.titlePage) {
+			queryObj.pageNumber = queryObj.pageNumber
+			return (queryObj.isLoad = false)
+		}
+		queryObj.isLoad = true
+		getList()
+	}
+
+</script>
+<style scoped lang="scss">
+.layout {
+	margin: 30rpx 50rpx;
+}
+.bind-title {
+	margin-top: 20rpx;
+	color: #fff;
+	text-align: center;
+}
+</style>