mallplus/mallplusui-uniapp-app/pagesU/notice/subjectList.vue

<template>
	<view class="content">
		<view class="goods-list">
			<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
				<view class="listcard">
					<view class="listcard-image">
						<image :src="item.pic" mode="aspectFill"></image>
					</view>
					<view class="listcard-content">
						<view class="listcard-content_title">
							<text>{{item.title}}</text>
							<text class="listcard-content_title_text">发布时间：{{item.createTime | formatCreateTime}}</text>
						</view>
						<view class="listcard-content_des">

							<view class="listcard-content_des-label">
								<view class="listcard-content_des-label-item">收藏{{item.collectCount}}</view>
							</view>
							<view class="listcard-content_des-browe">浏览{{item.readCount}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Api from '@/common/api';
	import {
		formatDate
	} from '@/common/date';
	
	export default {
		data() {
			return {
				pageNum: 1,
				goodsList: []
			};
		},

		onLoad(options) {
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
			// #endif

			this.loadData();
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			// if (e.scrollTop >= 0) {
			// 	this.headerPosition = 'fixed';
			// } else {
			// 	this.headerPosition = 'absolute';
			// }
		},
		//下拉刷新
		onPullDownRefresh() {
			// this.pageNum = this.pageNum + 1;
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom() {
			this.pageNum = this.pageNum + 1;
			this.loadData();
		},
		filters: {
			formatCreateTime(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			},
		},
		methods: {
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more';
				}
				let params = {
					pageNum: this.pageNum,
					categoryId: 38
				};


				let list = await Api.apiCall('get', Api.cms.subjectList, params);
				let goodsList = list.records;
				// let goodsList = await this.$api.json('goodsList');
				if (type === 'refresh') {
					this.goodsList = [];
				}

				this.goodsList = this.goodsList.concat(goodsList);

				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading();
					} else {
						uni.stopPullDownRefresh();
					}
				}
			},
			//详情
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.id;
				let groupId = item.groupId;
				uni.navigateTo({
					url: `../../pagesU/notice/subjectDetail?id=${id}`
				});
			},
			stopPrevent() {}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
	}

	.listcard {
		display: flex;
		padding: 15px;
		margin: 20px;
		border-radius: 5px;
		box-shadow: 0 0 5px 1px rgba($color:#000000, $alpha:0.1);
		box-sizing: border-box;

		.listcard-image {
			flex-shrink: 0;
			width: 80px;
			height: 80px;
			border-radius: 8px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.listcard-content {
			display: flex;
			flex-direction: column;
			padding-left: 10px;
			width: 100%;
			justify-content: space-between;

			.listcard-content_title {
				padding-right: 30px;
				font-size: 14px;
				color: #333;
				font-weight: 400;
				line-height: 1.2;
				position: relative;

				text {
					font-size: 22px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.listcard-content_title_text {
					margin-top: 5px;
					font-size: 15px;
					color: #999;
				}

			}

			.listcard-content_des {
				display: flex;
				justify-content: space-between;
				font-size: 12px;

				.listcard-content_des-label {
					display: flex;

					.listcard-content_des-label-item {
						padding: 0 5px;
						margin-right: 5px;
						border-radius: 15px;
						color: #f00;
						border: 1px #f00 solid;
					}
				}

				.listcard-content_des-browe {
					color: #999;
					font-size: 15px;
					line-height: 1.5;
				}
			}
		}

		&.mode-column {
			.list-content {
				width: 100%;
				padding-left: 0;
			}

			.listcard-image {
				display: flex;
				margin-top: 10px;
				width: 100%;
				height: 80px;

				.listcard-image_item {
					margin-left: 10px;
					width: 100%;
					border-radius: 5px;
					overflow: hidden;

					&:first-child {
						margin-left: 0;
					}

					image {
						width: 100%;
						height: 100%;
					}

				}
			}

			.listcard-content_des {
				margin-top: 10px;
			}
		}

		&.mode-image {
			flex-direction: column;

			.listcard-image {
				width: 100%;
				height: 100px;
			}

			.listcard-content {
				padding-left: 0;
				margin-top: 10px;

				.listcard-content_des {
					display: flex;
					align-items: center;
					margin-top: 10px;
				}
			}
		}
	}
</style>