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

<template>
  <div class="outer-layer select-members-page">
    <div class="root">
      <ZPaging ref="zPaging" :show-scrollbar="false">
        <template #top>
          <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
            <div class="navBar-title flex flex-col items-center justify-center">
              <span
                class="text-[34rpx] font-medium"
                v-if="state.manageType === 'silence'"
              >
                {{ $t('chat.manage.addSilenceMember') }}
              </span>
              <span
                class="text-[34rpx] font-medium"
                v-if="state.manageType === 'admin'"
              >
                {{ $t('chat.manage.addAdmin') }}
              </span>
            </div>
          </tm-navbar>
        </template>
        <div class="select-members">
          <div class="search-member">
            <customInput
              :searchText="state.searchText"
              @inputSearchText="inputSearchText"
            ></customInput>
          </div>
          <div class="member-list">
            <div
              class="member-list-each"
              v-for="(item, index) in dialogueParams?.memberList"
              :key="index"
            >
              <tm-checkbox-group v-model="item.checkArr">
                <selectMemberItem
                  :memberItem="item"
                  @clickItem="handleClickItem(item)"
                  :manageType="state.manageType"
                >
                  <template #left>
                    <tm-checkbox
                      :round="10"
                      color="#46299d"
                      :value="item.id"
                      :disabled="item.is_mute === 1"
                    ></tm-checkbox>
                  </template>
                </selectMemberItem>
              </tm-checkbox-group>
            </div>
          </div>
        </div>
        <template #bottom>
          <customBtn
            :isBottom="true"
            :btnText="$t('ok')"
            @clickBtn="confirmSilenceMember"
          ></customBtn>
        </template>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import customInput from '@/components/custom-input/custom-input.vue'
import selectMemberItem from '../components/select-member-item.vue'
import customBtn from '@/components/custom-btn/custom-btn.vue'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { computed, onMounted, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

import { useDialogueStore } from '@/store'

const dialogueStore = useDialogueStore()
const state = reactive({
  searchText: '', //搜索内容
  manageType: '', //管理类型
})
const dialogueParams = reactive({
  memberList: computed(() => {
    const lowerCaseSearchText = state?.searchText.toLowerCase()
    return dialogueStore.members.filter((item) =>
      state?.searchText
        ? item.nickname.toLowerCase().includes(lowerCaseSearchText)
        : true,
    )
  }),
  receiverId: computed(() => dialogueStore.talk.receiver_id),
})

onLoad((options) => {
  console.log(options)
  if (options.manageType) {
    state.manageType = options.manageType
  }
})

onMounted(() => {
  dialogueParams.memberList.forEach((ele) => {
    ele.checkArr = []
  })
})

//输入搜索文本
const inputSearchText = (e) => {
  console.log(e)
  state.searchText = e
}

//点击item
const handleClickItem = (item) => {
  dialogueParams.memberList.forEach((ele) => {
    if (ele.id == item.id) {
      ele.checkArr = ele.checkArr?.length > 0 ? [] : [item.id]
    }
  })
}

//点击确认要禁言的成员
const confirmSilenceMember = () => {
  let selectedUserIds = ''
  dialogueParams.memberList.forEach((ele) => {
    if (ele.checkArr?.length > 0) {
      if (!selectedUserIds) {
        selectedUserIds = ele.checkArr[0]
      } else {
        selectedUserIds += ',' + ele.checkArr[0]
      }
    }
  })
  console.log(selectedUserIds)
  if (selectedUserIds) {
    let params = {
      mode: 1, //1禁言2解禁
      group_id: dialogueParams.receiverId, //群id
      user_ids: selectedUserIds, //用户ids
    }
    console.log(params)
  }
}
</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;
}

.select-members {
  padding: 20rpx 32rpx;
  .search-member {
    padding: 22rpx 16rpx;
    background-color: #fff;
  }
}
</style>