123123123123

src/components/FooterNavigation.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 	import { computed } from 'vue'
 	import { useRouter } from 'vue-router'
+	import { Dialog } from 'vant'
+	import { showConfirmDialog } from 'vant'
+
 	const router = useRouter()
 	const currentRoute = computed(() => router.currentRoute.value.path)
 
@@ -13,13 +16,23 @@
 		router.back()
 		// emit('clickReturn')
 	}
+	const onHome = (nav) => {
+		showConfirmDialog({
+			title: 'Tip',
+			message: 'The current page has not been saved. Do you want to return to the home page?'
+		})
+			.then(() => {
+				router.push(nav.path)
+			})
+			.catch(() => {})
+	}
 	const navs = [
-		{ label: 'Home', icon: 'home', size: 73, path: '/home' },
+		{ label: 'Home', icon: 'home', size: 73, path: '/welcome', on: onHome },
 		{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
 		{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/creation' }
 	]
 	const onNavClick = (nav) => {
-		if (currentRoute.value !== nav.path) router.push(nav.path)
+		if (currentRoute.value !== nav.path) nav.on ? nav.on(nav) : router.push(nav.path)
 	}
 </script>
 
@@ -31,7 +44,7 @@
 			:class="{ active: currentRoute === nav.path }"
 			@click="onNavClick(nav)"
 		>
-			<SvgIcon :name="nav.icon" size="55" />
+			<SvgIcon :name="`${nav.icon}_${currentRoute === nav.path ? '1' : '0'}`" size="55" />
 			<span class="label">{{ nav.label }}</span>
 		</div>
 	</div>
@@ -56,9 +69,9 @@
 			display: flex;
 			flex-direction: column;
 			align-items: center;
-			&.active > * {
-				color: #0d99ff;
-			}
+			// &.active > * {
+			// 	color: #0d99ff;
+			// }
 			> .label {
 				margin-top: 1.6rem;
 				font-family: satoshiRegular;