Update seo tags
This commit is contained in:
@@ -5,6 +5,14 @@ import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
|
|||||||
|
|
||||||
// state
|
// state
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
titleTemplate: (titleChunk) => {
|
||||||
|
return titleChunk ? `${titleChunk} | فروشگاه هی ملز` : "فروشگاه هی ملز";
|
||||||
|
},
|
||||||
|
ogImage: "/img/heymlz/global-cover.jpg",
|
||||||
|
twitterImage: "/img/heymlz/global-cover.jpg",
|
||||||
|
});
|
||||||
|
|
||||||
const { $updateAvailable: updateAvailable, $handleUpdate: handleUpdate } = useNuxtApp();
|
const { $updateAvailable: updateAvailable, $handleUpdate: handleUpdate } = useNuxtApp();
|
||||||
|
|
||||||
const closeModal = () => {
|
const closeModal = () => {
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ const changeSlide = (id: number) => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="sticky top-10">
|
<div class="sticky top-10">
|
||||||
<div class="flex flex-col relative gap-6">
|
<div class="flex flex-col relative gap-4">
|
||||||
<div
|
<div
|
||||||
class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-[12px] md:rounded-200"
|
class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-[12px] md:rounded-200"
|
||||||
>
|
>
|
||||||
@@ -74,7 +74,6 @@ const changeSlide = (id: number) => {
|
|||||||
class="w-full"
|
class="w-full"
|
||||||
>
|
>
|
||||||
<SwiperSlide
|
<SwiperSlide
|
||||||
class="py-4"
|
|
||||||
v-for="slide in slides"
|
v-for="slide in slides"
|
||||||
:key="slide.id"
|
:key="slide.id"
|
||||||
>
|
>
|
||||||
@@ -94,7 +93,6 @@ const changeSlide = (id: number) => {
|
|||||||
v-if="emptySlidesCount > 0"
|
v-if="emptySlidesCount > 0"
|
||||||
v-for="slide in emptySlidesCount"
|
v-for="slide in emptySlidesCount"
|
||||||
:key="slide"
|
:key="slide"
|
||||||
class="py-4"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
|
class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
|
||||||
|
|||||||
@@ -12,9 +12,9 @@ export default defineNuxtConfig({
|
|||||||
},
|
},
|
||||||
|
|
||||||
app: {
|
app: {
|
||||||
head: {
|
// head: {
|
||||||
title: "فروشگاه هی ملز",
|
// title: "فروشگاه هی ملز",
|
||||||
},
|
// },
|
||||||
pageTransition: {
|
pageTransition: {
|
||||||
name: "fade",
|
name: "fade",
|
||||||
mode: "out-in",
|
mode: "out-in",
|
||||||
@@ -67,8 +67,13 @@ export default defineNuxtConfig({
|
|||||||
"@formkit/auto-animate/nuxt",
|
"@formkit/auto-animate/nuxt",
|
||||||
"@vite-pwa/nuxt",
|
"@vite-pwa/nuxt",
|
||||||
"@nuxt/image",
|
"@nuxt/image",
|
||||||
|
"@nuxtjs/seo",
|
||||||
],
|
],
|
||||||
|
|
||||||
|
sitemap: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
|
||||||
pwa: {
|
pwa: {
|
||||||
strategies: "injectManifest",
|
strategies: "injectManifest",
|
||||||
srcDir: "public",
|
srcDir: "public",
|
||||||
|
|||||||
@@ -19,6 +19,7 @@
|
|||||||
"@nuxt/icon": "^1.10.3",
|
"@nuxt/icon": "^1.10.3",
|
||||||
"@nuxt/image": "^1.10.0",
|
"@nuxt/image": "^1.10.0",
|
||||||
"@nuxtjs/google-fonts": "^3.2.0",
|
"@nuxtjs/google-fonts": "^3.2.0",
|
||||||
|
"@nuxtjs/seo": "^3.0.3",
|
||||||
"@tanstack/vue-query": "^5.62.2",
|
"@tanstack/vue-query": "^5.62.2",
|
||||||
"@tanstack/vue-query-devtools": "^5.62.3",
|
"@tanstack/vue-query-devtools": "^5.62.3",
|
||||||
"@vite-pwa/nuxt": "^0.10.6",
|
"@vite-pwa/nuxt": "^0.10.6",
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
||||||
// import
|
// import
|
||||||
|
|
||||||
import useGetArticle from "~/composables/api/blog/useGetArticle";
|
import useGetArticle from "~/composables/api/blog/useGetArticle";
|
||||||
@@ -12,6 +11,14 @@ const id = route.params.id as string | undefined;
|
|||||||
|
|
||||||
const { data: article, suspense } = useGetArticle(id);
|
const { data: article, suspense } = useGetArticle(id);
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title: `مقاله ${article.value?.title}`,
|
||||||
|
ogImage: article.value?.cover_image,
|
||||||
|
twitterImage: article.value?.cover_image,
|
||||||
|
ogDescription: article.value?.summery,
|
||||||
|
twitterDescription: article.value?.summery,
|
||||||
|
});
|
||||||
|
|
||||||
// ssr
|
// ssr
|
||||||
|
|
||||||
const response = await suspense();
|
const response = await suspense();
|
||||||
@@ -19,16 +26,19 @@ const response = await suspense();
|
|||||||
if (response.isError) {
|
if (response.isError) {
|
||||||
throw createError({
|
throw createError({
|
||||||
statusCode: 500,
|
statusCode: 500,
|
||||||
statusMessage: `Error in categories page prefetch`
|
statusMessage: `Error in categories page prefetch`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="w-full h-[80svh] rounded-3xl relative overflow-hidden">
|
<div class="w-full h-[80svh] rounded-3xl relative overflow-hidden">
|
||||||
<NuxtImg class="absolute object-cover size-full" :alt="article!.title" :src="article!.cover_image" />
|
<NuxtImg
|
||||||
|
class="absolute object-cover size-full"
|
||||||
|
:alt="article!.title"
|
||||||
|
:src="article!.cover_image"
|
||||||
|
/>
|
||||||
<div class="absolute bg-linear-to-t from-black/75 to-transparent size-full" />
|
<div class="absolute bg-linear-to-t from-black/75 to-transparent size-full" />
|
||||||
<div class="absolute pl-10 right-10 bottom-10 flex flex-col gap-6">
|
<div class="absolute pl-10 right-10 bottom-10 flex flex-col gap-6">
|
||||||
<h1 class="typo-h-4 text-white pl-8">
|
<h1 class="typo-h-4 text-white pl-8">
|
||||||
@@ -41,13 +51,13 @@ if (response.isError) {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
|
|
||||||
|
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
<div
|
<div
|
||||||
class="w-fit pr-2 pl-5 h-[50px] rounded-full flex items-center justify-center gap-3 bg-white">
|
class="w-fit pr-2 pl-5 h-[50px] rounded-full flex items-center justify-center gap-3 bg-white"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="relative flex items-center justify-center rounded-full overflow-hidden size-[35px]">
|
class="relative flex items-center justify-center rounded-full overflow-hidden size-[35px]"
|
||||||
|
>
|
||||||
<NuxtImg
|
<NuxtImg
|
||||||
class="size-full object-cover absolute"
|
class="size-full object-cover absolute"
|
||||||
:src="article!.author.profile_photo"
|
:src="article!.author.profile_photo"
|
||||||
@@ -55,50 +65,51 @@ if (response.isError) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span class="typo-label-sm">
|
<span class="typo-label-sm">
|
||||||
{{ article!.author.full_name }}
|
{{ article!.author.full_name }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
|
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
|
||||||
<span class="typo-label-sm mt-0.5">
|
>
|
||||||
دسته بندی موبایل
|
<span class="typo-label-sm mt-0.5"> دسته بندی موبایل </span>
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
<div
|
<div
|
||||||
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
|
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
|
||||||
<Icon name="ci:calendar" size="24px" class="**:stroke-white" />
|
>
|
||||||
<span class="typo-label-sm mt-0.5">
|
<Icon
|
||||||
۲۴ مهر 1403
|
name="ci:calendar"
|
||||||
</span>
|
size="24px"
|
||||||
|
class="**:stroke-white"
|
||||||
|
/>
|
||||||
|
<span class="typo-label-sm mt-0.5"> ۲۴ مهر 1403 </span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
|
class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white"
|
||||||
<Icon name="ci:eye-open" size="24px" class="**:stroke-white" />
|
>
|
||||||
|
<Icon
|
||||||
|
name="ci:eye-open"
|
||||||
|
size="24px"
|
||||||
|
class="**:stroke-white"
|
||||||
|
/>
|
||||||
<span class="typo-label-sm mt-0.5">
|
<span class="typo-label-sm mt-0.5">
|
||||||
{{ article!.views }}
|
{{ article!.views }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex gap-4 mt-8">
|
<div class="flex gap-4 mt-8">
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="p-8 flex-1 text-zinc-800 flex flex-col gap-6 [&_p,ul]:text-zinc-500 [&_h1]:typo-h-4 [&_h2]:typo-h-5 [&_h3]:typo-h-6 [&_p]:typo-p-md [&_ul]:list-disc [&_ul]:typo-p-md [&_ul]:space-y-2"
|
class="p-8 flex-1 text-zinc-800 flex flex-col gap-6 [&_p,ul]:text-zinc-500 [&_h1]:typo-h-4 [&_h2]:typo-h-5 [&_h3]:typo-h-6 [&_p]:typo-p-md [&_ul]:list-disc [&_ul]:typo-p-md [&_ul]:space-y-2"
|
||||||
v-html="article!.content"
|
v-html="article!.content"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<aside class="mt-8 p-8 h-fit bg-slate-100 w-[400px] sticky top-4 rounded-3xl">
|
<aside class="mt-8 p-8 h-fit bg-slate-100 w-[400px] sticky top-4 rounded-3xl">asdsa</aside>
|
||||||
asdsa
|
|
||||||
</aside>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -7,6 +7,10 @@ import ArticlesList from "~/components/articles/ArticlesList.vue";
|
|||||||
|
|
||||||
// state
|
// state
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "مقالات"
|
||||||
|
});
|
||||||
|
|
||||||
const page = ref(1);
|
const page = ref(1);
|
||||||
const search = ref("");
|
const search = ref("");
|
||||||
const debouncedSearch = refDebounced(search, 700);
|
const debouncedSearch = refDebounced(search, 700);
|
||||||
|
|||||||
@@ -3,10 +3,13 @@
|
|||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title: "ثبت سفارش",
|
||||||
|
});
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: "cart",
|
layout: "cart",
|
||||||
middleware: "check-is-logged-in",
|
middleware: "check-is-logged-in",
|
||||||
pageTitle: "ثبت سفارش",
|
|
||||||
prevPage: { name: "cart-delivery", label: "انتخاب آدرس" },
|
prevPage: { name: "cart-delivery", label: "انتخاب آدرس" },
|
||||||
nextPage: { name: "payment", label: "پرداخت" },
|
nextPage: { name: "payment", label: "پرداخت" },
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -7,10 +7,14 @@ import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
|
|||||||
|
|
||||||
// meta
|
// meta
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title: "انتخاب آدرس",
|
||||||
|
});
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: "cart",
|
layout: "cart",
|
||||||
middleware: "check-is-logged-in",
|
middleware: "check-is-logged-in",
|
||||||
pageTitle: "انتخاب آدرس",
|
|
||||||
prevPage: { name: "cart", label: "سبد خرید" },
|
prevPage: { name: "cart", label: "سبد خرید" },
|
||||||
nextPage: { name: "cart-checkout", label: "تسویه حساب", query: "ZARINPAL" },
|
nextPage: { name: "cart-checkout", label: "تسویه حساب", query: "ZARINPAL" },
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -5,10 +5,13 @@ import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
|
|||||||
|
|
||||||
// meta
|
// meta
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "سبد خرید"
|
||||||
|
});
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: "cart",
|
layout: "cart",
|
||||||
middleware: "check-is-logged-in",
|
middleware: "check-is-logged-in",
|
||||||
pageTitle: "سبد خرید",
|
|
||||||
prevPage: { name: "index", label: "بازگشت به خانه" },
|
prevPage: { name: "index", label: "بازگشت به خانه" },
|
||||||
nextPage: { name: "cart-delivery", label: "انتخاب آدرس" },
|
nextPage: { name: "cart-delivery", label: "انتخاب آدرس" },
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -5,6 +5,10 @@ import useGetCategories from "~/composables/api/product/useGetCategories";
|
|||||||
|
|
||||||
// state
|
// state
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "دسته بندی ها"
|
||||||
|
});
|
||||||
|
|
||||||
const { data: categories, suspense } = useGetCategories();
|
const { data: categories, suspense } = useGetCategories();
|
||||||
|
|
||||||
const search = ref("");
|
const search = ref("");
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// state
|
// state
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "ارتباط با ما"
|
||||||
|
});
|
||||||
|
|
||||||
const contactInfo = ref({
|
const contactInfo = ref({
|
||||||
name: "",
|
name: "",
|
||||||
email: "",
|
email: "",
|
||||||
|
|||||||
@@ -16,6 +16,14 @@ const page = ref(1);
|
|||||||
const { suspense: suspenseProduct, data: product } = useGetProduct(id);
|
const { suspense: suspenseProduct, data: product } = useGetProduct(id);
|
||||||
const { suspense: suspenseComments } = useGetComments(id, page);
|
const { suspense: suspenseComments } = useGetComments(id, page);
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title: `محصول ${product.value?.name}`,
|
||||||
|
ogImage: product.value?.variants[0].images[0].image,
|
||||||
|
twitterImage: product.value?.variants[0].images[0].image,
|
||||||
|
ogDescription: product.value?.description,
|
||||||
|
twitterDescription: product.value?.description,
|
||||||
|
});
|
||||||
|
|
||||||
const selectedVariant = ref<ProductVariant>();
|
const selectedVariant = ref<ProductVariant>();
|
||||||
|
|
||||||
const showChatButton = ref(true);
|
const showChatButton = ref(true);
|
||||||
|
|||||||
@@ -6,6 +6,10 @@ import { PRODUCT_RANGE } from "~/constants";
|
|||||||
|
|
||||||
// state
|
// state
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "محصولات"
|
||||||
|
});
|
||||||
|
|
||||||
const params: GetProductsFilters = useUrlSearchParams("history", {
|
const params: GetProductsFilters = useUrlSearchParams("history", {
|
||||||
removeFalsyValues: true,
|
removeFalsyValues: true,
|
||||||
removeNullishValues: true,
|
removeNullishValues: true,
|
||||||
|
|||||||
@@ -5,6 +5,10 @@ import useGetAllAddress from "~/composables/api/account/useGetAllAddress";
|
|||||||
|
|
||||||
// meta
|
// meta
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "پنل کاربری آدرس ها"
|
||||||
|
});
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
middleware: "check-is-logged-in",
|
middleware: "check-is-logged-in",
|
||||||
layout: "profile",
|
layout: "profile",
|
||||||
|
|||||||
@@ -11,6 +11,10 @@ import { QUERY_KEYS } from "~/constants";
|
|||||||
|
|
||||||
// meta
|
// meta
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "پنل کاربری"
|
||||||
|
});
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
middleware: "check-is-logged-in",
|
middleware: "check-is-logged-in",
|
||||||
layout: "profile",
|
layout: "profile",
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// meta
|
// meta
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "پنل کاربری اعلان ها"
|
||||||
|
});
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
middleware: "check-is-logged-in",
|
middleware: "check-is-logged-in",
|
||||||
layout: "profile",
|
layout: "profile",
|
||||||
|
|||||||
@@ -5,6 +5,10 @@ import useGetAllOrders, {
|
|||||||
|
|
||||||
// meta
|
// meta
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "پنل کاربری سفارشات"
|
||||||
|
});
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
middleware: "check-is-logged-in",
|
middleware: "check-is-logged-in",
|
||||||
layout: "profile",
|
layout: "profile",
|
||||||
|
|||||||
@@ -13,6 +13,10 @@ import { QUERY_KEYS } from "~/constants";
|
|||||||
|
|
||||||
// meta
|
// meta
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "پنل کاربری تیکت"
|
||||||
|
});
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
middleware: "check-is-logged-in",
|
middleware: "check-is-logged-in",
|
||||||
layout: "profile",
|
layout: "profile",
|
||||||
|
|||||||
@@ -7,6 +7,10 @@ import useGetAllTickets, {
|
|||||||
|
|
||||||
// meta
|
// meta
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "پنل کاربری تیکت ها"
|
||||||
|
});
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
middleware: "check-is-logged-in",
|
middleware: "check-is-logged-in",
|
||||||
layout: "profile",
|
layout: "profile",
|
||||||
|
|||||||
@@ -2,9 +2,7 @@
|
|||||||
// imports
|
// imports
|
||||||
|
|
||||||
import useGetAllOrders from "~/composables/api/orders/useGetAllOrders";
|
import useGetAllOrders from "~/composables/api/orders/useGetAllOrders";
|
||||||
import useCreateTicket, {
|
import useCreateTicket, { type CreateTicketRequest } from "~/composables/api/tickets/useCreateTicket";
|
||||||
type CreateTicketRequest,
|
|
||||||
} from "~/composables/api/tickets/useCreateTicket";
|
|
||||||
import useUploadAttachment from "~/composables/api/tickets/useUploadAttachment";
|
import useUploadAttachment from "~/composables/api/tickets/useUploadAttachment";
|
||||||
import { useToast } from "~/composables/global/useToast";
|
import { useToast } from "~/composables/global/useToast";
|
||||||
import { QUERY_KEYS } from "~/constants";
|
import { QUERY_KEYS } from "~/constants";
|
||||||
@@ -14,6 +12,10 @@ import type { GetAllOrdersRequest } from "~/composables/api/orders/useGetAllOrde
|
|||||||
|
|
||||||
// meta
|
// meta
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title: "پنل کاربری تیکت جدید",
|
||||||
|
});
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
middleware: "check-is-logged-in",
|
middleware: "check-is-logged-in",
|
||||||
layout: "profile",
|
layout: "profile",
|
||||||
@@ -83,44 +85,26 @@ const ordersFilter = computed<GetAllOrdersRequest>(() => {
|
|||||||
|
|
||||||
// queries
|
// queries
|
||||||
|
|
||||||
const { data: orders, isLoading: ordersIsLoading } =
|
const { data: orders, isLoading: ordersIsLoading } = useGetAllOrders(ordersFilter);
|
||||||
useGetAllOrders(ordersFilter);
|
|
||||||
|
|
||||||
const { mutateAsync: createTicket, isPending: createTicketIsPending } =
|
const { mutateAsync: createTicket, isPending: createTicketIsPending } = useCreateTicket();
|
||||||
useCreateTicket();
|
|
||||||
|
|
||||||
const { mutateAsync: uploadAttachment, isPending: uploadAttachmentIsPending } =
|
const { mutateAsync: uploadAttachment, isPending: uploadAttachmentIsPending } = useUploadAttachment();
|
||||||
useUploadAttachment();
|
|
||||||
|
|
||||||
// computed
|
// computed
|
||||||
|
|
||||||
const formRules = computed(() => {
|
const formRules = computed(() => {
|
||||||
return {
|
return {
|
||||||
ticket_category: {
|
ticket_category: {
|
||||||
required: helpers.withMessage(
|
required: helpers.withMessage("فیلد دسته بندی الزامی می باشد", required),
|
||||||
"فیلد دسته بندی الزامی می باشد",
|
|
||||||
required
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
subject: {
|
subject: {
|
||||||
required: helpers.withMessage(
|
required: helpers.withMessage("فیلد عنوان تیکت الزامی می باشد", required),
|
||||||
"فیلد عنوان تیکت الزامی می باشد",
|
minLength: helpers.withMessage("فیلد عنوان تیکت حداقل ۵ کرکتر می باشد", minLength(5)),
|
||||||
required
|
|
||||||
),
|
|
||||||
minLength: helpers.withMessage(
|
|
||||||
"فیلد عنوان تیکت حداقل ۵ کرکتر می باشد",
|
|
||||||
minLength(5)
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
content: {
|
content: {
|
||||||
required: helpers.withMessage(
|
required: helpers.withMessage("فیلد متن تیکت الزامی می باشد", required),
|
||||||
"فیلد متن تیکت الزامی می باشد",
|
minLength: helpers.withMessage("فیلد متن تیکت حداقل ۵ کرکتر می باشد", minLength(5)),
|
||||||
required
|
|
||||||
),
|
|
||||||
minLength: helpers.withMessage(
|
|
||||||
"فیلد متن تیکت حداقل ۵ کرکتر می باشد",
|
|
||||||
minLength(5)
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
@@ -138,9 +122,7 @@ const handleUploadAttachment = (file: File) => {
|
|||||||
},
|
},
|
||||||
onError: (error) => {
|
onError: (error) => {
|
||||||
addToast({
|
addToast({
|
||||||
message: error.message
|
message: error.message ? error.message : "خطایی در آپلود پیوست رخ داد",
|
||||||
? error.message
|
|
||||||
: "خطایی در آپلود پیوست رخ داد",
|
|
||||||
options: {
|
options: {
|
||||||
status: "error",
|
status: "error",
|
||||||
description: "لطفا مجدد تلاش کنید",
|
description: "لطفا مجدد تلاش کنید",
|
||||||
@@ -166,8 +148,7 @@ const handleSubmit = async () => {
|
|||||||
message: "تیکت شما با موفقیت ثبت شد",
|
message: "تیکت شما با موفقیت ثبت شد",
|
||||||
options: {
|
options: {
|
||||||
status: "success",
|
status: "success",
|
||||||
description:
|
description: "پس از بررسی پشتیبانی به شما اطلاع رسانی می شود",
|
||||||
"پس از بررسی پشتیبانی به شما اطلاع رسانی می شود",
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@@ -188,7 +169,10 @@ const handleSubmit = async () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full flex flex-col gap-5">
|
<div class="w-full flex flex-col gap-5">
|
||||||
<ProfilePageTitle title="تیکت جدید" icon="bi:ticket" />
|
<ProfilePageTitle
|
||||||
|
title="تیکت جدید"
|
||||||
|
icon="bi:ticket"
|
||||||
|
/>
|
||||||
|
|
||||||
<ProfileSection title="ارتباط با پشتیبانی">
|
<ProfileSection title="ارتباط با پشتیبانی">
|
||||||
<template #button>
|
<template #button>
|
||||||
@@ -218,9 +202,7 @@ const handleSubmit = async () => {
|
|||||||
<template #content>
|
<template #content>
|
||||||
<SelectGroup>
|
<SelectGroup>
|
||||||
<SelectItem
|
<SelectItem
|
||||||
v-for="(
|
v-for="(category, index) in ticketCategories"
|
||||||
category, index
|
|
||||||
) in ticketCategories"
|
|
||||||
:key="index"
|
: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"
|
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"
|
:value="category.value"
|
||||||
@@ -228,11 +210,12 @@ const handleSubmit = async () => {
|
|||||||
<SelectItemIndicator
|
<SelectItemIndicator
|
||||||
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
|
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
|
||||||
>
|
>
|
||||||
<Icon name="bi:check" size="20" />
|
<Icon
|
||||||
|
name="bi:check"
|
||||||
|
size="20"
|
||||||
|
/>
|
||||||
</SelectItemIndicator>
|
</SelectItemIndicator>
|
||||||
<SelectItemText
|
<SelectItemText class="text-end font-iran-yekan-x text-sm">
|
||||||
class="text-end font-iran-yekan-x text-sm"
|
|
||||||
>
|
|
||||||
{{ category.title }}
|
{{ category.title }}
|
||||||
</SelectItemText>
|
</SelectItemText>
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
@@ -240,7 +223,11 @@ const handleSubmit = async () => {
|
|||||||
</template>
|
</template>
|
||||||
</Select>
|
</Select>
|
||||||
</DataField>
|
</DataField>
|
||||||
<DataField id="orders" :required="true" label="خرید یا سفارش">
|
<DataField
|
||||||
|
id="orders"
|
||||||
|
:required="true"
|
||||||
|
label="خرید یا سفارش"
|
||||||
|
>
|
||||||
<Select
|
<Select
|
||||||
placeholder="انتخاب کنید"
|
placeholder="انتخاب کنید"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
@@ -249,18 +236,10 @@ const handleSubmit = async () => {
|
|||||||
>
|
>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<SelectValue
|
<SelectValue
|
||||||
:class="
|
:class="ticketData.order_id ? 'text-black' : 'text-slate-400'"
|
||||||
ticketData.order_id
|
|
||||||
? 'text-black'
|
|
||||||
: 'text-slate-400'
|
|
||||||
"
|
|
||||||
class="font-iran-yekan-x text-sm text-start placeholder-slate-400"
|
class="font-iran-yekan-x text-sm text-start placeholder-slate-400"
|
||||||
>
|
>
|
||||||
{{
|
{{ ticketData.order_id ? `شماره سفارش : ${ticketData.order_id}` : "وارد نشده" }}
|
||||||
ticketData.order_id
|
|
||||||
? `شماره سفارش : ${ticketData.order_id}`
|
|
||||||
: "وارد نشده"
|
|
||||||
}}
|
|
||||||
</SelectValue>
|
</SelectValue>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -283,15 +262,8 @@ const handleSubmit = async () => {
|
|||||||
size="32px"
|
size="32px"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div
|
<div class="flex items-start gap-1 text-[10px]">
|
||||||
class="flex items-start gap-1 text-[10px]"
|
<span>{{ order.count }} محصول</span>
|
||||||
>
|
|
||||||
<span
|
|
||||||
>{{
|
|
||||||
order.count
|
|
||||||
}}
|
|
||||||
محصول</span
|
|
||||||
>
|
|
||||||
|
|
|
|
||||||
<span>
|
<span>
|
||||||
شماره سفارش :
|
شماره سفارش :
|
||||||
@@ -353,11 +325,7 @@ const handleSubmit = async () => {
|
|||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
v-if="createTicketIsPending"
|
v-if="createTicketIsPending"
|
||||||
:name="
|
:name="createTicketIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:send'"
|
||||||
createTicketIsPending
|
|
||||||
? 'svg-spinners:3-dots-bounce'
|
|
||||||
: 'bi:send'
|
|
||||||
"
|
|
||||||
/>
|
/>
|
||||||
<span v-else>ارسال تیکت</span>
|
<span v-else>ارسال تیکت</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -26,6 +26,10 @@ definePageMeta({
|
|||||||
|
|
||||||
// state
|
// state
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title : "ورود به فروشگاه"
|
||||||
|
});
|
||||||
|
|
||||||
const { addToast } = useToast();
|
const { addToast } = useToast();
|
||||||
|
|
||||||
const { updateToken, updateRefreshToken } = useAuth();
|
const { updateToken, updateRefreshToken } = useAuth();
|
||||||
|
|||||||
@@ -6,6 +6,12 @@ import usePersianDate from "~/composables/global/usePersianDate";
|
|||||||
|
|
||||||
// meta
|
// meta
|
||||||
|
|
||||||
|
useSeoMeta({
|
||||||
|
title: "نتیجه تراکنش",
|
||||||
|
description : "",
|
||||||
|
keywords : ""
|
||||||
|
})
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: "none",
|
layout: "none",
|
||||||
});
|
});
|
||||||
@@ -22,11 +28,7 @@ const tracking_code = computed(() => route.query["tc"] as string);
|
|||||||
|
|
||||||
// queries
|
// queries
|
||||||
|
|
||||||
const {
|
const { data: transaction, isLoading: transactionIsLoading, suspense } = useGetTransaction(tracking_code);
|
||||||
data: transaction,
|
|
||||||
isLoading: transactionIsLoading,
|
|
||||||
suspense,
|
|
||||||
} = useGetTransaction(tracking_code);
|
|
||||||
|
|
||||||
await suspense();
|
await suspense();
|
||||||
|
|
||||||
@@ -37,8 +39,7 @@ const statusVariants = computed(() => {
|
|||||||
return {
|
return {
|
||||||
background_color: "bg-success-500",
|
background_color: "bg-success-500",
|
||||||
text_color: "text-white",
|
text_color: "text-white",
|
||||||
after_background_color:
|
after_background_color: "bg-success-600/50 shadow-[0px_40px_175px_1px] shadow-success-100",
|
||||||
"bg-success-600/50 shadow-[0px_40px_175px_1px] shadow-success-100",
|
|
||||||
icon: "bi:check",
|
icon: "bi:check",
|
||||||
title: "تراکنش موفق",
|
title: "تراکنش موفق",
|
||||||
hue_deg: "[filter:_hue-rotate(260deg)] ",
|
hue_deg: "[filter:_hue-rotate(260deg)] ",
|
||||||
@@ -47,8 +48,7 @@ const statusVariants = computed(() => {
|
|||||||
return {
|
return {
|
||||||
background_color: "bg-danger-500",
|
background_color: "bg-danger-500",
|
||||||
text_color: "text-white",
|
text_color: "text-white",
|
||||||
after_background_color:
|
after_background_color: "bg-danger-600/50 shadow-[0px_40px_175px_1px] shadow-danger-100",
|
||||||
"bg-danger-600/50 shadow-[0px_40px_175px_1px] shadow-danger-100",
|
|
||||||
icon: "bi:x",
|
icon: "bi:x",
|
||||||
title: "تراکنش ناموفق",
|
title: "تراکنش ناموفق",
|
||||||
hue_deg: "[filter:_hue-rotate(120deg)]",
|
hue_deg: "[filter:_hue-rotate(120deg)]",
|
||||||
@@ -57,8 +57,7 @@ const statusVariants = computed(() => {
|
|||||||
return {
|
return {
|
||||||
background_color: "bg-slate-300",
|
background_color: "bg-slate-300",
|
||||||
text_color: "text-black",
|
text_color: "text-black",
|
||||||
after_background_color:
|
after_background_color: "bg-slate-600/50 shadow-[0px_40px_175px_1px] shadow-slate-100",
|
||||||
"bg-slate-600/50 shadow-[0px_40px_175px_1px] shadow-slate-100",
|
|
||||||
icon: "bi:question-circle",
|
icon: "bi:question-circle",
|
||||||
title: "تراکنش معلق",
|
title: "تراکنش معلق",
|
||||||
hue_deg: "[filter:_hue-rotate(0deg)]",
|
hue_deg: "[filter:_hue-rotate(0deg)]",
|
||||||
@@ -104,10 +103,7 @@ const statusTitle = computed(() => {
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="w-full h-[4rem] lg:h-[5.2rem] absolute left-0 top-0 flex-center gap-2"
|
class="w-full h-[4rem] lg:h-[5.2rem] absolute left-0 top-0 flex-center gap-2"
|
||||||
:class="[
|
:class="[statusVariants.background_color, statusVariants.text_color]"
|
||||||
statusVariants.background_color,
|
|
||||||
statusVariants.text_color,
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
:name="statusVariants.icon"
|
:name="statusVariants.icon"
|
||||||
@@ -118,68 +114,48 @@ const statusTitle = computed(() => {
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="w-full flex flex-col gap-4 lg:gap-5 pt-[4.5rem] lg:pt-[5.5rem] p-1">
|
||||||
class="w-full flex flex-col gap-4 lg:gap-5 pt-[4.5rem] lg:pt-[5.5rem] p-1"
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
v-if="transaction?.bank_result?.bank_type"
|
v-if="transaction?.bank_result?.bank_type"
|
||||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||||
>
|
>
|
||||||
<span class="font-medium">درگاه پرداخت</span>
|
<span class="font-medium">درگاه پرداخت</span>
|
||||||
<span class="opacity-50">{{
|
<span class="opacity-50">{{ transaction?.bank_result?.bank_type }}</span>
|
||||||
transaction?.bank_result?.bank_type
|
|
||||||
}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="transaction?.bank_result?.tracking_code"
|
v-if="transaction?.bank_result?.tracking_code"
|
||||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||||
>
|
>
|
||||||
<span class="font-medium">کد پیگیری</span>
|
<span class="font-medium">کد پیگیری</span>
|
||||||
<span class="opacity-50 underline"
|
<span class="opacity-50 underline">#{{ transaction?.bank_result?.tracking_code }}</span>
|
||||||
>#{{
|
|
||||||
transaction?.bank_result?.tracking_code
|
|
||||||
}}</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="transaction?.bank_result?.reference_number"
|
v-if="transaction?.bank_result?.reference_number"
|
||||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||||
>
|
>
|
||||||
<span class="font-medium">کد ارجاع</span>
|
<span class="font-medium">کد ارجاع</span>
|
||||||
<span class="opacity-50 underline"
|
<span class="opacity-50 underline">#{{ transaction?.bank_result?.reference_number }}</span>
|
||||||
>#{{
|
|
||||||
transaction?.bank_result?.reference_number
|
|
||||||
}}</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="transaction?.bank_result?.amount"
|
v-if="transaction?.bank_result?.amount"
|
||||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||||
>
|
>
|
||||||
<span class="font-medium">مبلغ</span>
|
<span class="font-medium">مبلغ</span>
|
||||||
<span class="opacity-50">{{
|
<span class="opacity-50">{{ transaction?.bank_result?.amount }}</span>
|
||||||
transaction?.bank_result?.amount
|
|
||||||
}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="transaction?.bank_result?.created_at"
|
v-if="transaction?.bank_result?.created_at"
|
||||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||||
>
|
>
|
||||||
<span class="font-medium">تاریخ</span>
|
<span class="font-medium">تاریخ</span>
|
||||||
<span class="opacity-50">{{
|
<span class="opacity-50">{{ formatToPersian(transaction?.bank_result?.created_at) }}</span>
|
||||||
formatToPersian(
|
|
||||||
transaction?.bank_result?.created_at
|
|
||||||
)
|
|
||||||
}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="transaction?.bank_result?.response_result"
|
v-if="transaction?.bank_result?.response_result"
|
||||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||||
>
|
>
|
||||||
<span class="font-medium">وضعیت پرداخت</span>
|
<span class="font-medium">وضعیت پرداخت</span>
|
||||||
<span class="opacity-50">{{
|
<span class="opacity-50">{{ transaction?.bank_result?.status_detail }}</span>
|
||||||
transaction?.bank_result?.status_detail
|
|
||||||
}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -190,10 +166,11 @@ const statusTitle = computed(() => {
|
|||||||
{{ transaction?.detail }}
|
{{ transaction?.detail }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="w-full flex flex-col-reverse lg:flex-row items-center justify-between gap-4 lg:gap-5">
|
||||||
class="w-full flex flex-col-reverse lg:flex-row items-center justify-between gap-4 lg:gap-5"
|
<NuxtLink
|
||||||
>
|
to="/"
|
||||||
<NuxtLink to="/" class="w-full">
|
class="w-full"
|
||||||
|
>
|
||||||
<Button
|
<Button
|
||||||
class="w-full rounded-full max-lg:py-2"
|
class="w-full rounded-full max-lg:py-2"
|
||||||
start-icon="ci:left-rotation"
|
start-icon="ci:left-rotation"
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -1 +0,0 @@
|
|||||||
|
|
||||||
Reference in New Issue
Block a user