{"version":3,"sources":["webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue?0df8","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue?b7fe","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue?dde2","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue?faf2","uni-app:///tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue?5726","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue?20c2"],"names":["name","props","fileList","type","default","action","header","formData","disabled","autoUpload","maxCount","imageMode","previewFullImage","showProgress","deleteable","deleteIcon","deleteBackgroundColor","deleteColor","uploadText","showTips","width","height","sizeType","sourceType","multiple","maxSize","limitType","toJson","beforeUpload","beforeRemove","index","computed","movableAreaHeight","itemWidth","itemHeight","data","lists","uploading","baseData","windowWidth","columns","dragItem","widthPx","heightPx","addBtn","x","y","timer","dragging","watch","created","mounted","methods","clear","reUpload","selectFile","camera","compressed","chooseFile","uni","count","success","fail","res","url","progress","error","file","showToast","upload","retry","uploadFile","beforeResponse","task","filePath","complete","uploadError","deleteItem","handlerDeleteItem","remove","item","doPreviewImage","urls","current","checkFileExt","fileExt","noArrowExt","updateDragInfo","query","setTimeout","handleDragListItem","id","preX","preY","positionX","positionY","zIndex","opacity","scale","offset","moveEnd","moving","unique","updateAddBtnPositioin","sortList","list","mouseEnterArea","mouseLeaveArea","movableLongPress","value","movableChange","Math","movableStart","movableEnd","listValue","updateItemPosition"],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA6I;AAC7I;AACwE;AACL;AACsC;;;AAGzG;AAC+L;AAC/L,gBAAgB,wMAAU;AAC1B,EAAE,0FAAM;AACR,EAAE,2GAAM;AACR,EAAE,oHAAe;AACjB;AACA;AACA;AACA;AACA;AACA,EAAE,+GAAU;AACZ;AACA;;AAEA;AACe,gF;;;;;;;;;;;;ACvBf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA,aAAa,sQAEN;AACP,KAAK;AACL;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;AC/EA;AAAA;AAAA;AAAA;AAAgvB,CAAgB,qwBAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBCiHpwB;EACAA;EACAC;IACA;IACAC;MACAC;MACAC;QACA;MACA;IACA;IACA;IACAC;MACAF;MACAC;IACA;IACA;IACAJ;MACAG;MACAC;IACA;IACA;IACAE;MACAH;MACAC;QACA;MACA;IACA;IACA;IACAG;MACAJ;MACAC;QACA;MACA;IACA;IACA;IACAI;MACAL;MACAC;IACA;IACA;IACAK;MACAN;MACAC;IACA;IACA;IACAM;MACAP;MACAC;IACA;IACA;IACAO;MACAR;MACAC;IACA;IACA;IACAQ;MACAT;MACAC;IACA;IACA;IACAS;MACAV;MACAC;IACA;IACA;IACAU;MACAX;MACAC;IACA;IACA;IACAW;MACAZ;MACAC;IACA;IACA;IACAY;MACAb;MACAC;IACA;IACA;IACAa;MACAd;MACAC;IACA;IACA;IACAc;MACAf;MACAC;IACA;IACA;IACAe;MACAhB;MACAC;IACA;IACA;IACAgB;MACAjB;MACAC;IACA;IACA;IACAiB;MACAlB;MACAC;IACA;IACA;IACA;IACAkB;MACAnB;MACAC;QACA;MACA;IACA;IACA;IACAmB;MACApB;MACAC;QACA;MACA;IACA;IACA;IACAoB;MACArB;MACAC;IACA;IACA;IACAqB;MACAtB;MACAC;IACA;IACA;IACAsB;MACAvB;MACAC;QACA;MACA;IACA;IACA;IACAuB;MACAxB;MACAC;IACA;IACA;IACAwB;MACAzB;MACAC;IACA;IACA;IACAyB;MACA1B;MACAC;IACA;IACA0B;MACA3B;MACAC;IACA;EACA;EACA2B;IACAC;MACA;QACA;MACA;QACA;MACA;IACA;IACAC;MACA;IACA;IACAC;MACA;IACA;EACA;EACAC;IACA;MACAC;MACAC;MACAC;QACAC;QACAC;QACAC;QACAC;QACAC;MACA;MACAC;QACAC;QACAC;MACA;MACAC;MACAC;IACA;EACA;EACAC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAb;MACA;IACA;EACA;EACAc;IACA;EACA;EACAC;IAAA;IACA;MACA;IACA;EACA;EACAC;IACA;IACAC;MACA;MACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA,iBAUA,KATAvD;QAAAA;QACAU,WAQA,KARAA;QACAc,WAOA,KAPAA;QACAC,UAMA,KANAA;QACAH,WAKA,KALAA;QACAc,QAIA,KAJAA;QACAoB,SAGA,KAHAA;QACAC,aAEA,KAFAA;QACAlC,aACA,KADAA;MAEA;MACA;MACA;MACAmC;QACAC;UACAC;UACArC;UACAD;UACAuC;UACAC;QACA;MACA;MACAJ;QACA;QACA;QACAK;UACA;;UAEA;UACA;UACA;YACA;YACA;UACA;YACA;cACA;cACA;cACA;YACA;YACA3B;cACA4B;cACAC;cACAC;cACAC;YACA;YACA;UACA;QACA;QACA;QACA;MACA;QACA;MACA;IACA;IACA;IACAC;MAAA;MACA;QACA;MACA;IACA;IACA;IACAC;MACA;IACA;IACA;IACAC;MACA;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MAAA;QAAA;MAAA;QAAA;QAAA;UAAA;YAAA;cAAA;gBAAAzC;gBAAA,KACA;kBAAA;kBAAA;gBAAA;gBAAA;cAAA;gBAAA,KACA;kBAAA;kBAAA;gBAAA;gBAAA;cAAA;gBAAA,MAEAA;kBAAA;kBAAA;gBAAA;gBACA;gBAAA;cAAA;gBAAA,MAIA;kBAAA;kBAAA;gBAAA;gBACA;gBACA;gBAAA;cAAA;gBAAA,MAIA;kBAAA;kBAAA;gBAAA;gBACA;gBACA;gBACA;gBACA;gBACA0C,iGACA;gBAAA,MACA;kBAAA;kBAAA;gBAAA;gBAAA;gBAAA,OACAA;kBACA;gBAAA,CACA;kBACA;kBACA;gBACA;cAAA;gBAAA;gBAAA;cAAA;gBAAA,MACAA;kBAAA;kBAAA;gBAAA;gBAAA,iCAEA;cAAA;gBAAA,IAMA;kBAAA;kBAAA;gBAAA;gBACA;gBAAA;cAAA;gBAGA;gBACA;gBACA;gBACAC;kBACAT;kBACAU;kBACA1E;kBACAO;kBACAD;kBACAuD;oBACA;oBACA;oBACA;sBACA;oBACA;sBACA;sBACA;sBACA;sBACA;oBACA;kBACA;kBACAC;oBACA;kBACA;kBACAa;oBACA;oBACA;oBACA;oBACA;kBACA;gBACA;gBACA;gBACAF;kBACA;oBACA;oBACA;kBACA;gBACA;cAAA;cAAA;gBAAA;YAAA;UAAA;QAAA;MAAA;IACA;IACA;IACAG;MACA;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA,uBACA,MACA,iGACA;QAAA;QAAA;UAAA;YAAA;cAAA;gBAAA,MAGA;kBAAA;kBAAA;gBAAA;gBACAL,iGACA;gBAAA,MACA;kBAAA;kBAAA;gBAAA;gBAAA;gBAAA,OACAA;kBACA;kBACA;gBACA;kBACA;gBACA;cAAA;gBAAA;gBAAA;cAAA;gBACA;kBACA;gBACA;kBACA;gBACA;cAAA;gBAAA;gBAAA;cAAA;gBAEA;cAAA;cAAA;gBAAA;YAAA;UAAA;QAAA;MAAA,CAEA;IACA;IACA;IACAM;MACA;MACA;QACA;MACA;MACA;MACA;MACA;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA;MACA;QACA;QACA;QACA;QAAA,2CACA;UAAA;QAAA;UAAA;YAAA;YACA;cACAC;cACAA;cACAA;cACAA;cACAA;cACA;gBACAA;gBACAA;cACA;YACA;UAAA;UAXA;YAAA;UAYA;QAAA;UAAA;QAAA;UAAA;QAAA;QAEA;MACA;IACA;IACA;IACAC;MAAA;MACA;MACA;QAAA;MAAA;QAAA;MAAA;MACAtB;QACAuB;QACAC;QACAtB;UACA;QACA;QACAC;UACA;QACA;MACA;IACA;IACA;IACAsB;MACA;MACA;MACA;MACA;MACA;MAMAC;MAEAC;QACA;MACA;MACA;MACA;IACA;IAEA;IAEA;IACAC;MAAA;MACA;MACA;;MAEA;MACA;MACAC;MACAA;QACA;UACAC;YACA;UACA;UACA;QACA;QACA;;QAEA;QACA;QACA;UACA;UACA;UACA;UACA;YACA;UACA;YACA;UACA;UACA;UACA;YACAzB;YACAE;YACAD;UACA;QACA;;QAEA;QACA;MACA;IACA;IACA;IACAyB;MACA;MACA;MACA;MACA;MACA;QACAC;QACA9C;QACAC;QACA8C;QACAC;QACAC;QACAC;QACAC;QACAxF;QACAyF;QACAC;QACApE;QACAqE;QACAC;QACAC;QACAlE,wBACA6C;MAEA;IACA;IACA;IACAsB;MAAA;MACA;MACA;QAAAX;MAAA;MACA;IACA;IACA;IACAY;MACA;MAEA;MACA;IACA;IACA;IACAC;MACA;MACAC;QACA;MACA;MACA;QACA;MACA;IACA;IACAC,2CAMA;IACAC,2CAyBA;IACAC;MAEAjD;MACA;MACA;QACAkD;MACA;MACA;MACA;MACA;QACA;MACA;MACA7B;MACAA;MACAA;MACA;IAEA;IACA8B;MACA;MACA;MACA9B;MACAA;MACAA;MACA;;MAEA;QACA;UACAA,wBACA+B,kEACAA;QACA;QACA;QACA;QACA;QACA;QACA;UAAA,4CACA;YAAA;UAAA;YAAA;cAAA;cACA;gBACA;cACA;gBACA;cACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;cAAA;YAEA;UAAA;YAAA;UAAA;YAAA;UAAA;UACA/B;UACAA;UACAA;UACA;QACA;MACA;IACA;IACAgC;MACA;MACA;QACAhC;MAIA;MACAA;MACAA;MACA;IAUA;IACAiC;MAAA;MACA;MACA;MACA;QACA;MACA;MACA;QACAjC;QACAA;MACA;MACAA;MACAA;MACAA;MACAA;MACAA;MACAA;MACA;MACA;MACA;MACA;MACA;MACA;QACAkC;QACAA;MACA;MACA;QACAlC;QACAA;QACAA;QACAA;QACA;QACA;QACA;QACA;MACA;MACA;IACA;IACA;IACAmC;MAAA;MACA;QACA;MACA;MACAnC;MACAA;MACAA;MACAA;MACA;QACAA;QACAA;MACA;MACAA;MACAA;MACA;MACA;MACA;QACAA;QACAA;QACA;MACA;IACA;EACA;AACA;AAAA,4B;;;;;;;;;;;;;ACh3BA;AAAA;AAAA;AAAA;AAA25C,CAAgB,w3CAAG,EAAC,C;;;;;;;;;;;ACA/6C;AACA,OAAO,KAAU,EAAE,kBAKd","file":"tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./tn-image-upload-drag.vue?vue&type=template&id=4c370648&scoped=true&\"\nvar renderjs\nimport script from \"./tn-image-upload-drag.vue?vue&type=script&lang=js&\"\nexport * from \"./tn-image-upload-drag.vue?vue&type=script&lang=js&\"\nimport style0 from \"./tn-image-upload-drag.vue?vue&type=style&index=0&id=4c370648&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\runtime\\\\componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"4c370648\",\n  null,\n  false,\n  components,\n  renderjs\n)\n\ncomponent.options.__file = \"tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue\"\nexport default component.exports","export * from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\templateLoader.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--17-0!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\template.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-uni-app-loader\\\\page-meta.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-image-upload-drag.vue?vue&type=template&id=4c370648&scoped=true&\"","var components\ntry {\n  components = {\n    tnLineProgress: function () {\n      return import(\n        /* webpackChunkName: \"tuniao-ui/components/tn-line-progress/tn-line-progress\" */ \"@/tuniao-ui/components/tn-line-progress/tn-line-progress.vue\"\n      )\n    },\n  }\n} catch (e) {\n  if (\n    e.message.indexOf(\"Cannot find module\") !== -1 &&\n    e.message.indexOf(\".vue\") !== -1\n  ) {\n    console.error(e.message)\n    console.error(\"1. 排查组件名称拼写是否正确\")\n    console.error(\n      \"2. 排查组件是否符合 easycom 规范，文档：https://uniapp.dcloud.net.cn/collocation/pages?id=easycom\"\n    )\n    console.error(\n      \"3. 若组件不符合 easycom 规范，需手动引入，并在 components 中注册该组件\"\n    )\n  } else {\n    throw e\n  }\n}\nvar render = function () {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  var l0 = !_vm.disabled\n    ? _vm.__map(_vm.lists, function (item, index) {\n        var $orig = _vm.__get_orig(item)\n        var g0 = _vm.$tn.string.getLengthUnitValue(_vm.width)\n        var g1 = _vm.$tn.string.getLengthUnitValue(_vm.height)\n        var g2 = _vm.$tn.string.getLengthUnitValue(_vm.itemWidth, \"px\")\n        var g3 = _vm.$tn.string.getLengthUnitValue(_vm.itemHeight, \"px\")\n        return {\n          $orig: $orig,\n          g0: g0,\n          g1: g1,\n          g2: g2,\n          g3: g3,\n        }\n      })\n    : null\n  var g4 = !_vm.disabled ? _vm.lists.length : null\n  var g5 =\n    !_vm.disabled && _vm.maxCount > g4\n      ? _vm.$tn.string.getLengthUnitValue(_vm.itemWidth, \"px\")\n      : null\n  var g6 =\n    !_vm.disabled && _vm.maxCount > g4\n      ? _vm.$tn.string.getLengthUnitValue(_vm.itemHeight, \"px\")\n      : null\n  var g7 =\n    !_vm.disabled && _vm.maxCount > g4\n      ? _vm.$tn.string.getLengthUnitValue(_vm.itemWidth, \"px\")\n      : null\n  var g8 =\n    !_vm.disabled && _vm.maxCount > g4\n      ? _vm.$tn.string.getLengthUnitValue(_vm.itemHeight, \"px\")\n      : null\n  _vm.$mp.data = Object.assign(\n    {},\n    {\n      $root: {\n        l0: l0,\n        g4: g4,\n        g5: g5,\n        g6: g6,\n        g7: g7,\n        g8: g8,\n      },\n    }\n  )\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\babel-loader\\\\lib\\\\index.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--13-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\script.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-image-upload-drag.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\babel-loader\\\\lib\\\\index.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--13-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\script.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-image-upload-drag.vue?vue&type=script&lang=js&\"","<template>\r\n  <view v-if=\"!disabled\" class=\"tn-image-upload-class tn-image-upload\">\r\n    <movable-area\r\n      class=\"tn-image-upload__movable-area\"\r\n      :style=\"{\r\n        height: movableAreaHeight\r\n      }\"\r\n      @mouseenter=\"mouseEnterArea\"\r\n      @mouseleave=\"mouseLeaveArea\"\r\n    >\r\n      <block\r\n        v-for=\"(item, index) in lists\"\r\n        :key=\"item.id\"\r\n      >\r\n        <movable-view\r\n          class=\"tn-image-upload__movable-view\"\r\n          :style=\"{\r\n            width: $tn.string.getLengthUnitValue(width),\r\n            height: $tn.string.getLengthUnitValue(height),\r\n            zIndex: item.zIndex,\r\n            opacity: item.opacity,\r\n            \r\n          }\"\r\n          :x=\"item.x\"\r\n          :y=\"item.y\"\r\n          direction=\"all\"\r\n          :damping=\"40\"\r\n          :disabled=\"item.disabled\"\r\n          @change=\"movableChange($event, item)\"\r\n          @touchstart=\"movableStart(item)\"\r\n          @mousedown=\"movableStart(item)\"\r\n          @touchend=\"movableEnd(item)\"\r\n          @mouseup=\"movableEnd(item)\"\r\n          @longpress=\"movableLongPress(item)\"\r\n        >\r\n          <view\r\n            class=\"tn-image-upload__item tn-image-upload__item-preview\"\r\n            :style=\"{\r\n              width: $tn.string.getLengthUnitValue(itemWidth, 'px'),\r\n              height: $tn.string.getLengthUnitValue(itemHeight, 'px'),\r\n              transform: `scale(${item.scale})`\r\n            }\"\r\n          >\r\n            <!-- 删除按钮 -->\r\n            <view\r\n              v-if=\"deleteable\"\r\n              class=\"tn-image-upload__item-preview__delete\"\r\n              @tap.stop=\"deleteItem(index)\"\r\n              :style=\"{\r\n                borderTopColor: deleteBackgroundColor\r\n              }\"\r\n            >\r\n              <view\r\n                class=\"tn-image-upload__item-preview__delete--icon\"\r\n                :class=\"[`tn-icon-${deleteIcon}`]\"\r\n                :style=\"{\r\n                  color: deleteColor\r\n                }\"\r\n              ></view>\r\n            </view>\r\n            <!-- 进度条 -->\r\n            <tn-line-progress\r\n              v-if=\"showProgress && item.data.progress > 0 && !item.data.error\"\r\n              class=\"tn-image-upload__item-preview__progress\"\r\n              :percent=\"item.data.progress\"\r\n              :showPercent=\"false\"\r\n              :round=\"false\"\r\n              :height=\"8\"\r\n            ></tn-line-progress>\r\n            <!-- 重试按钮 -->\r\n            <view v-if=\"item.data.error\" class=\"tn-image-upload__item-preview__error-btn\" @tap.stop=\"retry(index)\">点击重试</view>\r\n            <!-- 图片信息 -->\r\n            <image\r\n              class=\"tn-image-upload__item-preview__image\"\r\n              :src=\"item.data.url || item.data.path\"\r\n              :mode=\"imageMode\"\r\n              @tap.stop=\"doPreviewImage(item.data.url || item.data.path, index)\"\r\n            ></image>\r\n          </view>\r\n        </movable-view>\r\n      </block>\r\n      \r\n      <!-- 添加按钮 -->\r\n      <view\r\n        v-if=\"maxCount > lists.length\"\r\n        class=\"tn-image-upload__add\"\r\n        :style=\"{\r\n          top: addBtn.y + 'px',\r\n          left: addBtn.x + 'px',\r\n          width: $tn.string.getLengthUnitValue(itemWidth, 'px'),\r\n          height: $tn.string.getLengthUnitValue(itemHeight, 'px')\r\n        }\"\r\n        @tap=\"selectFile\"\r\n      >\r\n        <!-- 添加按钮 -->\r\n        <view\r\n          class=\"tn-image-upload__item tn-image-upload__item-add\"\r\n          hover-class=\"tn-hover-class\"\r\n          hover-stay-time=\"150\"\r\n          :style=\"{\r\n            width: $tn.string.getLengthUnitValue(itemWidth, 'px'),\r\n            height: $tn.string.getLengthUnitValue(itemHeight, 'px')\r\n          }\"\r\n        >\r\n          <view class=\"tn-image-upload__item-add--icon tn-icon-add\"></view>\r\n          <view class=\"tn-image-upload__item-add__tips\">{{ uploadText }}</view>\r\n        </view>\r\n      </view>\r\n    </movable-area>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\n  export default {\r\n    name: 'tn-image-upload-drag',\r\n    props: {\r\n      // 已上传的文件列表\r\n      fileList: {\r\n        type: Array,\r\n        default() {\r\n          return []\r\n        }\r\n      },\r\n      // 上传图片地址\r\n      action: {\r\n        type: String,\r\n        default: ''\r\n      },\r\n      // 上传文件的字段名称\r\n      name: {\r\n        type: String,\r\n        default: 'file'\r\n      },\r\n      // 头部信息\r\n      header: {\r\n        type: Object,\r\n        default() {\r\n          return {}\r\n        }\r\n      },\r\n      // 携带的参数\r\n      formData: {\r\n        type: Object,\r\n        default() {\r\n          return {}\r\n        }\r\n      },\r\n      // 是否禁用\r\n      disabled: {\r\n        type: Boolean,\r\n        default: false\r\n      },\r\n      // 是否自动上传\r\n      autoUpload: {\r\n        type: Boolean,\r\n        default: true\r\n      },\r\n      // 最大上传数量\r\n      maxCount: {\r\n        type: Number,\r\n        default: 9\r\n      },\r\n      // 预览上传图片的裁剪模式\r\n      imageMode: {\r\n        type: String,\r\n        default: 'aspectFill'\r\n      },\r\n      // 点击图片是否全屏预览\r\n      previewFullImage: {\r\n        type: Boolean,\r\n        default: true\r\n      },\r\n      // 是否显示进度条\r\n      showProgress: {\r\n        type: Boolean,\r\n        default: true\r\n      },\r\n      // 是否显示删除按钮\r\n      deleteable: {\r\n        type: Boolean,\r\n        default: true\r\n      },\r\n      // 删除按钮图标\r\n      deleteIcon: {\r\n        type: String,\r\n        default: 'close'\r\n      },\r\n      // 删除按钮的背景颜色\r\n      deleteBackgroundColor: {\r\n        type: String,\r\n        default: ''\r\n      },\r\n      // 删除按钮的颜色\r\n      deleteColor: {\r\n        type: String,\r\n        default: ''\r\n      },\r\n      // 上传区域提示文字\r\n      uploadText: {\r\n        type: String,\r\n        default: '选择图片'\r\n      },\r\n      // 显示toast提示\r\n      showTips: {\r\n        type: Boolean,\r\n        default: true\r\n      },\r\n      // 预览图片和选择图片区域的宽度\r\n      width: {\r\n        type: Number,\r\n        default: 200\r\n      },\r\n      // 预览图片和选择图片区域的高度\r\n      height: {\r\n        type: Number,\r\n        default: 200\r\n      },\r\n      // 选择图片的尺寸\r\n      // 参考上传文档 https://uniapp.dcloud.io/api/media/image\r\n      sizeType: {\r\n        type: Array,\r\n        default() {\r\n          return ['original', 'compressed']\r\n        }\r\n      },\r\n      // 图片来源\r\n      sourceType: {\r\n        type: Array,\r\n        default() {\r\n          return ['album', 'camera']\r\n        }\r\n      },\r\n      // 是否可以多选\r\n      multiple: {\r\n        type: Boolean,\r\n        default: true\r\n      },\r\n      // 文件大小(byte)\r\n      maxSize: {\r\n        type: Number,\r\n        default: 10 * 1024 * 1024\r\n      },\r\n      // 允许上传的类型\r\n      limitType: {\r\n        type: Array,\r\n        default() {\r\n          return ['png','jpg','jpeg','webp','gif','image']\r\n        }\r\n      },\r\n      // 是否自定转换为json\r\n      toJson: {\r\n        type: Boolean,\r\n        default: true\r\n      },\r\n      // 上传前钩子函数，每个文件上传前都会执行\r\n      beforeUpload: {\r\n        type: Function,\r\n        default: null\r\n      },\r\n      // 删除文件前钩子函数\r\n      beforeRemove: {\r\n        type: Function,\r\n        default: null\r\n      },\r\n      index: {\r\n        type: [Number, String],\r\n        default: ''\r\n      }\r\n    },\r\n    computed: {\r\n      movableAreaHeight() {\r\n        if (this.lists.length < this.maxCount) {\r\n          return Math.ceil((this.lists.length + 1) / this.baseData.columns) * uni.upx2px(this.height) + 'px'\r\n        } else {\r\n          return Math.ceil(this.lists.length / this.baseData.columns) * uni.upx2px(this.height) + 'px'\r\n        }\r\n      },\r\n      itemWidth() {\r\n        return uni.upx2px(this.width) - (uni.upx2px(10) * 2)\r\n      },\r\n      itemHeight() {\r\n        return uni.upx2px(this.height) - (uni.upx2px(10) * 2)\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        lists: [],\r\n        uploading: false,\r\n        baseData: {\r\n          windowWidth: 0,\r\n          columns: 0,\r\n          dragItem: null,\r\n          widthPx: 0,\r\n          heightPx: 0\r\n        },\r\n        addBtn: {\r\n          x: 0,\r\n          y: 0\r\n        },\r\n        timer: null,\r\n        dragging: false\r\n      }\r\n    },\r\n    watch: {\r\n      // fileList: {\r\n      //   handler(val) {\r\n      //     val.map(value => {\r\n      //       // 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList时，\r\n      //       // 会触发watch，导致重新把原来的图片再次添加到this.lists\r\n      //       // 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true\r\n      //       let tmp = this.lists.some(listVal => {\r\n      //         return listVal.url === value.url\r\n      //       })\r\n      //       // 如果内部没有这张图片，则添加到内部\r\n      //       !tmp && this.lists.push({ url: value.url, error: false, progress: 100 })\r\n      //     })\r\n      //   },\r\n      //   immediate: true\r\n      // },\r\n      lists(val) {\r\n        this.$emit('on-list-change', this.sortList(), this.index)\r\n      }\r\n    },\r\n    created() {\r\n      this.baseData.windowWidth = uni.getSystemInfoSync().windowWidth\r\n    },\r\n    mounted() {\r\n      this.$nextTick(() => {\r\n        this.updateDragInfo()\r\n      })\r\n    },\r\n    methods: {\r\n      // 清除列表\r\n      clear() {\r\n        this.lists = []\r\n        this.updateAddBtnPositioin()\r\n      },\r\n      // 重新上传队列中上传失败所有文件\r\n      reUpload() {\r\n        this.uploadFile()\r\n      },\r\n      // 选择图片\r\n      selectFile() {\r\n        if (this.disabled) return\r\n        const {\r\n          name = '',\r\n          maxCount,\r\n          multiple,\r\n          maxSize,\r\n          sizeType,\r\n          lists,\r\n          camera,\r\n          compressed,\r\n          sourceType\r\n        } = this\r\n        let chooseFile = null\r\n        const newMaxCount = maxCount - lists.length\r\n        // 只选择图片的时候使用 chooseImage 来实现\r\n        chooseFile = new Promise((resolve, reject) => {\r\n          uni.chooseImage({\r\n            count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,\r\n            sourceType,\r\n            sizeType,\r\n            success: resolve,\r\n            fail: reject\r\n          })\r\n        })\r\n        chooseFile.then(res => {\r\n          let file = null\r\n          let listOldLength = lists.length\r\n          res.tempFiles.map((val, index) => {\r\n            if (!this.checkFileExt(val)) return\r\n            \r\n            // 是否超出最大限制数量\r\n            if (!multiple && index >= 1) return\r\n            if (val.size > maxSize) {\r\n              this.$emit('on-oversize', val, this.sortList(), this.index)\r\n              this.showToast('超出可允许文件大小')\r\n            } else {\r\n              if (maxCount <= lists.length) {\r\n                this.$emit('on-exceed', val, this.sortList(), this.index)\r\n                this.showToast('超出最大允许的文件数')\r\n                return\r\n              }\r\n              lists.push(this.handleDragListItem({\r\n                url: val.path,\r\n                progress: 0,\r\n                error: false,\r\n                file: val\r\n              }))\r\n              this.updateAddBtnPositioin()\r\n            }\r\n          })\r\n          this.$emit('on-choose-complete', this.sortList(), this.index)\r\n          if (this.autoUpload) this.uploadFile(listOldLength)\r\n        }).catch(err => {\r\n          this.$emit('on-choose-fail', err)\r\n        })\r\n      },\r\n      // 提示用户信息\r\n      showToast(message, force = false) {\r\n        if (this.showTips || force) {\r\n          this.$tn.message.toast(message)\r\n        }\r\n      },\r\n      // 手动上传，通过ref进行调用\r\n      upload() {\r\n        this.uploadFile()\r\n      },\r\n      // 对失败图片进行再次上传\r\n      retry(index) {\r\n        this.lists[index].data.progress = 0\r\n        this.lists[index].data.error = false\r\n        this.lists[index].data.response = null\r\n        this.$tn.message.loading('重新上传')\r\n        this.uploadFile(index)\r\n      },\r\n      // 上传文件\r\n      async uploadFile(index = 0) {\r\n        if (this.disabled) return\r\n        if (this.uploading) return\r\n        // 全部上传完成\r\n        if (index >= this.lists.length) {\r\n          this.$emit('on-uploaded', this.sortList(), this.index)\r\n          return\r\n        }\r\n        // 检查是否已经全部上传或者上传中\r\n        if (this.lists[index].data.progress === 100) {\r\n          this.lists[index].data.uploadTask = null\r\n          if (this.autoUpload) this.uploadFile(index + 1)\r\n          return\r\n        }\r\n        // 执行before-upload钩子\r\n        if (this.beforeUpload && typeof(this.beforeUpload) === 'function') {\r\n          // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this\r\n          // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文\r\n          // 因为upload组件可能会被嵌套在其他组件内，比如tn-form，这时this.$parent其实为tn-form的this，\r\n          // 非页面的this，所以这里需要往上历遍，一直寻找到最顶端的$parent，这里用了this.$u.$parent.call(this)\r\n          let beforeResponse = this.beforeUpload.bind(this.$tn.$parent.call(this))(index, this.lists)\r\n          // 判断是否返回了Promise\r\n          if (!!beforeResponse && typeof beforeResponse.then === 'function') {\r\n            await beforeResponse.then(res => {\r\n              // promise返回成功，不进行操作继续\r\n            }).catch(err => {\r\n              // 进入catch回调的话，继续下一张\r\n              return this.uploadFile(index + 1)\r\n            })\r\n          } else if (beforeResponse === false) {\r\n            // 如果返回flase，继续下一张图片上传\r\n            return this.uploadFile(index + 1)\r\n          } else {\r\n            // 为true的情况，不进行操作\r\n          }\r\n        }\r\n        // 检查上传地址\r\n        if (!this.action) {\r\n          this.showToast('请配置上传地址', true)\r\n          return\r\n        }\r\n        this.lists[index].data.error = false\r\n        this.uploading = true\r\n        // 创建上传对象\r\n        const task = uni.uploadFile({\r\n          url: this.action,\r\n          filePath: this.lists[index].data.url,\r\n          name: this.name,\r\n          formData: this.formData,\r\n          header: this.header,\r\n          success: res => {\r\n            // 判断啊是否为json字符串，将其转换为json格式\r\n            let data = this.toJson && this.$tn.test.jsonString(res.data) ? JSON.parse(res.data) : res.data\r\n            if (![200, 201, 204].includes(res.statusCode)) {\r\n              this.uploadError(index, data)\r\n            } else {\r\n              this.lists[index].data.response = data\r\n              this.lists[index].data.progress = 100\r\n              this.lists[index].data.error = false\r\n              this.$emit('on-success', data, index, this.sortList(), this.index)\r\n            }\r\n          },\r\n          fail: err => {\r\n            this.uploadError(index, err)\r\n          },\r\n          complete: res => {\r\n            this.$tn.message.closeLoading()\r\n            this.uploading = false\r\n            this.uploadFile(index + 1)\r\n            this.$emit('on-change', res, index, this.sortList(), this.index)\r\n          }\r\n        })\r\n        this.lists[index].uploadTask = task\r\n        task.onProgressUpdate(res => {\r\n          if (res.progress > 0) {\r\n            this.lists[index].data.progress = res.progress\r\n            this.$emit('on-progress', res, index, this.sortList(), this.index)\r\n          }\r\n        })\r\n      },\r\n      // 上传失败\r\n      uploadError(index, err) {\r\n        this.lists[index].data.progress = 0\r\n        this.lists[index].data.error = true\r\n        this.lists[index].data.response = null\r\n        this.showToast('上传失败，请重试')\r\n        this.$emit('on-error', err, index, this.sortList(), this.index)\r\n      },\r\n      // 删除一个图片\r\n      deleteItem(index) {\r\n        if (!this.deleteable) return\r\n        this.$tn.message.modal(\r\n          '提示',\r\n          '您确定要删除吗？',\r\n          async () => {\r\n            // 先检查是否有定义before-remove移除前钩子\r\n            // 执行before-remove钩子\r\n            if (this.beforeRemove && typeof(this.beforeRemove) === 'function') {\r\n              let beforeResponse = this.beforeRemove.bind(this.$tn.$parent.call(this))(index, this.lists)\r\n              // 判断是否返回promise \r\n              if (!!beforeResponse && typeof beforeResponse.then === 'function') {\r\n                await beforeResponse.then(res => {\r\n                  // promise返回成功不进行操作\r\n                  this.handlerDeleteItem(index)\r\n                }).catch(err => {\r\n                  this.showToast('删除操作被中断')\r\n                })\r\n              } else if (beforeResponse === false) {\r\n                this.showToast('删除操作被中断')\r\n              } else {\r\n                this.handlerDeleteItem(index)\r\n              }\r\n            } else {\r\n              this.handlerDeleteItem(index)\r\n            }\r\n          }, true)\r\n      },\r\n      // 移除文件操作\r\n      handlerDeleteItem(index) {\r\n        // 如果文件正在上传中，终止上传任务\r\n        if (this.lists[index].data.progress < 100 && this.lists[index].data.progress > 0) {\r\n          typeof this.lists[index].data.uploadTask !== 'undefined' && this.lists[index].data.uploadTask.abort()\r\n        }\r\n        this.remove(index)\r\n        this.$forceUpdate()\r\n        this.$emit('on-remove', index, this.sortList(), this.index)\r\n        this.showToast('删除成功')\r\n      },\r\n      // 移除文件，通过ref手动形式进行调用\r\n      remove(index) {\r\n        if (!this.deleteable) return\r\n        // 判断索引合法\r\n        if (index >= 0 && index < this.lists.length) {\r\n          let currentItemIndex = this.lists[index].index\r\n          this.lists.splice(index, 1)\r\n          // 重新排列列表信息\r\n          for (let item of this.lists) {\r\n            if (item.index > currentItemIndex) {\r\n              item.index -= 1\r\n              item.x = item.positionX * this.baseData.widthPx\r\n              item.y = item.positionY * this.baseData.heightPx\r\n              item.positionX = item.index % this.baseData.columns\r\n              item.positionY = Math.floor(item.index / this.baseData.columns)\r\n              this.$nextTick(() => {\r\n                item.x = item.positionX * this.baseData.widthPx\r\n                item.y = item.positionY * this.baseData.heightPx\r\n              })\r\n            }\r\n          }\r\n          \r\n          this.updateAddBtnPositioin()\r\n        }\r\n      },\r\n      // 预览图片\r\n      doPreviewImage(url, index) {\r\n        if (!this.previewFullImage) return\r\n        const images = this.lists.sort((l1, l2) => { return l1.index - l2.index}).map(item => item.data.url || item.data.path)\r\n        uni.previewImage({\r\n          urls: images,\r\n          current: url,\r\n          success: () => {\r\n            this.$emit('on-preview', url, this.sortList(), this.index)\r\n          },\r\n          fail: () => {\r\n            this.showToast('预览图片失败')\r\n          }\r\n        })\r\n      },\r\n      // 检查文件后缀是否合法\r\n      checkFileExt(file) {\r\n        // 是否为合法后缀\r\n        let noArrowExt = false\r\n        // 后缀名\r\n        let fileExt = ''\r\n        const reg = /.+\\./\r\n        \r\n        // #ifdef H5\r\n        fileExt = file.name.replace(reg, '').toLowerCase()\r\n        // #endif\r\n        // #ifndef H5\r\n        fileExt = file.path.replace(reg, '').toLowerCase()\r\n        // #endif\r\n        noArrowExt = this.limitType.some(ext => {\r\n          return ext.toLowerCase() === fileExt\r\n        })\r\n        if (!noArrowExt) this.showToast(`不支持${fileExt}格式的文件`)\r\n        return noArrowExt\r\n      },\r\n      \r\n      /********************* 拖拽处理 ********************/\r\n      \r\n      // 更新拖拽信息\r\n      updateDragInfo() {\r\n        this.baseData.widthPx = uni.upx2px(this.width)\r\n        this.baseData.heightPx = uni.upx2px(this.height)\r\n        \r\n        // 获取可移动区域的信息，用于判断当前有多少列\r\n        const query = uni.createSelectorQuery().in(this)\r\n        query.select('.tn-image-upload__movable-area').boundingClientRect()\r\n        query.exec((res) => {\r\n          if (!res) {\r\n            setTimeout(() => {\r\n              this.updateDragInfo()\r\n            }, 10)\r\n            return\r\n          }\r\n          this.baseData.columns = Math.floor(res[0].width / this.baseData.widthPx)\r\n          \r\n          // 初始化可拖拽列表信息\r\n          this.lists = []\r\n          this.fileList.forEach((item) => {\r\n            // 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList时，\r\n            // 会触发watch，导致重新把原来的图片再次添加到this.lists\r\n            // 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true\r\n            let tmp = this.lists.map(value => {\r\n              return value.data\r\n            }).some(listVal => {\r\n              return listVal.url === item.url\r\n            })\r\n            // 如果内部没有这张图片，则添加到内部\r\n            !tmp && this.lists.push(this.handleDragListItem({\r\n              url: item.url,\r\n              error: false,\r\n              progress: 100\r\n            }))\r\n          })\r\n          \r\n          // 更新添加按钮位置\r\n          this.updateAddBtnPositioin()\r\n        })\r\n      },\r\n      // 处理拖拽列表信息\r\n      handleDragListItem(item) {\r\n        const positionX = this.lists.length % this.baseData.columns\r\n        const positionY = Math.floor(this.lists.length / this.baseData.columns)\r\n        const x = positionX * this.baseData.widthPx\r\n        const y = positionY * this.baseData.heightPx\r\n        return {\r\n          id: this.unique(),\r\n          x,\r\n          y,\r\n          preX: x,\r\n          preY: y,\r\n          positionX,\r\n          positionY,\r\n          zIndex:1,\r\n          disabled: true,\r\n          opacity: 1,\r\n          scale: 1,\r\n          index: this.lists.length,\r\n          offset: 0,\r\n          moveEnd: false,\r\n          moving: false,\r\n          data: {\r\n            ...item\r\n          }\r\n        }\r\n      },\r\n      // 生成元素唯一id\r\n      unique(n = 6) {\r\n        let id = ''\r\n        for (let i = 0; i < n; i++) id += Math.floor(Math.random() * 10)\r\n        return 'tn_' + new Date().getTime() + id\r\n      },\r\n      // 更新添加按钮位置\r\n      updateAddBtnPositioin() {\r\n        if (this.lists.length >= this.maxCount) return\r\n        \r\n        this.addBtn.x = (this.lists.length % this.baseData.columns) * this.baseData.widthPx\r\n        this.addBtn.y = Math.floor(this.lists.length / this.baseData.columns) * this.baseData.heightPx\r\n      },\r\n      // 获取排序后数据\r\n      sortList() {\r\n        const list = this.lists.slice()\r\n        list.sort((l1, l2) => {\r\n          return l1.index - l2.index\r\n        })\r\n        return list.map(item => {\r\n          return item.data\r\n        })\r\n      },\r\n      mouseEnterArea () {\r\n        // #ifdef H5\r\n        this.lists.forEach(item => {\r\n          item.disabled = false\r\n        })\r\n        // #endif\r\n      },\r\n      mouseLeaveArea () {\r\n        // #ifdef H5\r\n        if (this.baseData.dragItem) {\r\n          this.lists.forEach(item => {\r\n            item.disabled = true\r\n            item.zIndex = 1\r\n            item.offset = 0\r\n            item.moveEnd = true\r\n            if (item.id === this.baseData.dragItem.id) {\r\n              if (this.timer) {\r\n                clearTimeout(this.timer)\r\n                this.timer = null\r\n              }\r\n              item.x = item.preX\r\n              item.y = item.preY\r\n              this.$nextTick(() => {\r\n                item.x = item.positionX * this.baseData.widthPx\r\n                item.y = item.positionY * this.baseData.heightPx\r\n                this.baseData.dragItem = null\r\n              })\r\n            }\r\n          })\r\n          this.dragging = false\r\n        }\r\n        // #endif\r\n      },\r\n      movableLongPress(item) {\r\n        // #ifndef H5\r\n          uni.vibrateShort()\r\n          // console.log(\"LongPress--------------------------------------------------------------\");\r\n          this.lists.forEach(value => {\r\n            value.moving = false\r\n          })\r\n          this.dragging = true\r\n          // 设置对应的元素允许拖动\r\n          const index = this.lists.findIndex(obj => {\r\n            return obj.id === item.id\r\n          })\r\n          item.disabled = false\r\n          item.opacity = 0.7\r\n          item.scale = 1.1\r\n          this.$set(this.lists, index, item)\r\n        // #endif\r\n      },\r\n      movableChange (e, item) {\r\n        if (!item || !this.dragging) return\r\n        // console.log(\"movableChange\");\r\n        item.moving = true\r\n        item.preX = e.detail.x\r\n        item.preY = e.detail.y\r\n        // console.log(item.preX, item.preY);\r\n        \r\n        if (e.detail.source === 'touch') {\r\n          if (!item.moveEnd) {\r\n            item.offset = Math.sqrt(\r\n              Math.pow(item.preX - item.positionX * this.baseData.widthPx, 2) + \r\n              Math.pow(item.preY - item.positionY * this.baseData.heightPx, 2))\r\n          }\r\n          let x = Math.floor((e.detail.x + this.baseData.widthPx / 2) / this.baseData.widthPx)\r\n          if (x > this.baseData.columns) return\r\n          let y = Math.floor((e.detail.y + this.baseData.heightPx / 2) / this.baseData.heightPx)\r\n          let index = this.baseData.columns * y + x\r\n          if (item.index !== index && index < this.lists.length) {\r\n            for (let obj of this.lists) {\r\n              if (item.index > index && obj.index >= index && obj.index < item.index) {\r\n                this.updateItemPosition(obj, 1)\r\n              } else if (item.index < index && obj.index <= index && obj.index > item.index) {\r\n                this.updateItemPosition(obj, -1)\r\n              } else if (item.id != obj.id) {\r\n                // obj.offset = 0\r\n                // console.log(obj.moving);\r\n                // if (!obj.moving) {\r\n                //   obj.preX = obj.positionX * this.baseData.widthPx\r\n                //   obj.preY = obj.positionY * this.baseData.heightPx\r\n                //   console.log(\"moving\", obj.id, obj.preX, obj.preY);\r\n                // }\r\n                // obj.x = obj.preX\r\n                // obj.y = obj.preY\r\n                // // console.log(obj.id, obj.preX, obj.preY);\r\n                // this.$nextTick(() => {\r\n                //   obj.x = obj.positionX * this.baseData.widthPx\r\n                //   obj.y = obj.positionY * this.baseData.heightPx\r\n                // })\r\n              }\r\n            }\r\n            item.index = index\r\n            item.positionX = x\r\n            item.positionY = y\r\n            // TODO 发送事件\r\n          }\r\n        }\r\n      },\r\n      movableStart (item) {\r\n        // console.log(\"movableStart\");\r\n        this.lists.forEach(item => {\r\n          item.zIndex = 1\r\n          // #ifdef H5\r\n          item.disabled = false\r\n          // #endif\r\n        })\r\n        item.zIndex = 10\r\n        item.moveEnd = false\r\n        this.baseData.dragItem = item\r\n        // #ifdef H5\r\n        this.dragging =true\r\n        this.timer = setTimeout(() => {\r\n          item.opacity = 0.7\r\n          item.scale = 1.1\r\n          clearTimeout(this.timer)\r\n          this.timer = null\r\n        }, 200)\r\n        // #endif\r\n      },\r\n      movableEnd (item) {\r\n        if (!this.dragging) return\r\n        // console.log(\"movableEnd\");\r\n        const index = this.lists.findIndex(obj => {\r\n          return obj.id === item.id\r\n        })\r\n        if (!item.moving) {\r\n          item.preX = item.positionX * this.baseData.widthPx\r\n          item.preY = item.positionY * this.baseData.heightPx\r\n        }\r\n        item.x = item.preX\r\n        item.y = item.preY\r\n        item.offset = 0\r\n        item.moveEnd = true\r\n        item.moving = false\r\n        item.disabled = true\r\n        // console.log(item.x, item.y);\r\n        // console.log(item.id, item.moving);\r\n        // this.$set(this.lists, index, item)\r\n        // this.lists[index] = item\r\n        // console.log(this.lists[index]);\r\n        this.lists.forEach(listValue => {\r\n          listValue.moving = false\r\n          listValue.disabled = true\r\n        })\r\n        this.$nextTick(() => {\r\n          item.x = item.positionX * this.baseData.widthPx\r\n          item.y = item.positionY * this.baseData.heightPx\r\n          item.opacity = 1\r\n          item.scale = 1\r\n          this.baseData.dragItem = null\r\n          this.dragging = false\r\n          // console.log(item.x, item.y);\r\n          this.$set(this.lists, index, item)\r\n        })\r\n        this.$emit('sort-list', this.sortList())\r\n      },\r\n      // 更新图片位置信息\r\n      updateItemPosition(item, offset) {\r\n        const index = this.lists.findIndex(obj => {\r\n          return obj.id === item.id\r\n        })\r\n        item.index += offset\r\n        item.offset = 0\r\n        item.positionX = item.index % this.baseData.columns\r\n        item.positionY = Math.floor(item.index / this.baseData.columns)\r\n        if (!item.moving) {\r\n          item.preX = item.positionX * this.baseData.widthPx\r\n          item.preY = item.positionY * this.baseData.heightPx\r\n        }\r\n        item.x = item.preX\r\n        item.y = item.preY\r\n        // console.log(\"updateItemPosition\", item.id, item.preX, item.preY);\r\n        // this.$set(this.lists, index, item)\r\n        this.$nextTick(() => {\r\n          item.x = item.positionX * this.baseData.widthPx\r\n          item.y = item.positionY * this.baseData.heightPx\r\n          this.$set(this.lists, index, item)\r\n        })\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n  \r\n  .tn-image-upload {\r\n    position: relative;\r\n    \r\n    &__movable-area {\r\n      width: 100%;\r\n    }\r\n    \r\n    &__movable-view {\r\n      border-radius: 10rpx;\r\n      overflow: hidden;\r\n    }\r\n    \r\n    &__item {\r\n      /* #ifndef APP-NVUE */\r\n      display: flex;\r\n      /* #endif */\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: 200rpx;\r\n      height: 200rpx;\r\n      background-color: transparent;\r\n      position: relative;\r\n      border-radius: 10rpx;\r\n      overflow: hidden;\r\n      \r\n      &-preview {\r\n        border: 1rpx solid $tn-border-solid-color;\r\n        \r\n        &__delete {\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          position: absolute;\r\n          top: 0;\r\n          right: 0;\r\n          z-index: 10;\r\n          border-top: 60rpx solid;\r\n          border-left: 60rpx solid transparent;\r\n          border-top-color: $tn-color-red;\r\n          width: 0rpx;\r\n          height: 0rpx;\r\n          \r\n          &--icon {\r\n            position: absolute;\r\n            top: -50rpx;\r\n            right: 6rpx;\r\n            color: #FFFFFF;\r\n            font-size: 24rpx;\r\n            line-height: 1;\r\n          }\r\n        }\r\n        \r\n        &__progress {\r\n          position: absolute;\r\n          width: auto;\r\n          bottom: 0rpx;\r\n          left: 0rpx;\r\n          right: 0rpx;\r\n          z-index: 9;\r\n          /* #ifdef MP-WEIXIN */\r\n          display: inline-flex;\r\n          /* #endif */\r\n        }\r\n        \r\n        &__error-btn {\r\n          position: absolute;\r\n          bottom: 0;\r\n          left: 0;\r\n          right: 0;\r\n          background-color: $tn-color-red;\r\n          color: #FFFFFF;\r\n          font-size: 20rpx;\r\n          padding: 8rpx 0;\r\n          text-align: center;\r\n          z-index: 9;\r\n          line-height: 1;\r\n        }\r\n        \r\n        &__image {\r\n          display: block;\r\n          width: 100%;\r\n          height: 100%;\r\n          border-radius: 10rpx;\r\n        }\r\n      }\r\n      \r\n      &-add {\r\n        flex-direction: column;\r\n        color: $tn-content-color;\r\n        font-size: 26rpx;\r\n        \r\n        &--icon {\r\n          font-size: 40rpx;\r\n        }\r\n        \r\n        &__tips {\r\n          margin-top: 20rpx;\r\n          line-height: 40rpx;\r\n        }\r\n      }\r\n    }\r\n    \r\n    &__add {\r\n      background-color: $tn-font-holder-color;\r\n      position: absolute;\r\n      // margin: 10rpx;\r\n      // margin-left: 0;\r\n    }\r\n  }\r\n</style>\r\n","import mod from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\mini-css-extract-plugin\\\\dist\\\\loader.js??ref--8-oneOf-1-0!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\css-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\stylePostLoader.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-2!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\postcss-loader\\\\src\\\\index.js??ref--8-oneOf-1-3!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\sass-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-4!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-5!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-image-upload-drag.vue?vue&type=style&index=0&id=4c370648&lang=scss&scoped=true&\"; export default mod; export * from \"-!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\mini-css-extract-plugin\\\\dist\\\\loader.js??ref--8-oneOf-1-0!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\css-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-1!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\loaders\\\\stylePostLoader.js!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-2!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\postcss-loader\\\\src\\\\index.js??ref--8-oneOf-1-3!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\sass-loader\\\\dist\\\\cjs.js??ref--8-oneOf-1-4!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\webpack-preprocess-loader\\\\index.js??ref--8-oneOf-1-5!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\vue-cli-plugin-uni\\\\packages\\\\vue-loader\\\\lib\\\\index.js??vue-loader-options!F:\\\\HBuilderX.3.5.3.20220729\\\\HBuilderX\\\\plugins\\\\uniapp-cli\\\\node_modules\\\\@dcloudio\\\\webpack-uni-mp-loader\\\\lib\\\\style.js!./tn-image-upload-drag.vue?vue&type=style&index=0&id=4c370648&lang=scss&scoped=true&\"","// extracted by mini-css-extract-plugin\n    if(module.hot) {\n      // 1713834081142\n      var cssReload = require(\"F:/HBuilderX.3.5.3.20220729/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js\")(module.id, {\"hmr\":true,\"publicPath\":\"../../\",\"locals\":false});\n      module.hot.dispose(cssReload);\n      module.hot.accept(undefined, cssReload);\n    }\n  "],"sourceRoot":""}