Parcourir la source

feat: :sparkles: criação do agendamento sobre medida

foram criadas  as rotas sobmedida, adicionando as funções de click para redirecioar a pagina e foi iniciada a pagina de criação do agendamento sobre medida

fase:dev | origin:escopo
kayo henrique il y a 3 semaines
Parent
commit
fe8673046a

+ 1 - 1
src/components/dashboard/DashboardScrollAreaSchedules.vue

@@ -22,7 +22,7 @@ import Banner2 from 'src/assets/banner_2.svg';
 const router = useRouter();
 
 const cards = [
-  { id: 1, image: Banner1, alt: 'Diária sob medida', route: null },
+  { id: 1, image: Banner1, alt: 'Diária sob medida', route: 'SobMedidaPage' },
   { id: 2, image: Banner2, alt: 'Escolha profissionais', route: 'SearchPage' },
 ];
 </script>

+ 154 - 0
src/pages/schedules/SobMedidaPage.vue

@@ -0,0 +1,154 @@
+<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+
+<template>
+  <q-page class="bg-grey-2 q-pa-md">
+
+    <!-- Título -->
+    <div class="text-center text-primary text-subtitle1 text-weight-bold q-mb-md">
+      Serviço Sob Medida
+    </div>
+
+    <!-- Card Pedido -->
+    <q-card flat bordered class="rounded-card q-pa-md q-mb-md">
+
+      <div class="text-primary text-subtitle2 text-weight-bold q-mb-md">
+        Seu pedido
+      </div>
+
+      <!-- Tipo -->
+      <div class="text-primary text-caption text-weight-bold q-mb-sm">
+        Tipo de serviço
+      </div>
+
+      <div class="row q-col-gutter-sm q-mb-md">
+        <div
+          v-for="tipo in tiposServico"
+          :key="tipo"
+          class="col-6"
+        >
+          <q-radio
+            v-model="tipoSelecionado"
+            :val="tipo"
+            :label="tipo"
+            color="purple"
+          />
+        </div>
+      </div>
+
+      <!-- Especialidades -->
+      <div class="text-primary text-caption text-weight-bold q-mb-sm">
+        Especialidade preferencial?
+      </div>
+
+      <div class="row q-col-gutter-sm q-mb-md">
+        <div
+          v-for="item in especialidades"
+          :key="item"
+          class="col-6"
+        >
+          <q-checkbox
+            v-model="especialidadesSelecionadas"
+            :val="item"
+            :label="item"
+            color="purple"
+          />
+        </div>
+      </div>
+
+      <!-- Descrição -->
+      <div class="text-primary text-caption text-weight-bold q-mb-sm">
+        Descreva detalhes do pedido
+      </div>
+
+      <q-input
+        v-model="descricao"
+        type="textarea"
+        outlined
+        autogrow
+        placeholder="Olá, desejo profissional dedicado que irá fazer..."
+      />
+
+    </q-card>
+
+    <!-- Faixa de preço -->
+    <div class="text-primary text-subtitle2 text-weight-bold q-mb-sm">
+      Faixa de preço
+    </div>
+
+    <q-card flat bordered class="rounded-card q-pa-md q-mb-md">
+
+      <q-range
+        v-model="faixaPreco"
+        :min="80"
+        :max="300"
+        color="purple"
+        label
+      />
+
+      <div class="text-caption text-grey-7 text-center q-mt-sm">
+        Selecione a faixa de preço integral para receber propostas de diaristas.
+      </div>
+
+    </q-card>
+
+    <!-- Data -->
+    <div class="text-primary text-subtitle2 text-weight-bold q-mb-sm">
+      Data e hora
+    </div>
+
+    <q-card flat bordered class="rounded-card q-pa-md q-mb-md">
+      <q-date v-model="dataSelecionada" minimal color="purple" />
+    </q-card>
+
+    <!-- Botão -->
+    <q-btn
+      label="Continuar"
+      color="primary"
+      class="full-width q-mt-md"
+      unelevated
+      size="lg"
+      @click="continuar"
+    />
+
+  </q-page>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const tiposServico = [
+  'Limpeza',
+  'Pré-mudança',
+  'Evento',
+  'Pós-obra'
+]
+
+const especialidades = [
+  'Passar roupa',
+  'Limpar vidros',
+  'Lavar roupa',
+  'Cozinhar'
+]
+
+const tipoSelecionado = ref('Residencial')
+const especialidadesSelecionadas = ref([])
+const descricao = ref('')
+const faixaPreco = ref({ min: 120, max: 180 })
+const dataSelecionada = ref('2025/08/17')
+
+function continuar() {
+  console.log({
+    tipo: tipoSelecionado.value,
+    especialidades: especialidadesSelecionadas.value,
+    descricao: descricao.value,
+    preco: faixaPreco.value,
+    data: dataSelecionada.value
+  })
+}
+</script>
+
+<style scoped>
+.rounded-card {
+  border-radius: 20px;
+}
+</style>

+ 21 - 0
src/router/routes/appointments.route.js

@@ -0,0 +1,21 @@
+export default [
+  {
+    path: "sob-medida",
+    name: "SobMedidaPage",
+    component: () => import("src/pages/schedules/SobMedidaPage.vue"),
+    meta: {
+      title: "Serviço Sob Medida",
+      requireAuth: true,
+      breadcrumbs: [
+        {
+          name: "DashboardPage",
+          title: "ui.navigation.dashboard",
+        },
+        {
+          name: "SobMedidaPage",
+          title: "Serviço Sob Medida",
+        },
+      ],
+    },
+  },
+];