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

<template>
  <div class="outer-layer manage-group-info-page">
    <div class="root">
      <ZPaging ref="zPaging" :show-scrollbar="false">
        <template #top>
          <customNavbar
            :title="$t('chat.settings.editGroupName')"
          ></customNavbar>
        </template>
        <div class="edit-group-info">
          <div class="group-avatar">
            <avatarModule
              :mode="2"
              :avatar="groupParams?.groupInfo?.avatar"
              :groupType="groupParams?.groupInfo?.group_type"
              :customStyle="{
                width: '192rpx',
                height: '192rpx',
              }"
            ></avatarModule>
          </div>
          <div class="group-name">
            <span class="text-[28rpx] font-medium">
              {{ $t('chat.settings.groupName') }}
            </span>
            <div class="groupNameInputArea">
              <input
                class="groupNameInput"
                :placeholder="$t('edit.groupName.placeholder')"
                placeholder-style="color:#B4B4B4;font-size:28rpx;font-weight:500;line-height:40rpx;"
                v-model="state.groupName"
                @input="handleGroupNameInput"
                maxlength="20"
              />
              <img
                v-if="state.groupName"
                class="groupName-input-clearBtn"
                src="/src/static/image/chatSettings/clear-btn.png"
                @click="clearGroupNameInput"
              />
            </div>
          </div>
        </div>
        <template #bottom>
          <customBtn
            :isBottom="true"
            :btnText="$t('ok')"
            @clickBtn="confirmEdit"
          ></customBtn>
        </template>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import avatarModule from '@/components/avatar-module/index.vue'
import customBtn from '@/components/custom-btn/custom-btn.vue'
import { ServeEditGroup } from '@/api/group/index.js'
import { useGroupStore, useDialogueStore } from '@/store'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { onLoad } from '@dcloudio/uni-app'
import { reactive, computed } from 'vue'

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

const state = reactive({
  pageTitle: '', //页面标题
  groupName: '', //群名称
})

onLoad((options) => {
  console.log(options)
  state.groupName = groupParams.groupInfo.group_name
})

//点击清空群名称输入
const clearGroupNameInput = () => {
  state.groupName = ''
}
const handleGroupNameInput = (e) => {
  if (state.groupName.length > 20) {
    // 截取前20个字符
    state.groupName = state.groupName.slice(0, 20)
  }
}
//点击确认修改
const confirmEdit = () => {
  console.log(state.groupName)
  if (!state.groupName) {
    return
  }
  let params = {
    group_id: dialogueParams.receiver_id,
    group_name: state.groupName,
    avatar: groupParams.groupInfo.avatar,
  }
  console.log(params)
  const resp = ServeEditGroup(params)
  resp.then(({ code, data }) => {
    console.log(data)
    if (code == 200) {
      groupStore.updateGroupInfo({
        group_name: state.groupName,
      })
      dialogueStore.setDialogue({
        name: state.groupName,
        talk_type: dialogueParams.talk_type,
        receiver_id: dialogueParams.receiver_id,
      })
      uni.navigateBack({
        delta: 1,
      })
    } else {
    }
  })
  resp.catch(() => {})
}
</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;
}

.edit-group-info {
  .group-avatar {
    padding: 250rpx 0 88rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .group-name {
    padding: 0 32rpx;
    span {
      display: inline-block;
      padding: 0 32rpx 10rpx;
      color: $theme-text;
    }
    .groupNameInputArea {
      position: relative;
      .groupNameInput {
        background-color: #fff;
        height: 110rpx;
        box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
        padding: 0 74rpx 0 32rpx;
        color: #747474;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
      }
      .groupName-input-clearBtn {
        position: absolute;
        right: 22rpx;
        top: 40rpx;
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
</style>