From 5c55411aa3c9a0e9c6df7a8f3b4daf7773a2914d Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Sat, 8 Feb 2025 17:09:57 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E9=83=A8=E5=88=86=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E9=80=89=E6=8B=A9=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/chooseByDeps/index.vue             |  10 +-
 src/pages/chooseChat/components/chatItem.vue |  60 +++--
 src/pages/chooseChat/index.vue               | 243 +++++++++++--------
 src/uni_modules/tmui/locale/zh-Hans.json     |   5 +-
 4 files changed, 198 insertions(+), 120 deletions(-)

diff --git a/src/pages/chooseByDeps/index.vue b/src/pages/chooseByDeps/index.vue
index afeb385..2df9eff 100644
--- a/src/pages/chooseByDeps/index.vue
+++ b/src/pages/chooseByDeps/index.vue
@@ -40,7 +40,10 @@
             </div>
           </div>
           <div
-            v-if="state.chooseMode === 1 || state.chooseMode === 2"
+            v-if="
+              (state.chooseMode === 1 || state.chooseMode === 2) &&
+              (currentCrumbs?.sons?.length > 0 || currentMembers?.length > 0)
+            "
             class="pl-[32rpx] bg-[#FFFFFF] mt-[20rpx] h-[110rpx] flex items-center"
             @click="() => allCheck(allCheckStatus)"
           >
@@ -55,7 +58,7 @@
             </div>
           </div>
           <div
-            v-if="currentCrumbs?.sons?.length"
+            v-if="currentCrumbs?.sons?.length > 0"
             v-for="item in currentCrumbs?.sons"
             @click="
               state.chooseMode === 1 || state.chooseMode === 2
@@ -522,7 +525,7 @@ const buildDepsMap = (departments) => {
 }
 
 const allCheckStatus = computed(() => {
-  if (!currentCrumbs.value.sons) {
+  if (currentCrumbs?.value?.sons?.length === 0) {
     return 'noChecked'
   }
   const allChecked = currentCrumbs.value.sons.every(
@@ -837,6 +840,7 @@ const toUserDetail = (userItem) => {
     background-position: bottom center;
     padding: 20rpx 0;
     background-attachment: fixed;
+    width: 100%;
   }
 }
 
diff --git a/src/pages/chooseChat/components/chatItem.vue b/src/pages/chooseChat/components/chatItem.vue
index 7845eb4..b6248ea 100644
--- a/src/pages/chooseChat/components/chatItem.vue
+++ b/src/pages/chooseChat/components/chatItem.vue
@@ -1,36 +1,58 @@
 <template>
   <div>
-    <div @click="cellClick" :class="['chatItem', props.data.is_top === 1 ? 'isTop' : '']">
+    <div
+      @click="cellClick"
+      :class="['chatItem', props.data.is_top === 1 ? 'isTop' : '']"
+    >
       <div>
-        <tm-checkbox v-if="props.isMultiSelect" :round="10" :modelValue="props.data.isCheck"
-          @update:modelValue="props.data.isCheck = !props.data.isCheck" :size="42" :color="props.data.isCheck ? '#46299D' : '#BABABA'"></tm-checkbox>
+        <tm-checkbox
+          v-if="props.isMultiSelect"
+          :round="10"
+          :modelValue="props.data.isCheck"
+          @update:modelValue="props.data.isCheck = !props.data.isCheck"
+          :size="32"
+          :color="props.data.isCheck ? '#46299D' : '#BABABA'"
+          class="pr-[4rpx]"
+        ></tm-checkbox>
       </div>
       <div class="avatarImg">
-        <tm-image :width="96" :height="96" :round="12" :src="props.data.avatar"></tm-image>
+        <avatarModule
+          :mode="2"
+          :avatar="props?.data?.avatar"
+          :groupType="props?.data?.group_type"
+          :customStyle="{ width: '96rpx', height: '96rpx' }"
+        ></avatarModule>
       </div>
       <div class="chatInfo">
         <div class="chatInfo_1">
           <div class="flex items-center">
-            <div class="text-[#000000] text-[32rpx] font-bold opacity-90">{{ props.data.name }}</div>
+            <div
+              class="text-[#171717] text-[32rpx] font-medium leading-[44rpx]"
+            >
+              <span>{{ props.data.name }}</span>
+              <span>（{{ props.data.group_member_num }}）</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <div v-if="props.index !== talkStore.talkItems.length - 1" class="divider"></div>
+    <div
+      v-if="props.index !== talkStore.talkItems.length - 1"
+      class="divider"
+    ></div>
   </div>
 </template>
 <script setup>
-import { ref, reactive, defineProps, defineEmits } from "vue"
-import dayjs from "dayjs";
+import avatarModule from '@/components/avatar-module/index.vue'
+import { ref, reactive, defineProps, defineEmits } from 'vue'
+import dayjs from 'dayjs'
 import { beautifyTime } from '@/utils/datetime'
 import { ServeClearTalkUnreadNum } from '@/api/chat'
 import { useTalkStore, useDialogueStore } from '@/store'
 import { useSessionMenu } from '@/hooks'
 
 const talkStore = useTalkStore()
-const {
-  onToTopTalk
-} = useSessionMenu()
+const { onToTopTalk } = useSessionMenu()
 const dialogueStore = useDialogueStore()
 const emit = defineEmits(['itemClick'])
 const props = defineProps({
@@ -48,25 +70,22 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
 const cellClick = () => {
   emit('itemClick', props.data)
 }
-
-
-
 </script>
 <style lang="scss" scoped>
 .chatItem {
   width: 100%;
   height: 154rpx;
-  padding: 30rpx 16rpx;
+  padding: 24rpx 18rpx;
   display: flex;
   align-items: center;
 
   &.isTop {
-    background-color: #F3F3F3;
+    background-color: #f3f3f3;
   }
 }
 
@@ -77,7 +96,7 @@ const cellClick = () => {
 
 .chatInfo {
   flex: 1;
-  margin-left: 20rpx;
+  margin-left: 16rpx;
 }
 
 .chatInfo_1 {
@@ -97,17 +116,16 @@ const cellClick = () => {
   font-size: 28rpx;
   color: #000000;
   opacity: 40%;
-
 }
 
 .companyTag {
   width: 76rpx;
   height: 38rpx;
-  border: 1px solid #7A58DE;
+  border: 1px solid #7a58de;
   font-size: 24rpx;
   text-align: center;
   border-radius: 6rpx;
-  color: #7A58DE;
+  color: #7a58de;
   font-weight: bold;
   margin-left: 12rpx;
 }
diff --git a/src/pages/chooseChat/index.vue b/src/pages/chooseChat/index.vue
index 05ddad2..e71849c 100644
--- a/src/pages/chooseChat/index.vue
+++ b/src/pages/chooseChat/index.vue
@@ -1,74 +1,123 @@
 <template>
-  <div class="outer-layer">
-    <div>
-      <tm-navbar :hideBack="true" hideHome :leftWidth="320">
-        <template v-slot:left>
-          <div @click="handleClose" class="ml-[48rpx] text-[34rpx] leading-[40rpx]">
-            关闭
+  <div class="choose-chat-page">
+    <ZPaging ref="zPaging" :show-scrollbar="false">
+      <template #top>
+        <customNavbar
+          :title="$t('pageTitle.select.shareChat')"
+          :hideBack="true"
+        >
+          <template #left>
+            <div
+              @click="handleClose"
+              class="ml-[42rpx] text-[34rpx] leading-[48rpx] font-regular"
+            >
+              {{ $t('button.text.close') }}
+            </div>
+          </template>
+          <template #right>
+            <div
+              v-if="!isMultiSelect"
+              @click="isMultiSelect = true"
+              class="mr-[36rpx] text-[34rpx] leading-[48rpx] font-regular"
+            >
+              {{ $t('button.multiple.choice') }}
+            </div>
+            <div v-else class="mr-[36rpx] btnBox">
+              <customBtn
+                :btnText="
+                  selectItems.length
+                    ? $t('button.text.done') + `(${selectItems.length})`
+                    : $t('button.text.done')
+                "
+                :disabled="!selectItems.length"
+                @clickBtn="handleFinish"
+              ></customBtn>
+            </div>
+          </template>
+        </customNavbar>
+      </template>
+      <div class="choose-chat">
+        <div class="searchRoot">
+          <customInput></customInput>
+        </div>
+        <div class="contentRoot">
+          <chatItem
+            v-for="(item, index) in items"
+            :key="item.index_name"
+            :index="index"
+            :data="item"
+            :isMultiSelect="isMultiSelect"
+            @itemClick="itemClick"
+          />
+        </div>
+      </div>
+      <tm-modal
+        v-model:show="showWin"
+        :height="forwardModalHeight"
+        :round="4"
+        okColor="#FFFFFF"
+        @ok="handleOk"
+        @cancel="handleCancel"
+      >
+        <template v-slot:title>
+          <div
+            class="w-full pl-[30rpx] leading-[48rpx] mt-[30rpx] font-bold text-[32rpx]"
+          >
+            发送给:
           </div>
         </template>
         <template v-slot:default>
-          <div class="text-[34rpx] font-bold ml-[-80rpx] leading-[40rpx]">
-            选择一个聊天
+          <div
+            class="pl-[22rpx] pr-[32rpx] pt-[10rpx] flex items-center justify-start flex-wrap"
+          >
+            <div
+              v-if="selectItemsModal.length > 1"
+              v-for="item in selectItemsModal"
+              class="w-1/4 mt-[20rpx] flex flex-col items-center justify-center"
+            >
+              <div class="w-[96rpx] h-[96rpx] rounded-[60rpx] flex-center">
+                <tm-image
+                  :width="96"
+                  :height="96"
+                  :round="12"
+                  :src="item.avatar"
+                ></tm-image>
+              </div>
+              <div
+                class="mt-[8rpx] text-[#666666] text-[24rpx] w-[94rpx] truncate"
+              >
+                {{ item.name }}
+              </div>
+            </div>
+            <div v-else class="w-full flex items-center justify-start">
+              <avatarModule
+                :mode="2"
+                :avatar="selectItemsModal[0].avatar"
+                :groupType="selectItemsModal[0].group_type"
+                :customStyle="{ width: '96rpx', height: '96rpx' }"
+              ></avatarModule>
+              <div class="ml-[16rpx] text-[#161616] text-[32rpx] font-bold">
+                {{ selectItemsModal[0].name }}
+              </div>
+            </div>
           </div>
         </template>
-        <template v-slot:right>
-          <div v-if="!isMultiSelect" @click="isMultiSelect = true" class="mr-[36rpx] text-[34rpx] leading-[40rpx]">
-            多选
-          </div>
-          <div v-else class="mr-[36rpx] btnBox">
-            <tm-button @click="handleFinish" color="#5B3FB1" :fontSize="34" :disabled="!selectItems.length"
-              :margin="[10]" :shadow="0" size="small" :width="selectItems.length ? 162 : 116"
-              :label="selectItems.length ? `完成(${selectItems.length})` : '完成'">
-            </tm-button>
-          </div>
-        </template>
-      </tm-navbar>
-    </div>
-    <div class="root">
-      <div class="searchRoot">
-        <tm-input placeholder="请输入…" color="#F9F9FD" :round="1" prefix="tmicon-search" prefixColor="#46299D"></tm-input>
-      </div>
-      <div class="contentRoot">
-        <chatItem v-for="(item, index) in items" :key="item.index_name" :index="index" :data="item"
-          :isMultiSelect="isMultiSelect" @itemClick="itemClick" />
-      </div>
-    </div>
-    <tm-modal v-model:show="showWin" :height="forwardModalHeight" :round="4" okColor="#FFFFFF" @ok="handleOk"
-      @cancel="handleCancel">
-      <template v-slot:title>
-        <div class="w-full pl-[30rpx] leading-[48rpx] mt-[30rpx] font-bold text-[32rpx]">
-          发送给:
-        </div>
-      </template>
-      <template v-slot:default>
-        <div class="pl-[22rpx] pr-[32rpx] pt-[10rpx] flex items-center justify-start flex-wrap">
-          <div v-if="selectItemsModal.length > 1" v-for="item in selectItemsModal"
-            class="w-1/4 mt-[20rpx] flex flex-col items-center justify-center">
-            <div class="w-[96rpx] h-[96rpx] rounded-[60rpx] flex-center">
-              <tm-image :width="96" :height="96" :round="12" :src="item.avatar"></tm-image>
-            </div>
-            <div class="mt-[8rpx] text-[#666666] text-[24rpx] w-[94rpx] truncate">{{ item.name }}</div>
-          </div>
-          <div v-else class="w-full flex items-center justify-start">
-            <div class="w-[96rpx] h-[96rpx] rounded-[60rpx] flex-center">
-              <tm-image :width="96" :height="96" :round="12" :src="selectItemsModal[0].avatar"></tm-image>
-            </div>
-            <div class="ml-[16rpx] text-[#161616] text-[32rpx] font-bold ">{{ selectItemsModal[0].name }}</div>
-          </div>
-        </div>
-      </template>
-    </tm-modal>
+      </tm-modal>
+    </ZPaging>
   </div>
 </template>
 <script setup>
-import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
-import { onShow, onLoad } from "@dcloudio/uni-app";
-import { useChatList } from "@/store/chatList/index.js";
-import { useAuth } from "@/store/auth";
+import customInput from '@/components/custom-input/custom-input.vue'
+import avatarModule from '@/components/avatar-module/index.vue'
+import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
+import customBtn from '@/components/custom-btn/custom-btn.vue'
+import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
+import { onShow, onLoad } from '@dcloudio/uni-app'
+import { useChatList } from '@/store/chatList/index.js'
+import { useAuth } from '@/store/auth'
 import { useTalkStore, useUserStore, useDialogueStore } from '@/store'
-import chatItem from './components/chatItem.vue';
-import addCircle from "@/static/image/chatList/addCircle.png";
+import chatItem from './components/chatItem.vue'
+import addCircle from '@/static/image/chatList/addCircle.png'
 import lodash from 'lodash'
 
 const talkStore = useTalkStore()
@@ -87,13 +136,13 @@ const items = ref([])
 // })
 
 const selectItems = computed(() => {
-  return items.value.filter(item => item.isCheck)
+  return items.value.filter((item) => item.isCheck)
 })
 
 const selectItemsModal = ref([])
 
 const itemClick = (item) => {
-  console.log(item);
+  console.log(item)
   if (isMultiSelect.value) {
     item.isCheck = !item.isCheck
     return false
@@ -104,7 +153,7 @@ const itemClick = (item) => {
 }
 
 const handleFinish = () => {
-  console.log(selectItems.value);
+  console.log(selectItems.value)
   selectItemsModal.value = selectItems.value
   if (selectItemsModal.value.length > 4) {
     forwardModalHeight.value = 560
@@ -123,7 +172,6 @@ const handleClose = () => {
 const handleOk = () => {
   let msg_ids = dialogueStore.forwardMessages.map((item) => item.msg_id)
 
-
   let user_ids = []
   let group_ids = []
 
@@ -139,23 +187,27 @@ const handleOk = () => {
     mode: dialogueStore.forwardType,
     message_ids: msg_ids,
     uids: user_ids,
-    gids: group_ids
+    gids: group_ids,
   })
 
   uni.navigateBack()
 }
 
 const handleCancel = () => {
-  console.log('cancel');
+  console.log('cancel')
 }
 
-watch(() => talkStore, (newValue, oldValue) => {
-  console.log(talkStore);
-
-}, { deep: true, immediate: true })
+watch(
+  () => talkStore,
+  (newValue, oldValue) => {
+    console.log(talkStore)
+  },
+  { deep: true, immediate: true },
+)
 
 onMounted(() => {
   talkStore.loadTalkList()
+  console.log(talkStore.talkItems)
   items.value = lodash.cloneDeep(talkStore.talkItems)
 })
 onUnmounted(() => {
@@ -164,24 +216,20 @@ onUnmounted(() => {
 })
 </script>
 <style scoped lang="scss">
-uni-page-body,
-page {
+::v-deep .zp-paging-container-content {
   height: 100%;
+  display: flex;
 }
 
-.outer-layer {
-  overflow-y: auto;
+.choose-chat {
   flex: 1;
-  background-image: url("@/static/image/clockIn/z3280@3x.png");
-  background-size: cover;
-  padding: 0 32rpx 20rpx 32rpx;
+  padding: 20rpx 32rpx;
   display: flex;
   flex-direction: column;
-}
-
-.root {
-  flex: 1;
-  padding: 20rpx 0;
+  background-image: url('@/static/image/clockIn/z3280@3x.png');
+  background-size: cover;
+  background-position: bottom center;
+  background-attachment: fixed;
 }
 
 .searchRoot {
@@ -195,33 +243,38 @@ page {
 }
 
 .btnBox {
-  :deep(.button) {
-    &[disabled="true"] {
-      background-color: #F3F3F3 !important;
-      color: #BABABA !important;
-    }
+  ::v-deep .custom-btn-class {
+    padding: 6rpx 24rpx !important;
+    width: unset !important;
+    min-width: unset !important;
+    height: unset !important;
+  }
+  ::v-deep .wd-button__text {
+    font-size: 34rpx !important;
+    font-weight: 400 !important;
+    line-height: 48rpx !important;
   }
 }
 
 :deep(.noNvueBorder.round-bl-4) {
-  border-top: 1rpx solid #E7E7E7 !important;
-  background-color: #FFFFFF !important;
+  border-top: 1rpx solid #e7e7e7 !important;
+  background-color: #ffffff !important;
 
   uni-text {
-    color: #1A1A1A !important;
+    color: #1a1a1a !important;
     font-size: 32rpx !important;
     line-height: 48rpx !important;
   }
 }
 
 :deep(.noNvueBorder.round-br-4) {
-  border-top: 1rpx solid #E7E7E7 !important;
-  border-left: 1rpx solid #E7E7E7 !important;
-  background-color: #FFFFFF !important;
+  border-top: 1rpx solid #e7e7e7 !important;
+  border-left: 1rpx solid #e7e7e7 !important;
+  background-color: #ffffff !important;
 
   uni-text {
     font-weight: bold;
-    color: #46299D !important;
+    color: #46299d !important;
     font-size: 32rpx !important;
     line-height: 48rpx !important;
   }
diff --git a/src/uni_modules/tmui/locale/zh-Hans.json b/src/uni_modules/tmui/locale/zh-Hans.json
index 89a6db3..c4b989c 100644
--- a/src/uni_modules/tmui/locale/zh-Hans.json
+++ b/src/uni_modules/tmui/locale/zh-Hans.json
@@ -144,5 +144,8 @@
   "choose.deps.nextLevel": "下级",
   "statistics.selected.deps": "已选择的部门数",
   "chat.manage.addMembers": "添加群成员",
-  "pageTitle.select.groupType": "选择群类型"
+  "pageTitle.select.groupType": "选择群类型",
+  "pageTitle.select.shareChat": "选择一个聊天",
+  "button.multiple.choice": "多选",
+  "button.text.close": "关闭"
 }