yicangzongtai_app_240321/pages/news/index.vue

<template>
	<view class="app-container">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="topview" :style="{top:tabTop+'px'}">
			<u-tabs :list="list" :is-scroll="true" name="informationTypeName" active-color="#3CBACF"
				inactive-color="#999999" :current="current" @change="change"></u-tabs>
		</view>
		<view class="news-box" v-if="newsList.length > 0">
			<block v-for="(item, index) in newsList" :key="item.informationId">
				<template v-if="activeTypeName === '宜昌发布'">
					<view class="news-item" @click="openYiChangNewsDetail(item)">
						<view class="news-info">
							<view class="news-title">{{item.title}}</view>
							<view class="info-footer">
								<text class="news-time">{{item.published}}</text>
								<text>{{item.author}}</text>
							</view>
						</view>
						<view class="news-img lazy-img">
							<u-image class="service-img" :src="item.coverImgUrl" mode="aspectFill"
								:lazy-load="true"></u-image>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="news-item" @click="toNewsDetail(item)">
						<view class="news-info">
							<view class="news-title">{{item.informationTitle}}</view>
							<view class="info-footer">
								<text class="news-time">{{item.createTime}}</text>
								<text>{{item.informationTypeName}}</text>
							</view>
						</view>
						<view class="news-img lazy-img">
							<u-image class="service-img" :src="$getImgPath(item.informationThumbnail)" mode="aspectFill"
								:lazy-load="true"></u-image>
						</view>
					</view>
				</template>
			</block>
		</view>
		<view v-else-if="status !== 'loading'" class="empty-box">
			<EmptyDate :top="200" />
		</view>
		<loadMore v-if="newsList.length > 0 || status === 'loading'" :status="status"></loadMore>
	</view>
</template>

<script>
	import {
		newsClassify,
		newsList
	} from '@/api/government.js';

	import {
		getYiChangNews,
		openYiChangNews
	} from "../government/conmon.js"
	var app = getApp()
	export default {
		data() {
			return {
				config: {
					back: true,
					title: '资讯',
					color: '#1a1a1a',
					backgroundColor: [1, '#fff'],
				},
				list: [],
				current: 0,
				newsList: [],
				pageSize: 10,
				pageNum: 1,
				informationTypeId: null,
				activeTypeName: null,
				tabTop: 0,
				status: 'more', //more|loading|noMore
				noData: false,
			}
		},
		onLoad() {
			this.tabTop = uni.getSystemInfoSync().statusBarHeight + 44;
			this.getNewsClassify()
		},
		onReachBottom() {
			if (this.status == 'more') {
				this.pageNum++
				this.getNewsList(false)
			}
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.current = 0
			this.getNewsClassify()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			change(index) {
				if (this.current == index) {
					return false
				}
				this.current = index;
				this.informationTypeId = this.list[index].informationTypeId
				this.$nextTick(() => {
					this.getNewsList()
				})
			},
			getNewsClassify() {
				newsClassify({
					informationChannel: this.$keys.information_home
				}).then(res => {
					if (res && res.code == 200) {
						this.list = res.data
						this.informationTypeId = res.data[0].informationTypeId
						this.$nextTick(() => {
							this.getNewsList()
						})
					}
				})
			},
			openYiChangNewsDetail(row) {
				openYiChangNews(row)
			},
			getNewsList(refresh = true) {
				if (refresh) this.pageNum = 1
				this.status = 'loading';
				const item = this.list.find(el => el.informationTypeId === this.informationTypeId)
				this.activeTypeName = item.informationTypeName;
				if (item.informationTypeName === "宜昌发布") {
					getYiChangNews(this.pageSize, this.pageNum, true).then(res => {
						this.newsList = refresh ? res.data : this.newsList.concat(res.data)
						this.total = res.total;
						this.pageNum = res.pageNum;
						this.status = this.$mUtil.pagination(res.total, this.pageNum, this.pageSize)
					})
				} else {
					newsList({
						pageSize: this.pageSize,
						pageNum: this.pageNum,
						informationTypeId: this.informationTypeId
					}).then(res => {
						if (res && res.code == 200) {
							this.newsList = refresh ? res.rows : this.newsList.concat(res.rows)
							this.total = res.total
							this.status = this.$mUtil.pagination(res.total, this.pageNum, this.pageSize)
						}
					})
				}

			},
			toNewsDetail(item) {
				uni.navigateTo({
					url: '/pages/news/news_detail?informationId=' + item.informationId
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f9f9f9;
	}
</style>

<style lang="scss" scoped>
	.topview {
		background-color: #fff;
		height: 110rpx;
		width: 100%;
		position: fixed;
		left: 0;
		box-sizing: border-box;
		padding: 0 30rpx;
		z-index: 66;
	}

	.news-box {
		margin: 0 30rpx;
		padding: 0 30rpx;
		margin-top: 130rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.news-item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			// border-bottom: 1rpx solid #ededed;

			&:last-child {
				border-bottom: none;
			}

			.news-img {
				width: 245rpx;
				height: 181rpx;
				flex-shrink: 0;
				vertical-align: middle;
				border-radius: 10rpx;
			}

			.news-info {
				margin-right: 20rpx;

				.news-title {
					height: 120rpx;
					font-size: 30rpx;
					color: #333333;
					margin-bottom: 20rpx;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
				}

				.info-footer {
					color: #999999;
					font-size: 26rpx;

					.news-time {
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>