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, api_getRecordCall } 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,
			callAccept:incidentData.callID
      // callrecord: {callAccept: incidentData.callID},
    };
    api_callrecord(postData).then((res0) => {
			if(res0.status==200){
				api_getRecordCall({
					path:res0.list[0].path,
					hosId:loginUserStore.loginUser.user.currentHospital.id
				}).then((res)=>{
					uni.hideLoading();
					if(res.state == 200){
					  // res.list = res.list || [];
					  pageData.audioSrc = location.origin + res.relativePath;
					}else{
					  uni.showToast({
					    icon: 'none',
					    title: res.error || '请求数据失败！'
					  });
					}
				})
			}
			
    });
  }

  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>