aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 我的衣柜筛选

Browse Source
This commit is contained in:
zhangyahui
2026-05-26 15:24:10 +08:00
parent dc6658e1dd
commit ec4c3bc81f
3 changed files with 147 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/assets/css/style.css
View File

@@ -7,145 +7,152 @@ h1,
h2, h2,
h3, h3,
p { p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
html, html,
body, body,
#app { #app {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-family: 'KaiseiOpti-Medium'; font-family: 'KaiseiOpti-Medium';
color: #232323; color: #232323;
} }
@keyframes loading { @keyframes loading {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes opacity-in { @keyframes opacity-in {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
@keyframes z-index-10to-1 { @keyframes z-index-10to-1 {
0% { 0% {
z-index: 10; z-index: 10;
} }
100% { 100% {
z-index: -1; z-index: -1;
} }
} }
.flex { .flex {
display: flex; display: flex;
} }
.flex-center { .flex-center {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.flex-1 { .flex-1 {
flex: 1; flex: 1;
} }
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
.align-center { .align-center {
align-items: center; align-items: center;
} }
.space-between { .space-between {
justify-content: space-between; justify-content: space-between;
} }
.justify-center { .justify-center {
justify-content: center; justify-content: center;
} }
.relative { .relative {
position: relative; position: relative;
} }
.el-overlay { .el-overlay {
--el-color-primary: #ff7a51; --el-color-primary: #ff7a51;
--el-color-primary-light-3: #ffa785; --el-color-primary-light-3: #ffa785;
--el-color-primary-light-5: #ffc2aa; --el-color-primary-light-5: #ffc2aa;
--el-color-primary-light-7: #ffddcf; --el-color-primary-light-7: #ffddcf;
--el-color-primary-light-8: #ffe8df; --el-color-primary-light-8: #ffe8df;
--el-color-primary-light-9: #fff2ec; --el-color-primary-light-9: #fff2ec;
--el-color-primary-dark-2: #cc6241; --el-color-primary-dark-2: #cc6241;
} }
.el-select, .el-select,
.el-popper { .el-popper {
--el-color-primary: #6c6c6c; --el-color-primary: #6c6c6c;
/* 主灰色 */ /* 主灰色 */
--el-color-primary-light-3: #8a8a8a; --el-color-primary-light-3: #8a8a8a;
/* 较浅的灰色（混合20%白） */ /* 较浅的灰色（混合20%白） */
--el-color-primary-light-5: #a8a8a8; --el-color-primary-light-5: #a8a8a8;
/* 更浅的灰色（混合33%白） */ /* 更浅的灰色（混合33%白） */
--el-color-primary-light-7: #c6c6c6; --el-color-primary-light-7: #c6c6c6;
/* 浅灰色（混合47%白） */ /* 浅灰色（混合47%白） */
--el-color-primary-light-8: #d4d4d4; --el-color-primary-light-8: #d4d4d4;
/* 很浅的灰色（混合53%白） */ /* 很浅的灰色（混合53%白） */
--el-color-primary-light-9: #e3e3e3; --el-color-primary-light-9: #e3e3e3;
/* 极浅的灰色（混合60%白） */ /* 极浅的灰色（混合60%白） */
--el-color-primary-dark-2: #565656; --el-color-primary-dark-2: #565656;
/* 深灰色（加深20%） */ /* 深灰色（加深20%） */
} }
.mini-scrollbar { .mini-scrollbar {
--mini-scrollbar-width: 0.4rem; --mini-scrollbar-width: 0.4rem;
} }
.mini-scrollbar::-webkit-scrollbar { .mini-scrollbar::-webkit-scrollbar {
width: var(--mini-scrollbar-width); width: var(--mini-scrollbar-width);
} }
.mini-scrollbar::-webkit-scrollbar-thumb { .mini-scrollbar::-webkit-scrollbar-thumb {
border-radius: 0.4rem; border-radius: 0.4rem;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
} }
.mosaic-bg { .mosaic-bg {
--mosaic-bg-size: 1rem; --mosaic-bg-size: 1rem;
--mosaic-bg-color1: #efefef; --mosaic-bg-color1: #efefef;
--mosaic-bg-color2: #fff; --mosaic-bg-color2: #fff;
background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%); background-image: repeating-conic-gradient(
background-repeat: repeat; var(--mosaic-bg-color1) 0% 25%,
background-position: 50% 50%; var(--mosaic-bg-color2) 0% 50%
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size); );
background-repeat: repeat;
background-position: 50% 50%;
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
} }
button[custom], button[custom],
button[custom="white"] { button[custom='white'] {
min-width: 19.4rem; min-width: 19.4rem;
height: 5rem; height: 5rem;
padding: 0 1rem; padding: 0 1rem;
border-radius: 0; border-radius: 0;
font-family: KaiseiOpti-Bold; font-family: KaiseiOpti-Bold;
font-size: var(--button-font-size, 2rem); font-size: var(--button-font-size, 2rem);
color: var(--button-color, #232323); color: var(--button-color, #232323);
background: var(--button-bgcolor, #fff); background: var(--button-bgcolor, #fff);
border: var(--button-border, none); border: var(--button-border, none);
cursor: pointer; cursor: pointer;
} }
button[custom]:active, button[custom]:active,
button[custom="white"]:active { button[custom='white']:active {
background: var(--button-click-bgcolor, #e4e4e4); background: var(--button-click-bgcolor, #e4e4e4);
color: var(--button-click-color, #232323); color: var(--button-click-color, #232323);
} }
button[custom="black"] { button[custom='black'] {
--button-bgcolor: #232323; --button-bgcolor: #232323;
--button-color: #fff; --button-color: #fff;
--button-click-bgcolor: #333; --button-click-bgcolor: #333;
--button-click-color: #fff; --button-click-color: #fff;
--button-font-size: 1.6rem; --button-font-size: 1.6rem;
} }
button[custom="black-box"] { button[custom='black-box'] {
--button-bgcolor: transparent; --button-bgcolor: transparent;
--button-color: #232323; --button-color: #232323;
--button-border: 0.2rem solid #979797; --button-border: 0.2rem solid #979797;
--button-click-bgcolor: #979797; --button-click-bgcolor: #979797;
--button-click-color: #fff; --button-click-color: #fff;
--button-font-size: 1.6rem; --button-font-size: 1.6rem;
}
.el-select-dropdown .el-select-dropdown__item {
padding: 0 2rem;
} }

47
src/views/wardrobe/Assets.vue
View File

@@ -97,6 +97,14 @@
import { debounce } from 'lodash-es' import { debounce } from 'lodash-es'
interface Props {
sortType?: number
}
const props = withDefaults(defineProps<Props>(), {
sortType: 1
})
const buyerId = useUserInfoStore().state.userInfo?.userId const buyerId = useUserInfoStore().state.userInfo?.userId
interface FilterOption { interface FilterOption {
@@ -131,6 +139,7 @@
) )
const dataList = ref([]) const dataList = ref([])
const rawDataList = ref([]) // Store the original API data
const dataListRef = ref<HTMLDivElement | null>(null) const dataListRef = ref<HTMLDivElement | null>(null)
const assetsScrollRef = ref<HTMLDivElement | null>(null) const assetsScrollRef = ref<HTMLDivElement | null>(null)
const gridColumnCount = shallowRef(1) const gridColumnCount = shallowRef(1)
@@ -174,15 +183,18 @@
const content = res.content ?? [] const content = res.content ?? []
if (pageParams.page === 1) { if (pageParams.page === 1) {
dataList.value = content rawDataList.value = content
} else { } else {
dataList.value = [...dataList.value, ...content] rawDataList.value = [...rawDataList.value, ...content]
} }
hasMoreAssets.value = content.length >= pageParams.size hasMoreAssets.value = content.length >= pageParams.size
if (hasMoreAssets.value) { if (hasMoreAssets.value) {
pageParams.page += 1 pageParams.page += 1
} }
// Apply sorting after fetching data
applySorting()
} finally { } finally {
if (requestId === assetsRequestId.value) { if (requestId === assetsRequestId.value) {
isLoadingAssets.value = false isLoadingAssets.value = false
@@ -190,6 +202,29 @@
} }
} }
// Function to apply sorting based on sortType
const applySorting = () => {
if (props.sortType === 1) {
// Date Added - use original API order
dataList.value = [...rawDataList.value]
} else if (props.sortType === 2) {
// Selected First - sort by checked status
dataList.value = [...rawDataList.value].sort((a, b) => {
if (a.checked && !b.checked) return -1
if (!a.checked && b.checked) return 1
return 0
})
}
}
// Watch for sortType changes
watch(
() => props.sortType,
() => {
applySorting()
}
)
watch( watch(
() => filters, () => filters,
debounce(() => { debounce(() => {
@@ -269,12 +304,20 @@
const handleSelectItem = (item) => { const handleSelectItem = (item) => {
item.checked = !item.checked item.checked = !item.checked
// Re-apply sorting when selection changes and sortType is "Selected First"
if (props.sortType === 2) {
applySorting()
}
} }
const handleSelectAll = (flag) => { const handleSelectAll = (flag) => {
dataList.value.forEach((item) => { dataList.value.forEach((item) => {
item.checked = flag item.checked = flag
}) })
// Re-apply sorting when selection changes and sortType is "Selected First"
if (props.sortType === 2) {
applySorting()
}
} }
const handleDownloadSelected = () => { const handleDownloadSelected = () => {

2
src/views/wardrobe/index.vue
View File

@@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<component :is="activePanel" class="wardrobe-shell__panel" /> <component :is="activePanel" class="wardrobe-shell__panel" :sort-type="activeSort" />
</div> </div>
<Footer /> <Footer />
</div> </div>