273 lines
9.4 KiB
Vue
273 lines
9.4 KiB
Vue
<template>
|
|
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
|
|
<template #default="{ item: row }">
|
|
<MobileSheetHeader :subtitle="dateLabel(row)" :show-title="isMobile">
|
|
<template #title>
|
|
<div class="flex w-full items-center justify-between gap-3">
|
|
<span class="min-w-0 truncate">{{ sheetTitle }}</span>
|
|
<div class="flex shrink-0 items-center gap-2">
|
|
<template v-if="isPendingDepositRequest(row)">
|
|
<MobileIconButton
|
|
plain
|
|
icon="vuesax-linear:tick-circle"
|
|
color="#16A34A"
|
|
:size="22"
|
|
@click="$emit('approveDeposit', row)"
|
|
/>
|
|
<MobileIconButton
|
|
plain
|
|
icon="vuesax-linear:close-circle"
|
|
color="#DC2626"
|
|
:size="22"
|
|
@click="$emit('rejectDeposit', row)"
|
|
/>
|
|
</template>
|
|
<MobileIconButton
|
|
v-else-if="needsTrackingConfirmation(row)"
|
|
plain
|
|
icon="vuesax-linear:tick-circle"
|
|
color="#16A34A"
|
|
:size="22"
|
|
@click="$emit('withdraw', row)"
|
|
/>
|
|
<MobileIconButton
|
|
v-if="needsWeightAssignment(row)"
|
|
plain
|
|
icon="vuesax-linear:3d-cube-scan"
|
|
color="#1D4ED8"
|
|
:size="22"
|
|
@click="$emit('weight', row)"
|
|
/>
|
|
<a-tooltip v-if="row.extra_note">
|
|
<template #title>
|
|
<span class="whitespace-pre-wrap">{{ row.extra_note }}</span>
|
|
</template>
|
|
<a-badge dot>
|
|
<MobileIconButton plain icon="vuesax-linear:message-text" color="#64748b" :size="22" />
|
|
</a-badge>
|
|
</a-tooltip>
|
|
<MobileIconButton
|
|
v-if="showStatusActions(row)"
|
|
plain
|
|
icon="vuesax-linear:document-download"
|
|
color="#1D4ED8"
|
|
:size="22"
|
|
@click="goToFactor(row)"
|
|
/>
|
|
<ADropdown v-if="showStatusActions(row)" :trigger="['click']">
|
|
<MobileIconButton plain icon="vuesax-linear:status-up" color="#CA8A04" :size="22" />
|
|
<template #overlay>
|
|
<a-menu class="flex flex-col">
|
|
<a-menu-item
|
|
v-for="(statusItem, index) in statusOptions(row)"
|
|
:key="index"
|
|
class="m-1 rounded border-none px-2 py-1"
|
|
:style="{ color: statusItem[1].color }"
|
|
@click="$emit('changeStatus', row, statusItem)"
|
|
>
|
|
<span class="font-normal">{{ statusItem[1].title }}</span>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</ADropdown>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</MobileSheetHeader>
|
|
|
|
<span class="inline-flex rounded-lg border px-2 py-0.5 text-xs font-600 border-amber-300 bg-amber-50 text-amber-700">
|
|
{{ row.sts_str || '-' }}
|
|
</span>
|
|
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span
|
|
class="inline-flex rounded-lg border px-2 py-0.5 text-xs font-600"
|
|
:class="typeTagClass(row)"
|
|
>
|
|
{{ typeLabel(row) }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<MobileStatCard
|
|
bordered
|
|
:variant="amountVariant(row)"
|
|
label="مقدار"
|
|
:value="amountLabel(row)"
|
|
>
|
|
<template #prefix>
|
|
<BaseIcon
|
|
:icon="isMoneyWithdraw(row) ? 'vuesax-linear:empty-wallet' : 'vuesax-linear:coin'"
|
|
size="18"
|
|
:color="amountIconColor(row)"
|
|
/>
|
|
</template>
|
|
</MobileStatCard>
|
|
</div>
|
|
|
|
<MobileInfoGrid>
|
|
<MobileDetailRow label="علت تراکنش" full-width :value="noteLabel(row)" />
|
|
<MobileDetailRow
|
|
v-if="row.extra_note"
|
|
label="توضیحات اضافی"
|
|
full-width
|
|
:value="row.extra_note"
|
|
/>
|
|
<MobileDetailRow label="شماره پیگیری" :value="row.tracked_number ?? '-'" />
|
|
<MobileDetailRow label="کد سفارش" :value="row.id ?? '-'" />
|
|
<MobileDetailRow label="کد کاربر" :value="row.customer_id ?? '-'" />
|
|
<MobileDetailRow label="نام و نام خانوادگی" full-width :value="row.customer?.name || '-'" />
|
|
<MobileDetailRow label="شماره کارت" full-width :value="row.bank_account?.cart_number || '-'" />
|
|
<MobileDetailRow label="شماره شبا" full-width :value="row.bank_account?.shaba_number || '-'" />
|
|
<MobileDetailRow
|
|
label="شناسه واریز"
|
|
full-width
|
|
:value="row.deposit_identifier || row.customer?.n_code || '-'"
|
|
/>
|
|
<MobileDetailRow label="تاریخ ثبت" full-width :value="dateLabel(row)" />
|
|
<MobileDetailRow
|
|
v-if="row.reject_reason"
|
|
label="علت رد درخواست"
|
|
full-width
|
|
:value="row.reject_reason"
|
|
/>
|
|
<div v-if="row.receipt_url" class="col-span-2 py-2">
|
|
<div class="text-xs text-gray-500 mb-1">فیش واریزی:</div>
|
|
<a-image
|
|
:src="row.receipt_url"
|
|
:height="120"
|
|
class="rounded-lg object-contain border max-w-full"
|
|
alt="فیش واریزی"
|
|
/>
|
|
</div>
|
|
</MobileInfoGrid>
|
|
|
|
<div v-if="isPendingDepositRequest(row)" class="mt-4 flex gap-2">
|
|
<BaseButton
|
|
type="primary"
|
|
class="flex-1 !bg-emerald-600 hover:!bg-emerald-700 !border-emerald-600 text-white"
|
|
@click="$emit('approveDeposit', row)"
|
|
>
|
|
<template #icon>
|
|
<BaseIcon icon="vuesax-linear:tick-circle" size="16" />
|
|
</template>
|
|
تایید واریز
|
|
</BaseButton>
|
|
<BaseButton
|
|
danger
|
|
class="flex-1"
|
|
@click="$emit('rejectDeposit', row)"
|
|
>
|
|
<template #icon>
|
|
<BaseIcon icon="vuesax-linear:close-circle" size="16" />
|
|
</template>
|
|
رد واریز
|
|
</BaseButton>
|
|
</div>
|
|
</template>
|
|
</MobileDetailSheet>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Withdraw } from '@/model/wallet'
|
|
import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
|
|
import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
|
|
import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
|
|
import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
|
|
import MobileSheetHeader from '@/components/mobile/MobileSheetHeader.vue'
|
|
import MobileStatCard from '@/components/mobile/MobileStatCard.vue'
|
|
import { status } from '@/pages/menuPages/withdraw/information/hooks/status'
|
|
import {
|
|
formatWithdrawAmountDisplay,
|
|
isMoneyWithdraw,
|
|
isPendingDepositRequest,
|
|
needsTrackingConfirmation,
|
|
needsWeightAssignment,
|
|
withdrawAmountValue,
|
|
withdrawTypeLabel
|
|
} from '@/pages/menuPages/withdraw/utils/withdrawDisplay'
|
|
import { isMobile } from '@core/utils/is'
|
|
import { toJalali } from '@core/utils/useDataTime'
|
|
import { toNumber } from 'lodash'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const props = defineProps<{
|
|
visible: boolean
|
|
item: Withdraw | null
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:visible', value: boolean): void
|
|
(e: 'withdraw', item: Withdraw): void
|
|
(e: 'weight', item: Withdraw): void
|
|
(e: 'approveDeposit', item: Withdraw): void
|
|
(e: 'rejectDeposit', item: Withdraw): void
|
|
(e: 'changeStatus', item: Withdraw, statusEntry: [string, (typeof status)[keyof typeof status]]): void
|
|
}>()
|
|
|
|
const router = useRouter()
|
|
|
|
const visibleProxy = computed({
|
|
get: () => props.visible,
|
|
set: (value: boolean) => emit('update:visible', value)
|
|
})
|
|
|
|
const sheetTitle = computed(() => props.item?.customer?.name || `برداشت #${props.item?.id ?? '-'}`)
|
|
|
|
function showStatusActions(row: Withdraw) {
|
|
const sts = row.sts ?? 0
|
|
return sts >= 50 && sts <= 70
|
|
}
|
|
|
|
function statusOptions(row: Withdraw) {
|
|
return Object.entries(status).filter((item) => toNumber(item[0]) !== row.sts) as [string, (typeof status)[keyof typeof status]][]
|
|
}
|
|
|
|
function goToFactor(row: Withdraw) {
|
|
if (!row.id) return
|
|
router.push({ name: 'factor', params: { id: row.id } })
|
|
}
|
|
|
|
function dateLabel(row: Withdraw) {
|
|
return row.created_at ? toJalali(row.created_at) : '-'
|
|
}
|
|
|
|
function noteLabel(row: Withdraw) {
|
|
if (row.note == null || row.note === '') return '-'
|
|
return String(row.note)
|
|
}
|
|
|
|
function typeLabel(row: Withdraw) {
|
|
return withdrawTypeLabel(row)
|
|
}
|
|
|
|
function typeTagClass(row: Withdraw) {
|
|
if (!isMoneyWithdraw(row)) {
|
|
return 'border-amber-300 bg-amber-50 text-amber-700'
|
|
}
|
|
return withdrawAmountValue(row) > 0
|
|
? 'border-green-300 bg-green-50 text-green-700'
|
|
: withdrawAmountValue(row) < 0
|
|
? 'border-red-300 bg-red-50 text-red-700'
|
|
: 'border-gray-300 bg-gray-50 text-gray-700'
|
|
}
|
|
|
|
function amountLabel(row: Withdraw) {
|
|
return formatWithdrawAmountDisplay(row)
|
|
}
|
|
|
|
function amountVariant(row: Withdraw) {
|
|
const value = withdrawAmountValue(row)
|
|
if (value > 0) return 'success'
|
|
if (value < 0) return 'danger'
|
|
return 'warning'
|
|
}
|
|
|
|
function amountIconColor(row: Withdraw) {
|
|
const value = withdrawAmountValue(row)
|
|
if (value > 0) return '#15803d'
|
|
if (value < 0) return '#dc2626'
|
|
return '#b45309'
|
|
}
|
|
</script>
|