hz-zhhq-app/pages/hqfb/hqfb2.vue

<template>
	<view class="container" >
		<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="list-cell list-item"
						@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>
</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/hqfb/hqfbDetail?id='+e
					});
					return;
				}
				if(a==1){
					window.location.href = b;
					// uni.navigateTo({
					// 	url: b
					// });
				}else{
					uni.navigateTo({
						url: '/pages/hqfb/hqfbDetail?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;
		min-height:100vh;
		overflow: hidden;
		.banner-box {
			width: 100%;
			height: 240upx;
			position: absolute;
			top: 0;
			left: 0;
			image {
				width: 100%;
				height: 100%;
			}
			border-radius: 30upx;
		}
		.main {
			margin: 172upx 40upx 0;
			position: relative;
			z-index: 10;
		}
		.tab-box {
			overflow: hidden;
			border-radius: 10upx 10upx 0 0;
			background: rgba(132, 149, 167, 0.8);
			height: 70upx;
			.tab-item {
				float: left;
				height: 70upx;
				width: 50%;
				font-size: 30upx;
				color: #e5f6ff;
				text-align: center;
				line-height: 70upx;
			}
			.active {
				background: #fff;
				color: #333;
				border-radius: 10upx 10upx 0 0;
				font-weight: bold;
			}
		}
	}
	.list-view {
			width: 100%;
			background: #f8f8f8;
			box-sizing: border-box;
		}
	
		/* .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 {
		font-size: 28upx;
		/* line-height: 56upx; */
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
		.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: 5upx 10upx;
			font-size: 24upx;
			border-radius: 4upx;
			margin-right: 20upx;
		}
</style>