uniIM/pages/index/index.vue

<template>
  <view class="box">
    <view class="main">
      <chat-index v-if="pageCur==='chats'"></chat-index>
      <friend-index v-if="pageCur==='friends'"></friend-index>
      <group-index v-if="pageCur==='groups'"></group-index>
     <!-- <dept-index v-if="pageCur==='dept'"></dept-index> -->
      <mine-index v-if="pageCur==='mine'"></mine-index>
    </view>
    <view class="cu-bar tabbar bg-white shadow foot">
      <view class="action" @click="navChange" data-cur="chats">
		  <view>
			  <image class="tabbarIcon" v-if="pageCur!='chats'" src="/static/tabbar/index.png"></image>
			  <image class="tabbarIcon" v-if="pageCur==='chats'" src="/static/tabbar/index_cur.png"></image>
			  <view class="cu-tag badge" v-if="chatStore.allUnReadCount>0">{{ chatStore.allUnReadCount }}</view>
		  </view>
        <view :class="pageCur==='chats'?'text-zblue':'text-gray'">聊天</view>
      </view>
      <view class="action" @click="navChange" data-cur="friends">
        <!-- <view class="iconfont icon-haoyou" :class="pageCur==='friends'?'text-cyan':'text-gray'">
          <view class="cu-tag badge" v-if="friendStore.waitValidateList.length>0">{{ friendStore.waitValidateList.length }}</view>
        </view> -->
		<view>
		  <image class="tabbarIcon" v-if="pageCur!='friends'" src="/static/tabbar/txl.png"></image>
		  <image class="tabbarIcon" v-if="pageCur==='friends'" src="/static/tabbar/txl_cur.png"></image>
		  <view class="cu-tag badge" v-if="friendStore.waitValidateList.length>0">{{ friendStore.waitValidateList.length }}</view>
		</view>
        <view :class="pageCur==='friends'?'text-zblue':'text-gray'">通讯录</view>
      </view>
      <view class="action" @click="navChange" data-cur="groups">
        <!-- <view class="iconfont icon-qunzhong" :class="pageCur==='groups'?'text-cyan':'text-gray'">
          <view class="cu-tag badge" v-if="waitCheckGroupCount>0">{{ waitCheckGroupCount }}</view>
        </view> -->
		<view>
		  <image class="tabbarIcon" v-if="pageCur!='groups'" src="/static/tabbar/qunzu.png"></image>
		  <image class="tabbarIcon" v-if="pageCur==='groups'" src="/static/tabbar/qunzu_cur.png"></image>
		  <view class="cu-tag badge" v-if="waitCheckGroupCount>0">{{ waitCheckGroupCount }}</view>
		</view>
		
        <view :class="pageCur==='groups'?'text-zblue':'text-gray'">群组</view>
      </view>
      <!-- <view class="action" @click="navChange" data-cur="dept">
        <view class="iconfont icon-bumen" :class="pageCur==='dept'?'text-cyan':'text-gray'"></view>
        <view :class="pageCur==='dept'?'text-cyan':'text-gray'">组织</view>
      </view> -->
      <view class="action" @click="navChange" data-cur="mine">
		<image class="tabbarIcon" v-if="pageCur==='mine'" src="/static/tabbar/wode_cur.png"></image>
		<image class="tabbarIcon" v-if="pageCur!='mine'" src="/static/tabbar/wode.png"></image>
        <view :class="pageCur==='mine'?'text-zblue':'text-gray'">我的</view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, onMounted, ref} from 'vue';
import ChatIndex from '@/pages/chat/index.vue'
import FriendIndex from '@/pages/friend/index.vue'
import GroupIndex from '@/pages/group/index.vue'
import MineIndex from '@/pages/mine/index.vue'
import {useChatStore} from '@/store/chatStore';
import {useFriendStore} from '@/store/friendStore';
import {useUserStore} from '@/store/userStore';
import UserApi from '@/api/UserApi';
import {onBackPress} from '@dcloudio/uni-app';
import {useWsStore} from "@/store/WsStore";
import {useImmunityStore} from '@/store/immunityStore'
import {useSettingStore} from '@/store/settingStore'
import {useGroupStore} from "@/store/groupStore";
import MessageUtils from "@/utils/MessageUtils";
//@ts-ignore
const {proxy} = getCurrentInstance();
const chatStore = useChatStore();
const userStore = useUserStore();
const friendStore = useFriendStore();
const groupStore = useGroupStore();
const wsStore = useWsStore();
const pageCur = ref('chats');
const backCount = ref(0);
const navChange = (e: any) => {
  pageCur.value = e.currentTarget.dataset.cur
}

const waitCheckGroupCount = computed(()=>{
  const arr = [...groupStore.waitCheckMap.values()];
  if(arr && arr.length===0){
    return 0;
  }
  return arr.reduce((prev, curr)=>{
    return prev + curr;
  })
})

onBackPress(() => {
  backCount.value++;
  if (backCount.value > 1) {
    return false;
  } else {
    MessageUtils.message('再按一次返回登录界面')
    return true;
  }
  setTimeout(() => {
    backCount.value = 0;
  }, 2000)
})
//重置打开的聊天id,说明没有打开聊天窗口
chatStore.setOpenChatId(null);
onMounted(() => {
  UserApi.currentUser()
      .then((res) => {
        if (res && res.data) {
          userStore.setUser(res.data);
          //加载免打扰
          useImmunityStore().loadData()
          //加载设置
          useSettingStore().loadData()
          //加载聊天室
          useChatStore().reloadChats()
              .then(()=>{
                //初始化websocket
				console.log('初始化websocket')
                if(wsStore.wsRequest.socket?.readyState === 1){
                  wsStore.checkStatus()
                }else {
                  wsStore.close(true)
                  wsStore.init()
                }
              })
        }
      })
})
</script>

<style scoped lang="scss">
.action {
  .iconfont {
    font-size: 44upx;
    line-height: 1.2;
  }
}

.box {
  flex-direction: column;
  height: 100%;
  display: flex;
}

.main {
  flex: 1;
  background-color: #f8f8f8;
}

.icon-liaotian {
  position: relative;
}

.cu-tag.badge {
  position: relative;
  margin-top: -48rpx;
  margin-left:-26rpx;
}
.tabbarIcon{
	pading:10rpx;
	width:56rpx;
	height:56rpx;
}
</style>