迁移oa部分页面：施工进度和每日报工

components/ImageUpload.vue

@@ -0,0 +1,130 @@
+<template>
+  <view>
+    <uni-file-picker
+      v-model="fileList"
+      file-mediatype="image"
+      :limit="limit"
+      :image-styles="imageStyles"
+      :auto-upload="false"
+      @select="onSelect"
+      @delete="onDelete"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ImageUpload',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    limit: {
+      type: Number,
+      default: 9
+    }
+  },
+  data() {
+    return {
+      fileList: []
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        // 字符串转数组
+        if (val) {
+          this.fileList = val.split(',').filter(Boolean).map(url => ({ url }))
+        } else {
+          this.fileList = []
+        }
+      }
+    },
+    fileList: {
+      deep: true,
+      handler(val) {
+        // 数组转字符串
+        const urls = val.map(item => item.url).filter(Boolean).join(',')
+        this.$emit('input', urls)
+        this.$emit('update:value', urls)
+      }
+    }
+  },
+  methods: {
+    onSelect(e) {
+      if (e.tempFiles) {
+        const files = e.tempFiles.map(f => ({ url: f.path || f.url }))
+        this.fileList = this.fileList.concat(files)
+      }
+    },
+    onDelete(e) {
+      if (e.tempFilePaths) {
+        this.fileList = e.tempFilePaths.map(url => ({ url }))
+      }
+    }
+  },
+  computed: {
+    imageStyles() {
+      return {
+        width: 80,
+        height: 80,
+        borderRadius: 8
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.upload-image {
+  display: flex;
+  flex-wrap: wrap;
+}
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+.image-item {
+  position: relative;
+  width: 160rpx;
+  height: 160rpx;
+  margin-bottom: 16rpx;
+}
+.image {
+  width: 100%;
+  height: 100%;
+  border-radius: 8rpx;
+  object-fit: cover;
+}
+.delete-btn {
+  position: absolute;
+  top: -12rpx;
+  right: -12rpx;
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  border-radius: 50%;
+  width: 32rpx;
+  height: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  z-index: 2;
+}
+.add-btn {
+  width: 160rpx;
+  height: 160rpx;
+  background: #f5f5f5;
+  border: 1rpx dashed #ccc;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 80rpx;
+  color: #bbb;
+  margin-bottom: 16rpx;
+}
+</style>