142 lines
5.6 KiB
Vue
142 lines
5.6 KiB
Vue
<template>
|
|
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" title="">
|
|
<template #default="{ item: row }">
|
|
<h2 class="text-base font-700 leading-relaxed text-gray-900">{{ row.name || '-' }}</h2>
|
|
<p v-if="row.mobile" class="text-sm text-gray-500" dir="ltr">{{ row.mobile }}</p>
|
|
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<BaseButton class="w-full" size="middle" type="primary" icon="vuesax-linear:wallet-add" @click="closeAndEmit('chargeMoney', row)">
|
|
شارژ ریالی
|
|
</BaseButton>
|
|
<BaseButton class="w-full" size="middle" type="primary" icon="vuesax-linear:wallet-money" @click="closeAndEmit('chargeGold', row)">
|
|
{{ metalLabel.goldChargeShort() }}
|
|
</BaseButton>
|
|
<BaseButton
|
|
v-if="!row.is_legal"
|
|
class="w-full"
|
|
size="middle"
|
|
type="default"
|
|
icon="vuesax-linear:user-search"
|
|
@click="closeAndEmit('confirmUser', row)"
|
|
>
|
|
تایید کاربر
|
|
</BaseButton>
|
|
<BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:stickynote" @click="closeAndEmit('info', row)">
|
|
مشخصات کامل
|
|
</BaseButton>
|
|
<BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:edit" @click="closeAndEmit('edit', row)">
|
|
ویرایش
|
|
</BaseButton>
|
|
<BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:archive-tick" @click="closeAndEmit('archive', row)">
|
|
بایگانی
|
|
</BaseButton>
|
|
<BaseButton
|
|
class="w-full"
|
|
size="middle"
|
|
:type="row.active ? 'default' : 'primary'"
|
|
:icon="row.active ? 'vuesax-linear:user-remove' : 'vuesax-linear:user-tick'"
|
|
@click="confirmToggleActive(row)"
|
|
>
|
|
{{ row.active ? 'غیرفعال کردن' : 'فعال کردن' }}
|
|
</BaseButton>
|
|
<BaseButton
|
|
class="w-full"
|
|
size="middle"
|
|
:type="row.trade_active === 1 ? 'default' : 'primary'"
|
|
:icon="row.trade_active === 1 ? 'vuesax-linear:box-remove' : 'vuesax-linear:box-tick'"
|
|
@click="confirmToggleTrade(row)"
|
|
>
|
|
{{ row.trade_active === 1 ? 'ممنوعیت سفارش' : 'مجاز کردن سفارش' }}
|
|
</BaseButton>
|
|
</div>
|
|
|
|
<CustomerWalletBalancePanel :customer-id="row?.id" />
|
|
|
|
<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 === 1 ? 'text-green-700' : 'text-red-600'"
|
|
>
|
|
{{ row.trade_active === 1 ? 'مجاز' : 'غیر مجاز' }}
|
|
</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="lastSeen(row)" value-class="text-xs" />
|
|
</MobileInfoGrid>
|
|
</template>
|
|
</MobileDetailSheet>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Modal } from 'ant-design-vue'
|
|
import type { Customer } from '@/model/customer'
|
|
import { MODAL_ABOVE_ACTION_SHEET_Z_INDEX } from '@/constants/overlayZIndex'
|
|
import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
|
|
import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
|
|
import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
|
|
import CustomerWalletBalancePanel from '@/components/customer/CustomerWalletBalancePanel.vue'
|
|
import { toJalali } from '@core/utils/useDataTime'
|
|
import { metalLabel } from '@/utils/adminMetalLabels'
|
|
|
|
const props = defineProps<{
|
|
visible: boolean
|
|
item: Customer | null
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:visible', value: boolean): void
|
|
(e: 'info', item: Customer): void
|
|
(e: 'edit', 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)
|
|
})
|
|
|
|
type SheetEmit = 'archive' | 'chargeMoney' | 'chargeGold' | 'info' | 'confirmUser' | 'edit'
|
|
|
|
function closeAndEmit(event: SheetEmit, row: Customer) {
|
|
visibleProxy.value = false
|
|
emit(event, row)
|
|
}
|
|
|
|
function confirmToggleActive(row: Customer) {
|
|
Modal.confirm({
|
|
title: row.active ? 'آیا حساب کاربری را غیرفعال می‌کنید؟' : 'آیا حساب کاربری را فعال می‌کنید؟',
|
|
okText: 'تایید',
|
|
cancelText: 'رد',
|
|
centered: true,
|
|
zIndex: MODAL_ABOVE_ACTION_SHEET_Z_INDEX,
|
|
onOk: () => emit('toggleActive', row)
|
|
})
|
|
}
|
|
|
|
function confirmToggleTrade(row: Customer) {
|
|
Modal.confirm({
|
|
title: row.trade_active === 1 ? 'آیا سفارش دهی را غیرمجاز می‌کنید؟' : 'آیا سفارش دهی را مجاز می‌کنید؟',
|
|
okText: 'تایید',
|
|
cancelText: 'رد',
|
|
centered: true,
|
|
zIndex: MODAL_ABOVE_ACTION_SHEET_Z_INDEX,
|
|
onOk: () => emit('toggleTrade', row)
|
|
})
|
|
}
|
|
|
|
function lastSeen(row: Customer) {
|
|
return row.last_seen_at ? toJalali(row.last_seen_at) : '-'
|
|
}
|
|
</script>
|