<template>
|
<a-list :bordered="false">
|
<a-list-item
|
v-for="item in renderList"
|
:key="item.id"
|
action-layout="vertical"
|
:style="{
|
opacity: item.status ? 0.5 : 1,
|
}"
|
>
|
<template #extra>
|
<a-tag v-if="item.messageType === 0" color="gray">未开始</a-tag>
|
<a-tag v-else-if="item.messageType === 1" color="green">已开通</a-tag>
|
<a-tag v-else-if="item.messageType === 2" color="blue">进行中</a-tag>
|
<a-tag v-else-if="item.messageType === 3" color="red">即将到期</a-tag>
|
</template>
|
<div class="item-wrap" @click="onItemClick(item)">
|
<a-list-item-meta>
|
<template v-if="item.avatar" #avatar>
|
<a-avatar shape="circle">
|
<img v-if="item.avatar" :src="item.avatar" />
|
<icon-desktop v-else />
|
</a-avatar>
|
</template>
|
<template #title>
|
<a-space :size="4">
|
<span>{{ item.title }}</span>
|
<a-typography-text type="secondary">
|
{{ item.subTitle }}
|
</a-typography-text>
|
</a-space>
|
</template>
|
<template #description>
|
<div>
|
<a-typography-paragraph
|
:ellipsis="{
|
rows: 1,
|
}"
|
>{{ item.content }}</a-typography-paragraph
|
>
|
<a-typography-text
|
v-if="item.type === 'message'"
|
class="time-text"
|
>
|
{{ item.time }}
|
</a-typography-text>
|
</div>
|
</template>
|
</a-list-item-meta>
|
</div>
|
</a-list-item>
|
<template #footer>
|
<a-space
|
fill
|
:size="0"
|
:class="{ 'add-border-top': renderList.length < showMax }"
|
>
|
<div class="footer-wrap">
|
<a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
|
</div>
|
<div class="footer-wrap">
|
<a-link>{{ $t('messageBox.viewMore') }}</a-link>
|
</div>
|
</a-space>
|
</template>
|
<div
|
v-if="renderList.length && renderList.length < 3"
|
:style="{ height: (showMax - renderList.length) * 86 + 'px' }"
|
></div>
|
</a-list>
|
</template>
|
|
<script lang="ts" setup>
|
import { PropType } from 'vue';
|
import { MessageRecord, MessageListType } from '@/api/message';
|
|
const props = defineProps({
|
renderList: {
|
type: Array as PropType<MessageListType>,
|
required: true,
|
},
|
unreadCount: {
|
type: Number,
|
default: 0,
|
},
|
});
|
const emit = defineEmits(['itemClick']);
|
const allRead = () => {
|
emit('itemClick', [...props.renderList]);
|
};
|
|
const onItemClick = (item: MessageRecord) => {
|
if (!item.status) {
|
emit('itemClick', [item]);
|
}
|
};
|
const showMax = 3;
|
</script>
|
|
<style scoped lang="less">
|
:deep(.arco-list) {
|
.arco-list-item {
|
min-height: 86px;
|
border-bottom: 1px solid rgb(var(--gray-3));
|
}
|
.arco-list-item-extra {
|
position: absolute;
|
right: 20px;
|
}
|
.arco-list-item-meta-content {
|
flex: 1;
|
}
|
.item-wrap {
|
cursor: pointer;
|
}
|
.time-text {
|
font-size: 12px;
|
color: rgb(var(--gray-6));
|
}
|
.arco-empty {
|
display: none;
|
}
|
.arco-list-footer {
|
padding: 0;
|
height: 50px;
|
line-height: 50px;
|
border-top: none;
|
.arco-space-item {
|
width: 100%;
|
border-right: 1px solid rgb(var(--gray-3));
|
&:last-child {
|
border-right: none;
|
}
|
}
|
.add-border-top {
|
border-top: 1px solid rgb(var(--gray-3));
|
}
|
}
|
.footer-wrap {
|
text-align: center;
|
}
|
.arco-typography {
|
margin-bottom: 0;
|
}
|
.add-border {
|
border-top: 1px solid rgb(var(--gray-3));
|
}
|
}
|
</style>
|
