|
|
@@ -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>
|