<template>
|
<div v-if="props.data.content" class="friend-message-content-text-wrapper">
|
<div
|
v-if="props.data.relationalType === CircleFriendRelationalTypeEnum.Resource"
|
class="relational-wrapper"
|
>
|
<img class="relational-icon" :src="IconResource" />
|
<div class="relational-content">{{ content }}</div>
|
</div>
|
<div
|
v-else-if="props.data.relationalType === CircleFriendRelationalTypeEnum.Order"
|
class="relational-wrapper"
|
>
|
<img class="relational-icon" :src="IconOrder" />
|
<div class="relational-content">{{ content }}</div>
|
</div>
|
<template v-else>
|
<div class="friend-message-content-text">{{ content }}</div>
|
<div v-if="showCollapse" class="friend-message-content-collapse-btn" @click.stop="toggle">
|
{{ isCollapse ? '全文' : '收起' }}
|
</div>
|
</template>
|
</div>
|
<template v-if="!props.data.relationalType">
|
<ImageGrid
|
class="friend-message-content-image-grid"
|
v-if="imageList.length > 0"
|
:imageList="imageList"
|
/>
|
<div v-if="videoList.length > 0" class="friend-message-content-file-list">
|
<div
|
v-for="item in videoList"
|
:key="item.fileUrl"
|
class="friend-message-content-file-list-item video"
|
>
|
<video :src="setOSSLink(item.fileUrl)" class="friend-message-content-file-video" />
|
</div>
|
</div>
|
</template>
|
</template>
|
|
<script setup lang="ts">
|
import ImageGrid from '../../Image/ImageGrid.vue';
|
import { setOSSLink } from '@12333/utils';
|
import { CircleFriendFileType, CircleFriendRelationalTypeEnum } from '@12333/constants';
|
import { useToggle } from 'senin-mini/hooks';
|
import { computed } from 'vue';
|
import IconResource from '@/assets/friends/icon-resource.png';
|
import IconOrder from '@/assets/friends/icon-order.png';
|
|
defineOptions({
|
name: 'FriendMessageContent',
|
});
|
|
type Props = {
|
data: API.CircleFriendDto;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const Limit = 140;
|
|
const videoList = computed(
|
() => props.data.files?.filter((x) => x.type == CircleFriendFileType.Video) ?? []
|
);
|
|
const imageList = computed(
|
() => props.data.files?.filter((x) => x.type == CircleFriendFileType.Image) ?? []
|
);
|
|
const { isCollapse, toggle } = useToggle(true);
|
|
const showCollapse = computed(() => props.data.content.length > Limit);
|
|
const content = computed(() => {
|
if (showCollapse.value && isCollapse.value) {
|
return props.data.content.slice(0, Limit);
|
} else {
|
return props.data.content;
|
}
|
});
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.friend-message-content-text-wrapper {
|
margin-bottom: 12px;
|
font-size: 28px;
|
line-height: 44px;
|
|
.friend-message-content-text {
|
color: boleGetCssVar('text-color', 'primary');
|
/* color: #000; */
|
word-break: break-all;
|
white-space: pre-line;
|
}
|
|
.friend-message-content-collapse-btn {
|
color: #5b6998;
|
margin-top: 6px;
|
font-weight: 600;
|
}
|
|
.relational-wrapper {
|
padding: 16px 24px;
|
display: flex;
|
|
.relational-icon {
|
width: 144px;
|
height: 144px;
|
margin-right: 16px;
|
}
|
|
.relational-content {
|
flex: 1;
|
min-width: 0;
|
display: -webkit-box;
|
padding: 6px 0;
|
font-weight: 400;
|
font-size: 28px;
|
color: boleGetCssVar('text-color', 'primary');
|
line-height: 44px;
|
@include multi-ellipsis(3);
|
}
|
}
|
}
|
|
.friend-message-content-image-grid {
|
margin-bottom: 12px;
|
}
|
|
.friend-message-content-file-list {
|
margin: -10px;
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 12px;
|
width: 450px;
|
// width: 100%;
|
.friend-message-content-file-list-item {
|
padding: 10px;
|
box-sizing: border-box;
|
height: 150px;
|
|
&.video {
|
width: 300px;
|
}
|
|
&.img {
|
width: 450px;
|
}
|
|
&.img-grid {
|
width: 150px;
|
}
|
|
.friend-message-content-file-img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.friend-message-content-file-video {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
