88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
address: Object,
|
|
selected: Boolean,
|
|
});
|
|
|
|
const showModal = ref(false);
|
|
|
|
function openEditModal() {
|
|
showModal.value = {
|
|
component: "pos/EditAddress",
|
|
title: "Cập nhật địa chỉ",
|
|
width: "50%",
|
|
height: "auto",
|
|
vbind: { address: props.address },
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="['card is-clickable', selected && 'selected']"
|
|
@click="$emit('selectAddress', address)"
|
|
>
|
|
<div class="card-content is-flex is-justify-content-space-between">
|
|
<div>
|
|
<div class="fs-14 is-flex is-gap-1 is-align-items-center">
|
|
<p>{{ address.address_detail }}</p>
|
|
<span
|
|
v-if="address.is_default"
|
|
class="tag is-primary is-light"
|
|
>
|
|
Mặc định</span
|
|
>
|
|
<button
|
|
@click.stop="openEditModal"
|
|
class="button is-small is-white rounded-full p-0 size-7"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:edit-outline-rounded"
|
|
:size="16"
|
|
class="has-text-primary"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<p class="has-text-grey is-size-7">
|
|
<span>Phường {{ address.ward }}</span>
|
|
<span>, </span>
|
|
<span>Quận {{ address.district }}</span>
|
|
<span>, </span>
|
|
<span>{{ address.city }}</span>
|
|
</p>
|
|
</div>
|
|
<span
|
|
v-if="selected"
|
|
class="icon has-background-primary-95 rounded-full"
|
|
>
|
|
<Icon
|
|
name="material-symbols:check-rounded"
|
|
:size="18"
|
|
class="has-text-primary"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<Modal
|
|
v-if="showModal"
|
|
v-bind="showModal"
|
|
@close="showModal = null"
|
|
@update="$emit('update')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.card {
|
|
&:hover {
|
|
border-color: var(--bulma-primary);
|
|
}
|
|
&.selected {
|
|
border-color: var(--bulma-primary);
|
|
}
|
|
}
|
|
.card-content {
|
|
--bulma-card-content-padding: 1rem;
|
|
}
|
|
</style>
|