<template>
|
<view v-if="Object.keys(info) != 0" class="px-31 pt-38">
|
<view v-if="type" class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2">
|
<view class="flex a-center j-between fs-23 lh-33 font-bold">
|
<view>诉求号：{{ info.serialNumber }}</view>
|
<view class="color1">{{ ["正在办理", "延期办理", "超时办理", "已办结", "群众撤销", "上报待审核", "上级驳回"][info.status] }}</view>
|
</view>
|
<view class="mx-13 mt-33 pt-35 pb-33 px-27 br-19 flex a-center j-between bgcolor1">
|
<view class="fs-27 lh-38 color2">{{ info.location }}</view>
|
<image src="@/static/detailImg/dwei.png" class="w-31 h-31 shrink0" />
|
</view>
|
<view class="flex a-center j-between mt-31 mx-13">
|
<view class="flex-column a-center">
|
<view class="fs-27 lh-38 font-bold">问题类型</view>
|
<view class="mt-8 fs-23 lh-42 txt-center px-31 font-w400 color3 bgcolor3 border1">
|
{{ info.problemType }}
|
</view>
|
</view>
|
<view class="flex-column a-center">
|
<view class="fs-27 lh-38 font-bold">群众姓名</view>
|
<view class="fs-27 lh-38 mt-10">{{ info.name }}</view>
|
</view>
|
<view class="flex-column a-center">
|
<view class="fs-27 lh-38 font-bold">联系电话</view>
|
<view class="fs-27 lh-38 mt-10">{{ info.contactNumber }}</view>
|
</view>
|
</view>
|
</view>
|
|
<view v-if="info.complaintProgresses.length != 0" class="progress">
|
<view class="proCard">
|
<view class="proItem" v-for="(item, index) in info.complaintProgresses" :key="item.id">
|
<view class="mr-31 flex flex-column a-center">
|
<view class="dot">
|
<view class="box"></view>
|
</view>
|
<view class="proLine">
|
</view>
|
</view>
|
<view class="flex1">
|
<view class="flex a-center j-between mb-10">
|
<view class="name">{{ item.createByName }}</view>
|
<view class="time">{{ item.createTime | formatTime }}</view>
|
</view>
|
<view class="context">{{ item.describe }}</view>
|
<view class="proImg">
|
<view v-if="item.imgUrl">
|
<view class="imgOrVedio" v-for="(ite, index) in item.imgUrl.split(',')" :key="index">
|
<image :src="ite" class="img shrink0" mode="aspectFill" />
|
<view
|
class="absolute mt-19 w-140 h-140 bgcolor5 top0 left0 br-8 flex a-center j-center">
|
<image @tap="viewImage(ite)" src="@/static/Appeal/amplify.png"
|
class="w-19 h-19" />
|
</view>
|
</view>
|
</view>
|
<view v-if="item.video">
|
<view class="imgOrVedio" v-for="(ite, index) in item.video.split(',')" :key="index">
|
<video id="myVideo" class="w-140 h-140 mt-19 shrink0" disabled :controls="false"
|
:show-center-play-btn="false" :src="ite" />
|
<view class="videoOpen" @click.stop="openVideo(ite)">
|
<image src="../../static/detailImg/open.png" class="video shrink0"
|
mode="aspectFill">
|
</image>
|
</view>
|
</view>
|
</view>
|
|
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view v-if="info.complaintProgresses.length == 0" 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-if="type" @tap="toAdd" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">添加办理进度
|
</view>
|
<view class="safe-box"></view>
|
</view>
|
</template>
|
|
<script>
|
import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs'
|
import {
|
getComplaintDetail
|
} from './service'
|
export default {
|
data() {
|
return {
|
id: '',
|
info: {},
|
type: true,
|
}
|
},
|
filters: {
|
formatTime(val) {
|
if (!val) return ''
|
return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
|
}
|
},
|
onShow(params) {
|
this.id = params.id
|
if (params.type) {
|
this.type = false
|
uni.setNavigationBarTitle({
|
title: '办理进度'
|
})
|
}
|
getComplaintDetail({
|
id: params.id
|
}).then(res => {
|
console.log('res', res)
|
this.info = {
|
...res.data
|
}
|
})
|
},
|
methods: {
|
toAdd() {
|
uni.navigateTo({
|
url: `/pages/add-progress/index?id=${this.id}`
|
})
|
},
|
viewImage(item) {
|
uni.previewImage({
|
urls: [item]
|
})
|
},
|
// 去大屏播放视频
|
openVideo(url) {
|
uni.navigateTo({
|
url: `/pages/work-detail/maxVideo?url=${url}`
|
})
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.bs-1 {
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.color1 {
|
color: #FF4948;
|
}
|
|
.color2 {
|
color: rgba(0, 0, 0, .8);
|
}
|
|
.color3 {
|
color: #FAAD14;
|
}
|
|
.color4 {
|
color: #FFFFFF;
|
}
|
|
.color9 {
|
color: #999999;
|
}
|
|
.bgcolor1 {
|
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%);
|
}
|
|
.bgcolor2 {
|
background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 25%);
|
}
|
|
.bgcolor3 {
|
background: #FFFBE6;
|
}
|
|
.bgcolor4 {
|
background: #F8F8F8;
|
}
|
|
.bgcolor5 {
|
background: rgba(0, 0, 0, .23);
|
}
|
|
.bgcolor6 {
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
}
|
|
.border1 {
|
border: 2rpx solid #FFF1B8;
|
}
|
|
.border2 {
|
border: 2rpx solid #F8F8F8;
|
}
|
|
.safe-box {
|
height: env(safe-area-inset-bottom);
|
}
|
|
.progress {
|
border-radius: 27rpx;
|
margin-top: 38.46rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
padding: 34rpx 31rpx;
|
|
.title {
|
font-weight: 600;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
margin-bottom: 48rpx;
|
}
|
|
.proCard {
|
.proItem {
|
display: flex;
|
padding-bottom: 38rpx;
|
|
.dot {
|
width: 19rpx;
|
height: 19rpx;
|
background: linear-gradient(180deg, #FD8D3C 0%, #FA541C 100%);
|
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(252, 141, 85, 0.4);
|
border-radius: 50%;
|
margin: 10rpx 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.box {
|
width: 7rpx;
|
height: 7rpx;
|
background-color: #fff;
|
border-radius: 50%;
|
}
|
}
|
|
.proLine {
|
flex: 1;
|
width: 4rpx;
|
background: rgba(0, 0, 0, 0.06);
|
border-radius: 3rpx;
|
}
|
|
|
.name {
|
font-weight: 400;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
}
|
|
.time {
|
font-weight: 400;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.4);
|
line-height: 33rpx;
|
}
|
|
.context {
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
}
|
|
.proImg {
|
display: flex;
|
flex-wrap: wrap;
|
|
.imgOrVedio {
|
margin-right: 17rpx;
|
position: relative;
|
|
.img {
|
width: 140rpx;
|
height: 140rpx;
|
border-radius: 8rpx;
|
margin-top: 19rpx;
|
}
|
}
|
|
.videoOpen {
|
position: absolute;
|
top: 10rpx;
|
left: 0;
|
z-index: 99;
|
width: 140rpx;
|
height: 140rpx;
|
border-radius: 8rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 19rpx;
|
|
.video {
|
z-index: 999;
|
width: 140rpx;
|
height: 140rpx;
|
}
|
}
|
}
|
}
|
|
.proItem:last-child {
|
.proLine {
|
display: none;
|
}
|
}
|
}
|
}
|
|
.videoImg {
|
width: 140.38rpx;
|
height: 140.38rpx;
|
border-radius: 7.69rpx;
|
position: relative;
|
}
|
|
#myVideo {
|
z-index: 1;
|
}
|
</style>
|
