我的工单任务数量角标显示

wuye-manager-uniapp/pages/index/index.vue

@@ -105,12 +105,13 @@
               @click="handleFunctionClick(item)"
               v-if="permStore.hasPermi(item.permKey)"
             >
-              <image
-                class="item-icon"
-                :src="item.icon"
-                mode="aspectFit"
-              ></image>
+              <image class="item-icon" :src="item.icon" mode="aspectFit"></image>
               <text class="item-text">{{ item.text }}</text>
+              <view
+                v-if="item.permKey === 'butler:workOrder:mine' && MyOrderNum > 0"
+                class="todoNum"
+                >{{ MyOrderNum > 99 ? '99' : MyOrderNum }}</view
+              >
             </view>
           </template>
         </view>
@@ -126,7 +127,8 @@ import {
   getCurrentVillage,
   getTodayInspection,
   getNewNoticeData,
-  getBannarList
+  getBannarList,
+  myOrderCount
 } from '../../api/api.js'
 
 import { usePermStore } from '@/stores/usePermStore'
@@ -273,7 +275,7 @@ const actionMap = {
   goToRevenueStatistics
 }
 
-const handleFunctionClick = (item) => {
+const handleFunctionClick = item => {
   const handler = actionMap[item.action]
   if (handler) handler()
 }
@@ -346,6 +348,22 @@ function getbannarData() {
     })
 }
 
+const MyOrderNum = ref(0)
+// 查询我的工单-待办数量
+function getMyOrderNum() {
+  myOrderCount()
+    .then(res => {
+      if (res.code === 200 && res.data) {
+        MyOrderNum.value = res.data
+      } else {
+        MyOrderNum.value = 0
+      }
+    })
+    .catch(() => {
+      MyOrderNum.value = 0
+    })
+}
+
 // 接收选择小区返回的参数
 const slelctHomeData = data => {
   currentCommunity.value = data.villageName
@@ -359,6 +377,7 @@ onShow(() => {
   getbannarData()
   getInspectionData()
   currentVillageData()
+  getMyOrderNum()
   permStore.initPerm()
 })
 
@@ -376,6 +395,20 @@ onUnload(() => {
 </script>
 
 <style lang="scss" scoped>
+.todoNum {
+  position: absolute;
+  top: 0rpx;
+  right: 17%;
+  min-width: 30rpx;
+  height: 30rpx;
+  background: #f53f3f;
+  color: #fff;
+  text-align: center;
+  font-size: 10rpx;
+  line-height: 30rpx;
+  border-radius: 50%;
+  padding: 3rpx;
+}
 .content-class {
   background-color: #f9f9f9;
   min-height: 100vh;
@@ -620,6 +653,7 @@ onUnload(() => {
   align-items: center;
   justify-content: center;
   padding: 10rpx 0;
+  position: relative;
 }
 
 /* 功能图标样式 */