H5接口对接

hejianhao

3 天以前 554f8096e1f384f14b9424f5142d63f90c72a3eb

 H5/pages/work-detail/work-detail.vue

@@ -1,61 +1,105 @@
<template>
   <view class="content">
      <u-navbar title="诉求详情" :bgColor="scoreTopHeight>300?'#ffffff':'transparent'" autoBack>
      </u-navbar>
      <view class="topColor">
      </view>
      <view class="allContent">
         <view class="topStatus">
            <view class="status">上报待上级审核</view>
            <view class="status">
               {{ ['正在办理', '延期办理', '超时办理', '已办结 ', '群众撤销', '上报待审核', '上级驳回', '延期待审核', '已办结'][orderInfo.status] || '' }}
            </view>
            <view class="flex a-center j-between mb-17">
               <view class="tit">当前状态</view>
               <!-- 延期状态 -->
               <view v-if="false" class="flex a-center">
               <view v-if="orderInfo.status == 1 " class="flex a-center" @click.stop="toDelayDetail()">
                  <image src="../../static/detailImg/explain.png" class="plainIcon shrink0"></image>
                  <view class="explain">延期情况说明</view>
               </view>
               <!-- 超时状态 -->
               <view v-if="true" class="flex a-center">
               <view v-if="orderInfo.status == 2" class="flex a-center">
                  <image src="../../static/detailImg/notice.png" class="overTimeIcon shrink0"></image>
                  <view class="overTime">已超时</view>
                  <view class="day">12</view>
                  <view class="day">{{ orderInfo.createByName || 0 }}</view>
                  <view class="overTime">天</view>
               </view>

            </view>
         </view>
         <!-- 已完结诉求信息 -->
         <view class="mt-19 flex a-center j-between topMore">
         <!-- 已完结诉求信息   已办结-->
         <view class="mt-19 flex a-center j-between topMore" v-if="orderInfo.status == 3">
            <view class="name">诉求信息</view>
            <view class="flex a-center">
            <view class="flex a-center" @click.stop="toProgressDetail">
               <view class="more">办理进度</view>
               <image src="../../static/detailImg/right1.png" class="moreIcon shrink0"></image>
            </view>
         </view>

         <!-- 上报待上级审核--待审核状态显示 -->
         <view class="card1" v-if="status==3">
            <image src="../../static/detailImg/Ovaled.png" class="topIcon shrink0"></image>
            <view class="infoCard">
               <view class="flex j-between">
                  <view class="label">上报人</view>
                  <view class="value">张三</view>
         <!-- 上级驳回   -->
         <view class="mt-19 flex a-center j-between topMore" v-if="orderInfo.status == 6">
            <view class="name">上报情况</view>
         </view>

         <!-- 上报后的状态 -->
         <view class="card1" v-if="[6, 7, 5].includes(orderInfo.status)">
            <!-- 上报上级上级驳回-->
            <view class="flex j-between" v-if="orderInfo.status == 6">
               <view class="flex flex-column a-center  mr-46">
                  <image src="../../static/detailImg/Ovaled.png" class="topIcon shrink0"></image>
                  <view class="proLine">
                  </view>
               </view>
               <view class="flex j-between">
                  <view class="label">联系电话</view>
                  <view class="value">13987654321</view>
               <view class="infoCard mb-46">
                  <view class="flex j-between">
                     <view class="label">审核时间</view>
                     <view class="value">{{ orderInfo.auditTime | formatTime }}</view>
                  </view>
                  <view class="flex j-between">
                     <view class="label">审核人</view>
                     <view class="value">{{ orderInfo.auditorName || '' }}</view>
                  </view>
                  <view class="flex j-between">
                     <view class="label">联系电话</view>
                     <view class="flex a-center">
                        <view class="value">{{ orderInfo.auditorPhone || '' }}</view>
                        <image @click.stop="callPhone(orderInfo.contactNumber)" src="../../static/tell.png"
                           class="w-58 h-58 shrink0 " />
                     </view>
                  </view>
                  <view class="flex j-between">
                     <view class="label">驳回原因</view>
                     <view class="value">{{ orderInfo.rejectReason || '' }}</view>
                  </view>
               </view>
               <view class="flex j-between">
                  <view class="label">所属部门</view>
                  <view class="value">XXXXXXX部门</view>
            </view>
            <!-- 上报待上级审核--待审核状态显示 -->
            <view class="flex j-between">
               <view class="flex flex-column   mr-46">
                  <image src="../../static/detailImg/Ovaled.png" class="topIcon shrink0"></image>
               </view>
               <view class="flex j-between">
                  <view class="label">上报时间</view>
                  <view class="value">2025-09-09 11:09:09</view>
               </view>
               <view class="flex j-between">
                  <view class="label">上报说明</view>
                  <view class="value">上报说明上报说明上报说明上报上报说明上报说明上报说明上报上报说明上报说明上报说明上报</view>
               <view class="infoCard">
                  <view class="flex j-between">
                     <view class="label">上报人</view>
                     <view class="value">{{ orderInfo.reporter || '' }}</view>
                  </view>
                  <view class="flex j-between">
                     <view class="label">联系电话</view>
                     <view class="flex a-center">
                        <view class="value">{{ orderInfo.reporterPhone || '' }}</view>
                        <image @click.stop="callPhone(orderInfo.contactNumber)" src="../../static/tell.png"
                           class="w-58 h-58 shrink0 " />
                     </view>
                  </view>
                  <view class="flex j-between" v-if="isParty">
                     <view class="label">所属部门</view>
                     <view class="value">{{ orderInfo.departmentName || "" }}</view>
                  </view>
                  <view class="flex j-between">
                     <view class="label">上报时间</view>
                     <view class="value">{{ orderInfo.reportTime | formatTime }}</view>
                  </view>
                  <view class="flex j-between">
                     <view class="label">上报说明</view>
                     <view class="value">{{ orderInfo.comment || '' }}</view>
                  </view>
               </view>
            </view>
         </view>
@@ -63,172 +107,187 @@
         <!--  -->
         <view class="cardInfo">
            <view class="flex j-between a-center">
               <view class="title">诉求号：7843523454</view>
               <view class="flex a-center" v-if="true" @click.stop="applyOverTime">
               <view class="title">诉求号：{{ orderInfo.serialNumber || '' }}</view>
               <view class="flex a-center"
                  v-if="(orderInfo.status == 0||orderInfo.status == 6)&&orderInfo.listControlsButtonStatus == 0"
                  @click.stop="applyOverTime">
                  <view class="apply">延期申请</view>
                  <image src="../../static/detailImg/right.png" class="rightIcon shrink0"></image>
               </view>
            </view>
            <view class="addressCard">
               <view class="address">江苏省常州市溧阳市牛顿大道172号</view>
               <view class="address">{{ orderInfo.location || "" }}</view>
               <image src="../../static/detailImg/dwei.png" class="addressIcon shrink0" mode="aspectFill"></image>
            </view>
            <view class="flex j-between">
               <view class="label">创建时间</view>
               <view class="value">2025-09-09 11:09:09</view>
               <view class="value">{{ orderInfo.createTime | formatTime }}</view>
            </view>
            <view class="flex j-between">
               <view class="label">问题类型</view>
               <view class="value">教育</view>
               <view class="value">{{ orderInfo.problemType || '' }}</view>
            </view>
            <view class="flex j-between">
               <view class="label">群众</view>
               <view class="value">张三</view>
               <view class="label">群众姓名</view>
               <view class="value">{{ orderInfo.name || '' }}</view>
            </view>
            <view class="flex j-between">
               <view class="label"> 联系电话</view>
               <view class="value">13987654321</view>
               <view class="flex a-center">
                  <view class="value">{{ orderInfo.contactNumber || '' }}</view>
                  <image @click.stop="callPhone(orderInfo.contactNumber)" src="../../static/tell.png"
                     class="w-58 h-58 shrink0 " />
               </view>
            </view>
            <view class="flex j-between">
               <view class="label">详细地址</view>
               <view class="value">上报说明上报说明上报说明上报
                  上报说明上报说明上报说明上报说</view>
               <view class="value">{{ orderInfo.detailedAddress || '' }}</view>
            </view>
            <!-- 上级端需要的字段 -->
            <view class="flex j-between">
               <view class="label">录入人</view>
               <view class="value">上报说明上报说明上报说明</view>
            <view v-if="!isParty">
               <view class="flex j-between">
                  <view class="label">录入人</view>
                  <view class="value">{{ orderInfo.reportUserName || '' }}</view>
               </view>
               <view class="flex j-between">
                  <view class="label">录入人联系方式</view>
                  <view class="flex a-center">
                     <view class="value">{{ orderInfo.reportUserPhone || '' }}</view>
                     <image @click.stop="callPhone(orderInfo.reportUserPhone)" src="../../static/tell.png"
                        class="w-58 h-58 shrink0 " />
                  </view>
               </view>
            </view>
            <view class="flex j-between">
               <view class="label">录入人联系方式</view>
               <view class="value">13987654321</view>
            </view>

            <!--  上级端需要的字段-->
         </view>

         <!-- 问题描述 -->
         <view class="problem">
            <view class="title">问题描述</view>
            <view v-for="(item,index) in getVoiceFile(orderInfo.voiceFile)" :key="index"
               class="flex a-center j-between py-17 px-19 br-8 bgcolor1 mb-19">
               <view class="fs-27 lh-38">语音名字{{(index + 1) | numToWords}}</view>
               <image v-if="!playFlag" @click.stop="playRecording(item)" src="../../static/24gf-playCircle@2x.png"
                  class="w-27 h-27 shrink0" />
               <image v-else @click.stop="pausePlaying" src="../../static/pausePlaying.png"
                  class="w-27 h-27 shrink0" />
            </view>
            <view class="desc">
               <view class="top">问题标题问题标题问题标题问题标题</view>
               <view class="line1"></view>
               <view class="context">问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容</view>
               <!-- <view class="top">{{ orderInfo.descriptionTitle || "" }}</view> -->
               <!-- <view class="line1"></view> -->
               <view class="context">{{ orderInfo.descriptionContent || '' }}</view>

            </view>
            <view class="title">描述图片</view>
            <view class="descPic">
               <view class="picItem" v-for="(item,index) in 3">
                  <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                     class="img shrink0" mode="aspectFill">
            <view class="descPic" v-if="problemImg.length > 0">
               <view class="picItem" v-for="(item, index) in problemImg" @click.stop="viewImage(item)">
                  <image :src="item" class="img shrink0" mode="aspectFill">
                  </image>
               </view>
            </view>
            <view v-else class="noData">暂无数据</view>
            <view class="title">描述视频</view>
            <view class="descPic">
               <view class="picItem relative" v-for="(item,index) in 3">
                  <!-- <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                     class="img shrink0" mode="aspectFill">
                  </image> -->
                  <!-- <video :autoplay="true" src="https://www.w3schools.com/tags/movie.mp4"
                     class="img shrink0"></video> -->


            <view class="descPic" v-if="problemVideos.length > 0">
               <view class="picItem relative" v-for="(item, index) in problemVideos">
                  <video id="myVideo" class="videoImg shrink0" disabled :controls="false"
                     :show-center-play-btn="false" :src="src">

                     :show-center-play-btn="false" :src="item">
                  </video>
                  <view class="videoOpen" @click.stop="openVideo(src)">
                  <view class="videoOpen" @click.stop="openVideo(item)">
                     <image src="../../static/detailImg/open.png" class="video shrink0" mode="aspectFill">
                     </image>
                  </view>



               </view>
            </view>
         </view>

         <!-- 办结情况 -->
         <view class=" flex a-center j-between topMore topMore1 ">
            <view class="name">办结情况</view>
            <view class="flex a-center">
            </view>
         </view>
         <!-- 办结结果描述 -->
         <view class="resultDesc">
            <view class="topInfo">
               <view class="flex a-center j-between mb-15">
                  <view class="flex a-center">
                     <view class="name">办结人员：</view>
                     <view class="value">13987654321</view>
                  </view>
                  <view class="flex a-center">
                     <view class="name">联系电话：</view>
                     <view class="value">13987654321</view>
                  </view>
               </view>
               <view class="flex a-center">
                  <view class="name">办结时间：</view>
                  <view class="value">13987654321</view>
               </view>
            </view>
            <view class="title">办结结果描述</view>
            <view class="context">
               1、处理措施：记录为解决该问题所采取的具体措施，包括政策宣传、处理沟通、现场处理等方式。
               2、处理时间：记录处理该问题的时间节点，包括开始处理时间、处理完成时间等。
               3、参与人员：记录参与处理该问题的人员名单，包括走访人员、相关部门工作人员等。
               4、结果概述：简要描述问题的处理结果，是否得到有效解决，是否达到走访对象的期望等。
               5、后续跟进：如需进一步跟进或处理，记录后续跟进的计划、时间节点及责任人员。
            </view>
            <view class="title">描述图片</view>
            <view class="descPic">
               <view class="picItem" v-for="(item,index) in 3">
                  <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                     class="img shrink0" mode="aspectFill">
                  </image>
               </view>
            </view>
            <view class="title">描述视频</view>
            <view class="descPic" v-if="false">
               <view class="picItem" v-for="(item,index) in 3">
                  <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                     class="img shrink0" mode="aspectFill">
                  </image>
               </view>
            </view>
            <view v-else class="noData">暂无数据</view>
         </view>

         <!-- 详情/办理进度 --正在办理显示-->
         <view class="progress">
         <!-- 办结情况 -->
         <view class=" flex a-center j-between topMore topMore1" v-if="orderInfo.status == 3">
            <view class="name">办结情况</view>
            <view class="flex a-center">
            </view>
         </view>
         <!-- 办结结果描述 -->
         <view class="resultDesc" v-if="orderInfo.status == 3">
            <view class="topInfo">
               <view class="flex a-center j-between mb-15">
                  <view class="flex a-center">
                     <view class="name shrink0">办结人员：</view>
                     <view class="value">{{ orderInfo.completionUsername || '' }}</view>
                  </view>
                  <view class="flex a-center">
                     <view class="name shrink0">联系电话：</view>
                     <view class="flex a-center">
                        <view class="value">{{ orderInfo.completionUserPhone || '' }}</view>
                        <image @click.stop="callPhone(orderInfo.completionUserPhone)"
                           src="../../static/tell.png" class="w-58 h-58 shrink0 " />
                     </view>
                  </view>
               </view>
               <view class="flex a-center">
                  <view class="name">办结时间：</view>
                  <view class="value">{{ orderInfo.completionTime | formatTime }}</view>
               </view>
            </view>
            <view class="title">办结结果描述</view>
            <view class="context">{{ orderInfo.completionDescription || '' }}
            </view>
            <view class="title">描述图片</view>
            <view class="descPic" v-if="resultImg.length > 0">
               <view class="picItem" v-for="(item, index) in resultImg" @click.stop="viewImage(item)" :key="index">
                  <image :src="item" class="img shrink0" mode="aspectFill">
                  </image>
               </view>
            </view>
            <view v-else class="noData">暂无数据</view>
            <view class="title">描述视频</view>
            <view class="descPic" v-if="resultVideos.length > 0">
               <view class="picItem relative" v-for="(item, index) in resultVideos" :key="index">
                  <video id="myVideo" class="videoImg shrink0" disabled :controls="false"
                     :show-center-play-btn="false" :src="item">
                  </video>
                  <view class="videoOpen" @click.stop="openVideo(item)">
                     <image src="../../static/detailImg/open.png" class="video shrink0" mode="aspectFill">
                     </image>
                  </view>
               </view>
            </view>
            <view v-else class="noData">暂无数据</view>
         </view>

         <!-- 详情/办理进度 -正在办理-延期-超时  显示-->
         <view class="progress" v-if="[0, 1, 2].includes(orderInfo.status) && progressesList.length > 0">
            <view class="title">当前办理进度</view>
            <view class="proCard">
               <view class="proItem" v-for="(item,index) in 3">
               <view class="proItem" v-for="(item, index) in progressesList">
                  <view class="mr-31 flex flex-column a-center">
                     <image src="../../static/detailImg/right.png" class="proIcon shrink0" mode="aspectFill">
                     <image src="../../static/detailImg/Ovaled.png" class="proIcon shrink0" mode="aspectFill">
                     </image>
                     <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">
                           <image
                              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                              class="img shrink0" mode="aspectFill">
                        <view class="imgOrVedio" v-for="(ite, ind) in item.imgList"
                           @click.stop="viewImage(ite)">
                           <image :src="ite" class="img shrink0" mode="aspectFill">
                           </image>
                           <view class="openVideo" v-if="item==4">
                        </view>
                        <view class="imgOrVedio" v-for="(ite, ind) in item.videoList">
                           <video id="myVideo" class="videoImg shrink0" disabled :controls="false"
                              :show-center-play-btn="false" :src="ite">
                           </video>
                           <view class="videoOpen" @click.stop="openVideo(ite)">
                              <image src="../../static/detailImg/open.png" class="video shrink0"
                                 mode="aspectFill">
                              </image>
                           </view>

                        </view>
                     </view>
                  </view>
@@ -236,28 +295,32 @@
            </view>
         </view>

         <!-- 详情/诉求流转 --正在办理显示-->
         <view class="careRequire">
         <!-- 详情/诉求流转 -正在办理显示-->
         <view class="careRequire" v-if="orderInfo.status == 0 && flowsList.length > 0">
            <view class="title">诉求流转</view>
            <view class="proCard">
               <view class="proItem" v-for="(item,index) in 3">
               <view class="proItem" v-for="(item, index) in flowsList">
                  <view class="mr-34 flex flex-column a-center">
                     <image v-if="item==3" src="../../static/detailImg/Ovaled.png" class="proIcon shrink0"
                        mode="aspectFill">
                     <image v-if="index == flowsList.length - 1" src="../../static/detailImg/Ovaled.png"
                        class="proIcon shrink0" mode="aspectFill">
                     </image>
                     <image v-else src="../../static/detailImg/Ovaled.png" class="proIcon shrink0"
                        mode="aspectFill">
                     </image>

                     <view v-if="item!=3" class="proLine">
                     <view v-if="index != flowsList.length - 1" class="proLine">
                     </view>
                  </view>
                  <view class="requireItem">
                     <view class="flex a-center j-between mb-23">
                        <view class="name" :class="item==3?'opt1':''">市级下派</view>
                        <view class="time" :class="item==3?'opt1':''">2024年9月29日11:09:09</view>
                        <view class="name">{{ item.name || '' }}</view>
                        <view class="time">
                           {{ item.createTime | formatTime }}
                        </view>
                     </view>
                     <view class="name fs-23" :class="item==3?'opt1':''">上报</view>
                     <view class="name fs-23">
                        {{ item.type == 0 ? "上报" : '下派' }}
                     </view>

                  </view>
               </view>
@@ -267,87 +330,349 @@
      </view>

      <!-- 上级显示 -->
      <view class="btnButtom" v-if="false">
         <view class="btnDown">问题上报</view>
         <view class="btnDown">诉求下派</view>
         <view class="btnAdd">添加办理进度</view>
         <view class="btnAdd">办理结果录入</view>
      <view class="btnButtom" v-if="(!isParty)&&orderInfo.listControlsButtonStatus == 0">
         <view class="btnDown" @click.stop="toUp" v-if="userInfo.accountLevel > 1"
            :class="[2, 3].includes(userInfo.accountLevel) ? '' : 'partyUp'">问题上报</view>
         <view class="btnDown" @click.stop="toDown" v-if="userInfo.accountLevel < 4"
            :class="[2, 3].includes(userInfo.accountLevel) ? '' : 'partyDown'">诉求下派</view>
         <view class="btnAdd" @click="addProgress">添加办理进度</view>
         <view class="btnAdd" @click="resultEntery">办理结果录入</view>
      </view>
      <view class="btnButtom" v-if="false">
         <view class="cancel" @click.stop="showPop=true">驳回</view>
         <view class="sure">审核通过</view>
      <view class="btnButtom" v-if="orderInfo.auditButtonStatus == 0">
         <view class="cancel" @click.stop="showPop = true">驳回</view>
         <view class="sure" @click.stop="submitReSolve">审核通过</view>
      </view>
      <!-- 上级显示 -->

      <!-- 党员显示 -->
      <view class="btnButtom" v-if="true">
         <view class="btnDown partyUp">问题上报</view>
         <view class="btnAdd partyDown">添加办理进度</view>
         <view class="btnAdd partyDown">办理结果录入</view>
      <view class="btnButtom" v-if=" isParty && orderInfo.listControlsButtonStatus == 0">
         <view class="btnDown partyUp" @click.stop="toUp">问题上报</view>
         <view class="btnAdd partyDown" @click="addProgress">添加办理进度</view>
         <view class="btnAdd partyDown" @click="resultEntery">办理结果录入</view>
      </view>
      <!-- 党员并且属于本人工单上报 -->
      <view class="btnButtom" v-if="isParty && orderInfo.status == 5 && !orderInfo.withdrawButtonStatus">
         <view class="btnAdd w100 txt-center" @click="revocation">撤回</view>
      </view>
      <!-- 党员显示 -->
      <!-- v-if="[3].includes(orderInfo.status)" -->
      <view class="btnButtom" v-if="orderInfo.evaluateButtonStatus == 0">
         <view class=" btnAdd evaluate" @click.stop="toEvaluate">评价</view>
      </view>
      <view class="btnButtom" v-if="orderInfo.status == 8">
         <view class=" btnAdd w100 txt-center" @click.stop="toDetailEvaluate">查看评价</view>
      </view>




      <u-popup round="19rpx" :show="showPop" mode="center" @close="close" @open="open">
      <u-popup round="19rpx" :show="showPop" mode="center" @close="close" @open="open" zIndex="998">
         <view class="popup-content">
            <view class="title-pop">操作驳回</view>
            <view class="pop-textArea">
               <u--textarea v-model="rejectText" placeholder="请输入驳回原因"></u--textarea>
            </view>
            <view class="botton-btn">
               <view class="cancle" @click.stop="showPop=false">取消</view>
               <view class="cancle" @click.stop="showPop = false">取消</view>
               <view class="sure" @click.stop="submitReject">确定</view>
            </view>
         </view>
      </u-popup>

      <CustomPopup ref="customPopup" :isOneBtn="true" @comfirm="comfirm">
         <view class="txt-center fs-31 lh-42 pt-44 pb-35 color5">
            确认撤回当前审批操作吗
         </view>
      </CustomPopup>
   </view>
</template>

<script>
   import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js'
   import {
      workOrderDetail,
      getUserInfo,
      reportAudit,
      delayAudit,
      revoke
   } from './service.js'
   import {
      mapActions,
      mapState
   } from "vuex";
   export default {
      data() {
         return {
            id: "1", //工单详情ID
            orderInfo: {}, //工单详情
            problemVideos: [], //描述视频
            problemImg: [], //描述图片
            resultVideos: [], //结果描述视频
            resultImg: [], //结果描述图片
            progressesList: [], //诉求流转记录
            flowsList: [], //办理进度

            showPop: false, //弹窗驳回
            rejectText: "", //驳回原因

            status: '2', //1 正在办理2已完结

            scoreTopHeight: 0, //距离顶部多高

            src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'

            userInfo: uni.getStorageSync('userInfo'), //个人信息
            isParty: false, //true 党员 false 管理员
         };
      },
      computed: {
         ...mapState(["playFlag"]),
      },
      onPageScroll(e) {
         this.scoreTopHeight = e.scrollTop

      },
      filters: {
         formatTime(val) {
            if (!val) return ''
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
         },
         numToWords(val) {
            const words = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
            // 处理 0-10
            if (val >= 0 && val <= 10) return words[val];
            // 处理 11-99
            if (val > 10 && val < 100) {
               const ten = Math.floor(val / 10);
               const unit = val % 10;
               return `${ten > 1 ? words[ten] : ''}十${unit > 0 ? words[unit] : ''}`;
            }
            return val; // 超过99返回原数字
         }
      },
      onShow() {

         // alert(uni.getStorageSync('token'))
         this.getDetailInfo()
      },
      onLoad(params) {
         if (params.id) {
            this.id = params.id
         }
         this.isParty = uni.getStorageSync('userInfo').identity == 1 ? true : false
         // getUserInfo().then(res => {
         //    if (res.data == null || res.data.accountLevel == 5) {
         //       this.isParty = true
         //    }
         //    this.userInfo = {
         //       ...res.data
         //    }
         // })
      },
      methods: {
         ...mapActions(["playRecording", "pausePlaying"]),
         getVoiceFile(voiceFile) {
            if (!voiceFile || voiceFile.length == 0) return []
            return voiceFile.split(',')
         },
         callPhone(phoneNumber) {
            uni.makePhoneCall({
               phoneNumber
            });
         },
         // 确认撤回
         comfirm() {
            revoke({
               complaintId: this.id
            }).then(res => {
               this.$refs.customPopup.closePopup()
               uni.showToast({
                  title: '撤回成功',
                  icon: 'none',
                  mask: true,
               })
               this.getDetailInfo()
            })
         },
         // 撤回
         revocation() {
            this.$refs.customPopup.showPopup()
         },
         open() {},
         close() {},
         viewImage(item) {
            uni.previewImage({
               urls: [item]
            })
         },
         // 去大屏播放视频
         openVideo(url) {
            uni.navigateTo({
               url: `/pages/work-detail/maxVideo?url=${'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'}`
               url: `/pages/work-detail/maxVideo?url=${url}`
            })
         },
         // 获取订单详情信息
         getDetailInfo() {
            workOrderDetail({
               id: this.id
            }).then(res => {
               if (res.data.images) {
                  this.problemImg = res.data.images.split(',')
               }
               if (res.data.videos) {
                  this.problemVideos = res.data.videos.split(',')
               }
               if (res.data.completionImages) {
                  this.resultImg = res.data.completionImages.split(',')
               }
               if (res.data.completionVideos) {
                  this.resultVideos = res.data.completionVideos.split(',')
               }
               // 办理进度
               if (res.data.complaintProgresses && res.data.complaintProgresses.length > 0) {
                  this.progressesList = res.data.complaintProgresses.map((item) => {
                     return {
                        ...item,
                        imgList: item.imgUrl ? item.imgUrl.split(',') : [],
                        videoList: item.video ? item.video.split(',') : [],
                     }
                  })
               }
               // 诉求流转记录
               if (res.data.complaintFlows && res.data.complaintFlows.length > 0) {
                  this.flowsList = res.data.complaintFlows
               }

               this.orderInfo = {
                  ...res.data
               }

            })
         },
         // 确认驳回
         submitReject() {
            this.showPop = false
            if (!this.rejectText) {
               return uni.showToast({
                  duration: 1500,
                  title: '请输入驳回原因',
                  mask: true,
                  icon: 'none'
               })
            }
            if (this.orderInfo.status == 5) { //上报
               reportAudit({
                  id: this.id,
                  auditResult: 2,
                  rejectReason: this.rejectText
               }).then(res => {
                  this.showPop = false
                  // this.getDetailInfo()
                  uni.showToast({
                     title: '操作成功',
                     icon: 'success',
                     mask: true
                  })
                  setTimeout(() => {
                     uni.navigateBack()
                  }, 1500)

               })
            } else { //延期
               delayAudit({
                  complaintId: this.id,
                  auditResult: 2,
                  rejectReason: this.rejectText
               }).then(res => {
                  this.showPop = false
                  uni.showToast({
                     title: '操作成功',
                     icon: 'success',
                     mask: true
                  })
                  // this.getDetailInfo()
                  setTimeout(() => {
                     uni.navigateBack()
                  }, 1500)
               })
            }

         },
         // 确认通过审批
         submitReSolve() {
            if (this.orderInfo.status == 5) { //上报
               reportAudit({
                  id: this.id,
                  auditResult: 1,
               }).then(res => {
                  // this.getDetailInfo()
                  uni.showToast({
                     title: '操作成功',
                     icon: 'success',
                     mask: true
                  })
                  setTimeout(() => {
                     uni.navigateBack()
                  }, 1500)
               })
            } else { //延期
               delayAudit({
                  complaintId: this.id,
                  auditResult: 1,
               }).then(res => {
                  uni.showToast({
                     title: '操作成功',
                     icon: 'success',
                     mask: true
                  })
                  // this.getDetailInfo()
                  setTimeout(() => {
                     uni.navigateBack()
                  }, 1500)
               })
            }
         },
         //延期申请
         applyOverTime() {
            uni.navigateTo({
               url: `/pages/work-detail/postpone-apply`
               url: `/pages/work-detail/postpone-apply?id=${this.id}`
            })
         },
         // 问题上报
         toUp() {
            uni.navigateTo({
               url: `/pages/problemReporting/problemReporting?id=${this.id}`
            })
         },
         // 问题下派
         toDown() {
            uni.navigateTo({
               url: `/pages/dispatchWorkOrder/dispatchWorkOrder?id=${this.id}`
            })
         },
         // 去评价
         toEvaluate() {
            uni.navigateTo({
               url: `/pages/evaluate/evaluate?id=${this.id}`
            })
         },
         toDetailEvaluate() {
            uni.navigateTo({
               url: `/pages/evaluate/evaluate-detail?id=${this.id}`
            })
         },
         addProgress() {
            uni.navigateTo({
               url: `/pages/progress/progress?id=${this.id}`
            })
         },
         resultEntery() {
            uni.navigateTo({
               url: `/pages/result-entry/index?id=${this.id}`
            })
         },
         toProgressDetail() {
            uni.navigateTo({
               url: '/pages/progress/progress?type=1&id=' + this.id
            })
         },
         toDelayDetail() {
            uni.navigateTo({
               url: '/pages/delay/delay?type=1&id=' + this.id
            })
         },
      }
@@ -360,6 +685,20 @@
</style>

<style lang="scss" scoped>
   .bgcolor1 {
      background: #FFF1F4;
      box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
   }

   .color5 {
      color: #666160;
   }

   // 处理 u-popup 组件层级过高,将 uni.showToast 覆盖问题
   /deep/ .u-transition.u-fade-enter-to.u-fade-enter-active {
      z-index: 997 !important;
   }

   .topColor {
      height: 346rpx;
      background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 100%);
@@ -458,14 +797,21 @@

      .card1 {
         margin-top: 21rpx;
         display: flex;
         justify-content: space-between;


         .topIcon {
            margin-top: 17rpx;
            width: 19.23rpx;
            height: 19.23rpx;
            margin-right: 46rpx;
            width: 26.23rpx;
            height: 26.23rpx;

         }

         .proLine {
            flex: 1;
            width: 4rpx;
            min-height: 50rpx;
            background: rgba(0, 0, 0, 0.06);
            border-radius: 3rpx;
         }

         .infoCard {
@@ -644,8 +990,8 @@
               padding-bottom: 46rpx;

               .proIcon {
                  width: 19.23rpx;
                  height: 19.23rpx;
                  width: 26.23rpx;
                  height: 26.23rpx;
                  margin: 10rpx 0;
               }

@@ -686,6 +1032,14 @@
                     margin-right: 17rpx;
                     position: relative;

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

                     .img {
                        width: 140rpx;
                        height: 140rpx;
@@ -693,10 +1047,11 @@
                        margin-top: 19rpx;
                     }

                     .openVideo {
                     .videoOpen {
                        position: absolute;
                        top: 19rpx;
                        top: 10rpx;
                        left: 0;
                        z-index: 99;
                        width: 140rpx;
                        height: 140rpx;
                        border-radius: 8rpx;
@@ -705,6 +1060,7 @@
                        justify-content: center;

                        .video {
                           z-index: 999;
                           width: 140rpx;
                           height: 140rpx;
                        }
@@ -743,8 +1099,8 @@


               .proIcon {
                  width: 19.23rpx;
                  height: 19.23rpx;
                  width: 26.23rpx;
                  height: 26.23rpx;
                  margin: 23rpx 0 19rpx 0;
               }

@@ -955,6 +1311,10 @@
         padding: 19rpx 25rpx 19rpx 25rpx !important;
      }

      .evaluate {
         padding: 19rpx 310rpx;
      }


   }