uniIM/pages/group/index.vue

<template>
  <!-- <view class="chat_content" @touchmove.stop.prevent> -->
  <view>
    <cu-custom bgImage="/static/barBG.png" :isBack="false">
      <template v-slot:content>
		  <text style="letter-spacing: 4rpx;font-style: italic;color:black;font-weight: bold;">群组</text>
      </template>
      <template v-slot:right>
        <text class="cuIcon cuIcon-add text-black" @tap="newGroup"></text>
      </template>
    </cu-custom>
    <!-- <index-bar :indexMap="groupIndexMap" :bottom="true" class="tab-bar-mar"> -->
      <view v-for="(item,key) in groupIndexMap.keys()" :key="key">
        <view :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="(group) in groupIndexMap.get(item)" :key="group.id"
                  @tap.stop="showGroup(group.id)">
              <vim-avatar :img="group.avatar" :name="group.name" />
              <view class="content">
                <view class="text-black text-jiachu">{{ group.name }}</view>
                <view class="text-black text-sm">
                  {{ group.name }}
                </view>
              </view>
              <view class="action">
                <view class="cu-tag round bg-red sm" v-if="waitCheckMap.get(group.id)">{{ waitCheckMap.get(group.id) }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
	  <view style="height: 150rpx;"></view>
    <!-- </index-bar> -->
  </view>
</template>

<script setup lang="ts">
import {getCurrentInstance, ref} from "vue";
import {useGroupStore} from "@/store/groupStore";
import CuCustom from '@/colorui/components/cu-custom.vue'
import IndexBar from '@/components/IndexBar.vue'
import {storeToRefs} from "pinia";
import VimAvatar from "@/components/VimAvatar.vue";

const groupStore = useGroupStore();
const {proxy} = getCurrentInstance();
const hidden = ref(true);


const loadGroups = () => {
  groupStore.loadGroupList();
  groupStore.loadWaitCheckList();
}

const newGroup = () => {
  uni.navigateTo({
    url: '/pages/group/edit'
  })
}

const showGroup = (id: string) => {
  uni.navigateTo({
    url: '/pages/group/group?id=' + id
  })
}

loadGroups();

const {waitCheckMap, groupIndexMap} = storeToRefs(groupStore);
</script>

<style scoped>
.chat_content {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}
</style>