WIP MMCM
This commit is contained in:
Jonathan Chevalier
56
package-lock.json
generated
56
package-lock.json
generated
@@ -8,6 +8,9 @@
|
||||
"name": "mmcm",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.2.0",
|
||||
"@vuepic/vue-datepicker": "^3.4.8",
|
||||
"date-fns": "^2.29.3",
|
||||
"pinia": "^2.0.22",
|
||||
"vue": "^3.2.37",
|
||||
"vue-router": "^4.1.5"
|
||||
@@ -66,6 +69,15 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-free": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.0.tgz",
|
||||
"integrity": "sha512-CNR7qRIfCwWHNN7FnKUniva94edPdyQzil/zCwk3v6k4R6rR2Fr8i4s3PM7n/lyfPA6Zfko9z5WDzFxG9SW1uQ==",
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@@ -221,6 +233,20 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz",
|
||||
"integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw=="
|
||||
},
|
||||
"node_modules/@vuepic/vue-datepicker": {
|
||||
"version": "3.4.8",
|
||||
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-3.4.8.tgz",
|
||||
"integrity": "sha512-nbuMA7IgjtT99LqcjSTSUcl7omTZSB+7vYSWQ9gQm31Frm/1wn54fT1Q0HaRD9nHXX982AACbqeND4K80SKONw==",
|
||||
"dependencies": {
|
||||
"date-fns": "^2.29.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": ">=3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||
@@ -441,6 +467,18 @@
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
|
||||
"integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "2.29.3",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
|
||||
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
|
||||
"engines": {
|
||||
"node": ">=0.11"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/date-fns"
|
||||
}
|
||||
},
|
||||
"node_modules/defined": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
|
||||
@@ -1670,6 +1708,11 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"@fortawesome/fontawesome-free": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.0.tgz",
|
||||
"integrity": "sha512-CNR7qRIfCwWHNN7FnKUniva94edPdyQzil/zCwk3v6k4R6rR2Fr8i4s3PM7n/lyfPA6Zfko9z5WDzFxG9SW1uQ=="
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@@ -1807,6 +1850,14 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz",
|
||||
"integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw=="
|
||||
},
|
||||
"@vuepic/vue-datepicker": {
|
||||
"version": "3.4.8",
|
||||
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-3.4.8.tgz",
|
||||
"integrity": "sha512-nbuMA7IgjtT99LqcjSTSUcl7omTZSB+7vYSWQ9gQm31Frm/1wn54fT1Q0HaRD9nHXX982AACbqeND4K80SKONw==",
|
||||
"requires": {
|
||||
"date-fns": "^2.29.2"
|
||||
}
|
||||
},
|
||||
"acorn": {
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||
@@ -1943,6 +1994,11 @@
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
|
||||
"integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
|
||||
},
|
||||
"date-fns": {
|
||||
"version": "2.29.3",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
|
||||
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
|
||||
},
|
||||
"defined": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
|
||||
|
||||
@@ -9,6 +9,9 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.2.0",
|
||||
"@vuepic/vue-datepicker": "^3.4.8",
|
||||
"date-fns": "^2.29.3",
|
||||
"pinia": "^2.0.22",
|
||||
"vue": "^3.2.37",
|
||||
"vue-router": "^4.1.5"
|
||||
|
||||
@@ -2,13 +2,21 @@ import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import './assets/common_css.css'
|
||||
import './assets/bootstrap-para.css'
|
||||
import fontawesome from '@fortawesome/fontawesome-free/css/fontawesome.css'
|
||||
import brands from '@fortawesome/fontawesome-free/css/brands.css'
|
||||
import solid from '@fortawesome/fontawesome-free/css/solid.css'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from "./router/index"
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
import Datepicker from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css'
|
||||
|
||||
const pinia = createPinia()
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router);
|
||||
app.use(pinia)
|
||||
app.component('Datepicker', Datepicker);
|
||||
app.mount("#app");
|
||||
|
||||
@@ -12,9 +12,24 @@ const routes = [
|
||||
component: () => import('/src/views/address-check.vue'),
|
||||
},
|
||||
{
|
||||
path: '/delivery-option',
|
||||
name: 'delivery-option',
|
||||
component: () => import('/src/views/delivery-option.vue'),
|
||||
path: '/delivery-option-step-1',
|
||||
name: 'delivery-option-step-1',
|
||||
component: () => import('/src/views/delivery-option-step-1.vue'),
|
||||
},
|
||||
{
|
||||
path: '/delivery-option-step-2',
|
||||
name: 'delivery-option-step-2',
|
||||
component: () => import('/src/views/delivery-option-step-2.vue'),
|
||||
},
|
||||
{
|
||||
path: '/delivery-option-step-3',
|
||||
name: 'delivery-option-step-3',
|
||||
component: () => import('/src/views/delivery-option-step-3.vue'),
|
||||
},
|
||||
{
|
||||
path: '/delivery-option-summary',
|
||||
name: 'delivery-option-summary',
|
||||
component: () => import('/src/views/delivery-option-summary.vue'),
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {defineStore} from 'pinia'
|
||||
|
||||
export const useMMCMStore = defineStore('counter', {
|
||||
state: () => ({count: 0, name: 'Eduardo', street: '', zipCode: '', city: '', productList : []}),
|
||||
state: () => ({street: '', zipCode: '', city: '', productList: [], withPrescription: null, idProduct: null, dateDelivery:null}),
|
||||
getters: {
|
||||
fullAddress: (state) => state.street + ' ' + state.zipCode + '' + state.city
|
||||
fullAddress: (state) => state.street + ' ' + state.zipCode + '' + state.city,
|
||||
},
|
||||
actions: {
|
||||
setStreet(street) {
|
||||
@@ -15,8 +15,14 @@ export const useMMCMStore = defineStore('counter', {
|
||||
setCity(city) {
|
||||
this.city = city
|
||||
},
|
||||
setProductList(array){
|
||||
setProductList(array) {
|
||||
this.productList = array
|
||||
},
|
||||
setPrescription(bool) {
|
||||
this.withPrescription = bool
|
||||
},
|
||||
setIdProduct(id) {
|
||||
this.idProduct = id
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -71,7 +71,7 @@ export default {
|
||||
console.log(productList);
|
||||
|
||||
this.store.setProductList(productList);
|
||||
this.$router.push({path: '/delivery-option'});
|
||||
this.$router.push({path: '/delivery-option-step-1'});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
592
src/views/delivery-option-step-1.vue
Normal file
592
src/views/delivery-option-step-1.vue
Normal file
@@ -0,0 +1,592 @@
|
||||
<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">Avec ou sans ordonnance ?</div>
|
||||
<div class="card-body row">
|
||||
<div class="col-lg-6">
|
||||
Avec ordonnance (mon pharmacien n'a pas mon ordonnance) :<br/>
|
||||
<ul>
|
||||
<li>1 -Le livreur vient chercher l’original de mon ordonnance, carte vitale et carte mutuelle (si j’en ai
|
||||
une) dans une enveloppe fermée.
|
||||
</li>
|
||||
<li>2 - Le livreur apportera l’enveloppe fermée contenant mes documents de santé directement à mon
|
||||
pharmacien.
|
||||
</li>
|
||||
<li>3 - Mon pharmacien remet mes médicaments et mes documents au livreur.</li>
|
||||
<li> 4 - Le livreur me livre à mon adresse mes médicaments et mes documents originaux.</li>
|
||||
</ul>
|
||||
|
||||
<button class="btn btn-primary" @click="goNextStep(true)">Choisir</button>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
Sans ordonnance (mon pharmacien a déjà mon ordonnance) :<br/>
|
||||
<ul>
|
||||
<li>Le livreur se rend chez mon pharmacien pour la collecte de mes médicaments.</li>
|
||||
<li>Le livreur me livre à l’adresse renseignée.</li>
|
||||
</ul>
|
||||
<button class="btn btn-primary" @click="goNextStep(false)">Choisir</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {useMMCMStore} from '../stores/mmcm.js'
|
||||
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const store = useMMCMStore()
|
||||
return {
|
||||
store
|
||||
}
|
||||
},
|
||||
name: "delivery-option-step-1",
|
||||
methods: {
|
||||
goNextStep: function (bool) {
|
||||
this.store.setPrescription(bool);
|
||||
this.$router.push({path: '/delivery-option-step-2'});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
37
src/views/delivery-option-step-2.vue
Normal file
37
src/views/delivery-option-step-2.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">Mode de livraison</div>
|
||||
<div class="card-body row">
|
||||
<div v-for="product in store.productList" class="col-lg-6">
|
||||
<h1>{{ product.name }}</h1>
|
||||
<p> {{ product.price }}</p>
|
||||
<button @click="goNexStep(product.id)">Choisir</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {useMMCMStore} from '../stores/mmcm.js'
|
||||
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const store = useMMCMStore()
|
||||
return {
|
||||
store
|
||||
}
|
||||
},
|
||||
name: "delivery-option-step-2",
|
||||
methods: {
|
||||
goNexStep: function (idProduct) {
|
||||
this.store.setIdProduct(idProduct);
|
||||
this.$router.push({path: '/delivery-option-step-3'});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
54
src/views/delivery-option-step-3.vue
Normal file
54
src/views/delivery-option-step-3.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">Date</div>
|
||||
<div class="card-body">
|
||||
<Datepicker v-model="dateDelivery" :minDate="tomorrow" :enableTimePicker="false" :disabledWeekDays="[6, 0]" locale="fr-FR"/>
|
||||
<p class="mt-4"><button class="btn btn-primary" @click="$router.push({path: '/delivery-option-summary'});">Valider</button></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia'
|
||||
import {useMMCMStore} from '../stores/mmcm.js'
|
||||
import {ref} from 'vue';
|
||||
import {add, endOfMonth, endOfYear, startOfMonth, startOfYear, subMonths} from 'date-fns';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const store = useMMCMStore()
|
||||
|
||||
const { dateDelivery } = storeToRefs(store)
|
||||
|
||||
const tomorrow =
|
||||
add(new Date(), {
|
||||
days: 1
|
||||
})
|
||||
|
||||
const afterTomorrow =
|
||||
add(new Date(), {
|
||||
days: 2
|
||||
})
|
||||
|
||||
|
||||
const presetRanges = ref([
|
||||
{label: 'Demain', range: [tomorrow, tomorrow]},
|
||||
{label: 'Après demain', range: [afterTomorrow, afterTomorrow]},
|
||||
{label: 'Semaine prochaine', range: [startOfMonth(new Date()), endOfMonth(new Date())]},
|
||||
]);
|
||||
|
||||
return {
|
||||
tomorrow,
|
||||
dateDelivery,
|
||||
presetRanges,
|
||||
store
|
||||
}
|
||||
},
|
||||
name: "delivery-option-step-3",
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,17 +1,22 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">Recapitulatif</div>
|
||||
<div class="card-body">
|
||||
<div v-if="store.widthPrescription">La pharmacie a mon ordo</div>
|
||||
<div v-else>La pharmacie n'a pas mon ordo</div>
|
||||
|
||||
<div v-for="product in store.productList" class="card">
|
||||
<div class="card-header">{{ product.name }}</div>
|
||||
<div class="card-body">{{ product.price }}</div>
|
||||
<button @click="addToCart(product.id)">Ajouter au panier</button>
|
||||
<div>{{store.idProduct}}</div>
|
||||
<div>{{store.dateDelivery}}</div>
|
||||
<button class="btn btn-primary" @click="addToCart">Valider</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {useMMCMStore} from '../stores/mmcm.js'
|
||||
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const store = useMMCMStore()
|
||||
@@ -19,10 +24,9 @@ export default {
|
||||
store
|
||||
}
|
||||
},
|
||||
name: "delivery-option",
|
||||
name: "delivery-option-summary",
|
||||
methods: {
|
||||
addToCart: async function (idProduct) {
|
||||
console.log(this.store.productList)
|
||||
const urlApi = '/php/api/v3/mmcm.php?EXEC=addToCart&ID_PRODUCT=' + idProduct;
|
||||
console.log(urlApi)
|
||||
|
||||
@@ -32,9 +36,6 @@ console.log(this.store.productList)
|
||||
return response.json();
|
||||
}
|
||||
})
|
||||
|
||||
console.log(result)
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user