Skip to content

K
kiaisoft_tuananh_nuxt
Commit b57d5131 authored by Le Dinh Trung's avatar Le Dinh Trung
Browse files
Options

add change

parent 06f32646
Show whitespace changes
Inline Side-by-side
Showing with 159 additions and 25 deletions
.gitignore
View file @ b57d5131
......@@ -88,3 +88,5 @@ sw.*
# Vim swap files
*.swp
#$env:NODE_OPTIONS="--openssl-legacy-provider"
\ No newline at end of file
components/DetailModal.vue
View file @ b57d5131
......@@ -26,15 +26,17 @@
<v-card-title v-model="item.name" class="modal-title" style="margin-left:-30px">
{{ name }}
</v-card-title>
<v-btn icon @click="$emit('close')" style="background-color:red">
<v-icon color="white">mdi-close</v-icon>
<v-btn icon style="background-color:red" @click="$emit('close'); clearDialog()">
<v-icon color="white">
mdi-close
</v-icon>
</v-btn>
</v-row>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Price:
</h3>
<v-card-title v-model="item.price">
<v-card-title v-model="item.price" class="price-tag">
{{ price + "$" }}
</v-card-title>
</v-row>
......@@ -51,7 +53,6 @@
<v-radio-group
v-model="color_modal"
row
mandatory
class="square-radio"
>
<v-radio
......@@ -82,7 +83,6 @@
<v-btn-toggle
v-model="size_modal"
color="primary"
mandatory
>
<v-btn value="S">
S
......@@ -95,6 +95,11 @@
</v-btn>
</v-btn-toggle>
</v-row>
<v-row v-if="isSelectionValid" class="flex-row align-center">
<h3 class="mr-4 mt-2 price-tag">
{{ total_price.toFixed(2) + "$" }}
</h3>
</v-row>
<v-row class="mt-7">
<v-divider :thickness="2" />
</v-row>
......@@ -180,11 +185,21 @@ export default {
},
size_modal: undefined,
color_modal: undefined,
quantity_modal: ''
quantity_modal: 1
}),
computed: {
dialogDetail () {
return this.status
},
total_price () {
if (this.quantity_modal < 0) {
return 0
} else {
return this.quantity_modal * this.price
}
},
isSelectionValid () {
return this.size_modal !== undefined && this.color_modal !== undefined
}
},
methods: {
......@@ -194,6 +209,11 @@ export default {
closeDialog () {
this.$props.status = false
},
clearDialog () {
this.size_modal = undefined
this.color_modal = undefined
this.quantity_modal = 1
},
addProductToCard () {
const fd = new FormData()
fd.append('product_id', this.product_id)
......@@ -255,5 +275,9 @@ export default {
.v-dialog {
overflow: hidden;
}
.price-tag {
color: rgb(210, 110, 75);
font-weight: 700;
line-height: 1;
}
</style>
components/LoginModal.vue
View file @ b57d5131
......@@ -26,6 +26,7 @@
v-model="password"
variant="underlined"
label="Password"
type="password"
required
/>
</v-col>
......@@ -106,13 +107,13 @@ export default {
this.$toast.success('Successfully authenticated', {
duration: 2000
})
this.$router.push('home')
window.location.reload()
}
} catch (e) {
this.$toast.error('Username or Password not valid', {
duration: 2000
})
this.$router.push('/login')
window.location.reload()
}
},
closeDialog () {
......
components/RegisterModal.vue
View file @ b57d5131
......@@ -143,7 +143,7 @@ export default {
this.$toast.success('Register successfully', {
duration: 2000
})
this.$router.push('login')
window.location.reload()
}
})
} catch (error) {
......
components/user/Header.vue
View file @ b57d5131
......@@ -61,7 +61,18 @@
</v-icon>
<span>Need help</span>
</div>
<div class="authentication">
<div v-if="auth" class="authentication">
<div class="header-info">
<span class="font-weight-bold font-weight-black">{{ auth }}</span>
</div>
<v-icon small>
mdi-slash-forward
</v-icon>
<div class="header-info" @click="logout">
<span>log out</span>
</div>
</div>
<div v-else class="authentication">
<div class="header-info" @click="openDialogLogin">
<v-icon small>
mdi-account-outline
......@@ -123,7 +134,7 @@
<v-divider vertical inset />
<div id="menu-activator" class="cart" plain v-bind="attrs" v-on="on">
<span>Shopping cart:
<b>$:0.00</b>
<b>$:{{ total }}.00</b>
</span>
<v-badge
:content="products.length || 0"
......@@ -189,6 +200,7 @@
<SignupModal :status="activeRegister" @close="activeRegister = false" />
<!-- show drawer -->
<v-navigation-drawer
class="nav-modal"
v-model="drawer"
absolute
right
......@@ -208,7 +220,7 @@
<v-list dense three-line>
<v-list-item v-for="item in wishlist" :key="item.name" link>
<v-list-item-avatar tile class="align-center item-avatar">
<v-img tile :src="item.product.images[0]" />
<v-img tile :src="item.product.images[0]"/>
</v-list-item-avatar>
<v-list-item-content class="list-item-card">
<v-list-item-title class="font-weight-bold">{{ item.product.name }}</v-list-item-title>
......@@ -266,6 +278,9 @@ export default {
return arr?.push(value.price)
})
return arr.reduce((acc, cur) => acc + cur, 0)
},
auth () {
return this.$auth.$storage.getUniversal('userName')
}
},
mounted () {
......@@ -381,6 +396,28 @@ export default {
},
changeColor () {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
},
async logout () {
try {
const resp = await this.$axios.post('/logout', {
token: this.$auth.$storage.getUniversal('token')
})
if (resp.status === 200) {
this.$toast.success('Logout!', {
duration: 2000
})
window.location.reload()
localStorage.setItem('token', '')
this.$auth.$storage.setUniversal('loggedIn', 'false')
this.$auth.$storage.setUniversal('token', '')
this.$auth.$storage.setUniversal('userName', '')
this.$auth.$storage.setUniversal('ID', '')
}
} catch (e) {
this.$toast.error('ERR !', {
duration: 2000
})
}
}
}
}
......@@ -557,6 +594,10 @@ b {
.header-bottom {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.v-navigation-drawer--close{
display: none;
}
@media only screen and (max-width: 768px) {
.header-middle-content {
display: flex;
......@@ -566,5 +607,8 @@ b {
margin-top: 10px;
width: 95%;
}
.v-navigation-drawer--close{
display: none;
}
}
</style>
pages/home-page/products/_id/index.vue
View file @ b57d5131
......@@ -8,28 +8,28 @@
<div class="numbertext">
1 / 4
</div>
<img src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%; height: 100%;">
<img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
2 / 4
</div>
<img src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%; height: 100%;">
<img src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
3 / 4
</div>
<img src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%; height: 100%;">
<img src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" style="width:100%; height: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">
4 / 4
</div>
<img src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%; height: 100%;">
<img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
</div>
<!-- Next and previous buttons -->
......@@ -40,16 +40,16 @@
<!-- Thumbnail images -->
<div class="c2">
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%; height: 100%;" alt="The Woods" @click="currentSlide(1)">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;" alt="The Woods" @click="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%; height: 100%;" alt="Cinque Terre" @click="currentSlide(2)">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" style="width:100%; height: 100%;" alt="Cinque Terre" @click="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%; height: 100%;" alt="Mountains and fjords" @click="currentSlide(3)">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" style="width:100%; height: 100%;" alt="Mountains and fjords" @click="currentSlide(3)">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%; height: 100%;" alt="Northern Lights" @click="currentSlide(4)">
<img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;" alt="Northern Lights" @click="currentSlide(4)">
</div>
</div>
</div>
......@@ -133,6 +133,47 @@
</v-col>
</div>
</div>
<v-row class="d-flex justify-center mt-10">
<h2>
RELATED PRODUCT
</h2>
</v-row>
<v-row class="pt-5 pb-5">
<v-col
v-for="(item, i) in items"
:key="i"
cols="12"
md="3"
>
<v-hover
v-slot="{ hover }"
:elevation="hover ? 12 : 2"
:class="{ 'on-hover': hover }"
>
<v-card
:elevation="hover ? 16 : 2"
:class="{ 'on-hover': hover }"
class="mx-auto pa-2 ma-3"
max-width="280"
link
>
<div>
<v-img
:src="item.images"
height="250px"
cover
/>
</div>
<v-card-title class="d-flex justify-center">
{{ item.name }}
</v-card-title>
<v-card-subtitle class="d-flex justify-center">
{{ item.price }}
</v-card-subtitle>
</v-card>
</v-hover>
</v-col>
</v-row>
</v-container>
</template>
......@@ -142,7 +183,29 @@ export default {
data: () => {
return {
product: [],
slideIndex: 1
slideIndex: 1,
items: [
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
price: '100$',
name: 'xiaomi x99'
}
]
}
},
mounted () {
......
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