485 lines
11 KiB
Vue
485 lines
11 KiB
Vue
<template>
|
||
<view class="report-record-page page_padding">
|
||
<!-- 顶部导航栏 -->
|
||
<navBar @clickLeft="navBack" title="我的工单"></navBar>
|
||
<view class="hall_body flex-1 flex flex-col">
|
||
<!-- 状态筛选标签 -->
|
||
<TabsComponents
|
||
:activeValue="activeStatus"
|
||
:tabslist="statusTabs"
|
||
:options="{ label: 'label', value: 'value' }"
|
||
@update="switchStatus"
|
||
></TabsComponents>
|
||
|
||
<!-- 类型筛选标签 -->
|
||
<view class="type-tabs">
|
||
<view
|
||
v-for="item in typeTabs"
|
||
:key="item.value"
|
||
class="type-tab-item"
|
||
:class="{ active: activeType === item.value }"
|
||
@tap="switchType(item.value)"
|
||
>
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 上报记录列表 -->
|
||
<scroll-view
|
||
class="record-list flex-1"
|
||
scroll-y
|
||
lower-threshold="60"
|
||
enable-flex="true"
|
||
@scrolltolower="scrolltolower"
|
||
>
|
||
<!-- 空状态 -->
|
||
<view v-if="reportRecords.length === 0" class="empty-state">
|
||
<uni-icons type="empty" size="60" color="#ccc"></uni-icons>
|
||
<text class="empty-text">暂无记录</text>
|
||
</view>
|
||
<!-- 记录卡片 -->
|
||
<view
|
||
v-for="(record, index) in reportRecords"
|
||
@tap="handleComplted(record)"
|
||
:key="index"
|
||
class="record-card"
|
||
>
|
||
<!-- 标题 + 状态标签 -->
|
||
<view class="card-header">
|
||
<text class="card-title">{{ record.item }}</text>
|
||
<view class="status-tag pending" v-if="record.problemStatus === '0'"> 待分配 </view>
|
||
<view class="status-tag processing" v-if="record.problemStatus === '1'"> 待解决 </view>
|
||
<view class="status-tag completed" v-if="record.problemStatus === '2'"> 已完成 </view>
|
||
</view>
|
||
|
||
<!-- 类型标签 -->
|
||
<view class="tag-group" v-if="record.projectTypeStr || record.maintenanceItemName">
|
||
<view class="tag-item" v-if="record.projectTypeStr">{{ record.projectTypeStr }}</view>
|
||
<view class="tag-item" v-if="record.maintenanceItemName">{{
|
||
record.maintenanceItemName
|
||
}}</view>
|
||
</view>
|
||
|
||
<!-- 内容 -->
|
||
<view class="card-content"> {{ record.problem }} </view>
|
||
<!-- 底部信息 -->
|
||
<view class="card-footer">
|
||
<text class="create-time">{{ record.createTime }}</text>
|
||
<text v-if="record.problemStatus === '1'" class="repairman"
|
||
>维修师傅：{{ record.repairName }}</text
|
||
>
|
||
<view class="share" v-if="record.problemStatus === '0'">
|
||
<text>维修完成</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import { onReady, onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
|
||
import TabsComponents from '@/components/tabs/tabs.vue'
|
||
import NavBar from '@/components/navbar/navbar.vue'
|
||
import { getUserTicketlist } from '@/api/ticket.js'
|
||
|
||
// 筛选状态
|
||
const activeStatus = ref(0) // 全部/待分配/待解决/已完成
|
||
const activeType = ref(-1) // 全部/公共报修/个人报修
|
||
|
||
// 状态筛选选项
|
||
const statusTabs = ref([
|
||
{ label: '全部', value: 0 },
|
||
{ label: '待解决', value: 1 },
|
||
{ label: '已完成', value: 2 }
|
||
])
|
||
|
||
// 类型筛选选项
|
||
const typeTabs = ref([
|
||
{ label: '全部', value: -1 },
|
||
{ label: '公共报修', value: 0 },
|
||
{ label: '个人报修', value: 1 }
|
||
])
|
||
|
||
// 模拟上报记录数据（实际项目替换为接口请求）
|
||
const reportRecords = ref([])
|
||
|
||
const queryParmas = ref({
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
itemType: undefined,
|
||
problemStatus: undefined
|
||
})
|
||
const isLoading = ref(false) // 加载锁
|
||
const hasMore = ref(true) // 是否还有更多数据
|
||
const total = ref(0)
|
||
function scrolltolower() {
|
||
if (isLoading.value || !hasMore.value) return
|
||
queryParmas.value.pageNum += 1
|
||
getlist()
|
||
}
|
||
|
||
onLoad(data => {
|
||
if (data.MyOrderNum === '0') {
|
||
activeStatus.value = 0
|
||
queryParmas.value.problemStatus = undefined
|
||
} else {
|
||
activeStatus.value = 1
|
||
queryParmas.value.problemStatus = 1
|
||
}
|
||
})
|
||
|
||
function getlist() {
|
||
if (isLoading.value || !hasMore.value) {
|
||
uni.stopPullDownRefresh()
|
||
isRefresh = false
|
||
return
|
||
}
|
||
isLoading.value = true
|
||
|
||
getUserTicketlist(queryParmas.value)
|
||
.then(res => {
|
||
total.value = res.total
|
||
const list = res.rows.map(item => ({
|
||
...item,
|
||
repairImageUrlList: item.repairImageUrl
|
||
? item.repairImageUrl.split(',').filter(Boolean)
|
||
: []
|
||
}))
|
||
|
||
if (queryParmas.value.pageNum === 1) {
|
||
reportRecords.value = list
|
||
} else {
|
||
reportRecords.value.push(...list)
|
||
}
|
||
hasMore.value = reportRecords.value.length < total.value
|
||
})
|
||
.catch(err => {
|
||
uni.showToast({ title: res.msg || '获取数据失败', icon: 'none' })
|
||
})
|
||
.finally(() => {
|
||
isLoading.value = false
|
||
if (isRefresh) {
|
||
uni.stopPullDownRefresh()
|
||
isRefresh = false
|
||
}
|
||
})
|
||
}
|
||
onShow(() => {
|
||
resetList()
|
||
})
|
||
function resetList() {
|
||
reportRecords.value = []
|
||
queryParmas.value.pageNum = 1
|
||
hasMore.value = true
|
||
getlist()
|
||
}
|
||
|
||
// 切换状态（全部/待分配/待解决/已完成）筛选
|
||
const switchStatus = value => {
|
||
activeStatus.value = value
|
||
if (value === 0) {
|
||
queryParmas.value.problemStatus = undefined
|
||
} else {
|
||
queryParmas.value.problemStatus = value
|
||
}
|
||
hasMore.value = true
|
||
reportRecords.value = []
|
||
queryParmas.value.pageNum = 1
|
||
getlist()
|
||
}
|
||
|
||
// 切换类型（公共/个人）筛选
|
||
const switchType = value => {
|
||
activeType.value = value
|
||
if (value === -1) {
|
||
queryParmas.value.itemType = undefined
|
||
} else {
|
||
queryParmas.value.itemType = value
|
||
}
|
||
hasMore.value = true
|
||
reportRecords.value = []
|
||
queryParmas.value.pageNum = 1
|
||
getlist()
|
||
}
|
||
|
||
// 返回上一页
|
||
const navBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
// 1待解决 2已完成
|
||
function handleComplted(row) {
|
||
if (row) {
|
||
const status = row.repairStatus
|
||
if (status === 2) {
|
||
uni.navigateTo({
|
||
url: `/pageSubPack/ticket/repairMain?id=${row.id}&showbtn=${false}&path=myticket`
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pageSubPack/ticket/repairMain?id=${row.id}&showbtn=${true}&path=myticket`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
// 是否正在下拉刷新
|
||
let isRefresh = false
|
||
onPullDownRefresh(() => {
|
||
isRefresh = true
|
||
resetList()
|
||
})
|
||
/* 预览图片 */
|
||
function handlePrivew(imgs) {
|
||
// if (imgs.length > 0) {
|
||
// uni.previewImage({
|
||
// urls: imgs,
|
||
// success(e) {
|
||
// console.log(JSON.stringify(e))
|
||
// }
|
||
// })
|
||
// }
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.report-record-page {
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
|
||
}
|
||
|
||
.hall_body {
|
||
padding: 0 40rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
/* 状态筛选标签 */
|
||
.status-tabs {
|
||
display: flex;
|
||
/* background-color: #fff; */
|
||
padding: 0 40rpx;
|
||
height: 88rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.status-tab-item {
|
||
/* flex: 1; */
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
margin-right: 60rpx;
|
||
text-align: left;
|
||
font-size: 32rpx;
|
||
color: #666;
|
||
height: 100%;
|
||
line-height: 88rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.status-tab-item.active {
|
||
color: #4d5dfa;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-tab-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80rpx;
|
||
height: 8rpx;
|
||
background: linear-gradient(to bottom, #4d5dfa, #bac0fa);
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
/* 类型筛选标签 */
|
||
.type-tabs {
|
||
display: flex;
|
||
height: 48rpx;
|
||
/* background-color: #fff; */
|
||
margin: 20rpx 0;
|
||
justify-content: flex-start;
|
||
}
|
||
.type-tabs > .type-tab-item:not(:last-child) {
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.type-tab-item {
|
||
width: 142rpx;
|
||
height: 48rpx;
|
||
border-radius: 24rpx;
|
||
border: 2rpx solid #999999;
|
||
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.type-tab-item.active {
|
||
color: #4d5dfa;
|
||
border: 2rpx solid #4d5dfa;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
/* 记录列表 */
|
||
.record-list {
|
||
box-sizing: border-box;
|
||
padding-bottom: 40rpx;
|
||
overflow-y: auto;
|
||
height: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
color: #ccc;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 32rpx;
|
||
color: #999;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
/* 记录卡片 */
|
||
.record-card {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 34rpx 32rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.card-title {
|
||
margin-right: 20rpx;
|
||
font-weight: 450;
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
line-height: 40rpx;
|
||
max-width: 500rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 状态标签 */
|
||
.status-tag {
|
||
width: 82rpx;
|
||
height: 30rpx;
|
||
border-radius: 15rpx;
|
||
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
.status-tag.pending {
|
||
background-color: #e34d59; /* 待分配-红色 */
|
||
}
|
||
|
||
.status-tag.processing {
|
||
background-color: #09c2bd; /* 待解决-绿色 */
|
||
}
|
||
|
||
.status-tag.completed {
|
||
background-color: #4d5dfa; /* 已完成-蓝色 */
|
||
}
|
||
|
||
/* 类型标签组 */
|
||
.tag-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.tag-group > .tag-item:not(:last-child) {
|
||
margin-right: 20rpx;
|
||
}
|
||
.tag-item {
|
||
padding: 0 10rpx;
|
||
margin: 5rpx;
|
||
min-height: 42rpx;
|
||
text-align: left;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border: 1rpx solid #999999;
|
||
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 42rpx;
|
||
}
|
||
|
||
/* 内容 */
|
||
.card-content {
|
||
margin-bottom: 20rpx;
|
||
font-weight: 450;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 40rpx;
|
||
letter-spacing: 2rpx;
|
||
word-wrap: break-word;
|
||
}
|
||
/* 图片 */
|
||
.card-image {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
min-width: 186rpx;
|
||
min-height: 104rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.images {
|
||
width: 186rpx;
|
||
height: 104rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
/* 底部信息 */
|
||
.card-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
.share {
|
||
width: 127rpx;
|
||
height: 44rpx;
|
||
background: #4d5dfa;
|
||
border-radius: 22rpx;
|
||
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
line-height: 44rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.repairman {
|
||
color: #999;
|
||
}
|
||
</style>
|