feat: search products page

locales/en.yml

@@ -1,10 +1,15 @@
+pagination:
+  previous: Previous
+  next: Next
 button:
   about: About
   back: Back
   go: GO
   home: Home
   toggle_dark: Toggle dark mode
   toggle_langs: Change languages
+cloading:
+  loading: Loading data
 ctrending:
   search: search trending for us
   see-more: See more
@@ -56,6 +61,16 @@ ccategory:
   laundry-home-care: Laundry & Home Care
   take-care-of-the-pet: Take care of the pet
   vouchers-services: Vouchers & Services
+cpopular:
+  label: TOP POPULAR SEARCH PRODUCTS
+  see-all: See all
+  solded: Solded
+  month: month
+cflashsale:
+  label: FLASH SALES
+  see-all: See all
+  decrease: DECREASE
+  solded: Solded
 menu:
   admin: Admin
   about-page: About Page
@@ -71,6 +86,7 @@ menu:
   notifications-go: Open notifications center
   register: Register
   login: Login
+  s-home: home
   s-dashboard: Dashboard
   s-all-orders: All orders
   s-order-canceled: Order canceled
@@ -165,7 +181,10 @@ auth:
   b-reset-invite: Check the confirmation code sent from your registered email
   b-reset: Reset
   b-reset-form-button: Reset password
+  b-reset-banner: Password support center
+  b-new-password: New password
 account:
+  account-banner: My Account
   dashboard: Dashboard
   hello: Hello
   joined-at: Joined at
@@ -273,6 +292,7 @@ category:
   selected: Selected
   next: Next
 cart:
+  title: Your cart items
   cart: Cart
   preview: Preview
   name: Name
@@ -294,10 +314,17 @@ product:
   solded: Solded
   weight: Weight
   buy-with-deal: Buy with sale deal
+  shipping: Shipping
   transport: Transport to
   quantities: Quantities
   available-products: available products
+  add-to-cart: Add to cart
+  order-now: Order now
+  total-liked: Total liked
+  insurance: insurance
+  return-refund: days to return and refund
   online: Online
+  ago: ago
   chat-now: Chat now
   visit-shop: Visit shop
   productions: Productions
@@ -445,6 +472,7 @@ sitemap:
   sitemap: sitemap
 favourite:
   add-to-cart: Add to cart
+  favourite-banner: Favourite page
 about:
   about-us: About Us
   welcome: Welcome to

src/components.d.ts

@@ -41,6 +41,7 @@ declare module 'vue' {
     CLoading: typeof import('./components/CLoading.vue')['default']
     CMap: typeof import('./components/CMap.vue')['default']
     Counter: typeof import('./components/Counter.vue')['default']
+    CPagination: typeof import('./components/CPagination.vue')['default']
     CProgress: typeof import('./components/CProgress.vue')['default']
     CSChooseCategory: typeof import('./components/seller/CSChooseCategory.vue')['default']
     CSFooter: typeof import('./components/seller/CSFooter.vue')['default']

src/components/CBLoading.vue

@@ -1,8 +1,12 @@
+<script setup>
+const { t } = useI18n()
+</script>
+
 <template>
   <div class="loading_container">
     <div class="mb-5 flex justify-center items-center gap-5">
       <h1 class="text-2xl animate-pulse duration-500 text-gray-500 ">
-        Loading your data...
+        {{ t('cloading.loading') }}...
       </h1>
       <div class="wrapper">
         <div class="spinner spinner5" />

src/components/CPagination.vue

@@ -0,0 +1,22 @@
+<script setup>
+const { t } = useI18n()
+
+const props = defineProps({
+  index: Number,
+})
+
+defineEmits(['on-prev', 'on-next'])
+</script>
+
+<template>
+  <div class="flex justify-center items-center">
+    <a href="#" class="inline-flex items-center py-2 px-4 mr-3 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" :class="{'pointer-events-none opacity-65': props.index <= 1}" @click="$emit('on-prev')">
+      <svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" /></svg>
+      {{ t('pagination.previous') }}
+    </a>
+    <a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" @click="$emit('on-next')">
+      {{ t('pagination.next') }}
+      <svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+    </a>
+  </div>
+</template>

src/components/buyer/CBFlashSales.vue

@@ -154,10 +154,10 @@ const saleRatio = computed(() => progressRatio)
   <div class="top_products_container relative m-8 p-1 rounded-lg border-1 border-[#e9e9e9] shadow-md shadow-gray-300/50">
     <div class="text-red-500 p-5 border-b-1 border-b-[#e9e9e9] flex justify-between bg-[#F5F5F5] dark:(bg-blue-gray-800 border-b-[#888]) rounded-lg">
       <h1 class="uppercase font-semibold text-xl flex items-center gaáp">
-        <IBFlash />FLASH SALES
+        <IBFlash />{{ t('cflashsale.label') }}
       </h1>
       <p>
-        See all >
+        {{ t('cflashsale.see-all') }} >
       </p>
     </div>
     <div id="flash_sales_list" class="flex overflow-x-scroll gap-3 p-2">
@@ -168,8 +168,8 @@ const saleRatio = computed(() => progressRatio)
             <p class="text-red-500">
               30%
             </p>
-            <p class="text-white" style="font-size:0.6em;">
-              DECREASE
+            <p class="text-white uppercase" style="font-size:0.6em;">
+              {{ t('cflashsale.decrease') }}
             </p>
           </div>
 
@@ -187,8 +187,8 @@ const saleRatio = computed(() => progressRatio)
             <div class="bg-[#F6442E] shadow-sm dark:(shadow-gray-600) text-xs font-medium text-white text-center pb-0.5 leading-none rounded-l-full" :style="`width: ${saleRatio(top.solded, top.quantity)}%`">
               &nbsp;
             </div>
-            <p class="absolute top-0 left-1/3 w-auto h-full text-xs text-white">
-              Solded {{ top.solded }}
+            <p class="absolute top-0 left-1/3 w-auto h-full text-xs text-white capitalize">
+              {{ t('cflashsale.solded') }} {{ top.solded }}
             </p>
           </div>
         </div>

src/components/buyer/CBSwipper.vue

@@ -1,11 +1,18 @@
 <script setup>
 const images = reactive([
-  '/img/swipper/slide1.webp',
-  '/img/swipper/slide2.webp',
+  // '/img/swipper/slide1.webp',
+  // '/img/swipper/slide2.webp',
+  'https://honglinhhatinh.com/wp-content/uploads/2021/04/banner-quang-cao-cua-lazada.jpg',
+  'https://chuyenstandee.com/wp-content/uploads/2021/03/thiet-ke-banner-2-1-1.jpg',
+  'https://inanaz.com.vn/wp-content/uploads/2020/02/mau-banner-quang-cao-dep-3.jpg',
+  'https://inanaz.com.vn/wp-content/uploads/2020/02/mau-banner-quang-cao-dep-14.jpg',
+  'https://inanaz.com.vn/wp-content/uploads/2020/02/mau-banner-quang-cao-dep-8.jpg',
+  'https://induongquang.com/data/upload/banner-shoppe.jpg',
   'https://www.duchuymobile.com/images/promo/34/iphone-giam-gia.jpg',
   'https://static.ladipage.net/5bf3dc7edc60303c34e4991f/thumb-20211219233256.jpg',
   'https://binhminhdigital.com/StoreData/images/PageData/top-5-tai-nghe-chup-tai-sony-tot-trong-tam-gia-1-trieu-Binhminhdigital.jpg',
   'https://shanshe.vn/wp-content/uploads/2021/09/kem-duong-da-viet-nam-chat-luong-cao-4.jpg',
+  'https://image-us.eva.vn/upload/1-2019/images/2019-01-17/tet-khong-tang-gia-lai-con-giam-den-95---chi-co-the-la-tet-sieu-sale-shopee-1-1547691411-87-width660height408.jpg',
   'https://i.ytimg.com/vi/DJsi7z4w-zM/maxresdefault.jpg',
   'https://hoaanhdao.vn/2018_img/files/hoang/0R4A1919.jpg',
 ])

src/components/buyer/CBTopProducts.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { next, prev } from '~/utils/scrollX'
 
+const { t } = useI18n()
+
 const onPrev = () => prev('top_products_list')
 const onNext = () => next('top_products_list')
 
@@ -111,22 +113,22 @@ const topList = reactive([{
   <div class="top_products_container relative m-8 p-1 rounded-lg border-1 border-[#e9e9e9] shadow-md shadow-gray-300/50">
     <div class="text-red-500 p-5 border-b-1 border-b-[#e9e9e9] flex justify-between bg-[#F5F5F5] rounded-lg">
       <h1 class="uppercase font-medium text-lg">
-        TOP POPULAR SEARCH PRODUCTS
+        {{ t('cpopular.label') }}
       </h1>
       <p>
-        See all >
+        {{ t('cpopular.see-all') }} >
       </p>
     </div>
     <div id="top_products_list" class="flex overflow-x-scroll gap-3 p-2">
-      <div v-for="(top, i) in topList" :key="i" class="max-w-50 min-w-50 w-50 rounded-md bg-blue-50">
+      <div v-for="(top, i) in topList" :key="i" class="max-w-50 min-w-50 w-50 rounded-md bg-[#31C48D] text-white">
         <div class="relative">
           <img src="/img/top-products/top_label.png" alt="top_label_img" class="absolute top-0 left-0 max-w-8 max-h-10">
           <img :src="top.img" :alt="`${top.img}_img`">
-          <p class="p-1 rounded-t-xl bg-[#BDBDBD] absolute bottom-0 left-0 w-full text-center text-sm text-white">
-            Solded {{ top.quantity }}k+ / month
+          <p class="p-1 rounded-t-xl bg-[#E74694] absolute bottom-0 left-0 w-full text-center text-xs">
+            {{ t('cpopular.solded') }} {{ top.quantity }}k+ / {{ t('cpopular.month') }}
           </p>
         </div>
-        <div class="text-left text-lg pt-2">
+        <div class="text-sm text-center p-1.5 rounded-b-xl font-medium">
           <h6>{{ top.name }}</h6>
         </div>
       </div>

src/components/head/CBList.vue

@@ -5,12 +5,14 @@ import OrderRequest from '~/services/order-request'
 import AccountRequest from '~/services/account-request'
 import { useCart } from '~/stores/cart'
 import { toast } from '~/stores/toast'
+import { useUser } from '~/stores/user'
 import { removeItemByIndex } from '~/utils/arrayHandle'
 
 const { t } = useI18n()
 const useToast = toast()
 const cart = useCart()
 const router = useRouter()
+const user = useUser()
 
 const isBlurBgModal = ref(false)
 const openNav = () => {
@@ -49,9 +51,12 @@ const payloadOrder = reactive({
     quantity: '',
   }],
 })
+const avatarID = ref('')
 onMounted(async() => {
   const { data: addressData } = await AccountRequest.getAddress()
   payloadOrder.address_id = addressData.filter(e => Object.keys(addressData.id === 0))[0].id
+  const { data: userData } = await AccountRequest.getProfile()
+  avatarID.value = userData.profile.avatar_image
 })
 
 const handleOrder = async() => {
@@ -69,11 +74,6 @@ const handleOrder = async() => {
 
 <template>
   <div class="container flex justify-center items-center lg:w-xs text-white dark:text-black">
-    <div>
-      <router-link to="/buyer/filter">
-        <IBCompare class="hover:text-[#adff2f] dark:text-[#adff2f]" />
-      </router-link>
-    </div>
     <div>
       <router-link to="/buyer/favourite">
         <IHeart class="hover:text-[#adff2f] dark:text-[#adff2f]" />
@@ -86,6 +86,12 @@ const handleOrder = async() => {
         ${{ cart.result.reduce((accum,item) => accum + item.total_price, 0) }}
       </h1>
     </div>
+    <div>
+      <router-link to="/buyer/account/dashboard">
+        <img v-if="avatarID" :src="`https://tp-o.tk/resources/images/${avatarID}`" alt="avatar_img" class="rounded-full w-12 h-12 border-2 border-blue-500" style="object-fit: cover;">
+        <img v-else class="w-12 h-12 rounded-full" src="/img/avatar_sample.png" alt="avatar_sample">
+      </router-link>
+    </div>
     <div v-if="isBlurBgModal" class="blur-bg w-screen h-screen absolute top-0 -left-10 bg-black bg-opacity-30 z-1" @click="closeNav" />
     <div id="mySidenav" class="sidenav w-0 h-screen fixed top-12 right-0 bg-white duration-500 z-2 overflow-x-hidden text-left text-black dark:(text-gray-200 bg-black) divide-light-700 divide-y border-1 border-dotted border-gray-700 shadow-2xl shadow-gray-500">
       <div class="flex justify-between items-center p-5">