Mamalizz
70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
// meta
|
|
|
|
const route = useRoute();
|
|
|
|
useSeoMeta({
|
|
title: "ثبت سفارش",
|
|
});
|
|
|
|
definePageMeta({
|
|
layout: "cart",
|
|
middleware: ["check-is-logged-in", "check-has-selected-address"],
|
|
prevPage: { name: "cart-delivery", label: "انتخاب آدرس" },
|
|
nextPage: { name: "payment", label: "پرداخت" },
|
|
});
|
|
|
|
// state
|
|
|
|
const router = useRouter();
|
|
|
|
const paymentGateways = ref<PaymentGateway[]>([
|
|
{
|
|
id: 5,
|
|
picture: "/img/gateways/zibal.png",
|
|
title: "زیبال",
|
|
type: "ZIBAL",
|
|
},
|
|
]);
|
|
|
|
const selectedGateway = computed({
|
|
get: () => {
|
|
return !!route.query["gw"]
|
|
? paymentGateways.value.find((i) => i.type == route.query["gw"])
|
|
: paymentGateways.value[0];
|
|
},
|
|
set: (nv: PaymentGateway) => router.replace({ query: { gw: nv.type } }),
|
|
});
|
|
|
|
// life-cycle
|
|
|
|
onMounted(() => {
|
|
if (!route.query.hasOwnProperty("gw")) {
|
|
selectedGateway.value = paymentGateways.value[0];
|
|
}
|
|
});
|
|
</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-slate-200 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>
|