feat: add gold day calculator and polish desktop UI
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<a-modal
|
||||
v-model:visible="localValue"
|
||||
:title="props.title"
|
||||
:title="slots.title ? undefined : props.title"
|
||||
centered
|
||||
@ok="emits('ok')"
|
||||
@cancel="emits('close')"
|
||||
@@ -14,6 +14,9 @@
|
||||
:closable="props.closable"
|
||||
:wrapClassName="props.wrapClassName"
|
||||
>
|
||||
<template v-if="slots.title" #title>
|
||||
<slot name="title" />
|
||||
</template>
|
||||
<template v-if="props.customFooter" #footer> <slot name="footer" /></template>
|
||||
<a-spin :spinning="props.loading">
|
||||
<div class="overflow-y-auto py-2 px-1 relative max-h-[83vh]" id="body">
|
||||
@@ -25,8 +28,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
//define emit
|
||||
import { computed } from 'vue'
|
||||
import { computed, useSlots } from 'vue'
|
||||
|
||||
const emits = defineEmits(['ok', 'close', 'update:visible'])
|
||||
|
||||
@@ -53,6 +55,8 @@ const props = withDefaults(defineProps<Prop>(), {
|
||||
closable: true
|
||||
})
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
const localValue = computed({
|
||||
get() {
|
||||
return props.visible
|
||||
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-model:visible="visible"
|
||||
width="400px"
|
||||
destroy-on-close
|
||||
custom-footer
|
||||
wrap-class-name="gold-day-calc-modal"
|
||||
>
|
||||
<template #title>
|
||||
<div class="gold-day-calc-modal__title">
|
||||
<BasicIcon icon="vuesax-linear:chart-2" size="20" class="gold-day-calc-modal__title-icon" />
|
||||
<span>محاسبهگر طلای شما</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="gold-day-calc" dir="rtl">
|
||||
<BasicInput
|
||||
v-model:value="weight"
|
||||
title="وزن طلا (گرم)"
|
||||
type="tel"
|
||||
place-holder="مثلاً ۱۰.۵"
|
||||
inputmode="decimal"
|
||||
/>
|
||||
|
||||
<BasicInput
|
||||
:value="unitPriceInput"
|
||||
title="قیمت روز طلا"
|
||||
type="tel"
|
||||
disabled
|
||||
addon-before="ریال"
|
||||
place-holder="قیمت صفحه اصلی"
|
||||
/>
|
||||
|
||||
<BasicInput
|
||||
v-model:value="feePercent"
|
||||
title="اجرت ساخت (%)"
|
||||
type="tel"
|
||||
place-holder="مثلاً ۷"
|
||||
inputmode="decimal"
|
||||
/>
|
||||
|
||||
<BasicInput
|
||||
v-model:value="taxPercent"
|
||||
title="سود و مالیات (%)"
|
||||
type="tel"
|
||||
place-holder="مثلاً ۹"
|
||||
inputmode="decimal"
|
||||
/>
|
||||
|
||||
<div class="gold-day-calc__result rounded-xl border border-solid border-gray-200 bg-gray-50 p-3">
|
||||
<div class="text-xs text-gray-500 mb-1">کل نهایی</div>
|
||||
<div class="gold-day-calc__total text-lg font-bold text-primary">
|
||||
<span class="gold-day-calc__num">{{ formattedTotal }}</span>
|
||||
<span class="text-sm font-medium text-gray-600">ریال</span>
|
||||
</div>
|
||||
<div class="mt-2 flex flex-col gap-1 text-xs text-gray-600">
|
||||
<div class="flex justify-between gap-2">
|
||||
<span>هزینه طلا</span>
|
||||
<span class="gold-day-calc__num">{{ formatRial(breakdown.goldCost) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between gap-2">
|
||||
<span>اجرت</span>
|
||||
<span class="gold-day-calc__num">{{ formatRial(breakdown.feeCost) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between gap-2">
|
||||
<span>سود و مالیات</span>
|
||||
<span class="gold-day-calc__num">{{ formatRial(breakdown.taxCost) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<BasicButton type="primary" class="!w-full" size="middle" @click="recalculate">
|
||||
محاسبه مجدد
|
||||
</BasicButton>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import BasicModal from '@/components/BasicPacks/BasicModal.vue'
|
||||
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
||||
import { goldDayCalculatorVisible } from '@/composables/useGoldDayCalculator'
|
||||
import {
|
||||
getLastPrices,
|
||||
getTradeBuyPrice,
|
||||
lastPrice,
|
||||
startLastPricePolling,
|
||||
stopLastPricePolling,
|
||||
} from '@/utils/price'
|
||||
import { getPriceDisplayState, NO_QUOTE_MESSAGE } from '@/utils/storeHours'
|
||||
import { usePriceWithoutType } from '@/utils/usePrice'
|
||||
import { persianToEnglishDigits } from '@/utils/persianDigits'
|
||||
|
||||
const visible = goldDayCalculatorVisible
|
||||
|
||||
const weight = ref<string | number>('')
|
||||
const feePercent = ref<string | number>('')
|
||||
const taxPercent = ref<string | number>('')
|
||||
const tick = ref(0)
|
||||
|
||||
function parseNum(raw: string | number | undefined): number {
|
||||
const s = persianToEnglishDigits(String(raw ?? ''))
|
||||
.replace(/,/g, '')
|
||||
.replace(/[^\d.]/g, '')
|
||||
const n = Number.parseFloat(s)
|
||||
return Number.isFinite(n) ? n : 0
|
||||
}
|
||||
|
||||
const liveUnitPrice = computed(() => {
|
||||
void tick.value
|
||||
if (getPriceDisplayState() !== 'open') return 0
|
||||
return getTradeBuyPrice(lastPrice.value) || 0
|
||||
})
|
||||
|
||||
const unitPriceInput = computed(() => {
|
||||
void tick.value
|
||||
const state = getPriceDisplayState()
|
||||
if (state === 'closed') return 'فروشگاه بسته است'
|
||||
if (state === 'no_quote') return NO_QUOTE_MESSAGE
|
||||
const p = liveUnitPrice.value
|
||||
return p > 0 ? usePriceWithoutType(p) : ''
|
||||
})
|
||||
|
||||
const breakdown = computed(() => {
|
||||
void tick.value
|
||||
const w = parseNum(weight.value)
|
||||
const fee = parseNum(feePercent.value)
|
||||
const tax = parseNum(taxPercent.value)
|
||||
const unit = liveUnitPrice.value
|
||||
const goldCost = w * unit
|
||||
const feeCost = goldCost * (fee / 100)
|
||||
const taxCost = (goldCost + feeCost) * (tax / 100)
|
||||
const total = goldCost + feeCost + taxCost
|
||||
return { goldCost, feeCost, taxCost, total }
|
||||
})
|
||||
|
||||
const formattedTotal = computed(() => formatRial(breakdown.value.total))
|
||||
|
||||
function formatRial(n: number) {
|
||||
if (!Number.isFinite(n) || n <= 0) return '۰'
|
||||
return usePriceWithoutType(Math.round(n))
|
||||
}
|
||||
|
||||
function recalculate() {
|
||||
tick.value += 1
|
||||
void getLastPrices()
|
||||
}
|
||||
|
||||
watch(visible, async (open) => {
|
||||
if (open) {
|
||||
startLastPricePolling()
|
||||
await getLastPrices()
|
||||
tick.value += 1
|
||||
} else {
|
||||
stopLastPricePolling()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gold-day-calc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* فقط متن لیبل RTL — گروه اینپوت LTR بماند تا addon ریال نشکند */
|
||||
.gold-day-calc :deep(.ant-input-group) {
|
||||
direction: ltr;
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gold-day-calc :deep(.ant-input-group > .ant-input) {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gold-day-calc :deep(.ant-input:not(.ant-input-group *)) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gold-day-calc__result {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gold-day-calc__total {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
justify-content: flex-start;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.gold-day-calc__num {
|
||||
direction: ltr;
|
||||
unicode-bidi: isolate;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.gold-day-calc-modal {
|
||||
.ant-modal-content {
|
||||
direction: rtl;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: min(88dvh, 640px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
flex-shrink: 0;
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
/* ضربدر فیزیکی چپ — پدینگ راست کم تا عنوان نزدیک لبه راست بماند */
|
||||
padding-left: 2.75rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.ant-modal-title {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gold-day-calc-modal__title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
direction: rtl;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gold-day-calc-modal__title-icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--App-secondary-color, #c9a062);
|
||||
}
|
||||
|
||||
/* ضربدر سمت چپ — عنوان سمت راست */
|
||||
.ant-modal-close {
|
||||
inset-inline-start: 0 !important;
|
||||
inset-inline-end: auto !important;
|
||||
right: auto !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding-bottom: 0.25rem;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
#body {
|
||||
max-height: min(48dvh, 360px) !important;
|
||||
overflow-y: auto !important;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
flex-shrink: 0;
|
||||
margin-top: 0;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767.98px) {
|
||||
.gold-day-calc-modal {
|
||||
.ant-modal {
|
||||
max-width: calc(100vw - 1.5rem);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
max-height: min(86dvh, 100%);
|
||||
}
|
||||
|
||||
/* بین هدر و دکمه — ارتفاع کمتر تا اسکرول بخورد */
|
||||
#body {
|
||||
max-height: min(42dvh, 280px) !important;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.gold-day-calc-modal #body {
|
||||
max-height: min(38dvh, 240px) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user