Browse Source

fix:1.聊天的列表的头像问题,

suwenjiang 2 months ago
parent
commit
ae669521ac
2 changed files with 27 additions and 38 deletions
  1. 17 24
      src/components/MultiHeader/index.vue
  2. 10 14
      src/components/Profile/News/GroupChat.vue

+ 17 - 24
src/components/MultiHeader/index.vue

@@ -4,12 +4,7 @@
       <div class="round" :class="`round--${length}`">
         <div class="round--center">
           <div v-for="(img, i) in list" :key="i" class="header">
-            <van-image
-                width="100%"
-                height="100%"
-                fit="cover"
-                :src="img"
-            />
+            <van-image width="100%" height="100%" fit="cover" :src="img" />
           </div>
         </div>
       </div>
@@ -25,39 +20,38 @@ const props = defineProps({
   imgUrls: Array
 })
 
-const length = ref(0);
-const list = ref([]);
+const length = ref(0)
+const list = ref([])
 
 const initStyle = () => {
-  const root = document.documentElement;
-  const size = props.size;
-  root.style.setProperty('--round-size', size + 'px');
-  root.style.setProperty('--round-size-header', size * 22/44 + 'px');
-  root.style.setProperty('--round-size-sm-header', size * 15/44 + 'px');
+  const root = document.documentElement
+  const size = props.size
+  root.style.setProperty('--round-size', size + 'px')
+  root.style.setProperty('--round-size-header', (size * 22) / 44 + 'px')
+  root.style.setProperty('--round-size-sm-header', (size * 15) / 44 + 'px')
 }
 
 const initData = () => {
-  list.value = (props.imgUrls ?? []).slice(0, 9);
-  length.value = list.value.length;
+  list.value = (props.imgUrls ?? []).slice(0, 9)
+  length.value = list.value.length
 }
 onMounted(() => {
-  initStyle();
-  initData();
-});
-
+  initStyle()
+  initData()
+})
 </script>
 <style scoped lang="scss">
 .round-comp {
   width: var(--round-size);
   height: var(--round-size);
-  background: #F7F8FA;
+  background: #f7f8fa;
   border-radius: 100%;
 }
 .round {
-  margin: 10px auto;
+  margin: 0px auto;
   width: var(--round-size);
   height: var(--round-size);
-  background: #F7F8FA;
+  background: #f7f8fa;
   border-radius: 100%;
   overflow: clip;
   position: relative;
@@ -88,7 +82,6 @@ onMounted(() => {
       height: var(--round-size);
     }
   }
-
 }
 
 .round--2 {
@@ -198,4 +191,4 @@ onMounted(() => {
     }
   }
 }
-</style>
+</style>

+ 10 - 14
src/components/Profile/News/GroupChat.vue

@@ -1,21 +1,17 @@
 <template>
   <van-swipe-cell>
-    <!-- {{ itemData?.unreadMessageCount }}
-    {{ itemData?.dfGroupImage }} -->
     <div
       @click="$emit('onChatPage')"
       class="w-full relative h-82 flex justify-start items-center px-16"
     >
-      <div class="w-48 h-48">
-        <van-badge
-          v-if="itemData?.unreadMessageCount > 0"
-          v-bind="messageNumber(itemData?.unreadMessageCount)"
-          max="99"
-        >
-          <MultiHeader :imgUrls="itemData?.dfGroupImage" />
-        </van-badge>
-        <MultiHeader v-else :imgUrls="itemData?.dfGroupImage" />
-      </div>
+      <van-badge
+        v-if="itemData?.unreadMessageCount > 0"
+        v-bind="messageNumber(itemData?.unreadMessageCount)"
+        max="99"
+      >
+        <MultiHeader :size="48" :imgUrls="itemData?.dfGroupImage" />
+      </van-badge>
+      <MultiHeader v-else :size="48" :imgUrls="itemData?.dfGroupImage" />
 
       <div class="h-48 w-245 ml-12 flex flex-wrap">
         <h1 class="line-clamp-1 mb-8 w-full text-xl text-black-3 font-semibold">
@@ -71,14 +67,14 @@
 
 <script setup>
 import { messageContentParse } from '~/utils/detalTime.js'
-defineProps({
+const props = defineProps({
   itemData: {
     type: Object,
     default: () => ({})
   }
 })
 defineEmits(['onNoBother', 'onIsTop', 'onConvDelete', 'onChatPage'])
-
+console.log(props.itemData.dfGroupImage, 'itemData')
 // 消息数量通知的展示  需要动态的展示
 const messageNumber = (content) => {
   let messageNumberObj = {}