Skip to content

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

fixbug

parent a91a949e
Show whitespace changes
Inline Side-by-side
Showing with 78 additions and 32 deletions
pages/home-page/categories/_id/index.vue
View file @ 3f14267b
......@@ -61,11 +61,13 @@
style="margin-left:8px"
@click="getDataItem"
>
<nuxt-link :to="`/home-page/products/${item.id}`">
<v-icon
:class="{ 'show-btns': hover }"
>
mdi-cart
</v-icon>
</nuxt-link>
</v-btn>
<v-btn
:class="{ 'show-btns': hover }"
......
pages/home-page/products/_id/index.vue
View file @ 3f14267b
......@@ -8,28 +8,28 @@
<div class="numbertext">
1 / 4
</div>
<img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
<img :src="product.images[0]">
</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%;">
<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="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" style="width:100%; height: 100%;">
<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="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
<img :src="product.images[3] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'">
</div>
<!-- Next and previous buttons -->
......@@ -40,16 +40,16 @@
<!-- 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)">
<img class="demo cursor" :src="product.images[0] || '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)">
<img class="demo cursor" :src="product.images[1] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.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)">
<img class="demo cursor" :src="product.images[2] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.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)">
<img class="demo cursor" :src="product.images[3] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'" style="width:100%; height: 100%;" alt="Northern Lights" @click="currentSlide(4)">
</div>
</div>
</div>
......@@ -57,7 +57,7 @@
<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
{{ product.name }}
</v-card-title>
</v-row>
<v-row class="flex-row align-center">
......@@ -77,8 +77,9 @@
</h3>
<v-col cols="12" sm="6" md="4">
<v-select
v-model="color"
label="Color"
:items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
:items="['Red', 'Blue','Yellow']"
/>
</v-col>
</v-row>
......@@ -88,8 +89,9 @@
</h3>
<v-col cols="12" sm="6" md="4">
<v-select
label="Color"
:items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
v-model="size"
label="Size"
:items="['S', 'M', 'L']"
/>
</v-col>
</v-row>
......@@ -102,10 +104,11 @@
</h3>
<v-col md="2">
<v-text-field
v-model="quantity"
type="number"
/>
</v-col>
<v-btn color="primary" dense>
<v-btn @click="addProductToCard" color="primary" dense>
Add to card (+)
</v-btn>
<v-btn
......@@ -178,54 +181,60 @@
</template>
<script>
import { eventBus } from '~/plugins/eventBus.js'
export default {
layout: 'user',
data: () => {
return {
product: [],
product: {
images: []
},
slideIndex: 1,
items: [
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product1.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product2.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product3.jpg',
price: '100$',
name: 'xiaomi x99'
},
{
images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product4.jpg',
price: '100$',
name: 'xiaomi x99'
}
]
],
size: '',
color: '',
quantity: ''
}
},
mounted () {
this.showSlides(1)
},
created () {
this.getProduct()
this.showSlides(1)
},
methods: {
async getProduct () {
const resp = await this.$axios.get(`/products/detail/${this.$route.params.id}`, {
const resp = await this.$axios.get(`/guest/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)
this.product = resp.data.data
console.log(this.product)
},
// css gallery function
plusSlides (n) {
......@@ -249,6 +258,30 @@ export default {
}
slides[this.slideIndex - 1].style.display = 'block'
dots[this.slideIndex - 1].className += ' active'
},
addProductToCard () {
const fd = new FormData()
fd.append('product_id', this.product.id)
fd.append('color', this.color)
fd.append('size', this.size)
fd.append('quantity', this.quantity)
this.$axios
.post('/carts/add-to-cart', fd, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then((response) => {
this.$toast.success('Add product successfully!', {
duration: 3000
})
eventBus.$emit('add-to-cart', response)
})
.catch((errors) => {
this.$toast.error('something went wrong!', {
duration: 3000
})
})
}
}
}
......@@ -269,8 +302,19 @@ export default {
.mySlides {
display: none;
height:100%;
max-width:543,41px;
max-height:461,6px;
width:543px!important;
height:518px !important;
}
.mySlides>img {
width:543px!important;
height:518px !important;
object-fit: cover;
}
.column>img {
width:109px !important;
height:122px !important;
}
/* Add a pointer when hovering over the thumbnail images */
......
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