Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/threeSide
| | |
| | | <template> |
| | | <view class="px-31 pt-38"> |
| | | <view class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2"> |
| | | <view v-if="Object.keys(info).length != 0" 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>诉求号:7843523454</view> |
| | | <view class="color1">正在办理</view> |
| | | <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">江苏省常州市溧阳市牛顿大道172号</view> |
| | | <view class="fs-27 lh-38 color2">{{ info.detailedAddress }}</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">教育</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">沙振</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">14225874426</view> |
| | | <view class="fs-27 lh-38 mt-10">{{ info.contactNumber }}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="br-19 mt-38 bs-1 pt-35 pb-33 px-31"> |
| | | <view class="fs-27 lh-38 font-bold">办理进度描述</view> |
| | | <textarea v-model="describe" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" style="height: 365rpx;" |
| | | <textarea v-model="describe" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" |
| | | :class="(rulsFlag && !describe) && 'bgcolor-border'" style="height: 365rpx;width: calc(100% - 31rpx);" |
| | | placeholder="请输入办理进度描述" /> |
| | | <view v-if="rulsFlag && !describe" class="flex a-center mt-19"> |
| | | <image src="@/static/noNull.png" class="w-35 h-35 mr-13 shrink0" /> |
| | | <view class="fs-23 color99">办理进度描述不能为空</view> |
| | | </view> |
| | | <view class="fs-27 mt-38 lh-38 font-bold">图片</view> |
| | | <view class="flex wrap mt-27"> |
| | | <view class="relative mr-15" v-for="item in localImageUrls" :key="item"> |
| | | <view class="relative mr-15" v-for="(item, index) in localImageUrls" :key="index"> |
| | | <image v-if="item != 'loading'" :src="item" class="w-140 h-140 shrink0 br-8" /> |
| | | <view v-if="item != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8"> |
| | | <view class="absolute" style="top: 50%;left: 50%;transform: translate(-50%,-50%);"> |
| | | <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19 mr-35" |
| | | mode="" /> |
| | | <image src="@/static/Appeal/trash.png" class="w-19 h-19" /> |
| | | <view class="absolute flex a-center j-between px-34" |
| | | style="top: 50%;left: 50%;transform: translate(-50%,-50%);width: calc(100% - 68rpx);"> |
| | | <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" /> |
| | | <image @tap="delImg(item)" src="@/static/Appeal/trash.png" class="w-19 h-19" /> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view v-if="imgUrls.includes('loading')" class="w-140 h-140 flex a-center j-center mr-15 border2 br-8"> |
| | | <u-loading-icon></u-loading-icon> |
| | | </view> |
| | | <image @tap="uploadImg" src="/static/Appeal/add.png" class="w-140 h-140 shrink0" /> |
| | | <image @tap="uploadImg(1)" src="/static/Appeal/add.png" class="w-140 h-140 shrink0" /> |
| | | </view> |
| | | <view class="fs-27 mt-37 lh-38 font-bold">视频</view> |
| | | <view class="flex wrap mt-27"> |
| | | <view class="relative mr-15"> |
| | | <!-- <image src="@/static/logo.png" class="w-140 h-140 shrink0 br-8" /> --> |
| | | <video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" /> |
| | | <!-- <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8"> |
| | | <view class="absolute" style="top: 50%;left: 50%;transform: translate(-50%,-50%);"> |
| | | <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19 mr-35" |
| | | mode="" /> |
| | | <image src="@/static/Appeal/trash.png" class="w-19 h-19" /> |
| | | <view class="imgOrVedio" v-for="(ite, ind) in video" :key="ind"> |
| | | <video v-if="ite != 'loading'" id="myVideo" class="videoImg shrink0" disabled :controls="false" |
| | | :show-center-play-btn="false" :src="ite"> |
| | | </video> |
| | | <view v-if="ite != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8 zIndex999"> |
| | | <view class="absolute flex a-center j-between" |
| | | style="top: 50%;left: 50%;transform: translate(-50%,-50%);"> |
| | | <image @tap="openVideo(ite)" src="@/static/detailImg/open.png" class="w-140 h-140" /> |
| | | </view> |
| | | </view> --> |
| | | <image @tap="delVideo(ite)" src="@/static/Appeal/trash.png" class="absolute w-19 h-19 zIndex999" |
| | | style="top: 8rpx;right: 8rpx;" /> |
| | | </view> |
| | | </view> |
| | | <image src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" /> |
| | | <view v-if="video.includes('loading')" class="w-140 h-140 flex a-center j-center mr-15 border2 br-8"> |
| | | <u-loading-icon></u-loading-icon> |
| | | </view> |
| | | <image @tap="uploadImg(2)" src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" /> |
| | | </view> |
| | | </view> |
| | | <view class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">确认添加</view> |
| | | <view @click.stop="submit" 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 { |
| | | saveProcess, |
| | | } from './service' |
| | | import config from '@/config/index.js' |
| | | export default { |
| | | data() { |
| | | return { |
| | | id: '', |
| | | describe: '', |
| | | localImageUrls: [], |
| | | imgUrls: [], |
| | | video: [], |
| | | againCklicFlag: true, |
| | | } |
| | | }, |
| | | onLoad(params) { |
| | | this.id = params.id |
| | | }, |
| | | methods: { |
| | | viewImage(item) { |
| | | uni.previewImage({ |
| | | urls: [item] |
| | | import { |
| | | saveProcess, |
| | | getComplaintDetail |
| | | } from './service' |
| | | import config from '@/config/index.js' |
| | | export default { |
| | | data() { |
| | | return { |
| | | complaintId: '', //诉求id |
| | | info: {}, //工单详情 |
| | | describe: '', //办理进度描述 |
| | | localImageUrls: [], //本地回显的图片 |
| | | imgUrls: [], //传给后端的url |
| | | video: [], |
| | | againCklicFlag: true, |
| | | rulsFlag: false, |
| | | } |
| | | }, |
| | | onLoad(params) { |
| | | this.complaintId = params.id |
| | | getComplaintDetail({ |
| | | id: params.id |
| | | }).then(res => { |
| | | this.info = res.data |
| | | }) |
| | | }, |
| | | methods: { |
| | | submit() { |
| | | if (!this.describe) { |
| | | this.rulsFlag = true |
| | | return uni.showToast({ |
| | | icon: 'none', |
| | | title: '请输入办理进度描述' |
| | | }) |
| | | }, |
| | | uploadImg() { |
| | | if (!this.againCklicFlag) return |
| | | this.againCklicFlag = false |
| | | } |
| | | if (this.imgUrls.length == 0) { |
| | | return uni.showToast({ |
| | | icon: 'none', |
| | | title: '请上传图片' |
| | | }) |
| | | } |
| | | if (this.video.length == 0) { |
| | | return uni.showToast({ |
| | | icon: 'none', |
| | | title: '请上传视频' |
| | | }) |
| | | } |
| | | let obj = { |
| | | complaintId: this.complaintId, |
| | | describe: this.describe, |
| | | imgUrl: this.imgUrls.join(','), |
| | | video: this.video.join(',') |
| | | } |
| | | saveProcess(obj).then(res => { |
| | | if (res.code == 200) { |
| | | uni.showToast({ |
| | | title: '提交成功', |
| | | icon: 'success', |
| | | mask: true |
| | | }) |
| | | setTimeout(() => { |
| | | uni.navigateBack() |
| | | }, 1500) |
| | | } else { |
| | | uni.showToast({ |
| | | title: res.msg, |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | delImg(item) { |
| | | this.localImageUrls = this.localImageUrls.filter(i => i != item) |
| | | this.imgUrls = this.imgUrls.filter(i => i != item) |
| | | }, |
| | | delVideo(item) { |
| | | this.video = this.video.filter(i => i != item) |
| | | }, |
| | | viewImage(item) { |
| | | uni.previewImage({ |
| | | urls: [item] |
| | | }) |
| | | }, |
| | | uploadImg(type) { |
| | | if (!this.againCklicFlag) return |
| | | this.againCklicFlag = false |
| | | if (type == 1) { |
| | | uni.chooseImage({ |
| | | count: 1, |
| | | sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有 |
| | | sourceType: ['camera'], //x相机拍照 |
| | | success: (chooseImageRes) => { |
| | | this.imgUrls.push('loading') |
| | | this.againCklicFlag = true |
| | |
| | | }, |
| | | success: (res) => { |
| | | if (JSON.parse(res.data).code == 200) { |
| | | let imgUrl = JSON.parse(res.data) |
| | | this.imgUrls = this.imgUrls.filter(item => item != |
| | | 'loading') |
| | | this.$nextTick(() => { |
| | | this.imgUrls.push(imgUrl) |
| | | this.imgUrls.push(JSON.parse(res.data) |
| | | .data) |
| | | this.localImageUrls.push(imgPathList[0]) |
| | | }) |
| | | } else { |
| | |
| | | } |
| | | }, |
| | | }) |
| | | } else { |
| | | uni.chooseVideo({ |
| | | camera: 'back', |
| | | success: (res) => { |
| | | this.video.push('loading') |
| | | this.againCklicFlag = true |
| | | const tempFilePath = res.tempFilePath; |
| | | uni.uploadFile({ |
| | | url: config.imageUrl, |
| | | filePath: tempFilePath, |
| | | timeout: 1000 * 45, |
| | | name: 'file', |
| | | header: { |
| | | Authorization: config.uploadToken |
| | | }, |
| | | success: (res) => { |
| | | if (JSON.parse(res.data).code == 200) { |
| | | this.video = this.video.filter(item => item != |
| | | 'loading') |
| | | this.$nextTick(() => { |
| | | this.video.push(JSON.parse(res.data).data) |
| | | }) |
| | | } else { |
| | | this.againCklicFlag = true |
| | | this.video = this.video.filter( |
| | | item => item != 'loading') |
| | | uni.showToast({ |
| | | title: '上传失败,请重新上传', |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | }, |
| | | fail: (err) => { |
| | | this.againCklicFlag = true |
| | | this.video = this.video.filter( |
| | | item => item != 'loading') |
| | | uni.showToast({ |
| | | title: '上传失败,请重新上传', |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | }, |
| | | // 去大屏播放视频 |
| | | 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); |
| | | .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; |
| | | } |
| | | |
| | | .color99 { |
| | | color: #FB9A0E; |
| | | } |
| | | |
| | | .bgcolor-border { |
| | | background: rgba(255, 253, 241, 1) !important; |
| | | border: 2rpx solid #FFE58F; |
| | | } |
| | | |
| | | .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); |
| | | } |
| | | |
| | | .imgOrVedio { |
| | | margin-right: 17rpx; |
| | | position: relative; |
| | | |
| | | .img { |
| | | width: 140rpx; |
| | | height: 140rpx; |
| | | border-radius: 8rpx; |
| | | margin-top: 19rpx; |
| | | } |
| | | |
| | | .color1 { |
| | | color: #FF4948; |
| | | } |
| | | .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; |
| | | |
| | | .color2 { |
| | | color: rgba(0, 0, 0, .8); |
| | | .video { |
| | | z-index: 999; |
| | | width: 140rpx; |
| | | height: 140rpx; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .color3 { |
| | | color: #FAAD14; |
| | | } |
| | | .videoImg { |
| | | width: 140.38rpx; |
| | | height: 140.38rpx; |
| | | border-radius: 7.69rpx; |
| | | position: relative; |
| | | } |
| | | |
| | | .color4 { |
| | | color: #FFFFFF; |
| | | } |
| | | #myVideo { |
| | | z-index: 1; |
| | | } |
| | | |
| | | .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); |
| | | } |
| | | .zIndex999 { |
| | | z-index: 999; |
| | | } |
| | | </style> |
| | |
| | | // 办理进度录入 |
| | | export const saveProcess = (params) => { |
| | | return request.post(`/api/huacheng-sangeshenbian/applet/complaint/save-process`, params, ) |
| | | } |
| | | |
| | | // 工单详情 |
| | | export const getComplaintDetail = (params) => { |
| | | return request.get('/api/huacheng-sangeshenbian/applet/complaint/detail', params) |
| | | } |
| | |
| | | |
| | | <view class="input-card"> |
| | | <view class="title mb-27"> |
| | | 上报说明 |
| | | 下派说明 |
| | | </view> |
| | | <u--textarea style="background-color:rgba(248, 248, 248, 1);border: unset;padding:25rpx 30.77rpx;" |
| | | height="365.38rpx" v-model="content" placeholder="请输入内容"></u--textarea> |
| | |
| | | <view class="popup-content"> |
| | | <view class="title-pop">请选择下派单位</view> |
| | | <view class="pop-label">社区:</view> |
| | | <uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select> |
| | | <uni-data-select :disabled="false" v-model="value" :localdata="range" |
| | | @change="change"></uni-data-select> |
| | | |
| | | <view class="botton-btn"> |
| | | <view class="cancle" @tap="close">取消</view> |
| | |
| | | }; |
| | | }, |
| | | onLoad(option) { |
| | | option.id = 1 |
| | | if (option.id) { |
| | | this.id = option.id |
| | | getDetail({ |
| | |
| | | this.range = res.data.map(item => { |
| | | item.text = item.name |
| | | item.value = item.id |
| | | item.disable = false |
| | | return item |
| | | }) |
| | | } |
| | | }) |
| | |
| | | 提交后会由上级部门进行审核,请留意审核结果 |
| | | </view> |
| | | |
| | | <view class="btn">提交至上级部门</view> |
| | | <view class="btn" @tap="problemReports">提交至上级部门</view> |
| | | |
| | | </view> |
| | | </template> |
| | |
| | | }; |
| | | }, |
| | | onLoad(option) { |
| | | option.id = 1 |
| | | if (option.id) { |
| | | this.id = option.id |
| | | getDetail({ |
| | |
| | | icon: 'none', |
| | | title: '上报成功' |
| | | }) |
| | | uni.navigateBack() |
| | | |
| | | setTimeout(() => { |
| | | uni.navigateBack() |
| | | }, 1500) |
| | | } |
| | | }) |
| | | }, |
| | |
| | | export const getDetail = (params) => { |
| | | return request.get(`/api/huacheng-sangeshenbian/applet/complaint/detail`, params) |
| | | } |
| | | export const problemReport = (params) => { |
| | | return request.get(`/api/huacheng-sangeshenbian/applet/complaint/report`, params) |
| | | export const problemReport = (data) => { |
| | | return request.post(`/api/huacheng-sangeshenbian/applet/complaint/report`, data) |
| | | } |
| | |
| | | <template> |
| | | <view class="px-31 pt-38"> |
| | | <view class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2"> |
| | | <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>诉求号:7843523454</view> |
| | | <view class="color1">正在办理</view> |
| | | <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">江苏省常州市溧阳市牛顿大道172号</view> |
| | | <view class="fs-27 lh-38 color2">{{ info.detailedAddress }}</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">教育</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">沙振</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">14225874426</view> |
| | | <view class="fs-27 lh-38 mt-10">{{ info.contactNumber }}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="progress"> |
| | | <view v-if="info.complaintProgresses.length != 0" class="progress"> |
| | | <view class="proCard"> |
| | | <view class="proItem" v-for="(item,index) in 3" :key="index"> |
| | | <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 class="proLine"> |
| | | </view> |
| | | </view> |
| | | <view> |
| | | <view class="flex1"> |
| | | <view class="flex a-center j-between mb-10"> |
| | | <view class="name">李雷</view> |
| | | <view class="time">2024年9月29日11:09:09</view> |
| | | <view class="name">{{ item.createByName }}</view> |
| | | <view class="time">{{ item.createTime }}</view> |
| | | </view> |
| | | <view class="context">处理进度说明处理进度说明处理进度说明处理进 |
| | | 度说明处理进度说明处理进度说明处理进度说明处理进度说明</view> |
| | | <view class="context">{{ item.describe }}</view> |
| | | <view class="proImg"> |
| | | <view class="imgOrVedio" v-for="(item,index) in 4" :key="index"> |
| | | <image |
| | | src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" |
| | | class="img shrink0" mode="aspectFill"> |
| | | </image> |
| | | <view class="openVideo" v-if="item==4"> |
| | | <view class="imgOrVedio" v-for="(item, index) in item.imgUrl.split(',')" :key="index"> |
| | | <image :src="item" 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(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" /> |
| | | </view> |
| | | </view> |
| | | <view class="imgOrVedio" v-for="(item, 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="item" /> |
| | | <view class="videoOpen" @click.stop="openVideo(item)"> |
| | | <image src="../../static/detailImg/open.png" class="video shrink0" |
| | | mode="aspectFill"> |
| | | </image> |
| | | </view> |
| | | |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view @tap="toAdd" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">添加办理进度</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 { |
| | | getList, |
| | | getComplaintDetail |
| | | } from './service' |
| | | export default { |
| | | data() { |
| | | return { |
| | | id: '' |
| | | } |
| | | }, |
| | | onLoad(params) { |
| | | this.id = params.id |
| | | getList({ |
| | | "pageNum": 1, |
| | | "pageSize": 10 |
| | | }).then(res => { |
| | | |
| | | import { |
| | | getComplaintDetail |
| | | } from './service' |
| | | export default { |
| | | data() { |
| | | return { |
| | | id: '', |
| | | info: {}, |
| | | type: true, |
| | | } |
| | | }, |
| | | onLoad(params) { |
| | | this.id = params.id |
| | | if (params.type) { |
| | | this.type = false |
| | | uni.setNavigationBarTitle({ |
| | | title: '办理进度' |
| | | }) |
| | | } |
| | | getComplaintDetail({ |
| | | id: params.id |
| | | }).then(res => { |
| | | this.info = res.data |
| | | }) |
| | | }, |
| | | methods: { |
| | | toAdd() { |
| | | uni.navigateTo({ |
| | | url: `/pages/add-progress/index?id=${this.id}` |
| | | }) |
| | | }, |
| | | methods: { |
| | | toAdd() { |
| | | uni.navigateTo({ |
| | | url: `/pages/add-progress/index` |
| | | }) |
| | | } |
| | | } |
| | | 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); |
| | | .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; |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | |
| | | .color1 { |
| | | color: #FF4948; |
| | | } |
| | | .proCard { |
| | | .proItem { |
| | | display: flex; |
| | | padding-bottom: 38rpx; |
| | | |
| | | .color2 { |
| | | color: rgba(0, 0, 0, .8); |
| | | } |
| | | |
| | | .color3 { |
| | | color: #FAAD14; |
| | | } |
| | | |
| | | .color4 { |
| | | color: #FFFFFF; |
| | | } |
| | | |
| | | .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 { |
| | | .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; |
| | | padding-bottom: 38rpx; |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | .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); |
| | | .box { |
| | | width: 7rpx; |
| | | height: 7rpx; |
| | | background-color: #fff; |
| | | border-radius: 50%; |
| | | margin: 10rpx 0; |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | |
| | | .box { |
| | | width: 7rpx; |
| | | height: 7rpx; |
| | | background-color: #fff; |
| | | border-radius: 50%; |
| | | .video { |
| | | z-index: 999; |
| | | width: 140rpx; |
| | | height: 140rpx; |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | |
| | | .openVideo { |
| | | position: absolute; |
| | | top: 19rpx; |
| | | left: 0; |
| | | width: 140rpx; |
| | | height: 140rpx; |
| | | border-radius: 8rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | .video { |
| | | width: 140rpx; |
| | | height: 140rpx; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .proItem:last-child { |
| | | .proLine { |
| | | display: none; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .proItem:last-child { |
| | | .proLine { |
| | | display: none; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .videoImg { |
| | | width: 140.38rpx; |
| | | height: 140.38rpx; |
| | | border-radius: 7.69rpx; |
| | | position: relative; |
| | | } |
| | | |
| | | #myVideo { |
| | | z-index: 1; |
| | | } |
| | | </style> |
| | |
| | | import request from '@/utils/request.js' |
| | | |
| | | export const getList = (params) => { |
| | | return request.post('/api/huacheng-sangeshenbian/applet/home/todo-list', params) |
| | | } |
| | | |
| | | // 工单详情 |
| | | export const getComplaintDetail = (params) => { |
| | | return request.get('/api/huacheng-sangeshenbian/applet/complaint/detail', params) |
| | | } |
| | |
| | | <template> |
| | | <view class="px-31 pt-38"> |
| | | <view class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2 relative transition-h" |
| | | <view v-if="Object.keys(info).length != 0" class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2 relative transition-h" |
| | | :class="unfoldFlag ? 'max-9999' : 'max-300'"> |
| | | <view> |
| | | <view class="flex a-center j-between fs-23 lh-33 font-bold"> |
| | | <view>诉求号:7843523454</view> |
| | | <view class="color1">正在办理</view> |
| | | <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">江苏省常州市溧阳市牛顿大道172号</view> |
| | | <view class="fs-27 lh-38 color2">{{ info.detailedAddress }}</view> |
| | | <image src="@/static/detailImg/dwei.png" class="w-31 h-31 shrink0" /> |
| | | </view> |
| | | <view v-if="!unfoldFlag" 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">教育</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">沙振</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">14225874426</view> |
| | | <view class="fs-27 lh-38 mt-10">{{ info.contactNumber }}</view> |
| | | </view> |
| | | </view> |
| | | <view v-else class="mt-33"> |
| | |
| | | <view>详细地址</view> |
| | | </view> |
| | | <view class="font-bold txt-aligin-r" style="max-width: 404rpx;"> |
| | | <view>2025-09-09 11:09:0</view> |
| | | <view>教育</view> |
| | | <view>张三</view> |
| | | <view>15708179461</view> |
| | | <view class="lh-35">上报说明上报说明上报说明上报说明上报说明上报说明上报说明上报说</view> |
| | | <view>{{ info.createTime }}</view> |
| | | <view>{{ info.problemType }}</view> |
| | | <view>{{ info.name }}</view> |
| | | <view>{{ info.contactNumber }}</view> |
| | | <view class="lh-35">{{ info.detailedAddress }}</view> |
| | | </view> |
| | | </view> |
| | | <view class="line-box my-35"></view> |
| | | <view class="fs-27 lh-38 font-bold mx-31">问题描述</view> |
| | | <view class="br-8 bgcolor4 py-29 mt-27 fs-27"> |
| | | <view class="ml-31">问题标题问题标题问题标题问题标题</view> |
| | | <view class="ml-31">{{ info.descriptionTitle }}</view> |
| | | <view class="line-box my-27"></view> |
| | | <view class="mx-31 color2"> |
| | | 问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容 |
| | | {{ info.descriptionContent }} |
| | | </view> |
| | | </view> |
| | | <view class="fs-27 mt-35 lh-38 font-bold">描述图片</view> |
| | | <view class="flex wrap mt-27"> |
| | | <view @tap="viewImage(item)" class="relative mr-15" v-for="item in 4" :key="item"> |
| | | <image src="/static/logo.png" class="w-140 h-140 shrink0 br-8" /> |
| | | <view @tap="viewImage(item)" class="relative mr-15" v-for="item in info.images.split(',')" |
| | | :key="item"> |
| | | <image :src="item" class="w-140 h-140 shrink0 br-8" /> |
| | | <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8 flex a-center j-center"> |
| | | <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" /> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="fs-27 mt-37 lh-38 font-bold">描述视频</view> |
| | | <view class="flex wrap mt-27"> |
| | | <view @tap="viewImage(item)" class="relative mr-15" v-for="item in 4" :key="item"> |
| | | <image src="@/static/logo.png" class="w-140 h-140 shrink0 br-8" /> |
| | | <view @tap="openVideo(item)" class="relative mr-15" v-for="item in info.videos.split(',')" |
| | | :key="item"> |
| | | <video id="myVideo" class="w-140 h-140 mt-19 shrink0" disabled :controls="false" |
| | | :show-center-play-btn="false" :src="item" /> |
| | | <view class="videoOpen" @click.stop="openVideo(item)"> |
| | | <image src="../../static/detailImg/open.png" class="video shrink0" mode="aspectFill"> |
| | | </image> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | </view> |
| | | <view class="br-19 mt-76 bs-1 pt-35 pb-33"> |
| | | <view class="fs-27 lh-38 font-bold ml-31">处理状态</view> |
| | | <view class="br-15 py-15 pl-31 mx-31 pr-27 mt-27 flex j-between a-center border2"> |
| | | <view class="color6">请选择当前处理状态</view> |
| | | <view @tap="showList = true" class="br-15 py-15 pl-31 mx-31 pr-27 mt-27 flex j-between a-center border2" :class="(rulsFlag && !status) && 'bgcolor-border'"> |
| | | <view :class="!status && 'color6'">{{ status ? status : '请选择当前处理状态' }}</view> |
| | | <image src="/static/location/back.png" class="h-23 w-15" style="transform: rotate(-90deg);" /> |
| | | </view> |
| | | <view v-if="rulsFlag && !status" class="flex a-center mt-19 ml-31"> |
| | | <image src="@/static/noNull.png" class="w-35 h-35 mr-13 shrink0" /> |
| | | <view class="fs-23 color99">处理状态不能为空</view> |
| | | </view> |
| | | <view class="fs-27 lh-38 font-bold ml-31 mt-38">办结结果描述</view> |
| | | <view class="mt-23 br-38 pt-31 pb-16 pl-31 pr-29 fs-23 color5 bgcolor8"> |
| | |
| | | </view> |
| | | </view> |
| | | <view class="mx-31"> |
| | | <textarea class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" style="height: 365rpx;" |
| | | placeholder="请按上述标准描述处理结果" /> |
| | | <textarea v-model="completionDescription" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" |
| | | :class="(rulsFlag && !completionDescription) && 'bgcolor-border'" |
| | | style="height: 365rpx;width: calc(100% - 31rpx);" placeholder="请按上述标准描述处理结果" /> |
| | | <view v-if="rulsFlag && !completionDescription" class="flex a-center mt-19"> |
| | | <image src="@/static/noNull.png" class="w-35 h-35 mr-13 shrink0" /> |
| | | <view class="fs-23 color99">办结结果描述不能为空</view> |
| | | </view> |
| | | <view class="fs-27 mt-38 lh-38 font-bold">图片</view> |
| | | <view class="flex wrap mt-27"> |
| | | <view class="relative mr-15" v-for="item in 4" :key="item"> |
| | | <image src="/static/logo.png" class="w-140 h-140 shrink0 br-8" /> |
| | | <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8"> |
| | | <view class="absolute" style="top: 50%;left: 50%;transform: translate(-50%,-50%);"> |
| | | <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19 mr-35" |
| | | mode="" /> |
| | | <image src="@/static/Appeal/trash.png" class="w-19 h-19" /> |
| | | <view class="relative mr-15" v-for="(item, index) in localImageUrls" :key="index"> |
| | | <image v-if="item != 'loading'" :src="item" class="w-140 h-140 shrink0 br-8" /> |
| | | <view v-if="item != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8"> |
| | | <view class="absolute flex a-center j-between px-34" |
| | | style="top: 50%;left: 50%;transform: translate(-50%,-50%);width: calc(100% - 68rpx);"> |
| | | <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" /> |
| | | <image @tap="delImg(item)" src="@/static/Appeal/trash.png" class="w-19 h-19" /> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <image src="/static/Appeal/add.png" class="w-140 h-140 shrink0" /> |
| | | <view v-if="completionImages.includes('loading')" |
| | | class="w-140 h-140 flex a-center j-center mr-15 border2 br-8"> |
| | | <u-loading-icon></u-loading-icon> |
| | | </view> |
| | | <image @tap="uploadImg(1)" src="/static/Appeal/add.png" class="w-140 h-140 shrink0" /> |
| | | </view> |
| | | <view class="fs-27 mt-37 lh-38 font-bold">视频</view> |
| | | <view class="flex wrap mt-27"> |
| | | <view class="relative mr-15" v-for="item in 4" :key="item"> |
| | | <image src="@/static/logo.png" class="w-140 h-140 shrink0 br-8" /> |
| | | <view class="absolute w-140 h-140 bgcolor5 top0 left0 br-8"> |
| | | <view class="absolute" style="top: 50%;left: 50%;transform: translate(-50%,-50%);"> |
| | | <image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19 mr-35" |
| | | mode="" /> |
| | | <image src="@/static/Appeal/trash.png" class="w-19 h-19" /> |
| | | <view class="imgOrVedio" v-for="(ite, ind) in completionVideos" :key="ind"> |
| | | <video v-if="ite != 'loading'" id="myVideo" class="videoImg shrink0" disabled :controls="false" |
| | | :show-center-play-btn="false" :src="ite"> |
| | | </video> |
| | | <view v-if="ite != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8 zIndex999"> |
| | | <view class="absolute flex a-center j-between" |
| | | style="top: 50%;left: 50%;transform: translate(-50%,-50%);"> |
| | | <image @tap="openVideo(ite)" src="@/static/detailImg/open.png" class="w-140 h-140" /> |
| | | </view> |
| | | <image @tap="delVideo(ite)" src="@/static/Appeal/trash.png" |
| | | class="absolute w-19 h-19 zIndex999" style="top: 8rpx;right: 8rpx;" /> |
| | | </view> |
| | | </view> |
| | | <image src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" /> |
| | | <view v-if="completionVideos.includes('loading')" |
| | | class="w-140 h-140 flex a-center j-center mr-15 border2 br-8"> |
| | | <u-loading-icon></u-loading-icon> |
| | | </view> |
| | | <image @tap="uploadImg(2)" src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" /> |
| | | </view> |
| | | <view class="fs-27 lh-38 mt-40 font-bold">其他说明</view> |
| | | <textarea class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" style="height: 365rpx;" |
| | | placeholder="请输入补充说明内容" /> |
| | | <textarea v-model="completionOtherDescription" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4" |
| | | style="height: 365rpx;width: calc(100% - 31rpx);" placeholder="请输入补充说明内容" /> |
| | | </view> |
| | | </view> |
| | | <view class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">提交办结结果</view> |
| | | <view @click.stop="submit" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">提交办结结果</view> |
| | | <view class="safe-box"></view> |
| | | <u-picker :show="showList" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | unfoldFlag: false, //是否展开 |
| | | } |
| | | }, |
| | | methods: { |
| | | unfold() { |
| | | this.unfoldFlag = !this.unfoldFlag |
| | | }, |
| | | viewImage(item) { |
| | | uni.previewImage({ |
| | | urls: [require('@/static/logo.png')] |
| | | import { saveResult, getComplaintDetail } from './service' |
| | | import config from '@/config/index.js' |
| | | export default { |
| | | data() { |
| | | return { |
| | | showList: false, |
| | | columns: [['已办结', '群众撤销']], |
| | | unfoldFlag: false, //是否展开 |
| | | id: '',//诉求id |
| | | info: {},//工单详情 |
| | | completionDescription: '',//办结结果描述 |
| | | localImageUrls: [], //本地回显的图片 |
| | | completionImages: [],//办结结果图片 |
| | | completionOtherDescription: '',//其他说明 |
| | | completionVideos: [],//办结结果视频 |
| | | status: '',//处理状态 |
| | | againCklicFlag: true, |
| | | rulsFlag: false, |
| | | } |
| | | }, |
| | | onLoad(params) { |
| | | this.id = params.id |
| | | getComplaintDetail({ id: params.id }).then(res => { |
| | | this.info = res.data |
| | | }) |
| | | }, |
| | | methods: { |
| | | submit() { |
| | | if (!this.status) { |
| | | this.rulsFlag = true |
| | | return uni.showToast({ |
| | | title: '请选择当前处理状态', |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | } |
| | | if (!this.completionDescription) { |
| | | this.rulsFlag = true |
| | | return uni.showToast({ |
| | | title: '请填写办结结果描述', |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | if (this.completionImages.length == 0) { |
| | | return uni.showToast({ |
| | | title: '请上传办结结果图片', |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | if (this.completionVideos.length == 0) { |
| | | return uni.showToast({ |
| | | title: '请上传办结结果视频', |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | saveResult({ |
| | | id: this.id, |
| | | status: this.status == '已办结' ? 3 : 4, |
| | | completionDescription: this.completionDescription, |
| | | completionImages: this.completionImages.join(','), |
| | | completionOtherDescription: this.completionOtherDescription, |
| | | completionVideos: this.completionVideos.join(',') |
| | | }).then(res => { |
| | | if (res.code == 200) { |
| | | uni.showToast({ |
| | | title: '提交成功', |
| | | icon: 'success', |
| | | mask: true |
| | | }) |
| | | setTimeout(() => { |
| | | uni.navigateBack() |
| | | }, 1500) |
| | | } else { |
| | | uni.showToast({ |
| | | title: res.msg, |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | confirm({ value }) { |
| | | this.status = value[0] |
| | | this.showList = false |
| | | }, |
| | | cancel() { |
| | | this.showList = false |
| | | }, |
| | | unfold() { |
| | | this.unfoldFlag = !this.unfoldFlag |
| | | }, |
| | | delImg(item) { |
| | | this.localImageUrls = this.localImageUrls.filter(i => i != item) |
| | | this.completionImages = this.completionImages.filter(i => i != item) |
| | | }, |
| | | delVideo(item) { |
| | | this.completionVideos = this.completionVideos.filter(i => i != item) |
| | | }, |
| | | viewImage(item) { |
| | | uni.previewImage({ |
| | | urls: [item] |
| | | }) |
| | | }, |
| | | uploadImg(type) { |
| | | if (!this.againCklicFlag) return |
| | | this.againCklicFlag = false |
| | | if (type == 1) { |
| | | uni.chooseImage({ |
| | | count: 1, |
| | | success: (chooseImageRes) => { |
| | | this.completionImages.push('loading') |
| | | this.againCklicFlag = true |
| | | let imgPathList = chooseImageRes.tempFilePaths; |
| | | if (imgPathList.length > 0) { |
| | | uni.uploadFile({ |
| | | url: config.imageUrl, |
| | | filePath: imgPathList[0], |
| | | timeout: 1000 * 45, |
| | | name: 'file', |
| | | header: { |
| | | Authorization: config.uploadToken |
| | | }, |
| | | success: (res) => { |
| | | if (JSON.parse(res.data).code == 200) { |
| | | this.completionImages = this.completionImages.filter(item => item != |
| | | 'loading') |
| | | this.$nextTick(() => { |
| | | this.completionImages.push(JSON.parse(res.data) |
| | | .data) |
| | | this.localImageUrls.push(imgPathList[0]) |
| | | }) |
| | | } else { |
| | | this.againCklicFlag = true |
| | | this.completionImages = this.completionImages.filter( |
| | | item => item != 'loading') |
| | | uni.showToast({ |
| | | title: '上传失败,请重新上传', |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | }, |
| | | fail: (err) => { |
| | | this.againCklicFlag = true |
| | | this.completionImages = this.completionImages.filter( |
| | | item => item != 'loading') |
| | | uni.showToast({ |
| | | title: '上传失败,请重新上传', |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | }) |
| | | } else { |
| | | uni.chooseVideo({ |
| | | camera: 'back', |
| | | success: (res) => { |
| | | this.completionVideos.push('loading') |
| | | this.againCklicFlag = true |
| | | const tempFilePath = res.tempFilePath; |
| | | uni.uploadFile({ |
| | | url: config.imageUrl, |
| | | filePath: tempFilePath, |
| | | timeout: 1000 * 45, |
| | | name: 'file', |
| | | header: { |
| | | Authorization: config.uploadToken |
| | | }, |
| | | success: (res) => { |
| | | if (JSON.parse(res.data).code == 200) { |
| | | this.completionVideos = this.completionVideos.filter(item => item != |
| | | 'loading') |
| | | this.$nextTick(() => { |
| | | this.completionVideos.push(JSON.parse(res.data).data) |
| | | }) |
| | | } else { |
| | | this.againCklicFlag = true |
| | | this.completionVideos = this.completionVideos.filter( |
| | | item => item != 'loading') |
| | | uni.showToast({ |
| | | title: '上传失败,请重新上传', |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | }, |
| | | fail: (err) => { |
| | | this.againCklicFlag = true |
| | | this.completionVideos = this.completionVideos.filter( |
| | | item => item != 'loading') |
| | | uni.showToast({ |
| | | title: '上传失败,请重新上传', |
| | | icon: 'none', |
| | | mask: true |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | // 去大屏播放视频 |
| | | 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); |
| | | .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; |
| | | } |
| | | |
| | | .color5 { |
| | | color: #FC8D55; |
| | | } |
| | | |
| | | .color6 { |
| | | color: rgba(0, 0, 0, 0.24); |
| | | } |
| | | |
| | | .color99 { |
| | | color: #FB9A0E; |
| | | } |
| | | |
| | | .bgcolor-border { |
| | | background: rgba(255, 253, 241, 1) !important; |
| | | border: 2rpx solid #FFE58F !important; |
| | | } |
| | | |
| | | .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) 91rpx); |
| | | } |
| | | |
| | | .bgcolor3 { |
| | | background: #FFFBE6; |
| | | } |
| | | |
| | | .bgcolor4 { |
| | | background: #F8F8F8; |
| | | } |
| | | |
| | | .bgcolor5 { |
| | | background: rgba(0, 0, 0, .23); |
| | | } |
| | | |
| | | .bgcolor6 { |
| | | background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%); |
| | | } |
| | | |
| | | .bgcolor7 { |
| | | background-color: rgba(252, 141, 85, 1); |
| | | } |
| | | |
| | | .bgcolor8 { |
| | | background: #FFFBE6; |
| | | } |
| | | |
| | | .border1 { |
| | | border: 2rpx solid #FFF1B8; |
| | | } |
| | | |
| | | .border2 { |
| | | border: 2rpx solid rgba(0, 0, 0, 0.15); |
| | | } |
| | | |
| | | .safe-box { |
| | | height: env(safe-area-inset-bottom); |
| | | } |
| | | |
| | | .line-box { |
| | | box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1); |
| | | height: 2rpx; |
| | | background: rgba(0, 10, 26, 0.07); |
| | | } |
| | | |
| | | .transition-h { |
| | | transition: max-height 0.5s ease-out; |
| | | } |
| | | |
| | | .max-300 { |
| | | max-height: 300rpx; |
| | | } |
| | | |
| | | .max-9999 { |
| | | max-height: 9999rpx; |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | |
| | | .imgOrVedio { |
| | | margin-right: 17rpx; |
| | | position: relative; |
| | | |
| | | .img { |
| | | width: 140rpx; |
| | | height: 140rpx; |
| | | border-radius: 8rpx; |
| | | margin-top: 19rpx; |
| | | } |
| | | |
| | | .color1 { |
| | | color: #FF4948; |
| | | } |
| | | .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; |
| | | |
| | | .color2 { |
| | | color: rgba(0, 0, 0, .8); |
| | | .video { |
| | | z-index: 999; |
| | | width: 140rpx; |
| | | height: 140rpx; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .color3 { |
| | | color: #FAAD14; |
| | | } |
| | | .videoImg { |
| | | width: 140.38rpx; |
| | | height: 140.38rpx; |
| | | border-radius: 7.69rpx; |
| | | position: relative; |
| | | } |
| | | |
| | | .color4 { |
| | | color: #FFFFFF; |
| | | } |
| | | #myVideo { |
| | | z-index: 1; |
| | | } |
| | | |
| | | .color5 { |
| | | color: #FC8D55; |
| | | } |
| | | .zIndex999 { |
| | | z-index: 999; |
| | | } |
| | | |
| | | .color6 { |
| | | color: rgba(0, 0, 0, 0.24); |
| | | } |
| | | /deep/.u-popup__content { |
| | | border-radius: 16rpx 16rpx 0rpx 0rpx; |
| | | } |
| | | |
| | | .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%); |
| | | } |
| | | /deep/ .u-toolbar { |
| | | border-bottom: 2rpx solid RGBA(243, 243, 243, 1); |
| | | } |
| | | |
| | | .bgcolor2 { |
| | | background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 91rpx); |
| | | } |
| | | /deep/ .u-toolbar__wrapper__cancel { |
| | | font-weight: 400; |
| | | font-size: 30rpx; |
| | | color: #FF4948 !important; |
| | | } |
| | | |
| | | .bgcolor3 { |
| | | background: #FFFBE6; |
| | | } |
| | | |
| | | .bgcolor4 { |
| | | background: #F8F8F8; |
| | | } |
| | | |
| | | .bgcolor5 { |
| | | background: rgba(0, 0, 0, .23); |
| | | } |
| | | |
| | | .bgcolor6 { |
| | | background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%); |
| | | } |
| | | |
| | | .bgcolor7 { |
| | | background-color: rgba(252, 141, 85, 1); |
| | | } |
| | | |
| | | .bgcolor8 { |
| | | background: #FFFBE6; |
| | | } |
| | | |
| | | .border1 { |
| | | border: 2rpx solid #FFF1B8; |
| | | } |
| | | |
| | | .border2 { |
| | | border: 2rpx solid rgba(0, 0, 0, 0.15); |
| | | } |
| | | |
| | | .safe-box { |
| | | height: env(safe-area-inset-bottom); |
| | | } |
| | | |
| | | .line-box { |
| | | box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1); |
| | | height: 2rpx; |
| | | background: rgba(0, 10, 26, 0.07); |
| | | } |
| | | |
| | | .transition-h { |
| | | transition: max-height 0.5s ease-out; |
| | | } |
| | | |
| | | .max-300 { |
| | | max-height: 300rpx; |
| | | } |
| | | |
| | | .max-9999 { |
| | | max-height: 9999rpx; |
| | | } |
| | | /deep/ .u-toolbar__wrapper__confirm { |
| | | font-weight: 400; |
| | | font-size: 30rpx; |
| | | color: #FF4948 !important; |
| | | } |
| | | </style> |
New file |
| | |
| | | import request from '@/utils/request.js' |
| | | |
| | | |
| | | // 办理进度录入 |
| | | export const saveResult = (params) => { |
| | | return request.post(`/api/huacheng-sangeshenbian/applet/complaint/save-result`, params, ) |
| | | } |
| | | |
| | | // 工单详情 |
| | | export const getComplaintDetail = (params) => { |
| | | return request.get('/api/huacheng-sangeshenbian/applet/complaint/detail', params) |
| | | } |