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/friend-circle.vue
+65 -143
View File
@@ -1,7 +1,7 @@
<template>
<view class="content" id="content">
<u-navbar
@leftClick="goto('/pages/workbench/index/index')"
@leftClick="leftClick"
bgColor="transparent"
title="朋友圈"
title-size="36"
@@ -14,7 +14,7 @@
<u-icon name="camera" color="#fff" size="32"></u-icon>
</view>
</u-navbar>
<scroll-view :scroll-x="false" :scroll-y="true" v-show="showInput==false" class="scrollView"
<scroll-view :scroll-x="false" :scroll-y="true" class="scrollView"
:scroll-with-animation="scrollWithAnimation" :scroll-top="scrollTop" @scroll="scrolling"
@scrolltolower="loadMore"
:style="'height:'+scrollViewHeight+'px'">
@@ -32,14 +32,14 @@
<view class="">{{ selfInfo.bio }}</view>
</view>
<view v-if="vuex_friendCircleUnreadCount>0" style="display: flex;justify-content: center;">
<view v-if="unreadCount>0" style="display: flex;justify-content: center;">
<view @click="clearUnReadCount()"
style="width: 300rpx;height:70rpx;line-height:70rpx;background-color: #333333;color: #ffffff;border-radius:10rpx;display: flex;align-items: center;">
<view style="width:80rpx;padding:0 10rpx;">
<MyAvatar :src="selfInfo.faceURL" class="headimg" desc=" " size="24"/>
</view>
<view style="flex:1;">
{{vuex_friendCircleUnreadCount}}条新信息
{{unreadCount}}条新信息
</view>
</view>
</view>
@@ -49,7 +49,7 @@
<!-- circleData是vuex变量，不在本页面定义 -->
<template v-if="circleData!=null&&circleData.length>0">
<template v-for="(item, index) in circleData" >
<CircleItem :key="index" :index="index" :item="item"></CircleItem>
<CircleItem :key="index" :index="index" :item="item" @userEvent="onUserEvent"></CircleItem>
</template>
</template>
<template v-else>
@@ -59,92 +59,18 @@
</template>
</view>
</scroll-view>
<!-- 为了实现模拟键盘随着内容的选择而固定位置 -->
<template v-if="showInput==true">
<scroll-view :scroll-x="false" :scroll-y="true" :scroll-top="currentTop" @touchstart="closeInputModel"
:style="'width:100%;height:'+scrollViewHeight+'px;'">
<view @click="closeInputModel" class="content-circle-box">
<view>
<MyAvatar :src="currentItem.avatar" :isGroup="false" size="66"></MyAvatar>
</view>
<view class="content">
<view class="content-name">{{ currentItem.nickname }}</view>
<view class="content-desc">{{ currentItem.content }}</view>
<view class="content-img" v-if="currentItem.files!=null&&currentItem.files.length>0">
<view v-if="currentItem.files.length==1&&currentItem.releaseType==1"
class="u-flex u-row-left u-col-center" style="width:100%;min-height: 200rpx;">
<u-image width="280rpx" :src="currentItem.files[0]" mode="widthFix">
<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>
</u-image>
</view>
<!-- 有多张图的时候 -->
<view v-if="currentItem.files.length > 1&&currentItem.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 currentItem.files" :index="index" :custom-style="girdItemCustomStyle">
<view class="slot-btn">
<u-image :src="src" width="180rpx" height="180rpx" mode="aspectFill" border-radius="10"></u-image>
</view>
</u-grid-item>
</u-grid>
</view>
</view>
<view v-if="currentItem.releaseType==2" class="u-m-b-20 u-m-t-20 u-flex u-row-left u-col-center">
<view class="u-flex u-row-left u-col-center" style="height: 120rpx;border-radius: 16rpx;">
<u-icon name="play-circle" size="48" color="#36648b"
label="此处不支持观看视频" label-pos="bottom" :margin-left="20" :margin-right="20"></u-icon>
</view>
</view>
</view>
<!-- 地点 -->
<view v-if="(currentItem.address&&currentItem.address.chooseFlag)==true" class="u-line-2 u-m-t-10 u-m-b-10"
style="font-size: 30rpx;color: #36648b;">
<u-icon name="map" color="#36648b" size="30" :custom-style="{marginLeft:'-4rpx'}"></u-icon>
<text> {{ currentItem.address.name}}</text>
</view>
<!-- 点赞人 评论 -->
<view class="msg-box">
<view class="thumbinfo" v-if="currentItem.praise!=null&&currentItem.praise.length>0">
<uni-icons type="heart" class="thumbinfo-icon"></uni-icons>
<text class="thumbinfo-name" v-for="(userInfo, pindex) in currentItem.praise"
:key="pindex">
{{ userInfo.nickname }}{{ pindex != currentItem.praise.length - 1 ? '，' : '' }}
</text>
</view>
<view class="comment" v-if="currentItem.comments!=null&&currentItem.comments.length>0">
<view class="comment-box" v-for="(comment, cindex) in currentItem.comments" :key="cindex" :index="cindex"
hover-class="comment-hover-class">
<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 }}<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.body }}</text>
</view>
</view>
</view>
<u-overlay :show="showInput" @click="showInput = false">
<view class="input-box" style="height: 100rpx;" @tap.stop>
<view class="input-box-flex">
<view class="input-box-flex-grow">
<input :adjust-position="false" type="text" class="content" id="input" v-model="content"
:confirm-type="'send'" :confirm-hold="true" placeholder-style="color:#DDD;" :cursor-spacing="6"
:placeholder="placeholder" :focus="true" @confirm="sendMsg" />
</view>
<u-button class="btn" type="primary" size="mini" @tap.prevent.stop="sendMsg">发送</u-button>
</view>
</scroll-view>
</template>
<view class="input-box" v-show="showInput" style="height: 100rpx;">
<view class="input-box-flex">
<view class="input-box-flex-grow">
<input :adjust-position="false" type="text" class="content" id="input" v-model="content"
:confirm-type="'send'" :confirm-hold="true" placeholder-style="color:#DDD;" :cursor-spacing="6"
:placeholder="placeholder" :focus="showInput" @blur="blurInput" @confirm="sendMsg" />
</view>
<button class="btn" type="primary" size="mini" @touchend.prevent="sendMsg">发送</button>
</view>
</view>
</u-overlay>
<!-- 视频预览 -->
<view v-if="previewVideoFlag==true">
@@ -180,7 +106,7 @@
circleData() {
return this.$store.getters.storeCircleData;
},
vuex_friendCircleUnreadCount() {
unreadCount() {
return this.$store.getters.storeCircleUnreadCount;
},
last_unread_item() {
@@ -255,21 +181,22 @@
},
onLoad:function(){
let that=this;
this.platFrom= this.$u.os();
console.log("onload",this.platFrom);
let param={
this.platFrom= this.$u.os();
console.log("onload",this.platFrom);
let param={
page:1,
limit:this.limit,
moreFlag:false
};
this.$store.dispatch('circle/getFriendCircleInfo');
this.getCircleDataList(param);
uni.$on("handleFriendCircle", function(friendCircleMessage) {
console.log("监听到朋友圈动态有更新",friendCircleMessage);
let id= friendCircleMessage.content.id;
let newPraise= friendCircleMessage.content.praise;
let newPraise= friendCircleMessage.content.likes;
const index = that.circleData.findIndex(i => i.id ==id);
that.circleData[index].praise=JSON.parse(newPraise);
if(friendCircleMessage.content.isPraise&&friendCircleMessage.userId!=that.selfInfo.userID){
that.circleData[index].likes=JSON.parse(newPraise);
if(friendCircleMessage.content.is_liked&&friendCircleMessage.userId!=that.selfInfo.userID){
that.$store.dispatch('circle/updateUnreadCount',1);
}
})
@@ -293,7 +220,7 @@
methods: {
goto:util.goto,
clearUnReadCount(){
this.$store.dispatch('circle/updateUnreadCount',0-this.vuex_friendCircleUnreadCount);
this.$store.dispatch('circle/updateUnreadCount',0-this.unreadCount);
},
//初始化朋友圈
getCircleDataList:function(param){
@@ -368,32 +295,31 @@
clickThumb(item,index) {
let that=this;
let flag=true;
item.isPraise = !item.isPraise;
if (item.isPraise) {
item.praise.push({
item.is_liked = !item.is_liked;
if (item.is_liked) {
item.likes.push({
userId: this.selfInfo.userID,
userName: this.selfInfo.nickname
});
} else {
const index = item.praise.findIndex(i => i.userId == this.selfInfo.userID);
item.praise.splice(index, 1);
const index = item.likes.findIndex(i => i.userId == this.selfInfo.userID);
item.likes.splice(index, 1);
flag=false;
}
console.log("当前动态下标",index);
console.log("点赞列表",item);
let param={
id:item.id,
praise:JSON.stringify(item.praise),
isPraise:flag
likes:JSON.stringify(item.likes),
is_liked:flag
};
friendCircleZan(param).then(res => {
if(res.code==200){
console.log("点赞更新成功",res.data);
item.praise=JSON.parse(res.data.praise);
that.circleData[index]=item;
}else{
item.isPraise = !item.isPraise;
}
this.$store.dispatch('circle/like',param).then(res=>{
console.log("点赞更新成功",res.data);
item.likes=JSON.parse(res.data.likes);
that.circleData[index]=item;
}).catch(e=>{
item.is_liked = !item.is_liked;
console.log("评论失败",e);
});
},
//跳转到名片
@@ -436,12 +362,12 @@
},
//点击评论 唤出输入框和键盘
handleComment(id, comment, index) {
handleComment(comment, index) {
let that = this;
this.content = '';
that.currentItem = that.circleData[index];
that.currentTop = 0;
this.id = id;
this.id = that.currentItem.id;
this.commentInfo = comment || {};
this.placeholder = '评论：';
if (comment) {
@@ -451,7 +377,7 @@
this.placeholder = `评论：`;
} else {
// xxx评论...
this.placeholder = `回复${comment.replyUser.nickname}:`;
this.placeholder = `回复${comment.user.nickname}:`;
}
}
this.showInput = true;
@@ -463,32 +389,16 @@
return;
}
let param={
reply_user_id:that.selfInfo.userID,
reply_user_id:that.commentInfo?.user_id || '',
body:that.content,
friendCircleId:that.id
id:that.currentItem.id
};
//如果被回复的动态发表人不是自己本人
if(that.commentInfo.reply_user_id!=that.selfInfo.userID){
param.reply_user_id=that.commentInfo.reply_user_id;
param.replyUserName=that.commentInfo.replyUser.nickname;
}
console.log("新增动态的评论",param);
this.circleData.forEach(item => {
if (item.id == that.id) {
if(item.comment!=null&&item.comment.length>0){
item.comment.push(param);
}
else{
item.comment=[param];
}
that.$u.api.friendCircle.handleComment(param).then(res => {
if(res.code==200){
console.log("评论更新成功");
}
});
}
this.$store.dispatch('circle/comment',param).then(res=>{
console.log("评论失败1",res);
that.closeInputModel();
}).catch(e=>{
console.log("评论失败",e);
});
that.closeInputModel();
},
//查看大图或者预览视频
@@ -516,11 +426,6 @@
this.commentInfo = {};
uni.hideKeyboard();
},
//失去焦点触发
blurInput() {
this.closeInputModel();
},
//选择发表朋友圈的方式
toChooseRelease: function(index) {
@@ -584,6 +489,22 @@
return "http://192.168.31.125:9090/we-chat/images/friendCircle/1715421601709.mp4";
//return videoSrc;
},
leftClick(e){
this.goto('/pages/workbench/index/index',"2");
},
onUserEvent(e){
switch(e.type){
case 'clickThumb':
this.clickThumb(e.item,e.index);
break;
case 'handleComment':
this.handleComment(e.comment,e.index);
break;
case 'linkToBusinessCard':
this.linkToBusinessCard(e.userID);
break;
}
},
cdn:util.cdn
},
};
@@ -824,8 +745,9 @@
.btn {
margin-left: 20rpx;
//background-color: $u-type-success;
background-color: $uni-color-success;
border: none;
width: 60px;
}
}
}