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>
          <tm-navbar :hideBack="true" hideHome title="" :leftWidth="220">
            <template #left>
              <div class="nav-bar-cancel-btn">
                <span class="text-[34rpx] font-regular" @click="toPrevPage">
                  {{ $t('cancel') }}
                </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
                class="nav-bar-done-btn"
                :class="state.canDoComplete ? 'nav-bar-done-btn-can-do' : ''"
              >
                <span class="text-[34rpx] font-regular">
                  {{ $t('button.text.done') }}
                </span>
              </div>
            </template>
          </tm-navbar>
        </template>
        <div class="notice-text-area">
          <wd-textarea
            style="height: 100%;"
            v-model="state.groupNotice"
            :placeholder="$t('input.placeholder.enter')"
            :maxlength="500"
            :show-word-limit="true"
            @input="inputGroupNotice"
          />
        </div>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { reactive } from 'vue'

const state = reactive({
  groupNotice: '', //群公告
  canDoComplete: false, //是否可以点击完成按钮
})

//点击返回上一页
const toPrevPage = () => {
  uni.navigateBack({
    delta: 1,
  })
}

//输入群公告
const inputGroupNotice = (e) => {
  state.groupNotice = e
  if (e.trim()) {
    state.canDoComplete = true
  } else {
    state.canDoComplete = false
  }
}
</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;
    }
  }

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

    ::v-deep .wd-textarea {
      height: 100%;
    }

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

    ::v-deep .wd-textarea__inner {
      height: 100%;
    }

    ::v-deep .uni-textarea-compute {
      div {
        font-size: 32rpx;
        font-weight: 400;
        line-height: 44rpx;
      }
    }
  }
}
</style>