payy-app/views/entRiskPoint/index.vue

<template>
	<view class="content">
		<view class="search_input_wrap">
			<uni-easyinput class="search_input" v-model="queryConditions.keywords" suffixIcon="search"
				placeholder="请输入风险点名称/关键字" />
			<button type="primary" size="mini" class="search_button" @click="getListS(queryConditions)">搜索</button>
		</view>
		<view class="page-body">
			<roll-load :total="queryConditions.total" :size="queryConditions.limit" @lower="lower" 
				:topBt='top' ref="roll-load" styles="height:calc(100vh - 99rpx )">
				<template v-slot:cont>
					<block></block>
					<uni-list v-for="(item, index) in dataList" :key="item.riskPointId">
						<!-- 垂直排列，无略缩图，主标题+副标题显示 -->
						<view @click="riskPointInfo(item.riskPointId)">
							<uni-list-item direction="column">
								<template v-slot:header>
									<view class="uni-title">{{item.riskPointTitle}}</view>
								</template>
								<template v-slot:body>
									<view class="uni-list-box">
										<view class="uni-content">
											<view class="uni-title-sub uni-ellipsis-2">
												部门：{{item.groupName}}
											</view>
											<view class="uni-note">等级：{{item.riskPointLevel}}</view>
										</view>
									</view>
								</template>
							</uni-list-item>
						</view>
					</uni-list>
				</template>
			</roll-load>
		</view>
	</view>
</template>

<script>
	import { getEntRiskPointInfo } from '@/api/entRiskPoint.js';
	import RollLoad from '@/components/RollLoad/index.vue';
	import { deepClone } from '@/libs'
	export default {
		components: {
			RollLoad
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				top: {
					show: true,
					style:"top:95%"
				 },
				pageNumber: 1,
				items: [],
				dataList: [],
				queryConditions: {
					page: 1,
					limit: 10,
					total: 0,
					keywords: '',
					status: '',
					source: '',
					groupId: ''
				}
			}
		},
		onLoad(options) {
			this.getList(this.queryConditions);
		},
		methods: {
			//跳转风险点详情页面
			riskPointInfo(id) {
				uni.navigateTo({
					url: '/views/entRiskPoint/details/details?id=' + id,
				})
			},
			lower: function(e) {
				if (e.status) {
					this.queryConditions.page = e.pageNumber
					this.getList(this.queryConditions);
				}
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "已经到顶了！"
				})
			},
			//数据请求分页列表
			getList(query) {
				getEntRiskPointInfo(query).then((res) => {
					this.$set(query, 'total', res.total)
					let items = deepClone(this.dataList);
					this.dataList = items.concat(res.data);
				})
			},
			getListS(query) {
				this.dataList = [];
				this.queryConditions = query
				this.queryConditions.page = 1
				this.getList(this.queryConditions);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select {
		border: 1px solid #cfcfcf;
		border-radius: 20px;
	}

	.list {
		padding: 10upx 10upx;

		scroll-view {
			height: calc(100vh - 126px);
		}

		.item {
			border: 1px solid #ccc;
			margin-bottom: 10upx;
			padding: 5upx 5upx;
			border: 2px solid #dedede;
			border-radius: 15upx;
			box-shadow: 2px 2px 2px #aaaaaa;
			position: relative;

			.title {
				display: flex;
				justify-content: flex-start;
				padding-bottom: 10upx;

				.name {
					font-size: 30upx;
					padding-left: 10upx;
				}
			}

			.cont {
				color: #999999;
			}

			.more {
				height: 40upx;
				position: absolute;
				right: 10upx;
				top: 50%;
				transform: translateY(-50%);
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					width: 20upx;
					height: 20upx;
					background-color: red;
					padding-right: 10aaupx;
				}
			}
		}
	}

	.search_input {
		width: 72%;
		margin: 10upx;
		border: 2px solid #00aaff;
		border-radius: 8px;
	}
	.search_button {
		width: 160upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 17px;
		background-image: linear-gradient(#00aaff, #3384ff);
		margin-left: 10upx;
		padding: 0;
	}

	.search_input_wrap {
		height: 100upx;
		display:flex;
		justify-content: center;
		align-items: center;
		padding: 10upx;
		background-color: #fff;
	}
</style>