Feat: Slides 4, 8
This commit is contained in:
gold-dev
@@ -101,7 +101,7 @@ onMounted(() => {
|
||||
</router-link>
|
||||
<nav class="nav-menu">
|
||||
<ul>
|
||||
<li><a href="https://www.truckwash.dk/afdelinger/">Kundeoprettelse</a></li>
|
||||
<li><router-link :to="{ name: 'customer-creation' }">Kundeoprettelse</router-link></li>
|
||||
<li><router-link :to="{ name: 'login' }">Kundelogin</router-link></li>
|
||||
<li><router-link :to="{ name: 'about-us' }">Om Os</router-link></li>
|
||||
</ul>
|
||||
|
||||
@@ -157,6 +157,7 @@ import GuestQRNewCustomer from "@/views/guest/qr/GuestQRNewCustomer.vue";
|
||||
import GuestQrNewDriver from "@/views/guest/qr/GuestQRNewDriver.vue";
|
||||
import GuestQRNewDriver from "@/views/guest/qr/GuestQRNewDriver.vue";
|
||||
import GuestQRNewBooking from "@/views/guest/qr/GuestQRNewBooking.vue";
|
||||
import CustomerCreationPage from "@/views/pages/auth/CustomerCreationPage.vue";
|
||||
|
||||
/**
|
||||
* Meta data for routes
|
||||
@@ -179,6 +180,12 @@ export const router = createRouter({
|
||||
component: BookDemoPage,
|
||||
meta: { template: 'with-header' }
|
||||
},
|
||||
{
|
||||
name: 'customer-creation',
|
||||
path: '/customer-creation',
|
||||
component: CustomerCreationPage,
|
||||
meta: { template: 'with-header' }
|
||||
},
|
||||
{
|
||||
name: 'about-us',
|
||||
path: '/about-us',
|
||||
|
||||
@@ -0,0 +1,287 @@
|
||||
<script setup>
|
||||
import {onBeforeUnmount, reactive, ref} from "vue";
|
||||
import { parseError, getError, removeError } from "@/components/request/HandleGlobalError.vue";
|
||||
import axios from "axios";
|
||||
import {API_URL} from "@/config.js";
|
||||
import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
|
||||
|
||||
const driverFormData = reactive({
|
||||
cvr: null,
|
||||
contactEmail: null,
|
||||
contactPhone: null
|
||||
})
|
||||
|
||||
const deliverSuccess = ref(false)
|
||||
let deliverTimeoutId;
|
||||
|
||||
const submitDriver = async () => {
|
||||
removeError('authRegisterCvr')
|
||||
try {
|
||||
await axios.post(API_URL + '/auth/register/cvr', {
|
||||
cvr: driverFormData.cvr,
|
||||
invoiceEmail: driverFormData.contactEmail,
|
||||
contactEmail: driverFormData.contactEmail,
|
||||
contactPhone: driverFormData.contactPhone,
|
||||
companyPhone: driverFormData.contactPhone
|
||||
});
|
||||
|
||||
driverFormData.contactPhone = null;
|
||||
driverFormData.contactEmail = null;
|
||||
driverFormData.cvr = null;
|
||||
|
||||
deliverSuccess.value = true
|
||||
|
||||
deliverTimeoutId = setTimeout(() => {
|
||||
deliverSuccess.value = false
|
||||
}, 3500)
|
||||
|
||||
} catch (error) {
|
||||
parseError(error, 'authRegisterCvr');
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (deliverTimeoutId) clearTimeout(deliverTimeoutId);
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<p class="pre-title">Kundeoprettelse</p>
|
||||
<h1>Opret dig hurtigt som ny kunde eller ny chauffør hos Truck Wash</h1>
|
||||
<p>Opnå række fordele ved at være oprettet som kunde eller chauffør hos Truck Wash</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="truckwash-signup">
|
||||
<div class="wrapper grid">
|
||||
|
||||
<div class="col">
|
||||
<h2 class="title">Opret dig som chauffør</h2>
|
||||
|
||||
<p class="text">
|
||||
Som kunde hos Truck Wash får du adgang til:
|
||||
</p>
|
||||
|
||||
<ul class="list">
|
||||
<li><strong>Vask</strong> – Benyt vores nationale netværk af vaskehaller til konkurrencedygtige priser</li>
|
||||
<li><strong>Kundeportal</strong> – Benyt kundeportalen til at tilføje køretøjer, booke vaske, downloade fakturaer, vaskecertifikater og information for historiske vaske</li>
|
||||
<li><strong>Kredit konto</strong> – Få en kredit konto med månedlig fakturering</li>
|
||||
</ul>
|
||||
|
||||
<form class="truckwash-form" @submit.prevent="() => {}" method="post">
|
||||
<div class="form-field">
|
||||
<label for="customer_cvr">CVR nummer</label>
|
||||
<input type="text" id="customer_cvr" v-model="driverFormData.cvr" placeholder="12345678">
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="email">Firma email</label>
|
||||
<input type="email" id="email" v-model="driverFormData.contactEmail" name="email">
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="customer_phone">Firma telefon</label>
|
||||
<input type="text" id="customer_phone" v-model="driverFormData.contactPhone" name="phone" placeholder="12345678">
|
||||
</div>
|
||||
|
||||
<p class="help is-danger" v-if="getError('authRegisterCvr')">
|
||||
{{ getError('authRegisterCvr') }}
|
||||
</p>
|
||||
|
||||
<p class="help is-success" v-if="deliverSuccess">
|
||||
Din konto er blevet oprettet. Vi har sendt en email med yderligere information.
|
||||
</p>
|
||||
|
||||
|
||||
<LoadButtonWhileAwait :disabled="!driverFormData.cvr || !driverFormData.contactPhone || !driverFormData.contactEmail" :loadFunction="submitDriver" class="truckwash-submit">Opret konto</LoadButtonWhileAwait>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h2 class="title">Opret dig som chauffør</h2>
|
||||
|
||||
<p class="text">
|
||||
Som chauffør hos Truck Wash får du adgang til:
|
||||
</p>
|
||||
|
||||
<ul class="list">
|
||||
<li><strong>Døgnvask</strong> – vask når det passer dig udenfor bemandet åbningstid</li>
|
||||
<li><strong>Booking</strong> – book vask på tværs af landet</li>
|
||||
<li><strong>Find vaskehaller</strong> – naviger hurtigt og nemt til den nærmeste vaskehal nær dig</li>
|
||||
<li><strong>Loyaltitetspoint</strong> – optjen og brug loyalitetspoint hver gang du vasker hos Truck Wash (tilgængelig fra Maj 2026)</li>
|
||||
</ul>
|
||||
|
||||
<form class="truckwash-form" method="post">
|
||||
<div class="form-field">
|
||||
<label for="driver_cvr">CVR nummer</label>
|
||||
<input type="text" id="driver_cvr" name="cvr" placeholder="12345678">
|
||||
</div>
|
||||
|
||||
<div class="form-field">
|
||||
<label for="driver_phone">Chauffør telefon</label>
|
||||
<input type="text" id="driver_phone" name="phone" placeholder="12345678">
|
||||
</div>
|
||||
|
||||
<LoadButtonWhileAwait :disabled="true" class="truckwash-submit">Opret konto</LoadButtonWhileAwait>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hero-section{
|
||||
background-color: #13324C;
|
||||
padding: 70px 0;
|
||||
}
|
||||
|
||||
.hero-section .pre-title{
|
||||
text-align: center;
|
||||
color: #1584BC;
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
line-height: .8em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.hero-section h1{
|
||||
color: #FFF;
|
||||
font-size: 3.8em;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hero-section p{
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
font-size: 1.2em;
|
||||
font-weight: 400;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.hero-section h1{
|
||||
font-size: 2.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.truckwash-signup {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.truckwash-signup .wrapper.grid {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 48px;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
}
|
||||
|
||||
.truckwash-signup .col {
|
||||
background: #13324C;
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
grid-template-rows: subgrid;
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
.truckwash-signup .title {
|
||||
grid-row: 1;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.truckwash-signup .text {
|
||||
grid-row: 2;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.truckwash-signup .list {
|
||||
grid-row: 3;
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.truckwash-signup .list li {
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.truckwash-signup .list strong {
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.truckwash-signup .truckwash-form {
|
||||
grid-row: 4;
|
||||
border: 1.5px solid #333;
|
||||
padding: 20px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
margin-top: 35px;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.truckwash-signup .form-field {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.truckwash-signup .form-field label{
|
||||
color: #13324C;
|
||||
}
|
||||
|
||||
.truckwash-signup input {
|
||||
height: 44px;
|
||||
padding: 0 12px;
|
||||
border: 1.5px solid #333;
|
||||
border-radius: 8px;
|
||||
margin-top: 4px;
|
||||
color: #13324C;
|
||||
}
|
||||
|
||||
.truckwash-signup .truckwash-submit {
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: #13324C;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.truckwash-signup .wrapper.grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.truckwash-signup .col {
|
||||
padding: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user