H5工单列表、工单详情、诉求监督

hejianhao

4 天以前 60bdd6e881fbefc8c375eb9e9d71009d6c63859d

 H5/pages/progress/progress.vue

@@ -1,33 +1,39 @@
<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>
            <image src="@/static/public/gps.png" class="w-31 h-31 shrink0" />
            <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">教育</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 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">14225874426</view>
            <view class="flex a-center">
               <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>
               <image @click.stop="callPhone(info.contactNumber)" src="../../static/tell.png"
                  class="w-58 h-58 shrink0 " />
            </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>
@@ -35,52 +41,115 @@
                  <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 | formatTime }}</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">
                           <image src="../../static/detailImg/open.png" class="video shrink0"
                              mode="aspectFill">
                           </image>
                     <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 @tap="toAdd" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">添加办理进度</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 fixed"
         style="width: calc(100% - 62rpx);bottom: calc(env(safe-area-inset-bottom) + 10rpx);">添加办理进度
      </view>
      <view class="btn-box"></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: ''
            id: '',
            info: {},
            type: true,
         }
      },
      filters: {
         formatTime(val) {
            if (!val) return ''
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
         }
      },
      onLoad(params) {
         this.id = params.id
      },
      methods: {
         toAdd() {
            uni.navigateTo({
               url: `/pages/add-progress/index`
         if (params.type) {
            this.type = false
            uni.setNavigationBarTitle({
               title: '办理进度'
            })
         }
         this.id = params.id
      },
      onShow(params) {
         getComplaintDetail({
            id: this.id
         }).then(res => {

            this.info = {
               ...res.data
            }
         })
      },
      methods: {
         callPhone(phoneNumber) {
            uni.makePhoneCall({
               phoneNumber
            });
         },
         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>
@@ -104,6 +173,10 @@

   .color4 {
      color: #FFFFFF;
   }

   .color9 {
      color: #999999;
   }

   .bgcolor1 {
@@ -224,22 +297,25 @@
                     border-radius: 8rpx;
                     margin-top: 19rpx;
                  }
               }

                  .openVideo {
                     position: absolute;
                     top: 19rpx;
                     left: 0;
               .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;
                     border-radius: 8rpx;
                     display: flex;
                     align-items: center;
                     justify-content: center;

                     .video {
                        width: 140rpx;
                        height: 140rpx;
                     }
                  }
               }
            }
@@ -252,4 +328,19 @@
         }
      }
   }
</style>

   .videoImg {
      width: 140.38rpx;
      height: 140.38rpx;
      border-radius: 7.69rpx;
      position: relative;
   }

   #myVideo {
      z-index: 1;
   }

   .btn-box {
      height: 120rpx;
   }
</style>