Homestay_manage_app/pages/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">
			<!-- 每一条资讯区域 -->
			<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.url" />
				<view class="box_detail">
					<view class="detail_title">{{ item.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>
</template>

<script>
export default {
	data() {
		return {
			// 搜索框绑定数据
			keywords: '',
			// 资讯列表
			list: [],
			// 当前页
			pageNews: 1,
			// 每页多少条
			rowsNews: 8,
			// 总条数
			totalNews: null
		}
	},
	onLoad() {
		this.getNews()
	},
	methods: {
		// 获取资讯列表
		async getNews() {
			const res = await this.$myRequest({
				url: '/mhotel/appnewlist.action',
				data: {
					page: this.pageNews,
					rows: this.rowsNews,
					title: 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.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: `/pages/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
		}
	}
}
</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_img {
			// 	width: 253rpx;
			// 	height: 190rpx;
			// 	border-radius: 8rpx;
			// }

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

				.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;
				}
			}
		}
	}
}
</style>