InspectionCleaning/pages/index/uploadPhoto.vue

<template>
  <view class="content">
    <!-- 遮罩层 -->
    <view class="mask" v-if="showMenu" @click="toggleMenu"></view>

    <!-- 下拉菜单 -->
    <view class="dropdown-menu" v-if="showMenu">
      <view
        class="menu-item"
        v-for="(item, index) in menuItems"
        :key="index"
        @click="selectMenuItem(item)"
      >
        <text>{{ item }}</text>
      </view>
    </view>

    <u-navbar
      :is-back="true"
      title="上传图片"
      title-color="black"
      :background="{ backgroundColor: '#F7F8FC' }"
      :border-bottom="false"
    >
      <!-- <view slot="right">
        <view class="menu-wrapper">
          <image
            src="/static/iconfont/more.svg"
            mode="scaleToFill"
            style="width: 48rpx; height: 48rpx; margin-right: 32rpx"
            @click="toggleMenu"
          />
        </view>
      </view> -->
    </u-navbar>

    <view class="content-header">
      <view class="content-header-title">
        {{ params.aeraNmae }} — {{ params.planName }}
      </view>
    </view>

    <view class="planList">
      <view class="plan-header">
        <text>请上传区域图片</text>
      </view>
      <view class="plan-content">
        <view class="plan-content-top">
          <view class="plan-content-top-uploadBox" @click="takePhoto">
            <image
              src="/static/images/icon-camera.png"
              mode="aspectFit"
              style="width: 49rpx; height: 43rpx"
            />
            <view class="plan-content-top-uploadBox-text">添加照片</view>
          </view>

          <view
            class="plan-content-top-imgList"
            v-for="(item, index) in imageList"
            :key="index"
          >
            <image
              :src="item"
              mode="scaleToFill"
              style="width: 180rpx; height: 180rpx"
              @click="previewImage(index)"
            />
            <view class="delete-icon" @click="handleDelete(index)">×</view>
          </view>
        </view>
        <view class="plan-content-remark">
          <view class="plan-content-remark-title">备注</view>
          <!-- <view class="plan-content-remark-text">
            备注备注备注备注备注备注备注备注备注备注备注备注
          </view> -->
          <u-input
            v-model="remark"
            type="textarea"
            placeholder="请输入"
            :border="false"
          />
        </view>
      </view>
    </view>

    <u-button
      class="bottom-btn"
      shape="circle"
      type="primary"
      @click="submitForm"
      >上传</u-button
    >
  </view>
</template>

<script>
import { UploadFiles, UploadArea } from "@/api/apiList";

export default {
  data() {
    return {
      activeTab: "completed",
      showMenu: false,
      menuItems: ["教学楼楼道", "南广场跑道", "食堂大厅"],
      // 区域名称
      areaName: "操场",
      // 所属计划
      planName: "保洁计划",

      // 备注
      remark: "",

      imageList: [], // 存储图片临时路径

      params: {},
    };
  },
  onLoad(options) {
    console.log("options", JSON.parse(decodeURIComponent(options.params)));
    this.params = JSON.parse(decodeURIComponent(options.params));
  },
  created() {},
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    },
    toggleMenu() {
      this.showMenu = !this.showMenu;
    },
    selectMenuItem(item) {
      // 处理菜单项选择
      console.log("选择了:", item);
      this.areaName = item;
      // 这里可以添加选择后的逻辑
      this.showMenu = false;
    },

    // 拍照获取图片
    takePhoto() {
      uni.chooseImage({
        count: 1, // 每次拍摄1张
        sourceType: ["camera"], // 仅限拍照
        sizeType: ["compressed", "original"],
        success: async (res) => {
          // console.log("拍照成功", res);
          this.imageList = [...this.imageList, res.tempFilePaths[0]];
        },
        fail: (err) => {
          uni.showToast({ title: "拍照失败，请重试", icon: "none" });
        },
      });
    },

    // 上传图片
    async uploadFiles() {
      const res = await UploadFiles(this.imageList);
      if (res.succeed) {
        this.imageList = [...this.imageList, res.data];
      }
    },

    // 删除图片
    handleDelete(index) {
      this.imageList.splice(index, 1);
    },

    // 图片预览
    previewImage(index) {
      uni.previewImage({
        urls: this.imageList,
        current: index,
      });
    },

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

      const params = {
        id: this.params.id,
        note: this.remark,
        picturesDto: [],
      };

      const res = await UploadFiles(this.imageList);
      if (!res.succeed) return;
      params.picturesDto = res.data;

      const res2 = await UploadArea(params);
      if (res2.succeed) {
        // 成功的处理
        uni.showToast({ title: "上传成功", icon: "success", duration: 1500 });
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/index/index",
          });
        }, 1500);
      }
      // else {
      //   uni.showToast({ title: res2.error || "上传失败", icon: "none" });
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f7f8fc;
}
.content {
  position: relative;
  // height: 100vh;
  padding-bottom: 32rpx;
  background: #f7f8fc;

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 999;
  }

  .content-header {
    height: 180rpx;
    border-radius: 16rpx;
    margin: 32rpx;
    display: flex;
    flex-direction: column-reverse;
    background: url("/static/images/region-bg.png") no-repeat center center;
    background-size: 100% 100%;

    &-title {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      background-color: #fff;
      border-radius: 32rpx;
      min-width: 80%;
      padding: 0 32rpx;
      margin: 0 auto 32rpx;
    }
  }
  .planList {
    margin: 0 32rpx;
    border-radius: 16rpx;
    background-color: #fff;

    .plan-header {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
      padding: 32rpx;
      border-bottom: 1px solid #f2f2f2;
    }
    .plan-content {
      padding: 32rpx;
      &-top {
        display: flex;
        flex-wrap: wrap;
        gap: 32rpx;

        &-uploadBox {
          border: 1px dashed #526fa3;
          width: 180rpx;
          height: 180rpx;
          background-color: #edf2ff;
          border-radius: 16rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 20rpx;
        }

        &-imgList {
          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;
          }
        }
      }
      &-remark {
        margin-top: 32rpx;
        border-radius: 16rpx;
        &-title {
          margin-bottom: 16rpx;
          font-size: 32rpx;
          color: #333;
          font-weight: 500;
        }
        &-text {
          font-size: 28rpx;
          color: #666;
          margin-top: 16rpx;
        }
      }
    }
    &.activeList {
      .plan-item {
        background: linear-gradient(
          to bottom,
          #fef7ec 0%,
          #fffdfa 30%,
          #ffffff 100%
        );
      }
    }
  }

  .bottom-btn {
    margin: 60rpx 32rpx 0rpx;
    // position: fixed;
    // bottom: 32rpx;
    // left: 0;
    // right: 0;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 32rpx;
  position: relative;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
}

.menu-wrapper {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 80rpx;
  right: 32rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  width: 280rpx;
  overflow: hidden;
  z-index: 1000;

  .menu-item {
    padding: 24rpx 32rpx;
    font-size: 28rpx;
    color: #333333;
    border-bottom: 1px solid #f5f5f5;

    .menu-item:last-child {
      border-bottom: none;
    }

    .menu-item:active {
      background-color: #f8f8f8;
    }
  }
}
</style>