Initial commit

2025-12-30 09:44:46 +08:00
commit 82b8d21506
147 changed files with 39113 additions and 0 deletions
--- a/components/upload_img_video.vue
+++ b/components/upload_img_video.vue
@@ -0,0 +1,153 @@
+<template>
+  <view>
+    <u-upload :accept="accept" :fileList="imgList" @afterRead="afterRead" @delete="deletePic" :name="paramsName"
+              :multiple="isMultiple" :maxCount="limit" ref="upload">
+      <u-button v-if="isBtn" plain type="primary" text="上传" size="mini" icon="arrow-upward" class="btn-icon"
+                style="border: 1px solid #c2d10a;" iconColor="#c2d10a" color="#c2d10a"></u-button>
+      <view v-else class="u-upload__button" :hover-class="!disabled ? 'u-upload__button--hover' : ''"
+            hover-stay-time="150" :class="[disabled && 'u-upload__button--disabled']" :style="[{
+						width: $u.addUnit(80),
+						height: $u.addUnit(80)
+					}]" style="background-color: aliceblue;display: flex;align-items: center;justify-content: center;">
+        <u-icon name="camera-fill" size="26" color="#D3D4D6"></u-icon>
+      </view>
+    </u-upload>
+  </view>
+</template>
+
+<script>
+export default {
+  options: {
+    styleIsolation: 'shared', // 解除样式隔离
+  },
+  name: "upload_img_video",
+  props: {
+
+    limit: {
+      type: Number,
+      default: 10
+    },
+    isMultiple: {
+      type: Boolean,
+      default: true
+    },
+    isBtn: {
+      type: Boolean,
+      default: false
+    },
+    accept: {
+      type: String,
+      default: "image"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    paramsName: {
+      type: String,
+      default: "file"
+    }
+  },
+  data() {
+    return {
+      imgList: [],
+    };
+  },
+  methods: {
+    // 删除图片
+    deletePic(event) {
+      this.imgList.splice(event.index, 1)
+      this.$emit('successFile', this.imgList);
+    },
+    // 新增图片
+    async afterRead(event) {
+      const that = this;
+      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
+      let lists = [].concat(event.file)
+      let fileListLen = this.imgList.length
+      lists.map((item) => {
+        that.imgList.push({
+          ...item,
+          status: 'uploading',
+          message: '上传中'
+        })
+      })
+      for (let i = 0; i < lists.length; i++) {
+        const result = await this.uploadFilePromise(lists[i].url)
+        let item = this.imgList[fileListLen]
+        that.imgList.splice(fileListLen, 1, Object.assign(item, {
+          status: 'success',
+          message: '',
+          url: result.data.url,
+          name: result.data.fileName
+        }))
+        fileListLen++
+      }
+      this.$emit('successFile', this.imgList);
+    },
+    uploadFilePromise(url) {
+      return new Promise((resolve, reject) => {
+        let a = uni.uploadFile({
+          url: '/attachment/upload', // 仅为示例，非真实的接口地址
+          filePath: url,
+          name: this.paramsName,
+          success: (res) => {
+            resolve(JSON.parse(res.data || {}))
+          },
+          fail: (e) => {
+            reject(e);
+          }
+        });
+      })
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/.btn-icon {
+  font-size: 10rpx !important;
+  height: 58rpx !important;
+
+  /deep/.u-icon {
+    /deep/.u-icon__icon--primary {
+      font-size: 20rpx !important;
+    }
+  }
+
+}
+
+/deep/.u-button--mini {
+  width: 120rpx !important;
+
+  .u-icon {
+    font-size: 20rpx !important;
+
+    .u-icon__icon {
+      font-size: 20rpx !important;
+    }
+  }
+
+  height: 58rpx !important;
+}
+
+/deep/.u-upload__deletable {
+  width: 20px !important;
+  height: 20px !important;
+
+  .uicon-close {
+    font-size: 14px !important;
+    line-height: 14px !important;
+  }
+}
+
+/deep/.u-upload__success {
+  border-bottom-color: #c2d10a !important;
+  border-right-color: #c2d10a !important;
+
+  .uicon-checkmark {
+    font-size: 14px !important;
+    line-height: 14px !important;
+  }
+}
+</style>