added ticket new
This commit is contained in:
Mamalizz
@@ -1,7 +1,158 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
// meta
|
||||
|
||||
definePageMeta({
|
||||
middleware: "check-is-logged-in",
|
||||
layout: "profile",
|
||||
});
|
||||
|
||||
// types
|
||||
|
||||
type TicketCategory = {
|
||||
title: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
// state
|
||||
|
||||
const ticketCategories: TicketCategory[] = [
|
||||
{
|
||||
title: "مالی و حسابداری",
|
||||
value: "finance_and_accounting",
|
||||
},
|
||||
{
|
||||
title: "پروفایل کاربری",
|
||||
value: "user_profile",
|
||||
},
|
||||
{
|
||||
title: "پیگیری سفارش",
|
||||
value: "order_tracking",
|
||||
},
|
||||
{
|
||||
title: "احراز هویت",
|
||||
value: "authentication",
|
||||
},
|
||||
{
|
||||
title: "محصول",
|
||||
value: "product",
|
||||
},
|
||||
{
|
||||
title: "اعلام باگ و خطا در وبسایت",
|
||||
value: "bug_and_error_reporting",
|
||||
},
|
||||
{
|
||||
title: "سایر",
|
||||
value: "other",
|
||||
},
|
||||
];
|
||||
|
||||
const ticketData = ref({
|
||||
category: undefined,
|
||||
order: undefined,
|
||||
message: "",
|
||||
files: [],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="w-full flex flex-col gap-5">
|
||||
<ProfilePageTitle title="تیکت جدید" icon="bi:ticket" />
|
||||
|
||||
<ProfileSection title="ارتباط با پشتیبانی">
|
||||
<template #button>
|
||||
<NuxtLink :to="{ name: 'profile-tickets' }">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="md"
|
||||
end-icon="bi:arrow-left"
|
||||
>
|
||||
بازگشت به تیکت ها
|
||||
</Button>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
|
||||
<DataField id="category" :required="true" label="دسته بندی">
|
||||
<Select
|
||||
placeholder="انتخاب کنید"
|
||||
variant="outlined"
|
||||
v-model="ticketData.category"
|
||||
>
|
||||
<template #content>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="(
|
||||
category, index
|
||||
) in ticketCategories"
|
||||
:key="index"
|
||||
class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
|
||||
:value="category.value"
|
||||
>
|
||||
<SelectItemIndicator
|
||||
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
|
||||
>
|
||||
<Icon name="bi:check" size="20" />
|
||||
</SelectItemIndicator>
|
||||
<SelectItemText
|
||||
class="text-end font-iran-yekan-x text-sm"
|
||||
>
|
||||
{{ category.title }}
|
||||
</SelectItemText>
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</template>
|
||||
</Select>
|
||||
</DataField>
|
||||
<DataField id="orders" :required="true" label="خرید یا سفارش">
|
||||
<Select
|
||||
placeholder="انتخاب کنید"
|
||||
variant="outlined"
|
||||
v-model="ticketData.order"
|
||||
>
|
||||
<template #content>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="(
|
||||
category, index
|
||||
) in ticketCategories"
|
||||
:key="index"
|
||||
class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
|
||||
:value="category.value"
|
||||
>
|
||||
<SelectItemIndicator
|
||||
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
|
||||
>
|
||||
<Icon name="bi:check" size="20" />
|
||||
</SelectItemIndicator>
|
||||
<SelectItemText
|
||||
class="text-end font-iran-yekan-x text-sm"
|
||||
>
|
||||
{{ category.title }}
|
||||
</SelectItemText>
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</template>
|
||||
</Select>
|
||||
</DataField>
|
||||
<DataField id="message" :required="true" label="متن تیکت">
|
||||
<textarea
|
||||
v-model="ticketData.message"
|
||||
class="w-full bg-white border-[1.5px] border-slate-200 rounded-xl text-xs lg:text-sm p-5 text-black h-[10rem] lg:h-[20rem] transition resize-none outline-none focus:!border-black"
|
||||
placeholder="متن تیکت را اینجا بنویسید ..."
|
||||
/>
|
||||
</DataField>
|
||||
<FileInput v-model="ticketData.files" />
|
||||
</div>
|
||||
</ProfileSection>
|
||||
<div class="w-full flex-center py-5">
|
||||
<Button class="rounded-full px-20" end-icon="bi:send" size="md">
|
||||
<!-- <Icon
|
||||
v-if="createAddressIsPending"
|
||||
name="svg-spinners:3-dots-bounce"
|
||||
/> -->
|
||||
<span>ارسال تیکت</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user