uniIM/pages/group/transference.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">转让群</text>
      </template>
    </cu-custom>
    <index-bar :indexMap="map">
      <radio-group class="block" @change="radioChange">
        <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">
              <radio class="checkbox" :value="user.id" />
              <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>
      </radio-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-cyan lg margin-top" style="width: 100%;margin-bottom: 30rpx;" @tap="transference">确认转让</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());
//群id
const groupId = ref('');
//群主
const master = ref('');
//选中的用户id
const id = ref<string>();
const user = userStore.getUser()
const radioChange = (e: any) => {
  id.value = e.detail.value;
}

onLoad((opt) => {
  groupId.value = opt?.id;
  if (groupId.value) {
    GroupApi.get(groupId.value)
        .then((res) => {
          master.value = res.data.master;
          return GroupApi.users(groupId.value)
        })

        .then((res) => {
          const list = res.data.filter((item: User) => item.id !== master.value);
          map.value = Tools.listToMap(list);
        })
  }
})

/**
 * 转让群
 */
const transference = () => {
  if (id.value) {
    GroupApi.transference(groupId.value,id.value).then(() => {
      uni.navigateBack()
    })
  }
}

/**
 * 通知群主
 * @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))
  }
}

</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>