pingpu_H5/pages/article/index.vue

<template>
	<!-- 专家分析列表 -->
	<view>
		<ui-sticky>
			<ui-search placeholder="请输入关键字" @confirm="searchArticle"></ui-search>
		</ui-sticky>
		<view class="ui-card article-item" v-for="(item,index) in articleList" :key="index">
			<view class="row-between">
				<view class="title">分析人：{{item.user_name}}</view>
				<view class="time">{{item.create_time }}</view>
			</view>
			<!-- <view class="">
				{{item.foreword}}
			</view> -->
			<view class="text" :class="item.toggle?'':'shadow'">
				<rich-text :nodes="item.content"></rich-text>
			</view>
			<view class="row-center more" :class="item.toggle?'':'shadow'" @click="toggleReadMore(index)">
				{{item.toggle?'收起':'展开'}}
				<uni-icons :type="item.toggle?'top':'bottom'" color="#317afd" size="16"></uni-icons>
			</view>
		</view>
		<ui-empty v-if="articleList.length==0" text="暂无分析信息"></ui-empty>
	</view>
</template>

<script>
	import {
		getArticleList,
	} from '@/api/common.js'
	export default {
		data() {
			return {
				// 专家分析列表
				articleList: [],
				params: {
					key_word: '',
					start_time: '',
					end_time: '',
					article_type: 3, //  3 表示虫情，5 表示气象， 8 表示墒情
					page: 1, //页数 默认为1
					page_size: 10, //数据条数据 默认为10
				},
				total: 0,
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			this.params.article_type = options.type ?? 3;
			this.getArticleList();
		},
		// 触底请求
		onReachBottom(e) {
			if (this.articleList.length >= this.total) {
				return;
			}
			this.params.page += 1;
			this.getArticleList();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.refreshArticleList();
			uni.stopPullDownRefresh()
		},
		methods: {
			searchArticle(e) {
				this.params.key_word = e;
				this.refreshArticleList();
			},
			// 刷新列表
			refreshArticleList() {
				this.params.page = 1;
				this.articleList = [];
				this.getArticleList();
			},
			// 获取分析列表
			async getArticleList() {
				const {
					total_num,
					data
				} = await getArticleList(this.params);
				this.articleList = [...this.articleList, ...data];
				this.total = total_num ?? 0;
			},
			// 切换文章状态
			toggleReadMore(index) {
				let article = this.articleList[index];
				article.toggle = !article.toggle;
				this.$set(this.articleList, index, article);
			}
		}
	}
</script>

<style lang="scss">
	.article-item {
		padding: 26rpx 24rpx;
		overflow: hidden;	

		.title {
			font-size: $font-size-title;
			font-weight: bold;
			color: $color-primary;
			line-height: $line-height-title;
		}

		.text {
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			font-size: $font-size-subtitle;
			color: $color-subtitle;
			line-height: $line-height-subtitle;
			overflow: hidden;

			&.shadow {
				max-height: 200rpx;
			}
		}



		.more {
			font-size: 26rpx;
			color: $color-primary;
			text-align: center;

			&.shadow {
				position: relative;
				background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%);
				padding-top: 160rpx;
				margin-top: -160rpx;
			}
		}

		.time {
			padding: 6rpx 15rpx;
			font-size: 28rpx;
			color: #333;
			line-height: 1;
			border-radius: 4rpx;
		}
	}
</style>