109 lines
2.7 KiB
Vue
109 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex">
|
|
<div class="bg-gray-100 m-2 rounded-lg w-18 h-18 flex justify-center p-1 shrink-0">
|
|
<img :src="displayImage" class="object-contain w-full h-full" alt="" />
|
|
</div>
|
|
<div class="w-full min-w-0">
|
|
<div class="pr-cart-row__head">
|
|
<div class="truncate text-base font-bold">{{ item.product.title }}</div>
|
|
<BasicButton
|
|
icon="vuesax-linear:trash"
|
|
icon-class="text-red"
|
|
class="pr-cart-row__trash shrink-0"
|
|
@click="emit('remove', item.product.id)"
|
|
/>
|
|
<div class="pr-cart-row__stock text-xs">
|
|
<span>مقدار موجودی</span>
|
|
<span class="font-bold">{{ item.product.wallet.gold }}</span>
|
|
<span>{{ item.product.unit }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 flex justify-between items-center gap-2">
|
|
<div class="shrink-0">تعداد درخواستی:</div>
|
|
<div class="flex items-center gap-1 pr-cart-row__input">
|
|
<BasicInput
|
|
v-model:value="item.count"
|
|
:addon-before="item.product.unit"
|
|
addon-bg-color="#a72b77"
|
|
addon-text-color="white"
|
|
type="text"
|
|
inputmode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
|
|
import type { CountPInventory } from '@/models/products'
|
|
import { getProductDisplayImage } from '@/utils/productAssets'
|
|
|
|
interface Props {
|
|
item: CountPInventory
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const displayImage = computed(() =>
|
|
getProductDisplayImage({
|
|
group_type: props.item.product.group_type,
|
|
title: props.item.product.title,
|
|
file: props.item.product.file,
|
|
}),
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
remove: [id: number]
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.pr-cart-row__head {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto auto;
|
|
column-gap: 0.5rem;
|
|
row-gap: 0.125rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.pr-cart-row__trash {
|
|
grid-column: 2;
|
|
grid-row: 1 / span 2;
|
|
justify-self: end;
|
|
}
|
|
|
|
.pr-cart-row__stock {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.pr-cart-row__input {
|
|
width: auto;
|
|
max-width: 10rem;
|
|
|
|
:deep(.noname-input),
|
|
:deep(.ant-input-group-wrapper) {
|
|
width: 100%;
|
|
}
|
|
|
|
:deep(.ant-input-group-addon) {
|
|
min-width: 3.75rem;
|
|
padding-inline: 6px;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
</style>
|