cashier-mer/src/layout/myAside.vue

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, onUnmounted } from "vue";
import mitt from "@/utils/mitt.js";
import { useOrderStore } from "@/store/order.js";
import { merchantOrderCountApi } from "@/api/store.js";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();

const orderStore = useOrderStore();
// setInterval(()=>{
//   setOrderCount(+orderStore.orderCount + 1)
// }, 2000)

const setOrderCount = (e = 1) => {
  orderStore.setOrderCount(e)
  list.value.forEach(item=>{
    if(item.name == "order") item.count = e;
  })
};

let isPlaying = false;
const newOrder = (e) => {
  merchantOrderCountApi().then((res) => {
    setOrderCount(res?.data?.order_count || 0);
  });
  ElMessage.success('您有新的订单');
  if (isPlaying) return; //正在播放时有新订单直接跳过播放
  // 创建音频对象
  var audio = new Audio("/src/assets/order.mp3");
  // 播放音频
  audio.play();
  isPlaying = true;
  // 添加ended事件监听器来检测播放结束
  audio.addEventListener('ended', function() {
    isPlaying = false;
  });
};

// setTimeout(() => {
//   newOrder({
//     msg: "您有一笔新的订单",
//   });
// }, 3000);

const navTo = (name) => {
  router.push({ name });
};
const list = ref([
  { name: "saleHome", title: "收银", ico: "Sell", count: 0 },
  { name: "saleOrder", title: "收银订单", ico: "DataLine", count: 0 },
  {
    name: "order",
    title: "摊贩订单",
    ico: "DataAnalysis",
    count: +orderStore.orderCount,
  },
  { name: "purchaseOrder", title: "采购订单", ico: "Van", count: 0 },
  { name: "orderCount", title: "订单统计", ico: "DocumentRemove", count: 0 },
  { name: "wallet", title: "余额提现", ico: "Wallet", count: 0 },
  // { name: "test", title: "打印", ico: "Tickets", count: 0 },
]);
const aup = () => {
  let index = list.value.findIndex((item) => item.name == route.name);
  if (index == 0) index = list.value.length;
  if (index > 0) navTo(list.value[index - 1].name);
};
const adown = () => {
  let index = list.value.findIndex((item) => item.name == route.name);
  if (index == list.value.length - 1) index = -1;
  if (index < list.value.length - 1) navTo(list.value[index + 1].name);
};
onMounted(() => {
  mitt.on("up", aup);
  mitt.on("down", adown);
  mitt.on("new_order", newOrder);
  mitt.on("set-order-count-zero", ()=>{
    setOrderCount(0);
  });
  merchantOrderCountApi().then((res) => {
    setOrderCount(res?.data?.order_count || 0);
  });
});

onUnmounted(() => {
  mitt.off("aup", aup);
  mitt.off("adown", adown);
  mitt.off("new_order", newOrder);
  mitt.on("set-order-count-zero");
});
</script>

<template>
  <div class="my-card">
    <div
      v-for="item in list"
      :key="item.name"
      class="list-item"
      :class="{ active: route.name == item.name }"
      @click="navTo(item.name)"
    >
      <el-icon size="2rem">
        <component :is="item.ico" />
      </el-icon>
      <div>{{ item.title }}</div>
      <div v-if="item.count" class="badge">{{ item.count }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-card {
  width: 100%;
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.5rem;
  overflow: auto;
  .list-item {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.7rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.2rem;
    position: relative;

    &.active {
      background-color: #1890ff;
      transition: 300ms;
    }
    .badge {
      position: absolute;
      top: -0.5rem;
      right: -0.5rem;
      background-color: #ff4a00;
      font-size: 0.7rem;
      padding: 0.2rem 0.5rem;
      border-radius: 2rem;
    }
  }
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置轨道的背景色 */
  margin: 1.25rem 0;
}

/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 设置滑块的背景色 */
  border-radius: 0.315rem; /* 设置滑块的圆角 */
}

/* 设置滚动条鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
}
</style>