init

unpackage/dist/dev/mp-weixin/uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.js

@@ -0,0 +1,462 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const _sfc_main = {
+  emits: ["input", "update:modelValue"],
+  props: {
+    // 排序图片
+    value: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    // 排序图片
+    modelValue: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    // 从 list 元素对象中读取的键名
+    keyName: {
+      type: String,
+      default: null
+    },
+    // 选择图片数量限制
+    number: {
+      type: Number,
+      default: 6
+    },
+    // 图片父容器宽度（实际显示的图片宽度为 imageWidth / 1.1 ），单位 rpx
+    // imageWidth > 0 则 cols 无效
+    imageWidth: {
+      type: Number,
+      default: 0
+    },
+    // 图片列数
+    cols: {
+      type: Number,
+      default: 3
+    },
+    // 图片圆角，单位 rpx
+    borderRadius: {
+      type: Number,
+      default: 0
+    },
+    // 图片周围空白填充，单位 rpx
+    padding: {
+      type: Number,
+      default: 10
+    },
+    // 拖动图片时放大倍数 [0, ∞)
+    scale: {
+      type: Number,
+      default: 1.1
+    },
+    // 拖动图片时不透明度
+    opacity: {
+      type: Number,
+      default: 0.7
+    },
+    // 自定义添加
+    addImage: {
+      type: Function,
+      default: null
+    },
+    // 删除确认
+    delImage: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      imageList: [],
+      width: 0,
+      add: {
+        x: 0,
+        y: 0
+      },
+      colsValue: 0,
+      viewWidth: 0,
+      tempItem: null,
+      timer: null,
+      changeStatus: true,
+      preStatus: true,
+      first: true
+    };
+  },
+  computed: {
+    areaHeight() {
+      let height = "";
+      if (this.imageList.length < this.number) {
+        height = (Math.ceil((this.imageList.length + 1) / this.colsValue) * this.viewWidth).toFixed() + "px";
+      } else {
+        height = (Math.ceil(this.imageList.length / this.colsValue) * this.viewWidth).toFixed() + "px";
+      }
+      common_vendor.index.__f__("log", "at uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.vue:144", "areaHeight", height);
+      return height;
+    },
+    childWidth() {
+      return this.viewWidth - this.rpx2px(this.padding) * 2 + "px";
+    }
+  },
+  watch: {
+    value: {
+      handler(n) {
+        if (!this.first && this.changeStatus) {
+          common_vendor.index.__f__("log", "at uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.vue:155", "watch", n);
+          let flag = false;
+          for (let i = 0; i < n.length; i++) {
+            if (flag) {
+              this.addProperties(this.getSrc(n[i]));
+              continue;
+            }
+            if (this.imageList.length === i || this.imageList[i].src !== this.getSrc(n[i])) {
+              flag = true;
+              this.imageList.splice(i);
+              this.addProperties(this.getSrc(n[i]));
+            }
+          }
+        }
+      },
+      deep: true
+    },
+    modelValue: {
+      handler(n) {
+        if (!this.first && this.changeStatus) {
+          common_vendor.index.__f__("log", "at uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.vue:175", "watch", n);
+          let flag = false;
+          for (let i = 0; i < n.length; i++) {
+            if (flag) {
+              this.addProperties(this.getSrc(n[i]));
+              continue;
+            }
+            if (this.imageList.length === i || this.imageList[i].src !== this.getSrc(n[i])) {
+              flag = true;
+              this.imageList.splice(i);
+              this.addProperties(this.getSrc(n[i]));
+            }
+          }
+        }
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.width = common_vendor.index.getSystemInfoSync().windowWidth;
+  },
+  mounted() {
+    const query = common_vendor.index.createSelectorQuery().in(this);
+    query.select(".con").boundingClientRect((data) => {
+      this.colsValue = this.cols;
+      this.viewWidth = data.width / this.cols;
+      if (this.imageWidth > 0) {
+        this.viewWidth = this.rpx2px(this.imageWidth);
+        this.colsValue = Math.floor(data.width / this.viewWidth);
+      }
+      let list = this.value;
+      list = this.modelValue;
+      for (let item of list) {
+        this.addProperties(this.getSrc(item));
+      }
+      this.first = false;
+    });
+    query.exec();
+  },
+  methods: {
+    getSrc(item) {
+      if (this.keyName !== null) {
+        return item[this.keyName];
+      }
+      return item;
+    },
+    onChange(e, item) {
+      if (!item)
+        return;
+      item.oldX = e.detail.x;
+      item.oldY = e.detail.y;
+      if (e.detail.source === "touch") {
+        if (item.moveEnd) {
+          item.offset = Math.sqrt(Math.pow(item.oldX - item.absX * this.viewWidth, 2) + Math.pow(item.oldY - item.absY * this.viewWidth, 2));
+        }
+        let x = Math.floor((e.detail.x + this.viewWidth / 2) / this.viewWidth);
+        if (x >= this.colsValue)
+          return;
+        let y = Math.floor((e.detail.y + this.viewWidth / 2) / this.viewWidth);
+        let index = this.colsValue * y + x;
+        if (item.index != index && index < this.imageList.length) {
+          this.changeStatus = false;
+          for (let obj of this.imageList) {
+            if (item.index > index && obj.index >= index && obj.index < item.index) {
+              this.change(obj, 1);
+            } else if (item.index < index && obj.index <= index && obj.index > item.index) {
+              this.change(obj, -1);
+            } else if (obj.id != item.id) {
+              obj.offset = 0;
+              obj.x = obj.oldX;
+              obj.y = obj.oldY;
+              setTimeout(() => {
+                this.$nextTick(() => {
+                  obj.x = obj.absX * this.viewWidth;
+                  obj.y = obj.absY * this.viewWidth;
+                });
+              }, 0);
+            }
+          }
+          item.index = index;
+          item.absX = x;
+          item.absY = y;
+          if (!item.moveEnd) {
+            setTimeout(() => {
+              this.$nextTick(() => {
+                item.x = item.absX * this.viewWidth;
+                item.y = item.absY * this.viewWidth;
+              });
+            }, 0);
+          }
+          this.sortList();
+        }
+      }
+    },
+    change(obj, i) {
+      obj.index += i;
+      obj.offset = 0;
+      obj.x = obj.oldX;
+      obj.y = obj.oldY;
+      obj.absX = obj.index % this.colsValue;
+      obj.absY = Math.floor(obj.index / this.colsValue);
+      setTimeout(() => {
+        this.$nextTick(() => {
+          obj.x = obj.absX * this.viewWidth;
+          obj.y = obj.absY * this.viewWidth;
+        });
+      }, 0);
+    },
+    touchstart(item) {
+      this.imageList.forEach((v) => {
+        v.zIndex = v.index + 9;
+      });
+      item.zIndex = 99;
+      item.moveEnd = true;
+      this.tempItem = item;
+      this.timer = setTimeout(() => {
+        item.scale = this.scale;
+        item.opacity = this.opacity;
+        clearTimeout(this.timer);
+        this.timer = null;
+      }, 200);
+    },
+    touchend(item) {
+      this.previewImage(item);
+      item.scale = 1;
+      item.opacity = 1;
+      item.x = item.oldX;
+      item.y = item.oldY;
+      item.offset = 0;
+      item.moveEnd = false;
+      setTimeout(() => {
+        this.$nextTick(() => {
+          item.x = item.absX * this.viewWidth;
+          item.y = item.absY * this.viewWidth;
+          this.tempItem = null;
+          this.changeStatus = true;
+        });
+      }, 0);
+    },
+    previewImage(item) {
+      if (this.timer && this.preStatus && this.changeStatus && item.offset < 28.28) {
+        clearTimeout(this.timer);
+        this.timer = null;
+        const list = this.value || this.modelValue;
+        let srcList = list.map((v) => this.getSrc(v));
+        common_vendor.index.__f__("log", "at uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.vue:326", list, srcList);
+        common_vendor.index.previewImage({
+          urls: srcList,
+          current: item.src,
+          success: () => {
+            this.preStatus = false;
+            setTimeout(() => {
+              this.preStatus = true;
+            }, 600);
+          },
+          fail: (e) => {
+            common_vendor.index.__f__("log", "at uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.vue:337", e);
+          }
+        });
+      } else if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+    },
+    mouseenter() {
+    },
+    mouseleave() {
+    },
+    addImages() {
+      if (typeof this.addImage === "function") {
+        this.addImage.bind(this.$parent)();
+      } else {
+        let checkNumber = this.number - this.imageList.length;
+        common_vendor.index.chooseImage({
+          count: checkNumber,
+          sourceType: ["album", "camera"],
+          success: (res) => {
+            let count = checkNumber <= res.tempFilePaths.length ? checkNumber : res.tempFilePaths.length;
+            for (let i = 0; i < count; i++) {
+              this.addProperties(res.tempFilePaths[i]);
+            }
+            this.sortList();
+          }
+        });
+      }
+    },
+    delImages(item, index) {
+      if (typeof this.delImage === "function") {
+        this.delImage.bind(this.$parent)(() => {
+          this.delImageHandle(item, index);
+        });
+      } else {
+        this.delImageHandle(item, index);
+      }
+    },
+    delImageHandle(item, index) {
+      this.imageList.splice(index, 1);
+      for (let obj of this.imageList) {
+        if (obj.index > item.index) {
+          obj.index -= 1;
+          obj.x = obj.oldX;
+          obj.y = obj.oldY;
+          obj.absX = obj.index % this.colsValue;
+          obj.absY = Math.floor(obj.index / this.colsValue);
+          this.$nextTick(() => {
+            obj.x = obj.absX * this.viewWidth;
+            obj.y = obj.absY * this.viewWidth;
+          });
+        }
+      }
+      this.add.x = this.imageList.length % this.colsValue * this.viewWidth + "px";
+      this.add.y = Math.floor(this.imageList.length / this.colsValue) * this.viewWidth + "px";
+      this.sortList();
+    },
+    delImageMp(item, index) {
+      this.delImages(item, index);
+    },
+    sortList() {
+      common_vendor.index.__f__("log", "at uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.vue:434", "sortList");
+      const result = [];
+      let source = this.value;
+      source = this.modelValue;
+      let list = this.imageList.slice();
+      list.sort((a, b) => {
+        return a.index - b.index;
+      });
+      for (let s of list) {
+        let item = source.find((d) => this.getSrc(d) == s.src);
+        if (item) {
+          result.push(item);
+        } else {
+          if (this.keyName !== null) {
+            result.push({
+              [this.keyName]: s.src
+            });
+          } else {
+            result.push(s.src);
+          }
+        }
+      }
+      this.$emit("input", result);
+      this.$emit("update:modelValue", result);
+    },
+    addProperties(item) {
+      common_vendor.index.__f__("log", "at uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.vue:464", item);
+      let absX = this.imageList.length % this.colsValue;
+      let absY = Math.floor(this.imageList.length / this.colsValue);
+      let x = absX * this.viewWidth;
+      let y = absY * this.viewWidth;
+      this.imageList.push({
+        src: item,
+        x,
+        y,
+        oldX: x,
+        oldY: y,
+        absX,
+        absY,
+        scale: 1,
+        zIndex: 9,
+        opacity: 1,
+        index: this.imageList.length,
+        id: this.guid(16),
+        disable: false,
+        offset: 0,
+        moveEnd: false
+      });
+      this.add.x = this.imageList.length % this.colsValue * this.viewWidth + "px";
+      this.add.y = Math.floor(this.imageList.length / this.colsValue) * this.viewWidth + "px";
+    },
+    nothing() {
+    },
+    rpx2px(v) {
+      return this.width * v / 750;
+    },
+    guid(len = 32) {
+      const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
+      const uuid = [];
+      const radix = chars.length;
+      for (let i = 0; i < len; i++)
+        uuid[i] = chars[0 | Math.random() * radix];
+      uuid.shift();
+      return `u${uuid.join("")}`;
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return common_vendor.e({
+    a: $data.viewWidth
+  }, $data.viewWidth ? common_vendor.e({
+    b: common_vendor.f($data.imageList, (item, index, i0) => {
+      return {
+        a: item.src,
+        b: common_vendor.o(($event) => $options.delImages(item, index), item.id),
+        c: common_vendor.o(($event) => $options.delImageMp(item, index), item.id),
+        d: common_vendor.o(($event) => $options.nothing(), item.id),
+        e: common_vendor.o(($event) => $options.nothing(), item.id),
+        f: common_vendor.o(($event) => $options.nothing(), item.id),
+        g: "scale(" + item.scale + ")",
+        h: item.id,
+        i: item.y,
+        j: item.x,
+        k: item.disable,
+        l: common_vendor.o(($event) => $options.onChange($event, item), item.id),
+        m: common_vendor.o(($event) => $options.touchstart(item), item.id),
+        n: common_vendor.o(($event) => $options.touchstart(item), item.id),
+        o: common_vendor.o(($event) => $options.touchend(item), item.id),
+        p: common_vendor.o(($event) => $options.touchend(item), item.id),
+        q: item.zIndex,
+        r: item.opacity
+      };
+    }),
+    c: $options.childWidth,
+    d: $options.childWidth,
+    e: $props.borderRadius + "rpx",
+    f: $data.viewWidth + "px",
+    g: $data.viewWidth + "px",
+    h: $data.imageList.length < $props.number
+  }, $data.imageList.length < $props.number ? {
+    i: $options.childWidth,
+    j: $options.childWidth,
+    k: $props.borderRadius + "rpx",
+    l: $data.add.y,
+    m: $data.add.x,
+    n: $data.viewWidth + "px",
+    o: $data.viewWidth + "px",
+    p: common_vendor.o((...args) => $options.addImages && $options.addImages(...args))
+  } : {}, {
+    q: $options.areaHeight,
+    r: common_vendor.o((...args) => $options.mouseenter && $options.mouseenter(...args)),
+    s: common_vendor.o((...args) => $options.mouseleave && $options.mouseleave(...args))
+  }) : {});
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-6bf05798"]]);
+wx.createComponent(Component);
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.js.map

unpackage/dist/dev/mp-weixin/uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.wxml

@@ -0,0 +1 @@
+<view class="con data-v-6bf05798"><block wx:if="{{a}}"><movable-area class="area data-v-6bf05798" style="{{'height:' + q}}" bindmouseenter="{{r}}" bindmouseleave="{{s}}"><movable-view wx:for="{{b}}" wx:for-item="item" wx:key="h" class="view data-v-6bf05798" direction="all" y="{{item.i}}" x="{{item.j}}" damping="{{40}}" disabled="{{item.k}}" bindchange="{{item.l}}" bindtouchstart="{{item.m}}" bindmousedown="{{item.n}}" bindtouchend="{{item.o}}" bindmouseup="{{item.p}}" style="{{'width:' + f + ';' + ('height:' + g) + ';' + ('z-index:' + item.q) + ';' + ('opacity:' + item.r)}}"><view class="area-con data-v-6bf05798" style="{{'width:' + c + ';' + ('height:' + d) + ';' + ('border-radius:' + e) + ';' + ('transform:' + item.g)}}"><image class="pre-image data-v-6bf05798" src="{{item.a}}" mode="aspectFill"></image><view class="del-con data-v-6bf05798" bindtap="{{item.b}}" catchtouchstart="{{item.c}}" catchtouchend="{{item.d}}" catchmousedown="{{item.e}}" catchmouseup="{{item.f}}"><view class="del-wrap data-v-6bf05798"><image class="del-image data-v-6bf05798" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhdEVYdENyZWF0aW9uIFRpbWUAMjAyMDowNzoyNSAyMTo1NDoyOU4TkJAAAADcSURBVFhH7ZfRCoMwDEXLvkjwwVf/bH/emmAyN6glTW9WBjsgwm28OeCLpj81Sil7zvlJ90UiONS/yY5VogsO6XrBg3IEQ5a/s8vRSWUAKmLqp2w5jz5BiNQEGMo3GbloDLtFXJ1IkaEuhAiiY6gEIqB4yqACSk9piIBiKQ8VUFpLviKg3C2rESKgWERCBZSWiEfgIfffYvrrsAgoISJ3Apy3zuTxcSxLQkV6ykNEPKVQkZEyiAiiZKgDIaC4upACSlcn5fM/+WuDCAHF1E/Z/N9AhkMZnPNDPI+UDjPIXgAQIGjNAAAAAElFTkSuQmCC"></image></view></view></view></movable-view><view wx:if="{{h}}" class="add data-v-6bf05798" style="{{'top:' + l + ';' + ('left:' + m) + ';' + ('width:' + n) + ';' + ('height:' + o)}}" bindtap="{{p}}"><view class="add-wrap data-v-6bf05798" style="{{'width:' + i + ';' + ('height:' + j) + ';' + ('border-radius:' + k)}}"><image class="data-v-6bf05798" style="width:54rpx;height:54rpx" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAABIUlEQVRoQ+2a2w2DMAxFeQzWrsMUbadAsEw3S1CqVgppKwLX8BEOP4iHTXx8uUgWdVXoVhdaV0VhSmf7vr/H8V3XzY6V3P9iD+nYOI5P7/01LMI596AwoZV0TIBXIUWFXhKLFBWYSFGhhxQN6SFFQ5i4ogITKSr0cEVDekjRECauqMBEigq9U7piOk2yAti27SUe5ljlTfPEQ6KZecTvwl4P3ytvOv06R2HDMNzes7+6aRrvnHvtf50L13Lp50rx88zcvNlS3JpwKQ67XyK04nq2nFbk/LqVjin0TvmBNgQ2S4UUDcliHgpMpKjQwxUN6SFFQ5i4ogITKSr0cEVDekjRECauqMAsVoph+hVPtYr5+03p9tbYQ96xrYtT4ootbAJGVxxVTapVswAAAABJRU5ErkJggg=="></image></view></view></movable-area></block></view>

unpackage/dist/dev/mp-weixin/uni_modules/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.wxss

@@ -0,0 +1,100 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.con.data-v-6bf05798 {
+  background: #FFFFFF;
+}
+.con .area.data-v-6bf05798 {
+  width: 100%;
+}
+.con .area .view.data-v-6bf05798 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.con .area .view .area-con.data-v-6bf05798 {
+  position: relative;
+  overflow: hidden;
+}
+.con .area .view .area-con .pre-image.data-v-6bf05798 {
+  width: 100%;
+  height: 100%;
+}
+.con .area .view .area-con .del-con.data-v-6bf05798 {
+  position: absolute;
+  top: 0rpx;
+  right: 0rpx;
+  padding: 0 0 20rpx 20rpx;
+}
+.con .area .view .area-con .del-con .del-wrap.data-v-6bf05798 {
+  width: 36rpx;
+  height: 36rpx;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 0 0 0 10rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.con .area .view .area-con .del-con .del-wrap .del-image.data-v-6bf05798 {
+  width: 20rpx;
+  height: 20rpx;
+}
+.con .area .add.data-v-6bf05798 {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.con .area .add .add-wrap.data-v-6bf05798 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #eeeeee;
+}