<template>
|
<view class="content">
|
<view class="bgColor2 h-96 flex a-center fs-27 j-between txt-center shadow1 font-w400 color1"
|
style="position: sticky;top: 0;z-index: 999;">
|
<view @click="changeType('')" class="flex1 bgColor2 relative"
|
:class="searchParams.type == '' && 'color2 font-bold'">
|
<view class="relative zIndex1000">
|
全部
|
</view>
|
<view v-if="searchParams.type == ''" class="bgColor1"></view>
|
</view>
|
<view @click="changeType('0')" class="flex1 bgColor2 relative"
|
:class="searchParams.type == '0' && 'color2 font-bold'">
|
<view class="relative zIndex1000">
|
上报待审核
|
</view>
|
<view v-if="searchParams.type == '0'" class="bgColor1"></view>
|
</view>
|
<view @click="changeType('1')" class="flex1 bgColor2 relative"
|
:class="searchParams.type == '1' && 'color2 font-bold'">
|
<view class="relative zIndex1000">
|
正在办理
|
</view>
|
<view v-if="searchParams.type == '1'" class="bgColor1"></view>
|
</view>
|
<view @click="changeType('2')" class="flex1 bgColor2 relative"
|
:class="searchParams.type == '2' && 'color2 font-bold'">
|
<view class="relative zIndex1000">
|
办结
|
</view>
|
<view v-if="searchParams.type == '2'" class="bgColor1"></view>
|
</view>
|
</view>
|
<view v-if="list.length == 0 && status == 'noMore'" class="mt-200">
|
<image src="../../static/空空如也@2x.png" mode="widthFix" class="w100"></image>
|
<view class="txt-center mt-94 fs-27 color9">
|
暂无数据
|
</view>
|
</view>
|
<view v-else class="pl-31 pr-31">
|
<view class="mt-31 br-19 bgColor3 shadow2 oh pb-31" v-for="(item,index) in list" :key="item.id"
|
@click="toDetail(item)">
|
<view class="pt-21 pl-27 pr-27 flex a-center j-between fs-27 font-bold">
|
<view class="">
|
诉求号：{{ item.serialNumber || '' }}
|
</view>
|
<view class="color3 flex a-center">
|
<view v-if="status == '2'"
|
class="fs-23 font-w500 flex a-center pl-10 pr-12 mr-17 bgColor7 h-50 br-8 color8">
|
<view class="w-27 h-27 color3 bgColor2 txt-center br-18 fs-20 flex a-center j-center mr-17">
|
i
|
</view>
|
已超时{{ item.overTimeDays }}天
|
</view>
|
{{ statusObj[item.status] }}
|
</view>
|
</view>
|
<view v-if="[5,6].includes(item.status)" class="mt-40 fs-23 pl-40 pr-40">
|
<view class="flex j-between a-center">
|
<view class="color4">
|
上报人：<text class="color5">{{ item.reporter || '' }}</text>
|
</view>
|
<view class="color4">
|
所属部门：<text class="color5">{{ item.departmentName || '' }}</text>
|
</view>
|
</view>
|
<view class="mt-15">
|
<view class="color4">
|
提交时间：<text class="color5">{{ item.reportTime | formatTime }}</text>
|
</view>
|
</view>
|
</view>
|
<view class="mt-27 ml-40 mr-40 br-19 bgColor4 pt-34 pb-34 fs-27 pl-27 pr-27 flex a-center j-between">
|
<text>{{ item.location || '' }}</text>
|
<image src="../../static/position@2x.png" class="w-31 h-31 ml-10 shrink0"></image>
|
</view>
|
<view class="ml-40 mr-40 mt-31 flex j-between a-center fs-27 txt-center">
|
<view class="">
|
<view class="font-bold">
|
问题类型
|
</view>
|
<view class="tip">
|
{{ item.problemType || '' }}
|
</view>
|
</view>
|
<view class="">
|
<view class="font-bold">
|
群众姓名
|
</view>
|
<view class="mt-10">
|
{{ item.name || '' }}
|
</view>
|
</view>
|
<view class="flex a-center">
|
<view style="text-align: left;">
|
<view class="font-bold">
|
联系电话
|
</view>
|
<view class="mt-10">
|
{{ item.contactNumber || '' }}
|
</view>
|
</view>
|
<image @click.stop="callPhone(item.contactNumber)" src="../../static/tell.png"
|
class="w-58 h-58 shrink0 " />
|
</view>
|
</view>
|
<view v-if="item.status != '3'" class="fs-27 mt-31 ml-40 mr-40">
|
<view class="font-bold">
|
问题描述
|
</view>
|
<view class="mt-10 lh-38">
|
{{ item.descriptionContent || '' }}
|
</view>
|
</view>
|
<view v-if="item.status != '3' && item.images" class="fs-27 mt-31 ml-40">
|
<view class="font-bold">
|
描述图片
|
</view>
|
<view class="mt-19 flex wrap a-center">
|
<image v-for="(item1,index) in item.images" :key="index" :src="item1"
|
@click.stop="previewImage(item.images,index)" class="br-19 w-142 h-154 mr-13 mb-10 shrink0"
|
mode="aspectFill"></image>
|
</view>
|
</view>
|
<view class="mt-31 border1">
|
<view class="left"></view>
|
<view class="right"></view>
|
<view class="txt-center fs-23 mt-27 color6">
|
创建时间：{{ item.createTime | formatTime }}
|
</view>
|
<view v-if="item.listControlsButtonStatus == 0"
|
class="flex a-center j-center fs-23 mt-29 txt-center">
|
<view @click.stop="addProgress(item.id)" class="h-58 lh-58 bgColor5 w-192 br-29 color10">
|
添加办理进度
|
</view>
|
<view @click.stop="addResult(item.id)" class="ml-38 h-58 lh-58 bgColor6 w-192 br-29 color8">
|
办理结果录入
|
</view>
|
</view>
|
<view v-if="item.evaluateButtonStatus == 0" class="flex a-center j-center fs-23 mt-29 txt-center">
|
<view @click.stop="toEvaluate(item.id)" class="h-58 lh-58 bgColor6 w-192 br-29 color8">
|
评价
|
</view>
|
</view>
|
<view v-if="item.status == 8" class="flex a-center j-center fs-23 mt-29 txt-center">
|
<view @click.stop="toDetailEvaluate(item.id)" class="h-58 lh-58 bgColor6 w-192 br-29 color8">
|
查看评价
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="safe-b pt-20"></view>
|
</view>
|
</template>
|
|
<script>
|
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js'
|
import {
|
getList
|
} from './service.js'
|
export default {
|
data() {
|
return {
|
active: 1,
|
searchParams: {
|
pageNum: 1,
|
pageSize: 10,
|
type: '', //全部：不传，上报待审核：0，正在办理：1， 办结：2
|
},
|
list: [],
|
status: 'loadMore',
|
statusObj: {
|
// 0-正在办理 1-延期办理 2-超时办理 3-已办结 4-群众撤销 5-上报待审核 6-上级驳回
|
'0': '正在办理',
|
'1': '延期办理',
|
'2': '超时办理',
|
'3': '已办结',
|
'4': '群众撤销',
|
'5': '上报待审核',
|
'6': '上级驳回',
|
'7': '延期待审核',
|
'8': '已办结'
|
}
|
}
|
},
|
onReachBottom() {
|
if (this.status == 'loadMore') {
|
this.searchParams.pageNum += 1
|
this.fetchList(this.searchParams, (e) => {
|
this.list = [...this.list, ...e.records]
|
if (this.list.length == e.total) {
|
this.status = 'noMore'
|
} else {
|
this.status = 'loadMore'
|
}
|
})
|
}
|
},
|
filters: {
|
formatTime(val) {
|
if (!val) return ''
|
return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
|
}
|
},
|
onShow() {
|
this.searchParams.pageNum = 1
|
this.fetchList(this.searchParams, (e) => {
|
this.list = e.records || []
|
if (this.list.length == e.total) {
|
this.status = 'noMore'
|
} else {
|
this.status = 'loadMore'
|
}
|
})
|
},
|
methods: {
|
callPhone(phoneNumber) {
|
uni.makePhoneCall({
|
phoneNumber
|
});
|
},
|
// 去评价
|
toEvaluate(id) {
|
uni.navigateTo({
|
url: `/pages/evaluate/evaluate?id=${id}`
|
})
|
},
|
toDetailEvaluate(id) {
|
uni.navigateTo({
|
url: `/pages/evaluate/evaluate-detail?id=${id}`
|
})
|
},
|
fetchList(params, callback) {
|
if (this.status == 'loading') return
|
this.status = 'loading'
|
getList(params).then(res => {
|
if (res.code == 200) {
|
res.data.records.map(item => {
|
if (item.images) {
|
item.images = item.images.split(',')
|
}
|
})
|
callback(res.data)
|
}
|
})
|
},
|
// 添加办理进度
|
addProgress(id) {
|
uni.navigateTo({
|
url: `/pages/progress/progress?id=${id}`
|
})
|
},
|
// 办理结果录入
|
addResult(id) {
|
uni.navigateTo({
|
url: `/pages/result-entry/index?id=${id}`
|
})
|
},
|
// 切换状态筛选
|
changeType(type) {
|
this.searchParams = {
|
pageNum: 1,
|
pageSize: 10,
|
type, //全部：不传，上报待审核：0，正在办理：1， 办结：2
|
}
|
this.fetchList(this.searchParams, (e) => {
|
this.list = e.records || []
|
if (this.list.length == e.total) {
|
this.status = 'noMore'
|
} else {
|
this.status = 'loadMore'
|
}
|
})
|
},
|
// 预览图片
|
previewImage(list, index) {
|
uni.previewImage({
|
urls: list,
|
current: index,
|
});
|
},
|
toDetail(item) {
|
uni.navigateTo({
|
url: `/pages/work-detail/work-detail?id=${item.id}`
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.content {
|
height: 100%;
|
background-color: #f7f7f7;
|
}
|
|
.tip {
|
height: 40rpx;
|
background-color: #FFFBE6;
|
border: 2rpx solid #FFF1B8;
|
border-radius: 8rpx;
|
color: #FAAD14;
|
text-align: center;
|
line-height: 40rpx;
|
margin-top: 8rpx;
|
font-size: 23rpx;
|
padding: 0 10rpx;
|
min-width: 88rpx;
|
}
|
|
.shadow1 {
|
box-shadow: 0rpx 12rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.shadow2 {
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.color1 {
|
color: #4C4C4C;
|
}
|
|
.color2 {
|
color: #232323;
|
}
|
|
.color3 {
|
color: #FF4948;
|
}
|
|
.color4 {
|
color: #929191;
|
}
|
|
.color5 {
|
color: #000;
|
}
|
|
.color6 {
|
color: #666666;
|
}
|
|
.color7 {
|
color: #727272;
|
}
|
|
.color8 {
|
color: #fff;
|
}
|
|
.color9 {
|
color: #999999;
|
}
|
|
.color10 {
|
color: #636363;
|
}
|
|
.bgColor1 {
|
background: linear-gradient(270deg, #FFB318 0%, #FF330D 100%);
|
width: 58rpx;
|
height: 12rpx;
|
border-radius: 6rpx;
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: -5rpx;
|
margin: auto;
|
}
|
|
.bgColor2 {
|
background-color: #fff;
|
}
|
|
.bgColor3 {
|
background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 138rpx, #fff 100%);
|
}
|
|
.bgColor4 {
|
background: linear-gradient(270deg, rgba(255, 241, 0, 0.5) 0%, rgba(255, 249, 172, 0.25) 48%, rgba(255, 255, 255, 0.2) 100%, #FFFFFF 100%);
|
}
|
|
.bgColor5 {
|
background: #F3F3F3;
|
}
|
|
.bgColor6 {
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
}
|
|
.bgColor7 {
|
background: #FF4948;
|
}
|
|
.border1 {
|
border-top: 2rpx solid #EDEEEF;
|
position: relative;
|
|
.left {
|
width: 40rpx;
|
height: 40rpx;
|
background-color: #F4F4F4;
|
border-radius: 50%;
|
position: absolute;
|
left: -20rpx;
|
top: -20rpx;
|
}
|
|
.right {
|
width: 40rpx;
|
height: 40rpx;
|
background-color: #F4F4F4;
|
border-radius: 50%;
|
position: absolute;
|
right: -20rpx;
|
top: -20rpx;
|
}
|
}
|
</style>
|
