541 lines
12 KiB
Vue
541 lines
12 KiB
Vue
<template>
|
|
<div
|
|
v-if="store.visible"
|
|
class="sms-credit"
|
|
:class="[`sms-credit--${variant}`, { 'sms-credit--label-hint': showLabelHint && isCompactDesktop }]"
|
|
>
|
|
<div class="sms-credit__info">
|
|
<Icon icon="vuesax-linear:sms" :size="15" class="sms-credit__icon" />
|
|
<span v-if="!isCompactDesktop" class="sms-credit__label">اعتبار پیامک:</span>
|
|
|
|
<Transition name="sms-credit-swap" mode="out-in">
|
|
<span
|
|
v-if="isCompactDesktop && showLabelHint"
|
|
key="hint"
|
|
class="sms-credit__label-hint"
|
|
>
|
|
اعتبار پیامک:
|
|
</span>
|
|
<span v-else key="amount" class="sms-credit__amount" :class="amountClass">
|
|
{{ formattedBalance }}
|
|
<span class="sms-credit__unit">ریال</span>
|
|
</span>
|
|
</Transition>
|
|
</div>
|
|
|
|
<button type="button" class="sms-credit__charge" @click="modalVisible = true">
|
|
<Icon icon="vuesax-linear:wallet-add" :size="15" />
|
|
<span class="sms-credit__charge-label">شارژ</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, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useClipboard, useWindowSize } 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'
|
|
|
|
const props = withDefaults(defineProps<{ variant?: 'desktop' | 'mobile' }>(), {
|
|
variant: 'desktop'
|
|
})
|
|
|
|
const COMPACT_BREAKPOINT = 1280
|
|
const LABEL_HINT_INTERVAL_MS = 30_000
|
|
const LABEL_HINT_FADE_MS = 500
|
|
const LABEL_HINT_HOLD_MS = 4_000
|
|
const LABEL_HINT_DURATION_MS = LABEL_HINT_FADE_MS + LABEL_HINT_HOLD_MS
|
|
|
|
const store = useSmsWalletStore()
|
|
const route = useRoute()
|
|
const modalVisible = ref(false)
|
|
const showLabelHint = ref(false)
|
|
const { width: windowWidth } = useWindowSize()
|
|
|
|
const { copy, isSupported } = useClipboard()
|
|
|
|
let hintIntervalId: ReturnType<typeof setInterval> | undefined
|
|
let hintEndTimeoutId: ReturnType<typeof setTimeout> | undefined
|
|
|
|
const isCompactDesktop = computed(
|
|
() => props.variant === 'desktop' && windowWidth.value < COMPACT_BREAKPOINT
|
|
)
|
|
|
|
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()
|
|
)
|
|
|
|
function stopLabelHintTimers() {
|
|
if (hintIntervalId) {
|
|
clearInterval(hintIntervalId)
|
|
hintIntervalId = undefined
|
|
}
|
|
if (hintEndTimeoutId) {
|
|
clearTimeout(hintEndTimeoutId)
|
|
hintEndTimeoutId = undefined
|
|
}
|
|
showLabelHint.value = false
|
|
}
|
|
|
|
function playLabelHint() {
|
|
if (!isCompactDesktop.value || modalVisible.value || showLabelHint.value) return
|
|
|
|
showLabelHint.value = true
|
|
hintEndTimeoutId = setTimeout(() => {
|
|
showLabelHint.value = false
|
|
hintEndTimeoutId = undefined
|
|
}, LABEL_HINT_DURATION_MS)
|
|
}
|
|
|
|
function startLabelHintLoop() {
|
|
stopLabelHintTimers()
|
|
if (!isCompactDesktop.value) return
|
|
|
|
hintIntervalId = setInterval(playLabelHint, LABEL_HINT_INTERVAL_MS)
|
|
}
|
|
|
|
watch(isCompactDesktop, (enabled) => {
|
|
if (enabled) {
|
|
startLabelHintLoop()
|
|
return
|
|
}
|
|
stopLabelHintTimers()
|
|
})
|
|
|
|
watch(modalVisible, (open) => {
|
|
if (open) showLabelHint.value = false
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (isCompactDesktop.value) startLabelHintLoop()
|
|
})
|
|
|
|
onUnmounted(stopLabelHintTimers)
|
|
</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: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
column-gap: 0.5rem;
|
|
padding: 0.375rem 0.5rem;
|
|
line-height: 1.2;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sms-credit--desktop .sms-credit__info {
|
|
justify-self: start;
|
|
align-self: center;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.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;
|
|
min-height: 1.2em;
|
|
}
|
|
|
|
.sms-credit__label {
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
color: var(--admin-text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sms-credit__icon {
|
|
flex-shrink: 0;
|
|
color: var(--admin-text-secondary);
|
|
}
|
|
|
|
.sms-credit-swap-enter-active,
|
|
.sms-credit-swap-leave-active {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.sms-credit-swap-enter-from,
|
|
.sms-credit-swap-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sms-credit__label-hint {
|
|
font-size: 0.8125rem;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
animation: sms-credit-label-blink 1.15s ease-in-out infinite;
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
@keyframes sms-credit-label-blink {
|
|
0%,
|
|
100% {
|
|
color: #047857;
|
|
}
|
|
|
|
50% {
|
|
color: #b91c1c;
|
|
}
|
|
}
|
|
|
|
.sms-credit__amount {
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
letter-spacing: -0.01em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
@media (max-width: 1279px) {
|
|
.sms-credit--desktop {
|
|
column-gap: 0.35rem;
|
|
padding: 0.3rem 0.45rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1279px) and (prefers-reduced-motion: reduce) {
|
|
.sms-credit-swap-enter-active,
|
|
.sms-credit-swap-leave-active {
|
|
transition-duration: 0.15s;
|
|
}
|
|
|
|
.sms-credit__label-hint {
|
|
animation: none;
|
|
animation-delay: 0;
|
|
color: var(--admin-text-secondary);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1099px) {
|
|
.sms-credit--desktop .sms-credit__charge-label {
|
|
display: none;
|
|
}
|
|
|
|
.sms-credit--desktop .sms-credit__charge {
|
|
padding: 0.25rem;
|
|
gap: 0;
|
|
}
|
|
|
|
.sms-credit--desktop .sms-credit__amount {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.sms-credit--desktop .sms-credit__label-hint {
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.sms-credit__label-hint {
|
|
animation-name: sms-credit-label-blink-dark;
|
|
}
|
|
|
|
@keyframes sms-credit-label-blink-dark {
|
|
0%,
|
|
100% {
|
|
color: #6ee7b7;
|
|
}
|
|
|
|
50% {
|
|
color: #fda4af;
|
|
}
|
|
}
|
|
}
|
|
</style>
|