commie/im
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
cansnow
2025-12-08 02:29:46 +08:00
parent 69a61178e1
commit 22ee59cd3d
17 changed files with 895 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/workbench/friend-circle/components/circleItem.vue
+106 -59
View File
@@ -1,53 +1,56 @@
<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="66"></MyAvatar>
<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">{{ item.body }}</view>
<view class="content-desc">
<u--text :lines="5" :text="item.body" />
</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, item)">
<u-loading slot="loading"></u-loading>
<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>
<!-- //只有一张图时候 -->
<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 v-if="vuex_OSPlat=='ios'">
<u-image width="280rpx" :src="getVideoPoster(item.files[0])" mode="widthFix">
<u-loading-icon slot="loading"></u-loading-icon>
</u-image>
</view>
<!-- 有多张图的时候 -->
<view v-if="item.files.length > 1&&item.releaseType==1">
<view class="content-img-more u-m-b-20">
<u-grid :col="3" :border="false" hover-class="none">
<u-grid-item v-for="(src, index) in item.files" :index="index" :custom-style="girdItemCustomStyle">
<view @tap="previewImg(index, item)" class="slot-btn">
<u-image :src="cdn(src)" width="180rpx" height="180rpx" mode="aspectFill" border-radius="10"></u-image>
</view>
</u-grid-item>
</u-grid>
</view>
</view>
<!-- 视频 -->
<view class="u-m-b-30 u-m-t-30 u-flex u-row-left u-col-center"
v-if="item.fileList.length > 0&&item.releaseType==2" @tap="previewImg(0, item)">
<view v-if="vuex_OSPlat=='ios'">
<u-image width="280rpx" :src="getVideoPoster(item.fileList[0])" mode="widthFix">
<u-loading slot="loading"></u-loading>
</u-image>
</view>
<view v-else 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 v-else 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>
<!-- 地点 -->
@@ -58,43 +61,42 @@
<!-- 相对时间 点赞按钮等 -->
<view class="relavivetime" :id="`comment-${'null'}-${index}`">
<view class="time u-flex u-col-center">
<view class="time">
<view>{{ item.created_at }}</view>
<view @click="deleteCircle(item,index)" style="color:#36648b;margin-left: 20rpx;" v-if="item.user_id==selfInfo.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.isPraise==false" size="38" name="heart" color="#36648b"></u-icon>
<u-icon v-if="item.isPraise==true" size="38" name="heart-fill" color="#36648b"></u-icon>
<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(item.id, null, index)" class="u-m-l-6 u-p-t-2">
<u-icon size="40" name="chat" color="#36648b"></u-icon>
<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.praise!=null&&item.praise.length">
<view class="thumbinfo u-border-bottom" v-if="item.likes!=null&&item.likes.length">
<uni-icons size="30" type="heart" color="#36648b" class="u-m-r-10"></uni-icons>
<text class="thumbinfo-name" v-for="(userInfo, pindex) in item.praise" :index="pindex"
<text class="thumbinfo-name" v-for="(userInfo, pindex) in item.likes" :index="pindex"
:key="pindex" @tap="linkToBusinessCard(userInfo.userId)">
{{ userInfo.nickame }}{{ pindex != item.praise.length - 1 ? '，' : '' }}
{{ userInfo.nickame }}{{ 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="commentIndex"
:key="commentIndex" hover-class="comment-hover-class"
:id="`comment-${item.id}-${index}`"
@tap="handleComment(item.id, comment, index)">
<text class="comment-box-name" v-if="!comment.reply_user_id">{{ comment.replyUser.nickname }}：</text>
<text class="comment-box-name" v-if="comment.reply_user_id">
{{ comment.replyUser.nickname }}
<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 class="callback u-m-l-4 u-m-r-4">回复</text>
</text>
<text v-if="comment.reply_user_id" class="comment-box-name">{{ comment.replyUser.nickname }}：</text>
<text class="comment-box-content">{{ comment.content }}</text>
<text v-if="comment.reply_user_id" class="comment-box-name">{{ comment.user.nickname }}：</text>
<text class="comment-box-content">{{ comment.body }}</text>
</view>
</view>
</view>
@@ -105,6 +107,7 @@
<script>
import MyAvatar from "@/components/MyAvatar/index.vue";
import videoPlayer from '@/components/videoPlayer.vue';
import util from "@/util/index.js";
export default{
components:{videoPlayer ,MyAvatar},
props:{
@@ -125,13 +128,52 @@
},
},
data(){
console.log(this.item);
//console.log(this.item);
return {
girdItemCustomStyle:{
padding: '0',
margin:'0',
border:'1rpx solid #f2f6fc'
},
}
},
methods:{
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;
},
cdn:util.cdn
}
}
</script>
@@ -262,6 +304,8 @@
.time {
color: $uni-text-color-grey;
display: flex;
align-items: center;
}
.icon-box {
@@ -285,5 +329,8 @@
}
}
}
.content-img-more{
max-width: 100%;
}
</style>