xingmingyi_applet/pages/news/notice.vue

<template>
	<view class="content">
		
		<view @click="navTo(item)" v-for="item in newsInfo" :key="item.id" class="newsBox dffd">
			<view class="one">
				<view class="one_img">
					<image  :src="item.image" mode=""></image>
				</view>
				
				<view class="title">
					<view class="title_one">{{item.title}} </view>
					<view class="title_time">{{item.create_time}}</view>
				</view>
				
			</view>
		</view> 
		
	<!-- 	<view @click="navTo(item)" v-for="item in newsInfo" :key="item.id" class="newsBox dffd">
			<image src="/static/img/pro/del.png" class="sel" mode=""></image>
			<text class="time">{{item.create_time}}</text>
			<view class="newsCon">
				<view class="newshead dfsb">
					{{item.title}} 
					<text :class="item.is_select?'promain':'textgrey'">{{item.is_select?'已读':'未读'}}</text>
				</view>
				<view class="shopshead dfsb">
					{{item.desc}}
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>  
export default {
	data() {
		return {
			type:1,
			newsInfo: [
				// {
				// 	create_time:'2021.03.12 12：00 ',
				// 	title:'fdsiaodi测试测试',
				// 	read: true,
				// }
			],
			status: 'loadmore',
			page: 1,
			pagenum:20,
		};
	},
	onLoad(opt) { 
		console.log('opt:',opt);
		if(opt.title)
		{
			uni.setNavigationBarTitle({
				title:  opt.title 
			});
		}
		
		this.type=opt.type||1;
		// this.newsInfo=[];
		// this.page=1; 
		this.loading();
	},
	onReachBottom() {
		if (this.status == 'nomore') return;
		this.status = 'loading';
		this.page = ++this.page;
		this.loading();
	}, 
	methods: {
		navTo(item){
			uni.navigateTo({
				url:'./newsInfo?id=' + item.id+'&type=2'
			})
		},
		loading() { 
			this.$api
				.request('index/getNotice', { 
					type:this.type||1,
					page: this.page,
					limit: this.pagenum
				})
				.then(data => {
					if (data.code == 200) {  
						this.newsInfo = this.newsInfo.concat(data.data);
						if (data.data.length < this.pagenum) {
							this.status = 'nomore';
						}
					} else {
						this.$api.toast(data.msg);
					}
				}) 
		}
	}
};
</script>

<style lang="scss">
	page{
		background-color: #F8F9FE;
	}
.content {
	
	min-height: 100vh;
	// padding: 0 30rpx;
	
	.one{
		background-color: #FFFFFF;
		padding: 30rpx;
		width: 100%;
		height:220rpx;
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		align-items: center;
		.one_img{
			width: 210rpx;
			height: 160rpx;
			
			/deep/ image{
				width:100%;
				height:100%;
			}
		}
		.title{
			margin-left: 16rpx;
			width: 465rpx;
			.title_one{
				height: 105rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				 text-overflow: -o-ellipsis-lastline;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  display: -webkit-box;
				  -webkit-line-clamp: 2;
				  line-clamp: 2;
				  -webkit-box-orient: vertical;
			}
			.title_time{
				font-size: 30rpx;
				display: flex;
				justify-content: flex-end;
			}
		}
		
	}
	
	.newsBox {
		
		width: 100%;
		padding: 32rpx 0 0;
		align-items: center;
		position: relative;
		.sel{
			position: absolute;
			top: -68rpx;
			left: 50%;
			width: 100rpx;
			height: 68rpx;
		}
	}
	.time {
		font-size: 22rpx;
		color: #fff;
		padding: 6rpx 12rpx;
		line-height: 52rpx; 
		background: rgba(214, 214, 214, 1);
		border-radius: 12rpx;
		margin-bottom: 32rpx;
	}
	.newsCon { 
		width: 100%;
		padding: 32rpx;
		border-radius: 8rpx;
		background-color: #fff;
	}
	.newshead {
		margin-bottom: 16rpx; 
				font-size: 30rpx;
			 
	}
	.shopshead {
		// background-color: #f5f5f5;
		image {
			width: 124rpx;
			height: 124rpx;
			margin-right: 10rpx;
		}
		.elli {
			flex: 1;
			font-size: 26rpx;
			height: 80rpx;
			line-height: 42rpx;
			/deep/ image{
				width: 100%;
			}
		}
	}
}
</style>