新增：IM 弹框
This commit is contained in:
安浩浩
287
src/views/im/NavBar/index.vue
Normal file
287
src/views/im/NavBar/index.vue
Normal file
@ -0,0 +1,287 @@
|
||||
<script setup lang="ts">
|
||||
/* route */
|
||||
import { useRoute } from 'vue-router'
|
||||
/* 取用户头像 */
|
||||
import router from '@/router'
|
||||
import highlightConversation from '@/assets/imgs/tabbar/highlightconversation.png'
|
||||
import grayConversation from '@/assets/imgs/tabbar/grayconversation.png'
|
||||
import highlightContacts from '@/assets/imgs/tabbar/higtlightcontacts.png'
|
||||
import grayContacts from '@/assets/imgs/tabbar/graycontacts.png'
|
||||
import avatarImg from '@/assets/imgs/avatar.gif'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const avatar = computed(() => userStore.user.avatar ?? avatarImg)
|
||||
|
||||
/* tabular icon 路由跳转 */
|
||||
const skipRouterName = ref('conversation')
|
||||
const changeSkipRouterName = (routerName: string) => {
|
||||
router.push(`/im/${routerName}`)
|
||||
}
|
||||
const route = useRoute()
|
||||
// 监听路由变化
|
||||
watch(
|
||||
() => route.path,
|
||||
(newPath) => {
|
||||
console.log('>>>>>newPath', newPath)
|
||||
if (newPath.includes('/im/conversation')) {
|
||||
skipRouterName.value = 'conversation'
|
||||
}
|
||||
if (newPath.includes('/im/contacts')) {
|
||||
console.log('>>>>>存在赋值为联系人样式')
|
||||
skipRouterName.value = 'contacts'
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 头像 -->
|
||||
<div class="chat_avatar">
|
||||
<ElAvatar :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" />
|
||||
</div>
|
||||
<!-- 去往会话 -->
|
||||
<div class="chat_conversation chat_icon_box" @click="changeSkipRouterName('conversation')">
|
||||
<div class="img_box">
|
||||
<img
|
||||
:src="skipRouterName === 'conversation' ? highlightConversation : grayConversation"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 去往联系人 -->
|
||||
<div class="chat_contacts chat_icon_box" @click="changeSkipRouterName('contacts')">
|
||||
<img
|
||||
class="chat_contacts_icon"
|
||||
:src="skipRouterName === 'contacts' ? highlightContacts : grayContacts"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat_avatar {
|
||||
margin-top: 43px;
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.online_status {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 2px solid #fff;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat_icon_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 67px;
|
||||
text-align: center;
|
||||
line-height: 67px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.chat_conversation {
|
||||
.img_box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 8px;
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat_contacts {
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat_settings {
|
||||
position: absolute;
|
||||
bottom: 92px;
|
||||
font-size: 30px;
|
||||
color: #8e8e8e;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
color: #1b83f9;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.chat_setting_item {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.more_settings {
|
||||
position: absolute;
|
||||
bottom: 46px;
|
||||
color: #8e8e8e;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
.setting_fun_list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.func_item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
// justify-content: space-around;
|
||||
width: 101px;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.settting_fun_icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 5px;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.setting_fun_text {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-left: 12px;
|
||||
height: 20px;
|
||||
width: 58px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.4px;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.apply_groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settting_fun_icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: inline-block;
|
||||
width: 69px;
|
||||
height: 1px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.0462467);
|
||||
}
|
||||
|
||||
.components {
|
||||
::v-deep .edit_userinfo_diglog {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::v-deep .setting_func_diglog > .el-dialog__body {
|
||||
padding: 28px 24px 24px 24px;
|
||||
}
|
||||
|
||||
::v-deep .setting_func_diglog > .el-dialog__header {
|
||||
background: #f2f2f2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::v-deep .edit_userinfo_diglog > .el-dialog__header {
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
::v-deep .edit_userinfo_diglog > .el-dialog__body {
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::v-deep .login_diglog > .el-dialog__header {
|
||||
background: #f2f2f2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::v-deep .personal_setting_card > .el-dialog__header {
|
||||
background: #f2f2f2;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user