120 lines
4.7 KiB
Vue
120 lines
4.7 KiB
Vue
<template>
|
|
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="item?.name || ''">
|
|
<template #default="{ item: row }">
|
|
<MobileSheetHeader :title="row.name || '-'" :show-title="isMobile">
|
|
<template #actions>
|
|
<MobileIconButton plain icon="vuesax-linear:archive-tick" color="#e3bf00" :size="22" @click="$emit('archive', row)" />
|
|
<MobileIconButton
|
|
plain
|
|
:icon="row.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'"
|
|
:color="row.active ? '#54AD06' : '#ad0627'"
|
|
:size="22"
|
|
@click="$emit('toggleActive', row)"
|
|
/>
|
|
<MobileIconButton plain icon="vuesax-linear:wallet-add" color="#9333ea" :size="22" @click="$emit('chargeMoney', row)" />
|
|
<MobileIconButton plain icon="vuesax-linear:wallet-money" color="#ea580c" :size="22" @click="$emit('chargeGold', row)" />
|
|
<MobileIconButton
|
|
plain
|
|
:icon="row.trade_active ? 'vuesax-linear:box-tick' : 'vuesax-linear:box-remove'"
|
|
:color="row.trade_active ? '#54AD06' : '#ad0627'"
|
|
:size="22"
|
|
@click="$emit('toggleTrade', row)"
|
|
/>
|
|
<MobileIconButton
|
|
v-if="!(row as any).is_legal"
|
|
plain
|
|
icon="vuesax-linear:user-search"
|
|
color="#0d9488"
|
|
:size="22"
|
|
@click="$emit('confirmUser', row)"
|
|
/>
|
|
</template>
|
|
</MobileSheetHeader>
|
|
|
|
<div class="space-y-2">
|
|
<MobileStatCard bordered variant="success" label="موجودی طلایی" :value="`${goldBalance(row)} گرم`">
|
|
<template #prefix>
|
|
<BaseIcon icon="vuesax-linear:coin" size="18" color="#15803d" />
|
|
</template>
|
|
</MobileStatCard>
|
|
<MobileStatCard
|
|
bordered
|
|
variant="success"
|
|
label="موجودی ریالی"
|
|
:value="usePrice(cashBalance(row), true, '')"
|
|
>
|
|
<template #prefix>
|
|
<BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#15803d" />
|
|
</template>
|
|
</MobileStatCard>
|
|
</div>
|
|
|
|
<MobileInfoGrid>
|
|
<MobileDetailRow label="وضعیت کاربر" full-width :value-class="row.active ? 'text-green-700' : 'text-red-600'">
|
|
{{ row.active ? 'فعال' : 'غیرفعال' }}
|
|
</MobileDetailRow>
|
|
<MobileDetailRow
|
|
label="وضعیت سفارش دهی"
|
|
full-width
|
|
:value-class="row.trade_active ? 'text-green-700' : 'text-red-600'"
|
|
>
|
|
{{ row.trade_active ? 'مجاز' : 'غیر مجاز' }}
|
|
</MobileDetailRow>
|
|
<MobileDetailRow label="کد کاربری" :value="row.id ?? '-'" />
|
|
<MobileDetailRow label="نوع کاربر" :value="row.type_str || '-'" />
|
|
<MobileDetailRow label="کد معرف" :value="row.referral_id ?? '-'" />
|
|
<MobileDetailRow label="نام معرف کاربر" :value="row.referral?.name ?? '-'" />
|
|
<MobileDetailRow label="گنج (گرم)" :value="row.gold ?? '-'" />
|
|
<MobileDetailRow label="آخرین بازدید" :value="lastSeen(row)" value-class="text-xs" />
|
|
</MobileInfoGrid>
|
|
</template>
|
|
</MobileDetailSheet>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Customer } from '@/model/customer'
|
|
import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
|
|
import MobileStatCard from '@/components/mobile/MobileStatCard.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 { getCashBalance, getGoldBalance } from '@/components/mobile/utils/wallet'
|
|
import { isMobile } from '@core/utils/is'
|
|
import { toJalali } from '@core/utils/useDataTime'
|
|
import { usePrice } from '@core/utils/usePrice'
|
|
|
|
const props = defineProps<{
|
|
visible: boolean
|
|
item: Customer | null
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:visible', value: boolean): void
|
|
(e: 'info', item: Customer): void
|
|
(e: 'archive', item: Customer): void
|
|
(e: 'toggleActive', item: Customer): void
|
|
(e: 'chargeMoney', item: Customer): void
|
|
(e: 'chargeGold', item: Customer): void
|
|
(e: 'toggleTrade', item: Customer): void
|
|
(e: 'confirmUser', item: Customer): void
|
|
}>()
|
|
|
|
const visibleProxy = computed({
|
|
get: () => props.visible,
|
|
set: (value: boolean) => emit('update:visible', value)
|
|
})
|
|
|
|
function cashBalance(row: Customer) {
|
|
return getCashBalance(row.wallet)
|
|
}
|
|
|
|
function goldBalance(row: Customer) {
|
|
return getGoldBalance(row.wallet)
|
|
}
|
|
|
|
function lastSeen(row: Customer) {
|
|
return row.last_seen_at ? toJalali(row.last_seen_at) : '-'
|
|
}
|
|
</script>
|