VideoCreativity1.17f04e28.js 18 KB

1
  1. import{z as ot,g as st,v as at,p as it,a as Ce,E as $}from"./elementPlus.4833989a.js";import{u as we,i as Ve,o as nt,m as ke,k as dt,e as rt}from"./index.6717ff78.js";import{e as j}from"./emitter.c27b7986.js";import{d as ct,ay as ut,r as d,Z as G,B as Ie,j as pt,Y as _t,w as mt,k as se,ai as u,aq as ft,o as p,c as g,U as s,O as a,P as M,a as e,S as r,M as q,u as I,R as vt,F as R,a8 as H,T as v,I as Ae,aF as gt,aG as yt}from"./vue.adf17aba.js";import{u as ht}from"./index.b098562c.js";import{_ as bt}from"./_plugin-vue_export-helper.c27b6911.js";import"./echarts.72dc8373.js";const i=D=>(gt("data-v-131a752e"),D=D(),yt(),D),xt={class:"customize-container"},Ct=i(()=>e("div",{style:{"font-weight":"700","padding-bottom":"18px"}},[e("span",{style:{color:"#306cd7","font-size":"26px"}},"|"),e("span",{style:{"font-size":"18px","padding-left":"5px"}},"创意")],-1)),wt={style:{display:"flex",border:"1px solid #dddfe6",padding:"0 0 0 5px","margin-bottom":"20px"}},Vt={style:{width:"50%","padding-left":"5px","border-right":"1px solid #dddfe6"}},kt=i(()=>e("span",{style:{color:"#e47470","margin-right":"4px"}},"*",-1)),It=["src"],At={class:"el-upload-list__item-actions"},Ut=["onClick"],Lt=["onClick"],Mt={style:{"margin-top":"10px"}},Dt={style:{display:"flex","align-items":"center","justify-content":"space-between"}},Nt=i(()=>e("span",{style:{"line-height":"17px","font-weight":"600",color:"#1e2128"}},"徽标规格",-1)),St=i(()=>e("div",{class:"introduce-item"},"1、图片大小: 400x400 像素或更大",-1)),zt=i(()=>e("div",{class:"introduce-item"},"2、文件大小: 1MB 或更小",-1)),Ft=i(()=>e("div",{class:"introduce-item"},"3、文件格式: PNG 或 JPG",-1)),Et={class:"introduce-item"},Bt={style:{"margin-left":"25px",position:"relative"}},Ot=["src"],Pt=i(()=>e("span",{style:{color:"#e47470","margin-right":"4px"}},"*",-1)),Tt={style:{display:"flex","justify-content":"space-between"}},$t=i(()=>e("div",{style:{"font-weight":"700",color:"#1d2129","line-height":"18px","font-size":"14px"}},"选择视频",-1)),jt=i(()=>e("div",{style:{margin:"10px 0","font-size":"12px","font-weight":"400",color:"#666","line-height":"18px"}}," 保持视频简短并紧扣主题。视频会自动播放,因此请确保前 2 秒极具吸引力,并且不依靠声音来传递信息。如果您在视频中使用了文字,请确保文字清晰易辨。字幕或音频必须与将展示您广告的区域相匹配。 ",-1)),Gt=i(()=>e("hr",{style:{margin:"10px 0"}},null,-1)),qt={style:{display:"flex","justify-content":"space-between"}},Rt=i(()=>e("span",{style:{"font-weight":"700",color:"#1d2129","line-height":"18px","font-size":"14px"}},"视频文件要求:",-1)),Ht=i(()=>e("div",{class:"tip-list-title"},"视频格式",-1)),Jt=i(()=>e("div",{class:"tip-item"},"1.纵横比:16:9",-1)),Kt=i(()=>e("div",{class:"tip-item"},"2.尺寸:1280 x 720 像素、1920 x 1080 像素或 3840 x 2160 像素",-1)),Qt=i(()=>e("div",{class:"tip-item"},"3.文件大小:500MB 或更小",-1)),Yt=i(()=>e("div",{class:"tip-item"},"4.文件格式:MP4 或 MOV",-1)),Zt=i(()=>e("div",{class:"tip-item"},"5.长度:6-45 秒",-1)),Wt=i(()=>e("div",{class:"tip-item"},"6.帧率:23.976、23.98、24、25、29.97 或 29.98 fps",-1)),Xt=i(()=>e("div",{class:"tip-item"},"7.比特率:1 Mbps 或更高",-1)),el=i(()=>e("div",{class:"tip-item"},"8.编解码器:H.264 或 H.2651",-1)),tl=i(()=>e("div",{class:"tip-item"},"9.配置文件:主配置文件或基线配置文件",-1)),ll=i(()=>e("div",{class:"tip-item"},"10.视频流:仅为 1",-1)),ol=i(()=>e("div",{class:"tip-list-title"},"音频规格",-1)),sl=i(()=>e("div",{class:"tip-item"},"1.语言:必须与广告投放区域匹配",-1)),al=i(()=>e("div",{class:"tip-item"},"2.采样率:44.1 kHz 或更高",-1)),il=i(()=>e("div",{class:"tip-item"},"3.编解码器:PCM、AAC 或 MP3",-1)),nl=i(()=>e("div",{class:"tip-item"},"4.比特率:96 kbps 或更高",-1)),dl=i(()=>e("div",{class:"tip-item"},"5.格式:立体声或单声道",-1)),rl=i(()=>e("div",{class:"tip-item"},"6.音频流:仅为 1",-1)),cl=["src"],ul=i(()=>e("span",{style:{color:"#e47470","margin-right":"4px"}},"*",-1)),pl={style:{"margin-right":"8px","line-height":"normal"}},_l={style:{position:"relative"}},ml={class:"double-line"},fl=i(()=>e("span",{style:{color:"#6d7784"}},"ASIN: ",-1)),vl={class:"data-color",style:{"margin-right":"8px"}},gl=i(()=>e("span",{style:{color:"#e47470","margin-right":"4px"}},"*",-1)),yl={style:{width:"50%",padding:"0 10px",position:"relative"}},hl={class:"grid-container"},bl=["onClick","onMouseover"],xl={style:{padding:"10px"}},Cl={class:"bottom"},wl={class:"bottom-item"},Vl={class:"bottom-item"},kl=i(()=>e("div",{class:"bottom-item"},"徽标",-1)),Il={class:"dialog-footer"},Al={class:"grid-container"},Ul=["onClick","onMouseover"],Ll={style:{padding:"10px"}},Ml={class:"bottom"},Dl={class:"bottom-item"},Nl={class:"bottom-item"},Sl=i(()=>e("div",{class:"bottom-item"},"徽标",-1)),zl={class:"dialog-footer"},Fl={style:{padding:"10px",display:"flex","align-items":"center"}},El={style:{"margin-right":"8px","line-height":"normal"}},Bl={style:{position:"relative"}},Ol={class:"double-line"},Pl=i(()=>e("span",{style:{color:"#6d7784"}},"ASIN: ",-1)),Tl={class:"data-color",style:{"margin-right":"8px"}},$l={style:{"margin-top":"20px",display:"flex","justify-content":"center"}},jl=ct({__name:"VideoCreativity1",setup(D){const Ue=ht(),{profile:y}=ut(Ue),ae=d(),h=G({name:"",brandName:"",title:""}),Le=G({name:[{required:!0,message:"请输入广告名称",trigger:"blur"}],brandName:[{required:!0,message:"请输入品牌名称",trigger:"blur"}],title:[{required:!0,message:"请输入标题",trigger:"blur"}]}),Me=async o=>{o&&await o.validate((t,n)=>{t?(console.log("submit!"),$e()):console.log("error submit!",n)})},ie=d(["1"]),De=o=>{o.includes("commodity")&&ye()};d("");const J=d(""),A=d(!1),Ne=d(!1),C=d([]),K=d([]),ne=d(null),w=d(null),b=d([]),de=d(""),x=d(!1),N=G([]),Q=d(!1);function Se(o){C.value=[]}function ze(o){J.value=o.url,A.value=!0}function Fe(o){Ee(o)}let re={},ce="",Y="";async function Ee(o){const t=new FormData;t.append("file",o.raw),t.append("profile_id",y.value.profile_id),t.append("brandEntityId",Y),t.append("assetType","IMAGE"),t.append("assetSubTypeList",JSON.stringify(["LOGO"])),Q.value=!0;try{const _=(await we(t)).data.file_name,m={profile_id:y.value.profile_id,file_name:_},c=await Ve(m);ce=c.data.assetId;const{width:le,height:oe}=c.data.fileMetadata;re={width:le,height:oe,top:0,left:0},c.data.checkresult=="success"?$({message:"上传成功",type:"success"}):$.error("上传失败")}catch(n){console.error("上传失败:",n)}finally{Q.value=!1}}const Z=d(!1);let ue="";function Be(o){K.value=[]}function Oe(o){Pe(o)}async function Pe(o){const t=new FormData;t.append("file",o.raw),t.append("profile_id",y.value.profile_id),t.append("brandEntityId",Y),t.append("assetType","VIDEO"),t.append("assetSubTypeList",JSON.stringify([])),Z.value=!0;try{const _=(await we(t)).data.file_name,m={profile_id:y.value.profile_id,file_name:_},c=await Ve(m);ue=c.data.assetId,c.data.checkresult=="success"?$({message:"上传成功",type:"success"}):$.error("上传失败")}catch(n){console.error("上传失败:",n)}finally{Z.value=!1}}const Te=Ie("respAdGroupId");let pe="",_e="";const W=d(!1);async function $e(){W.value=!0;try{const o={profile_id:y.value.profile_id,casins:Ze.value,url:_e,name:h.name,state:"PAUSED",adGroupId:Te.value,brandName:pe,brandLogoAssetID:ce,brandLogoCrop:re,consentToTranslate:!1,videoAssetIds:ue,headline:h.title},t=await nt(o);console.log("response",t)}catch(o){console.log("error:",o)}finally{W.value=!1}}pt(()=>{j.on("video-shop",o=>{pe=o.brandRegistryName,Y=o.brandEntityId}),j.on("page",o=>{_e=o})}),_t(()=>{j.off("video-shop"),j.off("page")});function me(o){X(o.id)?b.value=b.value.filter(t=>t.id!==o.id):b.value.push(o),ne.value=o.id}function je(){if(b.value.length>0){C.value.length=0,de.value=b.value[0].imageUrl;const o={name:b.value[0].title,url:de.value};C.value.push(o)}b.value=[],x.value=!1}function X(o){return ne.value===o}async function Ge(){const o={profile_id:y.value.profile_id,assetType:"IMAGE",assetSubType:"LOGO"},t=await dt(o);console.log("🚀 ~ getAssetsData ~ response-->>",t),N.splice(0,N.length),t.data.forEach(n=>{N.push({id:n.assetId,title:n.name,imageUrl:n.storageLocationUrls.defaultUrl,width:n.fileMetadata.width,height:n.fileMetadata.height,size:qe(n.fileMetadata.sizeInBytes)})})}function qe(o){return(o/1024).toFixed(2)}function Re(){x.value=!0,Ge()}const fe=d(!1),He=G([]),ve=Ie("pageOptionsValue"),S=d([]),V=d(!1);async function Je(){V.value=!0;try{const o={profile_id:y.value.profile_id,pageurl:ve.value},t=await rt(o);S.value=t.data.asinList,console.log("asinList",S.value)}catch(o){console.log("error:",o)}finally{V.value=!1}}let ge=[];const z=d([]);async function ye(){try{V.value=!0;const o=S.value.slice(0,3),t=o.filter(n=>!ge.includes(n));if(t.length===0){V.value=!1;return}ge=[...o],z.value=[];for(const n of t){const _={profile_id:y.value.profile_id,asin:n};try{const m=await ke(_);z.value.push(m.data)}catch(m){console.log("Error for ASIN",n,":",m)}}}catch(o){console.log("Outer error:",o)}finally{V.value=!1}}const F=d(!1),k=d(),ee=d([]),te=d(!1);let E=d(null);function Ke(o){E.value=o,F.value=!0}async function Qe(){try{te.value=!0;const o=S.value.slice(3);ee.value=[];for(const t of o){const n={profile_id:y.value.profile_id,asin:t};try{const _=await ke(n);ee.value.push(_.data)}catch(_){console.log("Error for additional ASIN",t,":",_)}}}catch(o){console.log("Outer error:",o)}finally{te.value=!1}}function Ye(){if(E.value!==null&&k.value){const o=be.value.find(t=>t.asin===k.value);o&&(z.value[E.value]=o),F.value=!1,E.value=null,k.value=null}}mt(()=>ve.value,async()=>{await Je(),ye(),Qe()});const he=se(()=>z.value.flat()),Ze=se(()=>he.value.map(o=>o.asin)),be=se(()=>ee.value.flat());return(o,t)=>{const n=u("el-input"),_=u("el-form-item"),m=u("el-icon"),c=u("el-button"),le=u("Link"),oe=u("el-link"),xe=u("el-upload"),U=u("el-dialog"),B=u("el-collapse-item"),O=u("el-image"),P=u("el-tooltip"),T=u("el-card"),We=u("el-collapse"),Xe=u("el-scrollbar"),et=u("el-form"),tt=u("el-radio"),lt=u("el-radio-group"),L=ft("loading");return p(),g("div",xt,[s(T,{"body-style":"padding: 20px 80px 0 80px;"},{default:a(()=>[Ct,s(et,{ref_key:"ruleFormRef",ref:ae,model:h,rules:Le,"label-width":"120px",class:"demo-ruleForm",size:"default","label-position":"top","status-icon":""},{default:a(()=>[s(_,{label:"广告名称",prop:"name"},{default:a(()=>[s(n,{modelValue:h.name,"onUpdate:modelValue":t[0]||(t[0]=l=>h.name=l),style:{width:"50%"}},null,8,["modelValue"])]),_:1}),M((p(),g("div",wt,[e("div",Vt,[s(Xe,{height:"700px"},{default:a(()=>[s(We,{modelValue:ie.value,"onUpdate:modelValue":t[7]||(t[7]=l=>ie.value=l),onChange:De,style:{"border-top":"none","border-bottom":"none"}},{default:a(()=>[s(B,{name:"1",style:{"padding-right":"10px"}},{title:a(()=>[kt,r("品牌名称和徽标")]),default:a(()=>[s(_,{prop:"brandName"},{default:a(()=>[s(n,{modelValue:h.brandName,"onUpdate:modelValue":t[1]||(t[1]=l=>h.brandName=l),placeholder:"请输入品牌名称",style:{padding:"0 0 5px 0"}},null,8,["modelValue"])]),_:1}),M((p(),q(xe,{"file-list":C.value,"onUpdate:fileList":t[2]||(t[2]=l=>C.value=l),"list-type":"picture-card","on-change":Fe,action:"#",accept:".png, .jpg",limit:1,"auto-upload":!1},{file:a(({file:l})=>[e("div",null,[e("img",{class:"el-upload-list__item-thumbnail",src:l.url,alt:""},null,8,It),e("span",At,[e("span",{class:"el-upload-list__item-preview",onClick:f=>ze(l)},[s(m,null,{default:a(()=>[s(I(ot))]),_:1})],8,Ut),Ne.value?vt("",!0):(p(),g("span",{key:0,class:"el-upload-list__item-delete",onClick:f=>Se(l)},[s(m,null,{default:a(()=>[s(I(st))]),_:1})],8,Lt))])])]),tip:a(()=>[e("div",Mt,[e("div",Dt,[Nt,s(c,{type:"primary",icon:I(at),disabled:"true",onClick:Re},{default:a(()=>[r("从素材库中选择")]),_:1},8,["icon"])]),St,zt,Ft,e("div",Et,[r(" 4、内容: 徽标必须填满图片或置于白色或透明背景上详细了解我们的徽标要求 "),e("span",Bt,[s(m,{size:"14",style:{position:"absolute",left:"-14px",top:"1px"}},{default:a(()=>[s(le)]),_:1}),s(oe,{type:"primary",underline:!1,href:"https://advertising.amazon.com/resources/ad-policy/sponsored-ads-policies#brandlogo",target:"_blank"},{default:a(()=>[r("查看要求")]),_:1})])])])]),default:a(()=>[s(m,null,{default:a(()=>[s(I(it))]),_:1})]),_:1},8,["file-list"])),[[L,Q.value]]),s(U,{modelValue:A.value,"onUpdate:modelValue":t[3]||(t[3]=l=>A.value=l)},{default:a(()=>[e("img",{"w-full":"",src:J.value,alt:"Preview Image"},null,8,Ot)]),_:1},8,["modelValue"])]),_:1}),s(B,{name:"2",style:{"padding-right":"10px"}},{title:a(()=>[Pt,r("视频")]),default:a(()=>[e("div",Tt,[$t,s(c,{type:"primary",link:""},{default:a(()=>[r("查看视频批准提示")]),_:1})]),jt,M((p(),q(xe,{"file-list":K.value,"onUpdate:fileList":t[4]||(t[4]=l=>K.value=l),"on-change":Oe,accept:".mp4, .mov",action:"#",limit:1,"auto-upload":!1,"on-remove":Be,class:"upload-demo"},{tip:a(()=>[s(c,{type:"primary",disabled:"true",style:{"margin-left":"20px"}},{default:a(()=>[r("从素材库中选择")]),_:1}),Gt,e("div",null,[e("div",qt,[Rt,s(c,{type:"primary",link:""},{default:a(()=>[r("了解更多")]),_:1})]),Ht,Jt,Kt,Qt,Yt,Zt,Wt,Xt,el,tl,ll,ol,sl,al,il,nl,dl,rl])]),default:a(()=>[s(c,{type:"primary"},{default:a(()=>[r("上传视频")]),_:1})]),_:1},8,["file-list"])),[[L,Z.value]]),s(U,{modelValue:A.value,"onUpdate:modelValue":t[5]||(t[5]=l=>A.value=l)},{default:a(()=>[e("img",{"w-full":"",src:J.value,alt:"Preview Image"},null,8,cl)]),_:1},8,["modelValue"])]),_:1}),M((p(),q(B,{name:"commodity",style:{"padding-right":"10px"}},{title:a(()=>[ul,r("商品")]),default:a(()=>[(p(!0),g(R,null,H(he.value,(l,f)=>(p(),g("div",{key:f,style:{margin:"0 0 5px 0"}},[s(T,{shadow:"hover","body-style":"padding: 10px; display: flex;"},{default:a(()=>[e("div",pl,[s(O,{class:"img-box",src:l.image_link},null,8,["src"])]),e("div",_l,[s(P,{class:"box-item",effect:"dark",content:l.title,placement:"top"},{default:a(()=>[e("div",ml,v(l.title),1)]),_:2},1032,["content"]),e("span",null,[fl,e("span",vl,v(l.asin),1)]),s(c,{type:"primary",size:"small",link:"",onClick:()=>Ke(f),style:{position:"absolute",bottom:"2px",right:"0"}},{default:a(()=>[r(" 更换商品 ")]),_:2},1032,["onClick"])])]),_:2},1024)]))),128))]),_:1})),[[L,V.value]]),s(B,{name:"4",style:{"padding-right":"10px"}},{title:a(()=>[gl,r("标题")]),default:a(()=>[s(_,{prop:"title"},{default:a(()=>[s(n,{modelValue:h.title,"onUpdate:modelValue":t[6]||(t[6]=l=>h.title=l),maxlength:"50",placeholder:"请输入标题","show-word-limit":"",style:{padding:"0 10px 0 0"}},null,8,["modelValue"])]),_:1})]),_:1})]),_:1},8,["modelValue"])]),_:1})]),e("div",yl,[s(c,{type:"primary",plain:"",onClick:t[8]||(t[8]=l=>Me(ae.value)),disabled:!C.value.length,style:{position:"absolute",top:"92%",left:"46%"}},{default:a(()=>[r("保存")]),_:1},8,["disabled"])])])),[[L,W.value]])]),_:1},8,["model","rules"])]),_:1}),s(U,{modelValue:x.value,"onUpdate:modelValue":t[11]||(t[11]=l=>x.value=l),title:"从素材库中选择",width:"65%"},{footer:a(()=>[e("span",Il,[s(c,{onClick:t[10]||(t[10]=l=>x.value=!1)},{default:a(()=>[r("取消")]),_:1}),s(c,{type:"primary",onClick:je},{default:a(()=>[r("确定")]),_:1})])]),default:a(()=>[s(n,{"prefix-icon":I(Ce)},null,8,["prefix-icon"]),e("div",hl,[(p(!0),g(R,null,H(N,l=>(p(),g("div",{class:Ae(["grid-item",{selected:X(l.id),hover:w.value===l.id}]),key:l.id,onClick:f=>me(l),onMouseover:f=>w.value=l.id,onMouseleave:t[9]||(t[9]=f=>w.value=null)},[s(T,{"body-style":{padding:"0px"}},{default:a(()=>[s(O,{class:"image",src:l.imageUrl,fit:"cover"},null,8,["src"]),e("div",xl,[e("span",null,[s(P,{placement:"top",content:l.title},{default:a(()=>[r(v(l.title),1)]),_:2},1032,["content"])]),e("div",Cl,[e("div",wl,v(l.size)+"KB",1),e("div",Vl,v(l.width)+" * "+v(l.height),1),kl])])]),_:2},1024)],42,bl))),128))])]),_:1},8,["modelValue"]),s(U,{modelValue:fe.value,"onUpdate:modelValue":t[15]||(t[15]=l=>fe.value=l),title:"从素材库中选择",width:"65%"},{footer:a(()=>[e("span",zl,[s(c,{onClick:t[13]||(t[13]=l=>x.value=!1)},{default:a(()=>[r("取消")]),_:1}),s(c,{type:"primary",onClick:t[14]||(t[14]=l=>x.value=!1)},{default:a(()=>[r("确定")]),_:1})])]),default:a(()=>[s(n,{"prefix-icon":I(Ce)},null,8,["prefix-icon"]),e("div",Al,[(p(!0),g(R,null,H(He,l=>(p(),g("div",{class:Ae(["grid-item",{selected:X(l.id),hover:w.value===l.id}]),key:l.id,onClick:f=>me(l),onMouseover:f=>w.value=l.id,onMouseleave:t[12]||(t[12]=f=>w.value=null)},[s(T,{"body-style":{padding:"0px"}},{default:a(()=>[s(O,{class:"image",src:l.imageUrl,fit:"cover"},null,8,["src"]),e("div",Ll,[e("span",null,[s(P,{placement:"top",content:l.title},{default:a(()=>[r(v(l.title),1)]),_:2},1032,["content"])]),e("div",Ml,[e("div",Dl,v(l.size)+"KB",1),e("div",Nl,v(l.width)+" * "+v(l.height),1),Sl])])]),_:2},1024)],42,Ul))),128))])]),_:1},8,["modelValue"]),s(U,{modelValue:F.value,"onUpdate:modelValue":t[17]||(t[17]=l=>F.value=l),title:"更换商品",width:"50%"},{default:a(()=>[M((p(),q(lt,{modelValue:k.value,"onUpdate:modelValue":t[16]||(t[16]=l=>k.value=l),style:{display:"flex","flex-direction":"column","align-content":"flex-start","align-items":"flex-start"}},{default:a(()=>[(p(!0),g(R,null,H(be.value,(l,f)=>(p(),g("div",{key:f},[s(tt,{label:l.asin,style:{height:"80px","border-bottom":"1px solid #ccc"}},{default:a(()=>[e("div",Fl,[e("div",El,[s(O,{class:"img-box",src:l.image_link},null,8,["src"])]),e("div",Bl,[s(P,{class:"box-item",effect:"dark",content:l.title,placement:"top"},{default:a(()=>[e("div",Ol,v(l.title),1)]),_:2},1032,["content"]),e("span",null,[Pl,e("span",Tl,v(l.asin),1)])])])]),_:2},1032,["label"])]))),128))]),_:1},8,["modelValue"])),[[L,te.value]]),e("div",$l,[s(c,{type:"primary",disabled:!k.value,onClick:Ye},{default:a(()=>[r("确定")]),_:1},8,["disabled"])])]),_:1},8,["modelValue"])])}}});const Yl=bt(jl,[["__scopeId","data-v-131a752e"]]);export{Yl as default};