<template>
|
<div class="w100 h100 flex items-center flex-column box-border pr-1">
|
<div class="w100 box-border px-[18px] py-0 flex-0">
|
<el-button
|
@click="newChatRoomClick"
|
icon="ele-Plus"
|
color="#1c86ff"
|
class="flex items-center box-border mb-3 justify-center add_room cursor-pointer w-[124px] h-[32.88px] rounded-s-md text-white opacity-100"
|
>
|
新建聊天室
|
</el-button>
|
</div>
|
<div
|
class="flex flex-col flex-auto w-[210.98px] rounded-t-lg box-border mb-3 relative opacity-100 shadow-lg shadow-[[#0e0e0f]-500/50"
|
>
|
<div class="flex-0 relative w100 h-[34px] bg-[#2b2c30]">
|
<el-input v-model="state.searchInput" placeholder="搜索" class="set-input">
|
<template #prefix>
|
<el-icon @click="selectDateChange"><search /></el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div class="absolute top-[100%] w-[84px] z-[1001] left-0" v-show="state.isShowDate">
|
<div class="w100 bg-[#fff] px-[0px] py-[5px]" v-for="item in state.selectDateOption" :key="item.value">
|
<div class="w100 relative h-[28px] flex items-center justify-center cursor-pointer">{{ item.label }}</div>
|
</div>
|
</div>
|
|
<div class="flex-auto text-[#ccc] flex flex-col items-center mt-6 overflow-y-auto" ref="chatRoomRef">
|
<div
|
:class="{ 'bg-[#41424a]': item.id === activeRoomId }"
|
class="group flex items-center w-full h-10 rounded-md cursor-pointer px-2 py-2 flex-0"
|
v-for="(item, index) in chatRoomList"
|
:key="index"
|
@click="roomClick(item)"
|
>
|
<div class="ywicon icon-xiaoxi flex-0 mr-2.5"></div>
|
<div class="flex-auto text-ellipsis text-nowrap text-sm group-hover:text-[#0084ff]">chat room</div>
|
<div class="text-gray-100 flex items-center space-x-2 ml-1">
|
<div class="ywicon invisible icon-bianji visible group-hover:visible !text-sm"></div>
|
|
<el-popconfirm title="确定删除这个聊天室？" @confirm.stop="confirmDeleteChatRoom(item)">
|
<template #reference>
|
<div class="ywicon invisible icon-shanchu3 visible group-hover:visible"></div>
|
</template>
|
</el-popconfirm>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Search } from '@element-plus/icons-vue';
|
import { nextTick, onMounted, reactive, ref } from 'vue';
|
import type { ChatRoomItem } from './types';
|
import router from '/@/router';
|
import { activeRoomId, chatRoomList } from '/@/stores/chatRoom';
|
let state = reactive({
|
searchInput: '',
|
selectDateOption: [
|
{
|
label: '全部',
|
value: 0,
|
},
|
{
|
label: '一周内',
|
value: 1,
|
},
|
{
|
label: '一月内',
|
value: 2,
|
},
|
{
|
label: '一月前',
|
value: 3,
|
},
|
],
|
isShowDate: false,
|
});
|
|
const chatRoomRef = ref<HTMLDivElement>(null);
|
|
const selectDateChange = () => {
|
state.isShowDate = !state.isShowDate;
|
};
|
|
const gotoAnswerPage = (room: ChatRoomItem) => {
|
if (room.isInitial) {
|
router.push({
|
name: 'Home',
|
});
|
} else {
|
router.push({
|
name: 'AskAnswer',
|
query: {
|
id: room.id,
|
},
|
});
|
}
|
};
|
|
const newChatRoomClick = () => {
|
const newRoom = {
|
id: new Date().getTime() + '' + Math.floor(Math.random() * 1000),
|
isInitial: true,
|
title: 'chat room',
|
};
|
if (!chatRoomList.value) {
|
chatRoomList.value = [newRoom];
|
} else {
|
chatRoomList.value.unshift(newRoom);
|
}
|
activeRoomId.value = newRoom.id;
|
nextTick(() => {
|
gotoAnswerPage(newRoom);
|
});
|
};
|
|
const roomClick = (room: ChatRoomItem) => {
|
activeRoomId.value = room.id;
|
gotoAnswerPage(room);
|
};
|
|
const confirmDeleteChatRoom = (room: ChatRoomItem) => {
|
const foundIndex = chatRoomList.value.findIndex((item) => item === room);
|
chatRoomList.value.splice(foundIndex, 1);
|
if (chatRoomList.value.length === 0) {
|
newChatRoomClick();
|
return;
|
}
|
roomClick(chatRoomList.value[0]);
|
chatRoomRef.value.firstElementChild?.scrollIntoView();
|
};
|
|
onMounted(() => {
|
if (router.currentRoute.value.name === 'Home') {
|
if (!chatRoomList.value || chatRoomList.value.length === 0) {
|
newChatRoomClick();
|
} else {
|
roomClick(chatRoomList.value[0]);
|
}
|
}
|
});
|
</script>
|
<style scoped lang="scss">
|
.set-input {
|
:deep(.el-input__wrapper) {
|
width: 100%;
|
height: 100%;
|
font-size: 12px;
|
font-weight: 400;
|
letter-spacing: 0;
|
color: #e5e5e5;
|
border-radius: 6px;
|
border: 1px solid transparent;
|
box-sizing: border-box;
|
line-height: 34px;
|
// padding-left: 31px;
|
padding-right: 10px;
|
background-color: transparent;
|
cursor: pointer;
|
transition: color 0.2s ease-in-out;
|
box-shadow: unset;
|
}
|
}
|
</style>
|
