itsm-wx-handle/components/IncidentAttachment.vue

<template>
  <view class="container" @touchmove.stop.prevent>
    <view class="container_head">
      {{incidentData.reqAttachment ? '报修图片' : ''}}{{incidentData.reqAttachment && incidentData.callID ? '及' : ''}}{{incidentData.callID ? '录音' : ''}}
    </view>
    <view class="container_form">
      <view class="repairImgList" v-if="incidentData.reqAttachment">
        <image class="repairImg" :src="img.previewUrl" mode="aspectFill" v-for="(img, i) in pageData.repairImgList" :key="i" @click="previewImg(i)"></image>
      </view>
      <view class="audio" v-if="incidentData.callID">
        <sy-audio ref="audio" isCountDown :src='pageData.audioSrc' audioTitle="" subheading=""></sy-audio>
      </view>
    </view>
    <view class="container_foot">
      <view class="foot_btns">
        <view class="know" @click="know">知道了</view>
      </view>
    </view>
  </view>
  <view class="mask" @touchmove.stop.prevent></view>
</template>

<script setup>
  import { defineEmits, ref, reactive, defineProps } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { useLoginUserStore } from '@/stores/loginUser'
  import { api_wechatRequesterIncident, api_callrecord } from "@/http/api.js"

  const emit = defineEmits(['cancelEmit', 'knowEmit']);
  const { incidentData } = defineProps({
    incidentData: Object,
  });
  const loginUserStore = useLoginUserStore();

  // 页面数据
  const pageData = reactive({
    repairImgList: [],//报修图片
    audioSrc: '',//音频
  });

  const audio = ref(null);

  // 取消
  function cancel(){
    emit('cancelEmit')
  }

  // 确认
  function know(){
    audio.value && audio.value.audioDestroy()
    emit('knowEmit');
  }

  // 预览图片
  function previewImg(index){
    uni.previewImage({
      current: index,
      urls: pageData.repairImgList.map(v => v.previewUrl),
      longPressActions: {
        itemList: ['发送给朋友', '保存图片', '收藏'],
        success: function(data) {
          console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
        },
        fail: function(err) {
          console.log(err.errMsg);
        }
      }
    });
  }

  // 获取报修图片
  function getRepairImgs() {
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    api_wechatRequesterIncident(incidentData.id).then((res) => {
        uni.hideLoading();
        res.data = res.data || [];
        res.data.forEach(v => {
          v.previewUrl = location.origin + "/file" + v.relativeFilePath;
        })
        pageData.repairImgList = res.data;
      });
  }

  // 获取通话音频
  function getCallrecord() {
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    let postData = {
      idx: 0,
      sum: 1,
      callrecord: {callAccept: incidentData.callID},
    };
    api_callrecord(postData).then((res) => {
        uni.hideLoading();
        if(res.status == 200){
          res.list = res.list || [];
          if(res.list.length){
            pageData.audioSrc = location.origin + res.list[0].recordingFileName;
          }else{
            pageData.audioSrc = '';
          }
        }else{
          uni.showToast({
            icon: 'none',
            title: res.msg || '请求数据失败！'
          });
        }
      });
  }

  onLoad((option) => {
    incidentData.reqAttachment && getRepairImgs();
    incidentData.callID && getCallrecord();
  })
</script>

<style lang="scss" scoped>
.mask{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}
.container{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 690rpx;
  background-color: #fff;
  border-radius: 10rpx;

  .container_head{
    padding: 55rpx;
    font-size: 32rpx;
    color: #333;
    text-align: center;
  }

  .container_form{
    padding: 0 55rpx;
    .repairImgList{
      margin-bottom: 55rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15rpx;
      .repairImg{
        width: 184rpx;
        height: 186rpx;
      }
    }

    .audio{
      margin-bottom: 45rpx;
    }
  }

  .container_foot{
    .foot_btns{
      display: flex;
      border-top: 1rpx solid #DDDDDD;
      .know{
        flex: 1;
        font-size: 32rpx;
        padding: 30rpx;
        display: flex;
        justify-content: center;
        color: $uni-primary;
      }
    }
  }
}
</style>