AlarmHandlePop.vue

<template>
  <uv-popup ref="alarmHandlePop" round="24rpx">
    <view class="pop_header">
      <view style="width: 22px; visibility: hidden"></view>
      <text class="pop_header_text">{{ statusText }}</text>
      <uv-icon name="close" size="22" class="pop_header_icon" @tap="handleCloseI18nPop"></uv-icon>
    </view>
    <view class="upload-block">
      <view class="upload-title">
        <view class="u-t-title">{{ t('format.picture') }}</view>
        <text>{{ fileList.length }}/1</text>
      </view>

      <uv-upload :fileList="fileList" :maxSize="10485760" :maxCount="1" @afterRead="handleUploadImg"
        @delete="handleDeleteImg" @oversize="handleOverSize"></uv-upload>

      <view class="note-title">
        <!-- 确定不需要必填 -->
        <!-- <text>*</text> -->
        <view class="u-t-title">
          {{ t('maintenance.common.remark') }}
        </view>
      </view>
      <uv-textarea maxlength="300" count v-model="comment" :placeholder="t('maintenance.common.input')"></uv-textarea>
    </view>

    <view class="uni-date-changed uni-date-btn--ok">
      <view class="uni-datetime-picker--btn" @tap="handleConfirmAlarm">
        <text class="confirm-btn">{{ t("message.confirm") }}</text>
      </view>
    </view>
  </uv-popup>
</template>

<script setup>
  import {
    ref,
    computed,
    onMounted
  } from "vue";
  import {
    t
  } from "@/plugins/index.js";
  import {
    setTaskStatusApi
  } from "@/api/message.js";
  import host from "../utils/ip-config.js";
  import {
    timeFormat
  } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
  const emit = defineEmits(["success"]);

  /******** 文件处理相关 **********/
  const fileList = ref([]);
  const handleUploadImg = async (event) => {
    const result = await uploadFilePromise(event.file.url);
    fileList.value = [{
      status: "success",
      uploadUrl: result,
      url: `${host.assetsIp}/${result}`,
    }, ];
  };
  const handleOverSize = () => {
    uni.showToast({
      icon: "none",
      title: t("message.imgSize") + "10M",
    });
  };
  const handleDeleteImg = () => {
    fileList.value = [];
  };
  const uploadFilePromise = (url) => {
    return new Promise((resolve, reject) => {
      uni.showLoading({
        title: t('button.uploaing')
      })
      uni.uploadFile({
        url: `${host.ip}/report/common/upload`,
        filePath: url,
        name: "file",
        formData: {
          pathType: "task",
        },
        header: {
          Authorization: uni.getStorageSync('Authorization') || '',
        },
        success: (res) => {
          console.log(res);
          const data = JSON.parse(res.data);
          if (data.code === 200) {
            resolve(data.msg);
          }
        },
        complete: () => {
          uni.hideLoading()
        }
      });
    });
  };

  /******** 数据提交相关 **********/
  const comment = ref("");
  const handleConfirmAlarm = async () => {
    try {
      uni.showLoading({
        title: t('button.uploaing')
      })
      comment.value = comment.value.trim();
      // if (!comment.value) {
      //   uni.showToast({
      //     icon: 'none',
      //     title: t('pholder.enterNote')
      //   })
      //   return false
      // }

      const time = timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss');

      const params = {
        taskId: taskId.value,
        comment: comment.value,
        status: status.value,
        id: idValue.value,
        counttime: time, //当前设备的时间
      };
      console.log(params, 'params');

      if (fileList.value.length > 0) {
        params.photo = fileList.value[0].uploadUrl;
      }
      const res = await setTaskStatusApi(params);
      if (res.code === 200) {
        alarmHandlePop.value?.close();
        emit("success", params);
      }
    } catch (err) {
      console.log(err);
    } finally {
      uni.hideLoading()
    }
  };

  /******** 弹窗数据相关 **********/
  const alarmHandlePop = ref(null);
  const taskId = ref("");
  const status = ref("");
  const idValue = ref();
  const statusText = computed(() => {
    return status.value === "RESOLVE" ? t('button.confirm') : t('TaskNotice.falseAlarm');
  });
  const handleOpen = (id, type, idValueParam) => {
    taskId.value = id;
    status.value = type;
    idValue.value = idValueParam;
    alarmHandlePop.value?.open("bottom");
  };
  const handleClose = () => {
    alarmHandlePop.value?.close();
  };
  const handleCloseI18nPop = () => {
    alarmHandlePop.value?.close();
  };
  defineExpose({
    handleOpen,
  });
</script>

<style lang="scss" scoped>
  .upload-block {
    width: 100%;
    padding: 32rpx;

    .u-t-title {
      font-size: 28rpx;
      font-family: Inter, Inter;
      font-weight: 500;
      color: #000000;
    }

    .upload-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      margin-bottom: 20rpx;

      text {
        color: #90949d;
      }
    }

    .note-title {
      display: flex;
      align-items: center;
      margin: 8rpx 0 24rpx 0;
      display: flex;
      gap: 2rpx;

      text {
        color: #ff3838;
        font-size: 24rpx;
      }
    }
  }

  // uv-upload__success 改这个样式 不要显示
  :deep(.uv-upload__success) {
    display: none;
  }

  :deep(.uv-upload__deletable) {
    width: 18px;
    height: 18px;

    .uv-upload__deletable__icon {
      transform: scale(1.2);
      top: 4rpx;
      right: 4rpx;
    }
  }
</style>