uniIM/pages/group/del-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"></checkbox>
              <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.5rem;position: fixed;width: 100%;">
      <button class="cu-btn bg-red lg margin-top" style="width: 100%;margin-bottom: 30rpx;" @tap="del">删除</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import IndexBar from '@/components/IndexBar.vue'
import {getCurrentInstance, ref} from "vue";
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 Auth from "@/api/Auth";
const fontValue=ref(Auth.getfontSize());
//@ts-ignore
const {proxy} = getCurrentInstance();
const map = ref(new Map());
const avatar = ref('');
const groupId = ref('');
const groupName = ref('');
//选中的用户id
const ids = ref([]);
const checkedIds = ref<string[]>([]);
const checkboxChange = (e: any) => {
  ids.value = e.detail.value;
}

onLoad((opt) => {
  if (opt?.id) {
    groupId.value = opt?.id;
    GroupApi.get(groupId.value)
        .then((res: any) => {
          groupName.value = res.data.name;
          avatar.value = res.data.avatar;
          checkedIds.value.push(res.data.master)
          return GroupApi.users(groupId.value)
        })
        .then((res) => {
          map.value = Tools.listToMap(res.data);
        })
  }
})

const del = () => {
  GroupApi.deleteUsers(groupId.value, ids.value)
      .then(() => {
        return GroupApi.users(groupId.value)
      })
      .then((res) => {
        MessageUtils.message('操作成功');
        map.value = Tools.listToMap(res.data);
        uni.navigateTo({
          url: '/pages/group/group?id=' + groupId.value
        })
      })
      .catch((err) => {
        MessageUtils.error(err)
      })
}
</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>