Mamalizz
101 lines
2.5 KiB
Vue
101 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
// meta
|
|
|
|
const route = useRoute();
|
|
|
|
definePageMeta({
|
|
layout: "cart",
|
|
middleware: "check-is-logged-in",
|
|
pageTitle: "ثبت سفارش",
|
|
prevPage: { name: "cart-delivery", label: "انتخاب آدرس" },
|
|
nextPage: { name: "checkout", label: "پرداخت" },
|
|
});
|
|
|
|
// state
|
|
|
|
const router = useRouter();
|
|
|
|
const paymentGateways = ref<PaymentGateway[]>([
|
|
{
|
|
id: 1,
|
|
picture: "/img/gateways/zarinpal.png",
|
|
title: "زرین پال",
|
|
type: "ZARINPAL",
|
|
},
|
|
{
|
|
id: 2,
|
|
picture: "/img/gateways/sep.png",
|
|
title: "سپ",
|
|
type: "SEP",
|
|
},
|
|
{
|
|
id: 3,
|
|
picture: "/img/gateways/mellat-bank.png",
|
|
title: "بانک ملت",
|
|
type: "MELLAT",
|
|
},
|
|
{
|
|
id: 4,
|
|
picture: "/img/gateways/idpay.png",
|
|
title: "آی دی پی",
|
|
type: "IDPAY",
|
|
},
|
|
{
|
|
id: 5,
|
|
picture: "/img/gateways/zibal.png",
|
|
title: "زیبال",
|
|
type: "ZIBAL",
|
|
},
|
|
{
|
|
id: 6,
|
|
picture: "/img/gateways/bahamta.png",
|
|
title: "باهمتا",
|
|
type: "BAHAMTA",
|
|
},
|
|
{
|
|
id: 7,
|
|
picture: "/img/gateways/bmi.png",
|
|
title: "بانک ملی",
|
|
type: "BMI",
|
|
},
|
|
]);
|
|
|
|
const selectedGateway = computed({
|
|
get: () => {
|
|
return !!route.query["gw"]
|
|
? paymentGateways.value.find((i) => i.type == route.query["gw"])
|
|
: paymentGateways.value[0];
|
|
},
|
|
set: (nv: PaymentGateway) => router.push({ query: { gw: nv.type } }),
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col w-full gap-5">
|
|
<div
|
|
class="flex flex-col items-center w-full gap-4 p-4 border border-gray-300 rounded-xl bg-gray-50"
|
|
>
|
|
<span
|
|
class="flex items-center justify-start w-full text-[1.125rem] font-semibold text-gray-900"
|
|
>
|
|
روش پرداخت
|
|
</span>
|
|
|
|
<div
|
|
class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"
|
|
>
|
|
<Gateway
|
|
v-for="(gateway, index) in paymentGateways"
|
|
:index="index"
|
|
:gateway="gateway"
|
|
:isSelected="selectedGateway?.id == gateway.id"
|
|
@select="selectedGateway = { ...gateway }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<OrderSummary />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|