render order detail page

thuongtruong1009 · Jun 5, 2022 · b7960d0 · b7960d0
1 parent 5ae4715
commit b7960d0
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 92 deletions.
diff --git a/locales/en.yml b/locales/en.yml
@@ -195,7 +195,6 @@ account:
   order-no: No
   order-name: Name
   order-date: Date
-  order-status: Status
   order-total: Total
   order-action: Action
   save-changes: Save changes

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -11,7 +11,6 @@ declare module 'vue' {
     CarbonLanguage: typeof import('~icons/carbon/language')['default']
     CarbonMoon: typeof import('~icons/carbon/moon')['default']
     CarbonSun: typeof import('~icons/carbon/sun')['default']
-    CarbonWarning: typeof import('~icons/carbon/warning')['default']
     CASellerList: typeof import('./components/admin/CASellerList.vue')['default']
     CBAccount: typeof import('./components/buyer/CBAccount.vue')['default']
     CBBanner: typeof import('./components/buyer/CBBanner.vue')['default']
@@ -83,6 +82,7 @@ declare module 'vue' {
     IBMinus: typeof import('./components/icons/product/IBMinus.vue')['default']
     IBook: typeof import('./components/icons/about/IBook.vue')['default']
     IBOrder: typeof import('./components/icons/account/IBOrder.vue')['default']
+    IBOrderArrowRight: typeof import('./components/icons/account/IBOrderArrowRight.vue')['default']
     IBPassword: typeof import('./components/icons/auth/IBPassword.vue')['default']
     IBPayment: typeof import('./components/icons/account/IBPayment.vue')['default']
     IBPlus: typeof import('./components/icons/product/IBPlus.vue')['default']
@@ -94,6 +94,7 @@ declare module 'vue' {
     IBShipping: typeof import('./components/icons/services/IBShipping.vue')['default']
     IBSupport: typeof import('./components/icons/services/IBSupport.vue')['default']
     IBThreeDot: typeof import('./components/icons/product/IBThreeDot.vue')['default']
+    IBTrackOrder: typeof import('./components/icons/account/IBTrackOrder.vue')['default']
     IBUnlock: typeof import('./components/icons/auth/IBUnlock.vue')['default']
     IBUsername: typeof import('./components/icons/auth/IBUsername.vue')['default']
     ICake: typeof import('./components/icons/ICake.vue')['default']

diff --git a/src/components/icons/account/IBOrderArrowRight.vue b/src/components/icons/account/IBOrderArrowRight.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16m-7-7l7 7l-7 7" /></svg>
+</template>
diff --git a/src/components/icons/account/IBTrackOrder.vue b/src/components/icons/account/IBTrackOrder.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22q-2.075 0-3.9-.788q-1.825-.787-3.175-2.137q-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175q1.35-1.35 3.175-2.138Q9.925 2 12 2h.25q.325 0 .538.212q.212.213.212.538v7.525q.45.275.725.712Q14 11.425 14 12q0 .825-.587 1.412Q12.825 14 12 14q-.825 0-1.412-.588Q10 12.825 10 12q0-.575.275-1.025q.275-.45.725-.7v-2.15q-1.3.35-2.15 1.412Q8 10.6 8 12q0 1.65 1.175 2.825Q10.35 16 12 16q1.65 0 2.825-1.175Q16 13.65 16 12q0-.575-.162-1.138q-.163-.562-.488-1.062q-.225-.35-.187-.688q.037-.337.287-.587q.3-.3.762-.3q.463 0 .738.4q.55.8.8 1.662Q18 11.15 18 12q0 2.5-1.75 4.25T12 18q-2.5 0-4.25-1.75T6 12q0-2.25 1.425-3.912Q8.85 6.425 11 6.075V4.05q-2.975.375-4.987 2.625Q4 8.925 4 12q0 3.35 2.325 5.675Q8.65 20 12 20q3.35 0 5.675-2.325Q20 15.35 20 12q0-1.475-.425-2.65q-.425-1.175-1.2-2.175q-.275-.35-.262-.75q.012-.4.312-.7q.3-.3.713-.3q.412 0 .662.325q1.05 1.275 1.625 2.825Q22 10.125 22 12q0 2.075-.788 3.9q-.787 1.825-2.137 3.175q-1.35 1.35-3.175 2.137Q14.075 22 12 22Z" /></svg>
+</template>
diff --git a/src/data/order_id.json b/src/data/order_id.json
@@ -1,4 +1,6 @@
- {
+{
+  "status": true,
+  "data": {
     "id": 4,
     "name": "M220 Silent Wireless Mouse 1600DPI Optical Tracking accessories mice wireless mouse wireless gaming mice computer mouse",
     "variations": [
@@ -18,7 +20,7 @@
     "product": {
       "id": 25,
       "name": "M220 Silent Wireless Mouse 1600DPI Optical Tracking accessories mice wireless mouse wireless gaming mice computer mouse",
-      "description": "M220 Silent Wireless Mouse 1600DPI Optical Tracking accessories mice wireless mouse wireless gaming mice computer mouse wireless bluetooth wireless gaming mouse wireless mouse silent blue tooth mouse\\nSpecification\\nModel: M220\\nType：wireless mouse\\nColor：black / red / blue\\nWireless transmission frequency:：2.4GHz\\nNumber of buttons：3\\nInterface：USB\\nResolution：1600DPI\\nOperating distance：10 m\\nBattery type：AA\\nErgonomics：Yes\\nApplicable system：Windows 10 or Higher version / Windows 8 / Windows RT / Windows 7 / Mac OS X 10.5 or Higher version / Chrome OS / Linus Kernel 2.6+2\\nMouse size：99 * 60 * 39 mm\\nWeight of mouse (including battery) ：85g\\naccessories mice wireless mouse wireless gaming mice computer mouse ergonomic mouse wireless bluetooth wireless gaming mouse wireless mouse silent blue tooth mouse",
+      "description": "M220 Silent Wireless Mouse 1600DPI Optical Tracking accessories mice wireless mouse wireless gaming mice computer mouse wireless bluetooth wireless gaming mouse wireless mouse silent blue tooth mouse\\nSpecification\\nModel: M220\\nType\uff1awireless mouse\\nColor\uff1ablack \/ red \/ blue\\nWireless transmission frequency:\uff1a2.4GHz\\nNumber of buttons\uff1a3\\nInterface\uff1aUSB\\nResolution\uff1a1600DPI\\nOperating distance\uff1a10 m\\nBattery type\uff1aAA\\nErgonomics\uff1aYes\\nApplicable system\uff1aWindows 10 or Higher version \/ Windows 8 \/ Windows RT \/ Windows 7 \/ Mac OS X 10.5 or Higher version \/ Chrome OS \/ Linus Kernel 2.6+2\\nMouse size\uff1a99 * 60 * 39 mm\\nWeight of mouse (including battery) \uff1a85g\\naccessories mice wireless mouse wireless gaming mice computer mouse ergonomic mouse wireless bluetooth wireless gaming mouse wireless mouse silent blue tooth mouse",
       "weight": "5000",
       "avg_rating": "0",
       "sold": 0,
@@ -58,4 +60,5 @@
         "status_id": 1
       }
     ]
-  }
+  }
+}
diff --git a/src/layouts/buyer/LBOrder.vue b/src/layouts/buyer/LBOrder.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="text-center text-gray-700 dark:(text-gray-200 bg-$dark-bg) overflow-x-hidden">
+  <main class="text-gray-700 dark:(text-gray-200 bg-$dark-bg) overflow-x-hidden">
     <CBHeaderTop />
     <CBHead />
     <router-view />

diff --git a/src/pages/buyer/account/orders.vue b/src/pages/buyer/account/orders.vue
@@ -9,9 +9,7 @@ import { useLoading } from '~/stores/loading'
 import { toast } from '~/stores/toast'
 import { useUser } from '~/stores/user'
 import { useOrder } from '~/stores/order'
-import { orderStatus } from '~/utils/status'
 import OrderRequest from '~/services/order-request'
-import { handleDate } from '~/utils/date'
 
 useHead({
   title: 'buyer | orders',
@@ -59,9 +57,6 @@ const trackOrder = (order_id) => {
           <tr>
             <th>{{ t('account.order-no') }}</th>
             <th>{{ t('account.order-name') }}</th>
-            <th>{{ t('account.order-date') }}</th>
-            <th>{{ t('account.order-status') }}</th>
-            <th>Quantity</th>
             <th>{{ t('account.order-total') }}</th>
             <th>{{ t('account.order-action') }}</th>
           </tr>
@@ -71,13 +66,12 @@ const trackOrder = (order_id) => {
           <tr v-for="(item, index) in order.payget" :key="index">
             <td>{{ index+1 }}</td>
             <td>{{ item.name }}</td>
-            <td>{{ handleDate(item.created_at) }}</td>
-            <td>{{ orderStatus(item.status_id) }}</td>
-            <td>{{ item.quantity }}</td>
-            <td>${{ item.total }}</td>
+            <td class="text-red-500 font-medium">
+              ${{ item.total }}
+            </td>
             <td>
-              <button type="button" class="text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:(bg-gradient-to-l from-teal-200 to-lime-200) focus:(ring-2 focus:ring-lime-200) dark:focus:ring-teal-700 font-medium rounded-lg text-sm px-5 py-1.75 text-center mr-2 mb-2" @click="trackOrder(item.id)">
-                Track
+              <button type="button" class="text-gray-700 bg-gradient-to-r from-teal-200 to-lime-200 hover:(bg-gradient-to-l from-teal-200 to-lime-200) focus:(ring-2 focus:ring-lime-200) dark:focus:ring-teal-700 font-medium rounded-lg text-sm px-5 py-1.75 text-center mr-2 mb-2 flex items-center gap-1" @click="trackOrder(item.id)">
+                <IBTrackOrder /> Track
               </button>
             </td>
           </tr>

diff --git a/src/pages/buyer/order/[order].vue b/src/pages/buyer/order/[order].vue
@@ -6,64 +6,151 @@ meta:
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useOrder } from '~/stores/order'
+import { handleDate } from '~/utils/date'
+import { useProduct } from '~/stores/product'
+import { getResources } from '~/utils/resources'
 import OrderRequest from '~/services/order-request'
+import IBOrderArrowRight from '~/components/icons/account/IBOrderArrowRight.vue'
 
 const router = useRouter()
 const order = useOrder()
+const product = useProduct()
+const { t } = useI18n()
 useHead({
   title: `order | ${order.savedOrder}`,
 })
 
+const statusPercent = (status_id: number) => {
+  switch (status_id) {
+    case 1:
+      return 10
+    case 2:
+      return 29
+    case 3:
+      return 51
+    case 4:
+      return 75
+    case 5:
+      return 99
+    default:
+      return 0
+  }
+}
+const payget = ref([])
+const orderImg = ref('')
 onMounted(async() => {
   const { data: orderData } = await OrderRequest.getOrdersById(order.savedOrder)
-  order.resultOrder = orderData
+  payget.value = orderData
+  order.orderVariation = orderData.product.variations[0]
+  order.orderAddress = orderData.received_address
+  orderImg.value = getResources(orderData.product.images[0])
 })
 watchEffect(() => {
   order.setNewOrder(order.savedOrder)
 })
+// ------------------- VISIST PRODUCT DETAIL --------------
+const onVisitProduct = (prod_id: number, shop_id: number) => {
+  product.productRequestID = prod_id
+  product.shopRequestID = shop_id
+  router.push(`/product/${encodeURIComponent(prod_id)}`)
+}
 
 </script>
 
 <template>
-  <div class="order_detail_view flex p-10">
-    <div class="container bg-white rounded-2xl shadow-md shadow-gray-300 w-300 max-w-300 grid grid-cols-2 m-auto p-10 h-max">
-      <div>
-        <div class="hero-img-container flex justify-center items-center relative">
+  <div class="order_detail_view flex p-10 bg-[#CFDBEA] dark:bg-gray-900">
+    <div class="container bg-white dark:bg-gray-800 rounded-2xl shadow-md shadow-gray-300 dark:shadow-gray-600 w-300 max-w-300 grid grid-cols-5 m-auto p-10 h-max">
+      <div class="col-span-2">
+        <div class="text-2xl text-red-400 font-medium text-center">
+          <h1>Order check detail</h1>
+        </div>
+        <div class="hero-img-container flex justify-center items-center relative py-5">
           <div class="triangle1" />
-          <div class="arc inline-block border-1 border-solid border-[#000] rounded-full border-t-transparent border-l-transparent border-b-transparent opacity-40 absolute min-w-50 min-h-50 left-2" style="transform: rotate(40deg);" />
+          <div class="arc inline-block border-1 border-solid border-[#000] rounded-full border-t-transparent border-r-transparent border-b-transparent opacity-40 absolute min-w-50 min-h-50 left-0 top-7" style="transform: rotate(-15deg);" />
           <div class="pattern" />
-          <img src="https://drive.google.com/uc?id=15iXUI6DkRr5Zcp0yH5uF2U47ycr-WzUY" class="hero-img w-1/2">
-        </div>
-        <div class="text-lg font-medium">
-          <h1>Order Page Detail</h1>
+          <img src="https://drive.google.com/uc?id=15iXUI6DkRr5Zcp0yH5uF2U47ycr-WzUY" class="hero-img w-2/3">
         </div>
       </div>
 
-      <div class="grid">
-        <div class="order-status-container flex justify-between items-center relative text-sm font-medium">
-          <div class="status-item first">
+      <div class="col-span-3 grid">
+        <div class="order-status-container flex justify-between items-start relative text-sm font-medium">
+          <div class="status-item first before:(content-\00a0 h-1 bg-[#5858EF] absolute top-3 left-0 rounded-lg)" :class="`before:w-[${statusPercent(payget.status_id)}%]`" :style="[statusPercent(payget.status_id)>= 10 ? {'opacity':'1'} : {'opacity': '0.6'}]">
             <div class="status-circle" />
             <p>Processing</p>
           </div>
-          <div class="status-item second">
+          <div class="status-item second before:(content-\00a0 h-1 w-full top-3 left-0 opacity-20 absolute bg-[#5858EF] rounded-lg)" :style="[statusPercent(payget.status_id)>= 29 ? {'opacity':'1'} : {'opacity': '0.7'}]">
             <div class="status-circle" />
             <p>Ready</p>
           </div>
-          <div class="status-item third">
+          <div class="status-item" :style="[statusPercent(payget.status_id)>= 51 ? {'opacity':'1'} : {'opacity': '0.6'}]">
             <div class="status-circle" />
             <p>Shipping</p>
           </div>
-          <div class="status-item fourth">
+          <div class="status-item" :style="[statusPercent(payget.status_id)>= 75 ? {'opacity':'1'} : {'opacity': '0.6'}]">
             <div class="status-circle" />
             <p>Delivered</p>
           </div>
-          <div class="status-item">
+          <div class="status-item" :style="[statusPercent(payget.status_id)>= 99 ? {'opacity':'1'} : {'opacity': '0.6'}]">
             <div class="status-circle" />
             <p>Cancelled</p>
           </div>
         </div>
 
-        <div class="w-20 h-1 rounded-md bg-[#EAEBFF]" />
+        <div class="mt-10">
+          <div class="flex justify-between gap-2">
+            <div class="grid">
+              <div class="flex justify-between">
+                <div>
+                  <p class="text-green-500 text-sm">
+                    {{ t('account.order-date') }}: {{ handleDate(payget.created_at) }}
+                  </p>
+                  <p class="text-gray-400 text-xs">
+                    Order ID: {{ payget.id }}
+                  </p>
+                  <p class="text-gray-400 text-xs">
+                    Product ID: {{ payget.product_id }}
+                  </p>
+                </div>
+                <div class="text-right">
+                  <p class="text-red-500 font-medium">
+                    {{ t('account.order-total') }}: ${{ payget.total }}
+                  </p>
+                  <p class="text-xs">
+                    Quantity: {{ payget.quantity }}
+                  </p>
+                  <p class="text-xs">
+                    {{ order.orderVariation.name }}: {{ order.orderVariation.options }}
+                  </p>
+                </div>
+              </div>
+              <div class="font-medium text-base">
+                <h5>{{ payget.name }}</h5>
+              </div>
+            </div>
+            <div>
+              <img :src="orderImg" alt="product_order_img" class="max-w-45 max-h-45 rounded-xl cursor-pointer border-1" @click="onVisitProduct(payget.product_id, payget.shop_id)">
+            </div>
+          </div>
+          <div class="flex justify-between">
+            <div>
+              <p class="text-xs text-red-300">
+                Address
+              </p>
+              <div class="text-sm text-gray-500">
+                <p>
+                  Name: {{ order.orderAddress.full_name }}
+                </p>
+                <p>Phone: {{ order.orderAddress.phone }}</p>
+                <p>Address: {{ order.orderAddress.address }}, {{ order.orderAddress.town }}, {{ order.orderAddress.city }}, {{ order.orderAddress.state }}</p>
+              </div>
+            </div>
+            <div class="flex justify-center items-end">
+              <button type="button" class="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:(ring-2 ring-purple-300) dark:focus:ring-purple-800 font-medium rounded-lg text-sm px-5 py-2 text-center mr-2 flex items-center gap-1" @click="onVisitProduct(payget.product_id, payget.shop_id)">
+                <IBOrderArrowRight /> See product
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -74,7 +161,6 @@ watchEffect(() => {
 .order_detail_view {
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
-    background-color: #CFDBEA;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -93,38 +179,30 @@ watchEffect(() => {
 .pattern {
   width: 50px;
   height: 50px;
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8Y2lyY2xlIGN4PSc0JyBjeT0nNCcgcj0nNCcgZmlsbD0nYmxhY2snLz4KPC9zdmc+");
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScgLz4KICA8Y2lyY2xlIGN4PSc0JyBjeT0nNCcgcj0nNCcgZmlsbD0nYmxhY2snLz4KPC9zdmc+");
   opacity: 0.1;
   position: absolute;
-  right: 30px;
-  top: 30px;
-  transform: scale(1.2);
+  right: 2rem;
+  top: 2rem;
 }
 
 .triangle1 {
   width: 0;
-height: 0;
-border-style: solid;
-border-width: 0 10px 20px 10px;
-border-color: transparent transparent #767EEF transparent;
+  height: 0;
+  border-style: solid;
+  border-width: 0 10px 20px 10px;
+  border-color: transparent transparent #767EEF transparent;
   position: absolute;
-  top: 50px;
-  left: 5rem;
-  transform:rotate(-45deg);
-}
-.order-status {
-  color: #338A9A;
-  font-size: 0.9rem;
-  font-weight: 700;
-  letter-spacing: 0.5px;
+  top: 3.8rem;
+  left: 0.7rem;
+  transform: rotate(36deg);
 }
 .status-item {
   display:flex;
   flex-direction:column;
   justify-content: flex-start;
-  align-items: center;
-  height: 150px;
-  padding-top: 20px;
+  align-items: end;
+  height: fit-content;
 }
 
 .status-circle {
@@ -134,46 +212,15 @@ border-color: transparent transparent #767EEF transparent;
   border-radius: 50%;
   border: 5px solid white;
   box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-  z-index: 5;
+  z-index: 2;
   transition: all 0.2s;
   cursor: pointer;
+  margin-bottom: 0.5rem;
 }
 
 .status-circle:hover {
   transform: scale(1.2);
   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 }
 
-.first::before {
-    content:'';
-    height: 4px;
-    width: 70px;
-    background-color: #5858EF;
-    position:absolute;
-    z-index:4;
-    top: 83px;
-    left: 60px;
-}
-
-.second::before {
-    content:'';
-    height: 4px;
-    width: 210px;
-    background-color: #5858EF;
-    position:absolute;
-    z-index:4;
-    top: 83px;
-    left: 100px;
-    opacity:0.2;
-}
-.third::before{
-    content:'';
-    height: 4px;
-    width: 70px;
-    background-color: #5858EF;
-    position:absolute;
-    z-index:4;
-    top: 83px;
-    left: 260px;
-}
 </style>