chat-app/src/pages/chatSettings/groupManage/manageNotice.vue

<template>
  <div class="outer-layer manage-notice-page">
    <div class="root">
      <ZPaging ref="zPaging" :show-scrollbar="false">
        <template #top>
          <customNavbar
            :hideBack="state.editMode === 3 ? false : true"
            :title="$t('chat.settings.groupNotice')"
          >
            <template #left v-if="state.editMode !== 3">
              <div class="nav-bar-cancel-btn">
                <span class="text-[34rpx] font-regular" @click="toPrevPage">
                  {{ $t('cancel') }}
                </span>
              </div>
            </template>
            <template #right>
              <div
                v-if="state.editMode !== 3"
                class="nav-bar-done-btn"
                :class="state.canDoComplete ? 'nav-bar-done-btn-can-do' : ''"
                @click="showCompleteModel"
              >
                <span class="text-[34rpx] font-regular">
                  {{ $t('button.text.done') }}
                </span>
              </div>
              <div
                class="nav-bar-edit-btn"
                v-if="state.editMode === 3"
                @click="changeToEditMode"
              >
                <span class="text-[34rpx] font-regular">
                  {{ $t('groupNotice.mode.edit') }}
                </span>
              </div>
            </template>
          </customNavbar>
        </template>
        <div class="notice-text-area">
          <div class="notice-view-area">
            <div class="notice-view-info" v-if="state.editMode !== 1">
              <div class="notice-creater-avatar">
                <img :src="state?.groupNoticeObj?.avatar" />
              </div>
              <div class="notice-creater-info">
                <span class="text-[32rpx] font-medium">
                  {{ state?.groupNoticeObj?.updater_name }}
                </span>
                <span class="text-[24rpx] font-medium notice-create-date">
                  {{ state?.groupNoticeObj?.updated_at }}
                </span>
              </div>
            </div>
            <div class="notice-view-content" v-if="state.editMode === 3">
              <span class="text-[32rpx] font-regular">
                {{ state?.groupNoticeObj?.content }}
              </span>
            </div>
            <wd-textarea
              size="large"
              v-if="state.editMode !== 3"
              v-model="state.groupNotice"
              :placeholder="$t('input.placeholder.enter')"
              :maxlength="500"
              :show-word-limit="true"
              @input="inputGroupNotice"
            />
          </div>
        </div>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import useConfirm from '@/components/x-confirm/useConfirm.js'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { reactive, computed, onMounted } from 'vue'
import { useGroupStore, useDialogueStore } from '@/store'
import {
  ServeEditGroupNotice,
  ServeDeleteGroupNotice,
} from '@/api/group/index.js'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const { showConfirm } = useConfirm()
const groupStore = useGroupStore()
const groupParams = reactive({
  groupNotice: computed(() => groupStore.groupNotice),
})
const dialogueStore = useDialogueStore()
const dialogueParams = reactive({
  receiver_id: computed(() => dialogueStore.talk.receiver_id),
})

const state = reactive({
  groupNoticeObj: null, //群公告信息
  groupNotice: '', //群公告
  canDoComplete: false, //是否可以点击完成按钮
  editMode: 1, // 1：新增；2：修改；3：查看
})

onMounted(() => {
  console.log(groupParams.groupNotice)
  if (groupParams?.groupNotice?.length > 0) {
    state.editMode = 3
    state.groupNoticeObj = groupParams.groupNotice[0]
    inputGroupNotice(groupParams?.groupNotice[0]?.content)
  }
})

//点击返回上一页
const toPrevPage = () => {
  if (state.groupNotice) {
    showConfirm({
      content: t('groupNotice.quit.edit'),
      contentText: t('groupNotice.continue.edit'),
      confirmText: t('groupNotice.continue.edit'),
      cancelText: t('groupNotice.confirm.quit'),
      onConfirm: () => {},
      onCancel: () => {
        if (state.editMode === 2) {
          state.editMode = 3
        } else {
          uni.navigateBack({
            delta: 1,
          })
        }
      },
    })
  } else {
    uni.navigateBack({
      delta: 1,
    })
  }
}

//输入群公告
const inputGroupNotice = (e) => {
  state.groupNotice = e
  if (e.trim() || state.editMode === 2) {
    state.canDoComplete = true
  } else {
    state.canDoComplete = false
  }
}

//点击显示完成群公告弹窗
const showCompleteModel = () => {
  if (!state.canDoComplete) {
    return
  }
  showConfirm({
    content: state.groupNotice
      ? t('groupNotice.publish.prompt')
      : t('groupNotice.clear.prompt'),
    contentText: state.groupNotice
      ? t('prompt.confirm.publish')
      : t('groupNotice.confirm.clear'),
    confirmText: state.groupNotice
      ? t('prompt.confirm.publish')
      : t('groupNotice.confirm.clear'),
    cancelText: t('cancel'),
    onConfirm: () => {
      if (state.groupNotice) {
        let params = {
          notice_id: state?.groupNoticeObj?.id || 0,
          group_id: dialogueParams.receiver_id,
          title: '',
          content: state.groupNotice,
          is_top: 0,
          is_confirm: 0,
        }
        console.log(params)
        const resp = ServeEditGroupNotice(params)
        resp.then(({ code, data }) => {
          console.log(data)
          if (code == 200) {
            groupStore.updateGroupNotice([data])
            uni.navigateBack({
              delta: 1,
            })
          } else {
          }
        })
        resp.catch(() => {})
      } else {
        let params = {
          notice_id: state?.groupNoticeObj?.id,
          group_id: dialogueParams.receiver_id,
        }
        console.log(params)
        const resp = ServeDeleteGroupNotice(params)
        resp.then(({ code, data }) => {
          console.log(data)
          if (code == 200) {
            groupStore.updateGroupNotice([])
            uni.navigateBack({
              delta: 1,
            })
          } else {
          }
        })
        resp.catch(() => {})
      }
    },
    onCancel: () => {},
  })
}

//点击切换为编辑模式
const changeToEditMode = () => {
  state.editMode = 2
}
</script>
<style scoped lang="scss">
.outer-layer {
  flex: 1;
  background-image: url('@/static/image/clockIn/z3280@3x.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.manage-notice-page {
  ::v-deep .zp-paging-container-content {
    height: 100%;
  }
  .nav-bar-cancel-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 42rpx;
    span {
      line-height: 40rpx;
    }
  }
  .nav-bar-done-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 36rpx 0 0;
    padding: 6rpx 24rpx;
    background-color: #f3f3f3;
    border-radius: 8rpx;
    span {
      color: #bababa;
      line-height: 40rpx;
    }
  }

  .nav-bar-done-btn-can-do {
    background-color: $theme-primary;
    span {
      color: #fff;
    }
  }

  .nav-bar-edit-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 36rpx 0 0;
    padding: 6rpx 0 6rpx 24rpx;
    border-radius: 8rpx;
    span {
      line-height: 40rpx;
    }
  }

  .notice-text-area {
    display: flex;
    .notice-view-area {
      padding: 0 20rpx;
      background-color: #fff;
      border-radius: 8rpx;
      box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
      flex: 1;
      display: flex;
      flex-direction: column;
      .notice-view-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 32rpx 0;
        border-bottom: 1px solid $theme-border-color;
        .notice-creater-avatar {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 96rpx;
          height: 96rpx;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .notice-creater-info {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          margin: 0 0 0 30rpx;
          text {
            line-height: 44rpx;
          }
          .notice-create-date {
            color: #bababa;
            line-height: 34rpx;
            margin: 8rpx 0 0;
          }
        }
      }
      .notice-view-content {
        padding: 24rpx 0;
        span {
          line-height: 44rpx;
        }
      }
    }
  }

  .notice-text-area {
    padding: 20rpx 32rpx;
    height: 100%;
    display: flex;
    flex: 1;

    ::v-deep .wd-textarea {
      // height: 100%;
      display: flex;
      flex: 1;
      padding: 22rpx 0 0;
    }

    ::v-deep .wd-textarea__value {
      padding-right: 0;
      // height: 100%;
      display: flex;
      flex: 1;
    }

    ::v-deep .wd-textarea__inner {
      height: 100%;
    }
  }
}
</style>