- Parte 3 : Viaggi
- Chat
This commit is contained in:
Surya Paolo
463
src/modules/viaggi/pages/Helppage.vue
Normal file
463
src/modules/viaggi/pages/Helppage.vue
Normal file
@@ -0,0 +1,463 @@
|
||||
<!-- HelpPage.vue -->
|
||||
<template>
|
||||
<q-page class="help-page">
|
||||
<!-- Header -->
|
||||
<div class="help-page__header">
|
||||
<q-btn flat round icon="arrow_back" color="white" @click="goBack" />
|
||||
<div>
|
||||
<h1>Come Funziona</h1>
|
||||
<p>Guida ai Viaggi Solidali</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="help-page__hero">
|
||||
<div class="help-page__hero-icon">
|
||||
<q-icon name="directions_car" size="48px" color="white" />
|
||||
</div>
|
||||
<h2>Viaggia insieme, risparmia insieme</h2>
|
||||
<p>Condividi i tuoi viaggi e aiuta la community a muoversi in modo sostenibile</p>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="help-page__quick-actions">
|
||||
<div class="help-page__action" @click="router.push('/viaggi/offri')">
|
||||
<div class="help-page__action-icon help-page__action-icon--offer">
|
||||
<q-icon name="directions_car" size="28px" />
|
||||
</div>
|
||||
<span>Offri passaggio</span>
|
||||
</div>
|
||||
<div class="help-page__action" @click="router.push('/viaggi/cerca')">
|
||||
<div class="help-page__action-icon help-page__action-icon--search">
|
||||
<q-icon name="search" size="28px" />
|
||||
</div>
|
||||
<span>Cerca passaggio</span>
|
||||
</div>
|
||||
<div class="help-page__action" @click="router.push('/viaggi/richiedi')">
|
||||
<div class="help-page__action-icon help-page__action-icon--request">
|
||||
<q-icon name="hail" size="28px" />
|
||||
</div>
|
||||
<span>Richiedi passaggio</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="help-page__content">
|
||||
<!-- How It Works Section -->
|
||||
<div class="help-page__section">
|
||||
<h3 class="help-page__section-title">
|
||||
<q-icon name="play_circle" />
|
||||
Come iniziare
|
||||
</h3>
|
||||
|
||||
<div class="help-page__steps">
|
||||
<div class="help-page__step">
|
||||
<div class="help-page__step-number">1</div>
|
||||
<div class="help-page__step-content">
|
||||
<h4>Completa il tuo profilo</h4>
|
||||
<p>Aggiungi una foto, una descrizione e le tue preferenze di viaggio.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-page__step">
|
||||
<div class="help-page__step-number">2</div>
|
||||
<div class="help-page__step-content">
|
||||
<h4>Registra i tuoi veicoli</h4>
|
||||
<p>Se vuoi offrire passaggi, aggiungi i dati del tuo veicolo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-page__step">
|
||||
<div class="help-page__step-number">3</div>
|
||||
<div class="help-page__step-content">
|
||||
<h4>Pubblica o cerca</h4>
|
||||
<p>Pubblica un viaggio o cerca tra quelli disponibili.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-page__step">
|
||||
<div class="help-page__step-number">4</div>
|
||||
<div class="help-page__step-content">
|
||||
<h4>Contatta e parti!</h4>
|
||||
<p>Mettiti d'accordo via chat, conferma e parti insieme!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- For Drivers Section -->
|
||||
<div class="help-page__section">
|
||||
<h3 class="help-page__section-title">
|
||||
<q-icon name="directions_car" />
|
||||
Per chi offre passaggi
|
||||
</h3>
|
||||
|
||||
<q-expansion-item v-for="(item, index) in driverFAQs" :key="`driver-${index}`" :label="item.question" expand-separator class="help-page__faq-item">
|
||||
<q-card>
|
||||
<q-card-section>{{ item.answer }}</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
|
||||
<!-- For Passengers Section -->
|
||||
<div class="help-page__section">
|
||||
<h3 class="help-page__section-title">
|
||||
<q-icon name="hail" />
|
||||
Per chi cerca passaggi
|
||||
</h3>
|
||||
|
||||
<q-expansion-item v-for="(item, index) in passengerFAQs" :key="`passenger-${index}`" :label="item.question" expand-separator class="help-page__faq-item">
|
||||
<q-card>
|
||||
<q-card-section>{{ item.answer }}</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
|
||||
<!-- Safety Section -->
|
||||
<div class="help-page__section help-page__section--safety">
|
||||
<h3 class="help-page__section-title">
|
||||
<q-icon name="verified_user" />
|
||||
Sicurezza e fiducia
|
||||
</h3>
|
||||
|
||||
<div class="help-page__safety-grid">
|
||||
<div class="help-page__safety-item">
|
||||
<q-icon name="star" size="32px" color="amber" />
|
||||
<h4>Sistema di recensioni</h4>
|
||||
<p>Ogni utente può lasciare e ricevere feedback dopo i viaggi</p>
|
||||
</div>
|
||||
<div class="help-page__safety-item">
|
||||
<q-icon name="verified" size="32px" color="info" />
|
||||
<h4>Profili verificati</h4>
|
||||
<p>Gli utenti possono verificare email, telefono e documenti</p>
|
||||
</div>
|
||||
<div class="help-page__safety-item">
|
||||
<q-icon name="chat" size="32px" color="positive" />
|
||||
<h4>Chat integrata</h4>
|
||||
<p>Comunica direttamente con gli altri utenti in sicurezza</p>
|
||||
</div>
|
||||
<div class="help-page__safety-item">
|
||||
<q-icon name="groups" size="32px" color="primary" />
|
||||
<h4>Community solidale</h4>
|
||||
<p>Una rete di persone che condividono valori e risorse</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tips Section -->
|
||||
<div class="help-page__section">
|
||||
<h3 class="help-page__section-title">
|
||||
<q-icon name="lightbulb" />
|
||||
Consigli utili
|
||||
</h3>
|
||||
|
||||
<div class="help-page__tips">
|
||||
<div class="help-page__tip">
|
||||
<q-icon name="photo_camera" color="primary" />
|
||||
<span>Aggiungi una foto profilo chiara e riconoscibile</span>
|
||||
</div>
|
||||
<div class="help-page__tip">
|
||||
<q-icon name="schedule" color="primary" />
|
||||
<span>Sii puntuale agli appuntamenti</span>
|
||||
</div>
|
||||
<div class="help-page__tip">
|
||||
<q-icon name="message" color="primary" />
|
||||
<span>Rispondi rapidamente ai messaggi</span>
|
||||
</div>
|
||||
<div class="help-page__tip">
|
||||
<q-icon name="location_on" color="primary" />
|
||||
<span>Indica punti di incontro facili da trovare</span>
|
||||
</div>
|
||||
<div class="help-page__tip">
|
||||
<q-icon name="star_rate" color="primary" />
|
||||
<span>Lascia sempre un feedback dopo il viaggio</span>
|
||||
</div>
|
||||
<div class="help-page__tip">
|
||||
<q-icon name="eco" color="primary" />
|
||||
<span>Rispetta l'ambiente: meno auto, meno emissioni!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<div class="help-page__section help-page__section--contact">
|
||||
<h3 class="help-page__section-title">
|
||||
<q-icon name="support_agent" />
|
||||
Hai bisogno di aiuto?
|
||||
</h3>
|
||||
|
||||
<p>Se hai domande o problemi, il nostro team è sempre pronto ad aiutarti.</p>
|
||||
|
||||
<div class="help-page__contact-actions">
|
||||
<q-btn color="primary" icon="email" label="Scrivi al supporto" unelevated @click="contactSupport" />
|
||||
<q-btn color="grey-7" icon="forum" label="Vai al forum" outline @click="openForum" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'HelpPage',
|
||||
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
|
||||
const driverFAQs = ref([
|
||||
{
|
||||
question: 'Come pubblico un viaggio?',
|
||||
answer: 'Dalla homepage, clicca su "Offri passaggio". Inserisci partenza, destinazione, data e ora, seleziona il veicolo e il numero di posti disponibili. Aggiungi eventuali note e pubblica!'
|
||||
},
|
||||
{
|
||||
question: 'Posso modificare un viaggio pubblicato?',
|
||||
answer: 'Sì, puoi modificare i dettagli del viaggio finché non ci sono prenotazioni confermate. Vai nei tuoi viaggi e clicca su "Modifica".'
|
||||
},
|
||||
{
|
||||
question: 'Come gestisco le richieste di passaggio?',
|
||||
answer: 'Riceverai una notifica per ogni richiesta. Puoi accettare o rifiutare dalla sezione "Richieste". Ti consigliamo di rispondere entro 24 ore.'
|
||||
},
|
||||
{
|
||||
question: 'Cosa succede se devo cancellare un viaggio?',
|
||||
answer: 'Puoi cancellare un viaggio dalla sezione "I miei viaggi". I passeggeri verranno avvisati automaticamente. Cancellazioni frequenti potrebbero influire sulla tua reputazione.'
|
||||
},
|
||||
{
|
||||
question: 'Devo registrare il mio veicolo?',
|
||||
answer: 'Sì, per offrire passaggi devi registrare almeno un veicolo con i dati richiesti (marca, modello, targa, posti). Questo aiuta i passeggeri a riconoscerti.'
|
||||
}
|
||||
]);
|
||||
|
||||
const passengerFAQs = ref([
|
||||
{
|
||||
question: 'Come cerco un passaggio?',
|
||||
answer: 'Dalla homepage, clicca su "Cerca passaggio". Inserisci partenza, destinazione e data. Puoi filtrare i risultati per orario, prezzo e preferenze.'
|
||||
},
|
||||
{
|
||||
question: 'Come prenoto un passaggio?',
|
||||
answer: 'Trova un viaggio che ti interessa, clicca su "Richiedi passaggio" e invia un messaggio al conducente. Attendi la conferma prima di considerare il viaggio prenotato.'
|
||||
},
|
||||
{
|
||||
question: 'Come pago il viaggio?',
|
||||
answer: 'Il contributo spese viene concordato direttamente tra conducente e passeggero. Solitamente si paga in contanti all\'arrivo o come concordato in chat.'
|
||||
},
|
||||
{
|
||||
question: 'Cosa faccio se il conducente non si presenta?',
|
||||
answer: 'Prova prima a contattarlo via chat o telefono. Se non riesci a raggiungerlo, segnala il problema al supporto e lascia un feedback negativo.'
|
||||
},
|
||||
{
|
||||
question: 'Posso cancellare una prenotazione?',
|
||||
answer: 'Sì, puoi cancellare dalla sezione "Le mie richieste". Ti chiediamo di avvisare il prima possibile per permettere al conducente di trovare altri passeggeri.'
|
||||
}
|
||||
]);
|
||||
|
||||
const goBack = () => router.back();
|
||||
|
||||
const contactSupport = () => {
|
||||
$q.dialog({
|
||||
title: 'Contatta il supporto',
|
||||
message: 'Invia una email a supporto@tuosito.it oppure usa il modulo di contatto.',
|
||||
ok: 'OK'
|
||||
});
|
||||
};
|
||||
|
||||
const openForum = () => {
|
||||
$q.dialog({
|
||||
title: 'Forum Community',
|
||||
message: 'Il forum sarà presto disponibile!',
|
||||
ok: 'OK'
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
router,
|
||||
driverFAQs,
|
||||
passengerFAQs,
|
||||
goBack,
|
||||
contactSupport,
|
||||
openForum
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.help-page {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
min-height: 100vh;
|
||||
padding-bottom: 40px;
|
||||
|
||||
&__header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
h1 { font-size: 20px; font-weight: 600; margin: 0; }
|
||||
p { margin: 4px 0 0; opacity: 0.85; font-size: 14px; }
|
||||
}
|
||||
|
||||
&__hero {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
|
||||
h2 { font-size: 22px; font-weight: 600; margin: 16px 0 8px; }
|
||||
p { opacity: 0.9; margin: 0; font-size: 14px; }
|
||||
}
|
||||
|
||||
&__hero-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__quick-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
span { font-size: 12px; color: #555; font-weight: 500; }
|
||||
}
|
||||
|
||||
&__action-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:hover { transform: translateY(-2px); }
|
||||
|
||||
&--offer { background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%); }
|
||||
&--search { background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%); }
|
||||
&--request { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); }
|
||||
}
|
||||
|
||||
&__content { padding: 16px; }
|
||||
|
||||
&__section {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&--safety { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); }
|
||||
&--contact { text-align: center; p { color: #666; margin-bottom: 20px; } }
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 16px;
|
||||
.q-icon { color: #667eea; }
|
||||
}
|
||||
|
||||
&__steps { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
&__step {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__step-number {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__step-content {
|
||||
h4 { margin: 0 0 4px; font-size: 15px; color: #333; }
|
||||
p { margin: 0; font-size: 13px; color: #666; line-height: 1.5; }
|
||||
}
|
||||
|
||||
&__faq-item {
|
||||
margin-bottom: 8px;
|
||||
:deep(.q-expansion-item__container) { border-radius: 8px; overflow: hidden; }
|
||||
:deep(.q-item__label) { font-weight: 500; }
|
||||
}
|
||||
|
||||
&__safety-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__safety-item {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 12px;
|
||||
|
||||
h4 { margin: 12px 0 4px; font-size: 14px; color: #333; }
|
||||
p { margin: 0; font-size: 12px; color: #666; }
|
||||
}
|
||||
|
||||
&__tips { display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
&__tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
|
||||
span { font-size: 13px; color: #555; }
|
||||
}
|
||||
|
||||
&__contact-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.body--dark {
|
||||
.help-page {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16162a 100%);
|
||||
&__section { background: #1e1e30; &--safety { background: rgba(76, 175, 80, 0.1); } }
|
||||
&__section-title { color: #fff; }
|
||||
&__step-content { h4 { color: #fff; } p { color: #aaa; } }
|
||||
&__safety-item { background: rgba(255, 255, 255, 0.05); h4 { color: #fff; } }
|
||||
&__tip { background: rgba(255, 255, 255, 0.05); span { color: #ccc; } }
|
||||
&__action span { color: #ccc; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user