新增群公告空页面和编辑页面，并处理对应的状态切换按钮

src/components/common/customModal.vue

@@ -10,28 +10,32 @@
             {{ title }}
           </template>
           <div class="custom-close-btn" v-if="customCloseBtn">
-            <img src="@/assets/image/icon/close-btn-grey.png" alt="" @click="handleCloseModal"/>
+            <img src="@/assets/image/icon/close-btn-grey.png" alt="" @click="handleCloseModal" />
           </div>
         </div>
       </div>
     </template>
     <slot name="content"></slot>
-    <template #footer v-if="actionBtns.cancelBtn || actionBtns.confirmBtn">
+    <template #footer v-if="actionBtns?.cancelBtn || actionBtns?.confirmBtn">
-      <div class="custom-modal-btns">
+      <div
+        class="custom-modal-btns"
+        :style="props?.customModalBtnsStyle ? props.customModalBtnsStyle : ''"
+      >
         <customBtn
           color="#C7C7C9"
           style="width: 161px; height: 34px;"
           @click="handleCancel"
-          v-if="actionBtns.cancelBtn"
+          v-if="actionBtns?.cancelBtn"
-          >取消</customBtn
+          >{{ actionBtns?.cancelBtn?.text || '取消' }}</customBtn
         >
         <customBtn
           color="#46299D"
           style="width: 161px; height: 34px;"
           @click="handleConfirm"
-          :loading="state.confirmBtnLoading"
+          :disabled="actionBtns?.confirmBtn?.disabled"
-          v-if="actionBtns.confirmBtn"
+          :loading="state.confirmBtnLoading && actionBtns?.confirmBtn?.doLoading"
-          >确定</customBtn
+          v-if="actionBtns?.confirmBtn"
+          >{{ actionBtns?.confirmBtn?.text || '确定' }}</customBtn
         >
       </div>
     </template>
@@ -63,6 +67,11 @@ const props = defineProps({
     // 是否显示自定义关闭按钮
     type: Boolean,
     default: false
+  },
+  customModalBtnsStyle: {
+    // 自定义按钮样式
+    type: String,
+    default: ''
   }
 })
 
@@ -74,12 +83,16 @@ const show = computed({
 })
 
 const handleCancel = () => {
-  show.value = false
+  if (props.actionBtns?.cancelBtn?.hideModal) {
+    show.value = false
+  }
   emit('cancel')
 }
 
 const handleConfirm = () => {
-  state.confirmBtnLoading = true
+  if (props.actionBtns?.confirmBtn?.doLoading) {
+    state.confirmBtnLoading = true
+  }
   emit('confirm', closeLoading)
 }
 

src/components/group/GroupPanel.vue

@@ -19,7 +19,12 @@ import UserCardModal from '@/components/user/UserCardModal.vue'
 const userStore = useUserStore()
 const { showUserInfoModal } = useInject()
 
-const emit = defineEmits(['close', 'to-talk', 'handleSearchRecordByConditionModalShow'])
+const emit = defineEmits([
+  'close',
+  'to-talk',
+  'handleSearchRecordByConditionModalShow',
+  'handleGroupNoticeModalShow'
+])
 const props = defineProps({
   gid: {
     type: Number,
@@ -59,8 +64,12 @@ const state = reactive({
   chatSettingOperateHint: '', // 提示信息
   chatSettingOperateSubHint: '', // 次要提示信息
   actionBtns: {
-    confirmBtn: true,
+    confirmBtn: {
-    cancelBtn: true
+      doLoading: true
+    },
+    cancelBtn: {
+      hideModal: true
+    }
   }, // 操作按钮
   showAllMember: false, // 是否显示全部成员
   openGroupMemberSearch: false, //是否开启群成员搜索
@@ -192,9 +201,11 @@ const showChatSettingOperateModal = (type: string) => {
   switch (type) {
     case 'clear':
       state.chatSettingOperateHint = '确定清空聊天记录'
+      state.chatSettingOperateSubHint = ''
       break
     case 'dismiss':
       state.chatSettingOperateHint = '确定解散本群'
+      state.chatSettingOperateSubHint = ''
       break
     case 'quit':
       state.chatSettingOperateHint = '确定退出群聊'
@@ -209,6 +220,7 @@ const showChatSettingOperateModal = (type: string) => {
   }
 }
 
+//点击显示查找聊天记录模态框
 const showSearchRecordByConditionModal = () => {
   emit('handleSearchRecordByConditionModalShow', true)
 }
@@ -243,6 +255,11 @@ const showMemberInfo = (memberItem: any) => {
   state.userInfo = memberItem
   state.isShowUserCardModal = true
 }
+
+//点击显示群公告模态框
+const showGroupNoticeModal = () => {
+  emit('handleGroupNoticeModalShow', true)
+}
 </script>
 <template>
   <section class="el-container is-vertical section">
@@ -402,7 +419,7 @@ const showMemberInfo = (memberItem: any) => {
         </div> -->
 
         <div class="b-box b-box-bottomBorder" style="padding: 0 0 12px;">
-          <div class="block">
+          <div class="block" @click="showGroupNoticeModal" style="cursor: pointer;">
             <div class="title">群公告</div>
             <!-- <div class="text"> -->
             <!-- <n-button type="primary" text> 更多 </n-button> -->
@@ -414,12 +431,8 @@ const showMemberInfo = (memberItem: any) => {
       </div>
 
       <div class="info-box">
-        <div
+        <div class="b-box b-box-bottomBorder">
-          class="b-box b-box-bottomBorder"
+          <div class="block" @click="showSearchRecordByConditionModal" style="cursor: pointer;">
-          @click="showSearchRecordByConditionModal"
-          style="cursor: pointer;"
-        >
-          <div class="block">
             <div class="title">查找聊天记录</div>
             <img class="icon-right" src="@/assets/image/icon/arrow-right-grey.png" alt="" />
           </div>

src/views/message/inner/IndexContent.vue

@@ -42,7 +42,24 @@ const state = reactive({
   }, //按条件搜索记录弹窗样式
   searchRecordByConditionText: '', //按条件搜索记录文本
   conditionTag: '', //当前条件标签
-  conditionType: '' //当前条件类型
+  conditionType: '', //当前条件类型
+  isShowGroupNoticeModal: false, //是否显示群公告模态框
+  customGroupNoticeModalStyle: {
+    width: '997px',
+    height: '740px'
+  }, //群公告模态框样式
+  groupNoticeModalActionBtns: {
+    confirmBtn: {
+      text: '编辑',
+      doLoading: false,
+      disabled: false
+    },
+    cancelBtn: false
+  }, //群公告模态框操作按钮
+  groupNoticeModalActionBtnsStyle: 'padding: 20px 0;', //群公告模态框操作按钮样式
+  groupNoticeInEdit: '', //编辑中的公告
+  groupNoticeEditMode: 3, //群公告编辑模式：2=编辑；3=查看
+  groupNoticeModalConfirmBtnEvent: 'edit' //群公告模态框确认按钮事件
 })
 
 const events = {
@@ -82,6 +99,48 @@ const changeConditionTag = (tag) => {
     state.conditionTag = ''
   }
 }
+
+// 群公告模态框确定按钮事件
+const handleGroupNoticeModalConfirm = () => {
+  if (state.groupNoticeModalConfirmBtnEvent === 'edit') {
+    //点击切换群公告编辑模式为编辑
+    state.groupNoticeEditMode = 2
+    state.groupNoticeModalActionBtns = {
+      confirmBtn: {
+        text: '完成',
+        doLoading: true,
+        disabled: true
+      },
+      cancelBtn: true
+    }
+  }
+}
+
+// 群公告模态框取消按钮事件
+const handleGroupNoticeModalCancel = () => {
+  if (state.groupNoticeModalConfirmBtnEvent === 'edit') {
+    //点击切换群公告编辑模式为查看
+    state.groupNoticeEditMode = 3
+    state.groupNoticeModalActionBtns = {
+      confirmBtn: {
+        text: '编辑',
+        doLoading: false,
+        disabled: false
+      },
+      cancelBtn: false
+    }
+  }
+}
+
+// 群公告模态框输入事件
+const handleGroupNoticeModalInput = (value) => {
+  console.log(value)
+  if (value.trim()) {
+    state.groupNoticeModalActionBtns.confirmBtn.disabled = false
+  } else {
+    state.groupNoticeModalActionBtns.confirmBtn.disabled = true
+  }
+}
 </script>
 
 <template>
@@ -164,12 +223,15 @@ const changeConditionTag = (tag) => {
       @close="state.isShowGroupAside = false"
       :talkType="talkParams.type"
       @handleSearchRecordByConditionModalShow="state.isShowSearchRecordByConditionModal = true"
+      @handleGroupNoticeModalShow="state.isShowGroupNoticeModal = true"
     />
   </n-drawer>
 
   <customModal
     v-model:show="state.isShowSearchRecordByConditionModal"
-    :title="`${talkParams.type === 1 ? '与' : ''}&quot;${talkParams.username}&quot;的聊天记录`"
+    :title="`${talkParams.type === 1 ? '与' : ''}&nbsp;&quot;${
+      talkParams.username
+    }&quot;&nbsp;的聊天记录`"
     :style="state.customSearchRecordByConditionModalStyle"
     :customCloseBtn="true"
     :closable="false"
@@ -239,6 +301,41 @@ const changeConditionTag = (tag) => {
       </div>
     </template>
   </customModal>
+
+  <customModal
+    v-model:show="state.isShowGroupNoticeModal"
+    :title="`&quot;${talkParams.username}&quot;&nbsp;的群公告`"
+    :style="state.customGroupNoticeModalStyle"
+    :customCloseBtn="true"
+    :closable="false"
+    :actionBtns="state.groupNoticeModalActionBtns"
+    :customModalBtnsStyle="state.groupNoticeModalActionBtnsStyle"
+    @confirm="handleGroupNoticeModalConfirm"
+    @cancel="handleGroupNoticeModalCancel"
+  >
+    <template #content>
+      <div class="group-notice-modal-content">
+        <div class="group-notice-text-area" v-if="state.groupNoticeEditMode === 2">
+          <n-input
+            v-model:value="state.groupNoticeInEdit"
+            type="textarea"
+            :autosize="{
+              minRows: 22,
+              maxRows: 22
+            }"
+            placeholder="请输入"
+            :maxlength="500"
+            :show-count="true"
+            @input="handleGroupNoticeModalInput"
+          />
+        </div>
+        <div class="group-notice-empty" v-if="state.groupNoticeEditMode === 3">
+          <img src="@/assets/image/chatList/search-empty.png" alt="" />
+          <span>暂无公告</span>
+        </div>
+      </div>
+    </template>
+  </customModal>
 </template>
 
 <style lang="less" scoped>
@@ -312,4 +409,33 @@ const changeConditionTag = (tag) => {
     }
   }
 }
+.group-notice-modal-content {
+  .group-notice-text-area {
+    :deep(.n-input-wrapper) {
+      padding: 20px 23px 15px;
+    }
+    :deep(.n-input-word-count) {
+      right: 23px;
+      bottom: 15px;
+    }
+  }
+  .group-notice-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 552px;
+    box-sizing: border-box;
+    img {
+      width: 160px;
+      height: 104px;
+    }
+    span {
+      font-size: 14px;
+      color: #999;
+      font-weight: 400;
+      margin: 14px 0 0;
+    }
+  }
+}
 </style>