landing desktop
This commit is contained in:
@@ -1,198 +1,101 @@
|
||||
<template>
|
||||
<WebAppLayout>
|
||||
<h1 class="mb-2 text-xl font-bold text-text">ثبت کسب‌وکار</h1>
|
||||
<p class="mb-4 text-sm text-muted">
|
||||
درخواست شما پس از بررسی توسط مدیریت منتایم فعال می‌شود.
|
||||
</p>
|
||||
<ResponsiveAppLayout>
|
||||
<h1 class="mb-1 text-xl font-bold text-text">ثبت کسب‌وکار</h1>
|
||||
<p class="mb-6 text-sm text-muted">درخواست شما پس از بررسی ادمین تأیید می‌شود.</p>
|
||||
|
||||
<p
|
||||
v-if="error"
|
||||
class="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600"
|
||||
>
|
||||
{{ error }}
|
||||
</p>
|
||||
|
||||
<FormPageSkeleton v-if="loading" />
|
||||
|
||||
<div
|
||||
v-else-if="pendingRequest"
|
||||
class="space-y-4 rounded-2xl border border-amber-500/30 bg-amber-500/10 p-4"
|
||||
>
|
||||
<p class="font-semibold text-text">در انتظار تأیید</p>
|
||||
<p class="text-sm text-muted">
|
||||
درخواست «{{ pendingRequest.title }}» ثبت شده و در حال بررسی است.
|
||||
<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 class="text-xs text-muted">
|
||||
پس از تأیید، پیامک دریافت می‌کنید و تب «کسب‌وکار» در اپ فعال می‌شود.
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="lastRejected"
|
||||
class="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600"
|
||||
>
|
||||
آخرین درخواست «{{ lastRejected.title }}» رد شد.
|
||||
<span v-if="lastRejected.adminNote"> — {{ lastRejected.adminNote }}</span>
|
||||
می‌توانید دوباره درخواست دهید.
|
||||
</div>
|
||||
|
||||
<form v-if="showForm" class="space-y-4" @submit.prevent="onSubmit">
|
||||
<AppInput id="bizTitle" v-model="form.title" label="نام کسب‌وکار" required @blur="maybeSlug" />
|
||||
|
||||
<AppInput
|
||||
id="bizSlug"
|
||||
v-model="form.slug"
|
||||
label="اسلاگ (انگلیسی)"
|
||||
ltr
|
||||
placeholder="اختیاری — از عنوان ساخته می‌شود"
|
||||
@input="slugTouched = true"
|
||||
/>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label for="bizCategory" class="block text-sm font-medium text-muted">دسته</label>
|
||||
<select
|
||||
id="bizCategory"
|
||||
v-model="form.categoryId"
|
||||
required
|
||||
class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
|
||||
>
|
||||
<option value="" disabled>انتخاب دسته</option>
|
||||
<option v-for="cat in categories" :key="cat.id" :value="cat.id">
|
||||
{{ cat.title }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label for="bizDesc" class="block text-sm font-medium text-muted">توضیحات</label>
|
||||
<textarea
|
||||
id="bizDesc"
|
||||
v-model="form.description"
|
||||
rows="3"
|
||||
class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AppInput
|
||||
id="bizPhone"
|
||||
v-model="form.contactPhone"
|
||||
label="تلفن تماس"
|
||||
type="tel"
|
||||
inputmode="tel"
|
||||
ltr
|
||||
<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="saving">ارسال درخواست</AppButton>
|
||||
<AppButton type="submit" :loading="loading">ارسال درخواست</AppButton>
|
||||
</form>
|
||||
</WebAppLayout>
|
||||
</ResponsiveAppLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { fetchBusinessCategories } from '@/api/business-categories';
|
||||
import {
|
||||
fetchMyBusinessRegistrations,
|
||||
submitBusinessRegistration,
|
||||
} from '@/api/business-registrations';
|
||||
import type { BusinessCategory, BusinessRegistrationRequest } from '@/api/types';
|
||||
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 FormPageSkeleton from '@/components/ui/FormPageSkeleton.vue';
|
||||
import AppInput from '@/components/ui/AppInput.vue';
|
||||
import WebAppLayout from '@/layouts/WebAppLayout.vue';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { isValidSlug, optionalSlug, slugify } from '@/utils/slug';
|
||||
import AppSelect from '@/components/ui/AppSelect.vue';
|
||||
import AppTextarea from '@/components/ui/AppTextarea.vue';
|
||||
import ResponsiveAppLayout from '@/layouts/ResponsiveAppLayout.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const loading = ref(true);
|
||||
const saving = ref(false);
|
||||
const error = ref('');
|
||||
const slugTouched = ref(false);
|
||||
const categories = ref<BusinessCategory[]>([]);
|
||||
const requests = ref<BusinessRegistrationRequest[]>([]);
|
||||
|
||||
const loading = ref(false);
|
||||
const error = ref('');
|
||||
const message = ref('');
|
||||
const form = ref({
|
||||
title: '',
|
||||
slug: '',
|
||||
businessTitle: '',
|
||||
categoryId: '',
|
||||
description: '',
|
||||
contactPhone: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
});
|
||||
|
||||
const pendingRequest = computed(() =>
|
||||
requests.value.find((r) => r.status === 'pending'),
|
||||
const categoryOptions = computed(() =>
|
||||
categories.value
|
||||
.filter((category) => category.isActive)
|
||||
.map((category) => ({ value: category.id, label: category.title })),
|
||||
);
|
||||
|
||||
const lastRejected = computed(() =>
|
||||
requests.value.find((r) => r.status === 'rejected'),
|
||||
);
|
||||
|
||||
const showForm = computed(
|
||||
() => !pendingRequest.value && auth.isCustomer,
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
if (auth.isBusinessOwner) {
|
||||
await router.replace({ name: 'app-owner' });
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
async function onSubmit() {
|
||||
error.value = '';
|
||||
message.value = '';
|
||||
loading.value = true;
|
||||
try {
|
||||
const [cats, mine] = await Promise.all([
|
||||
fetchBusinessCategories(),
|
||||
fetchMyBusinessRegistrations(),
|
||||
]);
|
||||
categories.value = cats.filter((c) => c.isActive);
|
||||
requests.value = mine;
|
||||
if (categories.value[0] && !form.value.categoryId) {
|
||||
form.value.categoryId = categories.value[0].id;
|
||||
}
|
||||
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 : 'خطا در بارگذاری';
|
||||
error.value = e instanceof ApiError ? e.message : 'ثبت درخواست ناموفق بود.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
function maybeSlug() {
|
||||
if (!slugTouched.value && !form.value.slug.trim()) {
|
||||
form.value.slug = slugify(form.value.title);
|
||||
}
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
if (!form.value.title.trim() || !form.value.categoryId) {
|
||||
error.value = 'نام و دسته را وارد کنید.';
|
||||
return;
|
||||
}
|
||||
const slug = optionalSlug(form.value.slug);
|
||||
if (slug && !isValidSlug(slug)) {
|
||||
error.value = 'اسلاگ فقط حروف کوچک انگلیسی و خط تیره باشد.';
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await submitBusinessRegistration({
|
||||
title: form.value.title.trim(),
|
||||
categoryId: form.value.categoryId,
|
||||
...(slug ? { slug } : {}),
|
||||
description: form.value.description.trim() || undefined,
|
||||
contactPhone: form.value.contactPhone.trim() || undefined,
|
||||
address: form.value.address.trim() || undefined,
|
||||
});
|
||||
requests.value = await fetchMyBusinessRegistrations();
|
||||
} catch (e) {
|
||||
error.value = e instanceof ApiError ? e.message : 'خطا در ارسال درخواست';
|
||||
} finally {
|
||||
saving.value = false;
|
||||
categories.value = await fetchBusinessCategories();
|
||||
} catch {
|
||||
error.value = 'بارگذاری دسته‌بندی‌ها ناموفق بود.';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user