frontend-app/pages/news/news.vue

<template>
	<view class="news_warp">
		<Header
			leftTitle="商学院" 
			left-path-type="switchTab" 
			left-path="/pages/mine/mine" 
			style="background-color: #FFFFFF;"
		/>
		<view class="news_content_warp">
			<view class="heder_">
				<view 
					v-for="item in titleList" 
					:key="item.key" 
					:class="form.type === item.key ? 'heder_item_sel heder_item':'heder_item'" 
					@click="headerClick(item)"
				>
					{{item.value}}
				</view>
			</view>
			<view style="padding: 20rpx 0;">
				<up-swiper
					:list="swiperList"
					height="120"
					radius="10"
					@change="e => currentNum = e.current"
					bgColor="#ffffff00"
				>
					<template #indicator>
						<view
							class="indicator-num"
						>
							<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
						</view>
					</template>
				</up-swiper>
			</view>
		</view>
		<view class="content_">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" style="height:calc(100vh - 560rpx)">
				<up-input
					placeholder="搜索关键字" 
					v-model="form.keywork" 
					prefixIcon="search" 
					prefixIconStyle="font-size: 22px;color: #909399"
					:customStyle="inputCss"
				>
					<template #suffix>
						<view @click="searchTap" class="search_but">
							搜索
						</view>
					</template>
				</up-input>
				
				<view class="news_content_item" v-for="item in newsList" :key="item.id" v-if="newsList && newsList.length !==0" @click="jumpInfo(item)">
					<view class="news_content_item_warp">
						<view class="news_content_item_title">{{item.title}}</view>
						<view v-html="item.subTitle" class="news_content_item_content"></view>
						<view class="news_content_item_info">
							<view>{{formatDate(item.ctdate)}}</view>
							<view class="browses_">
								<view>
									<up-image src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
								</view>
								<view style="margin-left: 8rpx;">{{item.browses}}</view>
							</view>
						</view>
					</view>
					<view>
						<up-image :src="item.coverImage" width="100" height="100" bgColor="#f1f6ff00" radius="8"></up-image>
					</view>
				</view>
				<view v-else class="not_order_warp">
				  	<up-image src="/static/common/not_order.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
				  	<view class="not_order_msg_warp">还未发布新闻哦～</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header.vue';
	import { NEWS_TYPE,APP_PAGE_TYPE } from '@/utils/enumUtils.js';
	import { getCarouselImage } from '@/api/common.js';
	import { getNewsList } from '@/api/news.js';
	import { formatDate } from '@/utils/index.js'
	
	export default {
		components:{Header},
		data() {
			return {
				titleList:NEWS_TYPE,
				swiperList:[],
				currentNum:0,
				form:{
					keywork:null,
					type:1,
					page:1,
					pageSize:15,
				},
				inputCss:{
					"height":'68rpx',
					"background": "#FFFFFF",
					"border-radius": "16rpx",
					"border": "0rpx",
					"padding": "0 0 0 16px",
				},
				newsList:[],
				newsListTotal:0,
				loading:false,
			}
		},
		onLoad(option) {
			this.getCarouselImage();
			this.loadData();
		},
		methods: {
			formatDate,
			// 查询轮播图
			async getCarouselImage(){
				const params={
					pageUi:APP_PAGE_TYPE.NEWS,
				}
				const resp = await getCarouselImage(params);
				if(resp && resp.bizcode === 100){
					const data = resp.data || [];
					this.swiperList = data.length !== 0 ? data.map(obj=>obj.carouselImage) : [];
				}
			},
			headerClick(item){
				this.form.type = item.key;
				this.searchTap();
			},
			
			// 搜索
			searchTap(){
				this.newsList = [];
				this.form.page = 1;
				this.loadData();
			},
			// 加载数据的方法
			async loadData() {
			  if (this.loading) return; // 如果正在加载，则不重复加载
			  this.loading = true; // 设置加载状态为true
			  try {
				const newData = await this.fetchData(this.form.page, this.form.pageSize);
				if(newData.entitys && newData.entitys.length !==0){
					this.newsList = [...this.newsList, ...newData.entitys]; // 将新数据添加到列表中
					this.form.page++; 
				}
			  } catch (error) {
				console.error('加载数据失败:', error);
			  } finally {
				this.loading = false; // 设置加载状态为false
			  }
			},
			// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
			async fetchData(page, pageSize) {
				const form = this.form;
				const params = {
					page,
					pageSize,
					type:form.type,
				}
				if(form.keywork){
					params.keywork = form.keywork;
				}
				const data = await getNewsList(params);
				if(data && data.bizcode === 100 && data.data){
					return data.data
				}else{
					return [];
				}
			},
			// 当滚动到底部时触发的方法
			loadMore() {
				this.loadData(); // 加载更多数据
			},
			
			/**
			 * 跳转到详情
			 * @param {Object} item
			 */
			jumpInfo(item){
				uni.navigateTo({
					url:'/pages/news_info/news_info?id='+item.id,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news_warp{
		overflow: hidden;
		.news_content_warp{
			padding: 0 30rpx 30rpx;
		}
		.heder_{
			display: flex;
			align-items: center;
			.heder_item{
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
				margin-right: 30rpx;
			}
			.heder_item_sel{
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
			}
		}
		.content_{
			padding: 30rpx;
			background: $app-bj;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			// height: calc(100vh - 560rpx);
			// overflow: auto;
			.search_but{
				line-height: 68rpx;
				background: $app-bt-bj;
				border-radius: 16rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				padding: 0 40rpx;
			}
			.news_content_item{
				background: #FFFFFF;
				padding: 30rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
			}
			.news_content_item_warp{
				margin-right: 20rpx;
			}
			.news_content_item_title{
				font-weight: 800;
				font-size: 36rpx;
				color: #000000;
			}
			.news_content_item_content{
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				 display: -webkit-box;
				  -webkit-box-orient: vertical;
				  -webkit-line-clamp: 2; 
				  overflow: hidden;
				  margin-top: 10rpx;
			}
			.news_content_item_info{
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				.browses_{
					display: flex;
				}
			}
		}
	}
</style>