From 1ff13f07ea1e37a1f5dd378d0c4ae1d34a687a5e Mon Sep 17 00:00:00 2001
From: wangyx <2838268875@qq.com>
Date: Fri, 15 Aug 2025 17:17:28 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/tabBar/work/index.vue |  12 +-
 pagesA/bsPage/bsHandle.vue  |  65 ++--
 pagesA/bsPage/bsRecord.vue  | 626 ++++++++++++++++++++++++++----------
 3 files changed, 510 insertions(+), 193 deletions(-)

diff --git a/pages/tabBar/work/index.vue b/pages/tabBar/work/index.vue
index 27ed29c..1683166 100644
--- a/pages/tabBar/work/index.vue
+++ b/pages/tabBar/work/index.vue
@@ -124,8 +124,8 @@ export default {
       // { image: '/static/img/处理.png', text: '处理' },
       // ],
       bsList: [
-      { image: '/static/img/上报.png', text: '问题上报' },
-      { image: '/static/img/处理.png', text: '问题处理' },
+        { image: "/static/img/上报.png", text: "问题上报" },
+        { image: "/static/img/处理.png", text: "问题处理" },
       ],
     };
   },
@@ -207,15 +207,13 @@ export default {
       }
     },
     handleBsClick(item) {
-      if (item.text === "处理") {
-        // 记录
+      if (item.text === "问题上报") {
         uni.navigateTo({
-          url: "/pagesA/bsPage/bsRecord",
+          url: "/pagesA/bsPage/bsReport",
         });
       } else {
-        // 上报
         uni.navigateTo({
-          url: "/pagesA/bsPage/bsReport",
+          url: "/pagesA/bsPage/bsRecord",
         });
       }
     },
diff --git a/pagesA/bsPage/bsHandle.vue b/pagesA/bsPage/bsHandle.vue
index e6c6964..de7cf9f 100644
--- a/pagesA/bsPage/bsHandle.vue
+++ b/pagesA/bsPage/bsHandle.vue
@@ -11,7 +11,12 @@
           feedbackTypeText(detail.feedbackType)
         }}</text>
       </view>
+
       <view class="contBg">
+        <view class="info-row">
+          <text class="info-label">位置：</text>
+          <text class="info-value">{{ detail.position }}</text>
+        </view>
         <view class="info-row">
           <view class="info-label">问题描述：</view>
           <view class="info-value">
@@ -20,7 +25,7 @@
         </view>
 
         <view class="info-row">
-          <text class="info-label">图片/视频：</text>
+          <text class="info-label">图片：</text>
           <view
             class="image-preview-item"
             v-for="(u, t) in detail.images"
@@ -32,13 +37,13 @@
         </view>
 
         <view class="info-row">
-          <text class="info-label">报事人：</text>
-          <text class="info-value">{{ detail.graduateName }}</text>
+          <text class="info-label">上报人：</text>
+          <text class="info-value">{{ detail.graduateName||'' }}</text>
         </view>
 
         <view class="info-row">
-          <text class="info-label">报事人电话：</text>
-          <text class="info-value">{{ detail.telephone }}</text>
+          <text class="info-label">上报人电话：</text>
+          <text class="info-value">{{ detail.telephone || '' }}</text>
         </view>
 
         <view class="info-row">
@@ -76,7 +81,7 @@
       </view>
 
       <view class="form-section">
-        <view class="form-label">上传图片/视频</view>
+        <view class="form-label">上传图片</view>
         <u-upload
           :max-count="10"
           :multiple="true"
@@ -128,10 +133,10 @@ export default {
     return {
       statusShow: false,
       statusList: [
-        { dictValue: "1", name: "待处理" },
-        { dictValue: "2", name: "处理中" },
-        { dictValue: "3", name: "已处理" },
-        { dictValue: "4", name: "不予处理" },
+        { dictValue: "0", name: "待处理" },
+        { dictValue: "1", name: "处理中" },
+        { dictValue: "2", name: "已处理" },
+        { dictValue: "3", name: "不予处理" },
       ],
       form: {
         stateName: "",
@@ -142,18 +147,40 @@ export default {
       detail: {},
       fileList: [],
       feedbackTypeOptions: [
-        { value: 1, label: "安全问题", url: "/static/img/维修列表里.png" },
-        { value: 2, label: "卫生问题", url: "/static/img/列表里图标.png" },
-        { value: 3, label: "服务问题", url: "/static/img/问题投诉列表里.png" },
-        { value: 4, label: "噪音问题", url: "/static/img/列表里图标.png" },
-        { value: 5, label: "体验问题", url: "/static/img/列表里图标.png" },
-        { value: 6, label: "其他", url: "/static/img/问题投诉列表里.png" },
+        {
+          value: 1,
+          name: "报修",
+          icon: "/static/img/维修列表里.png",
+        },
+        {
+          value: 2,
+          name: "报事",
+          icon: "/static/img/列表里图标.png",
+        },
+        {
+          value: 3,
+          name: "投诉",
+          icon: "/static/img/问题投诉列表里.png",
+        },
+        {
+          value: 4,
+          name: "建议",
+          icon: "/static/img/巡检记录列表里.png",
+        },
+        {
+          value: 5,
+          name: "其他",
+          icon: "/static/img/问题投诉列表里.png",
+        },
       ],
     };
   },
   onLoad(options) {
     console.log(options, "options");
-    this.getReportData(options.id);
+    if (options.id) {
+      this.getReportData(options.id);
+    } else {
+    }
   },
   computed: {
     feedbackTypeText() {
@@ -161,7 +188,7 @@ export default {
         const feedbackTypeObj = this.feedbackTypeOptions.find(
           (item) => item.value === type
         );
-        return feedbackTypeObj ? feedbackTypeObj.label : "";
+        return feedbackTypeObj ? feedbackTypeObj.name : "";
       };
     },
     srcUrl() {
@@ -169,7 +196,7 @@ export default {
         const feedbackTypeObj = this.feedbackTypeOptions.find(
           (item) => item.value === type
         );
-        return feedbackTypeObj ? feedbackTypeObj.url : "";
+        return feedbackTypeObj ? feedbackTypeObj.icon : "";
       };
     },
   },
diff --git a/pagesA/bsPage/bsRecord.vue b/pagesA/bsPage/bsRecord.vue
index 31fd25d..308f29e 100644
--- a/pagesA/bsPage/bsRecord.vue
+++ b/pagesA/bsPage/bsRecord.vue
@@ -1,63 +1,130 @@
-<!-- 报事记录 -->
 <template>
-  <scroll-view
-    class="content"
-    scroll-y="true"
-    refresher-enabled
-    :refresher-triggered="isRefreshing"
-    @refresherrefresh="refreshData"
-    @scrolltolower="loadMore"
-  >
-    <view class="conItem" v-for="(item, index) in repairList" :key="index">
-      <view class="conItemTitle">
-        <image :src="srcUrl(item.feedbackType)" class="titleImg"></image>
-        <text class="titleName">{{ feedbackTypeText(item.feedbackType) }}</text>
+  <view class="content">
+    <!-- 顶部切换标签 -->
+    <view class="tab-container">
+      <view
+        class="tab-item"
+        :class="{ active: tabValue === 0 }"
+        @click="switchTab(0)"
+      >
+        <text class="tab-text">待处理</text>
       </view>
-      <view class="conItemCon">
-        <view class="repairInfo">
-          <view class="infoRow">
-            <text class="label">问题描述：</text>
-            <text class="value">{{ item.faultDescribe }}</text>
-          </view>
-          <view class="infoRow">
-            <text class="label">图片/视频：</text>
-            <view
-              class="image-preview-item"
-              v-for="(u, t) in item.images"
-              :key="t"
-              @click="previewImage(item.images, t)"
-            >
+      <view
+        class="tab-item"
+        :class="{ active: tabValue === 1 }"
+        @click="switchTab(1)"
+      >
+        <text class="tab-text">处理中</text>
+      </view>
+      <view
+        class="tab-item"
+        :class="{ active: tabValue === 2 }"
+        @click="switchTab(2)"
+      >
+        <text class="tab-text">已处理</text>
+      </view>
+      <view
+        class="tab-item"
+        :class="{ active: tabValue === 3 }"
+        @click="switchTab(3)"
+      >
+        <text class="tab-text">不予处理</text>
+      </view>
+    </view>
+
+    <!-- 下拉刷新容器 -->
+    <scroll-view
+      class="scroll-container"
+      scroll-y="true"
+      refresher-enabled="true"
+      :refresher-triggered="refreshing"
+      @refresherrefresh="onRefresh"
+      @scrolltolower="onLoadMore"
+      :style="{ height: 'calc(100vh - 120rpx)' }"
+    >
+      <!-- 提醒列表 -->
+      <view class="reminder-list">
+        <!-- 空状态 -->
+        <view v-if="reminderList.length === 0 && !loading" class="empty-state">
+          <text class="empty-text">暂无数据</text>
+        </view>
+
+        <!-- 提醒项目列表 -->
+        <view
+          v-for="(item, index) in reminderList"
+          :key="index"
+          class="reminder-item"
+          @click="handleItemClick(item)"
+        >
+          <!-- 卡片头部 -->
+          <view class="card-header">
+            <view class="header-left">
               <image
-                :src="u.url"
-                class="problemImage"
-                mode="aspectFill"
+                :src="getTypeIcon(item.feedbackType)"
+                class="type-icon"
               ></image>
+              <text class="type-name">{{
+                getTypeName(item.feedbackType)
+              }}</text>
             </view>
           </view>
-          <view class="infoRow">
-            <text class="label">报事人：</text>
-            <text class="value">{{ item.graduateName }}</text>
-          </view>
-          <view class="infoRow">
-            <text class="label">报事人电话：</text>
-            <text class="value">{{ item.telephone }}</text>
+
+          <!-- 卡片内容 -->
+          <view class="card-content">
+            <view class="info-row">
+              <text class="label">问题描述：</text>
+              <text class="value">{{ item.faultDescribe }}</text>
+            </view>
+            <view class="info-row" v-if="item.images && item.images.length > 0">
+              <text class="label">图片：</text>
+              <view class="image-container">
+                <image
+                  v-for="(img, imgIndex) in item.images"
+                  :key="imgIndex"
+                  :src="img.url"
+                  class="problem-image"
+                  mode="aspectFill"
+                  @click.stop="previewImage(item.images, imgIndex)"
+                ></image>
+              </view>
+            </view>
+            <view class="info-row">
+              <text class="label">位置：</text>
+              <text class="value">{{ item.position || "" }}</text>
+            </view>
+            <view class="info-row">
+              <text class="label">上报人：</text>
+              <text class="value">{{ item.graduateName || "" }}</text>
+            </view>
+            <view class="info-row">
+              <text class="label">上报人电话：</text>
+              <text class="value">{{ item.telephone || "" }}</text>
+            </view>
+            <view class="info-row">
+              <text class="label">上报时间：</text>
+              <text class="value">{{ item.createTime }}</text>
+            </view>
           </view>
-          <view class="infoRow">
-            <text class="label">上报时间：</text>
-            <text class="value">{{ item.createTime }}</text>
+
+          <!-- 操作按钮 -->
+          <view class="action-buttons" >
+            <button class="btn process" @click.stop="handleProcess(item)">
+              处理
+            </button>
           </view>
         </view>
-        <view class="actionButtons">
-          <button class="btn process" @click="handleProcess(item)">处理</button>
-          <!-- <button class="btn dispatch" @click="handleDispatch(item)">
-            派单
-          </button> -->
-        </view>
       </view>
-    </view>
-    <view style="text-align: center" v-if="isLoading">加载中...</view>
-    <view v-else-if="repairList.length <= 0" class="no-data"> 暂无数据~ </view>
-  </scroll-view>
+      <!-- 加载更多提示 -->
+      <view v-if="loading" class="loading-more">
+        <text>加载中...</text>
+      </view>
+
+      <!-- 没有更多数据提示 -->
+      <view v-if="noMore && reminderList.length > 0" class="no-more">
+        <text>没有更多数据了</text>
+      </view>
+    </scroll-view>
+  </view>
 </template>
 
 <script>
@@ -65,99 +132,96 @@ import { listReport } from "@/pages/api";
 export default {
   data() {
     return {
-      isRefreshing: false,
-      feedbackTypeOptions: [
-        { value: 1, label: "安全问题", url: "/static/img/维修列表里.png" },
-        { value: 2, label: "卫生问题", url: "/static/img/列表里图标.png" },
-        { value: 3, label: "服务问题", url: "/static/img/问题投诉列表里.png" },
-        { value: 4, label: "噪音问题", url: "/static/img/列表里图标.png" },
-        { value: 5, label: "体验问题", url: "/static/img/列表里图标.png" },
-        { value: 6, label: "其他", url: "/static/img/问题投诉列表里.png" },
-      ],
+      tabValue: 0, // 默认选中待处理
+      refreshing: false,
+      loading: false,
       noMore: false,
-      isLoading: false,
-      repairList: [],
-      form: {
-        pageNum: 1,
-        pageSize: 10,
-      },
-      total: "",
+      pageNum: 1,
+      pageSize: 10,
+      unreadCount: 0,
+      reminderList: [],
+      // 类型配置
+      typeConfig: [
+        {
+          value: 1,
+          name: "报修",
+          icon: "/static/img/维修列表里.png",
+        },
+        {
+          value: 2,
+          name: "报事",
+          icon: "/static/img/列表里图标.png",
+        },
+        {
+          value: 3,
+          name: "投诉",
+          icon: "/static/img/问题投诉列表里.png",
+        },
+        {
+          value: 4,
+          name: "建议",
+          icon: "/static/img/巡检记录列表里.png",
+        },
+        {
+          value: 5,
+          name: "其他",
+          icon: "/static/img/问题投诉列表里.png",
+        },
+      ],
     };
   },
   onLoad() {
-    this.getList();
+    this.loadReminderList();
+  },
+  onShow() {
+    // 页面显示时刷新数据
+    this.refreshData();
   },
   computed: {
-    processStatusText() {
-      return (state) => {
-        switch (state) {
-          case 0:
-            return "待处理";
-          case 1:
-            return "处理中";
-          case 2:
-            return "已处理";
-          case 3:
-            return "不予处理";
-          default:
-            return "";
-        }
-      };
-    },
-    feedbackTypeText() {
-      return (type) => {
-        const feedbackTypeObj = this.feedbackTypeOptions.find(
-          (item) => item.value === type
-        );
-        return feedbackTypeObj ? feedbackTypeObj.label : "";
-      };
-    },
-    srcUrl() {
-      return (type) => {
-        const feedbackTypeObj = this.feedbackTypeOptions.find(
-          (item) => item.value === type
-        );
-        return feedbackTypeObj ? feedbackTypeObj.url : "";
-      };
+    // 计算未读消息数量
+    unreadCount() {
+      return this.reminderList.filter((item) => item.hasUnread).length;
     },
   },
   methods: {
-    // 报事列表
-    async getList() {
-      const res = await listReport(this.form);
-      if (res.code === 200) {
-        this.repairList = res.rows;
-        this.total = res.total;
-        if (res.total <= this.form.pageSize * this.form.pageNum) {
-          this.noMore = true;
-        }
-        this.isLoading = false;
-        this.isRefreshing = false;
-        if (this.form.pageNum == 1) {
-          this.repairList = res.rows;
-        } else {
-          this.repairList = [...this.repairList, ...res.rows];
-        }
-      }
+    onChange(name) {
+      this.tabValue = name;
+      console.log(name);
     },
+
+    // 刷新数据
     refreshData() {
-      this.isRefreshing = true;
-      this.noMore = false; // 新增
-      this.repairList = [];
-      this.form.pageNum = 1; // 重置页码到第一页
-      this.getList();
+      this.pageNum = 1;
+      this.noMore = false;
+      this.loadReminderList(true);
     },
-    // 加载更多数据（分页）
-    loadMore() {
-      if (this.isLoading || this.noMore) return; // 新增 noMore 判断
-      this.isLoading = true;
-      this.form.pageNum++;
-      this.getList();
+
+    // 切换标签
+    switchTab(value) {
+      this.tabValue = value;
+      this.pageNum = 1;
+      this.noMore = false;
+      this.reminderList = [];
+      this.loadReminderList(true);
+    },
+
+    // 获取类型名称
+    getTypeName(type) {
+      const name = this.typeConfig.find((item) => item.value === type)?.name;
+      return name || "";
     },
-    previewImage(item, index) {
+
+    // 获取类型图标
+    getTypeIcon(type) {
+      const icon = this.typeConfig.find((item) => item.value === type)?.icon;
+      return icon || "/static/img/巡检记录列表里.png";
+    },
+
+    // 预览图片
+    previewImage(images, index) {
       uni.previewImage({
         current: index,
-        urls: item.map((item) => item.url),
+        urls: images.map((img) => img.url),
         success: (res) => {
           console.log("预览成功");
         },
@@ -166,14 +230,112 @@ export default {
         },
       });
     },
+
+    // 处理按钮点击
     handleProcess(item) {
+      console.log("处理项目:", item);
       uni.navigateTo({
         url: `/pagesA/bsPage/bsHandle?id=${item.id}`,
       });
     },
-    handleDispatch(item) {
-      console.log("派单", item);
-      // 派单逻辑
+
+    // 加载提醒列表
+    async loadReminderList(isRefresh = false) {
+      if (this.loading) return;
+
+      this.loading = true;
+
+      try {
+        const res = await listReport({
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          state:
+            this.tabValue == 0
+              ? 0
+              : this.tabValue == 1
+              ? 1
+              : this.tabValue == 2
+              ? 2
+              : 3, // 0: 待处理, 1: 已处理, 2: 不予处理
+        });
+
+        if (res.code === 200) {
+          const data = res.rows || [];
+
+          if (isRefresh) {
+            this.reminderList = data;
+            this.pageNum = 1;
+          } else {
+            this.reminderList = [...this.reminderList, ...data];
+          }
+
+          // 判断是否还有更多数据
+          if (data.length < this.pageSize) {
+            this.noMore = true;
+          }
+        }
+      } catch (error) {
+        console.error("加载提醒列表失败:", error);
+      } finally {
+        this.loading = false;
+        this.refreshing = false;
+      }
+    },
+
+    // 下拉刷新
+    async onRefresh() {
+      this.pageNum = 1;
+      this.refreshing = true;
+      this.noMore = false;
+      await this.loadReminderList(true);
+    },
+
+    // 上拉加载更多
+    async onLoadMore() {
+      if (this.noMore || this.loading) return;
+
+      this.pageNum++;
+      await this.loadReminderList();
+    },
+
+    // 处理项目点击
+    async handleItemClick(item) {
+      console.log("点击提醒项目:", item);
+
+      try {
+        // 调用API标记为已读
+        if (item.hasUnread) {
+          await markReminderRead(item.id);
+          item.hasUnread = false;
+        }
+      } catch (error) {
+        console.error("标记已读失败:", error);
+        // 即使API失败，也更新本地状态
+        item.hasUnread = false;
+      }
+    },
+
+    // 格式化时间
+    formatTime(time) {
+      const now = new Date();
+      const targetTime = new Date(time);
+      const diff = now - targetTime;
+      const oneDay = 24 * 60 * 60 * 1000;
+
+      if (diff < oneDay && targetTime.toDateString() === now.toDateString()) {
+        return "今天";
+      } else {
+        return targetTime
+          .toLocaleString("zh-CN", {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+          })
+          .replace(/\//g, "-");
+      }
     },
   },
 };
@@ -183,53 +345,148 @@ export default {
 .content {
   width: 100%;
   height: 100vh;
-  background-color: rgba(248, 248, 248, 1);
-  padding: 20rpx;
-  box-sizing: border-box;
+  background-color: #f5f5f5;
+}
+
+.tab-container {
+  display: flex;
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  border-bottom: 1rpx solid #eee;
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.tab-item.active {
+  color: #08b3b3;
+}
+
+// .tab-item.active::after {
+//   content: '';
+//   position: absolute;
+//   bottom: -20rpx;
+//   left: 50%;
+//   transform: translateX(-50%);
+//   width: 60rpx;
+//   height: 4rpx;
+//   background-color: #08B3B3;
+//   border-radius: 2rpx;
+// }
+
+.tab-text {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #666;
+}
+
+.tab-item.active .tab-text {
+  color: #08b3b3;
+  font-weight: 600;
+}
+
+.pageNum-header {
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  border-bottom: 1rpx solid #eee;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  position: relative;
 }
 
-.conItem {
+.pageNum-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.unread-badge {
+  position: absolute;
+  top: 10rpx;
+  right: 30rpx;
+  background-color: #f44336;
+  color: #fff;
+  font-size: 20rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 20rpx;
+  min-width: 32rpx;
+  text-align: center;
+}
+
+.scroll-container {
   width: 100%;
-  border-radius: 10rpx;
-  background-color: rgba(255, 255, 255, 1);
-  margin-bottom: 20rpx;
+}
+
+.reminder-list {
   padding: 20rpx;
   box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.reminder-item {
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  padding: 30rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
 }
 
-.conItemTitle {
+.reminder-item:active {
+  transform: scale(0.98);
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.reminder-item-line {
+  height: 1rpx;
+  background-color: #f0f0f0;
+  width: 80%;
+}
+
+.reminder-item:active {
+  transform: scale(0.98);
+  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
   display: flex;
-  width: 100%;
+  align-items: center;
   margin-bottom: 20rpx;
+}
+
+.header-left {
+  display: flex;
   align-items: center;
 }
 
-.titleImg {
+.type-icon {
   width: 38rpx;
   height: 38rpx;
+  margin-right: 10rpx;
 }
 
-.titleName {
-  color: rgba(0, 0, 0, 1);
+.type-name {
   font-size: 28rpx;
-  text-align: left;
-  margin-left: 10rpx;
   font-weight: bold;
+  color: #333;
 }
 
-.conItemCon {
-  width: 100%;
-}
-
-.repairInfo {
-  width: 100%;
-  background-color: rgba(249, 249, 249, 1);
+.card-content {
+  background-color: #f9f9f9;
   padding: 20rpx;
-  box-sizing: border-box;
   border-radius: 10rpx;
+  margin-bottom: 20rpx;
 }
 
-.infoRow {
+.info-row {
   display: flex;
   align-items: flex-start;
   margin-bottom: 15rpx;
@@ -237,6 +494,10 @@ export default {
   flex-wrap: wrap;
 }
 
+.info-row:last-child {
+  margin-bottom: 0;
+}
+
 .label {
   color: #a9afba;
   font-size: 28rpx;
@@ -246,28 +507,32 @@ export default {
 }
 
 .value {
-  color: rgba(0, 0, 0, 1);
+  color: #333;
   font-size: 26rpx;
   flex: 1;
 }
 
-.problemImage {
+.image-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rpx;
+  margin-top: 5rpx;
+}
+
+.problem-image {
   width: 120rpx;
   height: 120rpx;
   border-radius: 8rpx;
-  margin-top: 5rpx;
-  margin-right: 10rpx;
   margin-bottom: 10rpx;
 }
 
-.actionButtons {
+.action-buttons {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-top: 20rpx;
-  margin-left: auto;
   gap: 20rpx;
   width: fit-content;
+  margin-left: auto;
 }
 
 .btn {
@@ -275,16 +540,43 @@ export default {
   height: 52rpx;
   line-height: 46rpx;
   border-radius: 52rpx;
-  background-color: rgba(255, 255, 255, 1);
-  color: rgba(8, 179, 179, 1);
+  background-color: #fff;
+  color: #08b3b3;
   font-size: 28rpx;
   text-align: center;
   font-family: AlibabaPuHui-regular;
-  border: 2rpx solid rgba(8, 179, 179, 1);
+  border: 2rpx solid #08b3b3;
+}
+
+.btn.process {
+  border-color: #08b3b3;
+  color: #08b3b3;
+}
+
+.loading-more,
+.no-more {
+  text-align: center;
+  padding: 30rpx;
+  color: #999;
+  font-size: 26rpx;
 }
 
-.dispatch {
-  border-color: #ff8c00;
-  color: #ff8c00;
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 30rpx;
+  color: #999;
+}
+
+.empty-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999;
 }
 </style>