<template>
|
<view class="handle-work-page">
|
<u-navbar title="处置记录" :is-back="true" back-text="" :back-icon-size="40" @left-click="onBackClick"></u-navbar>
|
|
<!-- 把上传处置放在滚动区域外面，固定在头部 -->
|
<view v-if="eventStatus != 4" class="upload_handle" @click="uploadHadle">+上传处置</view>
|
|
<scroll-view class="record-scroll" scroll-y :lower-threshold="80" @scrolltolower="loadMore">
|
<view class="record-list">
|
<view class="record-card" v-for="(item, index) in recordList" :key="index">
|
<!-- 第一行：名称 + 状态 -->
|
<view class="card-row-top">
|
<text class="card-name">{{ item.disposeUserName }}</text>
|
<text class="card-status" :class="statusClass(item.disposeStatus)">
|
{{ getStatusLabel(item.disposeStatus) }}
|
</text>
|
</view>
|
<!-- 第二行：标题 -->
|
<view class="card-title">
|
<text>{{ item.disposeContent }}</text>
|
</view>
|
<!-- 第三行：图片列表 -->
|
<view class="card-images" v-if="item.attachUrl && item.attachUrl.length">
|
<image
|
v-for="(img, imgIdx) in item.attachUrl"
|
:key="imgIdx"
|
:src="img"
|
mode="aspectFill"
|
class="card-image"
|
@click="previewImage(item.attachUrl, imgIdx)"
|
/>
|
</view>
|
<!-- 第四行：日期 -->
|
<view class="card-row-bottom">
|
<text class="card-date">{{ formatDate(item.operateTime) }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 暂无数据 -->
|
<view class="noData" v-if="!loading && recordList.length === 0">
|
<text>暂无处置记录</text>
|
</view>
|
<!-- 加载提示 -->
|
<view class="loadingMore">
|
<text v-if="loading">加载中...</text>
|
<text v-else-if="!hasMore && recordList.length > 0">没有更多了</text>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import { onLoad } from '@dcloudio/uni-app'
|
import dayjs from 'dayjs'
|
import { getDisposeRecords } from '@/api/work/index.js'
|
|
const eventId = ref('')
|
const eventStatus = ref('')
|
const recordList = ref([])
|
const loading = ref(false)
|
const hasMore = ref(true)
|
const listParams = ref({
|
current: 1,
|
size: 3,
|
})
|
|
// 获取状态文本
|
const getStatusLabel = status => {
|
const map = {
|
0: '待确认',
|
1: '处置中',
|
2: '已退回',
|
3: '已处置',
|
4: '已完成',
|
}
|
return map[status] || '未知'
|
}
|
|
// 状态样式类名
|
const statusClass = status => {
|
if (status === 1) return 'status-processing'
|
if (status === 3) return 'status-handled'
|
if (status === 4) return 'status-completed'
|
return ''
|
}
|
|
// 格式化日期
|
const formatDate = dateString => {
|
if (!dateString) return ''
|
return dayjs(dateString).format('YYYY-MM-DD HH:mm')
|
}
|
|
// 读取工单标识
|
onLoad(options => {
|
eventId.value = options?.id ?? ''
|
eventStatus.value = options?.eventStatus ?? ''
|
getRecordList()
|
})
|
|
onShow(() => {
|
getRecordList()
|
})
|
|
// 获取处置记录列表
|
const getRecordList = async () => {
|
if (loading.value || !hasMore.value) return
|
loading.value = true
|
const res = await getDisposeRecords({ eventId: eventId.value })
|
recordList.value = res.data.data
|
loading.value = false
|
}
|
|
function uploadHadle() {
|
// 取最后一条记录的状态值，列表为空时取页面进入时的状态
|
const status = recordList.value.length
|
? recordList.value[recordList.value.length - 1]?.disposeStatus
|
: eventStatus.value
|
uni.navigateTo({
|
url: `/subPackages/workDetail/HandleWorking/index?id=${eventId.value}&eventStatus=${status}`,
|
})
|
}
|
|
// 加载更多
|
const loadMore = () => {
|
if (loading.value || !hasMore.value) return
|
listParams.value.current++
|
getRecordList()
|
}
|
|
// 图片预览
|
const previewImage = (attachments, index) => {
|
uni.previewImage({
|
urls: attachments,
|
current: index,
|
})
|
}
|
|
// 返回按钮点击事件
|
const onBackClick = () => {
|
uni.navigateBack()
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.handle-work-page {
|
// #ifdef APP-PLUS
|
padding-top: 188rpx;
|
// #endif
|
// #ifdef H5
|
padding-top: 88rpx;
|
// #endif
|
:deep() {
|
.u-navbar__content {
|
background: url('https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ztzf_app_assets/images/user/bg.png')
|
no-repeat !important;
|
background-size: 100% !important;
|
height: 88rpx !important;
|
}
|
}
|
|
display: flex;
|
flex-direction: column;
|
height: 100vh; // 新增：占满全屏
|
background: #f6f6f6;
|
box-sizing: border-box;
|
|
:deep(.u-navbar) {
|
position: fixed !important;
|
top: 0;
|
left: 0;
|
right: 0;
|
z-index: 100;
|
}
|
|
:deep(.u-navbar__content) {
|
height: 88rpx !important;
|
}
|
}
|
|
// 上传处置按钮 - 移到滚动区域外面
|
.upload_handle {
|
// #ifdef APP-PLUS
|
//padding-top: 70rpx;
|
// #endif
|
height: 80rpx; // 改大一点，方便点击
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
padding-right: 24rpx;
|
// margin: 0 0 12rpx 0; // 上下间距
|
color: #1d6fe9;
|
font-size: 28rpx;
|
flex-shrink: 0; // 防止被压缩
|
background: #f6f6f6; // 背景色，避免和滚动区域混在一起
|
}
|
|
.record-scroll {
|
flex: 1; // 占满剩余高度
|
// padding-top: 24rpx;
|
padding: 10rpx 24rpx 24rpx 24rpx; // 左右下内边距
|
box-sizing: border-box;
|
}
|
|
.record-list {
|
display: flex;
|
flex-direction: column;
|
gap: 20rpx;
|
padding-bottom: 10rpx;
|
}
|
|
.record-card {
|
background: #ffffff;
|
border-radius: 12rpx;
|
padding: 24rpx;
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
}
|
|
.card-row-top {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16rpx;
|
}
|
|
.card-name {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 500;
|
font-size: 28rpx;
|
color: #222324;
|
}
|
|
.card-status {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
// font-size: 44px;
|
padding: 4px 16px;
|
border-radius: 6px;
|
color: #ffffff;
|
background: #999;
|
|
&.status-processing {
|
background: #1d6fe9;
|
}
|
&.status-handled {
|
background: #e6a23c;
|
}
|
&.status-completed {
|
background: #00b578;
|
}
|
}
|
|
.card-title {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222324;
|
line-height: 1.6;
|
margin-bottom: 16rpx;
|
word-break: break-all;
|
}
|
|
.card-images {
|
display: flex;
|
gap: 12rpx;
|
margin-bottom: 16rpx;
|
overflow: hidden;
|
}
|
|
.card-image {
|
width: 160rpx;
|
height: 160rpx;
|
border-radius: 8rpx;
|
flex-shrink: 0;
|
}
|
|
.card-row-bottom {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.card-date {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999;
|
}
|
|
.noData {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 400rpx;
|
font-size: 28rpx;
|
color: #999;
|
}
|
|
.loadingMore {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 80rpx;
|
font-size: 28rpx;
|
color: #999;
|
}
|
</style>
|
