Skip to content

K
kiaisoft_tuananh_nuxt
Commit 61ef56a1 authored by catea792's avatar catea792
Browse files
Options

update feature categories

parent 6c99a80b
Show whitespace changes
Inline Side-by-side
Showing with 522 additions and 376 deletions
components/FooterBar.vue
View file @ 61ef56a1
<!-- eslint-disable vue/no-parsing-error -->
<template> <template>
<v-footer dark padless> <v-footer class="mt-12 flex-wrap" min-height="350px" dark padless>
<v-card flat tile class="indigo lighten-1 white--text text-center"> <v-row class="d-flex justify-space-between align-center">
<v-card-text> <v-col
<v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon> cols="12"
<v-icon size="24px"> md="3"
{{ icon }}
</v-icon>
</v-btn>
</v-card-text>
<v-card-text class="white--text pt-0">
Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a
sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
lacinia malesuada. Nulla placerat augue vel ipsum ultrices, cursus
iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor
vel ut orci. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</v-card-text>
<v-divider />
<div class="footer-bottom">
<div class="footer-bottom-left">
<figure class="payment">
<img
src="~/assets/images/payment.png"
alt="payment"
width="159"
height="29"
> >
</figure> <v-img
width="153px"
src="https://d-themes.com/html/riode/images/logo-footer.png"
/>
</v-col>
<div class="flex-column">
<h3>Subscribe to our Newsletter</h3>
<h4>Get all the latest information, Sales and Offers.</h4>
</div> </div>
<p class="copyright"> <v-col
Riode eCommerce © 2022. All Rights Reserved cols="12"
</p> md="4"
<div class="footer-bottom-right">
<div class="social-link">
<v-btn
v-for="icon in icons"
:key="icon"
class="mx-4 white--text"
icon
> >
<v-icon size="24px"> <v-text-field label="email address here ..."></v-text-field>
{{ icon }} </v-col>
</v-icon> <v-btn color="primary">SUBSCRIBE</v-btn>
</v-btn> </v-row>
</div> <v-divider></v-divider>
</div>
</div>
</v-card>
</v-footer> </v-footer>
</template> </template>
<script> <script>
export default { export default {
name: 'FooterBar',
data: () => ({ data: () => ({
icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram'] icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram'],
img: 'https://d-themes.com/html/riode/images/logo-footer.png'
}) })
} }
</script> </script>
<style> <style></style>
.footer-bottom-left {
position: absolute;
left: 0;
}
.footer-bottom-right {
position: absolute;
right: 0;
}
.copyright {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
</style>
components/user/Header.vue
View file @ 61ef56a1
...@@ -3,120 +3,73 @@ ...@@ -3,120 +3,73 @@
<div> <div>
<!-- header top --> <!-- header top -->
<div class="header-top"> <div class="header-top">
<v-container> <v-container class="pa-0">
<v-row no-gutters> <v-row no-gutters>
<v-col <v-col cols="12" sm="8" class="header-top-left">
cols="12" <span>Hello message</span>
sm="6"
>
<v-list-item-content>
<v-list-item-title>Hello message</v-list-item-title>
</v-list-item-content>
</v-col> </v-col>
<v-col <v-col cols="12" sm="4" class="header-top-right">
cols="12" <div class="dropdown">
sm="6" <span> USD </span>
class="d-flex" <v-icon small>
> mdi-chevron-down
<div class="text-center"> </v-icon>
<v-menu <div class="dropdown-content">
open-on-hover <div
offset-y v-for="(item, i) in currency"
> :key="i"
<template #activator="{ on, attrs }"> class="dropdown-item"
<v-btn
plain
v-bind="attrs"
v-on="on"
>
<span>USD</span>
<v-icon>mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-list
dense
> >
<v-list-item> <span>
<v-btn plain> {{ item.text }}
USD </span>
</v-btn>
</v-list-item>
<v-list-item>
<v-btn plain>
EUR
</v-btn>
</v-list-item>
</v-list>
</v-menu>
</div> </div>
<div class="text-center"> </div>
<v-menu </div>
open-on-hover <div class="dropdown">
offset-y <span> ENG </span>
> <v-icon small>
<template #activator="{ on, attrs }"> mdi-chevron-down
<v-btn </v-icon>
plain <div class="dropdown-content">
v-bind="attrs" <div
v-on="on" v-for="(item, i) in languages"
> :key="i"
<span>Eng</span> class="dropdown-item"
<v-icon>mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-list
dense
> >
<v-list-item> <span>
<v-btn plain> {{ item.text }}
Eng </span>
</v-btn> </div>
</v-list-item> </div>
<v-list-item>
<v-btn plain>
FRH
</v-btn>
</v-list-item>
</v-list>
</v-menu>
</div> </div>
<v-divider vertical /> <v-divider vertical />
<v-btn <div class="header-info">
plain <v-icon small>
v-bind="attrs" mdi-map-marker-outline
v-on="on" </v-icon>
>
<v-icon>mdi-map-marker-outline</v-icon>
<span>Contact</span> <span>Contact</span>
</v-btn> </div>
<v-btn <div class="header-info">
plain <v-icon small>
v-bind="attrs" mdi-alert-circle-outline
v-on="on" </v-icon>
>
<v-icon>mdi-alert-circle-outline</v-icon>
<span>Need help</span> <span>Need help</span>
</v-btn> </div>
<v-btn <div class="authentication">
plain <div class="header-info" @click="openDialogLogin">
v-bind="attrs" <v-icon small>
v-on="on" mdi-account-outline
@click="openDialogLogin" </v-icon>
> <span>Login</span>
<v-icon>mdi-account-outline</v-icon> </div>
<span>login</span> <v-icon small>
</v-btn> mdi-slash-forward
<v-icon>mdi-slash-forward</v-icon> </v-icon>
<v-btn <div class="header-info" @click="openDialogSignUp">
plain
v-bind="attrs"
v-on="on"
@click="openDialogSignUp"
>
<span>Signup</span> <span>Signup</span>
</v-btn> </div>
</div>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
...@@ -125,77 +78,54 @@ ...@@ -125,77 +78,54 @@
<!-- header middle --> <!-- header middle -->
<div class="header-middle d-flex"> <div class="header-middle d-flex">
<v-container py-5 d-flex> <v-container class="header-middle-content" py-7>
<v-col <v-col cols="12" md="8" class="header-middle-left padding-0">
cols="12" <div class="logo">
md="3"
>
<v-img <v-img
width="153px" width="153px"
src="https://d-themes.com/html/riode/images/logo.png" src="https://d-themes.com/html/riode/images/logo.png"
/> />
</v-col> </div>
<v-col <v-form class="d-flex form-search">
cols="12"
md="5"
>
<v-form
ref="form"
class="d-flex"
>
<v-text-field <v-text-field
outlined
dense
hide-details="auto"
label="Search" label="Search"
variant="outlined" class="search-input"
/> />
<v-btn <span class="icon">
icon <v-icon> mdi-magnify </v-icon>
> </span>
<v-icon>
mdi-magnify
</v-icon>
</v-btn>
</v-form> </v-form>
</v-col> </v-col>
<v-col <v-col cols="12" md="4" class="header-middle-right padding-0">
cols="12" <div class="hotline d-flex">
md="4"
class="d-flex"
>
<v-btn
plain
v-bind="attrs"
v-on="on"
>
<v-icon large> <v-icon large>
mdi-phone mdi-phone-outline
</v-icon> </v-icon>
<span>Call us now: <div class="contact">
<b>0123456789</b> <span>Call us now:</span>
</span> <b>0(800) 123-456</b>
</v-btn> </div>
</div>
<v-divider vertical inset /> <v-divider vertical inset />
<v-btn <div class="wish-list" v-bind="attrs" v-on="on" @click.stop="drawer = true">
plain
v-bind="attrs"
v-on="on"
@click.stop="drawer = true"
>
<v-icon large> <v-icon large>
mdi-heart-outline mdi-heart-outline
</v-icon> </v-icon>
</v-btn> </div>
<v-divider vertical inset /> <v-divider vertical inset />
<v-btn <div id="menu-activator" class="cart" plain v-bind="attrs" v-on="on">
id="menu-activator" <span>Shopping cart:
plain
v-bind="attrs"
v-on="on"
>
<v-spacer />
<span>Cart:
<b>$:0.00</b> <b>$:0.00</b>
</span> </span>
<v-badge :content="15" floating> <v-badge
:content="products.length || 0"
floating
bordered
overlap
>
<v-icon large> <v-icon large>
mdi-cart-outline mdi-cart-outline
</v-icon> </v-icon>
...@@ -203,20 +133,20 @@ ...@@ -203,20 +133,20 @@
<v-menu activator="#menu-activator" style="width: 300px"> <v-menu activator="#menu-activator" style="width: 300px">
<v-list dense three-line> <v-list dense three-line>
<v-list-item <v-list-item
v-for="item in items" v-for="item in products"
:key="item.title" :key="item.id"
link link
> >
<v-list-item-avatar> <v-list-item-avatar>
<v-img :src="item.prependAvatar" /> <v-img :src="item.product.images[0]" />
</v-list-item-avatar> </v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title> <v-list-item-title>{{ item.product.name }}</v-list-item-title>
<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle> <v-list-item-subtitle>{{ item.quantity +"x"+ item.product.price }}</v-list-item-subtitle>
</v-list-item-content> </v-list-item-content>
<v-list-item-action> <v-list-item-action>
<v-btn icon @click="remove(index)"> <v-btn icon @click="removeCart(item,index)">
<v-icon color="grey lighten-1"> <v-icon color="grey lighten-1">
mdi-close-circle-outline mdi-close-circle-outline
</v-icon> </v-icon>
...@@ -227,7 +157,7 @@ ...@@ -227,7 +157,7 @@
<v-divider /> <v-divider />
<div class="d-flex justify-space-between align-center ma-4"> <div class="d-flex justify-space-between align-center ma-4">
<span>Subtotal: </span> <span>Subtotal: </span>
<span>139$ </span> <span> {{ total + "$" }} </span>
</div> </div>
<v-divider /> <v-divider />
<v-btn <v-btn
...@@ -238,7 +168,7 @@ ...@@ -238,7 +168,7 @@
GO TO CHECKOUT GO TO CHECKOUT
</v-btn> </v-btn>
</v-menu> </v-menu>
</v-btn> </div>
</v-col> </v-col>
</v-container> </v-container>
</div> </div>
...@@ -250,8 +180,8 @@ ...@@ -250,8 +180,8 @@
<!-- end header bottom --> <!-- end header bottom -->
<!-- show modal --> <!-- show modal -->
<LoginModal :status="activeLogin" @close="activeLogin=false" /> <LoginModal :status="activeLogin" @close="activeLogin = false" />
<SignupModal :status="activeRegister" @close="activeRegister=false" /> <SignupModal :status="activeRegister" @close="activeRegister = false" />
<!-- show drawer --> <!-- show drawer -->
<v-navigation-drawer <v-navigation-drawer
v-model="drawer" v-model="drawer"
...@@ -262,35 +192,26 @@ ...@@ -262,35 +192,26 @@
> >
<div class="d-flex justify-space-between drawer_header"> <div class="d-flex justify-space-between drawer_header">
<b>WISHLIST</b> <b>WISHLIST</b>
<v-btn <v-btn plain @click.stop="drawer = !drawer">
plain
@click.stop="drawer = !drawer"
>
Close Close
<v-icon> <v-icon> mdi-arrow-right-thin </v-icon>
mdi-arrow-right-thin
</v-icon>
</v-btn> </v-btn>
</div> </div>
<v-divider /> <v-divider />
<v-list dense three-line> <v-list dense three-line>
<v-list-item <v-list-item v-for="item in wishlist" :key="item.name" link>
v-for="item in items"
:key="item.title"
link
>
<v-list-item-avatar> <v-list-item-avatar>
<v-img :src="item.prependAvatar" /> <v-img :src="item.product.images[0]" />
</v-list-item-avatar> </v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title> <v-list-item-title>{{ item.product.name }}</v-list-item-title>
<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle> <v-list-item-subtitle>{{ item.product.price }}</v-list-item-subtitle>
</v-list-item-content> </v-list-item-content>
<v-list-item-action> <v-list-item-action>
<v-btn icon @click="remove(index)"> <v-btn icon @click="removeWishlist(item, index)">
<v-icon color="grey lighten-1"> <v-icon color="grey lighten-1">
mdi-close-circle-outline mdi-close-circle-outline
</v-icon> </v-icon>
...@@ -306,6 +227,7 @@ ...@@ -306,6 +227,7 @@
import LoginModal from '~/components/LoginModal.vue' import LoginModal from '~/components/LoginModal.vue'
import SignupModal from '~/components/RegisterModal.vue' import SignupModal from '~/components/RegisterModal.vue'
import NavBar from '~/components/user/NavBar' import NavBar from '~/components/user/NavBar'
import { eventBus } from '~/plugins/eventBus.js'
export default { export default {
name: 'UserHeader', name: 'UserHeader',
...@@ -314,40 +236,39 @@ export default { ...@@ -314,40 +236,39 @@ export default {
SignupModal, SignupModal,
NavBar NavBar
}, },
data: () => { data: () => {
return { return {
products: [],
wishlist: [],
activeLogin: false, activeLogin: false,
activeRegister: false, activeRegister: false,
drawer: false, drawer: false,
items: [ currency: [
{ { text: 'USD', icon: 'mdi-clock' },
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg', { text: 'EUR', icon: 'mdi-account' }
title: 'Brunch this weekend?', ],
subtitle: '<span class="text-primary">Ali Connors</span> &mdash; I\'ll be in your neighborhood doing errands this weekend. Do you want to hang out?' languages: [
}, { text: 'ENG', icon: 'mdi-clock' },
{ { text: 'FRH', icon: 'mdi-account' }
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
title: 'Summer BBQ',
subtitle: '<span class="text-primary">to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I\'m out of town this weekend.'
},
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
title: 'Oui oui',
subtitle: '<span class="text-primary">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?'
},
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
title: 'Birthday gift',
subtitle: '<span class="text-primary">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?'
},
{
prependAvatar: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
title: 'Recipe to try',
subtitle: '<span class="text-primary">Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
}
] ]
} }
}, },
computed: {
total () {
const arr = []
this.products.map((value) => {
return arr?.push(value.price)
})
return arr.reduce((acc, cur) => acc + cur, 0)
}
},
mounted () {
this.getCardProducts()
this.getWishlish()
this.updateWishlist()
this.updateCart()
},
methods: { methods: {
closeDialog () { closeDialog () {
this.activeLogin = false this.activeLogin = false
...@@ -358,52 +279,255 @@ export default { ...@@ -358,52 +279,255 @@ export default {
this.activeLogin = true this.activeLogin = true
}, },
openDialogSignUp () { openDialogSignUp () {
this.activeLogin = false this.activeRegister = false
this.activeLogin = true this.activeRegister = true
},
removeCart (item, index) {
try {
this.$axios
.delete(`/carts/delete-cart-item/${item.id}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
this.products.splice(index, 1)
this.$toast.success('Remove product successfully!', {
duration: 1500
})
})
} catch (error) {
console.log(error)
this.$toast.error('ERR!', {
duration: 1500
})
}
},
async getCardProducts () {
await this.$axios
.get(`/carts/user-cart/${this.$auth.$storage.getUniversal('ID')}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
this.products = response.data.data
console.log(this.products)
})
.catch(function (error) {
console.log(error)
})
}, },
remove (index) { async getWishlish () {
this.items.splice(index, 1) await this.$axios
console.log(this.items) .get(`/wish-list/user-wish-list/${this.$auth.$storage.getUniversal('ID')}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
this.wishlist = response.data.data
console.log(this.wishlist)
})
.catch(function (error) {
console.log(error)
})
},
removeWishlist (item, index) {
try {
this.$axios
.delete(`/wish-list/delete-from-wish-list/${item.id}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
this.wishlist.splice(index, 1)
this.$toast.success('Remove product successfully!', {
duration: 1500
})
})
} catch (error) {
console.log(error)
this.$toast.error('ERR!', {
duration: 1500
})
}
},
updateWishlist () {
eventBus.$on('add-to-wish-list', (response) => {
this.getWishlish()
})
},
updateCart () {
eventBus.$on('add-to-cart', (response) => {
console.log('abc')
this.getCardProducts()
})
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.header-top{ .header-top {
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
} font-size: 12px;
b { color: rgba(0, 0, 0, 0.8);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.header-top-left {
display: flex;
align-items: center;
}
.header-top-right {
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
}
.dropdown {
display: flex;
cursor: pointer;
position: relative;
}
.dropdown > span {
line-height: 2rem;
}
.dropdown-content {
display: none;
position: absolute;
top: 30px;
background: white;
box-shadow: 2px 2px 15px 3px rgba(1, 1, 1, 0.3);
}
.dropdown-item {
margin: 5px 7px;
}
.v-divider--vertical {
min-height: 70%;
max-height: 70%;
margin: 5px -1px;
}
.header-info {
cursor: pointer;
}
span:hover {
color: #2266cc;
cursor: pointer;
}
.dropdown:hover .dropdown-content {
display: block; display: block;
} }
.col-md { .header-info {
align-items: center display: flex;
}
.v-application .d-flex {
align-items: center; align-items: center;
} }
.favorite-modal { .header-info:hover .span.v-icon{
color: #2266cc;
}
.authentication {
display: flex;
}
.v-icon.v-icon {
margin: 0 3px;
}
.header-middle-content {
display: flex;
padding-left: 0;
padding-right: 0;
font-size: 12px;
color: #000000;
}
.header-middle-left {
display: flex;
align-items: center;
padding-right: 0;
padding-left: 0;
justify-content: space-between;
}
.padding-0 {
padding: 0 !important;
}
.logo {
display: flex;
align-items: center;
}
.form-search {
width: 100%;
position: relative;
margin: 0 auto;
margin: 0 5vw;
}
.search-input {
width: inherit;
position: absolute;
}
span.icon {
position: absolute;
right: 5px;
cursor: pointer;
}
span.icon:hover .v-icon.v-icon{
color: #2266cc;
}
.header-middle-right {
display: flex;
justify-content: space-between;
}
b {
display: block;
font-size: 14px;
}
.hotline {
cursor: pointer;
}
.hotline:hover {
color: #2266cc;
}
.wish-list {
cursor: pointer;
}
.wish-list:hover .v-icon.v-icon {
color: #2266cc;
}
.cart {
display: flex;
}
.v-application .d-flex {
align-items: center;
}
.favorite-modal {
position: fixed; position: fixed;
} }
.favorite-modal .modal_header { .favorite-modal .modal_header {
padding: 20px 0px 20px 30px; padding: 20px 0px 20px 30px;
} }
.modal_header > b { .modal_header > b {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
} }
.modal_header > button { .modal_header > button {
font-size: 12px; font-size: 12px;
} }
.modal_header > i { .modal_header > i {
scale: 0.8; scale: 0.8;
} }
.drawer_header{ .drawer_header {
padding: 20px 0 20px 30px; padding: 20px 0 20px 30px;
} }
.v-menu__content { .v-menu__content {
width: 300px; width: 300px;
top: 153px !important; top: 110px !important;
padding: 25px; padding: 25px;
} background-color: #ffffff;
}
</style> </style>
components/user/NavBar.vue
View file @ 61ef56a1
<template> <template>
<v-container> <v-container>
<div class="navbar d-flex justify-space-between col-md-7"> <div class="navbar d-flex justify-space-between ">
<div class="d-flex justify-space-between col-md-7">
<div> <div>
<span> <span>
Home Home
...@@ -19,7 +20,14 @@ ...@@ -19,7 +20,14 @@
hoverable hoverable
activatable activatable
:items="categories" :items="categories"
/> @update:active="setCategory(item)"
>
<template #label="{ item }">
<nuxt-link :to="`/home-page/categories/${item.id}`" tag="div">
{{ item.name }}
</nuxt-link>
</template>
</v-treeview>
</div> </div>
</div> </div>
<div> <div>
...@@ -38,10 +46,22 @@ ...@@ -38,10 +46,22 @@
</span> </span>
</div> </div>
</div> </div>
<div class="d-flex align-center ">
<v-icon>mdi-tag</v-icon>
<span class="mx-2">
Special offer!
</span>
<span class="mx-2">
Buy riode
</span>
</div>
</div>
</v-container> </v-container>
</template> </template>
<script> <script>
import { mapActions, mapState } from 'vuex'
export default { export default {
name: 'NavBar', name: 'NavBar',
data: () => ({ data: () => ({
...@@ -51,11 +71,14 @@ export default { ...@@ -51,11 +71,14 @@ export default {
}), }),
computed: { computed: {
...mapState(['selectedCategory']),
...mapActions(['setSelectedCategory']),
selected () { selected () {
if (!this.active.length) { return undefined } if (!this.active.length) { return undefined }
const id = this.active[0] const id = this.active[0]
console.log(id) console.log(id)
return this.categories.find(category => category.id === id) // console.log(this.categories.find(category => category.id === id).name)
return this.categories.find(category => category.id === id) || ''
} }
}, },
...@@ -63,11 +86,10 @@ export default { ...@@ -63,11 +86,10 @@ export default {
selected () { selected () {
if (!this.active.length) { return undefined } if (!this.active.length) { return undefined }
const id = this.active[0] const id = this.active[0]
return id return id || ''
} }
}, },
beforeCreate () {
created () {
this.$axios this.$axios
.get('guest/categories/index') .get('guest/categories/index')
.then((response) => { .then((response) => {
...@@ -77,8 +99,13 @@ export default { ...@@ -77,8 +99,13 @@ export default {
console.log(error) console.log(error)
}) })
}, },
mounted () {
},
methods: { methods: {
setCategory () {
console.log(this.selected)
this.$store.commit('category/setCurrentCategory', this.selected.name || '')
}
} }
} }
</script> </script>
......
layouts/user.vue
View file @ 61ef56a1
<template> <template>
<v-app> <v-app>
<UserHeader /> <UserHeader ref="child" />
<Nuxt /> <Nuxt />
<FooterBar />
</v-app> </v-app>
</template> </template>
<script> <script>
import Header from '@/components/user/Header' import Header from '@/components/user/Header'
import FooterBar from '@/components/FooterBar'
export default { export default {
component: { component: {
Header Header,
FooterBar
}, },
components: { FooterBar },
created () { created () {
this.changeColor() this.changeColor()
}, },
...@@ -25,5 +29,7 @@ export default { ...@@ -25,5 +29,7 @@ export default {
</script> </script>
<style> <style>
body{
font-family: monospace;
}
</style> </style>
nuxt.config.js
View file @ 61ef56a1
...@@ -29,7 +29,8 @@ export default { ...@@ -29,7 +29,8 @@ export default {
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [ plugins: [
'~/plugins/axios.js', '~/plugins/axios.js',
'~/plugins/formatTime.js' '~/plugins/formatTime.js',
'~/plugins/eventBus.js'
], ],
// Auto import components: https://go.nuxtjs.dev/config-components // Auto import components: https://go.nuxtjs.dev/config-components
......
pages/about.vue
View file @ 61ef56a1
<template> <template>
<div> <div>
<div> <div>
<h1 style="text-align: center">ABOUT</h1> <h1 style="text-align: center">
ABOUT
</h1>
</div> </div>
</div> </div>
</template> </template>
pages/login.vue
View file @ 61ef56a1
...@@ -120,6 +120,7 @@ export default { ...@@ -120,6 +120,7 @@ export default {
localStorage.setItem('token', resp.data.data.bearer_token) localStorage.setItem('token', resp.data.data.bearer_token)
this.$auth.$storage.setUniversal('token', resp.data.data.bearer_token) this.$auth.$storage.setUniversal('token', resp.data.data.bearer_token)
this.$auth.$storage.setUniversal('userName', resp.data.data.name) this.$auth.$storage.setUniversal('userName', resp.data.data.name)
this.$auth.$storage.setUniversal('ID', resp.data.data.id)
this.$auth.$storage.setUniversal('loggedIn', 'true') this.$auth.$storage.setUniversal('loggedIn', 'true')
if (resp.status === 200) { if (resp.status === 200) {
this.$toast.success('Successfully authenticated', { this.$toast.success('Successfully authenticated', {
......
store/index.js
View file @ 61ef56a1
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
Vue.use(Vuex) Vue.use(Vuex)
export const store = new Vuex.Store({ export const state = () => ({
modules: { products: []
}
}) })
export const mutations = {
setProducts (state, products) {
state.products = products
},
addProduct (state, product) {
state.products.push(product)
}
}
export const actions = {
async fetchProducts ({ commit }) {
// Lấy dữ liệu sản phẩm từ API
const products = await fetch('https://example.com/products')
.then(response => response.json())
.then(data => data)
// Lưu dữ liệu sản phẩm vào store Vuex
commit('setProducts', products)
}
}
export const getters = {
getProductById: state => (id) => {
return state.products.find(product => product.id === id)
}
}
export const strict = false
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment