Mamalizz
115 lines
3.3 KiB
Vue
115 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
// meta
|
|
|
|
definePageMeta({
|
|
layout: "cart",
|
|
middleware: "check-is-logged-in",
|
|
pageTitle: "ثبت سفارش",
|
|
prevPage: { name: "cart-delivery", label: "انتخاب آدرس" },
|
|
nextPage: { name: "checkout", label: "پرداخت" },
|
|
});
|
|
|
|
// types
|
|
|
|
type PaymentGateway = {
|
|
id: number;
|
|
picture: string;
|
|
title: string;
|
|
};
|
|
|
|
// state
|
|
|
|
const paymentGateways = ref<PaymentGateway[]>([
|
|
{
|
|
id: 1,
|
|
picture: "/zarinpal.png",
|
|
title: "زرین پال",
|
|
},
|
|
{
|
|
id: 2,
|
|
picture: "/saman-bank.png",
|
|
title: "بانک سامان",
|
|
},
|
|
{
|
|
id: 3,
|
|
picture: "/mellat-bank.png",
|
|
title: "بانک ملت",
|
|
},
|
|
{
|
|
id: 4,
|
|
picture: "/jibimo.png",
|
|
title: "جیبی مو",
|
|
},
|
|
{
|
|
id: 5,
|
|
picture: "/idpay.png",
|
|
title: "آی دی پی",
|
|
},
|
|
]);
|
|
|
|
const selectedGateway = ref<PaymentGateway>(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-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"
|
|
>
|
|
<div
|
|
v-for="(gateway, index) in paymentGateways"
|
|
@click="selectedGateway = { ...gateway }"
|
|
:key="index"
|
|
:class="
|
|
selectedGateway.id == gateway.id
|
|
? 'ring-2 ring-offset-2 ring-black border-black'
|
|
: 'border-slate-200'
|
|
"
|
|
class="w-full p-5 border rounded-xl flex flex-col gap-4 transition-all cursor-pointer"
|
|
>
|
|
<div class="aspect-square flex-center">
|
|
<img :src="gateway.picture" class="object-cover" />
|
|
</div>
|
|
<span class="typo-label-sm text-black">
|
|
{{ gateway.title }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-col items-center w-full gap-4 p-4 border lg:gap-6 border-gray-300 rounded-xl bg-gray-50"
|
|
>
|
|
<span
|
|
class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-gray-900"
|
|
>
|
|
خلاصه سفارش
|
|
</span>
|
|
|
|
<div
|
|
class="grid w-full grid-cols-1 gap-6 lg:grid-cols-3 md:grid-cols-2"
|
|
>
|
|
<MinimalCartItem v-for="i in 9" />
|
|
|
|
<div class="h-7 flex-center col-span-full lg:hidden">
|
|
<button class="gap-2 flex-center">
|
|
<span class="text-sm font-bold text-black">
|
|
مشاهده بیشتر
|
|
</span>
|
|
<Icon name="bi:chevron-down" class="**:stroke-black" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|