在IndexSider.vue中添加了调试输出,更新了TalkItem.vue以使用新的头像组件并调整了样式,增加了TalkItem的高度。
This commit is contained in:
parent
7717fe1fb3
commit
d2c8de16bb
BIN
src/assets/image/groupCompany.png
Normal file
BIN
src/assets/image/groupCompany.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.5 KiB |
BIN
src/assets/image/groupDepartment.png
Normal file
BIN
src/assets/image/groupDepartment.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.6 KiB |
BIN
src/assets/image/groupNormal.png
Normal file
BIN
src/assets/image/groupNormal.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/image/groupProject.png
Normal file
BIN
src/assets/image/groupProject.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.5 KiB |
95
src/components/avatar-module/index.vue
Normal file
95
src/components/avatar-module/index.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="avatar-module" :style="[customStyle, { background: avatar ? '#fff' : '' }]">
|
||||
<img :src="avatar" v-if="avatar" />
|
||||
<span v-else :style="customTextStyle">{{ text_avatar }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
//群聊默认头像
|
||||
import groupNormal from '@/assets/image/groupNormal.png'
|
||||
import groupDepartment from '@/assets/image/groupDepartment.png'
|
||||
import groupProject from '@/assets/image/groupProject.png'
|
||||
import groupCompany from '@/assets/image/groupCompany.png'
|
||||
import { computed, defineProps } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
mode: {
|
||||
//模式:1=人;2=群
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
avatar: {
|
||||
//头像
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
userName: {
|
||||
//用户名称
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
groupType: {
|
||||
//群类型:1=普通群;2=部门群;3=项目群;4=总群/公司群
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
customStyle: {
|
||||
//自定义样式
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
customTextStyle: {
|
||||
//自定义文字样式
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
//头像
|
||||
const avatar = computed(() => {
|
||||
let avatar_img = props?.avatar
|
||||
if (!avatar_img) {
|
||||
if (props?.mode === 1) {
|
||||
} else if (props?.mode === 2) {
|
||||
if (props?.groupType === 1) {
|
||||
avatar_img = groupNormal
|
||||
} else if (props?.groupType === 2) {
|
||||
avatar_img = groupDepartment
|
||||
} else if (props?.groupType === 3) {
|
||||
avatar_img = groupProject
|
||||
} else if (props?.groupType === 4) {
|
||||
avatar_img = groupCompany
|
||||
}
|
||||
}
|
||||
}
|
||||
return avatar_img
|
||||
})
|
||||
|
||||
//文字头像
|
||||
const text_avatar = computed(() => {
|
||||
return props?.userName.length >= 2
|
||||
? props?.userName.slice(-2)
|
||||
: props?.userName
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.avatar-module {
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(to right, #674bbc, #46299d);
|
||||
flex-shrink: 0;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -38,7 +38,9 @@ const items = computed((): ISession[] => {
|
||||
return keyword.toLowerCase().indexOf(searchKeyword.value.toLowerCase()) != -1
|
||||
})
|
||||
})
|
||||
|
||||
setTimeout(()=>{
|
||||
console.log('items.value',items.value)
|
||||
},1000)
|
||||
watch(() => talkStore, (newValue, oldValue) => {
|
||||
console.log(newValue);
|
||||
|
||||
@ -180,6 +182,7 @@ onMounted(() => {
|
||||
<main id="talk-session-list" class="el-main me-scrollbar me-scrollbar-thumb">
|
||||
<template v-if="loadStatus == 2"><Skeleton /></template>
|
||||
<template v-else>
|
||||
|
||||
<TalkItem
|
||||
v-for="item in items"
|
||||
:key="item.index_name"
|
||||
|
@ -1,22 +1,26 @@
|
||||
<script lang="ts" setup>
|
||||
<script setup>
|
||||
import { ArrowUp, ArrowDown, CloseRemind } from '@icon-park/vue-next'
|
||||
import Xtime from '@/components/base/Xtime.vue'
|
||||
import { ISession } from '@/types/chat'
|
||||
|
||||
import avatarModule from '@/components/avatar-module/index.vue'
|
||||
const emit = defineEmits(['tab-talk', 'top-talk'])
|
||||
|
||||
defineProps<{
|
||||
data: ISession
|
||||
avatar: String
|
||||
username: String
|
||||
defineProps({
|
||||
data: Object,
|
||||
avatar: String,
|
||||
username: String,
|
||||
active: Boolean
|
||||
}>()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="talk pointer" :class="{ actived: active }" @click="emit('tab-talk', data)">
|
||||
<div class="avatar-box">
|
||||
<im-avatar :src="avatar" :size="34" :username="data.name" />
|
||||
|
||||
<avatarModule :mode="data?.group_type === 0 ? 1 : 2"
|
||||
:avatar="data?.avatar"
|
||||
:groupType="data?.group_type"
|
||||
:userName="data?.name" :customStyle="{width:'42px',height:'42px'}"></avatarModule>
|
||||
<!-- <im-avatar :src="avatar" :size="34" :username="data.name" /> -->
|
||||
<div class="top-mask" @click.stop="emit('top-talk', data)">
|
||||
<n-icon :component="data.is_top == 1 ? ArrowDown : ArrowUp" />
|
||||
</div>
|
||||
@ -68,7 +72,7 @@ defineProps<{
|
||||
<style lang="less" scoped>
|
||||
.talk {
|
||||
padding: 8px 10px 8px 5px;
|
||||
height: 50px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: 0.2s ease-in;
|
||||
|
Loading…
Reference in New Issue
Block a user