126 lines
3.4 KiB
Vue
126 lines
3.4 KiB
Vue
<script setup>
|
|
import { isEqual } from "es-toolkit";
|
|
|
|
const props = defineProps({
|
|
address: Object,
|
|
});
|
|
|
|
const emit = defineEmits(["modalevent"]);
|
|
|
|
const { $patchapi } = useNuxtApp();
|
|
const addressRef = ref({ ...props.address });
|
|
const isLoading = ref(false);
|
|
async function updateAddress() {
|
|
isLoading.value = true;
|
|
const updated = await $patchapi("Customer_Address", addressRef.value);
|
|
isLoading.value = false;
|
|
emit("modalevent", { name: "update" });
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form>
|
|
<div class="field">
|
|
<label class="label">Địa chỉ</label>
|
|
<div class="control">
|
|
<input
|
|
v-model="addressRef.address_detail"
|
|
class="input"
|
|
type="text"
|
|
placeholder="Địa chỉ"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="fixed-grid has-12-cols">
|
|
<div class="grid">
|
|
<div class="cell is-col-span-4">
|
|
<div class="field">
|
|
<label class="label">Phường</label>
|
|
<div class="control">
|
|
<input
|
|
v-model="addressRef.ward"
|
|
class="input"
|
|
type="text"
|
|
placeholder="Text input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-4">
|
|
<div class="field">
|
|
<label class="label">Quận</label>
|
|
<div class="control">
|
|
<input
|
|
v-model="addressRef.district"
|
|
class="input"
|
|
type="text"
|
|
placeholder="Text input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-4">
|
|
<div class="field">
|
|
<label class="label">Thành phố</label>
|
|
<div class="control">
|
|
<input
|
|
v-model="addressRef.city"
|
|
class="input"
|
|
type="text"
|
|
placeholder="Text input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="control">
|
|
<label class="checkbox is-flex is-gap-0.5 is-align-items-center">
|
|
<Icon
|
|
:name="
|
|
addressRef.is_default ? 'material-symbols:check-box-rounded' : 'material-symbols:check-box-outline-blank'
|
|
"
|
|
:class="['is-clickable', addressRef.is_default ? 'has-text-primary' : 'has-text-grey-light']"
|
|
:size="24"
|
|
@click="addressRef.is_default = !addressRef.is_default"
|
|
/>
|
|
<span>Địa chỉ mặc định</span>
|
|
<input
|
|
type="checkbox"
|
|
class="is-sr-only"
|
|
v-model="addressRef.is_default"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="field is-grouped is-grouped-right">
|
|
<div class="control">
|
|
<button
|
|
type="button"
|
|
class="button is-white"
|
|
@click="$emit('close')"
|
|
>
|
|
Huỷ
|
|
</button>
|
|
</div>
|
|
<div class="control">
|
|
<button
|
|
type="button"
|
|
:class="['button is-link', isLoading && 'is-loading']"
|
|
:disabled="isEqual(address, addressRef)"
|
|
@click="updateAddress"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:edit-outline-rounded"
|
|
:size="16"
|
|
/>
|
|
</span>
|
|
<span>Cập nhật</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|