boursecu/boursecu_admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handle mobile user

Browse Source
This commit is contained in:
mohmdsdg
2026-06-04 22:35:57 +03:30
parent dded284d26
commit f89df02a90
8 changed files with 242 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BasicActionSheet.vue
+27 -2
View File
@@ -51,9 +51,9 @@
:destroy-on-close="true"
:height="drawerHeight"
:z-index="ACTION_SHEET_Z_INDEX"
class="basic-action-sheet"
:class="['basic-action-sheet', { 'basic-action-sheet--compact': compact }]"
>
<div class="basic-action-sheet__container">
<div class="basic-action-sheet__container" :class="{ 'basic-action-sheet__container--compact': compact }">
<div class="flex cursor-pointer justify-center pt-2" @click="visibleProxy = false">
<span class="w-12 rounded-sm border-t-2 border-t-solid border-t-gray-500"></span>
</div>
@@ -105,6 +105,7 @@ interface Props {
modalWidth?: string
loading?: boolean
drawerHeight?: string
compact?: boolean
cancelText?: string
showButton?: boolean
showCancel?: boolean
@@ -118,6 +119,7 @@ const props = withDefaults(defineProps<Props>(), {
modalWidth: '36rem',
loading: false,
drawerHeight: ACTION_SHEET_HEIGHT,
compact: false,
cancelText: 'بازگشت',
showButton: false,
showCancel: true,
@@ -177,6 +179,29 @@ function handleCancel() {
padding: 0 16px 12px;
}
.basic-action-sheet--compact {
.ant-drawer-content-wrapper {
height: auto !important;
max-height: 88vh;
}
.ant-drawer-content {
height: auto !important;
max-height: 88vh;
}
}
.basic-action-sheet__container--compact {
height: auto;
min-height: 0;
max-height: 88vh;
}
.basic-action-sheet__container--compact .basic-action-sheet__content {
flex: 0 1 auto;
max-height: calc(88vh - 40px);
}
.basic-action-sheet__footer {
position: sticky;
bottom: 0;
src/components/mobile/MobileDetailSheet.vue
+2 -1
View File
@@ -1,8 +1,9 @@
<template>
<BasicActionSheet
v-model:visible="visibleModel"
:title="title"
:title="''"
:showButton="false"
:compact="true"
:drawerHeight="drawerHeight"
>
<div v-if="item" class="space-y-3 pb-2">
src/components/mobile/MobileSheetHeader.vue
+12 -7
View File
@@ -1,15 +1,20 @@
<template>
<div class="space-y-3">
<div class="min-w-0 space-y-1">
<div v-if="showTitle" class="text-lg font-700 text-gray-900">
<slot name="title">{{ title }}</slot>
<div class="flex items-start justify-between gap-2">
<div class="min-w-0 flex-1 space-y-1">
<div v-if="showTitle" class="text-lg font-700 text-gray-900">
<slot name="title">{{ title }}</slot>
</div>
<div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
<slot name="subtitle">{{ subtitle }}</slot>
</div>
</div>
<div v-if="$slots.actions" class="flex flex-wrap items-center justify-end gap-2 pt-1">
<div
v-if="$slots.actions"
class="flex shrink-0 flex-wrap items-center justify-end gap-1"
>
<slot name="actions" />
</div>
<div v-if="subtitle || $slots.subtitle" class="text-xs text-gray-500">
<slot name="subtitle">{{ subtitle }}</slot>
</div>
</div>
</div>
</template>
src/pages/menuPages/customers/base/components/CustomerMobileCardList.vue
+28 -8
View File
@@ -21,13 +21,14 @@
<CustomerMobileDetailSheet
v-model:visible="sheetVisible"
:item="selectedItem"
@info="$emit('info', $event)"
@archive="$emit('archive', $event)"
@toggleActive="$emit('toggleActive', $event)"
@chargeMoney="$emit('chargeMoney', $event)"
@chargeGold="$emit('chargeGold', $event)"
@toggleTrade="$emit('toggleTrade', $event)"
@confirmUser="$emit('confirmUser', $event)"
@info="forwardAndClose('info', $event)"
@edit="forwardAndClose('edit', $event)"
@archive="forwardAndClose('archive', $event)"
@toggleActive="forward('toggleActive', $event)"
@chargeMoney="forwardAndClose('chargeMoney', $event)"
@chargeGold="forwardAndClose('chargeGold', $event)"
@toggleTrade="forward('toggleTrade', $event)"
@confirmUser="forwardAndClose('confirmUser', $event)"
/>
</template>
@@ -40,7 +41,7 @@ import { useMobileTableList } from '@/components/mobile/composables/useMobileTab
import CustomerMobileListItem from './CustomerMobileListItem.vue'
import CustomerMobileDetailSheet from './CustomerMobileDetailSheet.vue'
defineEmits<{
const emit = defineEmits<{
(e: 'info', item: Customer): void
(e: 'edit', item: Customer): void
(e: 'archive', item: Customer): void
@@ -53,6 +54,25 @@ defineEmits<{
const { sheetVisible, selectedItem, openSheet, syncSelectedItem } = useMobileDetailSheet<Customer>()
type SheetAction =
| 'info'
| 'edit'
| 'archive'
| 'toggleActive'
| 'chargeMoney'
| 'chargeGold'
| 'toggleTrade'
| 'confirmUser'
function forward(action: SheetAction, item: Customer) {
emit(action, item)
}
function forwardAndClose(action: SheetAction, item: Customer) {
sheetVisible.value = false
emit(action, item)
}
const { loading, search, items, hasMore, reload, loadMore, fetch } = useMobileTableList<Customer>({
fetchApi: getCustomerTable,
onFetched: (rows) => syncSelectedItem(rows)
src/pages/menuPages/customers/base/components/CustomerMobileDetailSheet.vue
+66 -57
View File
@@ -1,36 +1,54 @@
<template>
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="item?.name || ''">
<MobileDetailSheet v-model:visible="visibleProxy" :item="item" title="">
<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="closeAndEmit('archive', row)" />
<MobileIconButton
plain
:icon="row.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'"
:color="row.active ? '#54AD06' : '#ad0627'"
:size="22"
@click="confirmToggleActive(row)"
/>
<MobileIconButton plain icon="vuesax-linear:wallet-add" color="#9333ea" :size="22" @click="closeAndEmit('chargeMoney', row)" />
<MobileIconButton plain icon="vuesax-linear:wallet-money" color="#ea580c" :size="22" @click="closeAndEmit('chargeGold', row)" />
<MobileIconButton plain icon="vuesax-linear:stickynote" color="#10913A" :size="22" @click="closeAndEmit('info', row)" />
<MobileIconButton
plain
:icon="row.trade_active ? 'vuesax-linear:box-tick' : 'vuesax-linear:box-remove'"
:color="row.trade_active ? '#54AD06' : '#ad0627'"
:size="22"
@click="confirmToggleTrade(row)"
/>
<MobileIconButton
v-if="!(row as any).is_legal"
plain
icon="vuesax-linear:user-search"
color="#0d9488"
:size="22"
@click="closeAndEmit('confirmUser', row)"
/>
</template>
</MobileSheetHeader>
<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)">
شارژ طلایی
</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>
<div class="space-y-2">
<MobileStatCard bordered variant="success" label="موجودی طلایی" :value="`${goldBalance(row)} گرم`">
@@ -57,9 +75,9 @@
<MobileDetailRow
label="وضعیت سفارش دهی"
full-width
:value-class="row.trade_active ? 'text-green-700' : 'text-red-600'"
:value-class="row.trade_active === 1 ? 'text-green-700' : 'text-red-600'"
>
{{ row.trade_active ? 'مجاز' : 'غیر مجاز' }}
{{ row.trade_active === 1 ? 'مجاز' : 'غیر مجاز' }}
</MobileDetailRow>
<MobileDetailRow label="کد کاربری" :value="row.id ?? '-'" />
<MobileDetailRow label="نوع کاربر" :value="row.type_str || '-'" />
@@ -79,11 +97,8 @@ import { MODAL_ABOVE_ACTION_SHEET_Z_INDEX } from '@/constants/overlayZIndex'
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'
@@ -95,6 +110,7 @@ const props = defineProps<{
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
@@ -108,24 +124,7 @@ const visibleProxy = computed({
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) : '-'
}
type SheetEmit =
| 'archive'
| 'chargeMoney'
| 'chargeGold'
| 'info'
| 'confirmUser'
type SheetEmit = 'archive' | 'chargeMoney' | 'chargeGold' | 'info' | 'confirmUser' | 'edit'
function closeAndEmit(event: SheetEmit, row: Customer) {
visibleProxy.value = false
@@ -145,9 +144,7 @@ function confirmToggleActive(row: Customer) {
function confirmToggleTrade(row: Customer) {
Modal.confirm({
title: row.trade_active
? 'آیا سفارش دهی را غیرمجاز می‌کنید؟'
: 'آیا سفارش دهی را مجاز می‌کنید؟',
title: row.trade_active === 1 ? 'آیا سفارش دهی را غیرمجاز می‌کنید؟' : 'آیا سفارش دهی را مجاز می‌کنید؟',
okText: 'تایید',
cancelText: 'رد',
centered: true,
@@ -155,4 +152,16 @@ function confirmToggleTrade(row: Customer) {
onOk: () => emit('toggleTrade', row)
})
}
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>
src/pages/menuPages/customers/base/components/CustomerMobileListItem.vue
+45 -17
View File
@@ -1,25 +1,54 @@
<template>
<MobileCard clickable @click="$emit('open', item)">
<div class="flex items-center gap-3">
<div class="flex min-w-0 flex-1 items-center gap-2">
<div class="flex items-start gap-3">
<div
class="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100"
>
<BaseIcon icon="vuesax-linear:user" size="20" color="#6b7280" />
<button
type="button"
class="truncate border-none bg-transparent p-0 text-right text-sm font-700 text-gray-900 cursor-pointer"
@click.stop="$emit('info', item)"
>
{{ item.name || '-' }}
</button>
</div>
<div class="shrink-0 text-sm text-gray-600">{{ item.mobile || '-' }}</div>
<div class="min-w-0 flex-1 space-y-1.5">
<div class="flex items-center gap-2">
<button
type="button"
class="min-w-0 flex-1 truncate border-none bg-transparent p-0 text-right text-sm font-700 text-gray-900"
@click.stop="$emit('info', item)"
>
{{ item.name || '-' }}
</button>
<span
class="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
:class="item.active ? 'bg-green-500' : 'bg-red-500'"
/>
</div>
<div class="flex shrink-0 items-center gap-2">
<span class="whitespace-nowrap rounded-lg border px-2 py-0.5 text-xs font-600" :class="typeTagClass">
{{ item.type_str || 'کاربر' }}
</span>
<MobileIconButton icon="vuesax-linear:edit" color="#4572E9" :size="20" @click="$emit('edit', item)" />
<span class="inline-block h-2.5 w-2.5 rounded-full" :class="item.active ? 'bg-green-500' : 'bg-red-500'" />
<div class="flex flex-wrap items-center gap-2 text-xs text-gray-600">
<span dir="ltr" class="font-mono">{{ item.mobile || '-' }}</span>
<span class="whitespace-nowrap rounded-lg border px-2 py-0.5 font-600" :class="typeTagClass">
{{ item.type_str || 'کاربر' }}
</span>
</div>
</div>
<div class="flex shrink-0 flex-col items-stretch gap-1">
<BaseButton
type="primary"
size="small"
class="min-w-[4.5rem]"
icon="vuesax-linear:setting-4"
@click.stop="$emit('open', item)"
>
عملیات
</BaseButton>
<BaseButton
type="default"
size="small"
class="min-w-[4.5rem]"
icon="vuesax-linear:edit"
@click.stop="$emit('edit', item)"
>
ویرایش
</BaseButton>
</div>
</div>
</MobileCard>
@@ -28,7 +57,6 @@
<script setup lang="ts">
import type { Customer } from '@/model/customer'
import MobileCard from '@/components/mobile/MobileCard.vue'
import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
const props = defineProps<{
item: Customer
src/pages/menuPages/customers/base/components/table.vue
+3 -1
View File
@@ -105,7 +105,7 @@
<BasicModal
v-model:visible="confirmVisible"
width="50vw"
:width="isMobile ? '92vw' : '50vw'"
title="تایید مشتری"
@ok="confirmUserFunction"
ok-text="تایید"
@@ -147,6 +147,7 @@ import useBaseTable from '@core/components/BaseTable/hooks/useBaseTable'
import type { TableInput } from '@core/type/baseTable'
import { toJalaliNoTime } from '@core/utils/useDataTime'
import type { Customer } from '@/model/customer'
import { MODAL_ABOVE_ACTION_SHEET_Z_INDEX } from '@/constants/overlayZIndex'
import { isMobile } from '@core/utils/is'
const [submit, reload] = useBaseTable()
@@ -192,6 +193,7 @@ function handleArchive(customer: Customer) {
okText: 'تایید',
cancelText: 'رد',
centered: true,
zIndex: MODAL_ABOVE_ACTION_SHEET_Z_INDEX,
onOk: () => archiveFunction(customer.id)
})
}
src/pages/menuPages/customers/base/index.vue
+59 -2
View File
@@ -215,7 +215,37 @@
</a-tab-pane>
</a-tabs>
</BasicActionSheet>
<BasicActionSheet
v-if="isMobile"
v-model:visible="showMoneyWalletCharge"
title="شارژ کیف پول ریالی"
modal-width="24rem"
:loading="loading"
:show-button="true"
:show-cancel="true"
:show-ok="true"
ok-text="ثبت"
cancel-text="انصراف"
@ok="chargeMoneyWallet"
@close="showMoneyWalletCharge = false"
>
<a-form :model="formCharge" ref="formChargeRef" autocomplete="off" class="space-y-1">
<a-form-item name="talabBedehi">
<a-checkbox v-model:checked="formCharge.talabBedehi">طلب/بدهی</a-checkbox>
</a-form-item>
<a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
<BasicInput addon-before="ریال" v-model:value="formCharge.value" type="price" />
<div v-show="formCharge.value > 10">
معادل {{ usePrice(formCharge.value / 10, true, 'تومان') }}
</div>
</a-form-item>
<a-form-item label="علت شارژ " name="note" :rules="inputRules()">
<BasicInput v-model:value="formCharge.note" />
</a-form-item>
</a-form>
</BasicActionSheet>
<BasicModal
v-else
v-model:visible="showMoneyWalletCharge"
width="20rem"
title="شارژ کیف پول ریالی"
@@ -233,13 +263,40 @@
معادل {{ usePrice(formCharge.value / 10, true, 'تومان') }}
</div>
</a-form-item>
<a-form-item label="علت شارژ " name="value" :rules="inputRules()">
<a-form-item label="علت شارژ " name="note" :rules="inputRules()">
<BasicInput v-model:value="formCharge.note" />
</a-form-item>
</a-form>
</BasicModal>
<BasicActionSheet
v-if="isMobile"
v-model:visible="showGoldWalletCharge"
title="شارژ کیف پول طلایی"
modal-width="24rem"
:loading="loading"
:show-button="true"
:show-cancel="true"
:show-ok="true"
ok-text="ثبت"
cancel-text="انصراف"
@ok="chargeGoldWallet"
@close="showGoldWalletCharge = false"
>
<a-form :model="formCharge" ref="formChargeRef" autocomplete="off" class="space-y-1">
<a-form-item name="talabBedehi">
<a-checkbox v-model:checked="formCharge.talabBedehi">طلب/بدهی</a-checkbox>
</a-form-item>
<a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
<BasicInput addon-before="گرم" v-model:value="formCharge.value" type="number" />
</a-form-item>
<a-form-item label="علت شارژ " name="note" :rules="inputRules()">
<BasicInput v-model:value="formCharge.note" />
</a-form-item>
</a-form>
</BasicActionSheet>
<BasicModal
v-else
v-model:visible="showGoldWalletCharge"
width="20rem"
title="شارژ کیف پول طلایی"
@@ -254,7 +311,7 @@
<a-form-item label="مقدار شارژ " name="value" :rules="inputRules()">
<BasicInput addon-before="گرم" v-model:value="formCharge.value" type="number" />
</a-form-item>
<a-form-item label="علت شارژ " name="value" :rules="inputRules()">
<a-form-item label="علت شارژ " name="note" :rules="inputRules()">
<BasicInput v-model:value="formCharge.note" />
</a-form-item>
</a-form>