BenoitCier
/
Opendistrib
forked from Laclic/Souke
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Changement d'étape : transition + scroll

dev
Guillaume Bourgeois 5 years ago
parent
77ed0f663e
commit
a36b694c64
4 changed files with 210 additions and 186 deletions
Unified View Show Diff Stats
  1. +138
    -144
      producer/views/order/order.php
  2. +50
    -37
      producer/web/css/screen.css
  3. +9
    -5
      producer/web/js/vuejs/order-order.js
  4. +13
    -0
      producer/web/sass/order/_order.scss

+ 138
- 144
producer/views/order/order.php View File



?> ?>


<div id="app-order-order" :class="{'loaded': !loading}">
<div id="app-order-order" :class="{'loaded': !loadingInit}">
<div v-if="orderSuccess" class="alert alert-success" id="order-success"> <div v-if="orderSuccess" class="alert alert-success" id="order-success">
<span class="glyphicon glyphicon-ok"></span> Votre commande a bien été prise en compte. <span class="glyphicon glyphicon-ok"></span> Votre commande a bien été prise en compte.
</div> </div>
<div class="clr"></div> <div class="clr"></div>
</div> </div>
<div class="content"> <div class="content">
<div id="content-step-date" v-if="step == 'date'">
<div id="legend">
<span id="distribution-date-color"></span> Prochains jours de distribution
<span id="order-date-color"></span> Vos commandes déjà enregistrées
<transition name="slide">
<div id="content-step-date" v-if="step == 'date'">
<div id="legend">
<span id="distribution-date-color"></span> Prochains jours de distribution
<span id="order-date-color"></span> Vos commandes déjà enregistrées
</div>
<div id="calendar">
<v-calendar
is-inline
is-double-paned
is-expanded
v-model="date"
mode="single"
:formats="calendar.formats"
:theme-styles="calendar.themeStyles"
:attributes="calendar.attrs"
:available-dates="calendar.availableDates"
@dayclick='dayClick'>
></v-calendar>
</div>
</div> </div>
<div id="calendar">
<v-calendar
is-inline
is-double-paned
is-expanded
v-model="date"
mode="single"
:formats="calendar.formats"
:theme-styles="calendar.themeStyles"
:attributes="calendar.attrs"
:available-dates="calendar.availableDates"
@dayclick='dayClick'>
></v-calendar>
</div>
</div>
<div id="content-step-point-sale" v-if="step == 'point-sale'">
<table id="points-sale" class="table table-bordered" v-if="pointsSale.length">
<thead>
<tr>
<th>Nom</th>
<th>Localité</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="pointSale in pointsSale" v-if="pointSale && pointSale.pointSaleDistribution.delivery">
<td class="name">
<span class="the-name">{{ pointSale.name }}</span>
<div class="comment" v-if="pointSale.userPointSale">
{{ pointSale.userPointSale.comment }}
</div>
</td>
<td class="locality">{{ pointSale.locality }}</td>
<td class="actions">
<div :class="'form-group' + (pointSale.invalid_code ? ' has-error' : '')">
<div class="input-group" v-if="pointSale.code.length > 0">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input v-model="pointsSaleCodes[pointSale.id]" type="password" placeholder="Code" class="form-control input-code" />
</div>
</div>
<button class="btn btn-primary" @click="pointSaleClick" :data-code="pointSale.code.length > 0" :data-id-point-sale="pointSale.id">
<span class="glyphicon glyphicon-map-marker"></span>
Choisir
</button>
</td>
</tr>
</tbody>
</table>
<div class="alert alert-warning" v-else>
Aucun point de vente disponible pour ce jour de distribution.
</transition>
<transition name="slide">
<div id="content-step-point-sale" v-if="step == 'point-sale'">
<div v-if="loading">
Chargement ...
</div>
<div v-else>
<table id="points-sale" class="table table-bordered" v-if="pointsSale.length">
<thead>
<tr>
<th>Nom</th>
<th>Localité</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="pointSale in pointsSale" v-if="pointSale && pointSale.pointSaleDistribution.delivery">
<td class="name">
<span class="the-name">{{ pointSale.name }}</span>
<div class="comment" v-if="pointSale.userPointSale">
{{ pointSale.userPointSale.comment }}
</div>
</td>
<td class="locality">{{ pointSale.locality }}</td>
<td class="actions">
<div :class="'form-group' + (pointSale.invalid_code ? ' has-error' : '')">
<div class="input-group" v-if="pointSale.code.length > 0">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input v-model="pointsSaleCodes[pointSale.id]" type="password" placeholder="Code" class="form-control input-code" />
</div>
</div>
<button class="btn btn-primary" @click="pointSaleClick" :data-code="pointSale.code.length > 0" :data-id-point-sale="pointSale.id">
<span class="glyphicon glyphicon-map-marker"></span>
Choisir
</button>
</td>
</tr>
</tbody>
</table>
<div class="alert alert-warning" v-else>
Aucun point de vente disponible pour ce jour de distribution.
</div>
</div>
</div> </div>
</div>
<div id="content-step-products" v-if="step == 'products'">
<div v-if="products.length">
<table id="products" class="table table-bordered" >
<thead>
<tr>
<th>Nom</th>
<th>Prix unitaire</th>
<th>Quantité</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr v-for="product in products" v-if="product.productDistribution[0].active == 1">
<td class="name">
<span class="name">{{ product.name }}</span>
<span class="other">
<span v-if="product.description.length">/</span>
<span class="description">{{ product.description }}</span>
<span v-if="product.weight">({{ product.weight }}g)</span>
</span>
<span v-if="product.quantity_remaining - product.quantity_form == 0 && product.quantity_max > 0" class="label label-danger">
Épuisé
</span>
<div class="recipe" v-if="product.recipe.length">{{ product.recipe }}</div>
</td>
<td class="price-unit">
{{ formatPrice(product.price) }}
</td>
<td class="td-quantity">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default btn-moins" type="button" @click="productQuantityClick(product, -1)"><span class="glyphicon glyphicon-minus"></span></button>
</transition>
<transition name="slide">
<div id="content-step-products" v-if="step == 'products'">
<div v-if="products.length">
<table id="products" class="table table-bordered" >
<thead>
<tr>
<th>Nom</th>
<th>Prix unitaire</th>
<th>Quantité</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr v-for="product in products" v-if="product.productDistribution[0].active == 1">
<td class="name">
<span class="name">{{ product.name }}</span>
<span class="other">
<span v-if="product.description.length">/</span>
<span class="description">{{ product.description }}</span>
<span v-if="product.weight">({{ product.weight }}g)</span>
</span> </span>
<input type="text" v-model="product.quantity_form" class="form-control quantity" />
<span class="input-group-btn">
<button class="btn btn-default btn-plus" type="button" @click="productQuantityClick(product, 1)"><span class="glyphicon glyphicon-plus"></span></button>
<span v-if="product.quantity_remaining - product.quantity_form == 0 && product.quantity_max > 0" class="label label-danger">
Épuisé
</span> </span>
</div>
</td>
<td class="price-total">
{{ formatPrice(product.price * product.quantity_form) }}
</td>
</tr>
<tr>
<td colspan="3"></td>
<td class="price-total">{{ priceTotal() }}</td>
</tr>
</tbody>
</table>
<div class="block-actions">
<button class="btn btn-primary" @click="changeStep('payment')">Valider</button>
<div class="recipe" v-if="product.recipe.length">{{ product.recipe }}</div>
</td>
<td class="price-unit">
{{ formatPrice(product.price) }}
</td>
<td class="td-quantity">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default btn-moins" type="button" @click="productQuantityClick(product, -1)"><span class="glyphicon glyphicon-minus"></span></button>
</span>
<input type="text" v-model="product.quantity_form" class="form-control quantity" />
<span class="input-group-btn">
<button class="btn btn-default btn-plus" type="button" @click="productQuantityClick(product, 1)"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</td>
<td class="price-total">
{{ formatPrice(product.price * product.quantity_form) }}
</td>
</tr>
<tr>
<td colspan="3"></td>
<td class="price-total">{{ priceTotal() }}</td>
</tr>
</tbody>
</table>
<div class="block-actions">
<button class="btn btn-primary" @click="changeStep('payment')">Valider</button>
</div>
</div> </div>
</div>
<div class="alert alert-warning" v-else>
Aucun produit disponible
</div>
</div>
<div id="content-step-payment" v-if="step == 'payment'">
<div class="comment">
<label for="order-comment">Commentaire</label>
<textarea id="order-comment" v-model="comment" class="form-control"></textarea>
</div>
<div class="credit">
<input type="checkbox" id="checkbox-credit" v-model="creditCheckbox" />
<label for="checkbox-credit">Utiliser mon Crédit : {{ formatPrice(credit) }}</label>
<div class="info">
<span v-if="creditCheckbox == true">
{{ priceTotal() }} seront débités
</span>
<div class="alert alert-warning" v-else>
Aucun produit disponible
</div> </div>
</div> </div>
<div class="block-actions">
<button class="btn btn-primary" @click="confirmClick">Je confirme ma commande</button>
</transition>
<transition name="slide">
<div id="content-step-payment" v-if="step == 'payment'">
<div class="comment">
<label for="order-comment">Commentaire</label>
<textarea id="order-comment" v-model="comment" class="form-control"></textarea>
</div>
<div class="credit">
<input type="checkbox" id="checkbox-credit" v-model="creditCheckbox" />
<label for="checkbox-credit">Utiliser mon Crédit : {{ formatPrice(credit) }}</label>
<div class="info">
<span v-if="creditCheckbox == true">
{{ priceTotal() }} seront débités
</span>
</div>
</div>
<div class="block-actions">
<button class="btn btn-primary" @click="confirmClick">Je confirme ma commande</button>
</div>
</div> </div>
</div>
</transition>
</div> </div>
</div> </div>
<div id="infos" class="col-md-3" v-if="producer != null && producer.order_infos.length"> <div id="infos" class="col-md-3" v-if="producer != null && producer.order_infos.length">
</div> </div>
<div class="panel-body"> <div class="panel-body">
{{ producer.order_infos }} {{ producer.order_infos }}


<!--<span class="glyphicon glyphicon-time"></span> {{ dateFormat }}
<div v-if="pointSaleActive">
<span class="glyphicon glyphicon-map-marker"></span>
{{ pointSaleActive.name }}
</div>
<div class="products" v-if="products.length && oneProductOrdered()">
<span class="glyphicon glyphicon-th-list"></span>
<ul>
<li v-for="product in products" v-if="product.quantity_form">
{{ product.quantity_form }} x {{ product.name }}
</li>
</ul>
</div>
<div class="products" v-if="products.length && oneProductOrdered()">
<span class="glyphicon glyphicon-euro"></span>
{{ priceTotal() }}
</div>-->
</div> </div>
</div> </div>
</div> </div>

+ 50
- 37
producer/web/css/screen.css View File

display: block; display: block;
} }
/* line 11, ../sass/order/_order.scss */ /* line 11, ../sass/order/_order.scss */
.order-order #app-order-order .slide-enter-active {
transition: all .2s ease;
}
/* line 15, ../sass/order/_order.scss */
.order-order #app-order-order .slide-leave-active {
transition: all 0s ease;
}
/* line 19, ../sass/order/_order.scss */
.order-order #app-order-order .slide-enter, .order-order #app-order-order .slide-leave-to {
transform: translateX(10px);
opacity: 0;
}
/* line 24, ../sass/order/_order.scss */
.order-order #app-order-order #steps { .order-order #app-order-order #steps {
margin-bottom: 20px; margin-bottom: 20px;
} }
/* line 13, ../sass/order/_order.scss */
/* line 26, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul { .order-order #app-order-order #steps ul {
margin-top: 30px; margin-top: 30px;
} }
/* line 15, ../sass/order/_order.scss */
/* line 28, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li { .order-order #app-order-order #steps ul li {
text-align: center; text-align: center;
padding-right: 8px; padding-right: 8px;
padding-left: 8px; padding-left: 8px;
position: relative; position: relative;
} }
/* line 21, ../sass/order/_order.scss */
/* line 34, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .info-step { .order-order #app-order-order #steps ul li .info-step {
position: absolute; position: absolute;
top: -30px; top: -30px;
width: 100%; width: 100%;
text-transform: normal; text-transform: normal;
} }
/* line 29, ../sass/order/_order.scss */
/* line 42, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .glyphicon-chevron-right, .order-order #app-order-order #steps ul li.active .glyphicon-chevron-right { .order-order #app-order-order #steps ul li .glyphicon-chevron-right, .order-order #app-order-order #steps ul li.active .glyphicon-chevron-right {
float: right; float: right;
color: gray; color: gray;
position: relative; position: relative;
top: 10px; top: 10px;
} }
/* line 37, ../sass/order/_order.scss */
/* line 50, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li#step-date { .order-order #app-order-order #steps ul li#step-date {
padding-left: 0px; padding-left: 0px;
} }
/* line 41, ../sass/order/_order.scss */
/* line 54, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li#step-payment { .order-order #app-order-order #steps ul li#step-payment {
padding-right: 0px; padding-right: 0px;
} }
/* line 45, ../sass/order/_order.scss */
/* line 58, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li#step-payment .btn::after, .order-order #app-order-order #steps ul li#step-date .btn::before { .order-order #app-order-order #steps ul li#step-payment .btn::after, .order-order #app-order-order #steps ul li#step-date .btn::before {
display: none; display: none;
} }
/* line 50, ../sass/order/_order.scss */
/* line 63, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn { .order-order #app-order-order #steps ul li .btn {
color: #333; color: #333;
text-transform: uppercase; text-transform: uppercase;
border: 0px none; border: 0px none;
text-transform: uppercase; text-transform: uppercase;
} }
/* line 61, ../sass/order/_order.scss */
/* line 74, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn .button-content { .order-order #app-order-order #steps ul li .btn .button-content {
position: relative; position: relative;
left: 8px; left: 8px;
} }
/* line 66, ../sass/order/_order.scss */
/* line 79, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn.btn-primary { .order-order #app-order-order #steps ul li .btn.btn-primary {
background-color: #BB8757; background-color: #BB8757;
} }
/* line 70, ../sass/order/_order.scss */
/* line 83, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn::after, .order-order #app-order-order #steps ul li .btn::before { .order-order #app-order-order #steps ul li .btn::after, .order-order #app-order-order #steps ul li .btn::before {
content: ""; content: "";
position: absolute; position: absolute;
top: -1px; top: -1px;
} }
/* line 76, ../sass/order/_order.scss */
/* line 89, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn::after { .order-order #app-order-order #steps ul li .btn::after {
right: -34px; right: -34px;
border: 17px solid transparent; border: 17px solid transparent;
border-left: 17px solid #e0e0e0; border-left: 17px solid #e0e0e0;
background-color: transparent; background-color: transparent;
} }
/* line 83, ../sass/order/_order.scss */
/* line 96, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn::before { .order-order #app-order-order #steps ul li .btn::before {
left: 0px; left: 0px;
border: 17px solid transparent; border: 17px solid transparent;
border-left: 17px solid white; border-left: 17px solid white;
background-color: transparent; background-color: transparent;
} }
/* line 90, ../sass/order/_order.scss */
/* line 103, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn.btn-primary::after { .order-order #app-order-order #steps ul li .btn.btn-primary::after {
border-left: 17px solid #BB8757; border-left: 17px solid #BB8757;
} }
/* line 104, ../sass/order/_order.scss */
/* line 117, ../sass/order/_order.scss */
.order-order #app-order-order #steps ul li .btn-primary { .order-order #app-order-order #steps ul li .btn-primary {
color: white; color: white;
} }
/* line 112, ../sass/order/_order.scss */
/* line 125, ../sass/order/_order.scss */
.order-order #app-order-order #legend #order-date-color, .order-order #app-order-order #legend #order-date-color,
.order-order #app-order-order #legend #distribution-date-color { .order-order #app-order-order #legend #distribution-date-color {
width: 13px; width: 13px;
height: 13px; height: 13px;
display: inline-block; display: inline-block;
} }
/* line 119, ../sass/order/_order.scss */
/* line 132, ../sass/order/_order.scss */
.order-order #app-order-order #legend #order-date-color { .order-order #app-order-order #legend #order-date-color {
margin-left: 15px; margin-left: 15px;
background-color: #018548; background-color: #018548;
} }
/* line 123, ../sass/order/_order.scss */
/* line 136, ../sass/order/_order.scss */
.order-order #app-order-order #legend #distribution-date-color { .order-order #app-order-order #legend #distribution-date-color {
background-color: #00A65A; background-color: #00A65A;
} }
/* line 128, ../sass/order/_order.scss */
/* line 141, ../sass/order/_order.scss */
.order-order #app-order-order #calendar { .order-order #app-order-order #calendar {
margin-bottom: 15px; margin-bottom: 15px;
} }
/* line 130, ../sass/order/_order.scss */
/* line 143, ../sass/order/_order.scss */
.order-order #app-order-order #calendar .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] { .order-order #app-order-order #calendar .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {
font-size: 2rem; font-size: 2rem;
} }
/* line 133, ../sass/order/_order.scss */
/* line 146, ../sass/order/_order.scss */
.order-order #app-order-order #calendar .c-day-background { .order-order #app-order-order #calendar .c-day-background {
padding: 20px; padding: 20px;
} }
/* line 138, ../sass/order/_order.scss */
/* line 151, ../sass/order/_order.scss */
.order-order #app-order-order #calendar .c-day:hover .c-day-background { .order-order #app-order-order #calendar .c-day:hover .c-day-background {
background-color: #F39C12 !important; background-color: #F39C12 !important;
} }
/* line 143, ../sass/order/_order.scss */
/* line 156, ../sass/order/_order.scss */
.order-order #app-order-order #calendar .c-day-popover-content { .order-order #app-order-order #calendar .c-day-popover-content {
font-size: 1.3rem; font-size: 1.3rem;
} }
/* line 148, ../sass/order/_order.scss */
/* line 161, ../sass/order/_order.scss */
.order-order #app-order-order .block-actions { .order-order #app-order-order .block-actions {
text-align: right; text-align: right;
margin-top: 20px; margin-top: 20px;
} }
/* line 155, ../sass/order/_order.scss */
/* line 168, ../sass/order/_order.scss */
.order-order #app-order-order table#points-sale td.name .the-name { .order-order #app-order-order table#points-sale td.name .the-name {
text-transform: uppercase; text-transform: uppercase;
font-family: "myriadpro-regular"; font-family: "myriadpro-regular";
color: black; color: black;
font-size: 16px; font-size: 16px;
} }
/* line 163, ../sass/order/_order.scss */
/* line 176, ../sass/order/_order.scss */
.order-order #app-order-order table#points-sale td.actions { .order-order #app-order-order table#points-sale td.actions {
width: 150px; width: 150px;
} }
/* line 165, ../sass/order/_order.scss */
/* line 178, ../sass/order/_order.scss */
.order-order #app-order-order table#points-sale td.actions button { .order-order #app-order-order table#points-sale td.actions button {
width: 100%; width: 100%;
} }
/* line 173, ../sass/order/_order.scss */
/* line 186, ../sass/order/_order.scss */
.order-order #app-order-order table#products td.name .name { .order-order #app-order-order table#products td.name .name {
text-transform: uppercase; text-transform: uppercase;
font-family: "myriadpro-regular"; font-family: "myriadpro-regular";
color: black; color: black;
font-size: 16px; font-size: 16px;
} }
/* line 179, ../sass/order/_order.scss */
/* line 192, ../sass/order/_order.scss */
.order-order #app-order-order table#products td.name .other { .order-order #app-order-order table#products td.name .other {
font-size: 14px; font-size: 14px;
color: #333; color: #333;
} }
/* line 183, ../sass/order/_order.scss */
/* line 196, ../sass/order/_order.scss */
.order-order #app-order-order table#products td.name .recipe { .order-order #app-order-order table#products td.name .recipe {
color: gray; color: gray;
} }
/* line 187, ../sass/order/_order.scss */
/* line 200, ../sass/order/_order.scss */
.order-order #app-order-order table#products .price-unit, .order-order #app-order-order table#products .price-total { .order-order #app-order-order table#products .price-unit, .order-order #app-order-order table#products .price-total {
width: 100px; width: 100px;
text-align: center; text-align: center;
} }
/* line 191, ../sass/order/_order.scss */
/* line 204, ../sass/order/_order.scss */
.order-order #app-order-order table#products .td-quantity { .order-order #app-order-order table#products .td-quantity {
width: 150px; width: 150px;
} }
/* line 193, ../sass/order/_order.scss */
/* line 206, ../sass/order/_order.scss */
.order-order #app-order-order table#products .td-quantity input.quantity { .order-order #app-order-order table#products .td-quantity input.quantity {
text-align: center; text-align: center;
} }
/* line 200, ../sass/order/_order.scss */
/* line 213, ../sass/order/_order.scss */
.order-order #app-order-order #content-step-payment .credit { .order-order #app-order-order #content-step-payment .credit {
margin-top: 20px; margin-top: 20px;
} }
/* line 203, ../sass/order/_order.scss */
/* line 216, ../sass/order/_order.scss */
.order-order #app-order-order #content-step-payment .credit .info { .order-order #app-order-order #content-step-payment .credit .info {
margin-left: 20px; margin-left: 20px;
color: gray; color: gray;
} }
/* line 210, ../sass/order/_order.scss */
/* line 223, ../sass/order/_order.scss */
.order-order #app-order-order #infos { .order-order #app-order-order #infos {
margin-top: 30px; margin-top: 30px;
} }
/* line 212, ../sass/order/_order.scss */
/* line 225, ../sass/order/_order.scss */
.order-order #app-order-order #infos .panel-body { .order-order #app-order-order #infos .panel-body {
padding-top: 0px; padding-top: 0px;
white-space: pre-line; white-space: pre-line;

+ 9
- 5
producer/web/js/vuejs/order-order.js View File

var app = new Vue({ var app = new Vue({
el: '#app-order-order', el: '#app-order-order',
data: { data: {
loading: true,
loading: false,
loadingInit: true,
step: 'date', step: 'date',
producer: null, producer: null,
date: null, date: null,
} }
}, },
}, },
mounted: function() {
this.loading = false ;
mounted: function() {
if($('#distribution-date').size()) { if($('#distribution-date').size()) {
this.date = new Date($('#distribution-date').html()) ; this.date = new Date($('#distribution-date').html()) ;
this.dateFormat = ('0' + this.date.getDate()).slice(-2)+ '/' this.dateFormat = ('0' + this.date.getDate()).slice(-2)+ '/'
+ this.date.getFullYear() ; + this.date.getFullYear() ;
} }
this.init() ; this.init() ;
this.loadingInit = false ;
}, },
methods: { methods: {
getDate: function() { getDate: function() {
} }
}, },
init: function() { init: function() {
this.loading = true ;
axios.get("ajax-infos",{params: {date : this.getDate()}}) axios.get("ajax-infos",{params: {date : this.getDate()}})
.then(response => { .then(response => {
this.producer = response.data.producer ; this.producer = response.data.producer ;
if(response.data.products) { if(response.data.products) {
this.products = response.data.products ; this.products = response.data.products ;
} }
this.loading = false ;
}); });
}, },
changeStep: function(step) { changeStep: function(step) {
var oldStep = this.step ; var oldStep = this.step ;
this.step = step ; this.step = step ;
window.scroll(0, $('#page-title').position().top - 25) ;
if(oldStep == 'date' && step == 'point-sale') { if(oldStep == 'date' && step == 'point-sale') {
this.init() ; this.init() ;
} }
id_point_sale: this.pointSaleActive.id, id_point_sale: this.pointSaleActive.id,
comment: this.comment comment: this.comment
}, },
code_point_sale: this.codePointsSale[this.pointSaleActive.id],
code_point_sale: this.pointsSaleCodes[this.pointSaleActive.id],
products: productsArray, products: productsArray,
use_credit: this.creditCheckbox use_credit: this.creditCheckbox
}).then(response => { }).then(response => {

+ 13
- 0
producer/web/sass/order/_order.scss View File

display: block ; display: block ;
} }
.slide-enter-active {
transition: all .2s ease;
}
.slide-leave-active {
//transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
transition: all 0s ease;
}
.slide-enter, .slide-leave-to {
transform: translateX(10px);
opacity: 0;
}
#steps { #steps {
margin-bottom: 20px ; margin-bottom: 20px ;
ul { ul {

Write Preview
Loading…
Cancel
Save