58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<template>
|
|
<div :class="variant === 'desktop' ? 'dpr-address-picker dpr-address-picker--desktop' : 'h-120 flex flex-col'">
|
|
<div v-if="variant !== 'desktop'" class="text-center">انتخاب آدرس</div>
|
|
<div :class="variant === 'desktop' ? 'dpr-address-picker__list' : 'overflow-y-scroll h-85'">
|
|
<ARadioGroup v-model:value="selectedAddressID">
|
|
<div class="flex flex-col">
|
|
<div
|
|
v-for="addr in addresses"
|
|
:key="addr.id"
|
|
:class="variant === 'desktop' ? 'dpr-address-picker__item' : 'text-base rounded-lg p-4 m-2 shadow-md font-medium'"
|
|
>
|
|
<ARadio :value="addr.id">
|
|
{{ addr.province }} / {{ addr.city }} / {{ addr.address }}
|
|
</ARadio>
|
|
</div>
|
|
</div>
|
|
</ARadioGroup>
|
|
</div>
|
|
<div :class="variant === 'desktop' ? 'dpr-address-picker__actions' : 'flex gap-2 pt-2'">
|
|
<BasicButton @click="emit('addAddress')">افزودن آدرس +</BasicButton>
|
|
<BasicButton
|
|
:class="variant === 'desktop' ? '' : 'w-2/3'"
|
|
type="primary"
|
|
@click="emit('submit')"
|
|
>
|
|
ثبت نهایی
|
|
</BasicButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|
import type { Address } from '@/models/address'
|
|
|
|
interface Props {
|
|
addresses?: Address[]
|
|
variant?: 'mobile' | 'desktop'
|
|
selectedAddressId?: number
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: 'mobile',
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
addAddress: []
|
|
submit: []
|
|
'update:selectedAddressId': [value: number | undefined]
|
|
}>()
|
|
|
|
const selectedAddressID = computed({
|
|
get: () => props.selectedAddressId,
|
|
set: (value: number | undefined) => emit('update:selectedAddressId', value),
|
|
})
|
|
</script>
|