新增批发订单模拟待处理数量标点

src/layout/myAside.vue

@@ -1,25 +1,34 @@
 <script setup>
-import { useRoute, useRouter } from 'vue-router'
-import { ref, onMounted, onUnmounted  } from 'vue'
+import { useRoute, useRouter } from "vue-router";
+import { ref, onMounted, onUnmounted } from "vue";
 import mitt from "@/utils/mitt.js";
 
-const router = useRouter()
-const route = useRoute()
+const router = useRouter();
+const route = useRoute();
 
 const navTo = (name) => {
-    router.push({ name })
-}
-const list = ref(['home', 'order', 'orderSystem', 'saleHome', 'saleOrder', 'convert', 'shop', 'orderCount']);
-const aup = ()=>{
-    let index = list.value.indexOf(route.name);
-    if(index==0) index = list.value.length;
-    if(index>0) navTo(list.value[index-1]);
-}
-const adown = ()=>{
-    let index = list.value.indexOf(route.name);
-    if(index==list.value.length-1) index = -1;
-    if(index<list.value.length-1) navTo(list.value[index+1]);
-}
+  router.push({ name });
+};
+const list = ref([
+  { name: "home", title: "收银", ico: "Sell", count: 0 },
+  { name: "order", title: "收银订单", ico: "DataLine", count: 0 },
+  { name: "orderSystem", title: "平台订单", ico: "DataAnalysis", count: 0 },
+  { name: "saleHome", title: "批发", ico: "Van", count: 0 },
+  { name: "saleOrder", title: "批发订单", ico: "Tickets", count: 1 },
+  { name: "convert", title: "核销", ico: "FullScreen", count: 0 },
+  { name: "shop", title: "商品", ico: "ShoppingBag", count: 0 },
+  { name: "orderCount", title: "订单统计", ico: "PieChart", 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);
@@ -29,72 +38,61 @@ onUnmounted(() => {
   mitt.off("aup", aup);
   mitt.off("adown", adown);
 });
-
 </script>
 
-
 <template>
-    <div class="my-card">
-        <div class="list-item" :class="{'active': route.name=='home'}" @click="navTo('home')">
-            <el-icon size="2rem"><Sell /></el-icon>
-            <div>收银</div>
-        </div>
-        <div class="list-item" :class="{'active': route.name=='order'}" @click="navTo('order')">
-            <el-icon size="2rem"><DataLine /></el-icon>
-            <div>收银订单</div>
-        </div>
-        <div class="list-item" :class="{'active': route.name=='orderSystem'}" @click="navTo('orderSystem')">
-            <el-icon size="2rem"><DataAnalysis /></el-icon>
-            <div>平台订单</div>
-        </div>
-        <div class="list-item" :class="{'active': route.name=='saleHome'}" @click="navTo('saleHome')">
-            <el-icon size="2rem"><Van /></el-icon>
-            <div>批发</div>
-        </div>
-        <div class="list-item" :class="{'active': route.name=='saleOrder'}" @click="navTo('saleOrder')">
-            <el-icon size="2rem"><Tickets /></el-icon>
-            <div>批发订单</div>
-        </div>
-        <div class="list-item" :class="{'active': route.name=='convert'}" @click="navTo('convert')">
-            <el-icon size="2rem"><FullScreen /></el-icon>
-            <div>核销</div>
-        </div>
-        <div class="list-item" :class="{'active': route.name=='shop'}" @click="navTo('shop')">
-            <el-icon size="2rem"><ShoppingBag /></el-icon>
-            <div>商品</div>
-        </div>
-        <div class="list-item" :class="{'active': route.name=='orderCount'}" @click="navTo('orderCount')">
-            <el-icon size="2rem"><Coin /></el-icon>
-            <div>统计</div>
-        </div>
+  <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);
+.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;
-    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;
+    margin-bottom: 1.2rem;
+    position: relative;
 
-        &.active {
-            background-color: #1890ff;
-            transition: 300ms;
-        }
+    &.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 {

src/views/saleOrder/component/order.vue

@@ -200,6 +200,7 @@ onMounted(()=>{
               <span v-if="item.pay_type == 1">(微信支付)</span>
               <span v-if="item.pay_type == 9">(商户余额支付)</span>
               <span v-if="item.pay_type == 10">(对公转账)</span>
+              <span class="manage-btn">待处理</span>
             </div>
             <div v-else style="color: #ff4a00">未支付</div>
           </div>
@@ -335,6 +336,13 @@ onMounted(()=>{
         justify-content: space-between;
         font-size: 0.9rem;
         color: #777;
+        .manage-btn{
+          color: #fff;
+          background-color: #e6a23c;
+          border-radius: 0.2rem;
+          padding: 0 0.2rem;
+          margin-left: 0.5rem;
+        }
       }
     }
     .item-active {