155 lines
3.8 KiB
Vue
155 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
import sellerHeader from "../../seller-header.vue"
|
|
import historyList from "./historyList.vue"
|
|
import { useRouter } from "vue-router"
|
|
|
|
|
|
//const props = defineProps({
|
|
//})
|
|
//const emit = defineEmits([
|
|
//])
|
|
const router = useRouter()
|
|
let getCollectionListData = reactive({
|
|
process: [],
|
|
projectName: '',
|
|
|
|
})
|
|
const isShowMark = ref(false)
|
|
const historyListRef = ref(null) as any
|
|
const handleSearch = () => {
|
|
historyListRef.value.getCreateList()
|
|
}
|
|
const setProcess = (type:any) => {
|
|
if(type){
|
|
getCollectionListData.process = [type]
|
|
}else{
|
|
getCollectionListData.process = []
|
|
}
|
|
historyListRef.value.getCreateList()
|
|
}
|
|
const selectCollectionItem = (item:any) => {
|
|
router.push({path:'/home/seller/myListings/select/'+item.id})
|
|
}
|
|
|
|
onMounted(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
</script>
|
|
<template>
|
|
<div class="create-select">
|
|
<seller-header
|
|
title="Select Collection"
|
|
:breadcrumbs="[
|
|
{title:'My Listings', name:'myListingsIndex'},
|
|
{title:'Select Collection', name: 'myListingsSelect' }
|
|
]"
|
|
>
|
|
</seller-header>
|
|
<div class="content">
|
|
<div class="title">
|
|
<div class="left">
|
|
<div :class="{active:!getCollectionListData.process?.[0]}" @click="setProcess('')">All</div>
|
|
<div :class="{active:getCollectionListData.process[0] == 'SERIES_DESIGN'}" @click="setProcess('SERIES_DESIGN')">Series Design</div>
|
|
<div :class="{active:getCollectionListData.process[0] == 'SINGLE_DESIGN'}" @click="setProcess('SINGLE_DESIGN')">Single Design</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="search_input flex flex-align-center">
|
|
<input
|
|
class="search_input_inner"
|
|
v-model="getCollectionListData.projectName"
|
|
:bordered="false"
|
|
@keydown.enter="handleSearch"
|
|
placeholder="123123"
|
|
/>
|
|
<!-- <SearchOutlined class="search_input_icon" @click="handleSearch" /> -->
|
|
<SvgIcon name="CSearch" size="20" class="search_input_icon" @click="handleSearch" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<historyList ref="historyListRef" :getCollectionListData="getCollectionListData" @selectCollectionItem="selectCollectionItem"></historyList>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="less">
|
|
.create-select {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
> .content {
|
|
margin-top: 2rem;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 2.4rem 3rem;
|
|
background-color: #f9fafa;
|
|
border-radius: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
> .title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
> .left{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.2rem;
|
|
> div{
|
|
min-width: 9rem;
|
|
padding: .4rem 2.6rem;
|
|
background-color: #fff;
|
|
border-radius: 4rem;
|
|
border: 1px solid #000000;
|
|
font-weight: 500;
|
|
font-size: 1.6rem;
|
|
line-height: 150%;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
&:hover{
|
|
color: #fff;
|
|
background-color: #000;
|
|
|
|
}
|
|
}
|
|
> .active{
|
|
color: #fff;
|
|
background-color: #000;
|
|
}
|
|
}
|
|
> .right{
|
|
.search_input {
|
|
height: 3.2rem;
|
|
width: 27rem; // 默认宽度
|
|
background-color: #fff;
|
|
border: 1px solid #000;
|
|
border-radius: 3rem;
|
|
// column-gap: 3rem;
|
|
padding: 0 2rem;
|
|
.search_input_inner {
|
|
border: none;
|
|
height: 100%;
|
|
width: calc(100% - 2rem);
|
|
padding: .6rem 0;
|
|
font-size: 1.2rem;
|
|
&::placeholder {
|
|
font-size: 1.2rem;
|
|
}
|
|
&::-webkit-input-placeholder{
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
.search_input_icon {
|
|
font-size: 1.6rem;
|
|
color: #000;
|
|
width: initial;
|
|
height: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |