add header show SMSpanel
This commit is contained in:
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<div v-if="store.visible" class="sms-credit" :class="`sms-credit--${variant}`">
|
||||
<div class="sms-credit__info">
|
||||
<span class="sms-credit__label">اعتبار پیامک:</span>
|
||||
<span class="sms-credit__amount" :class="amountClass">
|
||||
{{ formattedBalance }}
|
||||
<span class="sms-credit__unit">ریال</span>
|
||||
</span>
|
||||
</div>
|
||||
<button type="button" class="sms-credit__charge" @click="modalVisible = true">
|
||||
<Icon icon="vuesax-linear:wallet-add" :size="15" />
|
||||
<span>شارژ</span>
|
||||
</button>
|
||||
|
||||
<BasicModal
|
||||
v-model:visible="modalVisible"
|
||||
width="30rem"
|
||||
title="شارژ اعتبار پیامک"
|
||||
:custom-footer="true"
|
||||
@close="modalVisible = false"
|
||||
>
|
||||
<div class="sms-charge-modal">
|
||||
<p class="sms-charge-modal__note">{{ depositNote }}</p>
|
||||
|
||||
<div class="sms-charge-modal__rows">
|
||||
<div class="sms-charge-row">
|
||||
<span class="sms-charge-row__label">شماره کارت</span>
|
||||
<div class="sms-charge-row__value-box">
|
||||
<span class="sms-charge-row__value" dir="ltr">{{ deposit.card_number || '—' }}</span>
|
||||
<button
|
||||
v-if="deposit.card_number"
|
||||
type="button"
|
||||
class="sms-charge-row__copy"
|
||||
aria-label="کپی شماره کارت"
|
||||
@click="copyValue(deposit.card_number, 'شماره کارت')"
|
||||
>
|
||||
<Icon icon="vuesax-linear:copy" :size="16" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sms-charge-row">
|
||||
<span class="sms-charge-row__label">شماره شبا</span>
|
||||
<div class="sms-charge-row__value-box">
|
||||
<span class="sms-charge-row__value" dir="ltr">{{ deposit.sheba || '—' }}</span>
|
||||
<button
|
||||
v-if="deposit.sheba"
|
||||
type="button"
|
||||
class="sms-charge-row__copy"
|
||||
aria-label="کپی شماره شبا"
|
||||
@click="copyValue(deposit.sheba, 'شماره شبا')"
|
||||
>
|
||||
<Icon icon="vuesax-linear:copy" :size="16" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sms-charge-row sms-charge-row--holder">
|
||||
<span class="sms-charge-row__label">به نام</span>
|
||||
<span class="sms-charge-row__holder">{{ deposit.account_holder || '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<BaseButton @click="modalVisible = false">بستن</BaseButton>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import { message } from 'ant-design-vue'
|
||||
import BasicModal from '@/components/BasicModal.vue'
|
||||
import BaseButton from '@core/components/BaseButton'
|
||||
import Icon from '@core/components/BaseIcon/src/Icon.vue'
|
||||
import { useSmsWalletStore } from '@/store/smsWalletStore'
|
||||
|
||||
withDefaults(defineProps<{ variant?: 'desktop' | 'mobile' }>(), {
|
||||
variant: 'desktop'
|
||||
})
|
||||
|
||||
const store = useSmsWalletStore()
|
||||
const route = useRoute()
|
||||
const modalVisible = ref(false)
|
||||
|
||||
const { copy, isSupported } = useClipboard()
|
||||
|
||||
const deposit = computed(() => store.deposit)
|
||||
const depositNote = computed(
|
||||
() =>
|
||||
store.deposit.note ||
|
||||
'لطفا مبلغ مورد نظر خود جهت شارژ سامانه پیامکی را به شماره کارت یا حساب زیر واریز نمایید و تصویر فیش پرداختی را برای پشتیبانی بفرستید.'
|
||||
)
|
||||
|
||||
const formattedBalance = computed(() => Number(store.balance || 0).toLocaleString('fa-IR'))
|
||||
|
||||
const amountClass = computed(() => {
|
||||
if (store.balance < 0) return 'sms-credit__amount--danger'
|
||||
if (store.balance <= 0) return 'sms-credit__amount--warn'
|
||||
return 'sms-credit__amount--ok'
|
||||
})
|
||||
|
||||
async function copyValue(value: string, label: string) {
|
||||
const clean = String(value ?? '').replace(/\s+/g, '')
|
||||
if (!clean) return
|
||||
|
||||
try {
|
||||
if (isSupported.value) {
|
||||
await copy(clean)
|
||||
} else {
|
||||
const el = document.createElement('textarea')
|
||||
el.value = clean
|
||||
el.style.position = 'fixed'
|
||||
el.style.opacity = '0'
|
||||
document.body.appendChild(el)
|
||||
el.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(el)
|
||||
}
|
||||
message.success(`${label} کپی شد`)
|
||||
} catch {
|
||||
message.error('کپی انجام نشد')
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => store.visible,
|
||||
(isVisible) => {
|
||||
if (isVisible) store.refresh()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => store.refresh()
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.sms-credit {
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: 0.75rem;
|
||||
background: var(--admin-bg-muted);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sms-credit--desktop {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
column-gap: 0.5rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.sms-credit--desktop .sms-credit__info {
|
||||
justify-self: start;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sms-credit--desktop .sms-credit__charge {
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
padding-block: 0.25rem;
|
||||
}
|
||||
|
||||
.sms-credit__info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
line-height: 1.2;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sms-credit__label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
color: var(--admin-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sms-credit__amount {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.sms-credit__unit {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.sms-credit__amount--ok {
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.sms-credit__amount--warn {
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.sms-credit__amount--danger {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.sms-credit__charge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border: none;
|
||||
border-radius: 0.55rem;
|
||||
background: var(--admin-gold-light);
|
||||
color: var(--admin-menu-selected-text, #fff);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sms-credit__charge:hover {
|
||||
background: var(--admin-gold-hover);
|
||||
}
|
||||
|
||||
.sms-credit--mobile {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
column-gap: 0.4rem;
|
||||
border-radius: 0.6rem;
|
||||
padding: 0.3rem 0.45rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.sms-credit--mobile .sms-credit__info {
|
||||
justify-self: start;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sms-credit--mobile .sms-credit__charge {
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
padding-block: 0.2rem;
|
||||
}
|
||||
|
||||
.sms-credit--mobile .sms-credit__label {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.sms-credit--mobile .sms-credit__amount {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.sms-credit--mobile .sms-credit__charge {
|
||||
padding: 0.18rem 0.45rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* modal content */
|
||||
.sms-charge-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sms-charge-modal__note {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.9;
|
||||
color: var(--admin-text-secondary);
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.sms-charge-modal__rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.sms-charge-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.sms-charge-row__label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--admin-text-secondary);
|
||||
}
|
||||
|
||||
.sms-charge-row__value-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: 0.6rem;
|
||||
background: var(--admin-bg-muted);
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.sms-charge-row__value {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--admin-text);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.sms-charge-row__copy {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.25rem;
|
||||
border: none;
|
||||
border-radius: 0.4rem;
|
||||
background: transparent;
|
||||
color: var(--admin-gold-light);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.sms-charge-row__copy:hover {
|
||||
background: var(--admin-bg-hover);
|
||||
}
|
||||
|
||||
.sms-charge-row--holder {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.sms-charge-row__holder {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
html.is-dark {
|
||||
.sms-credit__amount--ok {
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
.sms-credit__amount--warn {
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
.sms-credit__amount--danger {
|
||||
color: #fda4af;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user