新增自定义头像通用组件；进行发起群聊、选择部门页面部分重构

src/components/avatar-module/index.vue

@@ -1,29 +1,94 @@
-<script setup>
-import TmImage from "@/uni_modules/tmui/components/tm-image/tm-image.vue";
-import {useAuth} from "@/store/auth";
-import { useClockIn } from "@/store/clockIn/index.js";
-const {userInfo}=useAuth()
-const {workingTimeInfoData,actionTypeData} = useClockIn()
-</script>
 <template>
-  <div class="flex-shrink-0 pl-[16rpx] pr-[40rpx] flex items-center rounded-[8rpx] w-[686rpx] h-[154rpx] bg-white">
+  <div class="avatar-module" :style="customStyle">
-    <div class="rounded-full overflow-hidden w-[96rpx] h-[96rpx]">
+    <img :src="avatar" v-if="avatar" />
-      <tm-image preview :width="96" :height="96" :src="userInfo.Avatar"></tm-image>
+    <span v-else :style="customTextStyle">{{ text_avatar }}</span>
-    </div>
-    <div class="ml-[20rpx]">
-      <div class="flex items-center">
-        <div class="text-[32rpx] text-black">{{ userInfo.NickName }}</div>
-        <div class="mx-[14rpx] h-[30rpx] w-[1rpx] bg-[#F7F7F7]"></div>
-        <div class="w-[40rpx] h-[40rpx]">
-          <img v-if="actionTypeData.isWorkDay ===1" class="w-[40rpx] h-[40rpx]" src="@/static/image/clockIn/zu3275@3x.png" alt="">
-          <img v-else class="w-[40rpx] h-[40rpx]" src="@/static/image/clockIn/rest3275@2x.png" alt="">
-        </div>
-      </div>
-      <div class="mt-[5rpx] flex">
-        <div class="text-[24rpx] text-[#999999]">{{ workingTimeInfoData.WorkTimeTemplateName }}</div>
-        <div class="text-[#46299D] text-[24rpx]">（考勤规则）</div>
-      </div>
-    </div>
-    <slot name="right"></slot>
   </div>
 </template>
+<script setup>
+//群聊默认头像
+import groupNormal from '@/static/image/chatList/groupNormal.png'
+import groupDepartment from '@/static/image/chatList/groupDepartment.png'
+import groupProject from '@/static/image/chatList/groupProject.png'
+import groupCompany from '@/static/image/chatList/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="scss" 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%;
+  }
+}
+</style>

src/components/custom-btn/custom-btn.vue

@@ -44,22 +44,26 @@ const clickBtn = () => {
   justify-content: center;
   .custom-sub-btn-class {
     background-color: #eee9f8;
-    padding: 18rpx 185rpx;
+    padding: 18rpx 0;
     border-radius: 8rpx;
     box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
     font-size: 28rpx;
     font-weight: 500;
     line-height: 40rpx;
     color: $theme-primary;
+    width: 426rpx;
+    height: 76rpx;
   }
   .custom-btn-class {
     background-color: $theme-primary;
-    padding: 18rpx 185rpx;
+    padding: 18rpx 0;
     border-radius: 8rpx;
     box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
     font-size: 28rpx;
     font-weight: 500;
     line-height: 40rpx;
+    width: 426rpx;
+    height: 76rpx;
   }
 }
 .custom-btn-bottom {

src/components/custom-navbar/index.vue

@@ -3,9 +3,16 @@
     :hideBack="props.hideBack"
     hideHome
     :title="props.title"
-    :shadow="0"
+    :shadow="props.shadowNum"
     :fontSize="34"
-  />
+  >
+    <template #left>
+      <slot name="left"></slot>
+    </template>
+    <template #right>
+      <slot name="right"></slot>
+    </template>
+  </tm-navbar>
 </template>
 <script setup>
 import tmNavbar from '@/uni_modules/tmui/components/tm-navbar/tm-navbar.vue'
@@ -22,6 +29,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  shadowNum: {
+    //投影
+    type: Number,
+    default: 1,
+  },
 })
 </script>
 

src/pages/chatSettings/components/groupMembersList.vue

@@ -22,9 +22,9 @@
           <img v-if="memberItem.avatar" :src="memberItem.avatar" />
           <span v-if="!memberItem.avatar" class="text-[24rpx] font-bold">
             {{
-              memberItem.nickname.length >= 2
+              (memberItem.nickname || memberItem.nickName).length >= 2
-                ? memberItem.nickname.slice(-2)
+                ? (memberItem.nickname || memberItem.nickName).slice(-2)
-                : memberItem.nickname
+                : memberItem.nickname || memberItem.nickName
             }}
           </span>
         </div>
@@ -38,7 +38,7 @@
         </div>
         <div class="group-member-name">
           <span class="text-[24rpx] font-regular">
-            {{ memberItem.nickname }}
+            {{ memberItem.nickname || memberItem.nickName }}
           </span>
         </div>
       </div>
@@ -86,10 +86,11 @@ const props = defineProps({
 
 //点击跳转到用户详情页面
 const toUserDetailPage = (userItem) => {
-  console.log(userItem.erp_user_id)
+  console.log(userItem)
   uni.navigateTo({
     url:
-      '/pages/dialog/dialogDetail/userDetail?erpUserId=' + userItem.erp_user_id,
+      '/pages/dialog/dialogDetail/userDetail?erpUserId=' +
+      (userItem.erp_user_id || userItem.ID),
   })
 }
 
@@ -103,7 +104,8 @@ const groupAddMembers = () => {
 //点击群聊移除人
 const groupRemoveMembers = () => {
   uni.navigateTo({
-    url: '/pages/chatSettings/groupManage/selectMembers?manageType=removeMembers',
+    url:
+      '/pages/chatSettings/groupManage/selectMembers?manageType=removeMembers',
   })
 }
 </script>

src/pages/chatSettings/groupManage/editAvatar.vue

@@ -3,13 +3,7 @@
     <div class="root">
       <ZPaging ref="zPaging" :show-scrollbar="false">
         <template #top>
-          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
+          <customNavbar :title="$t('chat.settings.editAvatar')"></customNavbar>
-            <div class="navBar-title flex flex-col items-center justify-center">
-              <span class="text-[34rpx] font-medium">
-                {{ $t('chat.settings.editAvatar') }}
-              </span>
-            </div>
-          </tm-navbar>
         </template>
         <div class="edit-group-info">
           <div class="group-avatar">

src/pages/chatSettings/groupManage/editGroupName.vue

@@ -3,13 +3,9 @@
     <div class="root">
       <ZPaging ref="zPaging" :show-scrollbar="false">
         <template #top>
-          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
+          <customNavbar
-            <div class="navBar-title flex flex-col items-center justify-center">
+            :title="$t('chat.settings.editGroupName')"
-              <span class="text-[34rpx] font-medium">
+          ></customNavbar>
-                {{ $t('chat.settings.editGroupName') }}
-              </span>
-            </div>
-          </tm-navbar>
         </template>
         <div class="edit-group-info">
           <div class="group-avatar">

src/pages/chatSettings/groupManage/manageGroupAdmin.vue

@@ -3,13 +3,7 @@
     <div class="root">
       <ZPaging ref="zPaging" :show-scrollbar="false">
         <template #top>
-          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
+          <customNavbar :title="$t('chat.settings.groupAdmin')"></customNavbar>
-            <div class="navBar-title flex flex-col items-center justify-center">
-              <span class="text-[34rpx] font-medium">
-                {{ $t('chat.settings.groupAdmin') }}
-              </span>
-            </div>
-          </tm-navbar>
         </template>
         <div class="manage-group-admin">
           <span class="manage-group-admin-title text-[28rpx] font-regular">

src/pages/chatSettings/groupManage/manageGroupMembers.vue

@@ -11,13 +11,7 @@
         :loading-more-enabled="false"
       >
         <template #top>
-          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
+          <customNavbar :title="$t('chat.settings.groupMember')"></customNavbar>
-            <div class="navBar-title flex flex-col items-center justify-center">
-              <span class="text-[34rpx] font-medium">
-                {{ $t('chat.settings.groupMember') }}
-              </span>
-            </div>
-          </tm-navbar>
         </template>
         <div class="group-members-list">
           <groupMemberList

src/pages/chatSettings/groupManage/manageGroupSilence.vue

@@ -3,13 +3,7 @@
     <div class="root">
       <ZPaging ref="zPaging" :show-scrollbar="false">
         <template #top>
-          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
+          <customNavbar :title="$t('chat.settings.groupGag')"></customNavbar>
-            <div class="navBar-title flex flex-col items-center justify-center">
-              <span class="text-[34rpx] font-medium">
-                {{ $t('chat.settings.groupGag') }}
-              </span>
-            </div>
-          </tm-navbar>
         </template>
         <div class="manage-group-silence">
           <span class="manage-group-silence-title text-[28rpx] font-regular">

src/pages/chatSettings/groupManage/manageNotice.vue

@@ -3,11 +3,9 @@
     <div class="root">
       <ZPaging ref="zPaging" :show-scrollbar="false">
         <template #top>
-          <tm-navbar
+          <customNavbar
             :hideBack="state.editMode === 3 ? false : true"
-            hideHome
+            :title="$t('chat.settings.groupNotice')"
-            title=""
-            :leftWidth="220"
           >
             <template #left v-if="state.editMode !== 3">
               <div class="nav-bar-cancel-btn">
@@ -16,11 +14,6 @@
                 </span>
               </div>
             </template>
-            <div class="navBar-title flex flex-col items-center justify-center">
-              <span class="text-[34rpx] font-medium">
-                {{ $t('chat.settings.groupNotice') }}
-              </span>
-            </div>
             <template #right>
               <div
                 v-if="state.editMode !== 3"
@@ -42,7 +35,7 @@
                 </span>
               </div>
             </template>
-          </tm-navbar>
+          </customNavbar>
         </template>
         <div class="notice-text-area">
           <div class="notice-view-area">

src/pages/chatSettings/groupManage/selectMembers.vue

@@ -11,40 +11,7 @@
         @scroll="onScroll"
       >
         <template #top>
-          <tm-navbar
+          <customNavbar :title="pageTitle" id="topArea"></customNavbar>
-            :hideBack="false"
-            hideHome
-            title=""
-            :leftWidth="220"
-            id="topArea"
-          >
-            <div class="navBar-title flex flex-col items-center justify-center">
-              <span
-                class="text-[34rpx] font-medium"
-                v-if="state.manageType === 'silence'"
-              >
-                {{ $t('chat.manage.addSilenceMember') }}
-              </span>
-              <span
-                class="text-[34rpx] font-medium"
-                v-if="state.manageType === 'admin'"
-              >
-                {{ $t('chat.manage.addAdmin') }}
-              </span>
-              <span
-                class="text-[34rpx] font-medium"
-                v-if="state.manageType === 'searchRecord'"
-              >
-                {{ $t('search.condition.member') }}
-              </span>
-              <span
-                class="text-[34rpx] font-medium"
-                v-if="state.manageType === 'removeMembers'"
-              >
-                {{ $t('select.member.remove') }}
-              </span>
-            </div>
-          </tm-navbar>
         </template>
         <div class="select-members">
           <div
@@ -229,6 +196,8 @@ import {
   ServeRemoveMembersGroup,
 } from '@/api/group/index.js'
 import { useDialogueStore, useGroupStore, useGroupTypeStore } from '@/store'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
 
 const zPaging = ref()
 useZPaging(zPaging)
@@ -325,6 +294,21 @@ onMounted(() => {
   })
 })
 
+//页面标题
+const pageTitle = computed(() => {
+  let page_title = ''
+  if (state.manageType === 'silence') {
+    page_title = t('chat.manage.addSilenceMember')
+  } else if (state.manageType === 'admin') {
+    page_title = t('chat.manage.addAdmin')
+  } else if (state.manageType === 'searchRecord') {
+    page_title = t('search.condition.member')
+  } else if (state.manageType === 'removeMembers') {
+    page_title = t('select.member.remove')
+  }
+  return page_title
+})
+
 // 观察者函数
 const handleIntersection = (entries) => {
   if (state.isAssign) {

src/pages/chatSettings/index.vue

@@ -3,13 +3,7 @@
     <div class="root">
       <ZPaging ref="zPaging" :show-scrollbar="false">
         <template #top>
-          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
+          <customNavbar :title="$t('index.chat.settings')"></customNavbar>
-            <div class="navBar-title flex flex-col items-center justify-center">
-              <span class="text-[34rpx] font-medium">
-                {{ $t('index.chat.settings') }}
-              </span>
-            </div>
-          </tm-navbar>
         </template>
         <div class="chat-settings">
           <div class="chat-group-base-infos chat-settings-card">

src/pages/chooseDeps/index.vue

@@ -1,193 +1,222 @@
 <template>
-  <div class="outer-layer">
+  <div class="choose-deps-page">
-    <div>
+    <zPaging ref="zPaging" :show-scrollbar="false">
-      <tm-navbar :hideBack="false" hideHome title="选择部门"> </tm-navbar>
+      <template #top>
-    </div>
+        <customNavbar :title="$t('pageTitle.select.department')"></customNavbar>
-    <div class="root">
+      </template>
-      <div
+      <div class="choose-deps">
-        class="w-full h-[1134rpx] mb-[20rpx] pl-[32rpx] pr-[32rpx] pb-[20rpx] overflow-y-auto"
+        <div class="w-full pl-[32rpx] pr-[32rpx] overflow-y-auto">
-      >
+          <div class="pl-[16rpx] pr-[16rpx] pt-[22rpx] pb-[24rpx] bg-[#FFFFFF]">
-        <div class="pl-[16rpx] pr-[16rpx] pt-[22rpx] pb-[24rpx] bg-[#FFFFFF]">
+            <tm-input
-          <tm-input
+              placeholder="请输入…"
-            placeholder="请输入…"
+              color="#F9F9FD"
-            color="#F9F9FD"
+              :round="1"
-            :round="1"
+              prefix="tmicon-search"
-            prefix="tmicon-search"
+              prefixColor="#46299D"
-            prefixColor="#46299D"
+              searchBgColor="#F9F9FD"
-            searchBgColor="#F9F9FD"
+              focusColor="#F9F9FD"
-            focusColor="#F9F9FD"
+              v-model="searchVal"
-            v-model="searchVal"
+            ></tm-input>
-          ></tm-input>
-          <div
-            v-if="crumbs.length"
-            class="w-full overflow-x-auto mt-[22rpx] leading-[48rpx] text-[#2F2F2F] flex items-center no-scrollbar"
-            ref="crumbsContainer"
-            >
             <div
-              v-for="(item, index) in crumbs"
+              v-if="crumbs.length"
-              class="flex items-center text-[28rpx] leading-[48rpx] whitespace-nowrap"
+              class="w-full overflow-x-auto mt-[22rpx] leading-[48rpx] text-[#2F2F2F] flex items-center no-scrollbar"
-              :class="[
+              ref="crumbsContainer"
-                index === crumbsIndex ? 'text-[#747474]' : 'text-[#46299D]',
-                index === 0 ? '' : 'ml-[12rpx]',
-              ]"
-              @click="handleCrumbsClick(index)"
             >
-              <div>{{ item.name }}</div>
               <div
-                v-if="index !== crumbs.length - 1"
+                v-for="(item, index) in crumbs"
-                class="ml-[20rpx] flex items-center mb-[2rpx]"
+                class="flex items-center text-[28rpx] leading-[48rpx] whitespace-nowrap"
+                :class="[
+                  index === crumbsIndex ? 'text-[#747474]' : 'text-[#46299D]',
+                  index === 0 ? '' : 'ml-[12rpx]',
+                ]"
+                @click="handleCrumbsClick(index)"
               >
-                <tm-icon
+                <div>{{ item.name }}</div>
-                  name="tmicon-angle-right"
-                  :font-size="20"
-                  :color="index !== crumbs.length - 1 ? '#7A58DE' : '#C1B4EA'"
-                ></tm-icon>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
-          @click="()=>allCheck(allCheckStatus)"
-        >
-          <div>
-            <checkBox
-              :disabled="currentCrumbs?.sons?.length === 0"
-              :modelValue="allCheckStatus"
-            ></checkBox>
-          </div>
-          <div class="font-bold text-[28rpx] leading-[54rpx] ml-[20rpx]">
-            全选
-          </div>
-        </div>
-        <div
-          v-if="currentCrumbs?.sons?.length"
-          v-for="item in currentCrumbs?.sons"
-          class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
-        >
-          <div class="w-full flex items-center justify-between">
-            <div
-              class="flex items-center"
-            >
-              <div>
-                <checkBox
-                  :disabled="!item?.sons?.length"
-                  v-model="item.checkStatus"
-                  @change="(val) => checkItemChange(item, val)"
-                ></checkBox>
-              </div>
-              <div class="font-bold text-[28rpx] leading-[54rpx] ml-[20rpx]">
-                {{ item.name }}
-              </div>
-            </div>
-            <div v-if="item.sons?.length" class="flex items-center mr-[32rpx]">
-              <div class="vDivider mr-[32rpx]"></div>
-              <div @click="() => toNextLevel(item)" class="flex items-center">
-                <div class="mr-[12rpx]">
-                  <tm-image
-                    :width="26"
-                    :height="26"
-                    :src="item.checkStatus !== 'checked' ? downDep : downDepDis"
-                  ></tm-image>
-                </div>
                 <div
-                  class="text-[28rpx] leading-[54rpx] font-bold"
+                  v-if="index !== crumbs.length - 1"
-                  :class="
+                  class="ml-[20rpx] flex items-center mb-[2rpx]"
-                    item.checkStatus !== 'checked'
-                      ? 'text-[#46299D]'
-                      : 'text-[#C1B4EA]'
-                  "
                 >
-                  下级
+                  <tm-icon
+                    name="tmicon-angle-right"
+                    :font-size="20"
+                    :color="index !== crumbs.length - 1 ? '#7A58DE' : '#C1B4EA'"
+                  ></tm-icon>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
+            @click="() => allCheck(allCheckStatus)"
+          >
+            <div>
+              <checkBox
+                :disabled="currentCrumbs?.sons?.length === 0"
+                :modelValue="allCheckStatus"
+              ></checkBox>
+            </div>
+            <div class="font-bold text-[28rpx] leading-[54rpx] ml-[20rpx]">
+              全选
+            </div>
+          </div>
+          <div
+            v-if="currentCrumbs?.sons?.length"
+            v-for="item in currentCrumbs?.sons"
+            class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
+          >
+            <div class="w-full flex items-center justify-between">
+              <div class="flex items-center">
+                <div>
+                  <checkBox
+                    :disabled="!item?.sons?.length"
+                    v-model="item.checkStatus"
+                    @change="(val) => checkItemChange(item, val)"
+                  ></checkBox>
+                </div>
+                <div class="font-bold text-[28rpx] leading-[54rpx] ml-[20rpx]">
+                  {{ item.name }}
+                </div>
+              </div>
+              <div
+                v-if="item.sons?.length"
+                class="flex items-center mr-[32rpx]"
+              >
+                <div class="vDivider mr-[32rpx]"></div>
+                <div @click="() => toNextLevel(item)" class="flex items-center">
+                  <div class="mr-[12rpx]">
+                    <tm-image
+                      :width="26"
+                      :height="26"
+                      :src="
+                        item.checkStatus !== 'checked' ? downDep : downDepDis
+                      "
+                    ></tm-image>
+                  </div>
+                  <div
+                    class="text-[28rpx] leading-[54rpx] font-bold"
+                    :class="
+                      item.checkStatus !== 'checked'
+                        ? 'text-[#46299D]'
+                        : 'text-[#C1B4EA]'
+                    "
+                  >
+                    下级
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="h-[162rpx] pl-[32rpx] pr-[32rpx] bg-[#FFFFFF]">
+      <template #bottom>
-        <div class="mt-[14rpx] flex justify-between">
+        <div class="h-[162rpx] pl-[32rpx] pr-[32rpx] bg-[#FFFFFF]">
-          <div class="flex flex-col">
+          <div class="mt-[14rpx] flex justify-between">
-            <div @click="openDrawer" class="flex items-center text-[28rpx] leading-[60rpx] text-[#000000] font-bold">
+            <div class="flex flex-col">
-              <div>已选择部门数：</div>
+              <div
-              <div>{{ allCheckedList.length }}</div>
+                @click="openDrawer"
-              <div class="ml-[28rpx]">
+                class="flex items-center text-[28rpx] leading-[60rpx] text-[#000000] font-bold"
-                <tm-icon :fontSize="24" color="#46299D" name="tmicon-angle-up"></tm-icon>
+              >
+                <div>已选择部门数：</div>
+                <div>{{ allCheckedList.length }}</div>
+                <div class="ml-[28rpx]">
+                  <tm-icon
+                    :fontSize="24"
+                    color="#46299D"
+                    name="tmicon-angle-up"
+                  ></tm-icon>
+                </div>
+              </div>
+              <div
+                class="text-[24rpx] leading-[24rpx] text-[#7A58DE] w-[280rpx] truncate"
+              >
+                {{ allCheckedList.map((v) => v.name).toString() }}
               </div>
             </div>
-            <div class="text-[24rpx] leading-[24rpx] text-[#7A58DE] w-[280rpx] truncate">
+            <div class="btnBox">
-              {{ allCheckedList.map(v=>v.name).toString() }}
+              <tm-button
+                @click="handleConfirm"
+                color="#46299D"
+                :disabled="!allCheckedList.length"
+                disabledColor="#E6E6E6"
+                :margin="[0]"
+                :shadow="0"
+                :width="264"
+                :height="76"
+                size="large"
+                label="确定"
+              ></tm-button>
             </div>
           </div>
-          <div class="btnBox">
-            <tm-button
-              @click="handleConfirm"
-              color="#46299D"
-              :disabled="!allCheckedList.length"
-              disabledColor="#E6E6E6"
-              :margin="[0]"
-              :shadow="0"
-              :width="264"
-              :height="76"
-              size="large"
-              label="确定"
-            >
-            </tm-button>
-          </div>
         </div>
-      </div>
+        <tm-drawer
-    </div>
+          placement="bottom"
-    <tm-drawer 
+          v-model:show="showWin"
-      placement="bottom" 
+          :height="800"
-      v-model:show="showWin" 
+          :hideHeader="true"
-      :height="800" 
+          :round="5"
-      :hideHeader="true"
+        >
-      :round="5"
-    >
-      <div class="flex flex-col w-full h-full pt-[36rpx] pl-[32rpx] pr-[32rpx] leading-[60rpx]" >
-        <div class="text-[32rpx] font-bold flex items-center justify-between" >
-          <div class="flex items-center ml-[10rpx]">
-            <div>已选择部门数：</div>
-            <div>{{ allCheckedList.length }}</div>
-          </div>
           <div
-            class="text-[#7A58DE] mr-[10rpx]"
+            class="flex flex-col w-full h-full pt-[36rpx] pl-[32rpx] pr-[32rpx] leading-[60rpx]"
-            @click="()=>showWin = false"
           >
-            确定
-          </div>
-        </div>
-        <div class="flex-1 pb-[20rpx] overflow-y-auto pt-[30rpx]" >
-          <div
-            v-for="(item,index) in allCheckedList"
-            class="flex flex-col"
-          >
-            <div v-if="index ===0" class="divider" ></div>
             <div
-              class="flex items-center justify-between mt-[36rpx] font-bold text-[#000000] leading-[54rpx] mb-[34rpx]" 
+              class="text-[32rpx] font-bold flex items-center justify-between"
             >
-              <div class="text-[28rpx] ml-[10rpx]">{{ item.name }}</div>
+              <div class="flex items-center ml-[10rpx]">
-              <div class="diyBtn">
+                <div>已选择部门数：</div>
-                <tm-button @click="()=>deleteNode(item)" :disabled="userDepIds.includes(item.ID)" :margin="[10]" :shadow="0" text size="small" :width="106" :height="50" outlined label="移除"></tm-button>
+                <div>{{ allCheckedList.length }}</div>
+              </div>
+              <div
+                class="text-[#7A58DE] mr-[10rpx]"
+                @click="() => (showWin = false)"
+              >
+                确定
+              </div>
+            </div>
+            <div class="flex-1 pb-[20rpx] overflow-y-auto pt-[30rpx]">
+              <div
+                v-for="(item, index) in allCheckedList"
+                class="flex flex-col"
+              >
+                <div v-if="index === 0" class="divider"></div>
+                <div
+                  class="flex items-center justify-between mt-[36rpx] font-bold text-[#000000] leading-[54rpx] mb-[34rpx]"
+                >
+                  <div class="text-[28rpx] ml-[10rpx]">{{ item.name }}</div>
+                  <div class="diyBtn">
+                    <tm-button
+                      @click="() => deleteNode(item)"
+                      :disabled="userDepIds.includes(item.ID)"
+                      :margin="[10]"
+                      :shadow="0"
+                      text
+                      size="small"
+                      :width="106"
+                      :height="50"
+                      outlined
+                      label="移除"
+                    ></tm-button>
+                  </div>
+                </div>
+                <div class="divider"></div>
               </div>
             </div>
-            <div class="divider" ></div>
           </div>
-        </div>
+        </tm-drawer>
-      </div>
+      </template>
-    </tm-drawer>
+    </zPaging>
   </div>
 </template>
 <script setup>
-import { ref, watch, computed, onMounted,nextTick } from "vue";
+import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
-import { onShow, onLoad } from "@dcloudio/uni-app";
+import { ref, watch, computed, onMounted, nextTick } from 'vue'
-import { useChatList } from "@/store/chatList/index.js";
+import { onShow, onLoad } from '@dcloudio/uni-app'
-import { useAuth } from "@/store/auth";
+import { useChatList } from '@/store/chatList/index.js'
-import { useTalkStore, useUserStore } from "@/store";
+import { useAuth } from '@/store/auth'
-import { useGroupTypeStore } from "@/store/groupType";
+import { useTalkStore, useUserStore } from '@/store'
-import downDep from "@/static/image/chatList/downDep.png";
+import { useGroupTypeStore } from '@/store/groupType'
-import downDepDis from "@/static/image/chatList/downDepDis.png";
+import downDep from '@/static/image/chatList/downDep.png'
-import checkBox from "@/components/checkBox/index.vue";
+import downDepDis from '@/static/image/chatList/downDepDis.png'
+import checkBox from '@/components/checkBox/index.vue'
 import lodash from 'lodash'
 
 const {
@@ -197,201 +226,204 @@ const {
   crumbs,
   crumbsIndex,
   depCheckedKeys,
-} = useGroupTypeStore();
+} = useGroupTypeStore()
 const userStore = useUserStore()
 
-const searchVal = ref("");
+const searchVal = ref('')
-const crumbsContainer = ref(null);
+const crumbsContainer = ref(null)
-const showWin = ref(false);
+const showWin = ref(false)
 
 const getAllCheckedNodes = (node, checkedNodes = []) => {
   if (node.checkStatus === 'checked') {
-    checkedNodes.push(node);
+    checkedNodes.push(node)
   }
   if (node.sons && Array.isArray(node.sons)) {
-    node.sons.forEach(son => getAllCheckedNodes(son, checkedNodes));
+    node.sons.forEach((son) => getAllCheckedNodes(son, checkedNodes))
   }
-  return checkedNodes;
+  return checkedNodes
-};
+}
 
 const userDepIds = computed(() => {
-  return userStore.deps.map(v=>v.dept_id);
+  return userStore.deps.map((v) => v.dept_id)
-});
+})
 
 const allCheckedList = computed(() => {
-  const checkedNodes = [];
+  const checkedNodes = []
-  depTreeMyList.value.forEach(node => getAllCheckedNodes(node, checkedNodes));
+  depTreeMyList.value.forEach((node) => getAllCheckedNodes(node, checkedNodes))
-  console.log("checkedNodes", checkedNodes);
+  console.log('checkedNodes', checkedNodes)
 
-  return checkedNodes;
+  return checkedNodes
 })
 
 const currentCrumbs = computed(() => {
-  if (crumbs.value[crumbsIndex.value] ) {
+  if (crumbs.value[crumbsIndex.value]) {
-    if (searchVal.value && searchVal.value !== "") {
+    if (searchVal.value && searchVal.value !== '') {
       let filterSons = crumbs.value[crumbsIndex.value].sons.filter((item) =>
-        item.name.includes(searchVal.value)
+        item.name.includes(searchVal.value),
-      );
+      )
-        return {
+      return {
-          ...crumbs.value[crumbsIndex.value],
+        ...crumbs.value[crumbsIndex.value],
-          sons: filterSons,
+        sons: filterSons,
-        };
+      }
     }
-    console.log("allCheckedList", crumbs.value[crumbsIndex.value]);
+    console.log('allCheckedList', crumbs.value[crumbsIndex.value])
-    return crumbs.value[crumbsIndex.value];
+    return crumbs.value[crumbsIndex.value]
   }
   return {}
-});
+})
 
 const allCheckStatus = computed(() => {
   if (!currentCrumbs.value.sons) {
-    return "noChecked";
+    return 'noChecked'
   }
-  const allChecked = currentCrumbs.value.sons.every((son) => son.checkStatus === "checked");
+  const allChecked = currentCrumbs.value.sons.every(
-  const someChecked =currentCrumbs.value.sons.some(
+    (son) => son.checkStatus === 'checked',
-      (son) =>
+  )
-        son.checkStatus === "checked" || son.checkStatus === "halfChecked"
+  const someChecked = currentCrumbs.value.sons.some(
-    );
+    (son) => son.checkStatus === 'checked' || son.checkStatus === 'halfChecked',
-    if (allChecked) {
+  )
-    return "checked";
+  if (allChecked) {
+    return 'checked'
   } else if (someChecked) {
-    return "halfChecked";
+    return 'halfChecked'
   } else {
-    return "noChecked";
+    return 'noChecked'
   }
 })
 
 const findNodeById = (node, targetId) => {
   if (node.ID === targetId) {
-    return node;
+    return node
   }
   if (node.sons && Array.isArray(node.sons)) {
     for (const son of node.sons) {
-      const found = findNodeById(son, targetId);
+      const found = findNodeById(son, targetId)
       if (found) {
-        return found;
+        return found
       }
     }
   }
-  return null;
+  return null
-};
+}
 
 const findParentNode = (node, targetId) => {
-  if (!node.sons || !Array.isArray(node.sons)) return null;
+  if (!node.sons || !Array.isArray(node.sons)) return null
   for (const son of node.sons) {
     if (son.ID === targetId) {
-      return node;
+      return node
     }
-    const parent = findParentNode(son, targetId);
+    const parent = findParentNode(son, targetId)
     if (parent) {
-      return parent;
+      return parent
     }
   }
-  return null;
+  return null
-};
+}
 
 // 检查并更新父节点的状态
 const updateParentStatus = (node) => {
-  const parent = findParentNode(depTreeMyList.value[0], node.ID);
+  const parent = findParentNode(depTreeMyList.value[0], node.ID)
-  if (!parent) return;
+  if (!parent) return
-  if (parent.checkStatus !== "checked"){
+  if (parent.checkStatus !== 'checked') {
     const allChecked =
       parent.sons &&
       Array.isArray(parent.sons) &&
-      parent.sons.every((son) => son.checkStatus === "checked");
+      parent.sons.every((son) => son.checkStatus === 'checked')
     const someChecked =
       parent.sons &&
       Array.isArray(parent.sons) &&
       parent.sons.some(
         (son) =>
-          son.checkStatus === "checked" || son.checkStatus === "halfChecked"
+          son.checkStatus === 'checked' || son.checkStatus === 'halfChecked',
-      );
+      )
 
     if (allChecked) {
-      parent.checkStatus = "halfChecked";
+      parent.checkStatus = 'halfChecked'
     } else if (someChecked) {
-      parent.checkStatus = "halfChecked";
+      parent.checkStatus = 'halfChecked'
     } else {
-      parent.checkStatus = "noChecked";
+      parent.checkStatus = 'noChecked'
     }
   }
 
-  updateParentStatus(parent);
+  updateParentStatus(parent)
-};
+}
 //根据子节点状态更新当前节点状态
 const updateNodeStatus = (node) => {
-  if (!node.sons || !Array.isArray(node.sons)) return;
+  if (!node.sons || !Array.isArray(node.sons)) return
-  const allChecked = node.sons.every(son => son.checkStatus === 'checked');
+  const allChecked = node.sons.every((son) => son.checkStatus === 'checked')
-  const someChecked = node.sons.some(son => son.checkStatus === 'checked' || son.checkStatus === 'halfChecked');
+  const someChecked = node.sons.some(
+    (son) => son.checkStatus === 'checked' || son.checkStatus === 'halfChecked',
+  )
 
   if (allChecked) {
-    node.checkStatus = 'halfChecked';
+    node.checkStatus = 'halfChecked'
   } else if (someChecked) {
-    node.checkStatus = 'halfChecked';
+    node.checkStatus = 'halfChecked'
   } else {
-    node.checkStatus = 'noChecked';
+    node.checkStatus = 'noChecked'
   }
-};
+}
 
 // 更新当前节点及其所有子节点的状态
 const updateCheckStatus = (node, status) => {
-  node.checkStatus = status;
+  node.checkStatus = status
   if (node.sons && Array.isArray(node.sons) && node.sons.length > 0) {
-    node.sons.forEach((son) => updateCheckStatus(son, status));
+    node.sons.forEach((son) => updateCheckStatus(son, status))
   }
-};
+}
 
 const checkItemChange = (item, val) => {
   // 更新当前节点及其子节点的状态
-  updateCheckStatus(item, val);
+  updateCheckStatus(item, val)
 
   // 更新父节点的状态
-  updateParentStatus(item);
+  updateParentStatus(item)
-};
+}
 
 const deleteNode = (item) => {
-  const treeNode = findNodeById(depTreeMyList.value[0], item.ID);
+  const treeNode = findNodeById(depTreeMyList.value[0], item.ID)
-  if (!treeNode) return;
+  if (!treeNode) return
-  treeNode.checkStatus = "noChecked";
+  treeNode.checkStatus = 'noChecked'
-  updateNodeStatus(treeNode);
+  updateNodeStatus(treeNode)
-  updateParentStatus(treeNode);
+  updateParentStatus(treeNode)
-};
+}
 
 const toNextLevel = async (item) => {
-  if (item.checkStatus !== "checked") {
+  if (item.checkStatus !== 'checked') {
-    crumbs.value.push(item);
+    crumbs.value.push(item)
-    crumbsIndex.value++;
+    crumbsIndex.value++
-    await nextTick(); 
+    await nextTick()
     if (crumbsContainer.value) {
-      crumbsContainer.value.scrollLeft = crumbsContainer.value.scrollWidth;
+      crumbsContainer.value.scrollLeft = crumbsContainer.value.scrollWidth
     }
   }
-};
+}
 
 const handleCrumbsClick = (index) => {
-  crumbsIndex.value = index;
+  crumbsIndex.value = index
-  crumbs.value = crumbs.value.slice(0, index + 1);
+  crumbs.value = crumbs.value.slice(0, index + 1)
-};
+}
 
 const allCheck = (status) => {
-  let statusT = 'noChecked';
+  let statusT = 'noChecked'
-  if (status === "checked") {
+  if (status === 'checked') {
-    statusT = "noChecked";
+    statusT = 'noChecked'
   } else {
-    statusT = "checked";
+    statusT = 'checked'
   }
   currentCrumbs.value.sons.forEach((item) => {
     const itemT = findNodeById(depTreeMyList.value[0], item.ID)
-    if (!itemT) return;
+    if (!itemT) return
-    checkItemChange(itemT, statusT);
+    checkItemChange(itemT, statusT)
-  });
+  })
-};
+}
 
 const openDrawer = () => {
-  showWin.value = true;
+  showWin.value = true
-  if (allCheckedList.length>0) {
+  if (allCheckedList.length > 0) {
   }
-};
+}
 
 // watch(() => depTreeMyList.value, (newValue, oldValue) => {
 //   console.log("depTreeMyList", newValue);
@@ -404,54 +436,48 @@ const openDrawer = () => {
 
 const handleConfirm = () => {
   depCheckedKeys.value = lodash.cloneDeep(allCheckedList.value)
-  console.log("depCheckedKeys", depCheckedKeys.value);
+  console.log('depCheckedKeys', depCheckedKeys.value)
 
-  uni.navigateBack();
+  uni.navigateBack()
 }
 
 const initCheckedKeys = () => {
   depCheckedKeys.value.forEach((item) => {
-    const node = findNodeById(depTreeMyList.value[0], item.ID);
+    const node = findNodeById(depTreeMyList.value[0], item.ID)
     if (node) {
-      node.checkStatus = "checked";
+      node.checkStatus = 'checked'
-      updateParentStatus(node);
+      updateParentStatus(node)
     }
-  });
+  })
-};
+}
 
 const init = async () => {
-  crumbsIndex.value = 0;
+  crumbsIndex.value = 0
-  await getDepsTreeMy();
+  await getDepsTreeMy()
-  crumbs.value = depTreeMyList.value.length ? [depTreeMyList.value[0]] : [];
+  crumbs.value = depTreeMyList.value.length ? [depTreeMyList.value[0]] : []
-  initCheckedKeys();
+  initCheckedKeys()
-};
+}
 
 onMounted(() => {
-  init();
+  init()
-});
+})
 </script>
 <style scoped lang="scss">
-uni-page-body,
+::v-deep .zp-paging-container-content {
-page {
   height: 100%;
-}
-.outer-layer {
-  overflow-y: auto;
-  flex: 1;
-  background-image: url("@/static/image/clockIn/z3280@3x.png");
-  background-size: cover;
-  padding-bottom: 0;
   display: flex;
-  flex-direction: column;
 }
-.root {
+.choose-deps-page {
-  flex: 1;
+  .choose-deps {
-  display: flex;
+    flex: 1;
-  flex-direction: column;
+    display: flex;
-  justify-content: space-between;
+    flex-direction: column;
-  padding-top: 18rpx;
+    background-image: url('@/static/image/clockIn/z3280@3x.png');
-  overflow: hidden;
+    background-size: cover;
+    padding: 20rpx 0;
+  }
 }
+
 .divider {
   height: 1rpx;
   background-color: #707070;
@@ -478,42 +504,42 @@ page {
   background-repeat: no-repeat;
   border-radius: 12rpx;
   &.firstPanel {
-    background-image: url("@/static/image/chatList/zu6033@2x.png");
+    background-image: url('@/static/image/chatList/zu6033@2x.png');
   }
   &.secondPanel {
-    background-image: url("@/static/image/chatList/zu6031@2x.png");
+    background-image: url('@/static/image/chatList/zu6031@2x.png');
     margin-top: 28rpx;
     margin-bottom: 28rpx;
   }
   &.thirdPanel {
-    background-image: url("@/static/image/chatList/zu6032@2x.png");
+    background-image: url('@/static/image/chatList/zu6032@2x.png');
   }
   &.activePanel {
     box-shadow: 0 0 0 3rpx #46299d;
   }
 }
 .btnBox {
-  :deep(uni-button[disabled="true"]) {
+  :deep(uni-button[disabled='true']) {
     color: #bebebe !important;
   }
 }
 .no-scrollbar {
-  -ms-overflow-style: none;  /* IE and Edge */
+  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  scrollbar-width: none; /* Firefox */
 }
 
 .no-scrollbar::-webkit-scrollbar {
-  display: none;  /* Chrome, Safari, and Opera */
+  display: none; /* Chrome, Safari, and Opera */
 }
 .diyBtn {
   :deep(uni-button) {
     color: #191919 !important;
-    border: 1rpx solid #D6D6D8 !important;
+    border: 1rpx solid #d6d6d8 !important;
-    background-color: #FFFFFF !important;
+    background-color: #ffffff !important;
-    &[disabled="true"] {
+    &[disabled='true'] {
-      color: #BEBEBE !important;
+      color: #bebebe !important;
-      border: 1rpx solid #E6E6E6 !important;
+      border: 1rpx solid #e6e6e6 !important;
-      background-color: #E6E6E6 !important;
+      background-color: #e6e6e6 !important;
     }
   }
 }

src/pages/creatGroupChat/index.vue

@@ -8,12 +8,12 @@
         <div class="group-avatar flex items-center justify-center">
           <div class="avatar-placeholder" v-if="groupActiveIndex === -1"></div>
           <div v-else>
-            <tm-image
+            <avatarModule
-              :width="192"
+              :mode="2"
-              :height="192"
+              :avatar="avatarImg"
-              :round="24"
+              :groupType="groupType"
-              :src="avatarImg"
+              :customStyle="{ width: '192rpx', height: '192rpx' }"
-            ></tm-image>
+            ></avatarModule>
           </div>
         </div>
         <div class="input-group flex items-center justify-between">
@@ -60,7 +60,10 @@
               </div>
             </div>
           </div>
-          <div v-if="depCheckedKeys.length" class="mt-[32rpx]">
+          <div
+            v-if="depCheckedKeys.length && groupActiveIndex === 1"
+            class="mt-[32rpx]"
+          >
             <div
               v-for="(item, index) in depCheckedKeys"
               class="text-[#747474] text-[28rpx] leading-[40rpx] font-bold"
@@ -99,7 +102,7 @@
                   v-if="!groupAdmins.length"
                   class="text-[#B4B4B4] text-[28rpx] font-bold mr-[32rpx]"
                 >
-                  全部({{ 0 }})
+                  全部({{ allChooseMembers?.length || 0 }})
                 </div>
                 <tm-icon
                   :font-size="22"
@@ -109,29 +112,14 @@
               </div>
             </div>
           </div>
-          <div v-if="groupAdmins.length" class="mt-[32rpx]">
+          <groupMemberList
-            <div
+            :groupType="3"
-              v-for="(item, index) in groupAdmins"
+            :is_manager="true"
-              class="text-[#747474] text-[28rpx] leading-[40rpx] font-bold"
+            :memberList="allChooseMembers"
-              :class="[
+            :memberListsLimit="
-                index !== 0 ? 'mt-[10rpx]' : '',
+              groupActiveIndex == 0 || groupActiveIndex == 2 ? 13 : 15
-                depsNoExpanded && index > 4 ? 'hidden' : '',
+            "
-              ]"
+          ></groupMemberList>
-            >
-              {{ item.name }}
-            </div>
-            <div
-              class="text-[#46299D] text-[28rpx] mt-[20rpx] font-bold flex justify-center"
-            >
-              <div
-                v-if="groupAdmins.length > 5"
-                @click="depsNoExpanded = !depsNoExpanded"
-                class="w-[100rpx]"
-              >
-                {{ depsNoExpanded ? '展开' : '收起' }}
-              </div>
-            </div>
-          </div>
         </div>
 
         <div
@@ -197,6 +185,8 @@
 <script setup>
 import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
 import customBtn from '@/components/custom-btn/custom-btn.vue'
+import groupMemberList from '../chatSettings/components/groupMembersList.vue'
+import avatarModule from '@/components/avatar-module/index.vue'
 
 import { ref, watch, computed } from 'vue'
 import { onShow, onLoad } from '@dcloudio/uni-app'
@@ -205,9 +195,6 @@ import { useAuth } from '@/store/auth'
 import { useTalkStore, useUserStore } from '@/store'
 import addCircle from '@/static/image/chatList/addCircle.png'
 import cahtPopover from '@/static/image/chatList/cahtPopover.png'
-import groupDepartment from '@/static/image/chatList/groupDepartment.png'
-import groupProject from '@/static/image/chatList/groupProject.png'
-import groupNormal from '@/static/image/chatList/groupNormal.png'
 import { ServeCreateGroup } from '@/api/group/index'
 import { useGroupTypeStore } from '@/store/groupType'
 
@@ -227,24 +214,26 @@ const { userInfo } = useAuth()
 const groupChatType = ref('')
 const depsNoExpanded = ref(true)
 
-const avatarImg = computed(() => {
+//群类型
-  let srcT = ''
+const groupType = computed(() => {
+  let group_type = ''
   switch (groupActiveIndex.value) {
     case 0:
-      srcT = groupNormal
+      group_type = 1
       break
     case 1:
-      srcT = groupDepartment
+      group_type = 2
       break
     case 2:
-      srcT = groupProject
+      group_type = 3
       break
     default:
-      srcT = groupNormal
+      group_type = ''
   }
-  return srcT
+  return group_type
 })
 
+//点击跳转到选择群类型页面
 const chooseGroupType = () => {
   uni.navigateTo({
     url: '/pages/chooseGroupType/index',
@@ -263,8 +252,9 @@ const chooseMembers = () => {
   })
 }
 
+//点击发起群聊
 const handleConfirm = async () => {
-  console.log(allChooseMembers.value)
+  // console.log(allChooseMembers.value)
   let erp_ids = ''
   if (allChooseMembers?.value?.length > 0) {
     allChooseMembers?.value?.forEach((ele) => {
@@ -316,6 +306,7 @@ const handleConfirm = async () => {
   }
 }
 
+//发起群聊按钮可点击状态
 const confirmBtnStatus = computed(() => {
   let disabledT = false
   console.log(groupActiveIndex.value !== -1)
@@ -328,9 +319,6 @@ const confirmBtnStatus = computed(() => {
   }
   switch (groupActiveIndex.value) {
     case 0:
-      if (allChooseMembers?.value?.length < 3) {
-        return true
-      }
       break
     case 1:
       if (!depCheckedKeys.value.length) {
@@ -341,9 +329,6 @@ const confirmBtnStatus = computed(() => {
       }
       break
     case 2:
-      if (allChooseMembers?.value?.length < 3) {
-        return true
-      }
       break
     default:
       break
@@ -364,8 +349,9 @@ onShow(() => {
 .create-group-chat {
   background-image: url('@/static/image/clockIn/z3280@3x.png');
   background-size: cover;
+  background-position: center bottom;
   width: 100%;
-  padding: 0 32rpx;
+  padding: 0 32rpx 20rpx;
   .group-avatar {
     padding: 60rpx 0;
     .avatar-placeholder {
@@ -402,9 +388,4 @@ onShow(() => {
   display: flex;
   align-items: center;
 }
-.btnBox {
-  :deep(uni-button[disabled='true']) {
-    color: #bebebe !important;
-  }
-}
 </style>

src/pages/dialog/dialogDetail/userDetail.vue

@@ -3,13 +3,7 @@
     <div class="root">
       <ZPaging ref="zPaging" :show-scrollbar="false">
         <template #top>
-          <tm-navbar
+          <customNavbar class="tmNavBar"></customNavbar>
-            class="tmNavBar"
-            :hideBack="false"
-            hideHome
-            title=""
-            :leftWidth="220"
-          ></tm-navbar>
         </template>
         <div class="user-detail-info">
           <div class="user-info-head user-info-card">

src/pages/search/components/searchItem.vue

@@ -9,15 +9,23 @@
         : ''
     "
   >
-    <div
+    <avatarModule
-      class="avatar-img"
+      :mode="props.searchItem?.group_type === 0 ? 1 : 2"
-      :class="props?.conditionType ? 'avatar-img-condition' : ''"
+      :avatar="avatarImg"
-    >
+      :userName="resultName"
-      <img v-if="avatarImg !== 'textImg'" :src="avatarImg" />
+      :groupType="props.searchItem?.group_type"
-      <span v-if="avatarImg === 'textImg'" class="text-[32rpx] font-bold">
+      :customStyle="{
-        {{ imgText }}
+        width: props?.conditionType ? '64rpx' : '96rpx',
-      </span>
+        height: props?.conditionType ? '64rpx' : '96rpx',
-    </div>
+        margin: props?.conditionType ? '0 18rpx 0 0' : '0 20rpx 0 0',
+      }"
+      :customTextStyle="{
+        fontSize: props?.conditionType ? '20rpx' : '32rpx',
+        fontWeight: 'bold',
+        color: '#fff',
+        lineHeight: '44rpx',
+      }"
+    ></avatarModule>
     <div class="result-info">
       <div
         class="info-name"
@@ -75,10 +83,7 @@
   </div>
 </template>
 <script setup>
-import groupDepartment from '@/static/image/chatList/groupDepartment.png'
+import avatarModule from '@/components/avatar-module/index.vue'
-import groupProject from '@/static/image/chatList/groupProject.png'
-import groupNormal from '@/static/image/chatList/groupNormal.png'
-import groupCompany from '@/static/image/chatList/groupCompany.png'
 import {
   ref,
   watch,
@@ -167,14 +172,8 @@ const getKeyValue = (keys) => {
 //头像
 const avatarImg = computed(() => {
   let avatar = getKeyValue(keyMapping[props.searchResultKey]?.avatar)
-  if (!avatar) {
-    avatar = groupTypeMapping[props.searchItem?.group_type]?.defaultImg
-  }
   if (props?.conditionType) {
     avatar = props.searchItem.avatar
-    if (!avatar) {
-      avatar = groupTypeMapping[0]?.defaultImg
-    }
   }
   return avatar
 })
@@ -195,25 +194,20 @@ const imgText = computed(() => {
 // 映射表-根据groupType设置对应值
 const groupTypeMapping = {
   0: {
-    defaultImg: 'textImg',
   },
   1: {
-    defaultImg: groupNormal,
   },
   2: {
     result_type: t('index.mine.department'),
     result_type_color: '#377EC6',
-    defaultImg: groupDepartment,
   },
   3: {
     result_type: t('index.mine.project'),
     result_type_color: '#C1681C',
-    defaultImg: groupProject,
   },
   4: {
     result_type: t('index.type.company'),
     result_type_color: '#7A58DE',
-    defaultImg: groupCompany,
   },
 }
 //群人数
@@ -262,35 +256,6 @@ const resultDetail = computed(() => {
   padding: 22rpx 0 24rpx;
   border-bottom: 1px solid $theme-border-color;
 
-  .avatar-img {
-    width: 96rpx;
-    height: 96rpx;
-    margin: 0 20rpx 0 0;
-    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%;
-    }
-    span {
-      color: #fff;
-      line-height: 44rpx;
-    }
-  }
-  .avatar-img-condition {
-    width: 64rpx;
-    height: 64rpx;
-    margin: 0 18rpx 0 0;
-    span {
-      font-size: 20rpx;
-    }
-  }
   .result-info {
     width: 100%;
     .info-name {

src/pages/search/searchByCondition/index.vue

@@ -11,13 +11,7 @@
         :inside-more="true"
       >
         <template #top v-if="state.showPageTitle">
-          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
+          <customNavbar :title="state.pageTitle"></customNavbar>
-            <div class="navBar-title flex flex-col items-center justify-center">
-              <span class="text-[34rpx] font-medium">
-                {{ state.pageTitle }}
-              </span>
-            </div>
-          </tm-navbar>
         </template>
         <div v-if="state.condition === 'date'" class="search-by-date">
           <tm-time-picker

src/uni_modules/tmui/locale/zh-Hans.json

@@ -138,5 +138,6 @@
   "select.member.remove": "选择要移除的人",
   "select.member.num": "已选择",
   "statistic.unit.person": "人",
-  "pageTitle.create.group": "发起群聊"
+  "pageTitle.create.group": "发起群聊",
+  "pageTitle.select.department": "选择部门"
 }