hz-zhhq-app/pages/healthMsg/healthMsg.vue

<template>
	<view class="hzIndex">
		<hzHeader :title="infoType==0?'健康知识资讯':'后勤发布'"></hzHeader>
		<view class="container hzContent">
			<!-- <view class="banner-box">
				<image v-if="infoType==0" src="/static/imgs/jkzszxbanner.png" mode=""></image>
				<image v-if="infoType==1" src="/static/imgs/hqfbbanner.jpg" mode=""></image>
			</view> -->
			<view class="main">
				<!-- <view class="tab-box">
					<view v-if="infoType==0" class="tab-item" style="width: 100%;">健康知识资讯</view>
					<view v-if="infoType==1" class="tab-item" style="width: 100%;">后勤发布</view>
				</view> -->
				<view v-if="msgList.length > 0">
					<view class="list-view">
						<view v-for="(item, index) in msgList" :key="index" class="card-box"
							@tap="detail(item.id,item.type,item.forward_url,item.info_type)">
							<view class="cell-title-box">
								<view class="cell-title" :class="[item.img == 0 ? 'pdr0' : '']">{{ item.title }}</view>
							</view>
							<view class="sub-title">
								<text class="tag">{{formatDate(item.create_time)}}</text>
							</view>
						</view>
					</view>
				</view>
				<content-none v-else :padTop="35"></content-none>
			</view>
			<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
		</view>
	</view>
</template>

<script>
	import {
		getHealthMsgList
	} from '@/common/api.js';
	import {
		callbackRequest,
		formatDate
	} from '@/common/util.js';
	import loadMore from '@/components/loadMore.vue';
	import contentNone from '@/components/contentNone.vue';
	export default {
		data() {
			return {
				formatDate: formatDate,
				loading: false,
				page: 1,
				pageSize: 10,
				loadingType: 0, //0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				msgList: [],
				infoType: "0"
			};
		},
		components: {
			loadMore,
			contentNone
		},
		onLoad(option) {
			this.infoType = option.infoType || "0"
			this.getHealthMsgList();
		},
		methods: {
			getHealthMsgList() {
				let data = {
					method: getHealthMsgList,
					data: {
						pageSize: this.pageSize,
						pageNum: this.page,
						infoType: this.infoType + ""
						//cate:this.tabbar[this.currentTab].data_code
					}
				};
				callbackRequest(data).then(res => {
					res = res.data;
					if (res.returnCode == 1) {
						if (this.page == 1) {
							this.msgList = res.returnData;
						} else {
							if (res.returnData.length > 0) {
								this.msgList = this.msgList.concat(res.returnData);
								this.loadingType = 0;
							} else {
								this.loadingType = 2;
							}
						}
					} else {
						alertTip(res.returnMsg);
					}
				});
			},
			detail(e, a, b, h) {
				if (h == 1) {
					uni.navigateTo({
						url: '/pages/healthMsg/healthMsgDetail?id=' + e
					});
					return;
				}
				if (a == 1) {
					//window.location.href = b;
					// uni.navigateTo({
					// 	url: b
					// });
					var url = encodeURI(b);
					uni.navigateTo({
						url: '/pages/healthMsg/healthMsgWebView?url=' + url
					});
				} else {
					uni.navigateTo({
						url: '/pages/healthMsg/healthMsgDetail?id=' + e
					});
				}
			},
		},
		onReachBottom() {
			if (this.loadingType !== 0) {
				return false;
			}
			this.loadingType = 1;
			this.page = this.page + 1;
			this.getHealthMsgList();

		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';

	.container {
		// background: #f8f8f8;
		margin: 24upx;

		.main {}
	}

	.list-view {
		width: 100%;
		// background: #f8f8f8;
		box-sizing: border-box;

		.card-box {
			margin-top: 24upx;
		}
	}

	/* .list-cell {
			padding: 30upx;
			box-sizing: border-box;
		} */
	.list-cell {
		padding: 20upx 20upx;
		box-sizing: border-box;
		// background: #fff;
		margin-bottom: 10upx;
	}

	/* .cell-title-box {
			display: flex;
			justify-content: space-between;
		} */
	.cell-title-box {
		position: relative;
	}

	.min {
		min-height: 90upx;
	}

	/* .cell-title {
			font-size: 36upx;
			line-height: 56upx;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		} */
	.cell-title {
		/* line-height: 56upx; */
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		font-size: 32upx;
		color: #333333;
	}

	.img-container {
		width: 100%;
		padding-top: 24upx;
		display: flex;
		height: 160upx;
		justify-content: space-between;
	}

	.cell-img {
		width: 32%;
		overflow: hidden;
		position: relative;
	}

	/* .img {
			width: 100%;
			height: 160upx;
			display: block;
			border-radius: 4upx;
		} */

	.img {
		position: absolute;
		right: 0;
		top: 6upx;
		width: 146upx;
		height: 146upx;
		border-radius: 4upx;
	}

	.sub-title {
		padding-top: 10upx;
		font-size: 28upx;
		color: #bcbcbc;
	}

	.badge {
		padding: 5upx 10upx;
		font-size: 24upx;
		border-radius: 4upx;
		margin-right: 20upx;
	}

	.b-red {
		background: #FCEBEF;
		color: #8A5966;
	}

	.b-blue {
		background: #ECF6FD;
		color: #4DABEB;
	}

	.b-orange {
		background: #FEF5EB;
		color: #FAA851
	}

	.b-green {
		background: #E8F6E8;
		color: #44CF85
	}

	.tag {
		padding: 10upx 0upx;
		font-size: 28upx;
		color: #999999;
		border-radius: 4upx;
		margin-right: 20upx;
	}
</style>