im/pages/find/friend-circle/components/circleItem.vue

<template>
	<view  class="content-circle-box" :index="index">
		<view @tap="linkToBusinessCard(item.user_id)">
			<MyAvatar :src="item.user.avatar" :desc="item.user.nickname || item.user.id" :isGroup="false" size="48"></MyAvatar>
		</view>
		<view class="content">
			<view class="content-name" @tap="linkToBusinessCard(item.user_id)">{{ item.user.nickname || item.user.remark }}</view>
			<view class="content-desc">
				<text class="u-line-5" selectable user-select>{{item.body}}</text>
				<!-- <u-text :lines="5" :text="item.body" selectable /> -->
			</view>
			<!-- 图片,视频 -->
			<view class="content-img" v-if="item.files!=null&&item.files.length>0">
				<!-- //只有一张图时候 -->
				<view v-if="item.files.length==1&&item.releaseType==1"  
					class="u-flex u-row-left u-col-center"
					style="width:100%;min-height: 200rpx;">
					<u-image width="280rpx" :src="cdn(item.files[0])" mode="widthFix" @tap="previewImg(0)">
						<u-loading-icon slot="loading"></u-loading-icon>
						<view slot="error" 
							class="u-flex u-row-left u-col-center"			
							style="font-size: 24rpx;width: 200rpx;height: 100rpx;margin-top: -50rpx;">
							<u-icon name="photo" size="100" label="加载失败" label-pos="bottom"></u-icon>
						</view>
					</u-image>
				</view>
				<!-- 有多张图的时候 -->
				<view v-if="item.files.length > 1&&item.releaseType==1">
					<view class="content-img-more u-m-b-20">
						<uni-grid :column="3" showBorder borderColor="#FFF" hover-class="none" :highlight="false">
							<uni-grid-item v-for="(src, index) in item.files" :key="index" :index="index">
								<view class="slot-btn">
									<u-image @tap="previewImg(index)" :src="cdn(src)" width="180rpx" height="180rpx" mode="aspectFill" border-radius="10"></u-image>
								</view>
							</uni-grid-item>
						</uni-grid>
					</view>
				</view>


				<!-- 视频 -->
				<view class="u-m-b-30 u-m-t-30 u-flex u-row-left u-col-center" 
					v-if="item.files.length > 0&&item.releaseType==2"  @tap="previewImg(0, item)">
					<view class="u-flex u-row-center u-col-center"
							style="border: 1rpx solid #36648b;width:280rpx;height:120rpx;border-radius: 16rpx;">
						<u-icon name="play-circle" size="48" color="#36648b"
								label="点击查看视频" label-pos="bottom"></u-icon>
					</view>
				</view>
			</view>
	
			<!-- 地点 -->
			<view v-if="(item.address&&item.address.chooseFlag)==true" @click="gotomap(item)" class="content-address">
				 <u-icon name="map" color="#36648b"></u-icon>
				 <u-text class="name" :lines="1" :text="item.address.name"></u-text>
			</view>
	
			<!-- 相对时间 点赞按钮等 -->
			<view class="relavivetime" :id="`comment-${'null'}-${index}`">
				<view class="time">
				    <view>{{ item.created_at }}</view>
					<view @click="deleteCircle(item,index)" style="color:#36648b;margin-left: 20rpx;" v-if="item.user_id==storeSelfInfo.userID">删除</view>
				</view>
	
				<view class="icon-box u-flex u-row-between u-col-center">
					<view @tap="clickThumb(item,index)" class="u-m-r-6 u-p-t-4">
						<u-icon v-if="item.is_liked==false" size="24" name="heart" color="#36648b"></u-icon>
						<u-icon v-if="item.is_liked==true"  size="24" name="heart-fill" color="#36648b"></u-icon>
					</view>
					<view @tap="handleComment(null, index)" class="u-m-l-6 u-p-t-2">
						<u-icon size="24" name="chat" color="#36648b"></u-icon>
					</view>
				</view>
			</view>
	
			<!-- 点赞人 评论 -->
			<view class="msg-box">
				<view class="thumbinfo u-border-bottom" v-if="item.likes!=null&&item.likes.length">
					<uni-icons size="24" type="heart" color="#36648b" class="u-m-r-10"></uni-icons>
					<text class="thumbinfo-name" v-for="(ui, pindex) in item.likes" :index="pindex"
						:key="pindex" @tap="linkToBusinessCard(ui.user_id)">
						{{ ui.nickname }}{{ pindex != item.likes.length - 1 ? '，' : '' }}
					</text>
				</view>
				<view class="comment" v-if="item.comments!=null&&item.comments.length">
					<view 
						class="comment-box" 
						v-for="(comment, commentIndex) in item.comments" 
						:index="comment.id"
						:key="comment.id" 
						hover-class="comment-hover-class"
						:id="`comment-${item.id}-${comment.id}`"
						@tap="handleComment(comment, index)">
						<text class="comment-box-name">
							{{ comment.user.nickname }}
						</text>
						<text class="callback u-m-l-4 u-m-r-4" v-if="comment.reply_user_id">回复</text>
						<text v-if="comment.reply_user_id" class="comment-box-name">
							{{ comment.user.nickname }}
						</text>
						<text>：</text>
						<text class="comment-box-content">{{ comment.body }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MyAvatar from "@/components/MyAvatar/index.vue";
	import util from "@/util/index.js";
	import { mapGetters } from "vuex";
	export default{
		components:{MyAvatar},
		props:{
			index:{
				type:Number,
				default:0
			},
			item:{
				type:Object,
				default(){
					return {};
				}
			}
		},
		computed:{
			...mapGetters(["storeSelfInfo"]),
		},
		data(){
			//console.log(this.item);
			return {
				girdItemCustomStyle:{
					padding: '0',
					margin:'0',
					border:'1rpx solid #f2f6fc'
				},
			}
		},
		methods:{
			log(v){
				console.log(v)
			},
			clickThumb(item,index){
				this.$emit('userEvent',{type:'clickThumb',item,index});
			},
			deleteCircle(item,index){
				this.$emit('userEvent',{type:'deleteCircle',item,index});
			},
			handleComment(comment,index){
				this.$emit('userEvent',{type:'handleComment',comment,index});
			},
			linkToBusinessCard(userID){
				this.$emit('userEvent',{type:'linkToBusinessCard',userID});
			},
			//查看大图或者预览视频
			previewImg(current) {
				const data = this.item;
				let that=this;
				let releaseType= data.releaseType;
				let fileList=[...data.files];
				if(releaseType==2){
					that.previewVideoSrc=fileList[0];
					that.previewVideoFlag=true;
				}else{
					fileList=fileList.map(item=>this.cdn(item));
					uni.previewImage({
						current:current,
						urls: fileList,
					});
					return;
				}
			},
			getVideoPoster(videoSrc){
				console.log("video",videoSrc);
				return "http://192.168.31.125:9090/we-chat/images/friendCircle/1715421601709.mp4";
				//return videoSrc;
			},
			gotomap(item){
				const addr = item.address;
				uni.navigateTo({
					url:`/pages/common/map?type=viewlocation&lng=${addr.longitude}&lat=${addr.latitude}&address=${addr.address}`
				})
			},
			cdn:util.cdn
		}
	}
</script>

<style scoped lang="scss">

	.content-circle-box {
		padding: 18rpx 30rpx;
		border-bottom: 1rpx solid #f2eeee;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;

		.headimg {
			width: 80rpx;
			height: 80rpx;

			.img {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.content {
			flex: 1;
			padding-left: 18rpx;
			font-size: 32rpx;

			&-name {
				color: #36648b;
				font-weight: bold;
				font-size: 32rpx;
			}

			&-desc {
				color: #000000;
				padding-top: 4rpx;
				//line-height: 36rpx;
				font-size: 32rpx;
				uni-text{
					
				}
			}

			&-img {
				margin-top: 10rpx;

				.img-1 {
					will-change: transform;
					width: 280rpx;
					height: auto;
					max-height: 400rpx;
				}

				&-more {
					display: flex;
					flex-wrap: wrap;
					.img-more {
						display: block;
						width: 160rpx;
						height: 160rpx;
						margin: 4rpx;
					}

					.img-3 {
						margin: 4rpx 4rpx 4rpx 0;
					}
				}
			}
			&-address{
				font-size: 26rpx;
				color: #36648b;
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				.u-icon{
					
				}
				.name{
				}
			}
			.msg-box {
				width: 100%;
				background-color: #FFF;
				margin-top: 15rpx;
				border-radius: 4rpx;

				.thumbinfo {
					// border-bottom: 1rpx solid gray;
					padding: 6rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					&-icon {
						width: 28rpx;
						height: 28rpx;
						line-height: 28rpx;
						margin-right: 15rpx;
						text-align: center;
						vertical-align: middle;
						padding-left: 10rpx;
					}

					&-name {
						font-size: 28rpx;
						color: #36648b;
					}
				}

				.comment {
					padding: 6rpx 8rpx;
					color: $uni-text-color;
					font-size: 28rpx;

					&-box {
						padding: 4rpx 0;

						&-name {
							color: #36648b;

							.callback {
								color: $uni-text-color;
							}
						}

						&-content {
							word-break: break-all;
						}
					}
				}
			}
		}

		.relavivetime {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;

			.time {
				color: $uni-text-color-grey;
				display: flex;
				align-items: center;
			}

			.icon-box {
				display: flex;
				align-items: center;

				&-item {
					//background-color: #F8F8F8;
					padding: 4rpx 12rpx;
					border-radius: 6rpx;

					&.thumb {
						margin-right: 10rpx;
					}
				}

				.img {
					width: 34rpx;
					height: 34rpx;
				}
			}
		}
	}
	.content-img-more{
		max-width: 100%;
	}

</style>