|
@@ -1,35 +1,34 @@
|
|
|
<template>
|
|
|
<div class="tab-bar-wrappeer">
|
|
|
- <div
|
|
|
- class="tab-bar-item"
|
|
|
+ <template
|
|
|
v-for="(item, index) in tabbarData"
|
|
|
- :key="index"
|
|
|
- @click="tabbarHandler(item, index)"
|
|
|
- >
|
|
|
- <template v-if="item.path != '/NFT' || item.path == '/NFT' && showNFTTab">
|
|
|
- <red-dot class="red-dots"
|
|
|
- v-if="unReadCountTask > 0 && item.path == '/message' && currentTab.path != '/message'"
|
|
|
- ></red-dot>
|
|
|
- <img
|
|
|
- :src="
|
|
|
- index == currentTab.index
|
|
|
- ? item.iconActive
|
|
|
- : item.iconInActive
|
|
|
- "
|
|
|
- />
|
|
|
- <div
|
|
|
- class="text"
|
|
|
- :class="{ 'active-tab': index == currentTab.index }"
|
|
|
- >
|
|
|
- {{ item.name }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
+ :key="index">
|
|
|
+ <div class="tab-item"
|
|
|
+ v-if="item.path != '/NFT' || item.path == '/NFT' && showNFTTab"
|
|
|
+ @click="tabbarHandler(item, index)">
|
|
|
+ <red-dot class="red-dots"
|
|
|
+ v-if="unReadCountTask > 0 && item.path == '/message' && currentTab.path != '/message'"
|
|
|
+ ></red-dot>
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ index == currentTab.index
|
|
|
+ ? item.iconActive
|
|
|
+ : item.iconInActive
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class="text"
|
|
|
+ :class="{ 'active-tab': index == currentTab.index }"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onMounted, defineEmits, nextTick } from "vue";
|
|
|
+import { ref, onMounted, defineProps, defineEmits, nextTick, watch } from "vue";
|
|
|
|
|
|
import redDot from "@/view/components/red-dot.vue";
|
|
|
import router from "@/router/popup.js";
|
|
@@ -39,6 +38,29 @@ import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
|
|
|
import { nftListMine } from "@/http/nft.js";
|
|
|
import { getAllMessageInfo } from "@/http/messageApi"
|
|
|
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ userInfo: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ accessToken: undefined,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.userInfo,
|
|
|
+ (newVal) => {
|
|
|
+ getNFTListMine();
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+
|
|
|
let currentTab = ref({
|
|
|
index: 0,
|
|
|
path: '/'
|
|
@@ -106,6 +128,8 @@ const setActiveTab = () => {
|
|
|
};
|
|
|
|
|
|
const getNFTListMine = () => {
|
|
|
+ console.log(props.userInfo.accessToken)
|
|
|
+ if(!props.userInfo.accessToken) return;
|
|
|
nftListMine({
|
|
|
params: NFTReqParams.params,
|
|
|
}).then((res) => {
|
|
@@ -136,7 +160,6 @@ const setMessageCount = () => {
|
|
|
|
|
|
onMounted(() => {
|
|
|
setActiveTab();
|
|
|
- getNFTListMine();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
@@ -156,26 +179,27 @@ onMounted(() => {
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
- .tab-bar-item {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
+ .tab-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .text {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 12px;
|
|
|
- color: #c0c0c0;
|
|
|
- }
|
|
|
+ .text {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #c0c0c0;
|
|
|
+ }
|
|
|
|
|
|
- .active-tab {
|
|
|
- color: #1d9bf0 !important;
|
|
|
- }
|
|
|
+ .active-tab {
|
|
|
+ color: #1d9bf0 !important;
|
|
|
+ }
|
|
|
|
|
|
- .red-dots {
|
|
|
- position: absolute;
|
|
|
- right: 32%;
|
|
|
- top: 0px;
|
|
|
+ .red-dots {
|
|
|
+ position: absolute;
|
|
|
+ right: 32%;
|
|
|
+ top: 0px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
</style>
|