active-page-vue
Version:
A Vue-based visual page editor component
1 lines • 20.3 kB
JavaScript
(("undefined"!==typeof self?self:this)["webpackJsonpAsEditor"]=("undefined"!==typeof self?self:this)["webpackJsonpAsEditor"]||[]).push([[2],{"020f":function(e,t,o){"use strict";o.r(t);var n=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"home"},[n("section",{staticClass:"buttons"},[n("p",{staticStyle:{"font-size":"12px",color:"#4f4f4f","margin-left":"15px",cursor:"pointer"},on:{click:e.Previous}}),n("div",[n("el-button",{attrs:{type:"danger"},on:{click:e.reloads}},[n("i",{staticClass:"el-icon-delete-solid el-icon--left"}),e._v("重置")]),n("el-button",{on:{click:function(t){e.realTimeView.show=!0}}},[e._v("预览")]),n("el-button",{on:{click:e.catJson}},[e._v("查看JSON ")]),n("el-button",{on:{click:function(t){return e.$refs.file.click()}}},[e._v("导入JSON ")]),n("el-button",{on:{click:e.exportJSON}},[e._v("导出JSON ")]),n("input",{ref:"file",staticStyle:{display:"none"},attrs:{type:"file",id:"file",accept:".json"},on:{change:e.importJSON}})],1)]),n("section",{staticClass:"operation"},[n("sliderassembly",{attrs:{pointer:e.pointer}}),n("div",{staticClass:"phone"},[n("section",{ref:"imageTofile",staticClass:"phoneAll",attrs:{id:"imageTofile"}},[n("img",{staticClass:"statusBar",attrs:{src:o("2eca"),alt:""}}),n("headerTop",{attrs:{pageSetup:e.pageSetup},nativeOn:{click:function(t){return e.headTop.apply(null,arguments)}}}),n("section",{staticClass:"phone-container",style:{"background-color":e.pageSetup.bgColor,backgroundImage:"url("+e.pageSetup.bgImg+")"},on:{drop:function(t){return e.drop(t)},dragover:function(t){return e.allowDrop(t)},dragleave:function(t){return e.dragleaves(t)}}},[n("div",{class:e.pointer.show?"pointer-events":""},e._l(e.pageComponents,(function(t,o){return n(t.component,{key:o,tag:"component",staticClass:"componentsClass",style:{border:t.active&&e.deleShow?"2px solid #155bd4":""},attrs:{datas:t.setStyle,"data-type":t.type},nativeOn:{click:function(n){return e.activeComponent(t,o)}}},[n("div",{directives:[{name:"show",rawName:"v-show",value:e.deleShow,expression:"deleShow"}],staticClass:"deles",attrs:{slot:"deles"},on:{click:function(t){return t.stopPropagation(),e.deleteObj(o)}},slot:"deles"},[n("span",{staticClass:"iconfont icon-sanjiaoxingzuo"}),e._v(" "+e._s(t.text)+" "),n("i",{staticClass:"el-icon-delete-solid"})])])})),1)]),n("div",{staticClass:"phoneSize"},[e._v("iPhone 8手机高度")]),n("phoneBottom")],1)]),n("div",{staticClass:"decorateTab"},[n("span",{class:"decorate"===e.rightcom?"active":"",on:{click:function(t){e.rightcom="decorate"}}},[n("i",{staticClass:"iconfont icon-wangye"}),e._v(" 页面设置 ")]),n("span",{class:"componenmanagement"===e.rightcom?"active":"",on:{click:function(t){e.rightcom="componenmanagement"}}},[n("i",{staticClass:"iconfont icon-zujian"}),e._v(" 组件管理 ")]),n("span",{directives:[{name:"show",rawName:"v-show",value:"componenmanagement"!=e.rightcom&&"decorate"!=e.rightcom,expression:"rightcom != 'componenmanagement' && rightcom != 'decorate'"}],staticClass:"active"},[n("i",{staticClass:"iconfont icon-zujian"}),e._v(" 组件设置 ")])]),n("div",{staticClass:"decorateAll"},[n("transition",{attrs:{name:"decorateAnima"}},[n(e.rightcom,{tag:"component",attrs:{datas:e.currentproperties},on:{componenmanagement:e.componenmanagement}})],1)],1)],1),n("realTimeView",{attrs:{datas:e.realTimeView,val:{id:e.id,name:e.pageSetup.name,templateJson:JSON.stringify(e.pageSetup),component:JSON.stringify(e.pageComponents)}}})],1)},i=[],a=(o("b0c0"),o("99af"),o("4de4"),o("a434"),o("caad"),o("2532"),o("159b"),o("ed08")),s=(o("e260"),o("4ec9"),o("d3b7"),o("3ca3"),o("ddb0"),new Map);s.set("captiontext",{component:"captiontext",text:"标题文字",type:"1-3",active:!0,style:"captiontextsstyle",setStyle:{text:"标题文字",name:"标题文字",description:"",wordSize:16,descriptionSize:12,wordWeight:400,positions:"left",descriptionWeight:200,wordColor:"rgba(50, 50, 51, 10)",descriptionColor:"rgba(150, 151, 153, 10)",backColor:"rgba(255, 255, 255, 10)",borderBott:!1,wordHeight:24,more:{show:!1,type:1,text:"查看更多",httpType:10,http:""}}}),s.set("listswitching",{component:"listswitching",text:"商品",type:"2-1",active:!0,style:"listswitchingstyle",setStyle:{text:"商品",commodityType:0,moditystyle:0,borderRadius:0,pageMargin:15,commodityMargin:10,textWeight:400,positions:"left",priceofcommodity:!0,purchasebutton:!0,commoditycorner:!0,purchasebuttonType:0,commoditycornertype:0,commodityTagColor:"#07c160",tagPosition:0,imageList:[],purchase:"马上抢",commoditylisttype:0,commoditylisttypetab:[{text:"分组",imageList:[]},{text:"分组",imageList:[]}],tabColor:"#f39800",showMore:!1,moreUrl:null,bgImg:""}}),s.set("pictureads",{component:"pictureads",text:"图片广告",type:"1-3",active:!0,style:"pictureadsstyle",setStyle:{text:"图片广告",swiperType:0,borderRadius:0,pageMargin:0,imageMargin:0,pagingType:0,rowindividual:2,imageList:[]}}),s.set("graphicnavigation",{component:"graphicnavigation",text:"图文导航",type:"1-4",active:!0,style:"graphicnavigationstyle",setStyle:{text:"图文导航",imageList:[],navigationType:0,imgStyle:0,backgroundColor:"rgb(255, 255, 255)",textColor:"rgb(0, 0, 0)",borderRadius:0,showSize:5,textHeight:24,textSize:12,bgImg:""}}),s.set("richtext",{component:"richtext",text:"富文本",type:"1-10",active:!0,style:"richtextstyle",setStyle:{text:"富文本",myValue:"",backColor:"rgb(249, 249, 249)"}}),s.set("magiccube",{component:"magiccube",text:"魔方",type:"1-6",active:!0,style:"magiccubestyle",setStyle:{text:"魔方",rubiksCubeType:0,pageMargin:0,imgMargin:0,imageList:[{src:"",linktype:"10",http:{}},{src:"",linktype:"10",http:{}},{src:"",linktype:"10",http:{}},{src:"",linktype:"10",http:{}},{src:"",linktype:"10",http:{}}]}}),s.set("auxiliarysegmentation",{component:"auxiliarysegmentation",text:"辅助分割",type:"1-11",active:!0,style:"auxiliarysegmentationstyle",setStyle:{text:"辅助分割",blankHeight:30,segmentationtype:0,paddType:0,auxliarColor:"rgb(229, 229, 229)",bordertp:"solid"}}),s.set("commoditysearch",{component:"commoditysearch",text:"商品搜索",type:"1-1",active:!0,style:"commoditysearchstyle",setStyle:{text:"商品搜索",heights:28,position:0,sweep:!1,borderRadius:0,textPosition:0,backgroundColor:"rgb(249, 249, 249)",borderColor:"rgb(255, 255, 255)",textColor:"rgb(150, 151, 153)",hotords:[]}}),s.set("storeinformation",{component:"storeinformation",text:"店铺信息",type:"1-12",active:!0,style:"storeinformationstyle",setStyle:{text:"店铺信息",bakcgroundImg:"",headPortrait:"",rubiksCubeType:0,name:"店铺名称",Discount:"在线支付满150减30，满100减20"}}),s.set("entertheshop",{component:"entertheshop",text:"单元格",type:"1-13",active:!0,style:"entertheshopstyle",setStyle:{text:"单元格",icon:"",shopName:"左侧标题",copywriting:"右侧内容",type:"10",http:{}}}),s.set("notice",{component:"notice",text:"公告",type:"1-7",active:!0,style:"noticestyle",setStyle:{text:"公告",noticeText:"请填写内容，如果过长，将会在手机上滚动显示",backColor:"rgb(255, 248, 233)",textColor:"rgba(100, 101, 102)"}}),s.set("videoss",{component:"videoss",text:"视频",type:"1-8",active:!0,style:"videostyle",setStyle:{text:"视频",src:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",coverUrl:null,autoplay:!1}}),s.set("custommodule",{component:"custommodule",text:"自定义模块",type:"demo",active:!0,style:"custommodulestyle",setStyle:{text:"自定义模块",demo:"自定义内容",img:"https://img2.baidu.com/it/u=1905875968,4289754134&fm=26&fmt=auto&gp=0.jpg"}}),s.set("communitypowder",{component:"communitypowder",text:"社群涨粉",type:"1-14",active:!0,style:"communitypowderstyle",setStyle:{text:"社群涨粉",mainImg:"",qrcodeImg:"",title:"标题",describe:"辅助描述",buttonName:"立即添加",backColor:"rgb(255, 255, 255)"}}),s.set("storenotecard",{component:"storenotecard",text:"文章模块",type:"2-2",active:!0,style:"storenotecardstyle",setStyle:{text:"文章模块",name:"这里显示专题名称",commodityType:0,moditystyle:0,borderRadius:0,textWeight:400,noteLabels:!0,readingNumber:!0,praisePoints:!0,viewMore1:!0,viewMore2:!0,imageList:[],positions:"bottom",linktype:"10",http:{}}}),s.set("crowdoperation",{component:"crowdoperation",text:"人群运营",type:"1-17",active:!0,style:"crowdoperationstyle",setStyle:{text:"人群运营"}}),s.set("personalizedrecommendation",{component:"personalizedrecommendation",text:"个性化推荐",type:"1-18",active:!0,style:"personalizedrecommendationstyle",setStyle:{text:"个性化推荐"}}),s.set("onlineservice",{component:"onlineservice",text:"在线客服",type:"1-19",active:!0,style:"onlineservicestyle",setStyle:{text:"在线客服"}}),s.set("investigate",{component:"investigate",text:"表单模块",type:"2-3",active:!0,style:"investigatestyle",setStyle:{text:"表单模块",title:"表单模块",jsonData:[]}}),s.set("tabBar",{component:"tabBar",text:"底部导航",type:"1-5",active:!0,style:"tabBarStyle",setStyle:{text:"底部导航",activeColor:"#1989fa",inactiveColor:"#7d7e80",isShowBorder:!0,iconWidth:"25",iconHeight:"25",fontSize:"14",Highlight:0,iconList:[]}}),s.set("follow",{component:"follow",text:"关注公众号",type:"1-15",active:!0,style:"followStyle",setStyle:{text:"关注公众号",heade:"https://imgs.starfirelink.com/miniShop//logo_1618466110849.png",followName:"公众号名称",followAppId:""}}),s.set("suspension",{component:"suspension",text:"悬浮按钮",type:"1-16",active:!0,style:"suspensionstyle",setStyle:{text:"悬浮按钮",linktype:"10",http:{}}});var r=s,c=o("951f"),p=o.n(c),l=o("21a6"),d=o.n(l),m={name:"home",inject:["reload"],data:function(){return{realTimeView:{show:!1},id:null,deleShow:!0,index:"",rightcom:"decorate",currentproperties:{},pageSetup:{name:"页面标题",details:"",isPerson:!1,isBack:!0,titleHeight:35,bgColor:"rgba(249, 249, 249, 10)",bgImg:""},pageComponents:[],offsetY:0,pointer:{show:!1},onlyOne:["1-5","1-16"]}},mounted:function(){this.pageSetup.name="页面标题",this.currentproperties=this.pageSetup},methods:{catJson:function(){this.$alert('{\n <br/>\n "id": '.concat(this.id,',\n <br/>\n "name": "').concat(this.pageSetup.name,'",\n <br/>\n "templateJson": \'').concat(JSON.stringify(this.pageSetup),"',\n <br/>\n \"component\": '").concat(JSON.stringify(this.pageComponents),"',\n <br/>\n }"),"查看JSON",{confirmButtonText:"确定",customClass:"JSONView",dangerouslyUseHTMLString:!0,callback:function(){}})},Preservation:function(){var e=this;this.deleShow=!1,this.$nextTick((function(){e.toImage()}))},toImage:function(){var e=this,t=this.$loading({lock:!0,text:"保存中...",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"}),o=document.querySelector("#imageTofile");p()(this.$refs.imageTofile,{backgroundColor:null,height:o.scrollHeight,width:o.scrollWidth,useCORS:!0}).then((function(o){e.deleShow=!0;var n=o.toDataURL("image/png"),i=new FormData;i.append("base64File",n),console.log(i,"--------------页面图片formData"),t.close()}))},allowDrop:function(e){e.preventDefault();var t=e.offsetY;if(this.offsetY!==t){this.offsetY=t;var o=e.target.children[0];if(this.pageComponents.length){if(1===this.pageComponents.length&&0===this.pageComponents[0].type)return;if(t<o.children[0].clientHeight/2){if(0===this.pageComponents[0].type)return;return this.pageComponents=this.pageComponents.filter((function(e){return"placementarea"!==e.component})),void this.pageComponents.unshift({component:"placementarea",type:0})}var n=o.offsetTop;if(t>o.clientHeight||o.lastChild.offsetTop-n+o.lastChild.clientHeight/2<t){if(0===this.pageComponents[this.pageComponents.length-1].type)return;return this.pageComponents=this.pageComponents.filter((function(e){return"placementarea"!==e.component})),void this.pageComponents.push({component:"placementarea",type:0})}for(var i=o.children,a=0,s=i.length;a<s;a++){var r=i[a].offsetTop-n;if(r+i[a].clientHeight/2>e.offsetY){if(0===this.pageComponents[a].type)break;if(0===this.pageComponents[a-1].type)break;this.pageComponents=this.pageComponents.filter((function(e){return"placementarea"!==e.component})),this.pageComponents.splice(a,0,{component:"placementarea",type:0});break}if(r+i[a].clientHeight>e.offsetY){if(0===this.pageComponents[a].type)break;if(!this.pageComponents[a+1]||0===this.pageComponents[a+1].type)break;this.pageComponents=this.pageComponents.filter((function(e){return"placementarea"!==e.component})),this.pageComponents.splice(a,0,{component:"placementarea",type:0});break}}}else this.pageComponents.push({component:"placementarea",type:0})}},drop:function(e){var t=this,o=a["a"].deepClone(r.get(e.dataTransfer.getData("componentName"))),n=this.pageComponents.some((function(e,n){return"placementarea"===e.component&&0===n&&t.onlyOne.includes(o.type)}));if(n)return this.$message.info("固定位置的组件(如: 底部导航、悬浮)不能放在第一个!"),void this.dragleaves();var i=this.pageComponents.some((function(o){return t.onlyOne.includes(o.type)&&o.component===e.dataTransfer.getData("componentName")}));if(i)return this.$message.info("当前组件只能添加一个!"),void this.dragleaves();a["a"].forEach(this.pageComponents,(function(e,n){!0===e.active&&(e.active=!1),t.index=n,"placementarea"===e.component&&t.$set(t.pageComponents,n,o)})),this.rightcom=o.style,this.currentproperties=o.setStyle,console.log(o,this.rightcom,this.currentproperties,"----------components data")},dragleaves:function(){this.pageComponents=this.pageComponents.filter((function(e){return"placementarea"!==e.component}))},componenmanagement:function(e){this.pageComponents=e},activeComponent:function(e,t){this.index=t,this.rightcom=e.style,this.currentproperties=e.setStyle,a["a"].forEach(this.pageComponents,(function(e){!0===e.active&&(e.active=!1)})),e.active=!0},headTop:function(){this.rightcom="decorate",a["a"].forEach(this.pageComponents,(function(e){!0===e.active&&(e.active=!1)}))},deleteObj:function(e){this.pageComponents.splice(e,1),this.index===e&&(this.rightcom="decorate"),e<this.index&&(this.index=this.index-1)},reloads:function(){var e=this;this.$confirm("重置后您添加或者修改的数据将会失效, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then((function(){e.reload()})).catch((function(){}))},Previous:function(){this.$confirm("返回列表您添加或者修改的数据将会失效, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then((function(){})).catch((function(){}))},exportJSON:function(){var e=JSON.stringify({id:this.id,name:this.pageSetup.name,templateJson:JSON.stringify(this.pageSetup),component:JSON.stringify(this.pageComponents)}),t=new Blob([e],{type:""});d.a.saveAs(t,"".concat(this.pageSetup.name,".json"))},importJSON:function(){var e=document.getElementById("file").files[0],t=new FileReader;t.readAsText(e);var o=this;t.onload=function(){var e=JSON.parse(this.result);console.log(e,"-----------------导入成功"),o.id=e.id,o.pageSetup=JSON.parse(e.templateJson),o.pageComponents=JSON.parse(e.component)}}},watch:{rightcom:function(e){if("decorate"===e)return a["a"].forEach(this.pageComponents,(function(e){!0===e.active&&(e.active=!1)})),void(this.currentproperties=this.pageSetup);"componenmanagement"===e&&(a["a"].forEach(this.pageComponents,(function(e){!0===e.active&&(e.active=!1)})),this.currentproperties=this.pageComponents)}}},h=m,g=(o("1dd9"),o("2877")),u=Object(g["a"])(h,n,i,!1,null,"072ca9bd",null);t["default"]=u.exports},"1dd9":function(e,t,o){"use strict";o("456f")},"456f":function(e,t,o){var n=o("a383");n.__esModule&&(n=n.default),"string"===typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);var i=o("499e").default;i("07f63efb",n,!0,{sourceMap:!1,shadowMode:!1})},a383:function(e,t,o){var n=o("24fb");t=n(!1),t.push([e.i,".pointer-events[data-v-072ca9bd]{pointer-events:none}.home[data-v-072ca9bd]{width:100%;height:100%}.home .deles[data-v-072ca9bd]{min-width:80px;text-align:center;line-height:25px;background:#fff;height:25px;left:103%}.home .deles[data-v-072ca9bd],.home .deles .icon-sanjiaoxingzuo[data-v-072ca9bd]{position:absolute;font-size:12px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.home .deles .icon-sanjiaoxingzuo[data-v-072ca9bd]{left:-11px;color:#fff}.home .deles:hover i[data-v-072ca9bd]{display:block;position:absolute;left:0;font-size:16px;top:0;text-align:center;line-height:25px;width:100%;color:#fff;height:100%;z-index:10;background:rgba(0,0,0,.5)}.home .deles:hover .icon-sanjiaoxingzuo[data-v-072ca9bd]{color:rgba(0,0,0,.5)}.home .deles i[data-v-072ca9bd]{display:none}.home .buttons[data-v-072ca9bd]{height:8%;border-bottom:1px solid #ebedf0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.home .buttons[data-v-072ca9bd],.home .buttons .frop[data-v-072ca9bd]{padding-right:15px}.home .buttons .frop .el-button.el-button--primary.el-dropdown-selfdefine[data-v-072ca9bd]{background:#fff;color:#000;border:1px solid #dcdee0}.home .buttons .el-button[data-v-072ca9bd]{font-size:14px;padding:0 16px;height:30px}.home .buttons .el-button.el-button--primary[data-v-072ca9bd]{background:#155bd4}.home .buttons .el-button.el-button--danger[data-v-072ca9bd]{background:red}.home .operation[data-v-072ca9bd]{width:100%;height:92%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.home .operation[data-v-072ca9bd],.home .phone[data-v-072ca9bd]{display:-webkit-box;display:-ms-flexbox;display:flex;background:#f7f8fa}.home .phone[data-v-072ca9bd]{width:55%;height:100%;overflow-y:scroll;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.home .phone[data-v-072ca9bd]::-webkit-scrollbar{width:1px}.home .phone .phoneAll[data-v-072ca9bd]{width:375px;min-height:760px;-webkit-box-shadow:0 0 14px 0 rgba(0,0,0,.1);box-shadow:0 0 14px 0 rgba(0,0,0,.1);margin:45px 0;position:relative}.home .phone .phoneAll .phoneSize[data-v-072ca9bd]{position:absolute;left:-137px;top:640px;font-size:12px;color:#a2a2a2;border-bottom:1px solid #dedede;width:130px;height:21px;line-height:21px}.home .phone .phoneAll .statusBar[data-v-072ca9bd]{width:100%;display:block}.home .phone .phoneAll .phone-container[data-v-072ca9bd]{min-height:603px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;width:100%;position:relative;background-repeat:no-repeat;background-size:100% 100%}.home .phone .phoneAll .phone-container .componentsClass[data-v-072ca9bd]{border:1px solid #fff}.home .phone .phoneAll .phone-container .componentsClass[data-v-072ca9bd]:hover{border:1px dashed #155bd4}.home .decorateAll[data-v-072ca9bd]{width:376px;height:100%;overflow-y:scroll;overflow-x:hidden;position:relative;padding:0 12px;background:#fff}.home .decorateAll[data-v-072ca9bd]::-webkit-scrollbar{width:1px}.home .decorateAll[data-v-072ca9bd]::-webkit-scrollbar-thumb{background-color:#155bd4}.home .decorateTab[data-v-072ca9bd]{position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;right:380px;top:115px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.home .decorateTab span[data-v-072ca9bd]{background-color:#fff;-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.1);box-shadow:0 2px 8px 0 rgba(0,0,0,.1);border-radius:2px;width:94px;height:32px;display:inline-block;text-align:center;line-height:32px;margin-bottom:12px;-webkit-transition:all .8s;transition:all .8s;cursor:pointer}.home .decorateTab span.active[data-v-072ca9bd]{background-color:#155bd4;color:#fff}.home .decorateTab span i[data-v-072ca9bd]{font-size:12px;margin-right:5px}.decorateAnima-enter-active[data-v-072ca9bd],.decorateAnima-leave-active[data-v-072ca9bd]{-webkit-transition:all 1.5s ease;transition:all 1.5s ease}.decorateAnima-enter[data-v-072ca9bd],.decorateAnima-leave-to[data-v-072ca9bd]{-webkit-transform:translate(8px,8px);transform:translate(8px,8px);opacity:0}",""]),e.exports=t}}]);