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" @click="toDetail(item.id)">
				<view class="news_title">
					{{item.title}}
				</view>
				<view class="hflex acenter user" v-if="item.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="item.imgs.length > 0" class="imgList hflex acenter jbetween">
					<block v-for="(item2,index2) in item.imgs" :key="index2">
						<image :src="item2" mode="aspectFill" class="img" @tap.stop="priveImg(index,index2)"></image>
					</block>
					
				</view>
				<view v-if="item.video" class="imgList">
					<video :src="item.video" controls></video>
				</view>
				<view class="hflex acenter bottom">
					<view class="bottom_text">{{item.type}}</view>
					<view class="bottom_text2">{{item.client}}</view>
					<view class="bottom_text2">{{item.comment}}评论</view>
				</view>
			</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,index2) {
				var that = this
				uni.previewImage({
					urls: that.pageList[index].imgs,
					current: that.pageList[index].imgs[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;
		}
		.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;
			}
		}
		.bottom {
			
			.bottom_text {
				font-size: 24rpx;
				color: #3261FF;
			}
			.bottom_text2 {
				color: #999999;
				font-size: 24rpx;
				margin-left: 20rpx;
			}
		}
	}
	
}
</style>