WIP MMCM
This commit is contained in:
Jonathan Chevalier
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<h1 class="product_name_area primary_color">Indiquez votre adresse de livraison (domicile, travail...) :</h1>
|
||||
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-text">
|
||||
<i v-if="isSearching" class="fa-solid fa-circle-notch fa-spin fa-fw color-success"></i>
|
||||
@@ -27,6 +26,7 @@
|
||||
<script>
|
||||
import {useMMCMStore} from '../stores/mmcm.js'
|
||||
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const store = useMMCMStore()
|
||||
|
||||
@@ -1,23 +1,4 @@
|
||||
<template>
|
||||
<!--
|
||||
|
||||
<div class="form-register">
|
||||
<div class="steps clearfix"><ul role="tablist"><li role="tab" aria-disabled="false" class="first current" aria-selected="true"><a id="form-total-t-0" href="#form-total-h-0" aria-controls="form-total-p-0"><span class="current-info audible"> </span><div class="title">
|
||||
<span class="step-icon"> <i class="fa-solid fa-user"></i> </span>
|
||||
<span class="step-text">Ordonnance</span>
|
||||
</div></a></li><li role="tab" aria-disabled="false"><a id="form-total-t-1" href="#form-total-h-1" aria-controls="form-total-p-1"><div class="title">
|
||||
<span class="step-icon"><i class="zmdi zmdi-lock"></i></span>
|
||||
<span class="step-text">Livraison</span>
|
||||
</div></a></li><li role="tab" aria-disabled="false"><a id="form-total-t-2" href="#form-total-h-2" aria-controls="form-total-p-2"><div class="title">
|
||||
<span class="step-icon"><i class="zmdi zmdi-card"></i></span>
|
||||
<span class="step-text">Date</span>
|
||||
</div></a></li><li role="tab" aria-disabled="false" class="last"><a id="form-total-t-3" href="#form-total-h-3" aria-controls="form-total-p-3"><div class="title">
|
||||
<span class="step-icon"><i class="zmdi zmdi-receipt"></i></span>
|
||||
<span class="step-text">Confirmation</span>
|
||||
</div></a></li></ul></div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header"><h2>Avec ou sans ordonnance ?</h2></div>
|
||||
@@ -86,593 +67,4 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
|
||||
.form-register {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.form-register .steps {
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
|
||||
.form-register .steps ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding-left: 108px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-register .steps li,
|
||||
.form-register .steps li.current {
|
||||
outline: none;
|
||||
-o-outline: none;
|
||||
-ms-outline: none;
|
||||
-moz-outline: none;
|
||||
-webkit-outline: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-register .steps li .current-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-register .steps li a {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
-o-outline: none;
|
||||
-ms-outline: none;
|
||||
-moz-outline: none;
|
||||
-webkit-outline: none;
|
||||
}
|
||||
|
||||
.form-register .steps li a .title span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-register .steps li a .title .step-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
-o-border-radius: 50%;
|
||||
-ms-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
background: #ccc;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
outline: none;
|
||||
-o-outline: none;
|
||||
-ms-outline: none;
|
||||
-moz-outline: none;
|
||||
-webkit-outline: none;
|
||||
color: #fff;
|
||||
font-size: 25.6px;
|
||||
margin-right: 108px;
|
||||
}
|
||||
|
||||
.form-register .steps li a .step-icon i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-o-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.form-register .steps li .step-icon::before,
|
||||
.form-register .steps li:last-child .step-icon::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: #e5e5e5;
|
||||
width: 108px;
|
||||
height: 2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.form-register .steps li .step-icon::before {
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
.form-register .steps li:last-child .step-icon::after {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.form-register .steps li.current a .step-icon,
|
||||
.form-register .steps li.current a:active .step-icon,
|
||||
.form-register .steps li.done a .step-icon,
|
||||
.form-register .steps li.done a:active .step-icon {
|
||||
background: #24c1e8;
|
||||
}
|
||||
|
||||
.form-register .steps .current .step-icon::before,
|
||||
.form-register .steps .current:last-child .step-icon::after,
|
||||
.form-register .steps .done .step-icon::before {
|
||||
background: #24c1e8;
|
||||
}
|
||||
|
||||
.form-register .steps li a .step-text {
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
padding: 14px 0 8px;
|
||||
}
|
||||
|
||||
.form-register .steps .current .step-text,
|
||||
.form-register .steps .done .step-text {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-register .content h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-register .content .inner h3 {
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
padding-bottom: 18px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.form-register .content .form-total-p-1 .inner h3 {
|
||||
padding-bottom: 13px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.form-register .content #form-total-p-3 .inner h3 {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-register .content .inner h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.inner .form-row {
|
||||
display: flex;
|
||||
margin: 0 -12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-row.form-row-date.form-row-date-1 {
|
||||
margin-top: 50px;
|
||||
margin-bottom: -18px;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder {
|
||||
width: 50%;
|
||||
padding: 0 12px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder.form-holder-1 {
|
||||
width: 84.1%;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder.form-holder-2 {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inner .form-row .form-row-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder .label {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
transform-origin: 0 0;
|
||||
transition: all .2s ease;
|
||||
-webkit-transition: all .2s ease;
|
||||
-moz-transition: all .2s ease;
|
||||
-o-transition: all .2s ease;
|
||||
-ms-transition: all .2s ease;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder .border {
|
||||
position: absolute;
|
||||
bottom: 31px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #6bc734;
|
||||
transform: scaleX(0);
|
||||
-webkit-transform: scaleX(0);
|
||||
-moz-transform: scaleX(0);
|
||||
-o-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform-origin: 0 0;
|
||||
transition: all .15s ease;
|
||||
-webkit-transition: all .15s ease;
|
||||
-moz-transition: all .15s ease;
|
||||
-o-transition: all .15s ease;
|
||||
-ms-transition: all .15s ease;
|
||||
}
|
||||
|
||||
.inner .form-row #radio {
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
margin: 8px 12px;
|
||||
}
|
||||
|
||||
.inner .form-row #checkbox {
|
||||
margin: 10px 0 28px 11px;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder label.special-label {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-top: 25px;
|
||||
padding-right: 20px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder label.pay-1-label,
|
||||
.inner .form-row .form-holder label.pay-2-label {
|
||||
width: 190px;
|
||||
height: 95px;
|
||||
border: 1px solid #e5e5e5;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder label.pay-1-label img,
|
||||
.inner .form-row .form-holder label.pay-2-label img {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.inner .form-row.form-row-date .form-holder select {
|
||||
float: left;
|
||||
width: 19%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder input,
|
||||
.inner .form-row .form-holder select {
|
||||
width: 100%;
|
||||
padding: 13px 10px 8px;
|
||||
border: none;
|
||||
border-bottom: 2px solid #e5e5e5;
|
||||
appearance: unset;
|
||||
-moz-appearance: unset;
|
||||
-webkit-appearance: unset;
|
||||
-o-appearance: unset;
|
||||
-ms-appearance: unset;
|
||||
outline: none;
|
||||
-moz-outline: none;
|
||||
-webkit-outline: none;
|
||||
-o-outline: none;
|
||||
-ms-outline: none;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder input {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder input#pay-1,
|
||||
.inner .form-row .form-holder input#pay-2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder select {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
background: #fff url('../images/wizard_v4_icon.png') no-repeat scroll;
|
||||
background-position: right 0 center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder select:focus {
|
||||
border-bottom: 2px solid #24c1e8;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder .form-control:focus,
|
||||
.inner .form-row .form-holder .form-control:valid {
|
||||
border-bottom: 2px solid #24c1e8;
|
||||
margin-top: 21px;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder .form-control:focus + .label,
|
||||
.inner .form-row .form-holder .form-control:valid + .label {
|
||||
transform: translateY(-23px) scale(1);
|
||||
-o-transform: translateY(-23px) scale(1);
|
||||
-ms-transform: translateY(-23px) scale(1);
|
||||
-moz-transform: translateY(-23px) scale(1);
|
||||
-webkit-transform: translateY(-23px) scale(1);
|
||||
color: #24c1e8;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder .form-control:focus + .border,
|
||||
.inner .form-row .form-holder .form-control:valid + .border {
|
||||
transform: scaleX(1);
|
||||
-o-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
-moz-transform: scaleX(1);
|
||||
-webkit-transform: scaleX(1);
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder input#pay-1:checked + label,
|
||||
.inner .form-row .form-holder input#pay-2:checked + label {
|
||||
border: none;
|
||||
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
|
||||
-o-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
|
||||
-ms-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
|
||||
-webkit-box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.inner .form-row.table-responsive {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
margin: 27px 0 -25px;
|
||||
}
|
||||
|
||||
.inner .table-responsive .table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inner .table-responsive tbody {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.inner .table-responsive tr.space-row > td,
|
||||
.inner .table-responsive tr.space-row > th {
|
||||
padding: 17px 20px 14px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.inner .table-responsive tr.space-row:last-child > td,
|
||||
.inner .table-responsive tr.space-row:last-child > th {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.inner .table-responsive tbody th {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.inner .table-responsive tbody td {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.actions ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
padding: 0 20px;
|
||||
margin: 30px 0;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
-o-justify-content: space-between;
|
||||
-ms-justify-content: space-between;
|
||||
-moz-justify-content: space-between;
|
||||
-webkit-justify-content: space-between;
|
||||
}
|
||||
|
||||
.actions ul li.disabled {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.actions ul li {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
display: inline-flex;
|
||||
height: 45px;
|
||||
width: 140px;
|
||||
justify-content: center;
|
||||
-o-justify-content: center;
|
||||
-ms-justify-content: center;
|
||||
-moz-justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
-o-align-items: center;
|
||||
-ms-align-items: center;
|
||||
-moz-align-items: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
background: #24c1e8;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.actions ul li:hover {
|
||||
background: #1d97b5;
|
||||
}
|
||||
|
||||
.actions ul li:first-child {
|
||||
background: #999;
|
||||
margin-left: 60.9%;
|
||||
}
|
||||
|
||||
.actions ul li:first-child:hover {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.actions ul li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 13px 34px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media screen and (max-width: 1199px) {
|
||||
.wizard-v3-content {
|
||||
margin: 180px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.form-register .steps ul {
|
||||
padding-left: 0;
|
||||
justify-content: space-around;
|
||||
-o-justify-content: space-around;
|
||||
-ms-justify-content: space-around;
|
||||
-moz-justify-content: space-around;
|
||||
-webkit-justify-content: space-around;
|
||||
}
|
||||
|
||||
.form-register .steps li a .title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-register .steps li a .title .step-icon,
|
||||
.form-register .steps li a .title .step-icon {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-register .steps li a .title .step-icon::before,
|
||||
.form-register .steps li:last-child a .title .step-icon::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.actions ul li:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.inner .form-row.form-row-date .form-holder select {
|
||||
width: 17.5%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder label.pay-1-label,
|
||||
.inner .form-row .form-holder label.pay-2-label {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
.wizard-v3-content {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.wizard-form .wizard-header {
|
||||
padding: 40px 20px 20px 20px;
|
||||
}
|
||||
|
||||
.inner .form-row {
|
||||
flex-direction: column;
|
||||
-o-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
-moz-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder.form-holder-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.inner .form-row .form-holder label.special-label {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.inner .form-row.form-row-date .form-holder select {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-register .steps li a .title .step-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.form-register .steps li a .step-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.form-register .content {
|
||||
padding: 35px 30px 60px;
|
||||
}
|
||||
|
||||
.inner .form-row #radio {
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.inner .form-row #checkbox {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.actions ul li {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.actions ul li a {
|
||||
padding: 15px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -29,8 +29,8 @@ export default {
|
||||
methods: {
|
||||
addToCart: async function (idProduct) {
|
||||
const urlApi = '/php/api/v3/mmcm.php?EXEC=addToCart&ID_PRODUCT=' + this.store.idProduct
|
||||
+'&with_prescription='+this.store.widthPrescription
|
||||
+'&date_delivery='+this.store.dateDelivery
|
||||
+ '&with_prescription=' + this.store.widthPrescription
|
||||
+ '&date_delivery=' + this.store.dateDelivery
|
||||
;
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user