Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front

src/assets/icons/digital/pullIcon.svg

@@ -0,0 +1,5 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.82684 8.7465L7.13386 6.43947L9.44089 8.7465C9.67278 8.97839 10.0474 8.97839 10.2793 8.7465C10.5112 8.51461 10.5112 8.14001 10.2793 7.90812L7.55008 5.17893C7.31819 4.94704 6.94359 4.94704 6.7117 5.17893L3.98251 7.90812C3.75062 8.14001 3.75062 8.51461 3.98251 8.7465C4.2144 8.97244 4.59495 8.97839 4.82684 8.7465Z" fill="black"/>
+</g>
+</svg>

src/components/checked.vue

@@ -14,11 +14,23 @@ const emit = defineEmits([
 	'update:selected'
 ])
 const checkList = computed(()=>{
-	return [props.selected]
+	if(props.selected[0] === ''){
+		return props.list.map(item => item.value)
+	}else{
+		return [...props.selected]
+	}
 })
 const handleChange = (val) => {
-	if (val.length > 1) {
+	emit('update:selected', val)
-		emit('update:selected', val[val.length - 1])
+}
+const checkAll = computed(()=>{
+	return checkList.value.length === props.list.length
+})
+const handleCheckAllChange = (val) => {
+	if(val){
+		emit('update:selected', props.list.map(item => item.value))
+	}else{
+		emit('update:selected', [])
 	}
 }
 let data = reactive({
@@ -31,6 +43,14 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
+	<div class="all">
+		<el-checkbox
+			v-model="checkAll"
+			@change="handleCheckAllChange"
+		>
+			All
+		</el-checkbox>
+	</div>
 	<el-checkbox-group v-model="checkList" @change="handleChange">
 		<el-checkbox 
 			v-for="item in props.list" 
@@ -42,6 +62,9 @@ const {} = toRefs(data);
 	</el-checkbox-group>
 </template>
 <style lang="less" scoped>
+	.all{
+		margin-bottom: 1.2rem;
+	}
 	.el-checkbox-group{
 		display: flex;
 		flex-direction: column;

src/views/digitalItem/commodity-list.vue

@@ -77,42 +77,24 @@ const {} = toRefs(data);
 		.list{
 			width: 100%;
 			flex: 1;
+			// display: grid;
+			// align-content: start;
+			// grid-template-columns: repeat(3, 1fr);
+			overflow: hidden;
+
 			display: grid;
 			align-content: start;
-			grid-template-columns: repeat(3, 1fr);
+			grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
-			overflow-y: auto;
+			border-top: 0.5px solid #585858;
+			padding: .5px 0 0 .5px;
 			/* 垂直线（右边框） */
 			.item{
 				position: relative;
 				padding: 1.2rem;
-				--commodity-marginBottom: 2rem;
-				--commodity-name-fontSize: 2rem;
-				--commodity-name-marginBottom: .8rem;
-				--commodity-price-fontSize: 1.6rem;
-			}
-			.item::before {
-				content: '';
-				position: absolute;
-				right: 0;
-				top: 0;
-				height: 100%;
-				border-right: 0.5px solid #585858;
-				z-index: 1;
-			}
-
-				/* 水平线（下边框） */
-			.item::after {
-				content: '';
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				width: 100%;
 				border-bottom: 0.5px solid #585858;
-				z-index: 1;
+				border-right: 0.5px solid #585858;
-			}
+				margin-right: -1px;
-				/* 移除最后一列的右边框 */
+				margin-bottom: -1px;
-			.item:nth-child(3n)::before {
-				display: none;
 			}
 		}
 	}

src/views/digitalItem/index.vue

@@ -16,6 +16,20 @@ const scrollTop = ref(0)
 const router = useRouter()
 let data = reactive({
 })
+
+const categoriesList = ref([
+	{
+		value:'Best Selling',
+		label:'Best Selling'
+	},{
+		value:'Price: Low to High',
+		label:'Price: Low to High'
+	},{
+		value:'Newest First',
+		label:'Newest First'
+	},
+])
+const categories = ref('Newest First')
 const addShopping = (item) => {}
 const openDetail = (item) => {
 	scrollTop.value = digitalItemRef.value.scrollTop
@@ -42,6 +56,22 @@ const {} = toRefs(data);
 				<p class="info">Virtual fashion creations collected in your personal archive</p>
 			</div>
 		</div>
+		<div class="filters">
+			<div class="filter-item">
+				<el-select v-model="categories" placeholder="Sort By" :teleported="false">
+					<template #label="{ label }">
+						<span class="header-label">Sort By</span>
+						<span class="header-value">{{ label }}</span>
+					</template>
+					<el-option
+						v-for="item in categoriesList"
+						:key="item.label"
+						:value="item.value"
+						:label="item.label"
+					/>
+				</el-select>
+			</div>
+		</div>
 		<div class="content">
 			<div class="merchant-info">
 				<MerchantInfo></MerchantInfo>
@@ -89,12 +119,67 @@ const {} = toRefs(data);
 				}
 			}
 		}
-		.content{
+		> .filters{
+			width: 100%;
+			height: 6rem;
+			display: flex;
+			align-items: center;
+			padding: 0 9rem;
+			justify-content: flex-end;
+			> .filter-item{	
+				:deep(.el-select) {
+					width: 15rem;
+					--el-border-radius-base: 0;
+					--el-select-input-color: rgba(0, 0, 0, 0.5);
+					--el-select-input-font-size: 1rem;
+					.el-select__wrapper {
+						font-size: 1.07rem;
+						padding: 0 0.7rem;
+						line-height: 1;
+						min-height: 0;
+						height: 2.2rem;
+
+						.header-label {
+							font-family: KaiseiOpti-Regular;
+							color: rgba(0, 0, 0, 0.5);
+							margin-right: 0.6rem;
+						}
+						.header-value {
+							font-family: KaiseiOpti-Bold;
+							color: #232323;
+						}
+					}
+					.el-select__popper {
+						--el-popper-border-radius: 0;
+						border: 0.1rem solid #d0d0d0;
+						.el-select-dropdown__list {
+							padding: 0;
+							> .el-select-dropdown__item {
+								margin-bottom: 0.89rem;
+								color: #232323;
+								font-size: 1.069rem;
+								height: 2.68rem;
+								line-height: 2.68rem;
+								padding: 0 1.4rem;
+								&:last-child {
+									margin-bottom: 0;
+								}
+								&.is-selected {
+									font-family: KaiseiOpti-Bold;
+									background-color: #f4f4f4;
+								}
+							}
+						}
+					}
+				}
+
+			}
+		}
+		> .content{
 			display: flex;
 			height: auto;
 			align-items: flex-start;
 			border-top: 0.5px solid #585858;
-			margin-top: 6rem;
 			.merchant-info{
 				width: 38.5rem;
 				padding-left: 10.2rem;

src/views/digitalItem/merchant-info.vue

@@ -7,10 +7,6 @@ import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 let data = reactive({
 })
 const categoriesList = ref([
-	{
-		label: 'All',
-		value: 'All'
-	},
 	{
 		label: 'Outwear',
 		value: 'Outwear'
@@ -37,10 +33,6 @@ const categoriesList = ref([
 	},
 ]);
 const genderList = ref([
-	{
-		label: 'All',
-		value: 'All'
-	},
 	{
 		label: 'Male',
 		value: 'Male'
@@ -50,12 +42,12 @@ const genderList = ref([
 		value: 'Female'
 	},
 ])
-const categories = ref('All')
+const categories = ref([''])
-const gender = ref('All')
+const gender = ref([''])
 
 const clearFilters = () => {
-	categories.value = 'All'
+	categories.value = ['']
-	gender.value = 'All'
+	gender.value = ['']
 }
 onMounted(()=>{
 })