task#6524 添加刷新按钮

src/utils/http.js

@@ -11,7 +11,11 @@ const service = axios.create({
 })
 const urlParams = new URLSearchParams(window.location.search);
 let token = urlParams.get('token');
-localStorage.setItem('token', token);
+if( token ) {
+  localStorage.setItem('token', token);
+} else {
+  localStorage.setItem('token', '');
+}
 service.interceptors.request.use(
     config => {
       let reqUrl=config.url
@@ -21,11 +25,13 @@ service.interceptors.request.use(
       }
       config.headers['Content-Type'] = config.contentType || 'application/x-www-form-urlencoded'
       let token = localStorage.getItem('token');
-      // let token='4099761587129c46b03c9316c9e866c9'
+      // let token='eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJBTkNIQU5HIiwidXNlcklkIjo0NTY3MSwibmFtZSI6IuWuieeVhSIsInVzZXJOYW1lIjoiQU5DSEFORyIsInN1cHBsaWVySWQiOjExMjgsImlzWmQiOjAsImV4cCI6MTc1MjEzNDc2M30.q1O7C8thZzEMVKYDhBQ-N_14Fh9Bqejj7j11EKLF5Aw'
       // let token='eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJTSEhQWEIiLCJ1c2VySWQiOjU0NzI2LCJuYW1lIjoiI-a1i-ivleWwj-eZveeZvSIsInVzZXJOYW1lIjoiU0hIUFhCIiwic3VwcGxpZXJJZCI6MTAwMDE2NSwiZXhwIjoxNzQ0NTEwNzkwfQ.JPk0OA7slYJN3FIi_uhW4Y0CiWRvl6R1dK8MRTbyhD8'
        if(!(reqUrl=='/supplier/supplierTraining/trainingTask' || reqUrl=='/supplier/supplierTraining/normalList' || reqUrl=='/supplier/supplierTraining/trainingList')){
+         if(token) {
            config.headers['Authorization'] = `${token}`;
            config.headers['token'] = `${token}`;
+         }
        }
       return config
     },

src/views/report/addressMap.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-  import { searchFun } from '@/utils/map'
+  import { searchFun, getLocal, getAddress } from '@/utils/map'
   export default {
     name: "addressMap",
     data() {
@@ -31,6 +31,7 @@
         activeIndex: '',
         map: '',
         marker: null,
+        cityCode: ''
       }
     },
     watch: {
@@ -43,16 +44,22 @@
       await this.initMap()
     },
     methods: {
-      initMap() {   // 初始化地图
+      async initMap() {   // 初始化地图
         this.map = new AMap.Map('mapId', {
           viewMode: '2D',  // 默认使用 2D 模式
           zoom:11,  //初始化地图层级
         })
+        let res = await getLocal(this.map);
+        let lnglat = new AMap.LngLat(res?.lng, res?.lat);
+        let location = await getAddress(this.map, lnglat)
+        this.cityCode = location?.regeocode.addressComponent.adcode
+        //location?.regeocode?.addressComponent?.city || location?.regeocode?.addressComponent?.province
+        console.log('location', location);
       },
       async searchHandler() {
         this.activeIndex = null
         if( this.keyword ) {
-          this.addressList = await searchFun(this.map, '', this.keyword)
+          this.addressList = await searchFun(this.map,  this.cityCode, this.keyword,)
           this.addressList = this.addressList.filter(item => !!item.location)
         } else {
           this.addressList = []

src/views/report/components/service-item.vue

@@ -2,7 +2,10 @@
   <div class="wrap">
     <div class="service_title">
       <span class="name">{{orderInfo?.serviceName}}</span>
-      <span class="status">{{orderInfo?.orderStatusString}}</span>
+      <span class="status">
+        {{orderInfo?.orderStatusString}}
+        <span class="refresh_btn" @click="refreshHandler">刷新</span>
+      </span>
     </div>
     <!--    <img class="report_line" src="@/assets/report/report_line.png" alt="">-->
     <div class="service_content">
@@ -25,6 +28,11 @@
   export default {
     name: "service-item",
     props: ['orderInfo'],
+    methods: {
+      refreshHandler() {
+        this.$emit('refresh')
+      }
+    }
   }
 </script>
 
@@ -58,6 +66,13 @@
     font-size: 13px;
     color: #F19028;
   }
+  .refresh_btn {
+    background-color: #267EF0;
+    color: #fff;
+    padding: 6px 12px;
+    margin-left: 5px;
+    border-radius: 3px;
+  }
 }
 .service_content {
   padding: 11px 16px 18px;

src/views/report/reportIndex.vue

@@ -1,125 +1,127 @@
 <template>
-  <div class="main_wrap">
+<!--  <van-pull-refresh v-model="isLoading" class="custom-pull-refresh safe-pull-refresh" @refresh="onRefresh">-->
-    <div class="top_bg">
+    <div class="main_wrap">
-      <div class="title">报备中心</div>
+      <div class="top_bg" :class="{'dispatch' : type == 1 , 'driver' : type != 1}">
-    </div>
+<!--        <div class="title">报备中心</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>
       </div>
-    </div>
+      <div class="service_wrap">
-
+        <service-item :order-info="orderInfo" @refresh="onRefreshHandler"></service-item>
-    <report-list-item :report-list.sync="reportList" @getReport="getReportHandler" />
+      </div>
-
+      <div class="chat_list" ref="chatList" >
-    <van-popup ref="addReportModal" v-model="addReportShow" :close-on-click-overlay="false" closeable duration="0" round position="bottom">
+        <!--ai对话框 s -->
-      <div class="dialog_wrap">
+        <div v-for="(item, index) in recordList" :key="index">
-        <img class="add_report_bg" src="@/assets/report/add_report_bg.png" alt="">
+          <template v-if="item.messageType == 4">
-        <div class="report_content">
+            <div class="top_tip_wrap">为了快速解决问题，请选择下方咨询类型</div>
-          <template v-if="currentInfo.component == 'time'">
+            <div class="ai_chat" >
-            <!--预约时间报备 s -->
+              <div class="ai_left">
-            <div class="report_title">
+                <img class="report_ai" src="@/assets/report/report_ai.png" alt="">
-              <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 class="ai_right">
-            </div>
+                <div class="ai_title">{{ orderInfo?.driverName }}你好，请选择报备内容</div>
-            <!--预约时间报备 e -->
+                <ul>
-          </template>
+                  <li v-for="_item in item.content" :key="_item.id" @click="addReportHandler(_item)">“{{_item.name}}”</li>
-          <template v-if="currentInfo.component == 'address'">
+                </ul>
-            <!--修改地址报备 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">
+          <template v-if="[2, 3].includes(Number(item.messageType))">
-            <img class="dot" src="@/assets/report/add_report_dot.png" alt="">
+            <!--ai对话框 e -->
-            <span>补充报备内容</span>
+            <div class="tip_wrap">{{item.createTime}}</div>
-          </div>
+            <!--客服对话框 s -->
-          <div class="report_common_content">
+            <div class="customer_item mb20">
-            <van-field
+              <div class="customer_left">
-              v-model="remark"
+                <img class="profile_photo mr" src="@/assets/report/report_customer.png" alt="">
-              class="report_textarea"
+              </div>
-              placeholder="点击这里输入补充报备内容" />
+              <div class="common_right customer_cls">
-          </div>
+                <div class="customer_status">{{item.reportConfigName}}</div>
-        </div>
+                <div class="response_con">{{item.remark}}</div>
-        <div class="report_btn" @click="saveHandler">
+              </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-popup v-model="showDatetime" round position="bottom">
-      <van-datetime-picker
+        <van-datetime-picker
-        class="dataTime"
+          class="dataTime"
-        v-if="showDatetime"
+          v-if="showDatetime"
-        v-model="appointTime"
+          v-model="appointTime"
-        type="datetime"
+          type="datetime"
-        @confirm="onConfirm"
+          :min-date="minDate"
-        @cancel="showDatetime = false"
+          @confirm="onConfirm"
-      />
+          @cancel="showDatetime = false"
-    </van-popup>
+        />
-  </div>
+      </van-popup>
+    </div>
+<!--  </van-pull-refresh>-->
 </template>
 
 <script>
@@ -139,6 +141,7 @@
         remark: '',
         showDatetime: false,
         appointTime: '',
+        minDate: new Date(),
         address: '',
         lat: '',
         lng: '',
@@ -150,6 +153,8 @@
         userOrderId: '',
         userOrderCode: '',
         driverId: '',
+        clickFlag: true,
+        isLoading: false,
       }
     },
     async mounted() {
@@ -174,6 +179,19 @@
       }
     },
     methods: {
+      onRefreshHandler() {
+        setTimeout(async () => {
+          try {
+            this.recordList = [];
+            await this.getReportList();
+            await this.getDetail();
+            await this.getRecordList();
+            await this.scrollToBottom();
+          } finally {
+            this.isLoading = false; // 结束加载状态
+          }
+        }, 100)
+      },
       // 添加滚动方法
       scrollToBottom() {
         this.$nextTick(() => {
@@ -191,48 +209,56 @@
         this.recordList = recordList.data;
       },
       async saveHandler() {
-        let data = {
+        if( this.clickFlag ) {
-          source: Number(this.type),
+          let data = {
-          reportContent: this.remark,
+            source: Number(this.type),
-          userOrderId: Number(this.userOrderId),
+            reportContent: this.remark,
-          reportConfigId: this.currentInfo.id,
+            userOrderId: Number(this.userOrderId),
-          userOrderCode: this.userOrderCode,
+            reportConfigId: this.currentInfo.id,
-          driverId: this.driverId,
+            userOrderCode: this.userOrderCode,
-        }
+            driverId: this.driverId,
-        if(this.currentInfo.component == 'time') {
+          }
-          if( !this.appointTime ) {
+          if(this.currentInfo.component == 'time') {
-            Toast('预约时间不能为空')
+            if( !this.appointTime ) {
+              Toast('预约时间不能为空')
+              return
+            }
+            if( new Date(this.appointTime).getTime() <= new Date().getTime() ) {
+              Toast('预约时间不能小于当前时间')
+              return
+            }
+            data.time = this.appointTime
+          }
+          if(this.currentInfo.component == 'address') {
+            if( !this.address ) {
+              Toast('地址不能为空')
+              return
+            }
+            data.address = this.address
+            data.lat = this.lat;
+            data.lng = this.lng;
+          }
+          if( !this.remark ) {
+            Toast('备注内容不能为空')
             return
           }
-          if( new Date(this.appointTime).getTime() <= new Date().getTime() ) {
+          this.clickFlag = false;
-            Toast('预约时间不能小于当前时间')
+          try {
-            return
+            await newOrderReporting(data)
+            Dialog.alert({
+              title: '提示',
+              message: "报备添加成功"
+            }).then(async () => {
+              await this.getRecordList()
+              this.addReportShow = false
+              this.scrollToBottom();
+              this.initDialogData();
+              this.clickFlag = true
+            });
+          } finally {
+            this.clickFlag = true
           }
-          data.time = this.appointTime
         }
-        if(this.currentInfo.component == 'address') {
-          if( !this.address ) {
-            Toast('地址不能为空')
-            return
-          }
-          data.address = this.address
-          data.lat = this.lat;
-          data.lng = this.lng;
-        }
-        if( !this.remark ) {
-          Toast('备注内容不能为空')
-          return
-        }
-        await newOrderReporting(data)
-        Dialog.alert({
-          title: '提示',
-          message: "报备添加成功"
-        }).then(async () => {
-          await this.getRecordList()
-          this.addReportShow = false
-          this.scrollToBottom();
-          this.initDialogData();
-        });
       },
       initDialogData() {
         this.appointTime = '';
@@ -253,11 +279,16 @@
         this.scrollToBottom();
       },
       async getDetail(){  // 订单详情
-        let result = await getOrderInfo({
+        if(this.userOrderId) {
-          userOrderId: this.userOrderId,
+          let result = await getOrderInfo({
-          userOrderCode: this.userOrderCode
+            userOrderId: this.userOrderId,
-        })
+            userOrderCode: this.userOrderCode
-        this.orderInfo = result.data
+          })
+          this.orderInfo = result.data
+        } else {
+          this.orderInfo = {}
+        }
+
       },
       async getReportList() {   // 报备大类
         let res = await getReportListByOrder({
@@ -272,37 +303,60 @@
     }
   }
 </script>
-
+<style lang="scss">
+  .custom-pull-refresh {
+    height: 100% !important;
+  }
+</style>
 <style lang="scss" scoped>
   #app {
     background: #F9FCFF !important;
+    height: 100%;
   }
+
   .main_wrap {
     width: 100%;
     height: 100%;
     background: #F9FCFF !important;
     display: flex;
     flex-direction: column;
+    // 添加以下样式确保正确的高度计算
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
   }
 .top_bg {
   width: 100%;
-  height: 162px;
+  height: 87px;
-  background: #334885;
+  /*.title {
-  .title {
     color: #fff;
     text-align: center;
     padding-top: 52px;
     font-size: 17px;
     line-height: 24px;
-  }
+  }*/
 }
+  .dispatch { // 调度app头部背景色
+    background: #354683;
+  }
+  .driver { // 司机app头部背景色
+    background: #334885;
+  }
 .service_wrap {
   margin-top: -75px;
-  margin-bottom: 20px;
+  /*margin-bottom: 20px;*/
 }
 .chat_list {
   flex: 1;
-  overflow: auto;
+  /*overflow: auto;*/
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch; // 为了iOS平滑滚动
+  padding-top: 10px;
+  /* 修复 iOS 滚动问题 */
+  transform: translateZ(0);
   .top_tip_wrap {
     color: #7C8698;
     text-align: center;
@@ -490,6 +544,8 @@
           border-radius: 6px;
           min-height: 95px;
           border: 1px solid #E2EAF6;
+          padding: 10px;
+          font-size: 13px;
         }
       }
     }