Homestay_manage_app/pagesSub/newsList/newsList.vue

<template>
	<view class="container">
		<!-- 搜索框区域 -->
		<view class="search">
			<view class="add">
				<image class="img" src="../../static/index/search.png" mode="aspectFit"></image>
			</view>
			<input class="inp" type="text" v-model="keywords" placeholder="请输入关键字" />
			<view class="btnSearch" @click="searchHandler">搜索</view>
		</view>

		<!-- 资讯列表区域 -->
		<scroll-view class="list" scroll-y @scrolltolower="handleLower" v-if="list.length">
			<!-- 每一条资讯区域 -->
			<view class="box" v-for="item in list" :key="item.id" @click="handleGoDetail(item)">
				<uv-image width="253rpx" height="190rpx" radius="8rpx" mode="aspectFill" :src="item.first_img || ''" />
				<view class="box_detail">
					<view class="detail_title">{{ item.title }}</view>
					<view class="detail_time">{{ item.update_time }}</view>
				</view>
				<!-- 富文本区域 -->
				<!-- <mp-html v-if="item.showHtml" @load="htmlLoad(item)" :ref="item.id + 'html'" :content="item.content" /> -->
			</view>
		</scroll-view>

		<!-- 没有数据时展示的页面 -->
		<view class="noData" v-if="!list.length">
			<img src="../../static/images/noData.png" />
			暂无数据
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 搜索框绑定数据
			keywords: '',
			// 资讯列表
			list: [],
			// 当前页
			pageNews: 1,
			// 每页多少条
			rowsNews: 8,
			// 总条数
			totalNews: null
			// 控制页面显示隐藏
			// showPage: false
		}
	},
	onLoad() {
		this.getNews()
	},
	methods: {
		// 获取资讯列表
		async getNews() {
			const res = await this.$myRequest({
				url: '/mhotel/appnewlist.action',
				data: {
					page: this.pageNews,
					rows: this.rowsNews,
					key: this.keywords
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.list = [...this.list, ...res.rows]

				// this.list.forEach((ele) => {
				// 	this.$set(ele, 'showHtml', true)
				// })
				this.totalNews = res.total
			}
		},
		// 点击搜索按钮回调
		searchHandler() {
			// this.showPage = false
			this.list = []
			this.pageNews = 1
			this.getNews()
		},
		// 页面到底触发回调
		handleLower() {
			if (this.list.length < this.totalNews) {
				this.pageNews++
				this.getNews()
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
			}
		},
		// 跳转资讯详情回调
		handleGoDetail(item) {
			let info = encodeURIComponent(JSON.stringify(item))
			uni.navigateTo({
				url: `/pagesSub/newsDetail/newsDetail?info=${info}`
			})
		}
		// 获取富文本信息回调
		// htmlLoad(item) {
		// 	let id = item.id + 'html'
		// 	let ctx = this.$refs[id][0]
		// 	let imgs = ctx.imgList[0]
		// 	item.showHtml = false
		// 	item.url = imgs
		// 	if (!this.showPage) {
		// 		this.showPage = true
		// 	}
		// }
	}
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 20rpx;
	height: 100vh;
	background-color: #f2f2f2;

	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		opacity: 1;
		border-radius: 70px;
		background-color: #fff;

		.add {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 10rpx;
			width: 60rpx;
			height: 60rpx;

			.img {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.inp {
			height: 60rpx;
			line-height: 60rpx;
			flex-grow: 1;
			font-size: 28rpx;
		}

		.btnSearch {
			margin-right: 10rpx;
			width: 100rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			opacity: 1;
			font-size: 28rpx;
			color: #096562;
		}
	}

	.list {
		height: calc(100vh - 140rpx);
		padding: 20rpx 0;

		.box {
			box-sizing: border-box;
			padding: 20rpx 30rpx 20rpx 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			width: 710rpx;
			height: 230rpx;
			background-color: #fff;

			.box_detail {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
				overflow: hidden;

				.detail_title {
					font-size: 32rpx;
					font-weight: bold;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.detail_time {
					color: #666666;
					font-size: 24rpx;
				}
			}
		}
	}

	.noData {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom: 65rpx;

		img {
			margin-top: 80rpx;
			width: 600rpx;
			height: 600rpx;
		}
	}
}
</style>