优化网站导航模块

modules/views/bak/cashier/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <a-page-header :title="`收银台`" @back="() => $router.go(-1)">
+    <div class="flex gap-5">
+      <!-- 载入购物车 -->
+      <Cart
+        :spinning="spinning"
+        :loginUser="loginUser"
+        :cashier="cashier"
+        :count="cashier?.totalNums"
+        @group="openGroupForm"
+        @reload="reload"
+        @pay="onPay"
+      />
+      <!-- 商品搜索 -->
+      <Goods :loginUser="loginUser" @reload="reload" />
+      <!-- 取单 -->
+      <GroupForm v-model:visible="showCashierForm" @done="reload" />
+      <!-- 支付结算 -->
+      <Pay v-model:visible="showPayForm" :data="cashier" @done="reload" />
+    </div>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue';
+  import GroupForm from './components/group.vue';
+  import Cart from './components/cashier.vue';
+  import Goods from './components/goods.vue';
+  import Pay from './components/pay.vue';
+  import * as CashierApi from '@/api/shop/cashier';
+  import { useUserStore } from '@/store/modules/user';
+  import { CashierVo } from '@/api/shop/cashier/model';
+
+  // 当前用户信息
+  const userStore = useUserStore();
+  const loginUser = computed(() => userStore.info ?? {});
+  const cashier = ref<CashierVo>({});
+
+  // 加载中状态
+  const spinning = ref<boolean>(true);
+  const showCashierForm = ref<boolean>(false);
+  const showPayForm = ref<boolean>(false);
+
+  const openGroupForm = () => {
+    showCashierForm.value = true;
+  };
+
+  const onPay = () => {
+    showPayForm.value = true;
+  };
+
+  /* 加载数据 */
+  const reload = () => {
+    spinning.value = true;
+    CashierApi.listCashier({ groupId: 0 })
+      .then((data) => {
+        if (data) {
+          cashier.value = data;
+        }
+      })
+      .finally(() => {
+        spinning.value = false;
+      });
+  };
+
+  watch(
+    () => {},
+    () => {
+      reload();
+    },
+    { immediate: true }
+  );
+</script>