xiaoyou-h5/pages/index/new_list.vue

<template>
	<view class="">
		<view class="bg">
	
		</view>
	<view class="new_list position">
		<view class="search">
			<image src="../../static/images/search.png" mode=""></image>
			<input type="text" v-model="search" placeholder="请输入搜索内容" placeholder-style="font-size:14px;color:#D9D0C8;"
				@change='Search' @confirm="Search" />
		</view>
		<view class="empty" v-if="news_list== undefined||news_list.length == 0">
			<u-empty  text="没有内容哦!" mode="list"></u-empty>
		</view>
		<view class="news_item" v-for="(item,index) in news_list" :key="index" @click="to_new_detail(item.id)">
			<view class="item_left">
				<image :src="item.cover_resource?item.cover_resource.url:url" mode="aspectFill"></image>
			</view>
			<view class="item_right">
				<view class="item_title">
					{{item.title}}
				</view>
				<view class="item_num">
					<text>{{item.created_at}}</text>
					<text>阅读 {{item.view_count}}</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				news_list: [
					
				],
				page:1,
				last:false,
				search: '',
				category_id:''
			}
		},
		onShow() {
			
		},	
		onLoad(options) {
			this.category_id=options.category_id
			this.getNew()
		},
		// 触底加载更多
		onReachBottom() {
			if (!this.last) {
				this.page++
			}
			console.log(this.page)
			this.getNew()
		},
		methods:{
			
			
			getNew() {
				this.$u.get('/page/news', {
					title: this.search,
					page: this.page,
					category_id:this.category_id
				}).then(res => {
					console.log(res, '新闻详情')
					let data = res.data.data
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.news_list = this.news_list.concat(data)
					}
				})
			},
			//搜索
			Search() {
				console.log('pppp')
				this.page = 1
				this.news_list = []
				this.getNew()
			},
			to_new_detail(id) {
				uni.navigateTo({
					url: 'news_detail?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.new_list{
		padding: 20px 16px 20px;
		// background-color: #F9F9FB;
		.empty{
			margin-top: 45%;
		}
		.search {
			display: flex;
			align-items: center;
			height: 52px;
			box-shadow: 0px 8px 16px rgba(12, 20, 61, 0.06);
			border-radius: 10px;
			// padding-top: 20px;
			background-color: #fff;
		
			image {
				width: 16px;
				height: 16px;
				margin-left: 20px;
				margin-right: 20px;
			}
		}
		.news_item {
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 10px 8px;
			margin-top: 20px;
			box-shadow: 0px 8px 12px rgba(12, 20, 61, 0.06);
			border-radius: 4px;
			.item_left {
				width: 92px;
				height: 76px;
				overflow: hidden;
				flex-shrink: 0;
				margin-right: 8px;
				border-radius: 4px;
		
				image {
					width: 92px;
					height: 76px;
				}
			}
		
			.item_right {
				width: 100%;
				.item_title {
					height: 40px;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					font-size: 15px;
					font-family: Graphit;
					font-weight: 500;
					line-height: 20px;
					color: #282828;
				}
		
				.item_num {
					margin-top: 10px;
					font-size: 10px;
					font-family: PingFang HK;
					font-weight: 400;
					color: #B2B2B2;
		
					text {
						display: inline-block;
						width: 50%;
						overflow: hidden;
		
						&:last-child {
							text-align: right;
						}
					}
		
		
				}
			}
		}
	}
</style>