uniIM/pages/group/add-users.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view>
    <cu-custom bgImage="/static/bg.png" :isBack="true">
      <template v-slot:content>
        <text class="text-black">{{ groupName }}</text>
      </template>
    </cu-custom>
    <index-bar :indexMap="map">
      <checkbox-group class="block" @change="checkboxChange">
        <view v-for="(item,key) in map.keys()" :key="key" :class="'indexItem-' + item" :id="'indexes-' + item"
              :data-index="item">
          <view class="padding">{{ item }}</view>
          <view class="cu-list menu-avatar no-padding">
            <view class="cu-item" v-for="(user,sub) in map.get(item)" :key="sub">
              <checkbox class="checkbox" :value="user.id" :disabled="checkedIds.indexOf(user.id)>-1"/>
              <image class="cu-avatar radius lg" :src="user.avatar"></image>
              <view class="content">
                <view class="text-black text-bold">{{ user.name }}</view>
                <view class="text-black text-sm">
                  {{ user.name }}
                </view>
              </view>
            </view>
          </view>
        </view>
		<view style="height: 140rpx;"></view>
      </checkbox-group>
    </index-bar>
    <view class="cu-form-group margin-top text-center" style="bottom:0;position: fixed;width: 100%;">
      <button class="cu-btn bg-cyan lg margin-top" style="width: 100%;margin-bottom: 30rpx;" @tap="save">提交</button>
    </view>

  </view>
</template>

<script setup lang="ts">
import {getCurrentInstance, ref} from "vue";
import FriendApi from "@/api/FriendApi";
import Tools from "@/utils/Tools";
import CuCustom from '@/colorui/components/cu-custom.vue'
import GroupApi from "@/api/GroupApi";
import MessageUtils from "@/utils/MessageUtils";
import {onLoad} from '@dcloudio/uni-app';
import type User from "@/mode/User";
import IndexBar from '@/components/IndexBar.vue'
import ChatType from "@/utils/ChatType";
import MessageType from "@/utils/MessageType";
import SendCode from "@/utils/SendCode";
import {useWsStore} from "@/store/WsStore";
import {useUserStore} from "@/store/userStore";
import VimAvatar from "@/components/VimAvatar.vue";
import Auth from "@/api/Auth";
const fontValue=ref(Auth.getfontSize());

//@ts-ignore
const {proxy} = getCurrentInstance();
const userStore = useUserStore();
const map = ref(new Map());
const hidden = ref(true);
const avatar = ref('');
const groupId = ref('');
const groupName = ref('');
const master = ref('');
//选中的用户id
const ids = ref([]);
const checkedIds = ref([]);
const user = userStore.getUser()
const checkboxChange = (e: any) => {
  ids.value = e.detail.value;
}

onLoad((opt) => {
  const gId = opt?.id;
  if (gId) {
    groupId.value = gId;
    GroupApi.get(groupId.value)
        .then((res) => {
          groupName.value = res.data.name;
          master.value = res.data.master;
          avatar.value = res.data.avatar;
          return GroupApi.users(groupId.value)
        })
        .then((res) => {
          checkedIds.value = res.data.map((item: User) => {
            return item.id;
          });
        })
  }
})

const loadFriends = () => {
  FriendApi.friends().then(res => {
    map.value = Tools.listToMap(res.data);
  })
}

const loadUsers = () => {
  GroupApi.users(groupId.value)
      .then((res) => {
        checkedIds.value = res.data.map((item: User) => {
          return item.id;
        });
        uni.navigateTo({
          url: '/pages/group/group?id=' + groupId.value
        })
      })
      .catch((err) => {
        MessageUtils.error(err)
      })
}

const save = () => {
  if (ids.value.length > 0) {
    GroupApi.addUsers(groupId.value, ids.value)
        .then((res) => {
          if (res.data.length > 0) {
            loadUsers();
          } else {
            MessageUtils.message('请等待审核');
            if (user) {
              notifyMaster(master.value, user.id)
            }
          }
        })
  }
}
/**
 * 通知群主
 * @param masterId 群主id
 * @param fromId 发送人
 */
const notifyMaster = (masterId: string, fromId: string) => {
  if (masterId) {
    const sendInfo = {
      code: SendCode.GROUP_VALIDATE,
      message: {
        mine: true,
        fromId: fromId,
        chatId: masterId,
        type: ChatType.FRIEND,
        messageType: MessageType.text,
        content: '',
        timestamp: new Date().getTime()
      }
    }
    useWsStore().send(JSON.stringify(sendInfo))
  }
}
loadFriends();
</script>

<style scoped>

.cu-list.menu-avatar > .cu-item > .cu-avatar {
  left: 3.9375rem;
}

.cu-list.menu-avatar > .cu-item .content {
  left: 7.5625rem;
}

.cu-list.menu-avatar > .cu-item .checkbox {
  left: 1rem;
  position: absolute;
}
</style>