cbz/components/news-module/news-module.vue

<template>
	<view class="news_module vflex">
		<block v-for="(item,index) in pageList" :key="index">
			<view class="news_box">
				<view class="news_title">
					{{item.ad.title}}
				</view>
				<view v-if="item.ad.images !== ''" class="imgList hflex acenter jbetween">
					<image :src="item.ad.images" mode="aspectFill" class="img2"></image>
				</view>
				<view class="hflex acenter bottom">
					<view class="bottom_text3">广告</view>
					<view class="bottom_text2" v-if="item.ad.source">{{item.ad.source}}</view>
				</view>
			</view>
			<view class="" >
				<block v-for="(item1,index1) in item.xw" :key="index1">
					<view class="news_box" @click="toDetail(item1.id)">
						<view class="news_title">
							{{item1.title}}
						</view>
						<!-- <view class="hflex acenter user" v-if="item2.user">
							<view class="avatar_box">
								<image :src="item.user.avatar" mode="aspectFill" class="avatar"></image>
							</view>
							<view class="user_text">{{item.user.name}}</view>
							<view v-if="item.user.is_blueV" class="blue_v">
								V
							</view>
						</view> -->
						<view v-if="item1.images.length > 2" class="imgList hflex acenter jbetween">
							<block v-for="(item2,index2) in item1.images" :key="index2">
								<image :src="item2" mode="aspectFill" class="img" @tap.stop="priveImg(index,index1,index2)"></image>
							</block>
						</view>
						<view v-if="item1.images.length == 1 && !item1.has_img" class="imgList hflex acenter jcenter">
							<image :src="item1.images" mode="aspectFill" class="img2"></image>
						</view>
						<!-- <view v-if="item.video" class="imgList">
							<video :src="item.video" controls></video>
						</view> -->
						<view class="hflex acenter bottom">
							<view class="bottom_text">{{item1.category.name}}</view>
							<view class="bottom_text2">{{item1.source}}</view>
							<view class="bottom_text2" v-if="item1.comments_count > 0">{{item1.comments_count}}评论</view>
						</view>
					</view>
				</block>
				
			</view>
		</block>
		
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		name:"news-module",
		props: {
			pageList: {
				type: Array,
				value: []
			}
			
		},
		data() {
			return {
				
			}
		},
		methods: {
			// 打开详情
			toDetail(id) {
				$api.jump('/page_index/pages/index/newDetail?id=' + id)
			},
			// 查看图片
			priveImg(index,index1,index2) {
				var that = this
				console.log(index,index2);
				uni.previewImage({
					urls: that.pageList[index].xw[index1].images,
					current: that.pageList[index].xw[index1].images[index2]
				});
			}
		}
	}
</script>

<style lang="scss">
.news_module {
	width: 100%;
	
	
	.news_box {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f3f3f3;
		.news_title {
			font-size: 36rpx;
			color: #333;
			line-height: 50rpx;
			padding: 20rpx 0;
		}
		.user {
			padding: 14rpx 0 0;
			.avatar_box {
				margin-right: 8rpx;
				.avatar {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
				}
			}
			.user_text {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 34rpx;
			}
			.blue_v {
				background: #506DFF;
				border-radius: 12rpx 4rpx 12rpx 4rpx;
				margin-left: 8rpx;
				text-align: center;
				line-height: 28rpx;
				// padding: 6rpx;
				width: 28rpx;
				height: 28rpx;
				color: #fff;
				font-size: 14rpx;
			}
		}
		.imgList {
			margin: 16rpx 0;
			.img {
				width: 224rpx;
				height: 148rpx;
				border-radius: 8rpx 0px 0px 8rpx;
				margin: 0 12rpx 20rpx 0;
			}
			.img2 {
				width: 100%;
				height: 360rpx;
				border-radius: 16px;
			}
		}
		.bottom {
			
			.bottom_text {
				font-size: 24rpx;
				color: #3261FF;
			}
			.bottom_text2 {
				color: #999999;
				font-size: 24rpx;
				margin-left: 20rpx;
			}
			.bottom_text3 {
				font-size: 24rpx;
				font-weight: 400;
				color: #EB0000;
				line-height: 34rpx;
			}
		}
	}
	
}
</style>