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
Hide 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 @@ ...@@ -61,11 +61,13 @@
style="margin-left:8px" style="margin-left:8px"
@click="getDataItem" @click="getDataItem"
> >
<v-icon <nuxt-link :to="`/home-page/products/${item.id}`">
:class="{ 'show-btns': hover }" <v-icon
> :class="{ 'show-btns': hover }"
mdi-cart >
</v-icon> mdi-cart
</v-icon>
</nuxt-link>
</v-btn> </v-btn>
<v-btn <v-btn
:class="{ 'show-btns': hover }" :class="{ 'show-btns': hover }"
......
pages/home-page/products/_id/index.vue
View file @ 3f14267b
...@@ -8,28 +8,28 @@ ...@@ -8,28 +8,28 @@
<div class="numbertext"> <div class="numbertext">
1 / 4 1 / 4
</div> </div>
<img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;"> <img :src="product.images[0]">
</div> </div>
<div class="mySlides"> <div class="mySlides">
<div class="numbertext"> <div class="numbertext">
2 / 4 2 / 4
</div> </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>
<div class="mySlides"> <div class="mySlides">
<div class="numbertext"> <div class="numbertext">
3 / 4 3 / 4
</div> </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>
<div class="mySlides"> <div class="mySlides">
<div class="numbertext"> <div class="numbertext">
4 / 4 4 / 4
</div> </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> </div>
<!-- Next and previous buttons --> <!-- Next and previous buttons -->
...@@ -40,16 +40,16 @@ ...@@ -40,16 +40,16 @@
<!-- Thumbnail images --> <!-- Thumbnail images -->
<div class="c2"> <div class="c2">
<div class="column"> <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>
<div class="column"> <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>
<div class="column"> <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>
<div class="column"> <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> </div>
</div> </div>
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<v-col> <v-col>
<v-row class="flex-row align-center justify-space-between mt-2"> <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" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem">
MACBOOK PRO 1 {{ product.name }}
</v-card-title> </v-card-title>
</v-row> </v-row>
<v-row class="flex-row align-center"> <v-row class="flex-row align-center">
...@@ -77,8 +77,9 @@ ...@@ -77,8 +77,9 @@
</h3> </h3>
<v-col cols="12" sm="6" md="4"> <v-col cols="12" sm="6" md="4">
<v-select <v-select
v-model="color"
label="Color" label="Color"
:items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']" :items="['Red', 'Blue','Yellow']"
/> />
</v-col> </v-col>
</v-row> </v-row>
...@@ -88,8 +89,9 @@ ...@@ -88,8 +89,9 @@
</h3> </h3>
<v-col cols="12" sm="6" md="4"> <v-col cols="12" sm="6" md="4">
<v-select <v-select
label="Color" v-model="size"
:items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']" label="Size"
:items="['S', 'M', 'L']"
/> />
</v-col> </v-col>
</v-row> </v-row>
...@@ -102,10 +104,11 @@ ...@@ -102,10 +104,11 @@
</h3> </h3>
<v-col md="2"> <v-col md="2">
<v-text-field <v-text-field
v-model="quantity"
type="number" type="number"
/> />
</v-col> </v-col>
<v-btn color="primary" dense> <v-btn @click="addProductToCard" color="primary" dense>
Add to card (+) Add to card (+)
</v-btn> </v-btn>
<v-btn <v-btn
...@@ -178,54 +181,60 @@ ...@@ -178,54 +181,60 @@
</template> </template>
<script> <script>
import { eventBus } from '~/plugins/eventBus.js'
export default { export default {
layout: 'user', layout: 'user',
data: () => { data: () => {
return { return {
product: [], product: {
images: []
},
slideIndex: 1, slideIndex: 1,
items: [ 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$', price: '100$',
name: 'xiaomi x99' 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$', price: '100$',
name: 'xiaomi x99' 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$', price: '100$',
name: 'xiaomi x99' 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$', price: '100$',
name: 'xiaomi x99' name: 'xiaomi x99'
} }
]
],
size: '',
color: '',
quantity: ''
} }
}, },
mounted () { mounted () {
this.showSlides(1)
},
created () {
this.getProduct() this.getProduct()
this.showSlides(1)
}, },
methods: { methods: {
async getProduct () { 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: { headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
}) })
.then(response => (this.product = response.data))
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
}) })
console.log(resp) this.product = resp.data.data
console.log(this.product)
}, },
// css gallery function // css gallery function
plusSlides (n) { plusSlides (n) {
...@@ -249,6 +258,30 @@ export default { ...@@ -249,6 +258,30 @@ export default {
} }
slides[this.slideIndex - 1].style.display = 'block' slides[this.slideIndex - 1].style.display = 'block'
dots[this.slideIndex - 1].className += ' active' 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 { ...@@ -269,8 +302,19 @@ export default {
.mySlides { .mySlides {
display: none; display: none;
height:100%; height:100%;
max-width:543,41px; width:543px!important;
max-height:461,6px; 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 */ /* 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