itsm-wx-handle/components/RequireAttachment.vue

<template>
  <view class="container" @touchmove.stop.prevent>
    <view class="container_head">
      报修录音
    </view>
    <view class="container_form">
      <view class="audio" v-if="incidentData.reqRecord">
        <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_wechatIncidentRecord } from "@/http/api.js"

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

  // 页面数据
  const pageData = reactive({
    audioSrc: '',//音频
  });

  const audio = ref(null);

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

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

  // 获取报修录音
  function getRepairAudio() {
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    api_wechatIncidentRecord(incidentData.id).then((res) => {
        uni.hideLoading();
        res.data = res.data || [];
        res.data.forEach(v => {
          v.previewUrl = location.origin + "/file" + v.relativeFilePath;
        })
        res.data[0] && (pageData.audioSrc = res.data[0].previewUrl);
      });
  }

  onLoad((option) => {
    incidentData.reqRecord && getRepairAudio();
  })
</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>