<template>
|
<div class="friend-message-wrapper">
|
<InfoAvatar
|
class="friend-message-avatar"
|
:src="props.data.headPhoto ? setOSSLink(props.data.headPhoto) : ''"
|
:name="props.data.name"
|
:company="props.data.companyName"
|
@click.stop="goUserHomePage(props.data.userId)"
|
/>
|
<div class="friend-message-right">
|
<div class="friend-message-content">
|
<FriendMessageContent :data="props.data" />
|
</div>
|
<div class="friend-message-bottom">
|
<div class="friend-message-time-wrapper">
|
<div class="friend-message-time">{{ timeAgo }}</div>
|
<img
|
v-if="isSelf"
|
class="friend-message-action-delete"
|
@click.stop="handleDelete"
|
:src="IconDelete"
|
/>
|
</div>
|
<div class="friend-message-actions">
|
<div class="friend-message-action" @click.stop="toggleLike">
|
<img
|
class="friend-message-action-icon"
|
:src="props.data.isYourSelfThumbsUp ? IconLikeActive : IconLike"
|
/>
|
<div class="friend-message-action-text">{{ props.data.thumbsUps?.length }}</div>
|
</div>
|
<div class="friend-message-action" @click.stop="handleCommentFocus()">
|
<img class="friend-message-action-icon" :src="IconComment" />
|
<div class="friend-message-action-text">{{ props.data.replies?.length }}</div>
|
</div>
|
</div>
|
</div>
|
<div
|
v-if="props.data.thumbsUps?.length > 0 || props.data.replies?.length > 0"
|
class="friend-message-reply-list-wrapper"
|
>
|
<div class="friend-message-reply-list-wrapper">
|
<div v-if="props.data.thumbsUps?.length > 0" class="friend-message-like-bar">
|
<img class="friend-message-like-icon" :src="IconLikeHeart" />
|
<div class="friend-message-like-content">
|
<span
|
v-for="(item, index) in props.data.thumbsUps"
|
:key="index"
|
class="friend-message-like-name"
|
@click.stop="goCheckBusinessCard(item.shortId)"
|
>
|
{{ item.name }}
|
{{ index == props.data.thumbsUps.length - 1 ? '' : ',' }}
|
</span>
|
</div>
|
</div>
|
<div v-if="props.data.replies?.length > 0" class="friend-message-reply-list">
|
<div
|
v-for="reply in props.data.replies"
|
:key="reply.id"
|
class="friend-message-reply-list-item"
|
>
|
<div class="friend-message-reply-item-name-wrapper">
|
<!-- <div
|
class="friend-message-reply-item-name"
|
@click="goCheckBusinessCard(reply.shortId)"
|
>
|
{{ reply.name }}
|
</div> -->
|
<FriendMessageReplyName
|
:name="reply.name"
|
:avatar-url="reply.headPhoto"
|
@click.stop="goCheckBusinessCard(reply.shortId)"
|
></FriendMessageReplyName>
|
<!-- <template v-if="reply.parentId">
|
<div class="friend-message-reply-item-replytext">回复</div>
|
<div
|
class="friend-message-reply-item-name"
|
@click="goCheckBusinessCard(reply.beRepliedShortId)"
|
>
|
{{ reply.beRepliedName }}
|
</div>
|
</template> -->
|
<!-- <div class="friend-message-reply-item-mao">:</div> -->
|
</div>
|
<View
|
class="friend-message-reply-item-content"
|
@click.stop="handleCommentFocus(reply)"
|
@longpress.stop="handleDeleteReply(reply)"
|
>
|
<template v-if="reply.parentId">
|
<div class="friend-message-reply-item-replytext">回复</div>
|
<div
|
class="friend-message-reply-item-name"
|
@click.stop="goCheckBusinessCard(reply.beRepliedShortId)"
|
>
|
{{ reply.beRepliedName }}
|
</div>
|
<div class="friend-message-reply-item-mao">: </div>
|
</template>
|
{{ reply.content }}
|
</View>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ListActionsType } from '@12333/hooks';
|
import { formatTimeAgo, Message, setOSSLink } from '@12333/utils';
|
import _ from 'lodash';
|
import * as circleFriendServices from '@12333/services/api/CircleFriend';
|
import InfoAvatar from '../../Avatar/InfoAvatar.vue';
|
import FriendMessageContent from '../FriendMessageContent/FriendMessageContent.vue';
|
import { Block, View } from '@tarojs/components';
|
import FriendMessageReplyName from './FriendMessageReplyName.vue';
|
import { computed } from 'vue';
|
import IconDelete from '@/assets/friends/icon-delete.png';
|
import IconComment from '@/assets/friends/icon-comment.png';
|
import IconForward from '@/assets/friends/icon-forward.png';
|
import IconLike from '@/assets/friends/icon-like.png';
|
import IconLikeActive from '@/assets/friends/icon-like-active.png';
|
import IconLikeHeart from '@/assets/friends/icon-like-heart.png';
|
|
defineOptions({
|
name: 'FriendMessage',
|
});
|
|
type Props = {
|
data: API.CircleFriendDto;
|
groupIndex?: number;
|
itemIndex?: number;
|
listActions?: ListActionsType;
|
useAccessPersonalInfo: <T extends (...args: any[]) => any>(fn: T) => T;
|
currentUseId?: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const emit = defineEmits<{
|
(e: 'goUserHomePage', userId: string): void;
|
}>();
|
|
const isSelf = computed(() => props.currentUseId == props.data.userId);
|
|
const isLike = computed(() => props.data.isYourSelfThumbsUp);
|
|
const timeAgo = computed(() => formatTimeAgo(props.data.creationTime, 'HH:mm'));
|
|
const toggleLike = props.useAccessPersonalInfo(async () => {
|
try {
|
let res = null;
|
if (isLike.value) {
|
res = await circleFriendServices.thumbsRecallCircleFriend({
|
circleFriendId: props.data.id,
|
});
|
} else {
|
res = await circleFriendServices.thumbsUpCircleFriend({
|
circleFriendId: props.data.id,
|
});
|
}
|
if (res) {
|
props.listActions?.updatePageByIndex?.({
|
groupIndex: props.groupIndex,
|
itemIndex: props.itemIndex,
|
});
|
}
|
} catch (error) {}
|
});
|
|
const handleCommentFocus = props.useAccessPersonalInfo((replyItem?: API.CircleFriendReplyDto) => {
|
if (replyItem && replyItem.parentId) {
|
Message.warning('无法继续评论');
|
return;
|
}
|
Message.newPromptOneLine({
|
title: '评论',
|
inputProps: {
|
placeholder: '善语结善缘，恶言伤人心',
|
},
|
confirmText: '发送',
|
onConfirm: (value, done) => handleComment(value, done, replyItem),
|
});
|
});
|
|
const handleComment = async (commentInputValue, done, replyItem?: API.CircleFriendReplyDto) => {
|
try {
|
const value = _.trim(commentInputValue);
|
if (value) {
|
let params: API.ReplyCircleFriendInput = {
|
circleFriendId: props.data.id,
|
content: value,
|
};
|
if (replyItem) {
|
params.parentId = replyItem?.id;
|
}
|
let res = await circleFriendServices.replyCircleFriend(params);
|
if (res) {
|
props.listActions?.updatePageByIndex?.({
|
groupIndex: props.groupIndex,
|
itemIndex: props.itemIndex,
|
});
|
done();
|
}
|
} else {
|
Message.warning('评论内容不能为空');
|
}
|
} catch (error) {}
|
};
|
|
const handleDelete = async () => {
|
try {
|
await Message.confirm();
|
let params = {
|
id: props.data.id,
|
};
|
let res = await circleFriendServices.deteleCircleFriend(params);
|
if (res) {
|
props.listActions?.remove?.();
|
}
|
} catch (error) {}
|
};
|
|
const goCheckBusinessCard = (shortId: number) => {
|
// Taro.navigateTo({
|
// url: `${RouterPath.userHomePage}?id=$}`,
|
// });
|
};
|
|
const goUserHomePage = (userId: string) => {
|
emit('goUserHomePage', userId);
|
};
|
|
const handleDeleteReply = async (replyItem: API.CircleFriendReplyDto) => {
|
try {
|
if (replyItem.userId === props.currentUseId) {
|
await Message.confirm();
|
let params = {
|
id: replyItem.id,
|
};
|
let res = await circleFriendServices.deteleCircleFriendReply(params);
|
if (res) {
|
props.listActions?.updatePageByIndex?.({
|
groupIndex: props.groupIndex,
|
itemIndex: props.itemIndex,
|
});
|
}
|
}
|
} catch (error) {}
|
};
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.friend-message-wrapper {
|
padding: 32px boleGetCssVar('size', 'body-padding-h');
|
@include hairline-bottom;
|
background-color: #fff;
|
|
&:last-child {
|
&::after {
|
display: none;
|
}
|
}
|
|
.friend-message-right {
|
padding-top: 16px;
|
/* padding-left: 104px; */
|
|
.friend-message-name {
|
font-size: 32px;
|
line-height: 1;
|
color: #485a7f;
|
margin-bottom: 8px;
|
}
|
|
.friend-message-content {
|
font-size: 28px;
|
line-height: 44px;
|
color: boleGetCssVar('text-color', 'primary');
|
word-break: break-all;
|
white-space: pre-line;
|
margin-bottom: 4px;
|
overflow: hidden;
|
}
|
|
.friend-message-bottom {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16px;
|
|
.friend-message-time-wrapper {
|
display: flex;
|
align-items: center;
|
|
.friend-message-time {
|
color: boleGetCssVar('text-color', 'secondary');
|
line-height: 32px;
|
font-size: 22px;
|
margin-right: 10px;
|
}
|
|
.friend-message-action-delete {
|
display: block;
|
width: 32px;
|
height: 32px;
|
}
|
}
|
|
.friend-message-actions {
|
display: flex;
|
|
.friend-message-action {
|
margin-right: 16px;
|
display: flex;
|
align-items: center;
|
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
|
.friend-message-action-icon {
|
display: block;
|
width: 32px;
|
height: 32px;
|
margin-right: 8px;
|
|
&.comment {
|
width: 29px;
|
height: 26px;
|
}
|
}
|
|
.friend-message-action-text {
|
font-size: 22px;
|
color: boleGetCssVar('text-color', 'secondary');
|
line-height: 32px;
|
}
|
}
|
}
|
|
.friend-message-reply-list-wrapper {
|
background: #f7f7f7;
|
border-radius: 6px;
|
|
/* .friend-message-reply-list,
|
.friend-message-like-bar {
|
padding: 16px 28px;
|
} */
|
|
.friend-message-like-bar {
|
display: flex;
|
align-items: flex-start;
|
padding: 24px 28px;
|
|
.friend-message-like-icon {
|
width: 29px;
|
height: 27px;
|
margin-right: 12px;
|
/* margin-top: 4px; */
|
}
|
|
.friend-message-like-content {
|
line-height: 32px;
|
display: flex;
|
flex-wrap: wrap;
|
|
.friend-message-like-name {
|
font-size: 28px;
|
color: #485a7f;
|
line-height: 1;
|
word-break: break-all;
|
display: inline;
|
}
|
}
|
}
|
|
.friend-message-reply-list {
|
/* @include hairline-top; */
|
border-top: 1px solid #e8e8e8;
|
padding: 8px 28px;
|
}
|
|
.friend-message-reply-list-item {
|
/* font-size: 28px;
|
line-height: 46px;
|
color: #191919; */
|
padding: 24px 0;
|
border-bottom: 1px solid #e8e8e8;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.friend-message-reply-item-name-wrapper {
|
display: flex;
|
align-items: center;
|
|
.friend-message-reply-item-name,
|
.friend-message-reply-item-replytext {
|
font-weight: 400;
|
font-size: 28px;
|
color: boleGetCssVar('text-color', 'regular');
|
line-height: 40px;
|
}
|
|
.friend-message-reply-item-name {
|
flex: 1;
|
min-width: 0;
|
@include ellipsis;
|
}
|
|
.friend-message-reply-item-replytext {
|
margin: 0 8px;
|
}
|
}
|
|
.friend-message-reply-item-content {
|
word-break: break-all;
|
font-weight: 400;
|
font-size: 28px;
|
color: boleGetCssVar('text-color', 'primary');
|
line-height: 40px;
|
padding-left: 64px;
|
|
.friend-message-reply-item-name,
|
.friend-message-reply-item-replytext,
|
.friend-message-reply-item-mao {
|
display: inline;
|
}
|
|
.friend-message-reply-item-name {
|
color: boleGetCssVar('text-color', 'regular');
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
