82 lines
2.8 KiB
Vue
Executable File
82 lines
2.8 KiB
Vue
Executable File
<template>
|
|
<div :class="{
|
|
'bg-purple': !room.is_my_message && !room.is_reading
|
|
}" class="relative flex items-center px-2 xl:px-8 hover:bg-indigo-300 cursor-pointer transition-colors"
|
|
@click="selectRoom(room)"
|
|
>
|
|
<div v-if="!room.is_reading && !room.is_my_message" class="absolute bottom-1 right-3 text-xxs text-white">
|
|
<span>не прочитано</span>
|
|
</div>
|
|
<div v-if="room.is_my_message" class="absolute bottom-0 right-3">
|
|
<div v-show="!room.is_reading" class="flex relative w-[30px] h-[24px] text-gray-light">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" class="absolute top-0 right-0"
|
|
><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
</div>
|
|
<div v-show="room.is_reading" class="flex relative w-[30px] h-[24px] text-orange">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" class="absolute top-0 right-[5px]"
|
|
><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" class="absolute top-0 right-0"
|
|
><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute top-2 right-2 text-xxs lg:text-xs text-gray-light">
|
|
{{ room.updated_at_human }}
|
|
</div>
|
|
<user-avatar :user="room.correspond" size="small"
|
|
class="flex-shrink-0 w-10 h-10 lg:w-12 lg:h-12 xl:w-14 xl:h-14 text-sm xl:text-lg"
|
|
/>
|
|
<div class="ml-3 flex flex-col w-4/5 overflow-hidden">
|
|
<span class="text-sm lg:text-base block text-white">{{ room.correspond.name }}</span>
|
|
<span class="text-xs lg:text-sm truncate text-gray-light">
|
|
<span v-if="room.is_my_message" class="text-orange">Вы:</span>
|
|
{{ room.message }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
|
|
export default {
|
|
components: {
|
|
UserAvatar,
|
|
},
|
|
props: {
|
|
room: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
},
|
|
emits:{
|
|
'select-room': null
|
|
},
|
|
|
|
setup(props, {emit}){
|
|
const selectRoom = (room) => {
|
|
emit('select-room', room)
|
|
}
|
|
|
|
return {
|
|
selectRoom
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|