Agrego api de Google

parent add759d4
......@@ -47,7 +47,7 @@
},
methods: {
navigateToItem() {
this.$router.push(`/comic/${this.comic.id}`);
this.$router.push(`/comic/${this.comic.id}_${this.comic.isbn}`);
}
}
}
......
......@@ -17,100 +17,137 @@
<div>{{description}}</div>
<v-spacer></v-spacer>
<h2 class="primary--text">{{parseCurrency(realPrice)}}</h2>
<div>Precio en Uruguay</div>
<v-spacer></v-spacer>
<h2 v-if="saleability" class="primary--text">{{parseCurrency(realPriceGoogle)}}</h2>
<h2 v-else class="primary--text">No se encuentra a la venta.</h2>
</v-col>
</v-row>
</div>
</template>
<script>
import axios from "axios";
import axios from "axios";
export default {
name: 'ComicItem',
data() {
return {
item: null,
overlay: false
}
export default {
name: "ComicItem",
data() {
return {
itemMarvel: null,
itemGoogle: null,
saleInfo: null,
overlay: false
};
},
computed: {
/* Api de Google */
titleGoogle() {
return this.itemGoogle?.volumeInfo?.title ?? "";
},
subtitleGoogle() {
return this.itemGoogle?.volumeInfo?.subtitle ?? "";
},
imageGoogle() {
return this.itemGoogle?.volumeInfo?.imageLinks?.thumbnail ?? "";
},
descriptionGoogle() {
return this.itemGoogle?.volumeInfo?.description ?? "";
},
saleInfoGoogle() {
return this.itemGoogle?.saleInfo;
},
offerPriceGoogle() {
return this.saleInfo?.offers[0]?.retailPrice?.amountInMicros ?? 0;
},
realPriceGoogle() {
return this.saleInfo?.listPrice?.amount ?? 0;
},
saleability() {
return this.saleInfo?.saleability == "FOR_SALE";
},
computed: {
/* Api de Google
title() {
return this.item?.volumeInfo?.title ?? '';
},
subtitle() {
return this.item?.volumeInfo?.subtitle ?? '';
},
image() {
return this.item?.volumeInfo?.imageLinks?.thumbnail ?? '';
},
description() {
return this.item?.volumeInfo?.description ?? '';
},
saleInfo() {
return this.item?.saleInfo;
},
offerPrice() {
return this.saleInfo.offers[0]?.retailPrice?.amountInMicros ?? 0;
},
realPrice() {
return this.saleInfo.listPrice?.amount ?? 0;
}
*/
// Api de Marvel
title() {
return this.item?.title ?? '';
},
subtitle() {
return this.item?.series?.name ?? '';
},
image() {
return this.item?.images[0]?.path ? `${this.item?.images[0]?.path}/portrait_incredible.jpg` : '';
},
description() {
return this.item?.description ? this.item?.description : 'Sin descripción';
},
realPrice() {
return this.item?.prices[0]?.price ?? 0;
}
// Api de Marvel
title() {
return this.itemMarvel?.title ?? "";
},
methods: {
parseCurrency(amount) {
return (new Intl.NumberFormat("es-ES", {style: "currency", currency: "USD"}).format(amount));
}
subtitle() {
return this.itemMarvel?.series?.name ?? "";
},
created() {
this.overlay = true;
const baseUrl = 'https://gateway.marvel.com/v1/public/comics';
const id = `${this.$route.params.id}`;
const apiKey = `apikey=29e762cfece8ff211a8d6eabfe17e3b9&ts=1591744565283&hash=7e89e736ebd0edff9b8aa0ee35706106`;
axios.get(`${baseUrl}/${id}?${apiKey}`)
.then(response => {
// JSON responses are automatically parsed.
this.item = response.data.data.results[0];
})
.catch(e => {
this.errors.push(e)
}).finally(() => {
this.overlay = false
});
image() {
return this.itemMarvel?.images[0]?.path
? `${this.itemMarvel?.images[0]?.path}/portrait_incredible.jpg`
: "";
},
description() {
return this.itemMarvel?.description
? this.itemMarvel?.description
: "Sin descripción";
},
realPrice() {
return this.itemMarvel?.prices[0]?.price ?? 0;
}
},
methods: {
parseCurrency(amount) {
return new Intl.NumberFormat("es-ES", {
style: "currency",
currency: "USD"
}).format(amount);
}
},
created() {
this.overlay = true;
const baseUrlMarvel = "https://gateway.marvel.com/v1/public/comics";
const idMarvel = `${this.$route.params.id}`.substring(
0,
`${this.$route.params.id}`.indexOf("_")
);
const apiKey = `apikey=29e762cfece8ff211a8d6eabfe17e3b9&ts=1591744565283&hash=7e89e736ebd0edff9b8aa0ee35706106`;
axios
.get(`${baseUrlMarvel}/${idMarvel}?${apiKey}`)
.then(response => {
// JSON responses are automatically parsed.
this.itemMarvel = response.data.data.results[0];
})
.catch(e => {
this.errors.push(e);
})
.finally(() => {
this.overlay = false;
});
const baseUrlGoogle = "https://www.googleapis.com/books/v1/volumes";
const idGoogle = `${this.$route.params.id}`
.substring(`${this.$route.params.id}`.indexOf("_") + 1)
.replace(/-/g, "");
axios
.get(`${baseUrlGoogle}?q=isbn:${idGoogle}`)
.then(response => {
// JSON responses are automatically parsed.
this.itemGoogle = response.data.data.items[0].volumeInfo;
this.saleInfo = response.data.data.items[0].saleInfo;
})
.catch(e => {
this.errors.push(e);
})
.finally(() => {
this.overlay = false;
});
}
};
</script>
<style lang="scss">
#comic-item-container {
padding: 20px;
border-radius: 20px;
}
#comic-item-container {
padding: 20px;
border-radius: 20px;
}
.dark-back {
background-color: rgba(255, 255, 255, 0.25);
}
.dark-back {
background-color: rgba(255, 255, 255, 0.25);
}
.light-back {
background-color: rgba(0, 0, 0, 0.25);
}
.light-back {
background-color: rgba(0, 0, 0, 0.25);
}
</style>
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