Order checkout

This commit is contained in:
Juan Ferrer 2019-08-30 12:59:49 +02:00
parent 29acd913ee
commit 703d6932ff
16 changed files with 729 additions and 84 deletions

View File

@ -1,6 +1,50 @@
const warehouseIds = [1, 44];
module.exports = Self => {
Self.remoteMethod('calcCatalog', {
description: 'Get the available and prices list for an item',
accessType: 'READ',
accepts: [
{
arg: 'id',
type: 'Number',
description: 'The item id'
}, {
arg: 'dated',
type: 'Date',
description: 'The date'
}, {
arg: 'addressFk',
type: 'Number',
description: 'The address id'
}, {
arg: 'agencyModeFk',
type: 'Number',
description: 'The agency id'
}
],
returns: {
type: ['Object'],
description: 'The item available and prices list',
root: true,
},
http: {
path: `/:id/calcCatalog`,
verb: 'GET'
}
});
Self.calcCatalog = (id, dated, addressFk, agencyModeFk, cb) => {
Self.dataSource.connector.query(
`CALL hedera.item_calcCatalog(?, ?, ?, ?)`,
[id, dated, addressFk, agencyModeFk],
(err, res) => {
if (err) return cb(err)
return cb(null, res[0])
}
);
};
Self.remoteMethod('catalog', {
description: 'Get the catalog',
accessType: 'READ',

View File

@ -3,7 +3,7 @@
"base": "PersistedModel",
"options": {
"mysql": {
"table": "hedera.orderRow"
"table": "hedera.orderRow"
}
},
"properties": {

View File

@ -3,7 +3,7 @@
"base": "PersistedModel",
"options": {
"mysql": {
"table": "hedera.order"
"table": "hedera.order"
}
},
"properties": {
@ -79,9 +79,23 @@
"mysql": {
"columnName": "confirm_date"
}
},
"taxableBase": {
"type": "Number"
},
"tax": {
"type": "Number"
},
"total": {
"type": "Number"
}
},
"relations": {
"rows": {
"type": "hasMany",
"model": "OrderRow",
"foreignKey": "orderFk"
},
"agencyMode": {
"type": "belongsTo",
"model": "AgencyMode",
@ -101,11 +115,6 @@
"type": "belongsTo",
"model": "DeliveryMethod",
"foreignKey": "delivery_method_id"
},
"rows": {
"type": "hasMany",
"model": "OrderRow",
"foreignKey": "orderFk"
}
}
}

View File

@ -52,6 +52,7 @@ module.exports = function (ctx) {
'QItemLabel',
'QList',
'QLayout',
'QMarkupTable',
'QPageContainer',
'QPage',
'QPageSticky',
@ -79,8 +80,8 @@ module.exports = function (ctx) {
'ClosePopup'
],
// Quasar plugins
plugins: [
'Dialog',
'Notify'
]

View File

@ -6,7 +6,7 @@ export default async ({ app, Vue }) => {
let i18n = app.i18n
function currency (val) {
return val ? val.toFixed(2) + '€' : val
return typeof val === 'number' ? val.toFixed(2) + '€' : val
}
function date (val, format) {

View File

@ -9,7 +9,11 @@ export default async ({ app, Vue }) => {
title: null,
subtitle: null,
useRightDrawer: false,
rightDrawerOpen: true
rightDrawerOpen: true,
catalogConfig: {
agencyModeFk: 2,
addressFk: 1823
}
})
Vue.prototype.$state = state
}

View File

@ -115,7 +115,7 @@ export default {
params.filter = filter
limit = filter.limit
if (!limit) {
if (limit === undefined) {
limit = this.index * 30
filter.limit = limit
}
@ -149,7 +149,7 @@ export default {
this.doRequest()
.then(res => {
if (!res) return done(true)
done(!res.limit || res.data.length < res.limit)
done(!res.limit || !Array.isArray(res.data) || res.data.length < res.limit)
return res
})
.catch(err => {

View File

@ -1,9 +1,5 @@
export default {
// Login
enter: 'Enter',
email: 'E-Mail',
password: 'Password',
remember: 'Don not close session',
// global
search: 'Search',
accept: 'Accept',
cancel: 'Cancel',
@ -22,6 +18,7 @@ export default {
createdSuccess: 'Item created successfully',
fieldIsRequired: 'Field is required',
setSearchFilter: 'Please, set a search filter',
id: 'Id',
today: 'Today',
yesterday: 'Yesterday',
tomorrow: 'Tomorrow',
@ -81,7 +78,13 @@ export default {
logout: 'Logout',
visitor: 'Visitor',
// Menu
// login
enter: 'Enter',
email: 'E-Mail',
password: 'Password',
remember: 'Don not close session',
// menu
home: 'Home',
catalog: 'Catalog',
orders: 'Orders',
@ -104,7 +107,7 @@ export default {
addressEdit: 'Edit address',
register: 'Register',
// Home
// home
recentNews: 'Recent news',
startOrder: 'Start order',
@ -123,7 +126,7 @@ export default {
n1InPrice: 'Nº1 in price',
ourBigVolumeAllows: 'our big volume allows us to offer the best prices',
// Catalog
// catalog
more: 'More',
noItemsFound: 'No items found',
pleaseSetFilter: 'Please, set a filter using the right menu',
@ -146,21 +149,60 @@ export default {
siceAsc: 'Ascending size',
sizeDesc: 'Descencing size',
// Orders
ordersMadeAt: 'Orders made at',
pendingConfirmtion: 'Pending confirmation',
noOrdersFound: 'No orders found',
// orders
pending: 'Pending',
confirmed: 'Confirmed',
// orders
pendingConfirmtion: 'Pending confirmation',
noOrdersFound: 'No orders found',
// orders
ordersMadeAt: 'Orders made at',
packages: '{n} packages',
// Conditions
// order
total: 'Total',
confirm: 'Confirm',
delivery: 'Delivery date',
address: 'Address',
agency: 'Agency',
warehouse: 'Warehouse',
configure: 'Configure',
// order/checkout
checkout: 'Checkout',
orderSummary: 'Order summary',
accountsSummary: 'Accounts summary',
previousBalance: 'Previous balance',
orderTotal: 'Order total',
vat: 'VAT',
totalDebt: 'Total debt',
credit: 'Credit',
exceededCredit: 'Exceeded credit',
payAmount: 'Amount to pay',
payMethod: 'Pay method',
useMyBalance: 'Use my balance',
youHaveFaborableBalance: 'You do not need to perform any payment, you have a favorable balance.',
useMyCredit: 'Use my credit',
youHaveFaborableCredit: 'You do not need to pay now, you have a favorable credit.',
creditCard: 'Credit card',
youWillRedirectToPayment: 'By confirming the order you will be redirected to the payment platform.',
bankTransfer: 'Bank Transfer',
makeTransfer: 'Make a transfer to the following account and send the receipt to your salesperson.',
payLater: 'Pay later',
doYouWantToConfirm: 'Do you want to confirm the order?',
orderConfirmedSuccessfully: 'Your order has been confirmed successfully',
youExceededCredit: 'You have exceeded your credit, in order to prepare your order please pay your debt.',
notes: 'Notes',
// conditions
conditionsDesc: 'The order will arrive to your home in 24/48 hours depending on which area you are.',
// About
// about
aboutDesc: 'Verdnatura offers all services for your florist.',
// Connections
// connections
nConnections: '{0} connections',
refreshRate: 'Refresh rate',
lastAction: 'Last actions',
@ -168,27 +210,27 @@ export default {
nSeconds: '{0} seconds',
dontRefresh: 'Do not refresh',
// Visits
// accessLog
accessLog: 'Access log',
// visits
visitsCount: '{0} visits, {1} new',
// New
// new
title: 'Title',
image: 'Image',
tag: 'Tag',
priority: 'Priority',
text: 'Text',
// Images
// images
collection: 'Collection',
updateMatchingId: 'Update items with matching id',
uploadAutomatically: 'Upload automatically',
imagesUploadSuccess: 'Images uploaded successfully',
imagesUploadFailed: 'Some images could not be uploaded',
// User
accessLog: 'Access log',
// Config
// user
userName: 'Username',
nickname: 'Nickname',
language: 'Language',
@ -207,14 +249,14 @@ export default {
passwordsDontMatch: 'Passwords do not match',
passwordChanged: 'Password changed successfully!',
// Addresses
// addresses
setAsDefault: 'Set as default',
addressSetAsDefault: 'Address set as default',
addressRemoved: 'Address removed',
areYouSureDeleteAddress: 'Are you sure you want to delete the address?',
addressCreated: 'Address created successfully!',
// Address
// address
consignatary: 'Consignatary',
street: 'Street',
city: 'City',
@ -224,7 +266,7 @@ export default {
phone: 'Phone',
mobile: 'Mobile',
// Register
// register
registerAsNew: 'Registrarse como nuevo usuario',
notYetUser: 'You are not yet a user, register now and start enjoying everything that Verdnatura offers you.',
receiveOffers: 'Receive offers and promotions by e-mail',

View File

@ -1,9 +1,5 @@
export default {
// Login
enter: 'Entrar',
email: 'Correo electrónico',
password: 'Contraseña',
remember: 'No cerrar sesión',
// global
search: 'Buscar',
accept: 'Aceptar',
cancel: 'Cancelar',
@ -22,6 +18,7 @@ export default {
createdSuccess: 'Elemento creado correctamente',
fieldIsRequired: 'Campo requerido',
setSearchFilter: 'Por favor, establece un filtro de búsqueda',
id: 'Id',
today: 'Hoy',
yesterday: 'Ayer',
tomorrow: 'Mañana',
@ -76,12 +73,18 @@ export default {
]
},
// Layout
// layout
login: 'Iniciar sesión',
logout: 'Cerrar sesión',
visitor: 'Visitante',
// Menu
// login
enter: 'Entrar',
email: 'Correo electrónico',
password: 'Contraseña',
remember: 'No cerrar sesión',
// menu
home: 'Inicio',
catalog: 'Catálogo',
orders: 'Pedidos',
@ -104,7 +107,7 @@ export default {
addressEdit: 'Editar dirección',
register: 'Registrarse',
// Home
// home
recentNews: 'Noticias recientes',
startOrder: 'Empezar pedido',
@ -123,7 +126,7 @@ export default {
n1InPrice: 'Nº1 en precio',
ourBigVolumeAllows: 'Nuestro gran volumen nos permite ofrecerte los mejores precios',
// Catalog
// catalog
more: 'Más',
noItemsFound: 'No se han encontrado artículos',
pleaseSetFilter: 'Por favor, establece un filtro usando el menú de la derecha',
@ -146,21 +149,60 @@ export default {
siceAsc: 'Medida ascendente',
sizeDesc: 'Medida descendente',
// Orders
ordersMadeAt: 'Pedidos realizados en',
pendingConfirmtion: 'Pendientes de confirmar',
noOrdersFound: 'No se han encontrado pedidos',
// orders
pending: 'Pendientes',
confirmed: 'Confirmados',
// orders/pending
pendingConfirmtion: 'Pendientes de confirmar',
noOrdersFound: 'No se han encontrado pedidos',
// orders/confirmed
ordersMadeAt: 'Pedidos realizados en',
packages: '{n} bultos',
// Conditions
// order
total: 'Total',
confirm: 'Confirmar',
delivery: 'Fecha de entrega',
address: 'Dirección',
agency: 'Agencia',
warehouse: 'Almacén',
configure: 'Configurar',
// order/checkout
checkout: 'Finalizar pedido',
orderSummary: 'Resumen del pedido',
accountsSummary: 'Resumen de cuentas',
previousBalance: 'Saldo anterior',
orderTotal: 'Total pedido',
vat: 'IVA',
totalDebt: 'Total deuda',
credit: 'Crédito',
exceededCredit: 'Crédito excedido',
payAmount: 'Cantidad a pagar',
payMethod: 'Método de pago',
useMyBalance: 'Usar mi saldo',
youHaveFaborableBalance: 'No necesitas pagar nada, tienes un saldo favorable.',
useMyCredit: 'Usar mi crédito',
youHaveFaborableCredit: 'No necesitas pagar nada, tienes crédito favorable.',
creditCard: 'Tarjeta de crédito',
youWillRedirectToPayment: 'Al confirmar el pedido serás redirigido a la plataforma de pago.',
bankTransfer: 'Transferencia bancaria',
makeTransfer: 'Haz una transferecia a la siguiente cuenta y enví­a el justificante a tu comercial.',
payLater: 'Pagar más tarde',
doYouWantToConfirm: '¿Deseas confirmar el pedido?',
orderConfirmedSuccessfully: 'Tu pedido ha sido realizado con éxito',
youExceededCredit: 'Has excedido tu crédito, por favor realiza el pago para que podamos preparar tu pedido.',
notes: 'Notas',
// conditions
conditionsDesc: 'Te aseguramos que el pedido llegara a tu casa/tienda en menos de 24/48 horas (Dependiendo de en que zona te encuentres).',
// About
// about
aboutDesc: 'Verdnatura te ofrece todos los servicios que necesita tu floristería.',
// Connections
// connections
nConnections: '{0} connexiones',
refreshRate: 'Frecuencia de actualización',
lastAction: 'Última acción',
@ -168,27 +210,27 @@ export default {
nSeconds: '{0} segundos',
dontRefresh: 'No refrescar',
// Visits
// accessLog
accessLog: 'Registro de accesos',
// visits
visitsCount: '{0} visitas, {1} nuevas',
// New
// new
title: 'Título',
image: 'Imagen',
tag: 'Etiqueta',
priority: 'Prioridad',
text: 'Texto',
// Images
// images
collection: 'Colección',
updateMatchingId: 'Actualizar ítems con id coincidente',
uploadAutomatically: 'Subir automáticamente',
imagesUploadSuccess: 'Imágenes subidas correctamente',
imagesUploadFailed: 'Algunas imágenes no se ha podido subir',
// User
accessLog: 'Registro de accesos',
// Config
// user
userName: 'Nombre de usuario',
nickname: 'Nombre a mostrar',
language: 'Idioma',
@ -207,14 +249,14 @@ export default {
passwordsDontMatch: 'Las contraseñas no coinciden',
passwordChanged: '¡Contraseña modificada correctamente!',
// Addresses
// addresses
setAsDefault: 'Establecer como predeterminada',
addressSetAsDefault: 'Dirección establecida como predeterminada',
addressRemoved: 'Dirección eliminada',
areYouSureDeleteAddress: '¿Seguro que quieres eliminar la dirección?',
addressCreated: '¡Dirección creada correctamente!',
// Address
// address
consignatary: 'Consignatario',
street: 'Dirección',
city: 'City',
@ -224,7 +266,7 @@ export default {
phone: 'Teléfono',
mobile: 'Móvil',
// Register
// register
registerAsNew: 'Registrarse como nuevo usuario',
notYetUser: '¿Todavía no eres usuari@?, registrate y empieza a disfrutar de todo lo que Verdnatura puede ofrecerte.',
receiveOffers: 'Recibir ofertas y promociones por correo electrónico',

View File

@ -8,9 +8,6 @@
</div>
</template>
<style lang="stylus" scoped>
</style>
<script>
export default {
name: 'About'

View File

@ -199,6 +199,7 @@
<q-btn
icon="add_shopping_cart"
:title="$t('buy')"
@click="showItem(item)"
flat>
</q-btn>
</q-card-actions>
@ -210,14 +211,51 @@
</div>
</template>
</q-infinite-scroll>
<q-dialog v-model="showItemDialog">
<q-card style="width: 25em;">
<q-img
:src="`${$imageBase}/catalog/200x200/${item.image}`"
:ratio="5/3">
<div class="absolute-bottom text-center q-pa-xs">
<div class="text-subtitle1">
{{item.longName}}
</div>
</div>
</q-img>
<q-card-section>
<div class="text-uppercase text-subtitle1 text-grey-7 ellipsize">
{{item.subName}}
</div>
<div class="text-grey-7">
#{{item.id}}
</div>
</q-card-section>
<q-card-section>
<div v-for="tag in item.tags" :key="tag.tagFk">
<span class="text-grey-7">{{tag.tag.name}}</span> {{tag.value}}
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn
@click="showItemDialog = false"
flat>
{{$t('cancel')}}
</q-btn>
<q-btn
@click="showItemDialog = false"
flat>
{{$t('accept')}}
</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-btn
fab
icon="shopping_basket"
color="accent"
:to="{name: 'orders'}"
:title="$t('orders')"
/>
:title="$t('orders')"/>
</q-page-sticky>
</div>
</template>
@ -279,6 +317,8 @@ export default {
typeId: null,
types: [],
orgTypes: [],
item: {},
showItemDialog: false,
tags: [],
isLoading: false,
items: null,
@ -537,6 +577,19 @@ export default {
type.name.toLowerCase().indexOf(needle) > -1)
})
}
},
showItem (item) {
this.item = item
this.showItemDialog = true
let conf = this.$state.catalogConfig
let params = {
dated: this.date,
addressFk: conf.addressFk,
agencyModeFk: conf.agencyModeFk
}
this.$axios.get(`Items/${item.id}/calcCatalog`, { params })
.then(res => (this.lots = res.data))
}
}
}

View File

@ -1,14 +1,95 @@
<template>
<div class="text-subtitle1 text-center text-grey-7 q-pa-lg">
Sorry this section is under construction
<div>
<router-view></router-view>
<q-drawer
v-model="$state.rightDrawerOpen"
side="right"
elevated>
<div
v-if="order"
class="q-pa-md">
<q-input
:label="$t('id')"
:value="order.id"
readonly/>
<q-input
:label="$t('delivery')"
:value="order.landed | relDate"
readonly/>
<q-input
v-if="order.address"
:label="$t('address')"
:value="order.address.nickname"
readonly/>
<q-input
v-if="order.agencyMode"
:label="$t('agency')"
:value="order.agencyMode.name"
readonly/>
<q-input
v-model="notes"
:label="$t('notes')"
type="textarea"/>
<q-btn
:label="$t('configure')"
color="primary"
class="q-mt-md"
style="width: 100%;"
flat/>
</div>
</q-drawer>
</div>
</template>
<style lang="stylus" scoped>
</style>
<script>
import Page from 'components/Page'
export default {
name: 'Order'
name: 'Order',
mixins: [Page],
data () {
return {
order: {},
notes: null
}
},
created () {
this.$state.useRightDrawer = true
},
beforeRouteUpdate (to, from, next) {
next()
this.reload()
},
mounted () {
this.reload()
},
methods: {
reload () {
let filter = {
fields: [
'id',
'landed',
'addressFk',
'agencyModeFk'
],
include: [
{
relation: 'address',
scope: {
fields: ['nickname']
}
}, {
relation: 'agencyMode',
scope: {
fields: ['name']
}
}
]
}
this.$axios.get(`Orders/${this.$route.params.id}`, { params: { filter } })
.then(res => (this.order = res.data))
}
}
}
</script>

216
src/pages/OrderCheckout.vue Normal file
View File

@ -0,0 +1,216 @@
<template>
<div class="vn-pp row justify-center">
<q-card class="vn-w-md">
<q-card-section>
<div class="text-h6">{{$t('accountsSummary')}}</div>
<q-markup-table
class="q-ma-sm"
separator="vertical"
bordered
flat>
<tbody>
<tr>
<td>{{$t('previousBalance')}}</td>
<td class="text-right">{{data.debt | currency}}</td>
</tr>
</tbody>
<tbody
class="border">
<tr>
<td>{{$t('orderTotal')}}</td>
<td class="text-right">{{data.total | currency}}</td>
</tr>
<tr>
<td>{{$t('vat')}}</td>
<td class="text-right">{{data.vat | currency}}</td>
</tr>
</tbody>
<tbody
class="border">
<tr class="text-bold">
<td class="text-left">{{$t('totalDebt')}}</td>
<td class="text-right">{{totalDebt | currency}}</td>
</tr>
<tr v-if="hasCredit">
<td class="text-left">{{$t('credit')}}</td>
<td class="text-right">{{data.credit | currency}}</td>
</tr>
</tbody>
<tbody
class="border"
v-if="isCreditExceeded">
<tr class="text-red text-bold">
<td class="text-left">{{$t('exceededCredit')}}</td>
<td class="text-right">{{execeededCredit | currency}}</td>
</tr>
</tbody>
</q-markup-table>
</q-card-section>
<q-card-section>
<div class="text-h6">{{$t('payMethod')}}</div>
<div v-if="!hasDebt">
<q-radio
v-model="payMethod"
val="balance"
:label="$t('useMyBalance')"/>
<div
v-if="payMethod == 'balance'"
class="method-desc">
{{$t('youHaveFaborableBalance')}}
</div>
</div>
<div v-if="canUseCredit">
<q-radio
v-model="payMethod"
val="credit"
:label="$t('useMyCredit')"/>
<div
v-if="payMethod == 'credit'"
class="method-desc">
{{$t('youHaveFaborableCredit')}}
</div>
</div>
<div>
<q-radio
v-model="payMethod"
val="card"
:label="$t('creditCard')"/>
<div
v-if="payMethod == 'card'"
class="method-desc">
{{$t('youWillRedirectToPayment')}}
</div>
</div>
<div>
<q-radio
v-model="payMethod"
val="transfer"
:label="$t('bankTransfer')"/>
<div
v-if="payMethod == 'transfer'"
class="method-desc">
<div>
{{$t('makeTransfer')}}
</div>
<div class="q-mt-sm">
{{bankName}}
</div>
<div>
{{bankAccount}}
</div>
</div>
</div>
<div>
<q-radio
v-model="payMethod"
val="later"
:label="$t('payLater')"/>
</div>
</q-card-section>
<q-card-section v-if="payMethod == 'card' && isCreditExceeded">
<div class="text-h6">{{$t('payAmount')}}</div>
<div>
<q-radio
v-model="payAmount"
val="exceeded"
:label="$t('exceededCredit') + ', '">
{{execeededCredit | currency}}
</q-radio>
</div>
<div>
<q-radio
v-model="payAmount"
val="total"
:label="$t('totalDebt') + ', '">
{{totalDebt | currency}}
</q-radio>
</div>
</q-card-section>
</q-card>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-btn
fab
icon="send"
color="accent"
@click="onConfirm"
:title="$t('confirm')"/>
</q-page-sticky>
</div>
</template>
<style lang="stylus" scoped>
.border
border-top $layout-border
.method-desc
margin-left 3.2em
color: $grey-8
</style>
<script>
import Page from 'components/Page'
export default {
name: 'OrderCheckout',
mixins: [Page],
data () {
return {
data: {
debt: -27.52,
total: 163.13,
vat: 16.31,
credit: 50
},
payAmount: null,
payMethod: null,
bankName: 'BANKINTER SA',
bankAccount: 'ES81 0128 7635 0205 0000 2291'
}
},
computed: {
totalDebt () {
let data = this.data
return data.debt + data.total + data.vat
},
execeededCredit () {
return this.totalDebt - this.data.credit
},
hasCredit () {
return this.data.credit > 0
},
isCreditExceeded () {
return this.hasCredit && this.execeededCredit > 0
},
canUseCredit () {
return this.hasCredit && !this.isCreditExceeded
},
hasDebt () {
return this.totalDebt > 0
}
},
mounted () {
this.payAmount = this.isCreditExceeded ? 'exceeded' : 'total'
if (!this.hasDebt) {
this.payMethod = 'balance'
} else if (this.canUseCredit) {
this.payMethod = 'credit'
} else {
this.payMethod = 'card'
}
},
methods: {
onConfirm () {
this.$q.dialog({
message: this.$t('doYouWantToConfirm'),
cancel: true
}).onOk(() => {
this.$q.dialog({
message: this.$t('orderConfirmedSuccessfully')
})
// this.$axios.delete(`Orders/${this.$route.params.id}/confirm`)
// .then(() => {})
})
}
}
}
</script>

146
src/pages/OrderView.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<div class="vn-pp row justify-center">
<toolbar>
<div class="row">
<q-badge
v-if="total != null"
class="text-subtitle1 q-mr-sm"
color="secondary">
{{$t('total')}} {{total | currency}}
</q-badge>
</div>
</toolbar>
<lb-scroll
ref="scroll"
:request="request"
@data="data = arguments[0]">
<q-card class="vn-w-md">
<q-list bordered separator>
<q-item
v-for="row in data"
:key="row.id">
<q-item-section avatar>
<q-avatar
style="cursor: pointer;"
@click.native="onImgClick(row.item.image)">
<img :src="`${$imageBase}/catalog/200x200/${row.item.image}`">
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label class="ellipsis">
{{row.item.longName}}
</q-item-label>
<q-item-label class="ellipsis" caption>
<span
v-for="tag in row.item.tags.slice(1, 3)"
:key="tag.tagFk">
{{tag.value}}
</span>
</q-item-label>
<q-item-label class="ellipsis">
{{row.quantity}} x {{row.price | currency}}
<span style="float: right;">
{{row.quantity * row.price | currency}}
</span>
</q-item-label>
</q-item-section>
<q-item-section side top>
<q-btn
icon="delete"
@click="onRemove(row)"
:title="$t('delete')"
size="12px"
flat
dense
round/>
</q-item-section>
</q-item>
</q-list>
</q-card>
</lb-scroll>
<full-image
ref="fullImage"
v-model="image"
collection="catalog"/>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-btn
fab
icon="check"
color="accent"
to="checkout"
:title="$t('confirm')"/>
</q-page-sticky>
</div>
</template>
<script>
import Page from 'components/Page'
export default {
name: 'OrderView',
mixins: [Page],
data () {
return {
image: null
}
},
computed: {
total () {
let rows = this.data
if (!rows) return null
return rows.reduce((a, i) => a + i.quantity * i.price, 0)
}
},
beforeRouteUpdate (to, from, next) {
next()
this.$refs.scroll.reload()
},
methods: {
request () {
return {
url: `Orders/${this.$route.params.id}/rows`,
filter: {
fields: [
'id',
'quantity',
'price',
'itemFk'
],
order: 'created DESC',
include: {
relation: 'item',
scope: {
fields: ['longName', 'image'],
include: {
relation: 'tags',
scope: {
fields: ['tagFk', 'value'],
order: 'priority'
}
}
}
}
}
}
},
onRemove (row) {
this.$q.dialog({
message: this.$t('areYouSureDelete'),
cancel: true
}).onOk(() => {
this.$axios.delete(`Orders/${this.$route.params.id}/rows/${row.id}`)
.then(res => {
let rows = this.data
let index = rows.indexOf(row)
if (index !== -1) rows.splice(index, 1)
this.$q.notify(this.$t('removedSuccess'))
})
})
},
onImgClick (image) {
this.image = image
this.$refs.fullImage.show()
}
}
}
</script>

View File

@ -12,7 +12,7 @@
<q-item
v-for="order in orders"
:key="order.id"
:to="`/order/${order.id}`"
:to="`/order/${order.id}/view`"
clickable
v-ripple>
<q-item-section>
@ -22,7 +22,7 @@
<q-item-label caption>{{order.address.city}}</q-item-label>
</q-item-section>
<q-item-section side top>
485.50
{{order.taxableBase | currency}}
</q-item-section>
</q-item>
</q-list>
@ -33,8 +33,7 @@
icon="add_shopping_cart"
color="accent"
:to="{name: 'catalog'}"
:title="$t('startOrder')"
/>
:title="$t('startOrder')"/>
</q-page-sticky>
</div>
</template>
@ -48,7 +47,7 @@ export default {
}
},
mounted () {
let params = { filter: {
let filter = {
where: {
clientFk: this.$state.userId,
isConfirmed: false
@ -56,8 +55,8 @@ export default {
include: 'address',
order: 'created DESC',
limit: 20
} }
this.$axios.get('Orders', { params })
}
this.$axios.get('Orders', { params: { filter } })
.then(res => (this.orders = res.data))
}
}

View File

@ -33,11 +33,22 @@ const routes = [
]
}, {
name: 'order',
path: '/order/:order',
component: () => import('pages/Order.vue')
path: '/order/:id',
component: () => import('pages/Order.vue'),
children: [
{
name: 'view',
path: 'view',
component: () => import('pages/OrderView.vue')
}, {
name: 'checkout',
path: 'checkout',
component: () => import('pages/OrderCheckout.vue')
}
]
}, {
name: 'ticket',
path: '/ticket/:ticket',
path: '/ticket/:id',
component: () => import('pages/Ticket.vue')
}, {
name: 'conditions',