veterans_H5/h5_web/pages/newsInformation/newsInformation.vue

<!-- 新闻动态 -->
<template>
	<view class="news">
		<z-paging ref="paging" v-model="newsList" @query="queryList">
			<view class="news-list">
				<view class="news-list-item" v-for="(item, index) in newsList" :key="index"
					@click="jumpPage('/pages/newsDetails/newsDetails', { artId: item.artId })">
					<view class="news-list-item-left">
						<u-image :src="item.artImage" width="128" height="120" border-radius="10"/>
					</view>
					<view class="news-list-item-right">
						<view class="title">{{ item.artTitle }}</view>
						<view class="date">
							<view>来源：{{ item.artAuthor }}</view>
							<view>{{ item.artPostTime }}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 新闻列表
				newsList: []
			}
		},
		methods: {
			/**
			 * 获取新闻列表
			 */
			getList(pageNum, pageSize) {
				this.$u.api.indexApi.getIndexNewsListApi({
					pageNum: pageNum,
					pageSize: pageSize,
					artCategoryId: 2
				}).then(res => {
					if (res.code === 200) {
						this.$refs.paging.complete(res.rows)
					} else {
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error'
						})
						this.$refs.paging.complete([])
					}
				}).catch((err) => {
					this.$refs.uToast.show({
						title: '系统异常!',
						type: 'error'
					})
					this.$refs.paging.complete([])
				})
			},
			/**
			 * @param { Number } pageNo
			 * @param { Number } pageSize
			 */
			queryList(pageNo, pageSize) {
				this.getList(pageNo, pageSize);
			},
			/**
			 * 跳转到指定页面
			 */
			jumpPage(url, params) {
				this.$u.route({
					url: url,
					params: params
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news {
		background-color: #f2f2f2;
		min-height: calc(100vh - 44px);

		&-list {
			padding: 28rpx 30rpx;

			&-item {
				display: flex;
				align-items: center;
				background-color: #fff;
				padding: 34rpx 32rpx;
				margin-bottom: 20rpx;

				&-left {
					margin-right: 16rpx;

					image {
						width: 132rpx;
						height: 106rpx;
					}
				}

				&-right {
					.title {
						color: #000;
						font-size: 30rpx;
					}

					.date {
						margin-top: 12rpx;
						color: #6F6F6F;
						font-size: 24rpx;
						display: flex;
						justify-content: space-between;

						view {
							width: 50%;
						}
					}
				}
			}
		}
	}
</style>