79 lines
2.9 KiB
Vue
79 lines
2.9 KiB
Vue
 
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="flex">
|
||
|
|
<div class="bg-gray-100 m-2 rounded-lg w-28 h-28 flex justify-center p-2 shrink-0">
|
||
|
|
<img v-if="item.product.group_type == 'گوی'" :src="goyImg" alt="" />
|
||
|
|
<img v-if="item.product.group_type == 'مکعب'" :src="mokaabImg" alt="" />
|
||
|
|
<img v-if="item.product.group_type == 'سکه'" :src="sekkeImg" alt="" />
|
||
|
|
<img v-if="item.product.group_type == 'مس'" :src="mesImg" alt="" />
|
||
|
|
<img v-if="item.product.group_type == 'نقره'" :src="noghrehImg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="w-full min-w-0">
|
||
|
|
<div class="flex justify-between gap-2">
|
||
|
|
<div class="font-bold text-lg truncate">{{ item.product.title }}</div>
|
||
|
|
<BasicButton
|
||
|
|
icon="vuesax-linear:trash"
|
||
|
|
icon-class="text-red"
|
||
|
|
@click="emit('remove', item.product.id)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="flex mt-3 justify-between items-center">
|
||
|
|
<div>تعداد موجودی:</div>
|
||
|
|
<div class="flex flex-col items-end gap-0.5">
|
||
|
|
<div class="flex gap-1 items-center">
|
||
|
|
<div class="font-bold">{{ item.product.wallet.gold }}</div>
|
||
|
|
<div>{{ getProductQuantityUnit(item.product) }}</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="getProductUnitWeightLabel(item.product)" class="text-xs text-gray-500">
|
||
|
|
هر عدد {{ getProductUnitWeightLabel(item.product) }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between items-center mt-2 gap-2">
|
||
|
|
<div>تعداد درخواستی:</div>
|
||
|
|
<div
|
||
|
|
class="flex gap-1 items-center"
|
||
|
|
:class="variant === 'desktop' ? 'dpr-cart-row__input' : 'w-40%'"
|
||
|
|
>
|
||
|
|
<BasicInput
|
||
|
|
v-model:value="item.count"
|
||
|
|
:addon-before="getProductQuantityUnit(item.product)"
|
||
|
|
:addon-bg-color="config.config?.color"
|
||
|
|
addon-text-color="white"
|
||
|
|
:size="variant === 'desktop' ? 'large' : undefined"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||
|
|
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
|
||
|
|
import { useConfigStore } from '@/store/configStore'
|
||
|
|
import type { CountPInventory } from '@/models/products'
|
||
|
|
import goyImg from '@/assets/img/goyImg.svg'
|
||
|
|
import mokaabImg from '@/assets/img/mokaabImg.svg'
|
||
|
|
import sekkeImg from '@/assets/img/sekkeImg.svg'
|
||
|
|
import mesImg from '@/assets/img/mesImg.jpg'
|
||
|
|
import noghrehImg from '@/assets/img/noghrehImg.webp'
|
||
|
|
import { getProductQuantityUnit, getProductUnitWeightLabel } from '@/utils/productDealMethod'
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
item: CountPInventory
|
||
|
|
variant?: 'mobile' | 'desktop'
|
||
|
|
}
|
||
|
|
|
||
|
|
withDefaults(defineProps<Props>(), {
|
||
|
|
variant: 'mobile',
|
||
|
|
})
|
||
|
|
|
||
|
|
const config = useConfigStore()
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
remove: [id: number]
|
||
|
|
}>()
|
||
|
|
</script>
|