hejianhao
2025-02-25 4a3bbace2b13a7977fa4b02771ab4b3c0d428500
H5/pages/add-progress/index.vue
@@ -6,7 +6,7 @@
            <view class="color1">{{ ["正在办理", "延期办理", "超时办理", "已办结", "群众撤销", "上报待审核", "上级驳回"][info.status] }}</view>
         </view>
         <view class="mx-13 mt-33 pt-35 pb-33 px-27 br-19 flex a-center j-between bgcolor1">
            <view class="fs-27 lh-38 color2">{{ info.detailedAddress }}</view>
            <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">
@@ -79,104 +79,153 @@
</template>
<script>
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: '请输入办理进度描述'
            })
   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,
         }
         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,
      },
      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',
                  mask: true
                  title: '请输入办理进度描述'
               })
            }
         })
      },
      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,
               success: (chooseImageRes) => {
                  this.imgUrls.push('loading')
                  this.againCklicFlag = true
                  let imgPathList = chooseImageRes.tempFilePaths;
                  if (imgPathList.length > 0) {
            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,
                  success: (chooseImageRes) => {
                     this.imgUrls.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.imgUrls = this.imgUrls.filter(item => item !=
                                    'loading')
                                 this.$nextTick(() => {
                                    this.imgUrls.push(JSON.parse(res.data)
                                       .data)
                                    this.localImageUrls.push(imgPathList[0])
                                 })
                              } else {
                                 this.againCklicFlag = true
                                 this.imgUrls = this.imgUrls.filter(
                                    item => item != 'loading')
                                 uni.showToast({
                                    title: '上传失败,请重新上传',
                                    icon: 'none',
                                    mask: true
                                 })
                              }
                           },
                           fail: (err) => {
                              this.againCklicFlag = true
                              this.imgUrls = this.imgUrls.filter(
                                 item => item != 'loading')
                              uni.showToast({
                                 title: '上传失败,请重新上传',
                                 icon: 'none',
                                 mask: true
                              })
                           }
                        })
                     }
                  },
               })
            } else {
               uni.chooseVideo({
                  camera: 'back',
                  success: (res) => {
                     this.video.push('loading')
                     this.againCklicFlag = true
                     const tempFilePath = res.tempFilePath;
                     uni.uploadFile({
                        url: config.imageUrl,
                        filePath: imgPathList[0],
                        filePath: tempFilePath,
                        timeout: 1000 * 45,
                        name: 'file',
                        header: {
@@ -184,16 +233,14 @@
                        },
                        success: (res) => {
                           if (JSON.parse(res.data).code == 200) {
                              this.imgUrls = this.imgUrls.filter(item => item !=
                              this.video = this.video.filter(item => item !=
                                 'loading')
                              this.$nextTick(() => {
                                 this.imgUrls.push(JSON.parse(res.data)
                                    .data)
                                 this.localImageUrls.push(imgPathList[0])
                                 this.video.push(JSON.parse(res.data).data)
                              })
                           } else {
                              this.againCklicFlag = true
                              this.imgUrls = this.imgUrls.filter(
                              this.video = this.video.filter(
                                 item => item != 'loading')
                              uni.showToast({
                                 title: '上传失败,请重新上传',
@@ -204,7 +251,7 @@
                        },
                        fail: (err) => {
                           this.againCklicFlag = true
                           this.imgUrls = this.imgUrls.filter(
                           this.video = this.video.filter(
                              item => item != 'loading')
                           uni.showToast({
                              title: '上传失败,请重新上传',
@@ -214,175 +261,128 @@
                        }
                     })
                  }
               },
               })
            }
         },
         // 去大屏播放视频
         openVideo(url) {
            uni.navigateTo({
               url: `/pages/work-detail/maxVideo?url=${url}`
            })
         } 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);
}
.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;
   .bs-1 {
      box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
   }
   .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;
   .color1 {
      color: #FF4948;
   }
      .video {
         z-index: 999;
   .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;
      }
      .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;
         .video {
            z-index: 999;
            width: 140rpx;
            height: 140rpx;
         }
      }
   }
}
.videoImg {
   width: 140.38rpx;
   height: 140.38rpx;
   border-radius: 7.69rpx;
   position: relative;
}
   .videoImg {
      width: 140.38rpx;
      height: 140.38rpx;
      border-radius: 7.69rpx;
      position: relative;
   }
#myVideo {
   z-index: 1;
}
   #myVideo {
      z-index: 1;
   }
.zIndex999 {
   z-index: 999;
}
   .zIndex999 {
      z-index: 999;
   }
</style>