|
|
@@ -149,6 +149,25 @@
|
|
|
<div class="range-helper">
|
|
|
{{ $t('sob_medida.price_range_helper') }}
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="price-preview-grid">
|
|
|
+ <div
|
|
|
+ v-for="preview in pricePreviews"
|
|
|
+ :key="preview.periodType"
|
|
|
+ class="price-preview-col"
|
|
|
+ >
|
|
|
+ <div class="price-preview-label font12 fontbold">
|
|
|
+ {{ $t('sob_medida.price_preview_label', { hours: preview.periodType }) }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="price-preview-box font12">
|
|
|
+ {{ $t('sob_medida.price_preview_value', {
|
|
|
+ min: formatPriceAmount(preview.min),
|
|
|
+ max: formatPriceAmount(preview.max)
|
|
|
+ }) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</q-card>
|
|
|
|
|
|
<div class="font16 fontbold section-title gradient-diarista">
|
|
|
@@ -183,7 +202,7 @@ import { getPublicServiceTypes } from 'src/api/serviceTypes'
|
|
|
import { getPublicSpecialties } from 'src/api/specialties'
|
|
|
import {useI18n} from 'vue-i18n'
|
|
|
import { userStore } from 'src/stores/user'
|
|
|
-import { calculateDailyPrices } from 'src/helpers/utils'
|
|
|
+import { calculateDailyPrices, chooseprice } from 'src/helpers/utils'
|
|
|
|
|
|
const $q = useQuasar()
|
|
|
const router = useRouter()
|
|
|
@@ -220,6 +239,22 @@ const providerPrices = computed(() =>
|
|
|
calculateDailyPrices(priceRange.value.max * quantity.value)
|
|
|
)
|
|
|
|
|
|
+const PREVIEW_PERIOD_TYPES = Object.freeze(['6', '4', '2'])
|
|
|
+
|
|
|
+const pricePreviews = computed(() =>
|
|
|
+ PREVIEW_PERIOD_TYPES.map((periodType) => ({
|
|
|
+ periodType,
|
|
|
+ min: chooseprice(periodType, priceRange.value.min),
|
|
|
+ max: chooseprice(periodType, priceRange.value.max)
|
|
|
+ }))
|
|
|
+)
|
|
|
+
|
|
|
+const formatPriceAmount = (value) =>
|
|
|
+ Number(value ?? 0).toLocaleString('pt-BR', {
|
|
|
+ minimumFractionDigits: 2,
|
|
|
+ maximumFractionDigits: 2
|
|
|
+ })
|
|
|
+
|
|
|
const minPosition = computed(() =>
|
|
|
((priceRange.value.min - PRICE_LIMITS.min) /
|
|
|
(PRICE_LIMITS.max - PRICE_LIMITS.min)) * 100
|
|
|
@@ -511,6 +546,32 @@ onMounted(async () => {
|
|
|
color: #6b6b6b;
|
|
|
}
|
|
|
|
|
|
+.price-preview-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.price-preview-col {
|
|
|
+ min-width: 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.price-preview-label {
|
|
|
+ margin-bottom: 6px;
|
|
|
+ color: #4a4a4a;
|
|
|
+}
|
|
|
+
|
|
|
+.price-preview-box {
|
|
|
+ padding: 8px 4px;
|
|
|
+ border: 1px solid #e2dcf0;
|
|
|
+ border-radius: 12px;
|
|
|
+ background: #fff;
|
|
|
+ line-height: 1.35;
|
|
|
+ color: #7a5cff;
|
|
|
+}
|
|
|
+
|
|
|
.price-pin,
|
|
|
.price-range :deep(.q-slider__thumb) {
|
|
|
transition:
|