购物车

2026-05-21 14:36:29 +08:00
parent 31de24cc2b
commit e7957532e8
9 changed files with 160 additions and 106 deletions
--- a/src/views/shoppingCart/index.d.js
+++ b/src/views/shoppingCart/index.d.js
@@ -0,0 +1,7 @@
+/** 商品状态 */
+export const SCART_STATUS = {
+	/** 正常 */
+	NORMAL: 1,
+	/** 下架 */
+	DISABLED: 0,
+}
--- a/src/views/shoppingCart/sc-item.vue
+++ b/src/views/shoppingCart/sc-item.vue
@@ -1,7 +1,14 @@
 <template>
-	<div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
+	<div
+		class="sc-item"
+		:class="{
+			'is-order-actions-layout': orderActionsLayout,
+			disabled
+		}"
+	>
 		<slot name="checkbox" />
-		<img :src="info.url" />
+		{{ info.status }}
+		<img :src="info.cover" />
 		<div class="content">
 			<div class="title">{{ info.title }}</div>
 			<div class="brand">
@@ -12,14 +19,20 @@
 				<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
 			</div>
 			<div class="date" v-if="showDate">
-				<!-- <div class="icon"><svg-icon name="order-file" size="18" /></div> -->
 				<div class="text">
 					{{ FormatDate(info.date, 'SM D, YYYY, h:mm A') }}
 				</div>
 			</div>
 		</div>
 		<div class="right">
-			<div class="amount">${{ info.amount }}<span> HKD</span></div>
+			<div class="unshelve" v-show="disabled">
+				<div class="title">
+					<span><svg-icon name="order-warning" size="20" /></span>
+					No Longer Available
+				</div>
+				<div class="tip">Delisted from marketplace</div>
+			</div>
+			<div class="amount" v-show="!disabled">${{ info.amount }}<span> HKD</span></div>
 			<SvgIcon
 				v-if="orderActionsLayout"
 				class="download"
@@ -44,10 +57,22 @@
 		showDate: { type: Boolean, default: true },
 		showRemove: { type: Boolean, default: true },
 		orderActionsLayout: { type: Boolean, default: false },
-		info: { type: Object, default: () => {} }
+		info: {
+			type: Object as () => {
+				status: number
+				title: string
+				brand: string
+				tags: string[]
+				date: string
+				amount: number
+				cover: string
+			},
+			default: () => {}
+		},
+		disabled: { type: Boolean, default: false }
 	})
 	const onRemove = () => {
-		emit('remove', props.info.id)
+		emit('remove', props.info)
 	}
 </script>

@@ -76,7 +101,7 @@
 			> .title {
 				font-family: KaiseiOpti-Bold;
 				font-size: var(--sc-item-title-font-size, 2.4rem);
-				color: #232323;
+				color: var(--sc-item-title-color, #232323);
 			}
 			> .brand {
 				display: flex;
@@ -85,11 +110,12 @@
 					width: 2.4rem;
 					height: 2.4rem;
 					margin-right: 1rem;
+					color: var(--sc-item-brand-color, #232323);
 				}
 				> .text {
 					font-size: var(--sc-item-brand-font-size, 1.6rem);
 					text-decoration: underline;
-					color: #232323;
+					color: var(--sc-item-brand-color, #232323);
 				}
 			}
 			> .tags {
@@ -104,24 +130,17 @@
 					font-size: var(--sc-item-tag-font-size, 1.4rem);
 					padding: var(--sc-item-tag-padding, 0 1rem);
 					text-align: center;
-					color: #8f8f8f;
-					background-color: #eee;
+					color: var(--sc-item-tag-color, #8f8f8f);
+					background-color: var(--sc-item-tag-bg-color, #eee);
 				}
 			}
 			> .date {
 				display: flex;
 				align-items: center;
-				> .icon {
-					width: 2.4rem;
-					height: 2.4rem;
-					margin-right: 1rem;
-					color: #808080;
-				}
-
+				color: var(--sc-item-date-color, #808080);
 				> .text {
 					font-family: KaiseiOpti-Regular;
 					font-size: 1.4rem;
-					color: #808080;
 				}
 			}
 		}
@@ -133,6 +152,26 @@
 			align-items: var(--sc-item-right-align-items);
 			height: var(--sc-item-right-height);
 			margin-top: var(--sc-item-right-margin-top);
+			> .unshelve {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				> .title {
+					margin-bottom: 0.8rem;
+					font-family: KaiseiOpti-Bold;
+					font-size: 1.6rem;
+					color: #000;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					gap: 0.8rem;
+				}
+				> .tip {
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.4rem;
+					color: #585858;
+				}
+			}
 			> .amount {
 				font-family: KaiseiOpti-Bold;
 				font-size: var(--sc-item-amount-font-size, 2.2rem);
@@ -147,7 +186,7 @@
 				margin-top: var(--sc-item-remove-margin-top, 9rem);
 				display: flex;
 				align-items: center;
-				justify-content: center;
+				justify-content: flex-end;
 				user-select: none;
 				cursor: pointer;
 				> .icon {
@@ -196,5 +235,14 @@
 				}
 			}
 		}
+		&.disabled {
+			--sc-item-title-color: #cbcbcb;
+			--sc-item-brand-color: #cbcbcb;
+			--sc-item-date-color: #cbcbcb;
+			--sc-item-tag-color: #cbcbcb;
+			> img {
+				opacity: 0.5;
+			}
+		}
 	}
 </style>
--- a/src/views/shoppingCart/sc-list.vue
+++ b/src/views/shoppingCart/sc-list.vue
@@ -12,7 +12,7 @@
 				<div class="left">
 					<el-checkbox
 						:model-value="allSelected"
-						:indeterminate="selectedCount === 0 ? false : selectedCount < list.length"
+						:indeterminate="selectedCount === 0 ? false : selectedCount < maxLength"
 						@click="handleAllAllClick"
 					/>
 					<span class="count">{{ selectedCount }}&nbsp;&nbsp;Selected</span>
@@ -45,15 +45,21 @@
 			/>
 			<sc-item
 				v-for="v in list"
-				:key="v.id"
+				:key="v.cartId"
 				:info="v"
 				:show-tags="!isMini || isView"
 				:show-date="!isMini"
 				:show-remove="!isView"
 				@remove="handleRemoveClick"
+				:disabled="v.status === SCART_STATUS.DISABLED"
 			>
-				<template #checkbox>
-					<el-checkbox v-model="v.checked" v-if="!isMini" @change="handleSelectedChange" />
+				<template #checkbox v-if="!isMini">
+					<el-checkbox
+						disabled
+						v-if="v.status === SCART_STATUS.DISABLED"
+						style="opacity: 0; pointer-events: none"
+					/>
+					<el-checkbox v-else v-model="v.checked" @change="handleSelectedChange" />
 				</template>
 			</sc-item>
 		</div>
@@ -70,6 +76,9 @@
 </template>

 <script setup lang="ts">
+	import { ElMessageBox } from 'element-plus'
+	import { SCART_STATUS } from './index.d'
+	import { GetShoppingCartList, RemoveShoppingCartItem } from '@/api/shoppingCart'
 	import { computed, ref, onMounted } from 'vue'
 	import { FormatBytes, FormatDate } from '@/utils/tools'
 	import scItem from './sc-item.vue'
@@ -80,90 +89,74 @@
 		isMini: { type: Boolean, default: false },
 		isView: { type: Boolean, default: false }
 	})
-	const allTotalSize = computed(() => {
-		const total = list.value.reduce((pre, cur) => pre + cur.fileSize, 0)
-		const str = FormatBytes(total, { unitBig: true })
-		return {
-			size: str.split(' ')[0],
-			unit: str.split(' ')[1]
-		}
-	})
 	const allAmount = computed(() => list.value.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
 	const selectedCount = computed(() => list.value.filter((v) => v.checked).length)
+	const maxLength = computed(() => list.value.filter((v) => v.status === SCART_STATUS.NORMAL).length)
 	const allSelected = computed(() =>
-		list.value.length === 0 ? false : list.value.every((v) => v.checked)
+		list.value.length === 0
+			? false
+			: list.value.filter((v) => v.status === SCART_STATUS.NORMAL).every((v) => v.checked)
 	)
-	const sortBy = ref('')
+	const sortBy = ref('DateAdded')
 	const sortByOptions = ref([
 		{
-			label: 'Default',
-			value: 'Default'
+			label: 'Best Selling',
+			value: 'BestSelling'
+		},
+		{
+			label: 'Price: Low to High',
+			value: 'PriceLowToHigh'
 		},
 		{
 			label: 'Selected First',
-			value: 'Selected First'
+			value: 'SelectedFirst'
 		},
 		{
 			label: 'Date Added',
-			value: 'Date Added'
+			value: 'DateAdded'
 		}
 	])

-	const list = ref([
-		{
-			id: 1,
-			url: 'http://118.31.39.42:3000/falls/shopping-cart-1.png',
-			title: 'North Outfit Set',
-			brand: 'Roaming Clouds',
-			date: '2026-5-20 5:20',
-			amount: 49.99,
-			tags: ['female', 'skirt', 'blouse', 'outwear'],
-			checked: true
-		},
-		{
-			id: 2,
-			url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png',
-			title: 'Weekend Drift Co-ord',
-			brand: 'Urban Line Edit',
-			date: '2026-5-21 13:14',
-			amount: 9.99,
-			tags: ['female', 'skirt', 'blouse', 'outwear'],
-			checked: false
-		},
-		{
-			id: 3,
-			url: 'http://118.31.39.42:3000/falls/shopping-cart-3.png',
-			title: 'Static Street Suit',
-			brand: 'Off Grid Apparel',
-			date: '2026-5-21 13:14',
-			amount: 12,
-			tags: ['female', 'skirt', 'blouse', 'outwear'],
-			checked: true
-		},
-		{
-			id: 4,
-			url: 'http://118.31.39.42:3000/falls/shopping-cart-4.png',
-			title: 'Maison Contour Suit',
-			brand: 'Ivory Muse Studio',
-			date: '2026-5-21 13:14',
-			amount: 18,
-			tags: ['female', 'skirt', 'blouse', 'outwear'],
-			checked: true
-		},
-		{
-			id: 5,
-			url: 'http://118.31.39.42:3000/falls/shopping-cart-5.png',
-			title: 'Prime Atelier Set',
-			brand: 'Ivory Muse Studio',
-			date: '2026-5-21 13:14',
-			amount: 20,
-			tags: ['female', 'skirt', 'blouse', 'outwear'],
-			checked: false
+	const list_ = ref([])
+	const list = computed(() => {
+		// if(sortBy.value === 'BestSelling') {
+		// 	return list_.value.sort((a, b) => b.sales - a.sales)
+		// }
+		if (sortBy.value === 'PriceLowToHigh') {
+			return list_.value.filter(() => true).sort((a, b) => a.amount - b.amount)
 		}
-	])
+		if (sortBy.value === 'SelectedFirst') {
+			return list_.value.filter(() => true).sort((a, b) => (b.checked ? 1 : 0) - (a.checked ? 1 : 0))
+		}
+		if (sortBy.value === 'DateAdded') {
+			return list_.value.filter(() => true).sort((a, b) => b.date - a.date)
+		}
+		return list_.value.filter(() => true)
+	})
+	const GetList = () => {
+		GetShoppingCartList(true).then((res: any) => {
+			const arr = []
+			res?.forEach((v, i) => {
+				const obj = {
+					cartId: v.cartId, //购物车ID
+					listingId: v.listingId, //资产ID
+					title: v.title, //标题
+					cover: v.cover, //封面
+					amount: v.price, //价格
+					status: v.status, //状态
+					date: v.addTime, //添加时间
+					checked: false
+				}
+				arr.push(obj)
+			})
+			list_.value = arr
+			handleSelectedChange()
+		})
+	}
+	GetList()
 	const handleAllAllClick = (checked?: boolean) => {
 		const checked_ = typeof checked === 'boolean' ? checked : !allSelected.value
-		list.value.forEach((v) => (v.checked = checked_))
+		list.value.forEach((v) => (v.checked = v.status === SCART_STATUS.NORMAL ? checked_ : false))
 		handleSelectedChange()
 	}
 	const handleSelectedChange = () => {
@@ -176,9 +169,14 @@
 	onMounted(() => {
 		handleSelectedChange()
 	})
-	const handleRemoveClick = (id: number) => {
-		list.value = list.value.filter((v) => v.id !== id)
-		handleSelectedChange()
+	const handleRemoveClick = (value: any) => {
+		ElMessageBox.confirm('Are you sure to remove this item?')
+			.then(() => {
+				RemoveShoppingCartItem({ listingId: value.listingId }).then(() => {
+					GetList()
+				})
+			})
+			.catch(() => {})
 	}
 	const handleExploreClick = () => {
 		console.log('探索')