changes

app/components/pos/POS.vue

@@ -3,6 +3,8 @@ import ProductCard from "@/components/pos/ProductCard.vue";
 import SearchBox from "@/components/SearchBox.vue";
 
 const store = useStore();
+const { $numtoString } = useNuxtApp();
+
 function openModal() {
   store.showmodal = {
     component: "pos/ProductSelection",
@@ -12,28 +14,31 @@ function openModal() {
   };
 }
 
-const customer = ref(null);
-const paymentMethod = ref(null);
+const record = ref({
+  customer: null,
+  paymentMethod: null,
+});
+const subtotal = computed(() => {
+  return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
+});
 </script>
 
 <template>
-  <div class="card">
-    <div class="card-content">
-      <button
-        @click="openModal"
-        class="button is-primary"
-      >
-        <span class="icon">
-          <Icon
-            name="material-symbols:add-rounded"
-            :size="20"
-          />
-        </span>
-        <span>Chọn sản phẩm</span>
-      </button>
-    </div>
+  <div class="block">
+    <button
+      @click="openModal"
+      class="button is-primary"
+    >
+      <span class="icon">
+        <Icon
+          name="material-symbols:add-rounded"
+          :size="20"
+        />
+      </span>
+      <span>Chọn sản phẩm</span>
+    </button>
   </div>
-  <div class="fixed-grid has-12-cols">
+  <div class="fixed-grid has-1-cols-mobile has-12-cols">
     <div class="grid">
       <div class="cell is-col-span-8">
         <div class="card">
@@ -46,7 +51,6 @@ const paymentMethod = ref(null);
                 />
               </span>
               <span>Giỏ hàng</span>
-              <span>({{ store.selectedImeis.length }})</span>
             </p>
             <div
               v-if="store.selectedImeis.length > 0"
@@ -86,7 +90,6 @@ const paymentMethod = ref(null);
                   field: 'label',
                   column: ['label'],
                   first: true,
-                  clearable: true,
                   placeholder: 'Khách hàng',
                   addon: {
                     component: 'customer/CustomerQuickAdd',
@@ -94,7 +97,7 @@ const paymentMethod = ref(null);
                     height: 'auto',
                     title: 'Tạo khách hàng',
                   },
-                  onOption: (e) => (customer = e),
+                  onOption: (e) => (record.customer = e),
                 }"
               />
             </div>
@@ -118,14 +121,43 @@ const paymentMethod = ref(null);
                   field: 'name',
                   column: ['name'],
                   first: true,
-                  clearable: true,
                   placeholder: 'Phương thức thanh toán',
-                  onOption: (e) => (paymentMethod = e),
+                  onOption: (e) => (record.paymentMethod = e),
                 }"
               />
             </div>
           </div>
         </div>
+        <div class="card mb-3">
+          <div class="card-content">
+            <p class="icon-text fs-17 font-semibold mb-4">Tổng cộng</p>
+            <div>
+              <table class="table is-fullwidth fs-13">
+                <tbody>
+                  <tr>
+                    <td>
+                      <span>Tạm tính</span>
+                      <span> ({{ store.selectedImeis.length }} sản phẩm)</span>
+                    </td>
+                    <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
+                  </tr>
+                  <tr>
+                    <td class="font-bold fs-14">Tổng cộng</td>
+                    <td class="has-text-right has-text-success-35 font-bold fs-17">
+                      {{ $numtoString(subtotal, { hasUnit: true }) }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <button
+                class="button is-fullwidth is-success"
+                :disabled="!record.customer || !record.paymentMethod"
+              >
+                Thanh toán
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>