apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

task#6524 下拉刷新

Browse Source
This commit is contained in:
周林芳
2025-06-19 20:32:16 +08:00
parent bb13a6e34e
commit 001683f215
1 changed files with 131 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
src/views/report/reportIndex.vue
View File

@ -1,127 +1,127 @@
<template> <template>
<div class="main_wrap"> <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<div class="top_bg"> <div class="main_wrap">
<div class="title">报备中心</div> <div class="top_bg">
</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> <div class="service_wrap">
<service-item :order-info="orderInfo"></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> </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> </div>
<img class="report_arrow" src="@/assets/report/add_report_arrow.png" alt="">
</div> </div>
<!--修改地址报备 e -->
</template> </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">
<textarea class="report_textarea" id="text-input" rows="4" placeholder="点击这里输入补充报备内容" v-model.trim="remark"></textarea> <div class="customer_left">
<!-- <van-field--> <img class="profile_photo mr" src="@/assets/report/report_customer.png" alt="">
<!-- v-model="remark"--> </div>
<!-- class="report_textarea"--> <div class="common_right customer_cls">
<!-- placeholder="点击这里输入补充报备内容" />--> <div class="customer_status">{{item.reportConfigName}}</div>
</div> <div class="response_con">{{item.remark}}</div>
</div> </div>
<div class="report_btn" @click="saveHandler"> </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> </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"
:min-date="minDate" :min-date="minDate"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="showDatetime = false" @cancel="showDatetime = false"
/> />
</van-popup> </van-popup>
</div> </div>
</van-pull-refresh>
</template> </template>
<script> <script>
@ -154,6 +154,7 @@
userOrderCode: '', userOrderCode: '',
driverId: '', driverId: '',
clickFlag: true, clickFlag: true,
isLoading: false,
} }
}, },
async mounted() { async mounted() {
@ -178,6 +179,18 @@
} }
}, },
methods: { methods: {
onRefresh() {
setTimeout(async () => {
try {
await this.getReportList();
await this.getDetail();
await this.getRecordList();
await this.scrollToBottom();
} finally {
this.isLoading = false; // 结束加载状态
}
}, 100)
},
// 添加滚动方法 // 添加滚动方法
scrollToBottom() { scrollToBottom() {
this.$nextTick(() => { this.$nextTick(() => {
@ -528,4 +541,7 @@
::v-deep .van-popup__close-icon { ::v-deep .van-popup__close-icon {
color: #0F458E; color: #0F458E;
} }
::v-deep .van-pull-refresh {
height: 100%;
}
</style> </style>