added transaction page
This commit is contained in:
Mamalizz
+187
-48
@@ -1,75 +1,214 @@
|
||||
<script setup lang="ts">
|
||||
// imports
|
||||
|
||||
import useGetTransaction from "~/composables/api/orders/useGetTransaction";
|
||||
import usePersianDate from "~/composables/global/usePersianDate";
|
||||
|
||||
// meta
|
||||
|
||||
definePageMeta({
|
||||
layout: "none",
|
||||
});
|
||||
|
||||
// state
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const { formatToPersian } = usePersianDate();
|
||||
|
||||
// computed
|
||||
|
||||
const tracking_code = computed(() => route.query["tc"] as string);
|
||||
|
||||
// queries
|
||||
|
||||
const {
|
||||
data: transaction,
|
||||
isLoading: transactionIsLoading,
|
||||
suspense,
|
||||
} = useGetTransaction(tracking_code);
|
||||
|
||||
await suspense();
|
||||
|
||||
// computed
|
||||
|
||||
const statusVariants = computed(() => {
|
||||
if (transaction.value?.bank_result?.status == "succeeded") {
|
||||
return {
|
||||
background_color: "bg-success-500",
|
||||
text_color: "text-white",
|
||||
after_background_color:
|
||||
"bg-success-600/50 shadow-[0px_40px_175px_1px] shadow-success-100",
|
||||
icon: "bi:check",
|
||||
title: "تراکنش موفق",
|
||||
hue_deg: "[filter:_hue-rotate(260deg)] ",
|
||||
};
|
||||
} else if (transaction.value?.bank_result?.status == "canceled") {
|
||||
return {
|
||||
background_color: "bg-danger-500",
|
||||
text_color: "text-white",
|
||||
after_background_color:
|
||||
"bg-danger-600/50 shadow-[0px_40px_175px_1px] shadow-danger-100",
|
||||
icon: "bi:x",
|
||||
title: "تراکنش ناموفق",
|
||||
hue_deg: "[filter:_hue-rotate(120deg)]",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
background_color: "bg-slate-300",
|
||||
text_color: "text-black",
|
||||
after_background_color:
|
||||
"bg-slate-600/50 shadow-[0px_40px_175px_1px] shadow-slate-100",
|
||||
icon: "bi:question-circle",
|
||||
title: "تراکنش معلق",
|
||||
hue_deg: "[filter:_hue-rotate(0deg)]",
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const statusTitle = computed(() => {
|
||||
if (transaction.value?.bank_result?.status == "succeeded") {
|
||||
return "";
|
||||
} else if (transaction.value?.bank_result?.status == "canceled") {
|
||||
return "";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full flex-col-center gap-3 h-svh relative">
|
||||
<div class="w-full flex-col-center container gap-3 h-svh">
|
||||
<div
|
||||
class="bg-[url(/img/pattern-1.png)] -z-10 size-full fixed inset-0 opacity-70"
|
||||
class="pattern -z-10 size-full fixed inset-0 opacity-90"
|
||||
:style="{
|
||||
backgroundSize: 150,
|
||||
mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0.3) 80%)',
|
||||
}"
|
||||
/>
|
||||
|
||||
<NuxtImg src="/logo/logo-col.png" class="size-44 -mt-12" />
|
||||
<div class="max-w-[500px] w-full relative">
|
||||
<NuxtImg
|
||||
class="aspect-square w-[220px] md:w-[280px] lg:w-[320px] absolute -top-[70px] md:-top-[110px] lg:-top-[138px] left-1/2 -translate-x-1/2 z-10 [filter:_drop-shadow(0px_4px_20px_rgba(0, 0, 0, 0.15))]"
|
||||
src="/img/heymlz/heymlz-seat.gif"
|
||||
:class="statusVariants.hue_deg"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="max-w-[500px] w-full p-6 gap-6 flex flex-col items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-3xl relative overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="w-full h-[5rem] bg-success-500 absolute left-0 top-0 flex-center gap-2 text-white"
|
||||
class="w-full h-5/6 absolute rounded-3xl -z-3 -bottom-1 left-1/2 -translate-x-1/2"
|
||||
:class="statusVariants.after_background_color"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="w-full p-5 lg:p-6 gap-5 lg:gap-6 flex flex-col items-center bg-white border shadow-black/10 justify-center overflow-hidden border-slate-300 rounded-3xl relative mt-20 z-1"
|
||||
>
|
||||
<Icon name="bi:check" size="28" />
|
||||
<h1 class="typo-h-6 font-normal">تراکنش موفق</h1>
|
||||
</div>
|
||||
<div
|
||||
class="w-full h-[4rem] lg:h-[5.2rem] absolute left-0 top-0 flex-center gap-2"
|
||||
:class="[
|
||||
statusVariants.background_color,
|
||||
statusVariants.text_color,
|
||||
]"
|
||||
>
|
||||
<Icon
|
||||
:name="statusVariants.icon"
|
||||
class="text-2xl lg:text-3xl"
|
||||
/>
|
||||
<h1 class="text-lg lg:text-2xl font-normal">
|
||||
{{ statusVariants.title }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex flex-col gap-5 pt-[5.5rem] p-1">
|
||||
<div
|
||||
class="w-full flex flex-row-reverse items-center justify-between"
|
||||
class="w-full flex flex-col gap-4 lg:gap-5 pt-[4.5rem] lg:pt-[5.5rem] p-1"
|
||||
>
|
||||
<span>مبلغ تراكنش </span>
|
||||
<span>١٢٣ تومان</span>
|
||||
</div>
|
||||
<div
|
||||
class="w-full flex flex-row-reverse items-center justify-between"
|
||||
>
|
||||
<span>شماره پيكَيرى </span>
|
||||
<span>١٢٣ تومان</span>
|
||||
</div>
|
||||
<div
|
||||
class="w-full flex flex-row-reverse items-center justify-between"
|
||||
>
|
||||
<span>شماره ارجاع </span>
|
||||
<span>١٢٣ تومان</span>
|
||||
</div>
|
||||
<div
|
||||
class="w-full flex flex-row-reverse items-center justify-between"
|
||||
>
|
||||
<span>تاريخ و ساعت </span>
|
||||
<span>١٢٣ تومان</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex items-center justify-between gap-5">
|
||||
<NuxtLink to="/" class="w-full">
|
||||
<Button
|
||||
class="w-full rounded-full"
|
||||
start-icon="ci:left-rotation"
|
||||
variant="secondary"
|
||||
>بازگشت به فروشگاه</Button
|
||||
<div
|
||||
v-if="transaction?.bank_result?.bank_type"
|
||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||
>
|
||||
</NuxtLink>
|
||||
<Button
|
||||
class="w-full rounded-full bg-success-500 hover:text-success-500 hover:border-success-500 hover:**:!stroke-success-500"
|
||||
start-icon="ci:share"
|
||||
variant="primary"
|
||||
>دانلود فاکتور</Button
|
||||
<span class="font-medium">درگاه پرداخت</span>
|
||||
<span class="opacity-50">{{
|
||||
transaction?.bank_result?.bank_type
|
||||
}}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="transaction?.bank_result?.tracking_code"
|
||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||
>
|
||||
<span class="font-medium">کد پیگیری</span>
|
||||
<span class="opacity-50 underline"
|
||||
>#{{
|
||||
transaction?.bank_result?.tracking_code
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="transaction?.bank_result?.reference_number"
|
||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||
>
|
||||
<span class="font-medium">کد ارجاع</span>
|
||||
<span class="opacity-50 underline"
|
||||
>#{{
|
||||
transaction?.bank_result?.reference_number
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="transaction?.bank_result?.amount"
|
||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||
>
|
||||
<span class="font-medium">مبلغ</span>
|
||||
<span class="opacity-50">{{
|
||||
transaction?.bank_result?.amount
|
||||
}}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="transaction?.bank_result?.created_at"
|
||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||
>
|
||||
<span class="font-medium">تاریخ</span>
|
||||
<span class="opacity-50">{{
|
||||
formatToPersian(
|
||||
transaction?.bank_result?.created_at
|
||||
)
|
||||
}}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="transaction?.bank_result?.response_result"
|
||||
class="w-full flex flex-row-reverse items-center justify-between max-lg:text-xs"
|
||||
>
|
||||
<span class="font-medium">وضعیت پرداخت</span>
|
||||
<span class="opacity-50">{{
|
||||
transaction?.bank_result?.status_detail
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="transaction?.detail"
|
||||
class="w-full text-center opacity-50 text-sm lg:text-sm leading-[175%]"
|
||||
>
|
||||
{{ transaction?.detail }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full flex flex-col-reverse lg:flex-row items-center justify-between gap-4 lg:gap-5"
|
||||
>
|
||||
<NuxtLink to="/" class="w-full">
|
||||
<Button
|
||||
class="w-full rounded-full max-lg:py-2"
|
||||
start-icon="ci:left-rotation"
|
||||
variant="secondary"
|
||||
>بازگشت به فروشگاه</Button
|
||||
>
|
||||
</NuxtLink>
|
||||
<Button
|
||||
v-if="transaction?.bank_result?.status == 'succeeded'"
|
||||
class="w-full rounded-full max-lg:py-2 bg-success-500 hover:text-success-500 hover:border-success-500 hover:**:!stroke-success-500"
|
||||
start-icon="ci:share"
|
||||
variant="primary"
|
||||
>دانلود فاکتور</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user