jcyjdt_applet/components/list/index.vue

<template>
	<view class="content" v-if="list.length>0">
		<view class="info">
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="list-scroll-view">
					<view class="list" v-for="(item, index) in list" :key="index">
						<view v-for="(i, indexs) in fields" :key="indexs">
							<view class="name textOver" v-if="i.is_name">{{item[i.model]||'暂无'}}</view>
							<view class="other" v-else>
								<view class="status textOne" v-if="i.is_status">
									<text>{{i.label}}：</text>{{item[i.model]||'暂无'}}
								</view>
								<view class="other_1 textOne" v-else>
									<text>{{i.label}}：</text>{{item[i.model]||'暂无'}}
								</view>
							</view>
						</view>
						<view class="button">
							<button class="primary" size="mini" type="primary" @tap.stop="toView(item)">查看</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="total">
			<uni-pagination :current="page" :pageSize="pageSize" :total="total" @change="toPage" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			fields: {
				type: Array,
			},
			list: {
				type: Array,
				default: []
			},
			page: {
				type: Number,
				default: 1
			},
			total: {
				type: Number,
				default: 0
			},
			pageSize: {
				type: Number,
				default: 5
			}
		},
		data() {
			return {

			};
		},
		methods: {
			// 分页
			toPage(e) {
				const that = this;
				const page = e.current - 1;
				const skip = page * that.pageSize;
				that.$emit('toPage', {
					page: e.current,
					skip: skip
				})
			},
			// 文件预览
			toView(item) {
				const that = this;
				that.$emit('toView', item)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		margin: 2vw 0 0 0;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100vw;
		height: 90vh;

		.info {
			position: relative;
			flex-grow: 1;

			.list {
				background-color: var(--mainColor);
				border: 1px solid var(--f5Color);
				padding: 2vw;
				margin: 0 2vw 2vw 2vw;
				border-radius: 5px;

				.name {
					font-size: var(--font14Size);
					font-weight: bold;
				}

				.other {
					font-size: var(--font12Size);
					color: var(--f85Color);

					.other_1 {
						margin: 1vw 0 0 0;
					}
				}

				.status {
					margin: 1vw 0 0 0;
					font-size: var(--font12Size);
					color: var(--fF0Color);
				}

				.button {
					margin: 1vw 0 0 0;
					text-align: center;

					.primary {
						background: var(--f3CColor);
					}

					button {
						margin: 0 1vw 0 0;
					}
				}
			}
		}

		.total {
			overflow: hidden;
			background-color: var(--fffColor);
			padding: 2vw;
			border-top: 1px solid var(--f1Color);
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>