Skip to content

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

update feature categories

parent 6c99a80b
Expand all Hide 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>
<v-footer dark padless>
<v-card flat tile class="indigo lighten-1 white--text text-center">
<v-card-text>
<v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
<v-icon size="24px">
{{ 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>
</div>
<p class="copyright">
Riode eCommerce © 2022. All Rights Reserved
</p>
<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">
{{ icon }}
</v-icon>
</v-btn>
</div>
</div>
<v-footer class="mt-12 flex-wrap" min-height="350px" dark padless>
<v-row class="d-flex justify-space-between align-center">
<v-col
cols="12"
md="3"
>
<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>
</v-card>
<v-col
cols="12"
md="4"
>
<v-text-field label="email address here ..."></v-text-field>
</v-col>
<v-btn color="primary">SUBSCRIBE</v-btn>
</v-row>
<v-divider></v-divider>
</v-footer>
</template>
<script>
export default {
name: 'FooterBar',
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>
<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>
<style></style>
components/user/Header.vue
View file @ 61ef56a1
This diff is collapsed.
components/user/NavBar.vue
View file @ 61ef56a1
<template>
<v-container>
<div class="navbar d-flex justify-space-between col-md-7">
<div>
<span>
Home
</span>
</div>
<div class="dropdown">
<span>
Products
</span>
<v-icon>mdi-chevron-down</v-icon>
<div class="dropdown-content elevation-10" :elevation="2">
<v-treeview
:active.sync="active"
rounded
dense
hoverable
activatable
:items="categories"
/>
<div class="navbar d-flex justify-space-between ">
<div class="d-flex justify-space-between col-md-7">
<div>
<span>
Home
</span>
</div>
<div class="dropdown">
<span>
Products
</span>
<v-icon>mdi-chevron-down</v-icon>
<div class="dropdown-content elevation-10" :elevation="2">
<v-treeview
:active.sync="active"
rounded
dense
hoverable
activatable
: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>
<span>
Pages
</span>
</div>
<div>
<span>
Blogs
</span>
</div>
<div>
<span>
About
</span>
</div>
</div>
<div>
<span>
Pages
</span>
</div>
<div>
<span>
Blogs
<div class="d-flex align-center ">
<v-icon>mdi-tag</v-icon>
<span class="mx-2">
Special offer!
</span>
</div>
<div>
<span>
About
<span class="mx-2">
Buy riode
</span>
</div>
</div>
......@@ -42,6 +60,8 @@
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
name: 'NavBar',
data: () => ({
......@@ -51,11 +71,14 @@ export default {
}),
computed: {
...mapState(['selectedCategory']),
...mapActions(['setSelectedCategory']),
selected () {
if (!this.active.length) { return undefined }
const id = this.active[0]
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 {
selected () {
if (!this.active.length) { return undefined }
const id = this.active[0]
return id
return id || ''
}
},
created () {
beforeCreate () {
this.$axios
.get('guest/categories/index')
.then((response) => {
......@@ -77,8 +99,13 @@ export default {
console.log(error)
})
},
mounted () {
},
methods: {
setCategory () {
console.log(this.selected)
this.$store.commit('category/setCurrentCategory', this.selected.name || '')
}
}
}
</script>
......
layouts/user.vue
View file @ 61ef56a1
<template>
<v-app>
<UserHeader />
<UserHeader ref="child" />
<Nuxt />
<FooterBar />
</v-app>
</template>
<script>
import Header from '@/components/user/Header'
import FooterBar from '@/components/FooterBar'
export default {
component: {
Header
Header,
FooterBar
},
components: { FooterBar },
created () {
this.changeColor()
},
......@@ -25,5 +29,7 @@ export default {
</script>
<style>
body{
font-family: monospace;
}
</style>
nuxt.config.js
View file @ 61ef56a1
......@@ -29,7 +29,8 @@ export default {
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'~/plugins/axios.js',
'~/plugins/formatTime.js'
'~/plugins/formatTime.js',
'~/plugins/eventBus.js'
],
// Auto import components: https://go.nuxtjs.dev/config-components
......
pages/about.vue
View file @ 61ef56a1
<template>
<div>
<div>
<h1 style="text-align: center">ABOUT</h1>
</div>
<div>
<h1 style="text-align: center">
ABOUT
</h1>
</div>
</div>
</template>
\ No newline at end of file
</template>
pages/login.vue
View file @ 61ef56a1
......@@ -120,6 +120,7 @@ export default {
localStorage.setItem('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('ID', resp.data.data.id)
this.$auth.$storage.setUniversal('loggedIn', 'true')
if (resp.status === 200) {
this.$toast.success('Successfully authenticated', {
......
store/index.js
View file @ 61ef56a1
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
modules: {
}
export const state = () => ({
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