2 lines
8.7 KiB
JavaScript
2 lines
8.7 KiB
JavaScript
import{d as K,q as ne,r as I,n as ie,h as X,c as Y,a as u,b as Q,u as r,i as E,t as V,N as v,e as w,w as L,x as j,R as Z,F,G as P,B as R,a5 as N,a4 as q,E as ae,X as ee,Y as te,aa as fe,p as ce,g as pe,_ as de,y as G,z as J}from"./index-4dcc0234.js";/* empty css *//* empty css */import"./el-form-item-4ed993c7.js";import{_ as re}from"./index.vue_vue_type_script_setup_true_lang-9285296e.js";import{_ as ue}from"./index.vue_vue_type_script_setup_true_lang-a631d3b2.js";/* empty css */import{_ as me}from"./index-742b412a.js";import{u as he}from"./diy-06b37a1b.js";const _e=W=>(ce("data-v-21029794"),W=W(),pe(),W),ge={key:0},ve={class:"text-primary p-[4px]"},xe={key:1},be={class:"flex"},ye=["id","onMousedown"],we=_e(()=>u("span",{class:"p-[4px]"},"|",-1)),ke=["onMousedown"],Te=["onMousedown"],Ce=["onMousedown"],Me=["onMousedown"],Ve={class:"mb-[10px] text-lg text-black"},He={class:"overflow-y-auto h-[300px]"},Xe={key:0,class:"mb-[16px]"},Ye={class:"flex items-center"},Le={class:"dialog-footer"},Se=K({__name:"index",props:{modelValue:{type:String,default:""}},emits:["update:modelValue"],setup(W,{expose:z,emit:b}){const O=W,S=ne({get(){return O.modelValue},set(x){b("update:modelValue",x)}}),_=I(!1),m=I(400),T=I(400),$=I(4),p=ie([]),U=()=>{let x=p.length%$.value*100,i=Math.floor(p.length/$.value)*100;i>=m.value&&(i=0,x=0),p.push({left:x,top:i,width:100,height:100,unit:"px",link:{name:""}})},B=(x,i)=>{const d=document.getElementById("box_"+i),o=x.clientX-d.offsetLeft,H=x.clientY-d.offsetTop;document.onmousemove=function(g){d.style.left=g.clientX-o+"px",d.style.top=g.clientY-H+"px",g.clientX-o<0&&(d.style.left=0),g.clientX-o>m.value-d.offsetWidth&&(d.style.left=m.value-d.offsetWidth+"px"),g.clientY-H<0&&(d.style.top=0),g.clientY-H>T.value-d.offsetHeight&&(d.style.top=T.value-d.offsetHeight+"px"),p[i].left=d.offsetLeft,p[i].top=d.offsetTop,p[i].width=d.offsetWidth,p[i].height=d.offsetHeight,p[i].unit="px"},document.onmouseup=function(g){document.onmousemove=null}},D=(x,i)=>{const d=x;d.stopPropagation();const o=document.getElementById("box_"+i),H=x.target.className,g=o.offsetWidth,A=o.offsetHeight,k=d.clientX,c=d.clientY,f=o.offsetLeft,a=o.offsetTop,s=50,l=50;document.onmousemove=function(le){const h=le;if(H=="box1"){let e=g-(h.clientX-k);const C=m.value;let t=A-(h.clientY-c);const M=T.value-a;let n=f+(h.clientX-k),y=a+(h.clientY-c);e<s&&(e=s),e>C&&(e=C),t<l&&(t=l),t>M&&(t=M),f==0&&a==0?e==s&&t==l?(n=s,y=l):e==s&&t>l?n=s:e>s&&t==l&&(y=l):f==0&&a>0?e==s&&t==l||e==s&&t>l?(n=s,y=o.offsetTop):e>s&&t==l&&(y=o.offsetTop):f>0&&a==0?e==s&&t==l?(n=o.offsetLeft,y=o.offsetTop):e==s&&t>l?(n=o.offsetLeft,y=0):e>s&&t==l&&(y=o.offsetTop):f>0&&a>0&&(e==s&&t==l||e==s&&t>l?(n=o.offsetLeft,y=o.offsetTop):e>s&&t==l&&(y=o.offsetTop)),n<0&&(n=0,e=g-(h.clientX-k)+(f+(h.clientX-k))),y<0&&(y=0,t=a+(h.clientY-c)+(A-(h.clientY-c))),o.style.width=e+"px",o.style.height=t+"px",o.style.left=n+"px",o.style.top=y+"px"}else if(H=="box2"){let e=g+(h.clientX-k);const C=m.value-f;let t=A-(h.clientY-c);const M=T.value-a;let n=a+(h.clientY-c);e<s&&(e=s),e>C&&(e=C),t<l&&(t=l),t>M&&(t=M),f==0&&a==0?e==s&&t==l?n=l:e==s&&t>l||e>s&&t==l&&(n=l):f==0&&a>0?(e==s&&t==l||e==s&&t>l||e>s&&t==l)&&(n=o.offsetTop):f>0&&a==0?e==s&&t==l?n=o.offsetTop:e==s&&t>l?n=0:e>s&&t==l&&(n=o.offsetTop):f>0&&a>0&&(e==s&&t==l||e==s&&t>l||e>s&&t==l)&&(n=o.offsetTop),n<0&&(n=0,t=a+(h.clientY-c)+(A-(h.clientY-c))),o.style.width=e+"px",o.style.height=t+"px",o.style.top=n+"px"}else if(H=="box3"){let e=g-(h.clientX-k);const C=m.value;let t=A+(h.clientY-c);const M=T.value-a;let n=f+(h.clientX-k);e<s&&(e=s),e>C&&(e=C),t<l&&(t=l),t>M&&(t=M),f==0&&a==0||f==0&&a>0?(e==s&&t==l||e==s&&t>l)&&(n=s):f>0&&a==0?(e==s&&t==l||e==s&&t>l)&&(n=o.offsetLeft):f>0&&a>0&&(e==s&&t==l||e==s&&t>l)&&(n=o.offsetLeft),n<0&&(n=0,e=g-(h.clientX-k)+(f+(h.clientX-k))),o.style.width=e+"px",o.style.height=t+"px",o.style.left=n+"px"}else if(H=="box4"){let e=g+(h.clientX-k);const C=m.value-f;let t=A+(h.clientY-c);const M=T.value-a;e<s&&(e=s),e>C&&(e=C),t<l&&(t=l),t>M&&(t=M),o.style.width=e+"px",o.style.height=t+"px"}p[i].left=o.offsetLeft,p[i].top=o.offsetTop,p[i].width=o.offsetWidth,p[i].height=o.offsetHeight,p[i].unit="px"},document.onmouseup=function(){document.onmousemove=null,document.onmouseup=null}},oe=()=>{if(!S.value.imageUrl){q({type:"warning",message:`${v("imageUrlTip")}`});return}Object.keys(S.value.heatMapData).length?p.splice(0,p.length,...S.value.heatMapData):(p.splice(0,p.length),U()),_.value=!0},se=()=>{let x=!0;for(let i=0;i<p.length;i++)if(!p[i].link.title){q({type:"warning",message:v("selectedHotArea")+(i+1)+v("hotAreaLink")}),x=!1;break}x&&(p.forEach((i,d)=>{const o=document.getElementById("box_"+d);i.width=parseFloat(o.offsetWidth/m.value*100).toFixed(2),i.height=parseFloat(o.offsetHeight/T.value*100).toFixed(2),i.left=parseFloat(o.offsetLeft/m.value*100).toFixed(2),i.top=parseFloat(o.offsetTop/T.value*100).toFixed(2),i.unit="%"}),S.value.heatMapData=p,_.value=!1)};return z({showDialog:_}),(x,i)=>{const d=ae,o=ue,H=re,g=ee,A=te,k=fe;return X(),Y("div",null,[u("div",{onClick:oe},[Q(x.$slots,"default",{},()=>[r(S).heatMapData.length?(X(),Y("div",ge,[E(V(r(v)("selected")),1),u("span",ve,V(r(S).heatMapData.length),1),E(V(r(v)("selectedAfterHotArea")),1)])):(X(),Y("div",xe,V(r(v)("addHotArea")),1))],!0)]),w(k,{modelValue:_.value,"onUpdate:modelValue":i[1]||(i[1]=c=>_.value=c),title:r(v)("hotAreaSet"),width:"45%","close-on-press-escape":!1,"destroy-on-close":!0,"close-on-click-modal":!1},{footer:L(()=>[u("span",Le,[w(d,{onClick:i[0]||(i[0]=c=>_.value=!1)},{default:L(()=>[E(V(r(v)("cancel")),1)]),_:1}),w(d,{type:"primary",onClick:se},{default:L(()=>[E(V(r(v)("confirm")),1)]),_:1})])]),default:L(()=>[u("div",be,[u("div",{class:"content-box relative bg-cover bg-gray-100 border border-dashed border-gray-500",style:j({backgroundImage:"url("+r(Z)(r(S).imageUrl)+")",width:m.value+"px",height:T.value+"px"})},[(X(!0),Y(F,null,P(p,(c,f)=>(X(),Y("div",{id:"box_"+f,key:f,class:"area-box cursor-move border border-solid border-[#ccc] w-[100px] h-[100px] absolute top-0 left-0 select-none p-[5px]",style:j({left:c.left+c.unit,top:c.top+c.unit,width:c.width+c.unit,height:c.height+c.unit}),onMousedown:a=>B(a,f)},[u("span",null,V(f+1),1),c.link.title?(X(),Y(F,{key:0},[we,u("span",null,V(c.link.title),1)],64)):R("",!0),u("span",{class:"box1",onMousedown:N(a=>D(a,f),["stop"])},null,40,ke),u("span",{class:"box2",onMousedown:N(a=>D(a,f),["stop"])},null,40,Te),u("span",{class:"box3",onMousedown:N(a=>D(a,f),["stop"])},null,40,Ce),u("span",{class:"box4",onMousedown:N(a=>D(a,f),["stop"])},null,40,Me)],44,ye))),128))],4),w(A,{"label-width":"80px",class:"pl-[20px]"},{default:L(()=>[u("h3",Ve,V(r(v)("hotAreaManage")),1),w(d,{type:"primary",plain:"",size:"small",class:"mb-[10px]",onClick:U},{default:L(()=>[E(V(r(v)("addHotArea")),1)]),_:1}),u("div",He,[(X(!0),Y(F,null,P(p,(c,f)=>(X(),Y(F,{key:f},[c?(X(),Y("div",Xe,[w(g,{label:r(v)("hotArea")+(f+1)},{default:L(()=>[u("div",Ye,[w(o,{modelValue:c.link,"onUpdate:modelValue":a=>c.link=a},null,8,["modelValue","onUpdate:modelValue"]),w(H,{class:"del cursor-pointer mx-[10px]",name:"element-CircleCloseFilled",color:"#bbb",size:"20px",onClick:a=>p.splice(f,1)},null,8,["onClick"])])]),_:2},1032,["label"])])):R("",!0)],64))),128))])]),_:1})])]),_:1},8,["modelValue","title"])])}}});const Ae=de(Se,[["__scopeId","data-v-21029794"]]),We={class:"content-wrap"},$e={class:"edit-attr-item-wrap"},Be={class:"mb-[10px]"},Ee={ref:"imageBoxRef"},Fe={class:"item-wrap p-[10px] pb-0 relative border border-dashed border-gray-300 mb-[16px]"},Ue={class:"style-wrap"},De=K({__name:"edit-hot-area",setup(W,{expose:z}){const b=he();b.editComponent.ignore=[],b.editComponent.verify=_=>{const m={code:!0,message:""};return b.value[_].imageUrl===""&&(m.code=!1,m.message=v("imageUrlTip")),m};const O=_=>{S()},S=()=>{const _=new Image;_.src=Z(b.editComponent.imageUrl),_.onload=async()=>{b.editComponent.imgWidth=_.width,b.editComponent.imgHeight=_.height}};return z({}),(_,m)=>{const T=me,$=ee,p=Ae,U=te;return X(),Y(F,null,[G(u("div",We,[u("div",$e,[u("h3",Be,V(r(v)("hotAreaSet")),1),w(U,{"label-width":"80px",class:"px-[10px]"},{default:L(()=>[u("div",Ee,[u("div",Fe,[w($,{label:r(v)("hotAreaBackground")},{default:L(()=>[w(T,{modelValue:r(b).editComponent.imageUrl,"onUpdate:modelValue":m[0]||(m[0]=B=>r(b).editComponent.imageUrl=B),limit:1,onChange:O},null,8,["modelValue"])]),_:1},8,["label"]),w($,{label:r(v)("hotAreaSet")},{default:L(()=>[w(p,{modelValue:r(b).editComponent,"onUpdate:modelValue":m[1]||(m[1]=B=>r(b).editComponent=B)},null,8,["modelValue"])]),_:1},8,["label"])])],512)]),_:1})])],512),[[J,r(b).editTab=="content"]]),G(u("div",Ue,[Q(_.$slots,"style")],512),[[J,r(b).editTab=="style"]])],64)}}}),Je=Object.freeze(Object.defineProperty({__proto__:null,default:De},Symbol.toStringTag,{value:"Module"}));export{Je as _};
|