102 lines
3.3 KiB
Vue
102 lines
3.3 KiB
Vue
<template>
|
||
<ResponsiveAppLayout>
|
||
<h1 class="mb-1 text-xl font-bold text-text">ثبت کسبوکار</h1>
|
||
<p class="mb-6 text-sm text-muted">درخواست شما پس از بررسی ادمین تأیید میشود.</p>
|
||
|
||
<form class="mx-auto max-w-lg space-y-4" @submit.prevent="onSubmit">
|
||
<p
|
||
v-if="message"
|
||
class="rounded-xl border border-brand-500/40 bg-brand-500/10 px-4 py-3 text-sm text-brand-700 dark:text-brand-500"
|
||
>
|
||
{{ message }}
|
||
</p>
|
||
<p
|
||
v-if="error"
|
||
class="rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
|
||
>
|
||
{{ error }}
|
||
</p>
|
||
|
||
<AppInput id="bizTitle" v-model="form.businessTitle" label="نام کسبوکار" required />
|
||
<AppSelect
|
||
id="bizCategory"
|
||
v-model="form.categoryId"
|
||
label="دستهبندی"
|
||
:options="categoryOptions"
|
||
required
|
||
/>
|
||
<AppTextarea id="bizDescription" v-model="form.description" label="توضیحات" />
|
||
<AppInput id="bizAddress" v-model="form.address" label="آدرس" />
|
||
<AppInput id="bizPhone" v-model="form.phone" label="تلفن" ltr />
|
||
|
||
<AppButton type="submit" :loading="loading">ارسال درخواست</AppButton>
|
||
</form>
|
||
</ResponsiveAppLayout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from 'vue';
|
||
import { fetchBusinessCategories } from '@/api/business-categories';
|
||
import { submitBusinessRegistration } from '@/api/business-registrations';
|
||
import { ApiError } from '@/api/client';
|
||
import type { BusinessCategory } from '@/api/types';
|
||
import AppButton from '@/components/ui/AppButton.vue';
|
||
import AppInput from '@/components/ui/AppInput.vue';
|
||
import AppSelect from '@/components/ui/AppSelect.vue';
|
||
import AppTextarea from '@/components/ui/AppTextarea.vue';
|
||
import ResponsiveAppLayout from '@/layouts/ResponsiveAppLayout.vue';
|
||
|
||
const categories = ref<BusinessCategory[]>([]);
|
||
const loading = ref(false);
|
||
const error = ref('');
|
||
const message = ref('');
|
||
const form = ref({
|
||
businessTitle: '',
|
||
categoryId: '',
|
||
description: '',
|
||
address: '',
|
||
phone: '',
|
||
});
|
||
|
||
const categoryOptions = computed(() =>
|
||
categories.value
|
||
.filter((category) => category.isActive)
|
||
.map((category) => ({ value: category.id, label: category.title })),
|
||
);
|
||
|
||
async function onSubmit() {
|
||
error.value = '';
|
||
message.value = '';
|
||
loading.value = true;
|
||
try {
|
||
await submitBusinessRegistration({
|
||
businessTitle: form.value.businessTitle.trim(),
|
||
categoryId: form.value.categoryId,
|
||
description: form.value.description.trim() || undefined,
|
||
address: form.value.address.trim() || undefined,
|
||
phone: form.value.phone.trim() || undefined,
|
||
});
|
||
message.value = 'درخواست شما ثبت شد. پس از بررسی نتیجه اعلام میشود.';
|
||
form.value = {
|
||
businessTitle: '',
|
||
categoryId: '',
|
||
description: '',
|
||
address: '',
|
||
phone: '',
|
||
};
|
||
} catch (e) {
|
||
error.value = e instanceof ApiError ? e.message : 'ثبت درخواست ناموفق بود.';
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
categories.value = await fetchBusinessCategories();
|
||
} catch {
|
||
error.value = 'بارگذاری دستهبندیها ناموفق بود.';
|
||
}
|
||
});
|
||
</script>
|