src/pages/Ecomerce/BasketView.vue

@@ -1,14 +1,106 @@
 <script setup>
-import { onBeforeMount } from 'vue';
+import { onBeforeMount, ref, inject, onMounted } from 'vue';
 
 import { useAppStore } from 'stores/app';
+import TicketDetails from 'src/pages/Ecomerce/TicketDetails.vue';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
 
+const jApi = inject('jApi');
 const appStore = useAppStore();
+const route = useRoute();
+const { basketOrderId } = storeToRefs(appStore);
+
+const rows = ref([]);
+const ticket = ref({});
+const orderId = ref(null);
+
+const getOrder = async () => {
+    try {
+        const [data] = await jApi.query(
+            `SELECT o.id, o.sent,
+            ag.description agency, v.code method,
+            ad.nickname, ad.postalCode, ad.city, ad.street
+            FROM myOrder o
+            JOIN vn.agencyMode ag ON ag.id = o.agencyModeFk
+            LEFT JOIN myAddress ad ON ad.id = o.addressFk
+            JOIN vn.deliveryMethod v ON v.id = o.deliveryMethodFk
+            WHERE o.id = #id;`,
+            { id: orderId.value }
+        );
+        const { sent, method, agency, id, nickname, street, postalCode, city } =
+            data;
+        const taxBase = rows.value.reduce(
+            (acc, row) => acc + row.price * row.quantity,
+            0
+        );
+        const formattedData = {
+            id,
+            landed: new Date(sent),
+            agency,
+            method,
+            nickname,
+            street,
+            postalCode,
+            city,
+            taxBase
+        };
+        ticket.value = formattedData;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getItems = async () => {
+    try {
+        const data = await jApi.query(
+            `SELECT bi.id, bi.amount, bi.price, i.longName item,
+            i.tag5, i.value5, i.tag6, i.value6, i.tag7, i.value7,
+            i.image, im.updated
+						FROM myOrderRow bi
+            JOIN vn.item i ON i.id = bi.itemFk
+            LEFT JOIN image im
+            ON im.collectionFk = 'catalog'
+            AND im.name = i.image
+						WHERE orderFk = #id`,
+            { id: orderId.value }
+        );
+        console.log('data', data);
+
+        const formattedData = data.map(i => {
+            const { amount: quantity, ...item } = i;
+
+            const formattedItem = {
+                quantity,
+                ...item
+            };
+            return formattedItem;
+        });
+
+        rows.value = formattedData;
+    } catch (error) {
+        console.error(error);
+    }
+};
 
 onBeforeMount(() => {
     appStore.check();
 });
+
+onMounted(async () => {
+    orderId.value = route.params.id || basketOrderId.value;
+    await getItems();
+    await getOrder();
+});
 </script>
+
 <template>
-    <div>basket view</div>
+    <div>
+        <TicketDetails
+            :rows="rows"
+            :ticket="ticket"
+            is-basket
+            :show-tax="false"
+        />
+    </div>
 </template>

src/pages/Ecomerce/TicketDetails.vue

@@ -11,6 +11,10 @@ defineProps({
     rows: {
         type: Array,
         default: () => []
+    },
+    showTax: {
+        type: Boolean,
+        default: true
     }
 });
 
@@ -33,15 +37,15 @@ const lineSubtotal = line =>
             <div class="text-subtitle1 text-bold">
                 {{ t('shippingInformation') }}
             </div>
-            <div>
+            <div v-if="ticket.shipped">
                 {{ t('preparation') }}
                 {{ formatDateTitle(ticket.shipped) }}
             </div>
-            <div>
+            <div v-if="ticket.landed">
                 {{ t('delivery') }}
                 {{ formatDateTitle(ticket.landed) }}
             </div>
-            <div>
+            <div v-if="ticket.method && ticket.agency">
                 {{ t(ticket.method != 'PICKUP' ? 'agency' : 'warehouse') }}
                 {{ ticket.agency }}
             </div>
@@ -53,9 +57,10 @@ const lineSubtotal = line =>
             <div>{{ ticket.nickname }}</div>
             <div>{{ ticket.street }}</div>
             <div>
-                {{ ticket.postalCode }} {{ ticket.city }} ({{
-                    ticket.province
-                }})
+                <span v-if="ticket.postalCode || ticket.city">
+                    {{ ticket.postalCode }}, {{ ticket.city }}
+                </span>
+                <span v-if="ticket.province"> ({{ ticket.province }})</span>
             </div>
         </QCardSection>
         <QCardSection
@@ -64,13 +69,13 @@ const lineSubtotal = line =>
             <span class="text-right">
                 {{ t('total') }} {{ currency(ticket.taxBase) }}
             </span>
-            <span class="text-right">
+            <span v-if="showTax" class="text-right">
                 {{ t('totalTax') }} {{ currency(ticket.total) }}
             </span>
         </QCardSection>
         <QSeparator inset />
-        <QList v-for="row in rows" :key="row.itemFk">
-            <QItem>
+        <QList v-for="(row, index) in rows" :key="index">
+            <QItem v-if="row">
                 <QItemSection avatar>
                     <VnImg
                         storage="catalog"
@@ -80,23 +85,28 @@ const lineSubtotal = line =>
                     />
                 </QItemSection>
                 <QItemSection>
-                    <QItemLabel lines="1">
+                    <QItemLabel v-if="row.concept" lines="1">
                         {{ row.concept }}
                     </QItemLabel>
+                    <QItemLabel v-if="row.item" lines="1">
+                        {{ row.item }}
+                    </QItemLabel>
                     <QItemLabel lines="1" caption>
                         {{ row.value5 }} {{ row.value6 }} {{ row.value7 }}
                     </QItemLabel>
                     <QItemLabel lines="1">
-                        {{ row.quantity }} x {{ currency(row.price) }}
+                        {{ row.quantity }} x
+                        {{ currency(row.price) }}
                     </QItemLabel>
                 </QItemSection>
                 <QItemSection side class="total">
                     <QItemLabel>
+                        <span> {{ currency(lineDiscountSubtotal(row)) }}</span>
                         <span class="discount" v-if="row.discount">
-                            {{ currency(lineDiscountSubtotal(row)) }} -
+                            -
                             {{ currency(row.discount) }} =
+                            {{ currency(lineSubtotal(row)) }}
                         </span>
-                        {{ currency(lineSubtotal(row)) }}
                     </QItemLabel>
                 </QItemSection>
             </QItem>