170 lines
3.5 KiB
Vue
170 lines
3.5 KiB
Vue
<template>
|
|
<div class="p-4">
|
|
<div class="flex bg-[#f2f1f7] rounded-lg w-[300px]">
|
|
<div
|
|
v-for="(item, index) in typeList"
|
|
:key="index"
|
|
class="px-2 py-3 flex-1 flex items-center justify-center cursor-pointer rounded-lg"
|
|
:style="{
|
|
background: item.type === currentType ? '#3162ff1a' : '#f1f2f7',
|
|
color: item.type === currentType ? '#3162ff' : '#666',
|
|
}"
|
|
@click="changeType(item.type)"
|
|
>
|
|
{{ item.text }}
|
|
{{ item.total > 999 ? "999+" : item.total }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<!-- <PictureList ref="listRef" :params="imageParams" /> -->
|
|
<ModelList
|
|
@modelTotal="modelTotal"
|
|
v-show="currentType === 'model'"
|
|
ref="modelRef"
|
|
:params="modelParams"
|
|
></ModelList>
|
|
|
|
<PictureList
|
|
@imageTotal="imageTotal"
|
|
v-show="currentType === 'image'" ref="imageRef" :params="imageParams" />
|
|
|
|
<WorkFlowList
|
|
@workFlowTotal="workFlowTotal"
|
|
v-show="currentType === 'workFlow'"
|
|
ref="workFlowRef"
|
|
:params="workFlowParams"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const modalStore = useModalStore();
|
|
// definePageMeta({
|
|
// middleware:[
|
|
// function (to:any){
|
|
// if(to.path !== '/search'){
|
|
// modalStore.searchQuery = ''
|
|
// }
|
|
// }
|
|
// ]
|
|
// })
|
|
import { computed, ref, watch } from "vue";
|
|
|
|
const route = useRoute();
|
|
const { type, keyword } = route.query as {type: string, keyword:string };
|
|
|
|
const currentType = ref("model");
|
|
const modelParams = ref({
|
|
name:modalStore.searchQuery
|
|
});
|
|
const workFlowParams = ref({
|
|
name:modalStore.searchQuery
|
|
});
|
|
const imageParams = ref({
|
|
name:modalStore.searchQuery
|
|
});
|
|
if(type != 'undefined'){
|
|
currentType.value = type
|
|
}
|
|
// debugger
|
|
// if(keyword){
|
|
// modelParams.value.name = keyword;
|
|
// imageParams.value.name = keyword;
|
|
// workFlowParams.value.name = keyword;
|
|
// }
|
|
const typeList = ref([
|
|
{
|
|
type: "model",
|
|
total: 0,
|
|
text: "模型",
|
|
},
|
|
{
|
|
type: "workFlow",
|
|
total: 0,
|
|
text: "工作流",
|
|
},
|
|
{
|
|
type: "image",
|
|
total: 0,
|
|
text: "作品",
|
|
},
|
|
]);
|
|
|
|
// 模型的参数
|
|
const modelRef = ref(null);
|
|
|
|
function onSearchModel() {
|
|
if (modelRef.value) {
|
|
modelRef.value?.initPageNUm();
|
|
}
|
|
}
|
|
onSearchModel();
|
|
|
|
// 工作流的参数
|
|
const workFlowRef = ref(null);
|
|
|
|
function onSearchWorkFlow() {
|
|
if (workFlowRef.value) {
|
|
workFlowRef.value?.initPageNUm();
|
|
}
|
|
}
|
|
onSearchWorkFlow();
|
|
|
|
// 图片的参数
|
|
const imageRef = ref(null);
|
|
|
|
function onSearchImage() {
|
|
if (imageRef.value) {
|
|
imageRef.value?.initPageNUm();
|
|
}
|
|
}
|
|
onSearchImage()
|
|
|
|
|
|
function handleSearch(newValue: string = "") {
|
|
// if (newValue) {
|
|
modelParams.value.name = newValue;
|
|
imageParams.value.name = newValue;
|
|
workFlowParams.value.name = newValue;
|
|
// }
|
|
onSearchModel();
|
|
onSearchImage();
|
|
onSearchWorkFlow();
|
|
|
|
// if (currentType.value === "model") {
|
|
// } else if (currentType.value === "image") {
|
|
// } else {
|
|
// }
|
|
}
|
|
// 切换类型
|
|
function changeType(type: string) {
|
|
currentType.value = type;
|
|
handleSearch();
|
|
}
|
|
|
|
|
|
// 返回总数
|
|
function modelTotal(total:number){
|
|
typeList.value[0].total = total
|
|
}
|
|
function workFlowTotal(total:number){
|
|
typeList.value[1].total = total
|
|
}
|
|
function imageTotal(total:number){
|
|
typeList.value[2].total = total
|
|
}
|
|
|
|
const searchQuery = computed(() => modalStore.searchQuery);
|
|
watch(searchQuery, (newValue:string) => {
|
|
handleSearch(newValue);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.test {
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|