2 lines
9.9 KiB
JavaScript
2 lines
9.9 KiB
JavaScript
import{V as e,u as t,o as i,c as s,w as a,a as o,v as l,x as m,y as r,h as d,F as n,E as h,b as c,A as g,J as u,i as p,d as f,W as y,X as x,k as v,Y as I,Z as L,Q as w,_ as S,s as k,a0 as T,a1 as b,g as z,a2 as D,a3 as N,j as P,G as _}from"./index.953fb5a2.js";import{_ as B}from"./uni-icons.9a92e175.js";import{r as A}from"./watermark.5346bec0.js";import{_ as C}from"./bf.ab99e8ff.js";import{_ as $}from"./plugin-vue_export-helper.21dcd24c.js";var E=$({components:{zmmUploadImageDrag:$({emits:["itemclick","update:imgList","deleteImage","change","moveEndList"],props:{imgList:{type:Array,default:function(){return[]}},imgSize:{type:Number},imgPadding:{type:Number},rowNum:{type:Number},imgRadius:{type:Number}},components:{},data:()=>({showDelete:!1,touchobj:null,deleteType:!1,addJump:!1,areaBoxInfo:{},x:0,y:0,selectIdx:null,moveSrc:null,areaBoxTop:0,hoverImgIdx:"",inBoxXY:{},curHoverBoxMove:{x:0,y:0}}),watch:{hoverImgIdx(t){let i=this.selectIdx,s=parseInt(t.split("img")[1]);if(this.imgList[i]){let t=this.imgList[i].y/e(this.imgSize),a=this.imgList[i].x/e(this.imgSize),o=this.imgList[s].y/e(this.imgSize),l=this.imgList[s].x/e(this.imgSize),m=-this.imgSize*(l-a),r=-this.imgSize*(o-t);this.curHoverBoxMove={x:m,y:r}}},imgList:{deep:!0,immediate:!1,handler(e){this.$nextTick((()=>{this.setImgXy()}))}}},methods:{itemclick(e,t){this.$emit("itemclick",e,t)},moveHandle(){},deleteImage:function(e){var t=e,i=this.imgList[t];this.imgList.splice(t,1),this.$emit("deleteImage",i)},onChange(e){var t=(this.imgSize*this.rowNum-80)/2;e.detail.y>t?this.deleteType=!0:this.deleteType=!1,this.showDelete=!0,this.$emit("change",e)},tstr(e,t){this.touchobj=this.imgList[e],this.addJump=!0,this.getDomInfo("areaBox",(i=>{this.areaBoxInfo=i;let s=this.areaBoxInfo.top,a=this.areaBoxInfo.left;this.x=this.imgList[e].x,this.y=this.imgList[e].y,this.moveSrc=this.imgList[e],this.selectIdx=e;var o=t.changedTouches[0].clientX-a,l=t.changedTouches[0].clientY-s;this.inBoxXY={x:o-this.imgList[e].x,y:l-this.imgList[e].y}}))},tsmo(e){let t=this.areaBoxInfo.top,i=this.areaBoxInfo.left,s=this.imgSize;var a=e.changedTouches[0].clientX-i,o=e.changedTouches[0].clientY-t;this.x=a-this.inBoxXY.x,this.y=o-this.inBoxXY.y,this.imgList.forEach(((e,t)=>{a>e.x&&a<e.x+s&&o>e.y&&o<e.y+s&&(this.hoverImgIdx="img"+t)}))},toend(e){if(this.addJump=!1,this.deleteType)this.deleteImage(this.selectIdx);else{let e=this.selectIdx,t=parseInt(this.hoverImgIdx.split("img")[1]);""!==this.hoverImgIdx&&e!==t&&(this.imgList[e]=this.imgList[t],this.imgList[t]=this.moveSrc,this.$emit("moveEndList",this.imgList))}this.moveSrc="",this.hoverImgIdx="",this.selectIdx=null,this.deleteType=!1,this.showDelete=!1,this.$nextTick((()=>{this.setImgXy()}))},getDomInfo(e,i){t().in(this).select("#"+e).boundingClientRect().exec((function(e){i(e[0])}))},setImgXy(){this.getDomInfo("areaBox",(e=>{this.areaBoxInfo=e,this.imgList.forEach(((t,i)=>{this.getDomInfo("img"+i,(i=>{t.x=i.left-e.left})),this.getDomInfo("img"+i,(i=>{t.y=i.top-e.top}))}))}))}},mounted(){this.setImgXy()}},[["render",function(e,t,I,L,w,S){const k=p,T=f,b=y,z=x,D=v;return i(),s(T,{onTouchmove:u(S.moveHandle,["stop","prevent"]),class:"moveWrap"},{default:a((()=>[o(z,{class:"movarea",ref:"areaBox",id:"areaBox",style:l({height:I.imgSize*I.rowNum+200+"rpx"})},{default:a((()=>[o(T,{class:"imgBox",style:l({height:I.imgSize*I.rowNum+"rpx"})},{default:a((()=>[(i(!0),m(n,null,r(I.imgList,((e,t)=>(i(),s(T,{id:"img"+t,class:"imgItem",key:t,style:l({transition:w.addJump?" all 0.5s":"",opacity:t===w.selectIdx?"0":"1",width:I.imgSize+"rpx",height:I.imgSize+"rpx",borderRadius:I.imgRadius+"rpx",padding:I.imgPadding+"rpx",left:w.hoverImgIdx==="img"+t?w.curHoverBoxMove.x+"rpx":"",top:w.hoverImgIdx==="img"+t?w.curHoverBoxMove.y+"rpx":""})},{default:a((()=>[o(T,{class:"imgItem-img",onClick:i=>S.itemclick(e,t),onTouchstart:e=>S.tstr(t,e),onTouchmove:S.tsmo,onTouchend:S.toend},{default:a((()=>[e.videoUrl?(i(),s(k,{key:0,class:"imgItem-play",src:C,mode:"aspectFill"})):d("",!0),o(k,{style:l({borderRadius:I.imgRadius+"rpx"}),ref_for:!0,ref:"img"+t,src:e.url,mode:"aspectFill"},null,8,["style","src"])])),_:2},1032,["onClick","onTouchstart","onTouchmove","onTouchend"])])),_:2},1032,["id","style"])))),128)),h(e.$slots,"default",{},void 0,!0)])),_:3},8,["style"]),w.moveSrc?(i(),s(b,{key:0,animation:!1,class:"moveV",x:w.x,y:w.y,direction:"all",onChange:S.onChange,style:l({width:I.imgSize+"rpx",height:I.imgSize+"rpx",padding:I.imgPadding+"rpx"})},{default:a((()=>[w.moveSrc.videoUrl?(i(),s(k,{key:0,class:"imgItem-play",src:C,mode:"aspectFill"})):d("",!0),o(k,{style:l({borderRadius:I.imgRadius+"rpx"}),src:w.moveSrc.url,mode:"aspectFill"},null,8,["style","src"])])),_:1},8,["x","y","onChange","style"])):d("",!0)])),_:3},8,["style"]),w.showDelete?(i(),s(T,{key:0},{default:a((()=>[o(T,{class:g(["delete",{deleteType:w.deleteType}])},{default:a((()=>[w.deleteType?(i(),s(D,{key:0},{default:a((()=>[c("松开删除")])),_:1})):(i(),s(D,{key:1},{default:a((()=>[c("拖动到此处删除")])),_:1}))])),_:1},8,["class"])])),_:1})):d("",!0)])),_:3},8,["onTouchmove"])}],["__scopeId","data-v-7f798ec8"]])},name:"zmm-upload-image",emits:["update:modelValue","deleteImage","allComplete","oneComplete"],props:{modelValue:{type:[Array]},chooseType:{type:String,default:"chooseImage"},imgSize:{type:Number,default:214},imgPadding:{type:Number,default:6},imgRadius:{type:Number,default:4},fileList:{type:Array,default:()=>[]},rowNumber:{type:Number,default:3},showAdd:{type:Boolean,default:!0},show:{type:Boolean,default:!0},fileAction:{type:String,default:I.baseUrl+"/file/upload"},videoAction:{type:String,default:I.baseUrl+"/file/uploadVideo"},formData:{type:Object},header:{type:Object,default:()=>({Authorization:L("Authorization"),device:L("device"),version:L("version")})},limit:{type:Number,default:9},fileKey:{type:String,default:"file"}},data:()=>({key:0,isDestroyed:!1,showUploadProgress:!0}),watch:{modelValue(e){console.log(e)},fileList(e){this.key++},rows(e){this.key++}},mounted:function(){},destroyed:function(){this.isDestroyed=!0},computed:{rows(){var e=this.showAdd&&this.fileList.length<this.limit?1:0;return Math.ceil((this.fileList.length+e)/this.rowNumber)}},methods:{itemclick(e,t){if(e.videoUrl)this.$fc.plusDownload({onlinePath:e.videoUrl}).then((e=>{this.$fc.plusOpenFile({filePath:e})}));else{var i=[];for(t=0;t<this.fileList.length;t++){var s=this.fileList[t];s.videoUrl||i.push(s.url)}this.previewImage(i,t)}},chooseTap(){switch(this.chooseType){case"chooseImage":this.selectImage();break;case"chooseVideo":this.selectVideo();break;case"chooseMedia":w({itemList:["图片","视频"],success:e=>{switch(e.tapIndex){case 0:this.selectImage();break;case 1:this.selectVideo()}}})}},selectImage:function(){var e=this;e.fileList||(e.fileList=[]),S({count:e.limit?e.limit-e.fileList.length:999,sourceType:["album","camera"],sizeType:["original","compressed"],success:function(t){var i=t.tempFilePaths;if(e.limit){var s=e.limit-e.fileList.length;if(s<i.length)return void k({title:"图片总数限制为"+e.limit+"张，当前还可以选"+s+"张",icon:"none",mask:!1,duration:2e3})}if(e.fileAction){k({title:"上传进度：0/"+i.length,icon:"none",mask:!1});var a=e.fileList.length-i.length,o=[],l=e.fileKey?e.fileKey:"upload-images",m=0;for(let t=0;t<i.length;t++)o.push(new Promise(((s,o)=>{let r=a+t;T({url:e.fileAction,fileType:"image",header:e.header,formData:e.formData,filePath:i[t],name:l,success:function(t){if(200===t.statusCode){if(e.isDestroyed)return;m++,e.showUploadProgress&&k({title:"上传进度："+m+"/"+i.length,icon:"none",mask:!1,duration:500});var a=JSON.parse(t.data);e.$emit("oneComplete",{name:a.data.fileName,url:a.data.fullPath,type:"IMAGE"},e.chooseType),s(t.data)}else console.log("fail to upload image:"+t.data),o("fail to upload image:"+r)},fail:function(e){k({title:"上传失败请检查网络",icon:"none"}),console.log("fail to upload image:"+e),o("fail to upload image:"+r)}})})));Promise.all(o).then((t=>{if(!e.isDestroyed){var i=[];for(let a=0;a<t.length;a++){var s=JSON.parse(t[a]);e.fileList.push({name:s.data.fileName,url:s.data.fullPath,type:"IMAGE"}),i.push({name:s.data.fileName,url:s.data.fullPath,type:"IMAGE"})}e.$emit("allComplete",i,e.chooseType)}}))}else{for(let t=0;t<i.length;t++)e.fileList.push({name:"avatar"+t+".jpg",url:"图片地址"})}}})},selectVideo:function(){var e=this;e.fileList||(e.fileList=[]),b({sourceType:["album","camera"],compressed:!0,success:function(t){var i;e.showUploadProgress&&z({title:"上传中..."}),(i=t,new Promise(((t,s)=>{T({url:e.videoAction,fileType:"video",header:e.header,formData:e.formData,filePath:i.tempFilePath,name:e.fileKey,success:function(i){if(200===i.statusCode){if(e.isDestroyed)return;var a=JSON.parse(i.data),o={name:a.data.fileName,videoUrl:a.data.fullPath,url:a.data.screenShot,type:"VIDEO"};e.$emit("oneComplete",{name:a.data.fileName,videoUrl:a.data.fullPath,url:a.data.screenShot,type:"VIDEO"},e.chooseType),t(o)}else s(i)},fail:function(e){k({title:"上传失败请检查网络",icon:"none"}),s(e)}})}))).then((t=>{D(),e.fileList.push(t),e.$emit("allComplete",t,e.chooseType)}))}})},deleteImage:function(e){this.$emit("deleteImage",e)},previewImage:function(e,t){N({current:t,indicator:"number",loop:!0,urls:e})}}},[["render",function(e,t,m,r,n,h){const c=A(P("uni-icons"),B),g=f,u=_("zmm-upload-image-drag");return m.show?(i(),s(g,{key:0,class:"zmm-upload-image"},{default:a((()=>[(i(),s(u,{key:n.key,rowNum:h.rows,imgRadius:m.imgRadius,imgSize:m.imgSize,imgPadding:m.imgPadding,imgList:m.fileList,onDeleteImage:h.deleteImage,onItemclick:h.itemclick},{default:a((()=>[m.showAdd&&m.fileList.length<m.limit?(i(),s(g,{key:0,onClick:h.chooseTap,style:l({width:m.imgSize+"rpx",height:m.imgSize+"rpx",padding:m.imgPadding+"rpx"}),class:"zmm-upload-image-item-slot"},{default:a((()=>[o(g,{class:"zmm-upload-image-item-slotIcon"},{default:a((()=>[o(c,{type:"plusempty",color:"#6E6E6E",size:"24"})])),_:1})])),_:1},8,["onClick","style"])):d("",!0)])),_:1},8,["rowNum","imgRadius","imgSize","imgPadding","imgList","onDeleteImage","onItemclick"]))])),_:1})):d("",!0)}],["__scopeId","data-v-cb064eba"]]);export{E as _};
|