111

src/pages/my-account/orders.vue

@@ -1,8 +1,6 @@
 <template>
 	<div class="orders">
-		<tip-box>
-			<router-link class="link" to="/">Browse products</router-link>
-		</tip-box>
+		<tip-box type="warning" title="No order has been made yet." />
 	</div>
 </template>
 <script setup lang="ts">

src/pages/my-account/subscriptions.vue

@@ -0,0 +1,15 @@
+<template>
+	<div class="subscriptions">
+		<tip-box type="success" title="You have no active subscriptions." />
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import tipBox from './tip-box.vue'
+</script>
+
+<style scoped lang="less">
+	.subscriptions {
+		width: 100%;
+	}
+</style>

src/pages/my-account/tip-box.vue

@@ -1,12 +1,20 @@
 <template>
 	<div class="tip-box">
-		<span class="iconfont icon-info"></span>
-		<div class="tip">No order has been made yet.</div>
-		<slot></slot>
+		<span class="iconfont" :class="[`icon-${type}`]"></span>
+		<div class="tip">{{ title }}</div>
+		<router-link v-if="isShowLink" class="link" to="/">Browse products</router-link>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
+	const props = defineProps({
+		type: {
+			default: 'warning',
+			type: String as () => 'success' | 'warning'
+		},
+		title: { default: '', type: String },
+		isShowLink: { default: true, type: Boolean }
+	})
 </script>
 
 <style scoped lang="less">
@@ -18,12 +26,16 @@
 		display: flex;
 		align-items: center;
 		padding: 0 20px;
-		> .tip {
-			flex: 1;
-		}
 		> * {
 			color: #fff;
 			font-size: 16px;
 		}
+		> .iconfont {
+			margin-right: 10px;
+			font-size: 18px;
+		}
+		> .tip {
+			flex: 1;
+		}
 	}
 </style>