{"version":3,"sources":["webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue?14ae","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue?fc01","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue?2ea7","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue?8079","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?e341","webpack:///E:/云商会/云商会/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue?67fa"],"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 // 1716270633467\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":""}