Merge pull request #22 from sunpochin/develop

add visitorCartData
sunpochin · Jan 13, 2024 · f5edf95 · f5edf95
2 parents 17188ee + 775d31e
commit f5edf95
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 25 deletions.
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -31,10 +31,12 @@
           </ul>
         </nav>
 
-        <p class="userName">帳號：{{ userData.userName }}</p>
-        <v-icon class="loginLogout" @click="loginLogout">
-          {{ loggedin ? "mdi-logout" : "mdi-login" }}
-        </v-icon>
+        <div class="flex-center">
+          <p class="userName">帳號：{{ userData.userName }}</p>
+          <v-icon class="loginLogout" @click="loginLogout">
+            {{ loggedin ? "mdi-logout" : "mdi-login" }}
+          </v-icon>
+        </div>
         <!-- <v-icon size="20" color="#020202">
           <PersonSharp @click="ToggleCart()" />
         </v-icon> -->
@@ -55,7 +57,6 @@ import { useAuthStore } from "@/store/auth";
 import { ref, computed, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
-const cartStore = useCartStore();
 const authStore = useAuthStore();
 
 const isOpen = ref(false);
@@ -82,8 +83,6 @@ watch(
   }
 );
 
-const computedUserName = computed(() => authStore.getUserName());
-
 const goHome = () => {
   router.push("/");
 };
@@ -130,10 +129,10 @@ header > div {
 }
 
 .loginLogout {
-  color: var(--clr-red);
+  color: var(--clr-peach);
 }
 .userName {
-  color: var(--clr-red);
+  color: var(--clr-white);
 }
 .pc-ul {
   gap: 3rem;

diff --git a/src/store/cart.ts b/src/store/cart.ts
@@ -9,10 +9,13 @@ export const useCartStore = defineStore("cart", () => {
   const cartData = reactive({
     cartItems: [] as CartItemInterface[],
   });
+  const visitorCartData = reactive({
+    cartItems: [] as CartItemInterface[],
+  });
 
   const saveCartData = async () => {
     console.log("saveCartData", cartData);
-    if (localStorage.getItem("accessToken")) {
+    if (isLogin()) {
       const result = (await CartAPI.apiOverwriteCartData(
         cartData.cartItems
       )) as AxiosResponse;
@@ -23,13 +26,25 @@ export const useCartStore = defineStore("cart", () => {
       }
       console.log("result", result.data);
     } else {
-      console.log("訪客add cart");
+      console.log("訪客 add cart");
+      console.log("cartData.cartItems", cartData.cartItems);
     }
   };
 
-  const getCartItems = async () => {
+  const getCartItems = () => {
     console.log("getCartItems", cartData);
-    if (localStorage.getItem("accessToken")) {
+    if (isLogin()) {
+      return cartData.cartItems;
+    } else {
+      console.log("訪客 load cart: ", visitorCartData.cartItems);
+      return visitorCartData.cartItems;
+    }
+  };
+
+  const fetchCartItems = async () => {
+    console.log("fetch", cartData);
+    if (isLogin()) {
+      cartData.cartItems = [];
       const result = (await CartAPI.apiGetCartData()) as AxiosResponse;
       if (result.data.isSuccess) {
         // notification.success({
@@ -39,7 +54,8 @@ export const useCartStore = defineStore("cart", () => {
       console.log("getCartItems result", result.data);
       return result.data;
     } else {
-      console.log("訪客add cart");
+      console.log("訪客 load cart: ", visitorCartData.cartItems);
+      return visitorCartData.cartItems;
     }
   };
 
@@ -57,11 +73,22 @@ export const useCartStore = defineStore("cart", () => {
     return totalPrice;
   };
 
+  const isLogin = () => {
+    if (localStorage.getItem("accessToken")) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
   const addToCart = (product: ProductInterface, quantity: number) => {
-    const foundProduct = cartData.cartItems.find(
-      (item) => item.id == product.id
-    );
-    console.log("foundProduct", foundProduct);
+    let data;
+    if (isLogin() === true) {
+      data = cartData;
+    } else {
+      data = visitorCartData;
+    }
+    const foundProduct = data.cartItems.find((item) => item.id == product.id);
     if (foundProduct) {
       // Product already in cart, you can show a message here
       foundProduct.quantity += quantity;
@@ -75,9 +102,15 @@ export const useCartStore = defineStore("cart", () => {
       cartItem.image = product.image;
       cartItem.quantity = quantity;
       console.log("push cartItem:", cartItem);
-      cartData.cartItems.push(cartItem);
+      data.cartItems.push(cartItem);
+    }
+    if (isLogin() === true) {
+      cartData.cartItems = data.cartItems;
+    } else {
+      visitorCartData.cartItems = data.cartItems;
     }
     saveCartData();
+    console.log("訪客 addToCart", visitorCartData.cartItems);
   };
 
   const increment = async (id: string) => {
@@ -109,8 +142,8 @@ export const useCartStore = defineStore("cart", () => {
     saveCartData,
     removeAll,
     getCartItems,
+    fetchCartItems,
     getTotalPrice,
     addToCart,
-    cartData,
   };
 });
diff --git a/src/views/CartView.vue b/src/views/CartView.vue
@@ -9,7 +9,7 @@
         <ul>
           <li
             class="flex-align li-data"
-            v-for="it in cartStore.cartData.cartItems"
+            v-for="it in cartStore.getCartItems()"
             v-bind:key="it.id"
           >
             <div class="product-img">
@@ -40,7 +40,7 @@
 <script setup>
 import { useCartStore } from "@/store/cart";
 import { useProductStore } from "@/store/product";
-import { ref, computed, onMounted, onBeforeMount } from "vue";
+import { computed, onBeforeMount } from "vue";
 const cartStore = useCartStore();
 const productStore = useProductStore();
 
@@ -52,11 +52,16 @@ const totalPrice = computed(() => {
 });
 
 onBeforeMount(async () => {
-  cartStore.cartData.cartItems = [];
+  // cartStore.visitorCartData.cartItems;
+
   console.log("onBeforeMount");
-  const result = await cartStore.getCartItems();
+  const result = await cartStore.fetchCartItems();
   console.log("result: ", result);
-  console.log("cart items: ", cartStore.cartData.cartItems);
+  console.log("cart items: ", cartStore.getCartItems());
+  if (result.items === undefined) {
+    console.log("result.items is undefined");
+    return;
+  }
   result.items.forEach((item) => {
     const product = productStore.getProductById(item.id);
     if (product === undefined) {