|
@@ -12,43 +12,70 @@
|
|
|
</van-sticky>
|
|
</van-sticky>
|
|
|
|
|
|
|
|
<div class="content">
|
|
<div class="content">
|
|
|
- <van-tabs v-if="!loading" ref="tabs" v-model:active="active" scrollspy sticky :offset-top="topHeight + 106">
|
|
|
|
|
|
|
+ <van-tabs
|
|
|
|
|
+ v-if="!loading && !isEmpty"
|
|
|
|
|
+ ref="tabs"
|
|
|
|
|
+ v-model:active="active"
|
|
|
|
|
+ scrollspy
|
|
|
|
|
+ sticky
|
|
|
|
|
+ :offset-top="topHeight + 106"
|
|
|
|
|
+ >
|
|
|
|
|
+ <van-tab title="全部">
|
|
|
|
|
+ <div></div>
|
|
|
|
|
+ </van-tab>
|
|
|
<van-tab
|
|
<van-tab
|
|
|
v-for="(item, index) in options"
|
|
v-for="(item, index) in options"
|
|
|
:title-class="item.listKey && searchInfo[item.listKey].length <= 0 ? 'hideTab' : ''"
|
|
:title-class="item.listKey && searchInfo[item.listKey].length <= 0 ? 'hideTab' : ''"
|
|
|
:key="searchKey + index"
|
|
:key="searchKey + index"
|
|
|
:title="item.label"
|
|
:title="item.label"
|
|
|
>
|
|
>
|
|
|
- <div class="tab-title" v-if="item.listKey && searchInfo[item.listKey].length > 0">
|
|
|
|
|
- {{ item.label }}
|
|
|
|
|
- </div>
|
|
|
|
|
- <div
|
|
|
|
|
- class="van-list"
|
|
|
|
|
- :class="{
|
|
|
|
|
- list:
|
|
|
|
|
- item.listKey === 'news' || item.listKey === 'mintActivities' || item.listKey === 'users'
|
|
|
|
|
- }"
|
|
|
|
|
- >
|
|
|
|
|
- <template v-if="item.listKey">
|
|
|
|
|
- <component
|
|
|
|
|
- :is="item.com"
|
|
|
|
|
- dark
|
|
|
|
|
- v-model:info="searchInfo[item.listKey][infoIndex]"
|
|
|
|
|
- v-for="(info, infoIndex) in searchInfo[item.listKey]"
|
|
|
|
|
- :key="infoIndex"
|
|
|
|
|
- list
|
|
|
|
|
- ></component>
|
|
|
|
|
- </template>
|
|
|
|
|
|
|
+ <template v-if="item.listKey && searchInfo[item.listKey].length > 0">
|
|
|
|
|
+ <div class="tab-title" v-if="item.listKey && searchInfo[item.listKey].length > 0">
|
|
|
|
|
+ <span> {{ item.label }}</span>
|
|
|
|
|
+
|
|
|
|
|
+ <span
|
|
|
|
|
+ class="tab-more"
|
|
|
|
|
+ v-if="item.listKey && searchInfo[item.listKey].length > 0 && !searchInfo[item.allKey]"
|
|
|
|
|
+ @click="goDetail(item)"
|
|
|
|
|
+ >更多</span
|
|
|
|
|
+ >
|
|
|
|
|
+ </div>
|
|
|
<div
|
|
<div
|
|
|
- class="more"
|
|
|
|
|
- v-if="item.listKey && searchInfo[item.listKey].length > 0 && !searchInfo[item.allKey]"
|
|
|
|
|
- @click="goDetail(item)"
|
|
|
|
|
|
|
+ class="van-list"
|
|
|
|
|
+ :class="{
|
|
|
|
|
+ list:
|
|
|
|
|
+ item.listKey === 'news' ||
|
|
|
|
|
+ item.listKey === 'mintActivities' ||
|
|
|
|
|
+ item.listKey === 'users'
|
|
|
|
|
+ }"
|
|
|
>
|
|
>
|
|
|
- 查看更多
|
|
|
|
|
|
|
+ <template v-if="item.listKey">
|
|
|
|
|
+ <component
|
|
|
|
|
+ :is="item.com"
|
|
|
|
|
+ dark
|
|
|
|
|
+ v-model:info="searchInfo[item.listKey][infoIndex]"
|
|
|
|
|
+ v-for="(info, infoIndex) in searchInfo[item.listKey]"
|
|
|
|
|
+ :key="infoIndex"
|
|
|
|
|
+ list
|
|
|
|
|
+ ></component>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <!-- <div
|
|
|
|
|
+ class="more"
|
|
|
|
|
+ v-if="item.listKey && searchInfo[item.listKey].length > 0 && !searchInfo[item.allKey]"
|
|
|
|
|
+ @click="goDetail(item)"
|
|
|
|
|
+ >
|
|
|
|
|
+ 查看更多
|
|
|
|
|
+ </div> -->
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </template>
|
|
|
</van-tab>
|
|
</van-tab>
|
|
|
</van-tabs>
|
|
</van-tabs>
|
|
|
|
|
+
|
|
|
|
|
+ <van-empty
|
|
|
|
|
+ v-if="isEmpty"
|
|
|
|
|
+ description="什么都没有搜到哦~"
|
|
|
|
|
+ :image="require('@assets/empty_img_asset_dark.png')"
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
@@ -127,7 +154,8 @@ export default {
|
|
|
news: [],
|
|
news: [],
|
|
|
mintActivities: [],
|
|
mintActivities: [],
|
|
|
minters: [],
|
|
minters: [],
|
|
|
- users: []
|
|
|
|
|
|
|
+ users: [],
|
|
|
|
|
+ showrooms: []
|
|
|
},
|
|
},
|
|
|
scrollTop: 0
|
|
scrollTop: 0
|
|
|
};
|
|
};
|
|
@@ -150,6 +178,19 @@ export default {
|
|
|
return options.filter(item => {
|
|
return options.filter(item => {
|
|
|
return this.searchInfo[item.listKey] && this.searchInfo[item.listKey].length > 0;
|
|
return this.searchInfo[item.listKey] && this.searchInfo[item.listKey].length > 0;
|
|
|
});
|
|
});
|
|
|
|
|
+ },
|
|
|
|
|
+ isEmpty() {
|
|
|
|
|
+ return (
|
|
|
|
|
+ this.searchInfo.collections.length === 0 &&
|
|
|
|
|
+ this.searchInfo.domains.length === 0 &&
|
|
|
|
|
+ this.searchInfo.pictures.length === 0 &&
|
|
|
|
|
+ this.searchInfo.news.length === 0 &&
|
|
|
|
|
+ this.searchInfo.mintActivities.length === 0 &&
|
|
|
|
|
+ this.searchInfo.minters.length === 0 &&
|
|
|
|
|
+ this.searchInfo.users.length === 0 &&
|
|
|
|
|
+ this.searchInfo.showrooms.length === 0 &&
|
|
|
|
|
+ !this.loading
|
|
|
|
|
+ );
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
@@ -160,12 +201,17 @@ export default {
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
getSearch() {
|
|
getSearch() {
|
|
|
|
|
+ if (!this.search) {
|
|
|
|
|
+ this.$toast('搜索内容不能为空');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
this.loading = true;
|
|
this.loading = true;
|
|
|
this.$toast.loading({
|
|
this.$toast.loading({
|
|
|
message: '加载中...',
|
|
message: '加载中...',
|
|
|
forbidClick: true
|
|
forbidClick: true
|
|
|
});
|
|
});
|
|
|
this.searchKey = this.search;
|
|
this.searchKey = this.search;
|
|
|
|
|
+ this.active = 0;
|
|
|
this.$http
|
|
this.$http
|
|
|
.post('/statistic/globalSearch', {
|
|
.post('/statistic/globalSearch', {
|
|
|
search: this.search
|
|
search: this.search
|
|
@@ -269,10 +315,31 @@ export default {
|
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
|
line-height: 24px;
|
|
line-height: 24px;
|
|
|
padding: 10px 16px 7px;
|
|
padding: 10px 16px 7px;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ .flex();
|
|
|
|
|
+ justify-content: space-between;
|
|
|
// position: sticky;
|
|
// position: sticky;
|
|
|
// z-index: 20;
|
|
// z-index: 20;
|
|
|
// top: calc(var(--safe-top) + 148px);
|
|
// top: calc(var(--safe-top) + 148px);
|
|
|
// background-color: #000;
|
|
// background-color: #000;
|
|
|
|
|
+ .tab-more {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: #ffffff80;
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ content: '>';
|
|
|
|
|
+ margin-left: 3px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ left: 16px;
|
|
|
|
|
+ right: 16px;
|
|
|
|
|
+ background: #272728;
|
|
|
|
|
+ height: 1px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.block {
|
|
.block {
|
|
@@ -281,7 +348,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.van-list {
|
|
.van-list {
|
|
|
- padding: 8px;
|
|
|
|
|
|
|
+ padding: 4px 8px;
|
|
|
--bg2: #2b2b2c;
|
|
--bg2: #2b2b2c;
|
|
|
--text0: #fff;
|
|
--text0: #fff;
|
|
|
--btnplaintBg: rgba(255, 255, 255, 0.08);
|
|
--btnplaintBg: rgba(255, 255, 255, 0.08);
|
|
@@ -298,10 +365,14 @@ export default {
|
|
|
.showInfo + .showInfo {
|
|
.showInfo + .showInfo {
|
|
|
margin-top: 16px;
|
|
margin-top: 16px;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .product.dark {
|
|
|
|
|
+ background-color: #2b2b2c;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.list {
|
|
.list {
|
|
|
- margin: 8px 16px 0;
|
|
|
|
|
|
|
+ margin: 12px 16px 0;
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
@@ -320,4 +391,8 @@ export default {
|
|
|
margin-left: 10px;
|
|
margin-left: 10px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.content {
|
|
|
|
|
+ padding-bottom: 100px;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|