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,
h3,
p {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
box-sizing: border-box;
}
html,
body,
#app {
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'KaiseiOpti-Medium';
color: #232323;
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'KaiseiOpti-Medium';
color: #232323;
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes opacity-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes z-index-10to-1 {
0% {
z-index: 10;
}
100% {
z-index: -1;
}
0% {
z-index: 10;
}
100% {
z-index: -1;
}
}
.flex {
display: flex;
display: flex;
}
.flex-center {
justify-content: center;
align-items: center;
justify-content: center;
align-items: center;
}
.flex-1 {
flex: 1;
flex: 1;
}
.flex-col {
flex-direction: column;
flex-direction: column;
}
.align-center {
align-items: center;
align-items: center;
}
.space-between {
justify-content: space-between;
justify-content: space-between;
}
.justify-center {
justify-content: center;
justify-content: center;
}
.relative {
position: relative;
position: relative;
}
.el-overlay {
--el-color-primary: #ff7a51;
--el-color-primary-light-3: #ffa785;
--el-color-primary-light-5: #ffc2aa;
--el-color-primary-light-7: #ffddcf;
--el-color-primary-light-8: #ffe8df;
--el-color-primary-light-9: #fff2ec;
--el-color-primary-dark-2: #cc6241;
--el-color-primary: #ff7a51;
--el-color-primary-light-3: #ffa785;
--el-color-primary-light-5: #ffc2aa;
--el-color-primary-light-7: #ffddcf;
--el-color-primary-light-8: #ffe8df;
--el-color-primary-light-9: #fff2ec;
--el-color-primary-dark-2: #cc6241;
}
.el-select,
.el-popper {
--el-color-primary: #6c6c6c;
/* 主灰色 */
--el-color-primary-light-3: #8a8a8a;
/* 较浅的灰色（混合20%白） */
--el-color-primary-light-5: #a8a8a8;
/* 更浅的灰色（混合33%白） */
--el-color-primary-light-7: #c6c6c6;
/* 浅灰色（混合47%白） */
--el-color-primary-light-8: #d4d4d4;
/* 很浅的灰色（混合53%白） */
--el-color-primary-light-9: #e3e3e3;
/* 极浅的灰色（混合60%白） */
--el-color-primary-dark-2: #565656;
/* 深灰色（加深20%） */
--el-color-primary: #6c6c6c;
/* 主灰色 */
--el-color-primary-light-3: #8a8a8a;
/* 较浅的灰色（混合20%白） */
--el-color-primary-light-5: #a8a8a8;
/* 更浅的灰色（混合33%白） */
--el-color-primary-light-7: #c6c6c6;
/* 浅灰色（混合47%白） */
--el-color-primary-light-8: #d4d4d4;
/* 很浅的灰色（混合53%白） */
--el-color-primary-light-9: #e3e3e3;
/* 极浅的灰色（混合60%白） */
--el-color-primary-dark-2: #565656;
/* 深灰色（加深20%） */
}
.mini-scrollbar {
--mini-scrollbar-width: 0.4rem;
--mini-scrollbar-width: 0.4rem;
}
.mini-scrollbar::-webkit-scrollbar {
width: var(--mini-scrollbar-width);
width: var(--mini-scrollbar-width);
}
.mini-scrollbar::-webkit-scrollbar-thumb {
border-radius: 0.4rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 0.4rem;
background: rgba(0, 0, 0, 0.2);
}
.mosaic-bg {
--mosaic-bg-size: 1rem;
--mosaic-bg-color1: #efefef;
--mosaic-bg-color2: #fff;
background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%);
background-repeat: repeat;
background-position: 50% 50%;
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
--mosaic-bg-size: 1rem;
--mosaic-bg-color1: #efefef;
--mosaic-bg-color2: #fff;
background-image: repeating-conic-gradient(
var(--mosaic-bg-color1) 0% 25%,
var(--mosaic-bg-color2) 0% 50%
);
background-repeat: repeat;
background-position: 50% 50%;
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
}
button[custom],
button[custom="white"] {
min-width: 19.4rem;
height: 5rem;
padding: 0 1rem;
border-radius: 0;
font-family: KaiseiOpti-Bold;
font-size: var(--button-font-size, 2rem);
color: var(--button-color, #232323);
background: var(--button-bgcolor, #fff);
border: var(--button-border, none);
cursor: pointer;
button[custom='white'] {
min-width: 19.4rem;
height: 5rem;
padding: 0 1rem;
border-radius: 0;
font-family: KaiseiOpti-Bold;
font-size: var(--button-font-size, 2rem);
color: var(--button-color, #232323);
background: var(--button-bgcolor, #fff);
border: var(--button-border, none);
cursor: pointer;
}
button[custom]:active,
button[custom="white"]:active {
background: var(--button-click-bgcolor, #e4e4e4);
color: var(--button-click-color, #232323);
button[custom='white']:active {
background: var(--button-click-bgcolor, #e4e4e4);
color: var(--button-click-color, #232323);
}
button[custom="black"] {
--button-bgcolor: #232323;
--button-color: #fff;
--button-click-bgcolor: #333;
--button-click-color: #fff;
--button-font-size: 1.6rem;
button[custom='black'] {
--button-bgcolor: #232323;
--button-color: #fff;
--button-click-bgcolor: #333;
--button-click-color: #fff;
--button-font-size: 1.6rem;
}
button[custom="black-box"] {
--button-bgcolor: transparent;
--button-color: #232323;
--button-border: 0.2rem solid #979797;
--button-click-bgcolor: #979797;
--button-click-color: #fff;
--button-font-size: 1.6rem;
button[custom='black-box'] {
--button-bgcolor: transparent;
--button-color: #232323;
--button-border: 0.2rem solid #979797;
--button-click-bgcolor: #979797;
--button-click-color: #fff;
--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'
interface Props {
sortType?: number
}
const props = withDefaults(defineProps<Props>(), {
sortType: 1
})
const buyerId = useUserInfoStore().state.userInfo?.userId
interface FilterOption {
@@ -131,6 +139,7 @@
)
const dataList = ref([])
const rawDataList = ref([]) // Store the original API data
const dataListRef = ref<HTMLDivElement | null>(null)
const assetsScrollRef = ref<HTMLDivElement | null>(null)
const gridColumnCount = shallowRef(1)
@@ -174,15 +183,18 @@
const content = res.content ?? []
if (pageParams.page === 1) {
dataList.value = content
rawDataList.value = content
} else {
dataList.value = [...dataList.value, ...content]
rawDataList.value = [...rawDataList.value, ...content]
}
hasMoreAssets.value = content.length >= pageParams.size
if (hasMoreAssets.value) {
pageParams.page += 1
}
// Apply sorting after fetching data
applySorting()
} finally {
if (requestId === assetsRequestId.value) {
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(
() => filters,
debounce(() => {
@@ -269,12 +304,20 @@
const handleSelectItem = (item) => {
item.checked = !item.checked
// Re-apply sorting when selection changes and sortType is "Selected First"
if (props.sortType === 2) {
applySorting()
}
}
const handleSelectAll = (flag) => {
dataList.value.forEach((item) => {
item.checked = flag
})
// Re-apply sorting when selection changes and sortType is "Selected First"
if (props.sortType === 2) {
applySorting()
}
}
const handleDownloadSelected = () => {

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

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