封装按字母选人页面为自定义组件

src/pages/chatSettings/components/selectMemberByAlphabet.vue

@@ -0,0 +1,669 @@
+<template>
+  <div class="select-member-by-alphabet">
+    <ZPaging
+      ref="zPaging"
+      :show-scrollbar="false"
+      :use-virtual-list="true"
+      :virtual-list-col="5"
+      :refresher-enabled="false"
+      :loading-more-enabled="false"
+      @scroll="onScroll"
+      :fixed="false"
+      :height="props?.selectAreaHeight"
+    >
+      <div class="select-members">
+        <div class="search-member" v-if="props?.manageType !== 'removeMembers'">
+          <customInput
+            :searchText="state.searchText"
+            @inputSearchText="inputSearchText"
+          ></customInput>
+        </div>
+        <div
+          class="member-list"
+          :style="{
+            padding: props?.manageType === 'searchRecord' ? '20rpx 0 0' : '',
+          }"
+        >
+          <div class="member-list-alphabet-anchor-point">
+            <div
+              class="member-list-alphabet-anchor-point-each"
+              v-for="(alphabetItem, alphabetIndex) in state?.alphabet"
+              :key="alphabetIndex"
+              :style="{
+                margin: state?.alphabet?.length > 17 ? '0' : '',
+              }"
+              @click.stop="scrollToView(alphabetItem)"
+            >
+              <span
+                class="text-[32rpx] font-regular"
+                :style="{
+                  color:
+                    state.currentAlphabet === alphabetItem ? '#7A58DE' : '',
+                }"
+              >
+                {{ alphabetItem }}
+              </span>
+            </div>
+          </div>
+          <div
+            class="member-list-alphabet"
+            v-for="(alphabetItem, alphabetIndex) in state.resultMemberList"
+            :key="alphabetIndex"
+          >
+            <div
+              class="member-list-alphabet-key"
+              :style="{
+                padding:
+                  props?.manageType === 'searchRecord' ||
+                  props?.manageType === 'removeMembers'
+                    ? '10rpx 30rpx'
+                    : '',
+              }"
+              v-if="alphabetItem?.memberList?.length > 0"
+              :id="alphabetItem.key"
+              :ref="
+                (el) => {
+                  if (el) alphabetElementRefs[alphabetIndex] = el
+                }
+              "
+            >
+              <span class="text-[32rpx] font-regular">
+                {{ alphabetItem.key }}
+              </span>
+            </div>
+            <div v-if="alphabetItem?.memberList?.length > 0">
+              <div
+                class="member-list-each"
+                v-for="(item, index) in alphabetItem?.memberList"
+                :key="index"
+              >
+                <tm-checkbox-group v-model="item.checkArr">
+                  <selectMemberItem
+                    :groupType="groupParams.groupInfo.group_type"
+                    :memberItem="item"
+                    @clickItem="handleClickItem(item)"
+                    :manageType="props?.manageType"
+                    :itemStyle="
+                      props?.manageType === 'searchRecord' ||
+                      props?.manageType === 'removeMembers'
+                        ? 'list'
+                        : 'card'
+                    "
+                  >
+                    <template #left v-if="props?.manageType !== 'searchRecord'">
+                      <div
+                        v-if="
+                          props?.manageType === 'removeMembers' && item?.is_mine
+                        "
+                      >
+                        <tm-checkbox
+                          color="#fff"
+                          :transprent="true"
+                          :border="0"
+                          :disabled="true"
+                        ></tm-checkbox>
+                      </div>
+                      <tm-checkbox
+                        v-if="
+                          !(
+                            props?.manageType === 'removeMembers' &&
+                            item?.is_mine
+                          )
+                        "
+                        :round="10"
+                        :color="
+                          item?.checkArr?.length > 0 ? '#46299d' : '#B4B4B4'
+                        "
+                        :outlined="
+                          item?.checkArr?.length > 0 ||
+                          (props?.manageType === 'silence' &&
+                            item.is_mute === 1) ||
+                          (props?.manageType === 'admin' &&
+                            (item.leader === 1 || item.leader === 2))
+                            ? false
+                            : true
+                        "
+                        :value="item.id"
+                        :disabled="
+                          (props?.manageType === 'silence' &&
+                            item.is_mute === 1) ||
+                          (props?.manageType === 'admin' &&
+                            (item.leader === 1 || item.leader === 2))
+                        "
+                        @change="checkBoxChange"
+                      ></tm-checkbox>
+                    </template>
+                  </selectMemberItem>
+                </tm-checkbox-group>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ZPaging>
+  </div>
+</template>
+<script setup>
+import customInput from '@/components/custom-input/custom-input.vue'
+import selectMemberItem from '../components/select-member-item.vue'
+import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
+import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
+import {
+  computed,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+  nextTick,
+  defineProps,
+  defineEmits,
+} from 'vue'
+import {
+  ServeGroupNoSpeak,
+  ServeEditGroupAdmin,
+  ServeGroupAssignAdmin,
+  ServeRemoveMembersGroup,
+} from '@/api/group/index.js'
+import { useDialogueStore, useGroupStore, useGroupTypeStore } from '@/store'
+
+const emits = defineEmits(['updateSelectedMembersNum'])
+
+const zPaging = ref()
+useZPaging(zPaging)
+
+const groupStore = useGroupStore()
+const groupParams = reactive({
+  groupInfo: computed(() => groupStore.groupInfo),
+})
+
+const groupTypeStore = useGroupTypeStore()
+const groupTypeParams = reactive({
+  departmentAllPositions: computed(() => groupTypeStore.departmentAllPositions),
+})
+
+const dialogueStore = useDialogueStore()
+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),
+})
+
+const props = defineProps({
+  manageType: {
+    //管理类型
+    type: String,
+    default: '',
+  },
+  isCreateDepGroup: {
+    //是否是创建部门群
+    type: Number,
+    default: 0,
+  },
+  selectAreaHeight: {
+    //选择区域高度
+    type: String,
+    default: '',
+  },
+})
+
+const state = reactive({
+  searchText: '', //搜索内容
+  alphabet: [], //A-Z列表
+  currentAlphabet: 'A', //当前A-Z位置
+  resultMemberList: [], //按A-Z整理后的人员列表
+  isAssign: false, //是否指定view
+  scrollDirection: '', //当前列表滚动方向
+})
+
+watch(
+  () => dialogueParams?.memberList,
+  (newMemberList) => {
+    assembleAlphabetMemberList(newMemberList)
+  },
+  { deep: true },
+)
+
+watch(
+  () => groupParams?.groupInfo,
+  (newGroupInfo) => {
+    assembleAlphabetMemberList(dialogueParams?.memberList)
+  },
+  { deep: true },
+)
+
+//获取A-Z tag元素
+const alphabetElementRefs = ref([])
+//观察者
+let observer
+
+onMounted(() => {
+  if (props?.manageType) {
+    assembleAlphabetMemberList(dialogueParams?.memberList)
+  }
+  if (props?.isCreateDepGroup) {
+    assembleAlphabetMemberList()
+  }
+
+  dialogueParams.memberList.forEach((ele) => {
+    ele.checkArr = []
+  })
+
+  const options = {
+    root: null, // 使用浏览器窗口作为根容器
+    threshold: 1.0, // 当元素100%离开视口时触发
+  }
+  observer = new IntersectionObserver(handleIntersection, options)
+  nextTick(() => {
+    watch(
+      alphabetElementRefs,
+      (newAlphabetElementRefs) => {
+        if (Array.isArray(newAlphabetElementRefs)) {
+          newAlphabetElementRefs.forEach((el, index) => {
+            observeElement(el, index)
+          })
+        }
+      },
+      { immediate: true, deep: true },
+    )
+    if (alphabetElementRefs.value.length > 0) {
+      alphabetElementRefs.value.forEach((el, index) =>
+        observeElement(el, index),
+      )
+    }
+  })
+})
+
+//观察元素
+const observeElement = (el, index) => {
+  if (el && observer) {
+    observer.observe(el)
+  }
+}
+
+// 观察者函数
+const handleIntersection = (entries) => {
+  if (state.isAssign) {
+    state.isAssign = false
+    return
+  }
+  entries.forEach((entry) => {
+    if (!entry.isIntersecting && state.scrollDirection === 'down') {
+      state.currentAlphabet = entry.target.id
+    } else if (entry.isIntersecting && state.scrollDirection === 'up') {
+      if (state?.alphabet?.length > 1) {
+        state?.alphabet.forEach((item, index) => {
+          if (item === entry.target.id && index > 0) {
+            state.currentAlphabet = state?.alphabet[index - 1]
+          }
+        })
+      } else {
+        state.currentAlphabet = entry.target.id
+      }
+    }
+  })
+}
+
+//输入搜索文本
+const inputSearchText = (e) => {
+  // console.log(e)
+  state.searchText = e
+}
+
+//点击item
+const handleClickItem = (item) => {
+  if (
+    (props?.manageType === 'silence' && item.is_mute === 1) ||
+    (props?.manageType === 'admin' &&
+      (item.leader === 1 || item.leader === 2)) ||
+    (props?.manageType === 'removeMembers' && item.is_mine)
+  ) {
+    return
+  }
+  let itemList = dialogueParams.memberList
+  if (
+    props?.manageType === 'admin' &&
+    (groupParams.groupInfo.group_type == 2 ||
+      groupParams.groupInfo.group_type == 4 ||
+      props?.isCreateDepGroup === 1)
+  ) {
+    itemList = state.resultMemberList[0].memberList
+  }
+  itemList.forEach((ele) => {
+    if (ele.id == item.id) {
+      ele.checkArr = ele.checkArr?.length > 0 ? [] : [item.id]
+      if (ele.checkArr?.length > 0) {
+        emits('updateSelectedMembersNum', 1)
+      } else {
+        emits('updateSelectedMembersNum', -1)
+      }
+    }
+  })
+}
+
+//组装A-Z排序的人员列表
+const assembleAlphabetMemberList = async (newMemberList) => {
+  if (
+    props?.manageType === 'searchRecord' ||
+    props?.manageType === 'removeMembers'
+  ) {
+    const resultMemberList = ref([])
+    const alphabet = Array.from({ length: 26 }, (_, i) =>
+      String.fromCharCode(i + 65),
+    )
+    let tempAlphabet = []
+    alphabet.forEach((letter) => {
+      const matchedItems = newMemberList.filter((item) => item.key === letter)
+      if (matchedItems.length > 0) {
+        tempAlphabet.push(letter)
+      }
+      resultMemberList.value.push({
+        key: letter,
+        memberList: matchedItems.length ? matchedItems : [],
+      })
+    })
+    state.alphabet = tempAlphabet
+    state.resultMemberList = resultMemberList
+  } else {
+    if (
+      (groupParams.groupInfo.group_type == 2 ||
+        groupParams.groupInfo.group_type == 4) &&
+      props?.manageType === 'admin'
+    ) {
+      let departmentIdsArr = []
+      if (groupParams?.groupInfo?.deptInfos?.length > 0) {
+        groupParams.groupInfo.deptInfos.forEach((item) => {
+          departmentIdsArr.push(item.dept_id)
+        })
+      }
+      getPosiByDep(departmentIdsArr)
+    } else if (props?.isCreateDepGroup === 1) {
+      let departmentIdsArr = []
+      if (groupTypeStore?.depCheckedKeys?.value?.length > 0) {
+        groupTypeStore.depCheckedKeys.value.forEach((item) => {
+          departmentIdsArr.push(item.ID)
+        })
+      }
+      getPosiByDep(departmentIdsArr)
+    } else {
+      state.resultMemberList = [
+        {
+          key: '',
+          memberList: newMemberList,
+        },
+      ]
+    }
+  }
+}
+
+//按部门获取岗位
+const getPosiByDep = async (departmentIdsArr) => {
+  await groupTypeStore.getPositionByDepartment({
+    IDs: departmentIdsArr,
+  })
+  let departmentAllPositions = []
+  if (groupTypeParams?.departmentAllPositions?.value?.length > 0) {
+    groupTypeParams?.departmentAllPositions?.value?.forEach((item) => {
+      item?.AllPositions?.forEach((positionItem) => {
+        departmentAllPositions.push({
+          nickname: item.name + '-' + positionItem.name,
+          id: item.ID + '-' + positionItem.ID,
+          checkArr: [],
+          positionInfo: {
+            dept_id: item.ID,
+            dept_name: item.name,
+            position_id: positionItem.ID,
+            position_name: positionItem.name,
+          },
+        })
+      })
+    })
+  }
+  if (groupParams?.groupInfo?.groupAdminList?.length > 0) {
+    groupParams?.groupInfo?.groupAdminList.forEach((item) => {
+      departmentAllPositions.forEach((idsItem) => {
+        if (item.dept_id + '-' + item.position_id == idsItem.id) {
+          idsItem.leader = 1
+        }
+      })
+    })
+  }
+  if (
+    props?.isCreateDepGroup === 1 &&
+    groupTypeStore?.groupAdmins?.value?.length > 0
+  ) {
+    departmentAllPositions.forEach((allPos) => {
+      groupTypeStore.groupAdmins.value.forEach((admin) => {
+        if (allPos.id === admin.id) {
+          allPos.checkArr = [allPos.id]
+        }
+      })
+    })
+  }
+  if (state?.searchText) {
+    const lowerCaseSearchText = state?.searchText.toLowerCase()
+    departmentAllPositions = departmentAllPositions.filter((item) =>
+      state?.searchText
+        ? item.nickname.toLowerCase().includes(lowerCaseSearchText)
+        : true,
+    )
+  }
+  state.resultMemberList = [
+    {
+      key: '',
+      memberList: departmentAllPositions,
+    },
+  ]
+}
+
+//滚动到指定的view
+const scrollToView = (alphabet) => {
+  state.currentAlphabet = alphabet
+  state.isAssign = true
+  console.log()
+  zPaging.value?.scrollIntoViewById(
+    alphabet,
+    document.getElementById('topArea').clientHeight
+      ? document.getElementById('topArea').clientHeight - 1
+      : 80,
+  )
+}
+
+//监听列表滚动
+const onScroll = (e) => {
+  if (e.detail.deltaY < 0) {
+    state.scrollDirection = 'down'
+  } else if (e.detail.deltaY > 0) {
+    state.scrollDirection = 'up'
+  } else {
+    state.scrollDirection = ''
+  }
+}
+
+//选中的人员改变
+const checkBoxChange = (e) => {
+  if (e) {
+    emits('updateSelectedMembersNum', 1)
+  } else {
+    emits('updateSelectedMembersNum', -1)
+  }
+}
+
+//点击确认选择的成员
+const confirmSelectMembers = () => {
+  let selectedUserIds = ''
+  let itemList = dialogueParams.memberList
+  let positionInfos = []
+  if (
+    props?.manageType === 'admin' &&
+    (groupParams.groupInfo.group_type == 2 ||
+      groupParams.groupInfo.group_type == 4 ||
+      props?.isCreateDepGroup === 1)
+  ) {
+    itemList = state.resultMemberList[0].memberList
+  }
+  itemList.forEach((ele) => {
+    if (ele.checkArr?.length > 0) {
+      if (!selectedUserIds) {
+        selectedUserIds = String(ele.checkArr[0])
+      } else {
+        selectedUserIds += ',' + ele.checkArr[0]
+      }
+    }
+    if (
+      ele.checkArr?.length > 0 ||
+      (ele.leader && (ele.leader == 1 || ele.leader == 2))
+    ) {
+      if (props?.isCreateDepGroup === 1) {
+        let posInfo = Object.assign({}, ele.positionInfo, {
+          name: ele.nickname,
+          id: ele.id,
+        })
+        positionInfos.push(posInfo)
+      } else {
+        positionInfos.push(ele.positionInfo)
+      }
+    }
+  })
+  console.log(selectedUserIds)
+  if (selectedUserIds) {
+    if (props?.manageType === 'silence') {
+      let params = {
+        mode: 1, //1禁言2解禁
+        group_id: dialogueParams.receiverId, //群id
+        user_ids: selectedUserIds, //用户ids
+      }
+      console.log(params)
+      const resp = ServeGroupNoSpeak(params)
+      resp.then(({ code, data }) => {
+        console.log(data)
+        if (code == 200) {
+          useDialogueStore().updateGroupMembers()
+        } else {
+        }
+      })
+      resp.catch(() => {})
+    } else if (props?.manageType === 'admin') {
+      if (props?.isCreateDepGroup === 1) {
+        // console.log(positionInfos)
+        groupTypeStore.groupAdmins.value = positionInfos
+        uni.navigateBack({
+          delta: 1,
+        })
+      } else {
+        if (
+          groupParams.groupInfo.group_type == 1 ||
+          groupParams.groupInfo.group_type == 3
+        ) {
+          let params = {
+            mode: 1, //1管理员，2不是管理员
+            group_id: dialogueParams.receiverId, //群id
+            user_ids: selectedUserIds,
+          }
+          console.log(params)
+          const resp = ServeGroupAssignAdmin(params)
+          resp.then(({ code, data }) => {
+            console.log(data)
+            if (code == 200) {
+              useDialogueStore().updateGroupMembers()
+            } else {
+            }
+          })
+          resp.catch(() => {})
+        } else if (
+          groupParams.groupInfo.group_type == 2 ||
+          groupParams.groupInfo.group_type == 4
+        ) {
+          let params = {
+            source: 'app',
+            id: dialogueParams.receiverId,
+            deptInfos: groupParams.groupInfo.deptInfos,
+            positionInfos: positionInfos,
+          }
+          console.log(params)
+          const resp = ServeEditGroupAdmin(params)
+          resp.then(({ code, data }) => {
+            console.log(data)
+            if (code == 200) {
+              groupStore.ServeGroupDetail()
+            } else {
+            }
+          })
+          resp.catch(() => {})
+        }
+      }
+    } else if (props?.manageType === 'removeMembers') {
+      let params = {
+        group_id: dialogueParams.receiverId, //群id
+        members_ids: selectedUserIds, //群成员id，批量的话逗号分割
+      }
+      console.log(params)
+      const resp = ServeRemoveMembersGroup(params)
+      resp.then(({ code, data }) => {
+        console.log(data)
+        if (code == 200) {
+          useDialogueStore().updateGroupMembers()
+          groupStore.ServeGroupDetail()
+        } else {
+        }
+      })
+      resp.catch(() => {})
+    }
+  }
+}
+
+// 暴露确认方法
+defineExpose({
+  confirmSelectMembers,
+})
+</script>
+<style lang="scss" scoped>
+.select-member-by-alphabet {
+  .select-members {
+    padding: 20rpx 32rpx;
+    .search-member {
+      padding: 22rpx 16rpx;
+      background-color: #fff;
+    }
+    .member-list {
+      .member-list-alphabet-anchor-point {
+        position: fixed;
+        right: 32rpx;
+        top: 0;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .member-list-alphabet-anchor-point-each {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          margin: 0 0 14rpx;
+          span {
+            width: 52rpx;
+            text-align: center;
+            line-height: 44rpx;
+            color: $theme-text;
+          }
+        }
+      }
+      .member-list-alphabet {
+        .member-list-alphabet-key {
+          background-color: #f3f3f3;
+          span {
+            line-height: 44rpx;
+            color: $theme-text;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/chatSettings/groupManage/selectMembers.vue

@@ -11,170 +11,45 @@
         @scroll="onScroll"
       >
         <template #top>
-          <customNavbar :title="pageTitle" id="topArea"></customNavbar>
+          <div id="topArea">
+            <customNavbar :title="pageTitle"></customNavbar>
+          </div>
         </template>
-        <div class="select-members">
-          <div
-            class="search-member"
-            v-if="state.manageType !== 'removeMembers'"
-          >
-            <customInput
-              :searchText="state.searchText"
-              @inputSearchText="inputSearchText"
-            ></customInput>
-          </div>
-          <div
-            class="member-list"
-            :style="{
-              padding: state.manageType === 'searchRecord' ? '20rpx 0 0' : '',
-            }"
-          >
-            <div class="member-list-alphabet-anchor-point">
-              <div
-                class="member-list-alphabet-anchor-point-each"
-                v-for="(alphabetItem, alphabetIndex) in state?.alphabet"
-                :key="alphabetIndex"
-                :style="{
-                  margin: state?.alphabet?.length > 17 ? '0' : '',
-                }"
-                @click.stop="scrollToView(alphabetItem)"
-              >
-                <span
-                  class="text-[32rpx] font-regular"
-                  :style="{
-                    color:
-                      state.currentAlphabet === alphabetItem ? '#7A58DE' : '',
-                  }"
-                >
-                  {{ alphabetItem }}
-                </span>
-              </div>
-            </div>
-            <div
-              class="member-list-alphabet"
-              v-for="(alphabetItem, alphabetIndex) in state.resultMemberList"
-              :key="alphabetIndex"
-            >
-              <div
-                class="member-list-alphabet-key"
-                :style="{
-                  padding:
-                    state.manageType === 'searchRecord' ||
-                    state.manageType === 'removeMembers'
-                      ? '10rpx 30rpx'
-                      : '',
-                }"
-                v-if="alphabetItem?.memberList?.length > 0"
-                :id="alphabetItem.key"
-                :ref="
-                  (el) => {
-                    if (el) alphabetElementRefs[alphabetIndex] = el
-                  }
-                "
-              >
-                <span class="text-[32rpx] font-regular">
-                  {{ alphabetItem.key }}
-                </span>
-              </div>
-              <div v-if="alphabetItem?.memberList?.length > 0">
-                <div
-                  class="member-list-each"
-                  v-for="(item, index) in alphabetItem?.memberList"
-                  :key="index"
-                >
-                  <tm-checkbox-group v-model="item.checkArr">
-                    <selectMemberItem
-                      :groupType="groupParams.groupInfo.group_type"
-                      :memberItem="item"
-                      @clickItem="handleClickItem(item)"
-                      :manageType="state.manageType"
-                      :itemStyle="
-                        state.manageType === 'searchRecord' ||
-                        state.manageType === 'removeMembers'
-                          ? 'list'
-                          : 'card'
-                      "
-                    >
-                      <template
-                        #left
-                        v-if="state.manageType !== 'searchRecord'"
-                      >
-                        <div
-                          v-if="
-                            state.manageType === 'removeMembers' &&
-                            item?.is_mine
-                          "
-                        >
-                          <tm-checkbox
-                            color="#fff"
-                            :transprent="true"
-                            :border="0"
-                            :disabled="true"
-                          ></tm-checkbox>
-                        </div>
-                        <tm-checkbox
-                          v-if="
-                            !(
-                              state.manageType === 'removeMembers' &&
-                              item?.is_mine
-                            )
-                          "
-                          :round="10"
-                          :color="
-                            item?.checkArr?.length > 0 ? '#46299d' : '#B4B4B4'
-                          "
-                          :outlined="
-                            item?.checkArr?.length > 0 ||
-                            (state.manageType === 'silence' &&
-                              item.is_mute === 1) ||
-                            (state.manageType === 'admin' &&
-                              (item.leader === 1 || item.leader === 2))
-                              ? false
-                              : true
-                          "
-                          :value="item.id"
-                          :disabled="
-                            (state.manageType === 'silence' &&
-                              item.is_mute === 1) ||
-                            (state.manageType === 'admin' &&
-                              (item.leader === 1 || item.leader === 2))
-                          "
-                          @change="checkBoxChange"
-                        ></tm-checkbox>
-                      </template>
-                    </selectMemberItem>
-                  </tm-checkbox-group>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <selectMemberByAlphabet
+          :manageType="state.manageType"
+          :isCreateDepGroup="state.isCreateDepGroup"
+          ref="selectMemberByAlphabetRef"
+          :selectAreaHeight="state.selectAreaHeight"
+          @updateSelectedMembersNum="updateSelectedMembersNum"
+        ></selectMemberByAlphabet>
         <template #bottom v-if="state.manageType !== 'searchRecord'">
-          <customBtn
-            v-if="state.manageType !== 'removeMembers'"
-            :isBottom="true"
-            :btnText="$t('ok')"
-            @clickBtn="confirmSelectMembers"
-          ></customBtn>
-          <div
-            class="confirm-btn-area"
-            v-if="state.manageType === 'removeMembers'"
-          >
-            <div class="confirm-btn-area-statistic-text">
-              <span class="text-[28rpx] font-medium">
-                {{
-                  $t('select.member.num') +
-                  '：' +
-                  state.selectedMembersNum +
-                  $t('statistic.unit.person')
-                }}
-              </span>
-            </div>
+          <div id="footArea">
             <customBtn
+              v-if="state.manageType !== 'removeMembers'"
+              :isBottom="true"
               :btnText="$t('ok')"
               @clickBtn="confirmSelectMembers"
-              :disabled="state.selectedMembersNum == 0 ? true : false"
             ></customBtn>
+            <div
+              class="confirm-btn-area"
+              v-if="state.manageType === 'removeMembers'"
+            >
+              <div class="confirm-btn-area-statistic-text">
+                <span class="text-[28rpx] font-medium">
+                  {{
+                    $t('select.member.num') +
+                    '：' +
+                    state.selectedMembersNum +
+                    $t('statistic.unit.person')
+                  }}
+                </span>
+              </div>
+              <customBtn
+                :btnText="$t('ok')"
+                @clickBtn="confirmSelectMembers"
+                :disabled="state.selectedMembersNum == 0 ? true : false"
+              ></customBtn>
+            </div>
           </div>
         </template>
       </ZPaging>
@@ -182,120 +57,63 @@
   </div>
 </template>
 <script setup>
-import customInput from '@/components/custom-input/custom-input.vue'
-import selectMemberItem from '../components/select-member-item.vue'
+import selectMemberByAlphabet from '../components/selectMemberByAlphabet.vue'
 import customBtn from '@/components/custom-btn/custom-btn.vue'
 import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
 import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
-import { computed, onMounted, reactive, ref, watch, nextTick } from 'vue'
+import { computed, reactive, ref, onMounted, nextTick } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
-import {
-  ServeGroupNoSpeak,
-  ServeEditGroupAdmin,
-  ServeGroupAssignAdmin,
-  ServeRemoveMembersGroup,
-} from '@/api/group/index.js'
-import { useDialogueStore, useGroupStore, useGroupTypeStore } from '@/store'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
 
+const selectMemberByAlphabetRef = ref(null)
+
 const zPaging = ref()
 useZPaging(zPaging)
 
-const groupStore = useGroupStore()
-const groupParams = reactive({
-  groupInfo: computed(() => groupStore.groupInfo),
-})
-
-const groupTypeStore = useGroupTypeStore()
-const groupTypeParams = reactive({
-  departmentAllPositions: computed(() => groupTypeStore.departmentAllPositions),
-})
-
-const dialogueStore = useDialogueStore()
-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),
-})
-
 const state = reactive({
-  searchText: '', //搜索内容
   manageType: '', //管理类型
-  alphabet: [], //A-Z列表
-  resultMemberList: [], //按A-Z整理后的人员列表
-  currentAlphabet: 'A', //当前A-Z位置
-  scrollDirection: '', //当前列表滚动方向
-  isAssign: false, //是否指定view
   selectedMembersNum: 0, //当前选中数量
   isCreateDepGroup: 0, //是否是创建部门群
+  selectAreaHeight: 0, //选择区域高度
 })
 
-watch(
-  () => dialogueParams?.memberList,
-  (newMemberList) => {
-    assembleAlphabetMemberList(newMemberList)
-  },
-  { deep: true },
-)
-
-watch(
-  () => groupParams?.groupInfo,
-  (newGroupInfo) => {
-    assembleAlphabetMemberList(dialogueParams?.memberList)
-  },
-  { deep: true },
-)
-
-//获取A-Z tag元素
-const alphabetElementRefs = ref([])
-//观察者
-let observer
-
 onLoad((options) => {
-  console.log(options)
+  // console.log(options)
   if (options.manageType) {
     state.manageType = options.manageType
-    assembleAlphabetMemberList(dialogueParams?.memberList)
   }
   if (options.isCreateDepGroup) {
     state.isCreateDepGroup = Number(options.isCreateDepGroup)
-    assembleAlphabetMemberList()
   }
 })
 
 onMounted(() => {
-  dialogueParams.memberList.forEach((ele) => {
-    ele.checkArr = []
-  })
-  const options = {
-    root: null, // 使用浏览器窗口作为根容器
-    threshold: 1.0, // 当元素100%离开视口时触发
-  }
-  observer = new IntersectionObserver(handleIntersection, options)
   nextTick(() => {
-    watch(
-      alphabetElementRefs,
-      (newAlphabetElementRefs) => {
-        if (Array.isArray(newAlphabetElementRefs)) {
-          newAlphabetElementRefs.forEach((el, index) => {
-            observeElement(el, index)
-          })
+    let selectAreaHeight = uni.getSystemInfoSync().windowHeight
+    // console.log('页面高度:', uni.getSystemInfoSync().windowHeight)
+    const topAreaQuery = uni.createSelectorQuery()
+    topAreaQuery
+      .select('#topArea')
+      .boundingClientRect((res) => {
+        if (res) {
+          // console.log('元素高度:', res.height)
+          selectAreaHeight = selectAreaHeight - res.height
         }
-      },
-      { immediate: true, deep: true },
-    )
-    if (alphabetElementRefs.value.length > 0) {
-      alphabetElementRefs.value.forEach((el, index) =>
-        observeElement(el, index),
-      )
-    }
+      })
+      .exec()
+    const footAreaQuery = uni.createSelectorQuery()
+    footAreaQuery
+      .select('#footArea')
+      .boundingClientRect((res) => {
+        if (res) {
+          // console.log('元素高度:', res.height)
+          selectAreaHeight = selectAreaHeight - res.height
+        }
+      })
+      .exec()
+    // console.log(selectAreaHeight)
+    state.selectAreaHeight = selectAreaHeight + 'px'
   })
 })
 
@@ -314,341 +132,16 @@ const pageTitle = computed(() => {
   return page_title
 })
 
-// 观察者函数
-const handleIntersection = (entries) => {
-  if (state.isAssign) {
-    state.isAssign = false
-    return
-  }
-  entries.forEach((entry) => {
-    if (!entry.isIntersecting && state.scrollDirection === 'down') {
-      state.currentAlphabet = entry.target.id
-    } else if (entry.isIntersecting && state.scrollDirection === 'up') {
-      if (state?.alphabet?.length > 1) {
-        state?.alphabet.forEach((item, index) => {
-          if (item === entry.target.id && index > 0) {
-            state.currentAlphabet = state?.alphabet[index - 1]
-          }
-        })
-      } else {
-        state.currentAlphabet = entry.target.id
-      }
-    }
-  })
-}
-
-//观察元素
-const observeElement = (el, index) => {
-  if (el && observer) {
-    observer.observe(el)
-  }
-}
-
-//输入搜索文本
-const inputSearchText = (e) => {
-  // console.log(e)
-  state.searchText = e
-}
-
-//点击item
-const handleClickItem = (item) => {
-  if (
-    (state.manageType === 'silence' && item.is_mute === 1) ||
-    (state.manageType === 'admin' &&
-      (item.leader === 1 || item.leader === 2)) ||
-    (state.manageType === 'removeMembers' && item.is_mine)
-  ) {
-    return
-  }
-  let itemList = dialogueParams.memberList
-  if (
-    state.manageType === 'admin' &&
-    (groupParams.groupInfo.group_type == 2 ||
-      groupParams.groupInfo.group_type == 4 ||
-      state.isCreateDepGroup === 1)
-  ) {
-    itemList = state.resultMemberList[0].memberList
-  }
-  itemList.forEach((ele) => {
-    if (ele.id == item.id) {
-      ele.checkArr = ele.checkArr?.length > 0 ? [] : [item.id]
-      if (ele.checkArr?.length > 0) {
-        state.selectedMembersNum += 1
-      } else {
-        state.selectedMembersNum -= 1
-      }
-    }
-  })
-}
-
-//点击确认选择的成员
+//确认
 const confirmSelectMembers = () => {
-  let selectedUserIds = ''
-  let itemList = dialogueParams.memberList
-  let positionInfos = []
-  if (
-    state.manageType === 'admin' &&
-    (groupParams.groupInfo.group_type == 2 ||
-      groupParams.groupInfo.group_type == 4 ||
-      state.isCreateDepGroup === 1)
-  ) {
-    itemList = state.resultMemberList[0].memberList
-  }
-  itemList.forEach((ele) => {
-    if (ele.checkArr?.length > 0) {
-      if (!selectedUserIds) {
-        selectedUserIds = String(ele.checkArr[0])
-      } else {
-        selectedUserIds += ',' + ele.checkArr[0]
-      }
-    }
-    if (
-      ele.checkArr?.length > 0 ||
-      (ele.leader && (ele.leader == 1 || ele.leader == 2))
-    ) {
-      if (state.isCreateDepGroup === 1) {
-        let posInfo = Object.assign({}, ele.positionInfo, {
-          name: ele.nickname,
-          id: ele.id,
-        })
-        positionInfos.push(posInfo)
-      } else {
-        positionInfos.push(ele.positionInfo)
-      }
-    }
-  })
-  console.log(selectedUserIds)
-  if (selectedUserIds) {
-    if (state.manageType === 'silence') {
-      let params = {
-        mode: 1, //1禁言2解禁
-        group_id: dialogueParams.receiverId, //群id
-        user_ids: selectedUserIds, //用户ids
-      }
-      console.log(params)
-      const resp = ServeGroupNoSpeak(params)
-      resp.then(({ code, data }) => {
-        console.log(data)
-        if (code == 200) {
-          useDialogueStore().updateGroupMembers()
-        } else {
-        }
-      })
-      resp.catch(() => {})
-    } else if (state.manageType === 'admin') {
-      if (state.isCreateDepGroup === 1) {
-        // console.log(positionInfos)
-        groupTypeStore.groupAdmins.value = positionInfos
-        uni.navigateBack({
-          delta: 1,
-        })
-      } else {
-        if (
-          groupParams.groupInfo.group_type == 1 ||
-          groupParams.groupInfo.group_type == 3
-        ) {
-          let params = {
-            mode: 1, //1管理员，2不是管理员
-            group_id: dialogueParams.receiverId, //群id
-            user_ids: selectedUserIds,
-          }
-          console.log(params)
-          const resp = ServeGroupAssignAdmin(params)
-          resp.then(({ code, data }) => {
-            console.log(data)
-            if (code == 200) {
-              useDialogueStore().updateGroupMembers()
-            } else {
-            }
-          })
-          resp.catch(() => {})
-        } else if (
-          groupParams.groupInfo.group_type == 2 ||
-          groupParams.groupInfo.group_type == 4
-        ) {
-          let params = {
-            source: 'app',
-            id: dialogueParams.receiverId,
-            deptInfos: groupParams.groupInfo.deptInfos,
-            positionInfos: positionInfos,
-          }
-          console.log(params)
-          const resp = ServeEditGroupAdmin(params)
-          resp.then(({ code, data }) => {
-            console.log(data)
-            if (code == 200) {
-              groupStore.ServeGroupDetail()
-            } else {
-            }
-          })
-          resp.catch(() => {})
-        }
-      }
-    } else if (state.manageType === 'removeMembers') {
-      let params = {
-        group_id: dialogueParams.receiverId, //群id
-        members_ids: selectedUserIds, //群成员id，批量的话逗号分割
-      }
-      console.log(params)
-      const resp = ServeRemoveMembersGroup(params)
-      resp.then(({ code, data }) => {
-        console.log(data)
-        if (code == 200) {
-          useDialogueStore().updateGroupMembers()
-          groupStore.ServeGroupDetail()
-        } else {
-        }
-      })
-      resp.catch(() => {})
-    }
+  if (selectMemberByAlphabetRef.value) {
+    selectMemberByAlphabetRef.value.confirmSelectMembers()
   }
 }
 
-//组装A-Z排序的人员列表
-const assembleAlphabetMemberList = async (newMemberList) => {
-  if (
-    state.manageType === 'searchRecord' ||
-    state.manageType === 'removeMembers'
-  ) {
-    const resultMemberList = ref([])
-    const alphabet = Array.from({ length: 26 }, (_, i) =>
-      String.fromCharCode(i + 65),
-    )
-    let tempAlphabet = []
-    alphabet.forEach((letter) => {
-      const matchedItems = newMemberList.filter((item) => item.key === letter)
-      if (matchedItems.length > 0) {
-        tempAlphabet.push(letter)
-      }
-      resultMemberList.value.push({
-        key: letter,
-        memberList: matchedItems.length ? matchedItems : [],
-      })
-    })
-    state.alphabet = tempAlphabet
-    state.resultMemberList = resultMemberList
-  } else {
-    if (
-      (groupParams.groupInfo.group_type == 2 ||
-        groupParams.groupInfo.group_type == 4) &&
-      state.manageType === 'admin'
-    ) {
-      let departmentIdsArr = []
-      if (groupParams?.groupInfo?.deptInfos?.length > 0) {
-        groupParams.groupInfo.deptInfos.forEach((item) => {
-          departmentIdsArr.push(item.dept_id)
-        })
-      }
-      getPosiByDep(departmentIdsArr)
-    } else if (state.isCreateDepGroup === 1) {
-      let departmentIdsArr = []
-      if (groupTypeStore?.depCheckedKeys?.value?.length > 0) {
-        groupTypeStore.depCheckedKeys.value.forEach((item) => {
-          departmentIdsArr.push(item.ID)
-        })
-      }
-      getPosiByDep(departmentIdsArr)
-    } else {
-      state.resultMemberList = [
-        {
-          key: '',
-          memberList: newMemberList,
-        },
-      ]
-    }
-  }
-}
-
-const getPosiByDep = async (departmentIdsArr) => {
-  await groupTypeStore.getPositionByDepartment({
-    IDs: departmentIdsArr,
-  })
-  let departmentAllPositions = []
-  if (groupTypeParams?.departmentAllPositions?.value?.length > 0) {
-    groupTypeParams?.departmentAllPositions?.value?.forEach((item) => {
-      item?.AllPositions?.forEach((positionItem) => {
-        departmentAllPositions.push({
-          nickname: item.name + '-' + positionItem.name,
-          id: item.ID + '-' + positionItem.ID,
-          checkArr: [],
-          positionInfo: {
-            dept_id: item.ID,
-            dept_name: item.name,
-            position_id: positionItem.ID,
-            position_name: positionItem.name,
-          },
-        })
-      })
-    })
-  }
-  if (groupParams?.groupInfo?.groupAdminList?.length > 0) {
-    groupParams?.groupInfo?.groupAdminList.forEach((item) => {
-      departmentAllPositions.forEach((idsItem) => {
-        if (item.dept_id + '-' + item.position_id == idsItem.id) {
-          idsItem.leader = 1
-        }
-      })
-    })
-  }
-  if (
-    state.isCreateDepGroup === 1 &&
-    groupTypeStore?.groupAdmins?.value?.length > 0
-  ) {
-    departmentAllPositions.forEach((allPos) => {
-      groupTypeStore.groupAdmins.value.forEach((admin) => {
-        if (allPos.id === admin.id) {
-          allPos.checkArr = [allPos.id]
-        }
-      })
-    })
-  }
-  if(state?.searchText){
-    const lowerCaseSearchText = state?.searchText.toLowerCase()
-    departmentAllPositions = departmentAllPositions.filter((item) =>
-      state?.searchText
-        ? item.nickname.toLowerCase().includes(lowerCaseSearchText)
-        : true,
-    )
-  }
-  state.resultMemberList = [
-    {
-      key: '',
-      memberList: departmentAllPositions,
-    },
-  ]
-}
-
-//滚动到指定的view
-const scrollToView = (alphabet) => {
-  state.currentAlphabet = alphabet
-  state.isAssign = true
-  console.log()
-  zPaging.value?.scrollIntoViewById(
-    alphabet,
-    document.getElementById('topArea').clientHeight
-      ? document.getElementById('topArea').clientHeight - 1
-      : 80,
-  )
-}
-
-//监听列表滚动
-const onScroll = (e) => {
-  if (e.detail.deltaY < 0) {
-    state.scrollDirection = 'down'
-  } else if (e.detail.deltaY > 0) {
-    state.scrollDirection = 'up'
-  } else {
-    state.scrollDirection = ''
-  }
-}
-
-//选中的人员改变
-const checkBoxChange = (e) => {
-  if (e) {
-    state.selectedMembersNum += 1
-  } else {
-    state.selectedMembersNum -= 1
-  }
+//更新选中的人数
+const updateSelectedMembersNum = (numChange) => {
+  state.selectedMembersNum = state.selectedMembersNum + numChange
 }
 </script>
 <style scoped lang="scss">
@@ -659,48 +152,6 @@ const checkBoxChange = (e) => {
   background-repeat: no-repeat;
 }
 
-.select-members {
-  padding: 20rpx 32rpx;
-  .search-member {
-    padding: 22rpx 16rpx;
-    background-color: #fff;
-  }
-  .member-list {
-    .member-list-alphabet-anchor-point {
-      position: fixed;
-      right: 32rpx;
-      top: 0;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      .member-list-alphabet-anchor-point-each {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        margin: 0 0 14rpx;
-        span {
-          width: 52rpx;
-          text-align: center;
-          line-height: 44rpx;
-          color: $theme-text;
-        }
-      }
-    }
-    .member-list-alphabet {
-      .member-list-alphabet-key {
-        background-color: #f3f3f3;
-        span {
-          line-height: 44rpx;
-          color: $theme-text;
-        }
-      }
-    }
-  }
-}
-
 .confirm-btn-area {
   background-color: #fff;
   padding: 14rpx 32rpx 72rpx;

src/pages/dialog/index.vue

@@ -342,7 +342,13 @@
         </div>
       </template>
     </ZPaging>
-    <tm-drawer placement="bottom" :show="true" :hideHeader="true" :round="5">
+    <tm-drawer
+      placement="bottom"
+      :show="state.isShowMentionSelect"
+      :hideHeader="true"
+      :round="5"
+      :height="state.mentionSelectHeight"
+    >
       <div
         class="mention-select-drawer flex flex-row flex-1 flex-row flex-row-center-between"
       >
@@ -350,7 +356,11 @@
           class="cancel-btns flex-row flex flex-row-center-start"
           style="width: 210rpx;"
         >
-          <div class="hide-btn" v-if="!state.mentionIsMulSelect">
+          <div
+            class="hide-btn"
+            v-if="!state.mentionIsMulSelect"
+            @click="hideMentionSelect"
+          >
             <img
               style="width: 40rpx; height: 40rpx;"
               src="/src/static/image/chatList/mention_select_hide_bg.png"
@@ -394,21 +404,36 @@
           <div
             class="mention-done-btn"
             :class="
-              state?.mentionSelectComplete ? 'mention-done-btn-can-do' : ''
+              state?.selectedMembersNum > 0 ? 'mention-done-btn-can-do' : ''
             "
             v-if="state.mentionIsMulSelect"
-            @click="changeToSelectMode"
+            @click="confirmMentionSelect"
           >
             <span class="text-[32rpx] font-regular text-[#191919]">
               {{ $t('button.text.done') }}
             </span>
+            <span
+              class="text-[32rpx] font-regular text-[#191919]"
+              v-if="state?.selectedMembersNum > 0"
+            >
+              {{ '(' + state?.selectedMembersNum + ')' }}
+            </span>
           </div>
         </div>
       </div>
+      <selectMemberByAlphabet
+        :manageType="'mention'"
+        ref="selectMemberByAlphabetRef"
+        :selectAreaHeight="state.selectAreaHeight"
+        @updateSelectedMembersNum="updateSelectedMembersNum"
+        :isMulSelect="state.mentionIsMulSelect"
+        @getSelectResult="getSelectResult"
+      ></selectMemberByAlphabet>
     </tm-drawer>
   </div>
 </template>
 <script setup>
+import selectMemberByAlphabet from '../chatSettings/components/selectMemberByAlphabet.vue'
 import {
   ref,
   reactive,
@@ -465,6 +490,8 @@ import { onLoad as uniOnload } from '@dcloudio/uni-app'
 
 Quill.register('formats/emoji', EmojiBlot)
 
+const selectMemberByAlphabetRef = ref(null)
+
 const {
   getDialogueList,
   updateZpagingRef,
@@ -500,6 +527,10 @@ const state = ref({
   localPageLoadDone: true, //分页加载缓存中的聊天记录是否完毕
   quoteInfo: null, //引用信息
   mentionIsMulSelect: false, //是否是多选提醒的人
+  selectedMembersNum: 0, //选中的要提醒的人数
+  mentionSelectHeight: 0, //选择要提醒人的区域高度
+  selectAreaHeight: 0, //选择要提醒人的可选人员列表区域高度
+  isShowMentionSelect: true, //是否显示要提醒人的选择区域
 })
 
 uniOnload((options) => {
@@ -934,6 +965,11 @@ const handleDelete = () => {
   })
 }
 
+//更新选中的要提醒的人数
+const updateSelectedMembersNum = (numChange) => {
+  state.value.selectedMembersNum = state.value.selectedMembersNum + numChange
+}
+
 watch(
   () => zpagingRef.value,
   (newValue, oldValue) => {
@@ -1018,10 +1054,50 @@ const changeMentionSelectMul = (status) => {
   state.value.mentionIsMulSelect = status
 }
 
+//隐藏要提醒人的选择
+const hideMentionSelect = () => {
+  state.value.isShowMentionSelect = false
+}
+
+//确认要提醒人的选择
+const confirmMentionSelect = () => {
+  if (state?.value.selectedMembersNum > 0) {
+    if (selectMemberByAlphabetRef.value) {
+      selectMemberByAlphabetRef.value.confirmSelectMembers()
+    }
+    hideMentionSelect()
+  }
+}
+
+//获取选择的结果
+const getSelectResult = (mentionSelect) => {
+  console.log(mentionSelect)
+}
+
 onMounted(async () => {
   initData()
+  nextTick(() => {
+    state.value.mentionSelectHeight = pxTorPx(
+      uni.getSystemInfoSync().windowHeight * 0.86,
+    )
+
+    state.value.selectAreaHeight =
+      rpxToPx(state.value.mentionSelectHeight) - rpxToPx(90) + 'px'
+  })
 })
 
+const pxTorPx = (px) => {
+  const sysInfo = uni.getSystemInfoSync()
+  const rpx = px / (sysInfo.screenWidth / 750)
+  return rpx
+}
+
+const rpxToPx = (rpx) => {
+  const sysInfo = uni.getSystemInfoSync()
+  const px = (sysInfo.screenWidth / 750) * rpx
+  return px
+}
+
 onUnmounted(() => {
   dialogueStore.setDialogue({})
   clearMultiSelect()
@@ -1346,7 +1422,7 @@ onUnmounted(() => {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 36rpx 32rpx;
+  padding: 36rpx 32rpx 0;
   .cancel-btns {
     flex-shrink: 0;
     display: flex;

src/store/auth/index.js

@@ -5,7 +5,7 @@ import { userInfoApi } from "@/api/user";
 import {ref} from 'vue'
 export const useAuth = createGlobalState(() => {
   // const token = useStorage('token', '', uniStorage)
-  const token = ref('79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b894c272b29107599e31eb0d0e227acbe3e643ffc54df2c2270430888e9f045332e4b933a9d130e41942cc8253f55a0bd20040c89278356b3901db966e868d87104beab11987eba560d658eeb9a9821c264')
+  const token = ref('79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b89f92989eae7bf9c76b792b7ec454cebd8934fb97b8b0b30dbda0bc80ded1b8a5eea1920d39a9f892139704a56c7d95e3dc7ae833b91336100781e0e75e267fff794e16f7d1e8e752be010f8ab8911a942')
   const refreshToken = useStorage('refreshToken', '', uniStorage)
   const userInfo = useStorage('userInfo', {}, uniStorage)
   const leaderList = useStorage('leaderList', [], uniStorage)