Skip to content

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

change

parent 3f14267b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1210 additions and 432 deletions
components/DetailModal.vue
View file @ 48903f3a
......@@ -24,7 +24,7 @@
</v-col>
<v-col class="half-space">
<v-row class="first-row flex-row align-center justify-space-between mt-2">
<v-card-title v-model="item.name" class="modal-title" style="margin-left:-30px">
<v-card-title v-model="item.name" class="modal-title">
{{ name }}
</v-card-title>
<v-btn icon style="background-color:red" @click="$emit('close'); clearDialog()">
......@@ -266,6 +266,7 @@ export default {
font-weight: bold;
margin-left:-22px;
margin-top:10px;
width: 85%;
}
.hex-variant {
/* margin-top:0px; */
......
components/user/NavBar.vue
View file @ 48903f3a
......@@ -23,9 +23,11 @@
<v-icon>mdi-chevron-down</v-icon>
</div>
<div class="navbar-item">
<span>
<nuxt-link :to="`/home-page/posts/list`">
<span style="color:rgba(0, 0, 0, 0.87);">
Blogs
</span>
</nuxt-link>
<v-icon>mdi-chevron-down</v-icon>
</div>
<div class="navbar-item">
......
pages/home-page/index.vue
View file @ 48903f3a
......@@ -136,12 +136,6 @@
md="3"
class="feature-row"
>
<!-- <v-carousel
hide-delimiters
:slides-per-page="4"
:center-mode="true"
>
<v-carousel-item v-for="item in items" :key="item.id"> -->
<v-hover
v-slot="{ hover }"
:elevation="hover ? 12 : 2"
......@@ -240,25 +234,26 @@
class="card-img"
/>
<v-card-text class="calendar">
<span>19</span>
<span>JAN</span>
<span>{{ formatDateTime(item.created_at) }}</span>
<span>{{ formatMonthTime(item.created_at) }}</span>
</v-card-text>
<v-card-item class="card-4">
<v-card-title style="padding:5px;font-weight:800">
<v-card-title style="padding:5px;font-weight:800;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
{{ item.title }}
</v-card-title>
</v-card-item>
<v-card-text style="padding:5px">
<v-card-text class="post-content" style="padding:5px">
<div>{{ item.content }}</div>
</v-card-text>
<v-card-actions>
<nuxt-link :to="`/home-page/posts/${item.id}`">
<v-btn
color="primary"
variant="text"
@click="reserve"
>
Read More
</v-btn>
</nuxt-link>
</v-card-actions>
</v-card>
</v-col>
......@@ -339,29 +334,14 @@ export default {
price: '50$'
}
],
posts: [
{
images: 'https://d-themes.com/html/riode/images/blog/frame/1.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
},
{
images: 'https://d-themes.com/html/riode/images/blog/frame/2.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
},
{
images: 'https://d-themes.com/html/riode/images/blog/frame/3.jpg',
title: '20% Off Coupon for CyberWeek',
content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
}
],
posts: [],
categories: [],
product: []
}
},
mounted () {
this.getCategories()
this.getPosts()
// this.getNewProducts()
},
methods: {
......@@ -380,6 +360,22 @@ export default {
.catch(function (error) {
console.log(error)
})
},
getPosts () {
this.$axios
.get('/guest/posts/latest-posts/', {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
this.posts = response.data.data
})
.catch(function (error) {
console.log(error)
})
}
// getNewProducts () {
// this.$axios
......@@ -502,6 +498,13 @@ export default {
color: black !important;
font-weight: bold;
}
.post-content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (max-width: 500px) {
.feature-row {
flex: 1 1 49%;
......
pages/home-page/posts/_id/index.vue 0 → 100644
View file @ 48903f3a
This diff is collapsed.
pages/home-page/posts/index.vue 0 → 100644
View file @ 48903f3a
This diff is collapsed.
pages/home-page/posts/list.vue 0 → 100644
View file @ 48903f3a
<template>
<div>
<v-container class="pa-0">
<v-row class="bread-crumbs mt-2">
<v-breadcrumbs
class="bread-crumb"
:items="items"
separator="/"
small
dense
>
<template #item="{ item }">
<v-icon>{{ item.icon }}</v-icon>
{{ item.text }}
</template>
</v-breadcrumbs>
</v-row>
<v-row class="pb-5 pt-0">
<v-col
v-for="(item, i) in posts"
:key="i"
cols="12"
md="4"
class="feature-col"
>
<v-card
:loading="loading"
class="mx-auto my-12 card-4"
max-width="374"
>
<template #loader="{ isActive }">
<v-progress-linear
:active="isActive"
color="deep-purple"
height="4"
indeterminate
/>
</template>
<v-img
cover
height="250"
:src="item.images"
class="card-img"
/>
<v-card-text class="calendar">
<span>{{ formatDateTime(item.created_at) }}</span>
<span>{{ formatMonthTime(item.created_at) }}</span>
</v-card-text>
<v-card-item class="card-4">
<v-card-title style="padding:5px;font-weight:800;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
{{ item.title }}
</v-card-title>
</v-card-item>
<v-card-text style="padding:5px" class="post-content">
<div>{{ item.content }}</div>
</v-card-text>
<v-card-actions>
<nuxt-link :to="`/home-page/posts/${item.id}`">
<v-btn
color="primary"
variant="text"
@click="reserve"
>
Read More
</v-btn>
</nuxt-link>
</v-card-actions>
</v-card>
</v-col>
</v-row>
<v-divider />
</v-container>
</div>
</template>
<script>
export default {
layout: 'user',
data: () => {
return {
posts: [
// {
// images: 'https://d-themes.com/html/riode/images/blog/list/3.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// },
// {
// images: 'https://d-themes.com/html/riode/images/blog/list/4.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// },
// {
// images: 'https://d-themes.com/html/riode/images/blog/list/6.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// },
// {
// images: 'https://d-themes.com/html/riode/images/blog/frame/1.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// },
// {
// images: 'https://d-themes.com/html/riode/images/blog/frame/2.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// },
// {
// images: 'https://d-themes.com/html/riode/images/blog/frame/3.jpg',
// title: '20% Off Coupon for CyberWeek',
// content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
// }
],
icons: ['mdi-cart', 'mdi-heart', 'mdi-magnify'],
products: [],
page: 1,
items: [
{
text: '',
to: '/home-page',
disabled: false,
icon: 'mdi-home'
},
{
text: 'Posts',
to: '/home-page/posts',
disabled: false,
icon: ''
}
]
}
},
created () {
this.getPosts()
},
methods: {
async getPosts () {
const resp = await this.$axios.get('/guest/posts/index', {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then(response => (this.posts = response.data.data))
.catch(function (error) {
console.log(error)
})
console.log(resp)
}
}
}
</script>
<style lang="scss" scoped>
.sub-title {
text-transform: capitalize;
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.0125em;
color: #222;
}
.calendar {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: fit-content;
top: 20px;
position: absolute;
background-color: #ffffff;
left: 20px;
opacity: 0.8;
padding: 10px;
border-radius: 4px;
color: black !important;
font-weight: bold;
}
.post-content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (max-width: 500px) {
.row >.feature-col {
padding-right:0px;
padding-left: 0px;
}
.row >.feature-col:not(:last-child) {
margin-bottom:-65px;
}
}
</style>
pages/home-page/products/_id/index.vue
View file @ 48903f3a
<template>
<v-container>
<!-- Full-width images with number text -->
<v-row class="bread-crumbs">
<v-breadcrumbs>
<v-breadcrumbs-item href="/home-page">
<v-icon>mdi-home</v-icon>
</v-breadcrumbs-item>
<v-breadcrumbs-item :href="`/home-page/categories/${product.category_id}`">
> Category
</v-breadcrumbs-item>
</v-breadcrumbs>
</v-row>
<div class="sub-container">
<div class="gallery-product">
<div>
<div class="mySlides">
<div class="numbertext">
1 / 4
</div>
<img :src="product.images[0]">
</div>
<div class="mySlides">
<div class="numbertext">
2 / 4
</div>
<img :src="product.images[1] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'">
</div>
<div class="mySlides">
<div class="numbertext">
3 / 4
</div>
<img :src="product.images[2] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'">
</div>
<div class="mySlides">
<div class="numbertext">
4 / 4
</div>
<img :src="product.images[3] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'">
</div>
......@@ -56,26 +53,23 @@
<div class="detail-product">
<v-col>
<v-row class="flex-row align-center justify-space-between mt-2">
<v-card-title class="modal-title" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem">
<v-card-title class="modal-title text-uppercase" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem">
{{ product.name }}
</v-card-title>
</v-row>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Price:
</h3>
<v-card-title style="color: #d26e4b;font-weight: 700;line-height: 1;">
100$
<v-card-title class="modal-title" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem;color: #d26e4b;">
${{ product.price }}.00
</v-card-title>
</v-row>
<v-card-text class="descrip">
Sed egestas, ante et vulputate volutpat,
{{ product.description }}
</v-card-text>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Color:
</h3>
<v-col cols="12" sm="6" md="4">
<v-col class="col-col" cols="12" sm="6" md="4">
<v-select
v-model="color"
label="Color"
......@@ -87,7 +81,7 @@
<h3 class="mr-4">
Size:
</h3>
<v-col cols="12" sm="6" md="4">
<v-col class="col-col" cols="12" sm="6" md="4">
<v-select
v-model="size"
label="Size"
......@@ -95,6 +89,11 @@
/>
</v-col>
</v-row>
<v-row v-if="isSelectionValid" class="flex-row align-center">
<h3 class="mr-4 mt-2 price-tag" style="color: rgb(210, 110, 75);">
{{ total_price.toFixed(2) + "$" }}
</h3>
</v-row>
<v-row class="mt-7">
<v-divider :thickness="2" />
</v-row>
......@@ -108,7 +107,7 @@
type="number"
/>
</v-col>
<v-btn @click="addProductToCard" color="primary" dense>
<v-btn color="primary" dense @click="addProductToCard">
Add to card (+)
</v-btn>
<v-btn
......@@ -167,6 +166,7 @@
cover
/>
</div>
<v-card-title class="d-flex justify-center">
{{ item.name }}
</v-card-title>
......@@ -212,11 +212,35 @@ export default {
price: '100$',
name: 'xiaomi x99'
}
],
size: '',
color: '',
quantity: ''
quantity: 1,
breadcrumb: [
{
icon: 'mdi-home',
text: 'Home',
disabled: false,
href: '/home-page'
},
{
text: 'Category',
disabled: false,
href: '/home-page/categories/'
}
]
}
},
computed: {
total_price () {
if (this.quantity < 0) {
return 0
} else {
return this.quantity * this.product.price
}
},
isSelectionValid () {
return this.size !== '' && this.color !== ''
}
},
mounted () {
......@@ -275,6 +299,7 @@ export default {
this.$toast.success('Add product successfully!', {
duration: 3000
})
this.clear()
eventBus.$emit('add-to-cart', response)
})
.catch((errors) => {
......@@ -282,6 +307,11 @@ export default {
duration: 3000
})
})
},
clear () {
this.size = ''
this.color = ''
this.quantity = 1
}
}
}
......@@ -411,4 +441,43 @@ export default {
flex-direction: row;
gap: 20px;
}
.bread-crumbs >ul>li>a {
color: #222 !important;
}
@media only screen and (max-width: 500px) {
.sub-container {
flex-direction: column;
gap: 20px;
padding-left: 12px;
}
.mySlides {
width:378px!important;
height:426px !important;
}
.mySlides>img {
width:378px!important;
height:426px !important;
}
.gallery-product {
flex-direction: column;
}
.c2 {
flex-direction: row;
}
.column>img {
width: 87px!important;
height:100px!important;
}
.detail-product {
padding-left:15px;
}
.col-col {
max-width:80%;
}
.container {
max-width: 415px !important;
font-size: 15px;
}
}
</style>
pages/home-page/products/index.vue deleted 100644 → 0
View file @ 3f14267b
<template>
<v-container>
<!-- Full-width images with number text -->
<div class="sub-container">
<div class="gallery-product">
<div>
<div class="mySlides">
<div class="numbertext">
1 / 4
</div>
<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://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://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://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
</div>
<!-- Next and previous buttons -->
<a class="prev" @click="plusSlides(-1)">&#10094;</a>
<a class="next" @click="plusSlides(1)">&#10095;</a>
</div>
<!-- Thumbnail images -->
<div class="c2">
<div class="column">
<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://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://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://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;" alt="Northern Lights" @click="currentSlide(4)">
</div>
</div>
</div>
<div class="detail-product">
<v-col>
<v-row class="flex-row align-center justify-space-between mt-2">
<v-card-title class="modal-title" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem">
MACBOOK PRO 1
</v-card-title>
</v-row>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Price:
</h3>
<v-card-title style="color: #d26e4b;font-weight: 700;line-height: 1;">
100$
</v-card-title>
</v-row>
<v-card-text class="descrip">
Sed egestas, ante et vulputate volutpat,
</v-card-text>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Color:
</h3>
<v-col cols="12" sm="6" md="4">
<v-select
label="Color"
:items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
/>
</v-col>
</v-row>
<v-row class="flex-row align-center">
<h3 class="mr-4">
Size:
</h3>
<v-col cols="12" sm="6" md="4">
<v-select
label="Color"
:items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
/>
</v-col>
</v-row>
<v-row class="mt-7">
<v-divider :thickness="2" />
</v-row>
<v-row cols="12" md="2" class="flex-row align-center">
<h3 class="mr-4">
Quantity
</h3>
<v-col md="2">
<v-text-field
type="number"
/>
</v-col>
<v-btn color="primary" dense>
Add to card (+)
</v-btn>
<v-btn
plain
>
<v-icon large>
mdi-heart-outline
</v-icon>
</v-btn>
</v-row>
<v-row class="mb-1">
<v-divider :thickness="2" />
</v-row>
<v-row>
<v-icon class="mx-2">
mdi-twitter
</v-icon>
<v-icon class="mx-2">
mdi-facebook
</v-icon>
<v-icon class="mx-2">
mdi-instagram
</v-icon>
</v-row>
</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>
<script>
export default {
layout: 'user',
data: () => {
return {
product: [],
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 () {
this.showSlides(1)
},
created () {
this.getProduct()
},
methods: {
async getProduct () {
const resp = await this.$axios.get(`/products/detail/${this.$route.params.id}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then(response => (this.product = response.data))
.catch(function (error) {
console.log(error)
})
console.log(resp)
},
// css gallery function
plusSlides (n) {
this.showSlides(this.slideIndex += n)
},
currentSlide (n) {
this.showSlides(this.slideIndex = n)
},
showSlides (n) {
let i
const slides = document.getElementsByClassName('mySlides')
const dots = document.getElementsByClassName('demo')
if (n > slides.length) { this.slideIndex = 1 }
if (n < 1) { this.slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = 'none'
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(' active', '')
}
slides[this.slideIndex - 1].style.display = 'block'
dots[this.slideIndex - 1].className += ' active'
}
}
}
</script>
<style scope>
* {
box-sizing: border-box;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
height:100%;
max-width:543,41px;
max-height:461,6px;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 12px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 100%;
height: 25%;
max-width:109px;
max-height:122px;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
.gallery-product {
margin-top: 40px;
display: flex;
flex-direction: row-reverse;
gap: 5px;
justify-content: flex-end;
}
.c2 {
display: flex;
flex-direction: column;
margin-right: 20px;
max-width: 91px;
gap: 10px;
}
.sub-container {
display: flex;
flex-direction: row;
gap: 20px;
}
</style>
plugins/formatTime.js
View file @ 48903f3a
......@@ -18,6 +18,21 @@ Vue.mixin({
keepToken () {
const TOKEN = localStorage.getItem('token')
this.$auth.$storage.setUniversal('token', TOKEN)
},
formatDateString (dateStr) {
const date = new Date(dateStr)
const options = { month: 'short', day: 'numeric', year: 'numeric' }
return date.toLocaleDateString('en-US', options)
},
formatDateTime (dateStr) {
const date = new Date(dateStr)
const day = date.getDate()
return day
},
formatMonthTime (dateStr) {
const dateObj = new Date(dateStr)
const monthName = dateObj.toLocaleString('en-US', { month: 'short' }).toUpperCase()
return monthName
}
}
......
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