54 lines
1.7 KiB
Vue
54 lines
1.7 KiB
Vue
<script setup>
|
|
import { remove } from "es-toolkit";
|
|
|
|
const props = defineProps({
|
|
imei: Object,
|
|
});
|
|
const { $numtoString, $snackbar } = useNuxtApp();
|
|
const store = useStore();
|
|
function removeFromCart() {
|
|
remove(store.selectedImeis, (imeiRec) => imeiRec.id === props.imei.id);
|
|
$snackbar("Đã xoá sản phẩm khỏi giỏ hàng", "Success");
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card m-0">
|
|
<div class="card-content p-4 is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
|
|
<div class="is-flex is-gap-4 is-justify-content-space-between is-align-items-center is-flex-grow-1">
|
|
<div class="media m-0">
|
|
<div class="media-left">
|
|
<figure class="image is-48x48">
|
|
<img :src="imei.variant__image__path" />
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<p class="font-bold fs-15">{{ imei.variant__product__name }}</p>
|
|
<p class="fs-13 has-text-grey">
|
|
<span>{{ imei.variant__ram__code }}</span>
|
|
<span> • </span>
|
|
<span>{{ imei.variant__internal_storage__code }}</span>
|
|
<span> • </span>
|
|
<span>{{ imei.variant__color__name }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="has-text-primary-50 font-medium">{{ $numtoString(imei.variant__price, { hasUnit: true }) }}</p>
|
|
</div>
|
|
<div>
|
|
<button
|
|
@click="removeFromCart"
|
|
class="button is-danger is-light"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:delete-outline-rounded"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|