InspectionCleaning/pages/index/list.vue

<template>
  <view class="content">
    <view class="top">
      <u-cell-group>
        <u-cell-item :arrow="false" title="保洁人员" value="小饼"></u-cell-item>
        <u-cell-item
          :arrow="false"
          title="上报时间"
          value="2025.4.1"
        ></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">
        <!-- 区域选择（多选） -->
        <u-form-item label="东大门操场" prop="areas" required>
          <u-input v-model="form.cleaner" placeholder="请输入故障" />
        </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"
          required
          label-position="top"
        >
          <u-upload
            v-model="form.images"
            :max-count="3"
            :previewFullImage="true"
            :multiple="true"
            @afterRead="handleImageUpload"
            @delete="handleImageDelete"
          ></u-upload>
        </u-form-item>
      </u-form>
    </view>

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

<script>
export default {
  data() {
    return {
      form: {
        cleaner: "", // 保洁人员
        reportTime: "", // 上报时间
        areas: [], // 清洁区域
        notes: "", // 备注
        images: [], // 图片列表
      },
      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"],
          },
        ],
        images: [
          {
            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);
    },

    // 表单提交
    submitForm() {
      this.$refs.uForm.validate().then((valid) => {
        if (valid) {
          uni.showToast({
            title: "提交成功",
            icon: "success",
          });
          // 这里添加实际提交逻辑
        }
      });
    },
  },
};
</script>

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

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

  .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>