低代码方式-实现自动化创建活动工具

一、需求痛点

    目的：实现快速上活动转化利益

    目标：实现无代码开发活，降低开发成本。解放开发人员\

    痛点：实现多平台投放

    需求：落地页实现分享功能、分享海报、支付、 多渠道平台跳转\

二、设计原型

用九牛二虎之力终于画成了自己想要的样子，不过还是有点丑。产品之路慢慢兮，其修远~

三、代码撸起来。各位小伙们重点来了，代码有点烂希望多多指教~~~

代码设计这块分为两部分，其一是后台管理系统模块，一管理活动列表，二是管理具体活动的创建和维护；其二是ToC端，实现从后台读取活动数据在移动终端进行展示，根据不同的配置数据进行调用不同的功能插件（这里插件是经过我经年累月沉淀已经封装好的，在这里直接调用即可。部分插件的封装可以参考我上一篇文章《从0到1学习云闪付开发，冷门小众云闪付小程序崛起之玩转云闪付小程序——屌丝开发惊心动魄的总结》

（1）搭建拖拽区域的模板(这里我使用了avue框架，之前手写的html拖拽太繁琐了)

 <!-- 活动界面配置 -->
      <div style="position: relative; height: auto">
        <div class="avue-grid"></div>
        <img class="show_input_image left" :src="imgSrc" v-if="imgSrc" />
        <div v-else class="wubeijing">暂无活动效果图</div>
        <div class="optionsDome">
          <div v-for="(obj, i) in list" :key="i" class="draggableBox">
            <avue-draggable
              class="draggable"
              :width="obj.width"
              :height="obj.height"
              :left="obj.left"
              :top="obj.top"
              id="draggable"
              ref="