broke_news_wx/components/news-list/news-list.vue

<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<z-paging ref="paging" v-model="dataList" @query="queryList" use-page-scroll :hide-empty-view="hideEmptyView"
			:refresher-enabled="false" @contentHeightChanged="contentHeightChanged" :auto="false">
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)">
				<view class="itemTitle">
					{{ formatTitle(item.title) }}
					<text v-if="item.title.length > 90" class="allContent">全文</text>
				</view>
				<view class="resources" v-if="item.clueInfoList.length <= 1">
					<view class="resourcesItem resourcesItemOne" v-for="items in item.clueInfoList" :key="items.id">
						<image v-if="items.type == '1'" mode="aspectFill" class="logo" :src="items.localUrl"></image>
						<image v-if="items.type == '2'" class="logo" src="../../static/image/video.png"></image>
						<image v-if="items.type == '3'" class="logo" src="../../static/image/music.png"></image>
						<image v-if="items.type == 2 || items.type == 3" src="../../static/image/playBtn.png"
							class="playBtn"></image>
					</view>
				</view>
				<view class="resources" v-else>
					<view class="resourcesItem resourcesItems" v-for="items in item.clueInfoList" :key="items.id">
						<image v-if="items.type == '1'" class="logo" mode="aspectFill" :src="items.localUrl"></image>
						<image v-if="items.type == '2'" class="logo" src="../../static/image/video.png"></image>
						<image v-if="items.type == '3'" class="logo" src="../../static/image/music.png"></image>
						<image v-if="items.type == 2 || items.type == 3" src="../../static/image/playBtn.png"
							class="playBtn"></image>
					</view>
					<view class="resourcesItem resourcesItems" v-if="item.clueInfoList.length % 3 == 2"></view>
				</view>
				<view class="bottomBox">
					<view class="momentBox">
						<view class="author" v-if="tabIndex == 3">{{ formatName(item.author) }}</view>
						<image src="../../static/image/moment.png" class="momentImg"></image>
						<text>{{ item.replyCount }}</text>
					</view>
					<view class="timeBox">{{ item.modifyTime }}</view>
				</view>
				<view class="seat"></view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		findPage
	} from '../../network/api.js';
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				height: 0,
				hideEmptyView: true,
				completeFunc: null
			};
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0;
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0;
				}
			},
			title: {
				type: String,
				default: function() {
					return '';
				}
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						setTimeout(() => {
							this.$refs.paging.reload();
						}, 100);
					}
				},
				immediate: true
			}
		},
		methods: {
			formatName(name, index = 7) {
				return name.length > index ? name.substring(0, index - 1) + '...' : name;
			},
			toDetail(id) {
				uni.navigateTo({
					url: `../../pages/newsDetail/newsDetail?id=${id}`
				});
			},
			formatTitle(title) {
				// let phoneArr = title.match(/(0|86|17951)?(13[0-9]|15[0-9]|166|17[3678]|18[0-9]|14[57]|19[0-9])[0-9]{8}/g)
				// if(Array.isArray(phoneArr)) {
				// 	phoneArr.map(item => {
				// 		let index = title.indexOf(item)
				// 		let hide_phone = item.replace(item.substring(3,7), "****")
				// 		title = `${title.substr(0, index)}${hide_phone}${title.substr(index + 11)}`
				// 	})
				// }
				const reg = /1(\d{2})\d{4}(\d{4})/g;
				title = title.replace(reg, "1$1****$2");
				return title.length > 105 ? title.substring(0, 104) + '...' : title;
			},
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				//let multiSourceType = [2, 4, 1, 3];
				let multiSourceType = [1, 4, 2];
				const params = {
					pageNumber: pageNo,
					pageSize: pageSize,
					ascription: 1,
					multiSource: multiSourceType[this.tabIndex],
					title: this.title,
					status: 1
				};
				findPage(params).then(
					res => {
						if (res.data.state == 200) {
							let data = res.data.data.pageRecords.map(item => {
								item.clueInfoList = item.clueInfoList.filter(i => {
									return i.type !== 0;
								});
								return item;
							});
							console.log(data);
							this.$refs.paging.complete(data);
						} else {
							this.$refs.paging.complete([]);
						}
						this.hideEmptyView = false;
						//请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
						if (this.completeFunc) {
							this.completeFunc();
						}
					},
					error => {
						this.$refs.paging.complete(false);
						if (this.completeFunc) {
							this.completeFunc();
						}
					}
				);
			},
			//页面通知当前子组件刷新列表
			reload(completeFunc) {
				//先把父组件下拉刷新的回调函数存起来
				this.completeFunc = completeFunc;
				//调用z-paging的reload方法
				this.$refs.paging.reload();
			},
			//当列表高度改变时，通知页面的swiper同步更改高度
			contentHeightChanged(height) {
				const finalHeight = this.dataList.length ? height : 0;
				this.$emit('heightChanged', finalHeight);
			},
			//页面通知当前子组件加载更多数据
			doLoadMore() {
				this.$refs.paging.doLoadMore();
			},
			//页面通知当前子组件清除数据
			clear() {
				this.$refs.paging.clear();
				this.hideEmptyView = true;
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
	/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
	.content {
		height: 100%;
	}

	.item {
		.seat {
			height: 8px;
			width: 100%;
			background-color: #f7f7f9;
		}

		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		margin-top: 16px;

		.itemTitle {
			font-size: 14px;
			position: relative;

			.allContent {
				position: absolute;
				bottom: 0;
				right: 0;
				color: #2468f2;
				z-index: 10;
				background-color: #ffffff;
			}
		}

		.resources {
			display: flex;
			flex-wrap: wrap;
			margin-top: 8px;
			justify-content: space-between;

			.resourcesItem {
				border-radius: 5px;
				overflow: hidden;
				position: relative;
				margin-bottom: 5px;

				.logo {
					width: 100%;
					height: 100%;
				}

				.playBtn {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.resourcesItemOne {
				width: 686rpx;
				height: 386rpx;
			}

			.resourcesItems {
				width: 218rpx;
				height: 218rpx;
			}
		}

		.bottomBox {
			margin: 16px 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 12px;
			color: #5c5f66;

			.momentBox {
				display: flex;
				align-items: center;

				.momentImg {
					width: 16px;
					height: 16px;
					margin-right: 4px;
				}

				.author {
					margin-right: 32rpx;
				}
			}
		}
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007aff;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
</style>