feat: 增加页面空状态组件

components/me-empty/me-empty.vue

@@ -0,0 +1,40 @@
+<template>
+  <view class="me-empty flex-direction-column" :style="{marginTop}">
+    <view class="image"></view>
+    <view class="empty-text">{{text}}</view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    required: false,
+    default: '暂无任何数据',
+  },
+  marginTop: {
+    type: String,
+    required: false,
+    default: '176rpx',
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.me-empty {
+  .image {
+    width: 400rpx;
+    height: 400rpx;
+    background: var(--emptyData)
+  }
+
+  .empty-text {
+    width: 400rpx;
+    height: 72rpx;
+    font-size: 28rpx;
+    color: var(--contentColor30);
+    line-height: 72rpx;
+    text-align: center;
+  }
+}
+</style>

pages/index/index.vue

@@ -1,12 +1,14 @@
 <template>
   <IndexSkeleton v-if="data.is_show_skeleton"></IndexSkeleton>
-	<view v-else class="ctr">
+  <template v-else>
+    <view class="ctr">
       <view class="fixed-top">
         <me-top title="接单大厅"></me-top>
       </view>
 
       <me-empty-space :height="listMarginTop"></me-empty-space>
-    <view class="list">
+
+      <view class="list" v-if="data.list.length > 0">
         <view class="order-item" v-for="(item, index) in data.list" :key="index">
           <view class="top flex-sb">
             <view class="type flex-l" @click="toDetail(item.id)">{{item.order_info.item_title}}</view>
@@ -41,6 +43,8 @@
           </view>
         </view>
       </view>
+      <me-empty v-else text="暂无工单"></me-empty>
+
       <view class="refresh flex-c" @click="refreshStart()" hover-class="auto-mask-layer-radius100" hover-start-time="0" hover-stay-time="50">
         <view class="icon flex-c" :style="{ transform: `rotate(${refresh.rotate_deg}deg)` }">
           <me-icon type="icon-reset-left-line" color="#FFFFFF" size="60rpx"></me-icon>
@@ -48,6 +52,8 @@
       </view>
       <me-empty-space height="100"></me-empty-space>
     </view>
+  </template>
+
 </template>
 
 <script setup>

pages/workbench/workbench.vue

@@ -12,7 +12,8 @@
     </view>
 
     <me-empty-space :height="listMarginTop"></me-empty-space>
-    <view class="list">
+
+    <view class="list" v-if="data.list.length > 0">
       <view class="order-item" v-for="(item, index) in data.list" :key="index">
         <view class="top flex-sb">
           <view class="type flex-l" @click="toDetail(item.id)">{{item.order_info.item_title}}</view>
@@ -68,6 +69,8 @@
         </view>
       </view>
     </view>
+    <me-empty v-else text="暂无工单"></me-empty>
+
     <me-empty-space height="100"></me-empty-space>
   </view>
 </template>

theme/theme.scss

@@ -14,7 +14,7 @@
     --navbarBgColor: #FFFFFF; // 导航背景
 
     --defaultUserAvatar: url("/static/img/default-user.png") no-repeat center / 100%;
-    --emptyData: url("https://jl-td.oss-cn-chengdu.aliyuncs.com/uploads/20241018/fda50c010550e9a93311de89e1e0b0e1.png") no-repeat center / 100%;
+    --emptyData: url("https://allocatr.oss-cn-hangzhou.aliyuncs.com/uploads/20250421/831dbec0752dd56996789ba5ed4c5e10.png") no-repeat center / 100%;
 }
 
 @mixin dark-theme() {
@@ -33,7 +33,7 @@
     --navbarBgColor: #1D1D1D;
 
     --defaultUserAvatar: url("/static/img/default-user-dark.png") no-repeat center / 100%;
-    --emptyData: url("https://jl-td.oss-cn-chengdu.aliyuncs.com/uploads/20241018/6dbc6a080b19e70d3500e418db24eeb7.png") no-repeat center / 100%;
+    --emptyData: url("https://allocatr.oss-cn-hangzhou.aliyuncs.com/uploads/20250421/c1f8e22464c78e396aff3688d5970878.png") no-repeat center / 100%;
 }
 
 /*亮色模式-自动样式*/