From 001683f215d7b5aef73680a9d86540ad8a6f6adc Mon Sep 17 00:00:00 2001
From: zhoulinf <2507241354@qq.com>
Date: Thu, 19 Jun 2025 20:32:16 +0800
Subject: [PATCH] =?UTF-8?q?task#6524=20=E4=B8=8B=E6=8B=89=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/report/reportIndex.vue | 246 ++++++++++++++++---------------
 1 file changed, 131 insertions(+), 115 deletions(-)

diff --git a/src/views/report/reportIndex.vue b/src/views/report/reportIndex.vue
index 008ca2a3..8ff879f3 100644
--- a/src/views/report/reportIndex.vue
+++ b/src/views/report/reportIndex.vue
@@ -1,127 +1,127 @@
 <template>
-  <div class="main_wrap">
-    <div class="top_bg">
-      <div class="title">报备中心</div>
-    </div>
-    <div class="service_wrap">
-      <service-item :order-info="orderInfo"></service-item>
-    </div>
-    <div class="chat_list" ref="chatList">
-      <!--ai对话框 s -->
-      <div v-for="(item, index) in recordList" :key="index">
-        <template v-if="item.messageType == 4">
-          <div class="top_tip_wrap">为了快速解决问题，请选择下方咨询类型</div>
-          <div class="ai_chat" >
-            <div class="ai_left">
-              <img class="report_ai" src="@/assets/report/report_ai.png" alt="">
-            </div>
-            <div class="ai_right">
-              <div class="ai_title">{{ orderInfo?.driverName }}你好，请选择报备内容</div>
-              <ul>
-                <li v-for="_item in item.content" :key="_item.id" @click="addReportHandler(_item)">“{{_item.name}}”</li>
-              </ul>
-            </div>
-          </div>
-        </template>
-        <template v-if="[2, 3].includes(Number(item.messageType))">
-          <!--ai对话框 e -->
-          <div class="tip_wrap">{{item.createTime}}</div>
-          <!--客服对话框 s -->
-          <div class="customer_item mb20">
-            <div class="customer_left">
-              <img class="profile_photo mr" src="@/assets/report/report_customer.png" alt="">
-            </div>
-            <div class="common_right customer_cls">
-              <div class="customer_status">{{item.reportConfigName}}</div>
-              <div class="response_con">{{item.remark}}</div>
-            </div>
-          </div>
-        </template>
-        <template v-if="item.messageType == 1">
-          <!--服务人员对话框 e -->
-          <div class="tip_wrap">{{item.createTime}}</div>
-          <!--服务人员对话框 s -->
-          <div class="server_item mb20">
-            <div class="common_right service_cls">
-              <div class="service_status">{{item.reportConfigName}}</div>
-              <div class="response_con">{{item.remark}}</div>
-            </div>
-            <div class="customer_left">
-              <img class="profile_photo ml" v-if="type == 1" src="@/assets/report/report_dispatch.png" alt="">
-              <img class="profile_photo ml" v-else src="@/assets/report/report_driver.png" alt="">
-            </div>
-          </div>
-          <!--服务人员对话框 e -->
-        </template>
+  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+    <div class="main_wrap">
+      <div class="top_bg">
+        <div class="title">报备中心</div>
       </div>
-    </div>
-
-    <report-list-item :report-list.sync="reportList" @getReport="getReportHandler" />
-
-    <van-popup ref="addReportModal" v-model="addReportShow" :close-on-click-overlay="false" closeable duration="0" round position="bottom">
-      <div class="dialog_wrap">
-        <img class="add_report_bg" src="@/assets/report/add_report_bg.png" alt="">
-        <div class="report_content">
-          <template v-if="currentInfo.component == 'time'">
-            <!--预约时间报备 s -->
-            <div class="report_title">
-              <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
-              <span>预约时间</span>
-            </div>
-            <div class="report_time_content" @click="showDatetime = true">
-              <div class="report_time_left">
-                <img class="add_report_time" src="@/assets/report/add_report_time.png" alt="">
-                <span>{{appointTime || '请选择时间'}}</span>
+      <div class="service_wrap">
+        <service-item :order-info="orderInfo"></service-item>
+      </div>
+      <div class="chat_list" ref="chatList">
+        <!--ai对话框 s -->
+        <div v-for="(item, index) in recordList" :key="index">
+          <template v-if="item.messageType == 4">
+            <div class="top_tip_wrap">为了快速解决问题，请选择下方咨询类型</div>
+            <div class="ai_chat" >
+              <div class="ai_left">
+                <img class="report_ai" src="@/assets/report/report_ai.png" alt="">
               </div>
-              <img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
-            </div>
-            <!--预约时间报备 e -->
-          </template>
-          <template v-if="currentInfo.component == 'address'">
-            <!--修改地址报备 s -->
-            <div class="report_title">
-              <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
-              <span>修改事发地</span>
-            </div>
-            <div class="report_time_content" @click="goPage('addressMap')">
-              <div class="report_time_left">
-                <img class="add_report_time" src="@/assets/report/add_report_address.png" alt="">
-                <span>{{address || '请选择地址'}}</span>
+              <div class="ai_right">
+                <div class="ai_title">{{ orderInfo?.driverName }}你好，请选择报备内容</div>
+                <ul>
+                  <li v-for="_item in item.content" :key="_item.id" @click="addReportHandler(_item)">“{{_item.name}}”</li>
+                </ul>
               </div>
-              <img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
             </div>
-            <!--修改地址报备 e -->
           </template>
-          <div class="report_title">
-            <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
-            <span>补充报备内容</span>
-          </div>
-          <div class="report_common_content">
-            <textarea class="report_textarea" id="text-input" rows="4" placeholder="点击这里输入补充报备内容" v-model.trim="remark"></textarea>
-<!--            <van-field-->
-<!--              v-model="remark"-->
-<!--              class="report_textarea"-->
-<!--              placeholder="点击这里输入补充报备内容" />-->
-          </div>
-        </div>
-        <div class="report_btn" @click="saveHandler">
-          提交报备
+          <template v-if="[2, 3].includes(Number(item.messageType))">
+            <!--ai对话框 e -->
+            <div class="tip_wrap">{{item.createTime}}</div>
+            <!--客服对话框 s -->
+            <div class="customer_item mb20">
+              <div class="customer_left">
+                <img class="profile_photo mr" src="@/assets/report/report_customer.png" alt="">
+              </div>
+              <div class="common_right customer_cls">
+                <div class="customer_status">{{item.reportConfigName}}</div>
+                <div class="response_con">{{item.remark}}</div>
+              </div>
+            </div>
+          </template>
+          <template v-if="item.messageType == 1">
+            <!--服务人员对话框 e -->
+            <div class="tip_wrap">{{item.createTime}}</div>
+            <!--服务人员对话框 s -->
+            <div class="server_item mb20">
+              <div class="common_right service_cls">
+                <div class="service_status">{{item.reportConfigName}}</div>
+                <div class="response_con">{{item.remark}}</div>
+              </div>
+              <div class="customer_left">
+                <img class="profile_photo ml" v-if="type == 1" src="@/assets/report/report_dispatch.png" alt="">
+                <img class="profile_photo ml" v-else src="@/assets/report/report_driver.png" alt="">
+              </div>
+            </div>
+            <!--服务人员对话框 e -->
+          </template>
         </div>
       </div>
-    </van-popup>
+      <report-list-item :report-list.sync="reportList" @getReport="getReportHandler" />
+      <van-popup ref="addReportModal" v-model="addReportShow" :close-on-click-overlay="false" closeable duration="0" round position="bottom">
+        <div class="dialog_wrap">
+          <img class="add_report_bg" src="@/assets/report/add_report_bg.png" alt="">
+          <div class="report_content">
+            <template v-if="currentInfo.component == 'time'">
+              <!--预约时间报备 s -->
+              <div class="report_title">
+                <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
+                <span>预约时间</span>
+              </div>
+              <div class="report_time_content" @click="showDatetime = true">
+                <div class="report_time_left">
+                  <img class="add_report_time" src="@/assets/report/add_report_time.png" alt="">
+                  <span>{{appointTime || '请选择时间'}}</span>
+                </div>
+                <img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
+              </div>
+              <!--预约时间报备 e -->
+            </template>
+            <template v-if="currentInfo.component == 'address'">
+              <!--修改地址报备 s -->
+              <div class="report_title">
+                <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
+                <span>修改事发地</span>
+              </div>
+              <div class="report_time_content" @click="goPage('addressMap')">
+                <div class="report_time_left">
+                  <img class="add_report_time" src="@/assets/report/add_report_address.png" alt="">
+                  <span>{{address || '请选择地址'}}</span>
+                </div>
+                <img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
+              </div>
+              <!--修改地址报备 e -->
+            </template>
+            <div class="report_title">
+              <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
+              <span>补充报备内容</span>
+            </div>
+            <div class="report_common_content">
+              <textarea class="report_textarea" id="text-input" rows="4" placeholder="点击这里输入补充报备内容" v-model.trim="remark"></textarea>
+  <!--            <van-field-->
+  <!--              v-model="remark"-->
+  <!--              class="report_textarea"-->
+  <!--              placeholder="点击这里输入补充报备内容" />-->
+            </div>
+          </div>
+          <div class="report_btn" @click="saveHandler">
+            提交报备
+          </div>
+        </div>
+      </van-popup>
 
-    <van-popup v-model="showDatetime" round position="bottom">
-      <van-datetime-picker
-        class="dataTime"
-        v-if="showDatetime"
-        v-model="appointTime"
-        type="datetime"
-        :min-date="minDate"
-        @confirm="onConfirm"
-        @cancel="showDatetime = false"
-      />
-    </van-popup>
-  </div>
+      <van-popup v-model="showDatetime" round position="bottom">
+        <van-datetime-picker
+          class="dataTime"
+          v-if="showDatetime"
+          v-model="appointTime"
+          type="datetime"
+          :min-date="minDate"
+          @confirm="onConfirm"
+          @cancel="showDatetime = false"
+        />
+      </van-popup>
+    </div>
+  </van-pull-refresh>
 </template>
 
 <script>
@@ -154,6 +154,7 @@
         userOrderCode: '',
         driverId: '',
         clickFlag: true,
+        isLoading: false,
       }
     },
     async mounted() {
@@ -178,6 +179,18 @@
       }
     },
     methods: {
+      onRefresh() {
+        setTimeout(async () => {
+          try {
+            await this.getReportList();
+            await this.getDetail();
+            await this.getRecordList();
+            await this.scrollToBottom();
+          } finally {
+            this.isLoading = false; // 结束加载状态
+          }
+        }, 100)
+      },
       // 添加滚动方法
       scrollToBottom() {
         this.$nextTick(() => {
@@ -528,4 +541,7 @@
   ::v-deep .van-popup__close-icon {
     color: #0F458E;
   }
+  ::v-deep .van-pull-refresh {
+    height: 100%;
+  }
 </style>