91 lines
2.7 KiB
Vue
91 lines
2.7 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
cartItem: Object,
|
|
deleteable: Boolean,
|
|
invalid: Boolean,
|
|
});
|
|
const { $deleteapi, $snackbar } = useNuxtApp();
|
|
const posStore = usePosStore();
|
|
const showConfirmModal = ref();
|
|
const isDeleting = ref(false);
|
|
|
|
function openConfirmModal() {
|
|
showConfirmModal.value = {
|
|
component: "dialog/Confirm",
|
|
width: "500px",
|
|
height: "auto",
|
|
vbind: {
|
|
content: `Bạn xác nhận xoá sản phẩm <b>${props.cartItem.imei__variant__product__name}</b> khỏi giỏ hàng?`,
|
|
onModalevent: removeFromCart,
|
|
},
|
|
};
|
|
}
|
|
|
|
async function removeFromCart() {
|
|
isDeleting.value = true;
|
|
await $deleteapi("Cart_Item", props.cartItem.id);
|
|
isDeleting.value = false;
|
|
$snackbar("Đã xoá sản phẩm khỏi giỏ hàng", "Success");
|
|
posStore.getCarts();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="card m-0"
|
|
:style="{
|
|
borderColor: invalid ? 'var(--bulma-danger-70)' : '',
|
|
}"
|
|
>
|
|
<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="cartItem.imei__variant__image__path" />
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<p class="font-semibold fs-15">{{ cartItem.imei__variant__product__name }}</p>
|
|
<p class="fs-13 has-text-grey">
|
|
<span>{{ cartItem.imei__variant__ram__code }}</span>
|
|
<span> • </span>
|
|
<span>{{ cartItem.imei__variant__internal_storage__code }}</span>
|
|
<span> • </span>
|
|
<span>{{ cartItem.imei__variant__color__name }}</span>
|
|
</p>
|
|
<p
|
|
v-if="invalid"
|
|
class="is-size-7 has-text-danger-40"
|
|
>
|
|
IMEI sản phẩm
|
|
<span class="tag is-light is-danger fs-11">{{ cartItem.imei__imei }}</span>
|
|
không có sẵn
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="has-text-primary-50 font-medium">
|
|
{{ $formatNum(cartItem.imei__variant__price, { hasUnit: true }) }}
|
|
</p>
|
|
</div>
|
|
<button
|
|
v-if="deleteable || invalid"
|
|
@click="openConfirmModal"
|
|
:class="['button is-danger is-light', isDeleting && 'is-loading']"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:delete-outline-rounded"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<Modal
|
|
v-if="showConfirmModal"
|
|
v-bind="showConfirmModal"
|
|
@close="showConfirmModal = undefined"
|
|
/>
|
|
</div>
|
|
</template>
|