InspectionCleaning/pages/index/list.vue

<template>
  <view class="content">
    <view class="top">
      <u-cell-group>
        <u-cell-item
          :arrow="false"
          title="保洁人员"
          :value="baseInfo.cleaner"
          :title-style="{
            color: '#303133',
            fontSize: '32rpx',
          }"
          :value-style="{
            color: '#303133',
            fontSize: '32rpx',
          }"
        ></u-cell-item>
        <u-cell-item
          :arrow="false"
          title="上报时间"
          :value="baseInfo.reportTime"
          :title-style="{
            color: '#303133',
            fontSize: '32rpx',
          }"
          :value-style="{
            color: '#303133',
            fontSize: '32rpx',
          }"
        ></u-cell-item>
      </u-cell-group>
    </view>

    <!-- <view class="title">保洁区域</view> -->

    <view class="bottom">
      <u-form
        :model="form"
        :rules="rules"
        ref="uForm"
        label-width="200"
        :label-style="{ fontSize: '32rpx' }"
      >
        <!-- 区域选择（多选） -->
        <u-form-item :label="baseInfo.area" prop="areas">
          <!-- <u-input v-model="form.cleaner" placeholder="请输入故障" /> -->
          <view style="width: 100%; font-size: 32rpx; text-align: right"
            >NFC卡损坏</view
          >
        </u-form-item>

        <!-- 备注（文本域） -->
        <u-form-item label="备注" prop="notes" label-position="top">
          <u-input
            v-model="form.notes"
            placeholder="请对故障进行描述"
            autoHeight
            maxlength="200"
            count
            type="textarea"
          ></u-input>
        </u-form-item>

        <!-- 图片上传 -->
        <u-form-item label="图片" prop="images" label-position="top">
          <!-- <u-upload
            v-model="form.images"
            :max-count="3"
            :previewFullImage="true"
            :multiple="true"
            @afterRead="handleImageUpload"
            @delete="handleImageDelete"
          ></u-upload> -->
          <view v-if="!form.url" class="upload-box" @click="takePhoto">
            <image
              src="/static/images/icon-camera.png"
              mode="aspectFit"
              style="width: 49rpx; height: 43rpx"
            />
          </view>

          <view v-else class="upload-image">
            <image
              :src="form.url"
              mode="aspectFit"
              style="width: 100%; height: 100%"
            />
            <view class="delete-icon" @click="handleDelete">×</view>
          </view>
        </u-form-item>
      </u-form>
    </view>

    <!-- 提交按钮 -->
    <u-button
      shape="circle"
      type="primary"
      style="margin-top: 40rpx"
      @click="submitForm"
      >保存</u-button
    >
  </view>
</template>

<script>
import { ReportingNFCDanger } from "@/api/apiList";

export default {
  data() {
    return {
      baseInfo: {
        cleaner: "小饼", // 保洁人员
        reportTime: "2025.4.1", // 上报时间
        area: "东大门操场", // 清洁区域
      },
      form: {
        notes: "", // 备注
        url: "", // 图片
      },
      areaOptions: [
        { label: "东大门操场", value: "east_gate" },
        { label: "西区教学楼", value: "west_building" },
        { label: "中心花园", value: "central_garden" },
      ],
      rules: {
        cleaner: [
          {
            required: true,
            message: "请填写保洁人员",
            trigger: ["blur", "change"],
          },
        ],
        reportTime: [
          {
            required: true,
            message: "请选择上报时间",
            trigger: ["change"],
          },
        ],
        areas: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个清洁区域",
            trigger: ["change"],
          },
        ],
        url: [
          {
            type: "array",
            min: 1,
            required: true,
            message: "请至少上传一张现场照片",
            trigger: ["change"],
          },
        ],
      },
    };
  },
  methods: {
    // 图片上传处理
    handleImageUpload(event) {
      const files = event.file;
      // 这里添加实际的上传逻辑
      this.form.images.push(...files.map((file) => ({ url: file.url })));
    },

    // 图片删除处理
    handleImageDelete(index) {
      this.form.images.splice(index, 1);
    },

    // 拍照获取图片
    takePhoto() {
      uni.chooseImage({
        count: 1, // 每次拍摄1张
        sourceType: ["camera"], // 仅限拍照
        sizeType: ["compressed"], // 压缩图片
        success: async (res) => {
          console.log("拍照成功", res);
          this.form.url = res.tempFilePaths[0];

          // this.uploadFiles(res.tempFilePaths[0]);
        },
        fail: (err) => {
          uni.showToast({ title: "拍照失败，请重试", icon: "none" });
        },
      });
    },

    // 删除图片
    handleDelete() {
      this.form.url = "";
    },

    // 表单提交
    async submitForm() {
      if (!this.form.url) {
        uni.showToast({ title: "请上传图片", icon: "none" });
        return;
      }

      console.log(this.form);

      return;

      const res = await ReportingNFCDanger({
        ...this.form,

        // 以下数据待获取
        id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
        userId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
        reportingTime: "2025-04-10T08:02:40.917Z",
        note: "string",
        url: "string",
        planInfoId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
      });

      if (res.succeed) {
        console.log(res);
        uni.showToast({ title: "上报成功", icon: "success" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f3f5fa;
}
.content {
  height: auto;
  // min-height: 100vh;
  padding: 24rpx 32rpx;
  background-color: #f3f5fa;

  .top {
    background: #ffffff;
    border-radius: 22rpx;
    padding: 0rpx 10rpx;
    margin-bottom: 30rpx;
  }

  .bottom {
    background: #ffffff;
    border-radius: 22rpx;
    padding: 0rpx 40rpx;
    margin-bottom: 30rpx;
    padding-bottom: 30rpx;

    .upload-box {
      border: 1px dashed #526fa3;
      width: 130rpx;
      height: 130rpx;
      background-color: #edf2ff;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .upload-image {
      width: 130rpx;
      height: 130rpx;
      border-radius: 16rpx;

      position: relative;
      .delete-icon {
        position: absolute;
        right: -10rpx;
        top: -10rpx;
        width: 36rpx;
        height: 36rpx;
        background: rgba(110, 110, 110, 0.6);
        border-radius: 50%;
        color: white;
        text-align: center;
        line-height: 36rpx;
        font-size: 28rpx;
      }
    }
  }

  .title {
    font-size: 38rpx;
    color: #1a1a1b;
    margin: 42rpx 0 32rpx 0;
    font-weight: bold;
  }

  // 调整复选框布局
  .u-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 30rpx;
  }
}
</style>