H5接口对接

hejianhao

3 天以前 554f8096e1f384f14b9424f5142d63f90c72a3eb

 H5/pages/add-progress/index.vue

@@ -1,67 +1,81 @@
<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.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="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 class="fs-27 mt-38 lh-38 font-bold">图片</view>
         <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="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 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>
@@ -69,60 +83,171 @@
<script>
   import {
      saveProcess,
      getComplaintDetail
   } from './service'
   import config from '@/config/index.js'
   export default {
      data() {
         return {
            id: '',
            describe: '',
            localImageUrls: [],
            imgUrls: [],
            complaintId: '', //诉求id
            info: {}, //工单详情
            describe: '', //办理进度描述
            localImageUrls: [], //本地回显的图片
            imgUrls: [], //传给后端的url
            video: [],
            againCklicFlag: true,
            rulsFlag: false,
         }
      },
      onLoad(params) {
         this.id = params.id
         this.complaintId = params.id
         getComplaintDetail({
            id: params.id
         }).then(res => {
            this.info = res.data
         })
      },
      methods: {
         back() {
            uni.navigateBack({
               delta: 2
            })
         },
         submit() {
            if (!this.describe) {
               this.rulsFlag = true
               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() {
            if (!this.againCklicFlag) return
         uploadImg(type) {
            // if (!this.againCklicFlag) return
            this.againCklicFlag = false
            uni.chooseImage({
               count: 1,
               sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
               sourceType: ['camera'], //x相机拍照
               success: (chooseImageRes) => {
                  this.imgUrls.push('loading')
                  this.againCklicFlag = true
                  let imgPathList = chooseImageRes.tempFilePaths;
                  if (imgPathList.length > 0) {
            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: uni.getStorageSync('token')
                           },
                           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
                              })
                           }
                        })
                     }
                  },
                  fail: () => {
                     this.againCklicFlag = true
                  }
               })
            } else {
               uni.chooseVideo({
                  camera: 'back',
                  success: (res) => {
                     const videoExtensions = /\.(mp4|avi|rmvb)$/i;
                     if (!videoExtensions.test(res.name)) {
                        uni.showToast({
                           title: '请上传mp4, avi, rmvb格式的视频',
                           icon: 'none',
                           duration: 3000
                        })
                        return
                     }
                     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: {
                           Authorization: config.uploadToken
                           Authorization: uni.getStorageSync('token')
                        },
                        success: (res) => {
                           if (JSON.parse(res.data).code == 200) {
                              let imgUrl = JSON.parse(res.data)
                              this.imgUrls = this.imgUrls.filter(item => item !=
                              this.video = this.video.filter(item => item !=
                                 'loading')
                              this.$nextTick(() => {
                                 this.imgUrls.push(imgUrl)
                                 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: '上传失败，请重新上传',
@@ -133,7 +258,7 @@
                        },
                        fail: (err) => {
                           this.againCklicFlag = true
                           this.imgUrls = this.imgUrls.filter(
                           this.video = this.video.filter(
                              item => item != 'loading')
                           uni.showToast({
                              title: '上传失败，请重新上传',
@@ -142,10 +267,19 @@
                           })
                        }
                     })
                  },
                  fail: () => {
                     this.againCklicFlag = true
                  }
               },
               })
            }
         },
         // 去大屏播放视频
         openVideo(url) {
            uni.navigateTo({
               url: `/pages/work-detail/maxVideo?url=${url}`
            })
         }
         },
      }
   }
</script>
@@ -171,8 +305,17 @@
      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%);
      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 {
@@ -206,4 +349,54 @@
   .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;
   }

   #myVideo {
      z-index: 1;
   }

   .zIndex999 {
      z-index: 999;
   }

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