-
-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #96 from thuongtruong1009/product/feature
feat: get products of shop by id
- Loading branch information
Showing
28 changed files
with
1,265 additions
and
490 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| <script setup> | ||
| import { useRouter } from 'vue-router' | ||
| import { useProduct } from '~/stores/product' | ||
| const router = useRouter() | ||
| const product = useProduct() | ||
| const props = defineProps({ | ||
| level0: Object, | ||
| }) | ||
| const searchCategory = async(category) => { | ||
| await router.push(`/search/${encodeURIComponent(category)}`) | ||
| await location.reload() | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="grid grid-cols-4 rounded-xl gap-2"> | ||
| <div class="py-2 max-h-max overflow-y-scroll rounded-xl shadow-md" :class="{'bg-white dark:(bg-blue-gray-800 shadow-gray-600)': props.level0}"> | ||
| <div v-for="(category, i) in props.level0" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer" @mouseover="product.level.level1 = category.children" @click="searchCategory(category.name)"> | ||
| <p>{{ category.name }}</p> | ||
| <ICaretRight v-if="category.number_of_children" /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <Transition duration="500" name="nested"> | ||
| <div v-if="product.level.level1" :class="{'py-2 bg-white rounded-xl shadow-md dark:(bg-blue-gray-800 shadow-gray-600)': product.level.level1}"> | ||
| <div v-for="(category, i) in product.level.level1" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer" @mouseover="product.level.level2 = category.children" @click="searchCategory(category.name)"> | ||
| <p>{{ category.name }}</p> | ||
| <ICaretRight v-if="category.number_of_children" /> | ||
| </div> | ||
| </div> | ||
| </Transition> | ||
|
|
||
| <Transition duration="500" name="nested"> | ||
| <div v-if="product.level.level2" class="py-2 bg-white rounded-xl shadow-md dark:(bg-blue-gray-800 shadow-gray-600)"> | ||
| <div v-for="(category, i) in product.level.level2" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer" @mouseover="product.level.level3 = category.children"> | ||
| <a>{{ category.name }}</a> | ||
| <ICaretRight v-if="category.number_of_children" /> | ||
| </div> | ||
| </div> | ||
| </Transition> | ||
|
|
||
| <Transition duration="500" name="nested"> | ||
| <div v-if="product.level.level3" :class="{'py-2 bg-white rounded-xl shadow-md dark:(bg-blue-gray-800 shadow-gray-600)': product.level.level3}"> | ||
| <div v-for="(category, i) in product.level.level3" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer"> | ||
| <p>{{ category.name }}</p> | ||
| <ICaretRight v-if="category.number_of_children" /> | ||
| </div> | ||
| </div> | ||
| </Transition> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| ::-webkit-scrollbar-thumb { | ||
| background: #ddd; | ||
| } | ||
| ::-webkit-scrollbar { | ||
| width: 2px; | ||
| } | ||
| .nested-enter-active { | ||
| transition: all 0.2s ease-in-out; | ||
| } | ||
| .nested-enter-from{ | ||
| transform: translateY(30px); | ||
| opacity: 0; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <script setup> | ||
| import { useLoading } from '~/stores/loading' | ||
| import ProductRequest from '~/services/product-request' | ||
| const loading = useLoading() | ||
| const { t } = useI18n() | ||
| const payload = reactive({ | ||
| limit: 10, | ||
| page: 1, | ||
| }) | ||
| const productList = ref([]) | ||
| watch(async() => { | ||
| loading.isLoading = true | ||
| const { data: featureData } = await ProductRequest.getProductsFeature({ params: { ...payload } }) | ||
| productList.value = featureData.data | ||
| loading.isLoading = false | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="hint-today-container max-w-349 my-10"> | ||
| <div class="flex justify-start rounded-lg border-1 border-[#e9e9e9] bg-light-100 dark:(bg-blue-gray-800 border-transparent)"> | ||
| <h2 class="text-red-500 border-b-4 border-b-solid border-b-red-500 text-lg rounded-l-lg text-left inline-block py-2 px-10 uppercase font-medium"> | ||
| {{ t('ctoday.hint') }} | ||
| </h2> | ||
| </div> | ||
| <div class="flex flex-wrap gap-3 py-3"> | ||
| <div v-if="loading.isLoading" class="grid-products-list flex justify-center flex-wrap gap-5 py-10"> | ||
| <RProductCardGrid v-for="index in 12" :key="index" /> | ||
| </div> | ||
| <div v-else v-cloak class="grid-products-list flex justify-center flex-wrap gap-5 py-10"> | ||
| <div v-for="(prod, index) in productList" :key="index" class="card duration-200 ease-linear relative rounded-lg w-60 shadow-md dark:bg-gray-700 hover:shadow-gray-400/50 pb-0"> | ||
| <CProductCardGrid :card="prod" mode="feature" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="flex justify-center"> | ||
| <p class="bg-white dark:(bg-blue-gray-800 hover:bg-blue-gray-700 text-gray-300 border-transparent) border-1 border-solid border-gray-200 py-2 px-10 rounded-md cursor-pointer hover:(bg-[#F5F5F5] border-gray-300)" :class="{'hidden':payload.limit === 25}" @click="payload.limit += 5"> | ||
| {{ t('ctoday.see-more') }} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .hint-today-container > div:nth-child(2) > div{ | ||
| font-size: 14px; | ||
| line-height: 16.8px; | ||
| padding: 10px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,5 +9,6 @@ | |
| svg { | ||
| fill: white; | ||
| width: 9rem; | ||
| filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.2)); | ||
| } | ||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
679a108There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
e-shopee – ./
e-shopee-thuongtruong1009.vercel.app
e-shopee-git-main-thuongtruong1009.vercel.app
shopest.tk
www.shopest.tk
e-shopee.vercel.app