59 lines
1.8 KiB
Vue
59 lines
1.8 KiB
Vue
<script setup>
|
|
const message = ref({
|
|
name:"",
|
|
email:"",
|
|
phone:"",
|
|
message:""
|
|
});
|
|
|
|
const errorMessage = ref('');
|
|
const successMessage = ref('');
|
|
const route = useRoute();
|
|
|
|
const disabledButton = computed(() => {
|
|
for (let key in message.value) {
|
|
if(!message.value[key]) return true;
|
|
}
|
|
return false;
|
|
});
|
|
|
|
const onSubmit = async () => {
|
|
console.log(route.params.id);
|
|
errorMessage.value = "";
|
|
try {
|
|
const response = await $fetch(`/api/car/listings/${route.params.id}/message`,{
|
|
method: "post",
|
|
body: message.value
|
|
});
|
|
|
|
message.value = {
|
|
name:"",
|
|
email:"",
|
|
phone:"",
|
|
message:""
|
|
};
|
|
successMessage.value = "Message sent!"
|
|
} catch (error) {
|
|
console.log(error);
|
|
errorMessage.value = error.statusMessage;
|
|
}
|
|
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-10">
|
|
<div class="flex w-[600px] justify-between">
|
|
<input type="text" class="border p-1" placeholder="Name" v-model="message.name"/>
|
|
<input type="text" class="border p-1" placeholder="Email" v-model="message.email"/>
|
|
<input type="text" class="border p-1" placeholder="Phone" v-model="message.phone"/>
|
|
</div>
|
|
<div class="flex mt-4 w-[600px]">
|
|
<textarea class="border p-1 w-full" placeholder="message" v-model="message.message"></textarea>
|
|
</div>
|
|
<button class="bg-blue-400 text-white px-10 py-3 mt-4 rounded" @click="onSubmit" :disabled="disabledButton">Submit</button>
|
|
<p v-if="errorMessage" class="mt-3 text-red-400">{{ errorMessage }}</p>
|
|
<p v-if="successMessage" class="mt-3 text-green-400">{{ successMessage }}</p>
|
|
</div>
|
|
|
|
</template> |