空列表

src/views/shoppingCart/sc-list-null.vue

@@ -1,19 +1,26 @@
 <template>
 	<div class="sc-list-null">
-		<img src="@/assets/images/shopping-cart-null.png" alt="" />
-		<div class="title">Your Cart is empty</div>
-		<div class="tip">Discover new fashion assets and add them to your cart.</div>
-		<button custom v-show="showButton" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
+		<img v-if="nullImage === 'shopping-cart'" src="@/assets/images/shopping-cart-null.png" />
+		<img v-else-if="nullImage === 'brand'" src="@/assets/images/brand-null.png" />
+		<div class="title">{{ title }}</div>
+		<div class="tip">{{ tip }}</div>
+		<button custom v-show="showButton" @click="handleClick">{{ buttonText }}</button>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import { computed, ref, onMounted } from 'vue'
 	const props = defineProps({
-		showButton: { type: Boolean, default: true }
+		nullImage: { type: String as () => 'shopping-cart' | 'brand', default: 'shopping-cart' },
+		title: { type: String, default: '' },
+		tip: { type: String, default: '' },
+		showButton: { type: Boolean, default: true },
+		buttonText: { type: String, default: 'EXPLORE DIGITAL ITEMS' }
 	})
-	const handleExploreClick = () => {
-		console.log('探索')
+	const emit = defineEmits(['explore'])
+	const handleClick = () => {
+		console.log('emit("explore")')
+		emit('explore')
 	}
 </script>
 

src/views/shoppingCart/sc-list.vue

@@ -37,7 +37,12 @@
 			</div>
 		</div>
 		<div class="list">
-			<sc-list-null v-show="list.length === 0" :show-button="!isMini" />
+			<sc-list-null
+				v-show="list.length === 0"
+				:show-button="!isMini"
+				title="Your Cart is empty"
+				tip="Discover new fashion assets and add them to your cart."
+			/>
 			<sc-item
 				v-for="v in list"
 				:key="v.id"