|
|
@@ -1,183 +1,169 @@
|
|
|
<template>
|
|
|
- <q-page v-if="details" class="details-page">
|
|
|
-
|
|
|
+ <q-page class="details-page">
|
|
|
<!-- HEADER -->
|
|
|
<div class="page-header">
|
|
|
- <q-btn flat round dense icon="chevron_left" class="back-btn" @click="router.back()" />
|
|
|
- <div class="page-title">
|
|
|
- {{ $t('provider.dashboard.opportunity_details.title') }}
|
|
|
- </div>
|
|
|
+ <q-btn
|
|
|
+ flat
|
|
|
+ round
|
|
|
+ dense
|
|
|
+ icon="chevron_left"
|
|
|
+ class="back-btn"
|
|
|
+ @click="router.back()"
|
|
|
+ />
|
|
|
+ <div class="page-title">{{ details.title }}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- CLIENTE -->
|
|
|
<div class="client-section">
|
|
|
- <img :src="details.avatar" class="client-avatar" />
|
|
|
-
|
|
|
- <div class="client-name">
|
|
|
- {{ details.schedule?.client_name }}
|
|
|
- <span class="rating"> {{ details.schedule?.rating }}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="client-price">{{ $t('provider.dashboard.opportunities.currency', { value: chooseprice(details.schedule?.period_type) }) }}</div>
|
|
|
-
|
|
|
- <div class="date"> {{ formatDate(details.schedule?.date) }}</div>
|
|
|
- <div class="hour">{{ formatHour(details.schedule?.start_time ) }} {{ formatHour(details.schedule?.end_time ) }}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- ENDEREÇO -->
|
|
|
- <div class="address">
|
|
|
- <q-icon name="place" size="16px" />
|
|
|
- {{ details.schedule?.address?.district }}
|
|
|
+ <img :src="AvatarMock" class="client-avatar" />
|
|
|
+ <div class="client-name">{{ details.clientName }}</div>
|
|
|
+ <div class="client-price">{{ details.price }}</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="distance">
|
|
|
- {{ $t('provider.dashboard.opportunity_details.distance_text', { distance: details.schedule?.distance }) }}
|
|
|
+ <!-- INFOS -->
|
|
|
+ <div class="details-info">
|
|
|
+ <div>{{ details.date }}</div>
|
|
|
+ <div>{{ details.hour }}</div>
|
|
|
+ <div>{{ details.address }}</div>
|
|
|
+ <div>{{ details.distance }}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- TAGS -->
|
|
|
- <div v-if="details.tags?.length" class="tags-row">
|
|
|
- <q-chip v-for="(tag, index) in details.tags" :key="index" outline class="chip">
|
|
|
- {{ tag }}
|
|
|
+ <div class="tags-row">
|
|
|
+ <q-chip dense color="grey-3">
|
|
|
+ {{ details.tags[0] }}
|
|
|
+ </q-chip>
|
|
|
+
|
|
|
+ <q-chip dense color="grey-3">
|
|
|
+ {{ details.tags[1] }}
|
|
|
</q-chip>
|
|
|
</div>
|
|
|
|
|
|
- <!-- INFO -->
|
|
|
- <div class="service-type">
|
|
|
- {{ $t('provider.dashboard.opportunity_details.sob_medida') }}
|
|
|
- <span>
|
|
|
- {{ $t('provider.dashboard.opportunity_details.sob_medida_highlight') }}
|
|
|
- </span>
|
|
|
- <br />
|
|
|
- {{ $t('provider.dashboard.opportunity_details.para') }}
|
|
|
- <strong class="highlight-service">
|
|
|
- {{ details.service_type_name }}
|
|
|
- </strong>
|
|
|
-</div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <div class="address-type">
|
|
|
- <span class="chip-type">
|
|
|
- {{ (details.address_type) }}
|
|
|
- </span>
|
|
|
- <span v-if="details.offers_meal" class="chip-type">
|
|
|
- {{ $t('provider.dashboard.opportunity_details.offers_meal') }}
|
|
|
- </span>
|
|
|
-</div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <div v-if="details.description" class="service-type gradient-diarista">
|
|
|
- {{ $t('provider.dashboard.opportunity_details.info_title') }}
|
|
|
- </div>
|
|
|
<!-- DESCRIÇÃO -->
|
|
|
<div class="description-box">
|
|
|
{{ details.description }}
|
|
|
</div>
|
|
|
|
|
|
<!-- BOTÃO -->
|
|
|
- <q-btn unelevated rounded no-caps class="accept-btn" :label="$t('provider.dashboard.opportunity_details.button_accept')" @click="goToProposalFlow" />
|
|
|
+ <q-btn
|
|
|
+ unelevated
|
|
|
+ rounded
|
|
|
+ no-caps
|
|
|
+ color="secondary"
|
|
|
+ :label="details.buttonLabel"
|
|
|
+ class="full-width q-mt-md"
|
|
|
+ @click="goToProposalFlow"
|
|
|
+ />
|
|
|
|
|
|
<!-- ALERTA -->
|
|
|
- <div class="alert-box">
|
|
|
- <q-icon name="warning" size="18px" class="alert-icon" />
|
|
|
- <span class="alert-text">
|
|
|
- {{ $t('provider.dashboard.opportunity_details.alert_text') }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
-
|
|
|
+ <q-card flat class="bottom-alert">
|
|
|
+ {{ details.alertText }}
|
|
|
+ </q-card>
|
|
|
</q-page>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
-import { userStore } from 'src/stores/user'
|
|
|
-import { getOpportunityById, proposalOpportunity } from 'src/api/opportunities'
|
|
|
|
|
|
+import AvatarMock from 'src/assets/foto_diarista_login.svg'
|
|
|
+import { getOpportunityById } from 'src/api/opportunities'
|
|
|
|
|
|
+// router
|
|
|
const router = useRouter()
|
|
|
const route = useRoute()
|
|
|
|
|
|
-const user = userStore()
|
|
|
+// state
|
|
|
const details = ref(null)
|
|
|
-const loading = ref(true)
|
|
|
-
|
|
|
-const chooseprice = (periodType) => {
|
|
|
- switch (periodType) {
|
|
|
- case "8":
|
|
|
- return user.user.provider_daily_price_8h
|
|
|
- case "6":
|
|
|
- return user.user.provider_daily_price_6h
|
|
|
- case "4":
|
|
|
- return user.user.provider_daily_price_4h
|
|
|
- case "2":
|
|
|
- return user.user.provider_daily_price_2h
|
|
|
- default:
|
|
|
- return 0
|
|
|
- }
|
|
|
-}
|
|
|
+const loading = ref(false)
|
|
|
|
|
|
-// formatando a data
|
|
|
-const formatDate = (date) => {
|
|
|
- if (!date) return ''
|
|
|
+// params
|
|
|
+const opportunityId = route.params.id
|
|
|
|
|
|
- const [day, month, year] = date.split('/')
|
|
|
+// helpers
|
|
|
+const formatHour = (time) =>
|
|
|
+ time ? time.slice(0, 5).replace(':', 'h') : ''
|
|
|
|
|
|
- const parsedDate = new Date(`${year}-${month}-${day}`)
|
|
|
+// normalize (PADRÃO EMPRESA)
|
|
|
+const normalizeDetails = (item) => ({
|
|
|
+ title: 'Detalhes do serviço',
|
|
|
|
|
|
- const formatted = parsedDate.toLocaleDateString('pt-BR', {
|
|
|
- weekday: 'long',
|
|
|
- day: '2-digit',
|
|
|
- month: '2-digit'
|
|
|
- })
|
|
|
+ avatar: item.client?.user?.photo || AvatarMock,
|
|
|
|
|
|
- return formatted.charAt(0).toUpperCase() + formatted.slice(1)
|
|
|
-}
|
|
|
+ clientName:
|
|
|
+ item.client?.user?.name || 'Cliente',
|
|
|
|
|
|
-// formatando hora para exibir só HH:mm
|
|
|
-const formatHour = (time) => {
|
|
|
- if (!time) return ''
|
|
|
- return time.slice(0, 5)
|
|
|
-}
|
|
|
+ price: `R$${Number(
|
|
|
+ item.custom_schedule?.max_price || 0
|
|
|
+ ).toFixed(2)}`,
|
|
|
+
|
|
|
+ date: new Date(
|
|
|
+ item.custom_schedule?.created_at || item.created_at
|
|
|
+ ).toLocaleDateString('pt-BR'),
|
|
|
+
|
|
|
+ hour: `Das ${formatHour(item.start_time)} às ${formatHour(item.end_time)}`,
|
|
|
+
|
|
|
+ address:
|
|
|
+ item.address?.address || 'Endereço não informado',
|
|
|
+
|
|
|
+ distance: '0 km',
|
|
|
+
|
|
|
+ tags: [
|
|
|
+ item.custom_schedule?.service_type?.description,
|
|
|
+ item.custom_schedule?.offers_meal
|
|
|
+ ? 'Refeição no local'
|
|
|
+ : null
|
|
|
+ ].filter(Boolean),
|
|
|
+
|
|
|
+ description:
|
|
|
+ item.custom_schedule?.description || '',
|
|
|
+
|
|
|
+ buttonLabel: 'Quero atender',
|
|
|
+
|
|
|
+ alertText:
|
|
|
+ 'Se seu pedido for aceito pelo cliente você receberá um aviso confirmando o agendamento e aparecerá nos seus próximos serviços.'
|
|
|
+})
|
|
|
+
|
|
|
+// load
|
|
|
+const loadDetails = async () => {
|
|
|
+ loading.value = true
|
|
|
|
|
|
-onMounted(async () => {
|
|
|
try {
|
|
|
- const id = route.params.id
|
|
|
- const response = await getOpportunityById(id)
|
|
|
-
|
|
|
- if (response) {
|
|
|
- details.value = response
|
|
|
- } else {
|
|
|
- console.warn('Nenhum dado retornado')
|
|
|
- }
|
|
|
+ const response = await getOpportunityById(opportunityId)
|
|
|
+
|
|
|
+ console.log('DETAILS RESPONSE:', response)
|
|
|
+
|
|
|
+ details.value = normalizeDetails(response)
|
|
|
} catch (error) {
|
|
|
console.error('Erro ao carregar detalhes:', error)
|
|
|
+ details.value = null
|
|
|
} finally {
|
|
|
loading.value = false
|
|
|
}
|
|
|
-})
|
|
|
-
|
|
|
-const goToProposalFlow = async () => {
|
|
|
+}
|
|
|
|
|
|
- await proposalOpportunity(details.value.schedule_id, user.user.provider.id)
|
|
|
- router.push({ name: 'DashboardPage' })
|
|
|
+// actions
|
|
|
+const goToProposalFlow = () => {
|
|
|
+ console.log('Ir para proposta', details.value)
|
|
|
}
|
|
|
+
|
|
|
+// lifecycle
|
|
|
+onMounted(loadDetails)
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.details-page {
|
|
|
padding: 16px;
|
|
|
- background: #f4f5f7;
|
|
|
+ background: #f7f7fb;
|
|
|
min-height: 100vh;
|
|
|
}
|
|
|
|
|
|
-/* HEADER */
|
|
|
.page-header {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
- margin-bottom: 16px;
|
|
|
+ margin-bottom: 24px;
|
|
|
}
|
|
|
|
|
|
.back-btn {
|
|
|
@@ -187,152 +173,108 @@ const goToProposalFlow = async () => {
|
|
|
}
|
|
|
|
|
|
.page-title {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
color: #7c5cff;
|
|
|
}
|
|
|
|
|
|
-/* CLIENTE */
|
|
|
.client-section {
|
|
|
text-align: center;
|
|
|
+ margin-top: 8px;
|
|
|
}
|
|
|
|
|
|
.client-avatar {
|
|
|
- width: 88px;
|
|
|
- height: 88px;
|
|
|
+ width: 84px;
|
|
|
+ height: 84px;
|
|
|
border-radius: 50%;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
|
|
|
.client-name {
|
|
|
- margin-top: 6px;
|
|
|
- font-size: 14px;
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
-.rating {
|
|
|
- color: #ffb800;
|
|
|
- font-size: 12px;
|
|
|
- margin-left: 4px;
|
|
|
-}
|
|
|
-
|
|
|
.client-price {
|
|
|
margin-top: 8px;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 700;
|
|
|
color: #7c5cff;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
|
|
|
-/* DATA */
|
|
|
-.date {
|
|
|
- margin-top: 6px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- color: #555;
|
|
|
+.details-info {
|
|
|
+ margin-top: 12px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.6;
|
|
|
+ color: #666;
|
|
|
}
|
|
|
|
|
|
-.hour {
|
|
|
+.distance-info {
|
|
|
+ margin-top: 12px;
|
|
|
+ text-align: center;
|
|
|
font-size: 12px;
|
|
|
- color: #777;
|
|
|
-}
|
|
|
-
|
|
|
-.highlight-service{
|
|
|
- color: #7c5cff;
|
|
|
- font-weight: 600;
|
|
|
+ color: #999;
|
|
|
}
|
|
|
|
|
|
-/* ENDEREÇO */
|
|
|
-.address {
|
|
|
- margin-top: 12px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- gap: 4px;
|
|
|
- color: #7c5cff;
|
|
|
+.service-highlight {
|
|
|
+ margin-top: 16px;
|
|
|
+ text-align: center;
|
|
|
font-size: 13px;
|
|
|
- font-weight: 600;
|
|
|
+ color: #666;
|
|
|
}
|
|
|
|
|
|
-.distance {
|
|
|
- text-align: center;
|
|
|
- font-size: 11px;
|
|
|
- color: #999;
|
|
|
- margin-top: 4px;
|
|
|
+.highlight-text {
|
|
|
+ color: #7c5cff;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
|
|
|
-/* ADDRESS TYPE (CHIPS) */
|
|
|
-.address-type {
|
|
|
+.tags-row {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- gap: 10px;
|
|
|
- margin-top: 10px;
|
|
|
+ gap: 8px;
|
|
|
+ margin: 18px 0;
|
|
|
}
|
|
|
|
|
|
-.chip-type {
|
|
|
- border: 1.5px solid #7c5cff;
|
|
|
+.tags-row .q-chip {
|
|
|
+ border: 1px solid #7c5cff;
|
|
|
color: #7c5cff;
|
|
|
- padding: 6px 14px;
|
|
|
- border-radius: 999px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
background: white;
|
|
|
- text-transform: lowercase;
|
|
|
-}
|
|
|
-
|
|
|
-/* TEXTO SOB MEDIDA */
|
|
|
-.service-type {
|
|
|
- text-align: center;
|
|
|
font-size: 12px;
|
|
|
- margin-top: 12px;
|
|
|
- color: #666;
|
|
|
}
|
|
|
|
|
|
-.service-type span {
|
|
|
- color: #7c5cff;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
-/* INFO */
|
|
|
.info-title {
|
|
|
text-align: center;
|
|
|
- font-weight: 700;
|
|
|
color: #7c5cff;
|
|
|
- margin-top: 14px;
|
|
|
- font-size: 13px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 12px;
|
|
|
}
|
|
|
|
|
|
-/* DESCRIÇÃO */
|
|
|
.description-box {
|
|
|
text-align: center;
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.6;
|
|
|
color: #666;
|
|
|
- margin: 10px 0 20px;
|
|
|
- line-height: 1.4;
|
|
|
}
|
|
|
|
|
|
-/* BOTÃO */
|
|
|
-.accept-btn {
|
|
|
- width: 100%;
|
|
|
+.full-width {
|
|
|
+ margin-top: 20px;
|
|
|
height: 48px;
|
|
|
- border-radius: 25px;
|
|
|
- background: linear-gradient(90deg, #7c5cff, #9f7aea);
|
|
|
- color: white;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 16px;
|
|
|
+ background: #8f6dfc !important;
|
|
|
}
|
|
|
|
|
|
-/* ALERTA */
|
|
|
-.alert-box {
|
|
|
- margin-top: 12px;
|
|
|
- background: #e9f0ff;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 12px;
|
|
|
- font-size: 11px;
|
|
|
- text-align: center;
|
|
|
+.bottom-alert {
|
|
|
+ margin-top: 18px;
|
|
|
+ padding: 14px;
|
|
|
+ border-radius: 14px;
|
|
|
+ background: #dfeeff;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.5;
|
|
|
color: #5c6b8a;
|
|
|
- display: flex;
|
|
|
- gap: 6px;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
</style>
|
