|
@@ -5,7 +5,7 @@
|
|
|
v-for="message in messageList"
|
|
|
:key="message.id"
|
|
|
class="radius-base fill-blank p-base m-b-mini message-item"
|
|
|
- :class="{ active: currentMessage?.sendUserId === message.sendUserId }"
|
|
|
+ :class="{ active: currentMessage?.sendUserId === message.sendUserId, 'un-read': message.unReadCount > 0 }"
|
|
|
@click="checkMessage(message)"
|
|
|
>
|
|
|
<div class="flex items-center m-b-base message-title">
|
|
@@ -74,7 +74,13 @@ const currentMessage = ref<MessageType>()
|
|
|
|
|
|
watch(currentMessage, () => {
|
|
|
if (currentMessage.value) {
|
|
|
- useFetch('handleReadMessage').fetch({ id: currentMessage.value.id })
|
|
|
+ useFetch('handleReadMessage')
|
|
|
+ .fetch({ id: currentMessage.value.id })
|
|
|
+ .then(() => {
|
|
|
+ if (currentMessage.value?.unReadCount) {
|
|
|
+ currentMessage.value.unReadCount--
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
|
|
@@ -115,6 +121,12 @@ getMessageList().then((result) => (currentMessage.value = result?.[0]))
|
|
|
background: #fafafa;
|
|
|
box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.1);
|
|
|
.message-item {
|
|
|
+ &.un-read {
|
|
|
+ .message-title {
|
|
|
+ font-size: $MediumFont;
|
|
|
+ font-weight: 900;
|
|
|
+ }
|
|
|
+ }
|
|
|
&.active {
|
|
|
background-color: $color--primary;
|
|
|
color: $color--white;
|