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

2025-05-19 19:56:28 +08:00 · 2025-05-19 19:56:28 +08:00 · cecca6df9c
commit cecca6df9c
parent 19e4954484
3 changed files with 174 additions and 22 deletions
--- a/src/components/common/customModal.vue
+++ b/src/components/common/customModal.vue
@ -16,22 +16,26 @@
      </div>
    </template>
    <slot name="content"></slot>
-    <template #footer v-if="actionBtns.cancelBtn || actionBtns.confirmBtn">
-      <div class="custom-modal-btns">
+    <template #footer v-if="actionBtns?.cancelBtn || actionBtns?.confirmBtn">
+      <div
+        class="custom-modal-btns"
+        :style="props?.customModalBtnsStyle ? props.customModalBtnsStyle : ''"
+      >
        <customBtn
          color="#C7C7C9"
          style="width: 161px; height: 34px;"
          @click="handleCancel"
-          v-if="actionBtns.cancelBtn"
-          >取消</customBtn
+          v-if="actionBtns?.cancelBtn"
+          >{{ actionBtns?.cancelBtn?.text || '取消' }}</customBtn
        >
        <customBtn
          color="#46299D"
          style="width: 161px; height: 34px;"
          @click="handleConfirm"
-          :loading="state.confirmBtnLoading"
-          v-if="actionBtns.confirmBtn"
-          >确定</customBtn
+          :disabled="actionBtns?.confirmBtn?.disabled"
+          :loading="state.confirmBtnLoading && actionBtns?.confirmBtn?.doLoading"
+          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 = () => {
+  if (props.actionBtns?.cancelBtn?.hideModal) {
    show.value = false
+  }
  emit('cancel')
 }

 const handleConfirm = () => {
+  if (props.actionBtns?.confirmBtn?.doLoading) {
    state.confirmBtnLoading = true
+  }
  emit('confirm', closeLoading)
 }

--- a/src/components/group/GroupPanel.vue
+++ b/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,
-    cancelBtn: true
+    confirmBtn: {
+      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
-          class="b-box b-box-bottomBorder"
-          @click="showSearchRecordByConditionModal"
-          style="cursor: pointer;"
-        >
-          <div class="block">
+        <div class="b-box b-box-bottomBorder">
+          <div class="block" @click="showSearchRecordByConditionModal" style="cursor: pointer;">
            <div class="title">查找聊天记录</div>
            <img class="icon-right" src="@/assets/image/icon/arrow-right-grey.png" alt="" />
          </div>
--- a/src/views/message/inner/IndexContent.vue
+++ b/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>