307 lines
6.9 KiB
Vue
307 lines
6.9 KiB
Vue
<template>
|
|
<view class="tab-block">
|
|
<ul
|
|
class="tab-list flex flex-center"
|
|
:class="showMiddleButton === true ? 'tab-list-middle' : 'tab-list-default'"
|
|
>
|
|
<li
|
|
v-for="(item, index) in tabList"
|
|
:class="'list-item flex flex-column flex-middle ' + item.middleClass"
|
|
@click="handlePush(item, index)"
|
|
:key="index"
|
|
>
|
|
<view class="item-img-box">
|
|
<image
|
|
class="item-img"
|
|
:src="tabIndex == index ? item.selectedIconPath : item.iconPath"
|
|
/>
|
|
<view class="Unreadcss" v-if="index === 3 && Unread > 0">{{ Unread > 99 ? '99+':Unread }}</view>
|
|
</view>
|
|
<view
|
|
class="item-text font-20"
|
|
:style="{ color: tabIndex == index ? '#1DD2F9' : '#A7A3A3' }"
|
|
>{{ item.text }}</view
|
|
>
|
|
</li>
|
|
</ul>
|
|
<view @touchmove.stop.prevent="disabledScroll"> </view>
|
|
<NewAddedPk class="createModule" ref="createModule"></NewAddedPk>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import NewAddedPk from "../../pages/NewAddedPk/NewAddedPk.vue";
|
|
import VerifyLogin from "../VerifyLogin.js";
|
|
import { getCurrentInstance, defineProps, onMounted,onUnmounted,reactive, ref } from "vue";
|
|
import { TUIStore,StoreName } from '@tencentcloud/chat-uikit-engine';
|
|
require.async('../../TUIKit/components/TUIConversation/entry.js');
|
|
let showMiddleButton = ref(false);
|
|
const conversationList = ref([]);
|
|
let Unread = ref(0);
|
|
// 监听会话列表变化
|
|
onMounted(() => {
|
|
TUIStore.watch(StoreName.CONV, {
|
|
conversationList: onConversationListUpdated,
|
|
});
|
|
});
|
|
//conversationList[0].unreadCount
|
|
// 组件销毁时取消监听
|
|
onUnmounted(() => {
|
|
TUIStore.unwatch(StoreName.CONV, {
|
|
conversationList: onConversationListUpdated,
|
|
});
|
|
});
|
|
// 监听会话列表变化
|
|
function onConversationListUpdated(list) {
|
|
conversationList.value = list;
|
|
Unread.value = calculateUnreadCount(list);
|
|
|
|
}
|
|
// 计算未读消息总数
|
|
function calculateUnreadCount(arr) {
|
|
let total = 0;
|
|
for (const item of arr) {
|
|
// 检查对象是否包含 unreadCount 属性
|
|
if (!item.hasOwnProperty('unreadCount')) {
|
|
return null;
|
|
}
|
|
const count = item.unreadCount;
|
|
// 检查值是否为有效数值类型
|
|
if (typeof count !== 'number' || !Number.isFinite(count)) {
|
|
return null;
|
|
}
|
|
total += count;
|
|
}
|
|
return total;
|
|
}
|
|
|
|
const props = defineProps({
|
|
tabIndex: Number,
|
|
});
|
|
let tabList = reactive([
|
|
{
|
|
iconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Pk.png",
|
|
selectedIconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/PKClick.png",
|
|
text: "PK",
|
|
pagePath: "/pages/Home/Home",
|
|
middleClass: "",
|
|
},
|
|
{
|
|
iconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Forum.png",
|
|
selectedIconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Forumclick.png",
|
|
text: "论坛",
|
|
pagePath: "/pages/Forum/Forum",
|
|
middleClass: "",
|
|
},
|
|
{
|
|
iconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/jiahao.png",
|
|
selectedIconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/jiahao.png",
|
|
text: "",
|
|
pagePath: "/pages/c/c",
|
|
middleClass: "",
|
|
},
|
|
{
|
|
iconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Message.png",
|
|
selectedIconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Messageclick.png",
|
|
text: "消息",
|
|
},
|
|
{
|
|
iconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Mine.png",
|
|
selectedIconPath: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Mineclick.png",
|
|
text: "我的",
|
|
pagePath: "/pages/Mine/Mine",
|
|
middleClass: "",
|
|
},
|
|
]);
|
|
onMounted(() => {
|
|
setTabBar();
|
|
// getSystemInfo()
|
|
});
|
|
|
|
uni.getSystemInfo({
|
|
success: function (res) {
|
|
if (res.safeArea.top > 40) {
|
|
}
|
|
},
|
|
});
|
|
|
|
//判断中间按钮是否突出显示
|
|
function setTabBar() {
|
|
let tabLength = tabList.length;
|
|
if (tabLength % 2) {
|
|
showMiddleButton.value = true;
|
|
let middleIndex = Math.floor(tabLength / 2);
|
|
tabList[middleIndex].middleClass = "mid-button";
|
|
}
|
|
}
|
|
const createModule = ref();
|
|
|
|
function openPopupQuantity() {
|
|
createModule.value.open();
|
|
}
|
|
//组件返回关闭指令
|
|
function closeSuccess() {
|
|
// addSuccess.value.close();
|
|
}
|
|
//解决弹出层后页面还可以滚动
|
|
const disabledScroll = () => {
|
|
return false;
|
|
};
|
|
//tab点击事件
|
|
function handlePush(item, index) {
|
|
if (index === 3) {
|
|
VerifyLogin().then((res) => {
|
|
if (res) {
|
|
uni.redirectTo({
|
|
url: "/TUIKit/components/TUIConversation/index",
|
|
animationType: "none",
|
|
});
|
|
}
|
|
});
|
|
} else if (index === 2) {
|
|
//打开弹窗
|
|
VerifyLogin().then((res) => {
|
|
if (res) {
|
|
openPopupQuantity();
|
|
return;
|
|
}
|
|
});
|
|
} else if (index === 4) {
|
|
VerifyLogin().then((res) => {
|
|
if (res) {
|
|
uni.switchTab({
|
|
url: "/pages/Mine/Mine",
|
|
animationType: "none",
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
uni.switchTab({
|
|
url: item.pagePath,
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.flex {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.flex-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-middle {
|
|
align-items: center;
|
|
}
|
|
|
|
.font-20 {
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.tab-block {
|
|
position: relative;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
background-size: contain;
|
|
width: 100vw;
|
|
background-color: #ffffff;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
.tab-list {
|
|
height: 100rpx;
|
|
padding: 0; //解决偏移
|
|
z-index: 0;
|
|
}
|
|
.createModule {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 998;
|
|
width: 100vw;
|
|
}
|
|
.tab-list-default {
|
|
background-color: #ffffff;
|
|
border-top: 1px #dddddd solid;
|
|
}
|
|
|
|
.tab-list-middle {
|
|
position: relative;
|
|
background-size: cover;
|
|
}
|
|
|
|
.list-item {
|
|
flex: 1;
|
|
|
|
.item-img-box {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
margin-bottom: 9rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.item-img {
|
|
// width: 44rpx;
|
|
// height: 42rpx;
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
.mid-button {
|
|
position: relative;
|
|
|
|
.item-img-box {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
margin-bottom: 9rpx;
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: -104rpx;
|
|
}
|
|
|
|
.item-img {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
}
|
|
|
|
.item-text {
|
|
font-size: 20rpx;
|
|
position: absolute;
|
|
z-index: 1002;
|
|
bottom: -40rpx;
|
|
color: #393a41;
|
|
}
|
|
}
|
|
|
|
.tab-bar {
|
|
height: 30rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
.Unreadcss{
|
|
background-color: #ff0000;
|
|
margin-top: -65rpx;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 18rpx;
|
|
color: #ffffff;
|
|
line-height: 30rpx;
|
|
margin-left: 30rpx;
|
|
z-index: 1001;
|
|
}
|
|
</style>
|