增加组件

src/components/sallCenter/plugin/modal.vue

+<style>
+  .diy-modal .modal-background {
+    width: 224px;
+    height: 400px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 5px;
+    margin-right: 20px;
+  }
+
+  .diy-modal .modal-container {
+    max-width: 184px;
+    max-height: 300px;
+    overflow: hidden;
+  }
+
+  .diy-modal .modal-container img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .diy-modal .pic-select {
+    width: 72px;
+    height: 72px;
+    color: #00a0e9;
+    border: 1px solid #ccc;
+    line-height: normal;
+    text-align: center;
+    cursor: pointer;
+    font-size: 12px;
+  }
+
+  .diy-modal .pic-preview {
+    width: 72px;
+    height: 72px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  .diy-modal .edit-options {
+    position: relative;
+  }
+
+  .diy-modal .edit-options .el-button {
+    height: 25px;
+    line-height: 25px;
+    width: 25px;
+    padding: 0;
+    text-align: center;
+    border: none;
+    border-radius: 0;
+    position: absolute;
+    margin-left: 0;
+  }
+
+  .chooseLink .el-input-group__append {
+    background-color: #fff;
+  }
+
+</style>
+<template>
+  <div :class="{'active':modalData.isCked}">
+    <div class="diy-component-options" v-if="modalData.isCked">
+      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
+      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
+        style="right: -25px; top: 0;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
+        style="right: -25px; top: 30px;"></el-button>
+    </div>
+    <div class="diy-modal">
+      <div class="diy-component-preview" v-loading="!data">
+        <div @click="dialogVisible=true" style="padding: 20px 0;text-align: center;">
+          <div>弹窗广告设置</div>
+          <div style="font-size: 22px;color: #909399">本条内容不占高度</div>
+        </div>
+      </div>
+      <div class="diy-component-edit" v-if="modalData.isCked">
+        <el-dialog title="弹窗广告设置" :visible.sync="dialogVisible" :close-on-click-modal="false">
+          <div flex="box:first">
+            <div>
+              <div class="modal-background" flex="main:center cross:center">
+                <div class="modal-container" flex="main:center cross:center">
+                  <img v-if="data.list.length" :src="getIconLink(data.list[0].picUrl)">
+                </div>
+              </div>
+            </div>
+            <div>
+              <el-form @submit.native.prevent>
+                <el-form-item label="是否开启">
+                  <el-switch v-model="data.opened"></el-switch>
+                </el-form-item>
+                <el-form-item v-if="data.opened" label="广告图片">
+                  <span style="color: #909399;">图片最大高度700px，最大宽度650px。</span>
+                  <br>
+                  <div
+                    style="border: 1px solid #e2e2e2;padding: 5px;margin-bottom: 5px;line-height: normal;max-width: 400px"
+                    v-for="(item,index) in data.list" :key="index">
+                    <div class="edit-options">
+                      <el-button @click="deleteAd(index)" icon="el-icon-delete" type="primary"
+                        style="right: -31px;top: -6px;"></el-button>
+                    </div>
+                    <div flex="box:first">
+                      <div style="margin-right: 10px">
+                        <div class="zk_pic_box" @click="choicImg=true,comImgIndex=index" flex="main:center cross:center"
+                          :style="{backgroundImage:'url(' + getIconLink(item.picUrl) + ')'}">
+                          <i v-if="item.picUrl==''" class="el-icon-picture-outline"></i>
+                          <el-button type="danger" v-if="item.picUrl!=''" class="image-delete" size="mini"
+                            icon="el-icon-close" @click.stop="item.picUrl=''" circle></el-button>
+                        </div>
+                      </div>
+                      <div class="chooseLink">
+                        <div style="margin: 5px 0;">广告链接</div>
+                        <el-input v-model="item.link.url" placeholder="点击选择链接" :disabled="true" size="small">
+                          <el-button slot="append" size="small" @click="isShowLink=true,comImgIndex=index">选择链接
+                          </el-button>
+                        </el-input>
+                      </div>
+                    </div>
+                  </div>
+                  <el-button size="small" @click="addAd" v-if="data.list.length<3">添加广告</el-button>
+                </el-form-item>
+                <el-form-item v-if="data.opened" label="弹窗次数">
+                  <el-radio v-model="data.times" :label="0">每次</el-radio>
+                  <el-radio v-model="data.times" :label="1">仅首次</el-radio>
+                </el-form-item>
+                <el-button style="padding: 9px 25px" v-if="data.opened" size="small" type="primary"
+                  @click="dialogVisible = false">保存</el-button>
+              </el-form>
+            </div>
+          </div>
+        </el-dialog>
+
+      </div>
+    </div>
+    <!-- 选择图片文件 -->
+    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
+      <ChooseImg @SelectId="SelectId"></ChooseImg>
+    </el-dialog>
+    <!-- 选择连接 -->
+    <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
+      <chooseMeun ref="chooseMeun"></chooseMeun>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="isShowLink=false">取 消</el-button>
+        <el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  import chooseMeun from "../../common/chooseMeun.vue";
+  export default {
+    props: ["modalData", "index", "dataLeng"],
+    components: {
+      ChooseImg,
+      chooseMeun
+    },
+    data() {
+      return {
+        dialogVisible: false,
+        choicImg: false,
+        isShowLink: false,
+        data: this.modalData.data,
+        comImgIndex: null,
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      //向父组件传值 并调用排序
+      resetSord(IsUp) {
+        this.$emit('getSord', this.index, IsUp);
+      },
+      //点击触发父组件删除
+      delPlugin() {
+        this.$emit('comDelPlugin', this.index);
+      },
+      addAd() {
+        this.data.list.push({
+          picUrl: '',
+          link: {
+            url: '',
+            openType: '',
+          },
+        });
+      },
+      deleteAd(index) {
+        this.data.list.splice(index, 1);
+      },
+      //选择图片
+      SelectId(msg) {
+        this.data.list[this.comImgIndex].picUrl = msg.url;
+        this.choicImg = false;
+      },
+      //选择链接
+      getChoiceLink() {
+        //调用子组件方法
+        var obj = this.$refs.chooseMeun.getChooseMenu();
+        // this.data.list[this.comImgIndex].link.openType = link.open_type;
+        this.data.list[this.comImgIndex].link.url = obj.PageUrl;
+        this.isShowLink = false;
+      },
+      //判断是否包含http
+      getIconLink(url) {
+        let str = ''
+        if (url.indexOf('http') != -1) {
+          str = url
+        } else {
+          str = 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + url
+        }
+        return str;
+      },
+
+    },
+    computed: {
+
+    },
+    mounted() {
+
+    }
+  };
+
+</script>

src/components/sallCenter/templateEdit.vue

@@ -246,10 +246,22 @@
                   :index="index" :dataLeng="dataList.length"></bargain>
                 <integralMall v-if="item.Id=='integral-mall'" :mallData="item" @getSord="getSord"
                   @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></integralMall>
-                <lottery v-if="item.Id=='lottery'" :lottData="item" @getSord="getSord"
-                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></lottery>
-                <advance v-if="item.Id=='advance'" :advanceData="item" @getSord="getSord"
-                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></advance>
+                <lottery v-if="item.Id=='lottery'" :lottData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></lottery>
+                <advance v-if="item.Id=='advance'" :advanceData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></advance>
+                <vipCard v-if="item.Id=='vip-card'" :vipData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></vipCard>
+                <live v-if="item.Id=='live'" :liveData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></live>
+                <empty v-if="item.Id=='empty'" :emptyData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></empty>
+                <advert v-if="item.Id=='ad'" :advData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></advert>
+                <modal v-if="item.Id=='modal'" :modalData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></modal>
+                <quickNav v-if="item.Id=='quick-nav'" :quickData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></quickNav>
               </div>
             </div>
           </div>
@@ -285,6 +297,12 @@
   import integralMall from "../sallCenter/plugin/integral-mall.vue"
   import lottery from "../sallCenter/plugin/lottery.vue"
   import advance from "../sallCenter/plugin/advance.vue"
+  import vipCard from "../sallCenter/plugin/vip-card.vue"
+  import live from "../sallCenter/plugin/live.vue"
+  import empty from "../sallCenter/plugin/empty.vue"
+  import advert from "../sallCenter/plugin/advert.vue"
+  import modal from "../sallCenter/plugin/modal.vue"
+  import quickNav from "../sallCenter/plugin/quick-nav.vue"
   export default {
     data() {
       return {
@@ -321,6 +339,12 @@
       integralMall,
       lottery,
       advance,
+      vipCard,
+      live,
+      empty,
+      advert,
+      modal,
+      quickNav
     },
     methods: {
       //获取左侧菜单
@@ -813,7 +837,7 @@
             }
             this.dataList.push(mallObj);
             break;
-          //抽奖
+            //抽奖
           case 'lottery':
             let lottObj = {
               Id: 'lottery',
@@ -844,7 +868,7 @@
             }
             this.dataList.push(lottObj);
             break;
-          //预售
+            //预售
           case 'advance':
             let advanceObj = {
               Id: 'advance',
@@ -877,6 +901,155 @@
             }
             this.dataList.push(advanceObj);
             break;
+            //超级会员卡
+          case 'vip-card':
+            let vipObj = {
+              Id: 'vip-card',
+              isCked: false,
+              data: {
+                background: '#FFFFFF',
+                usePluginConfig: true,
+                top_bottom_padding: 0,
+                buy_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png',
+                renew_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png',
+                buy_big_color: '',
+                buy_small_color: '',
+                buy_btn_color: '',
+                buy_btn_bg_color: '',
+                buy_big: '',
+                buy_small: '',
+                buy_btn_text: '',
+                renew_text_color: '',
+                renew_btn_bg_color: '',
+                renew_text: '',
+              }
+            }
+            this.dataList.push(vipObj);
+            break;
+            //直播
+          case 'live':
+            let liveObj = {
+              Id: 'live',
+              isCked: false,
+              data: {
+                background: '#f7f7f7',
+                is_show_goods: true,
+                style_type: 1,
+                number: 5,
+              }
+            }
+            this.dataList.push(liveObj);
+            break;
+            //空白块
+          case 'empty':
+            let emptyObj = {
+              Id: 'empty',
+              isCked: false,
+              data: {
+                background: '#ffffff',
+                height: 10,
+              }
+            }
+            this.dataList.push(emptyObj);
+            break;
+            //流量主广告
+          case 'ad':
+            let adObj = {
+              Id: 'ad',
+              isCked: false,
+              data: {
+                id: '',
+                type: '',
+                pic_url: '',
+                video: '',
+                award_type: '0',
+                award_coupons: [
+                  /*{
+                      send_num: 3,
+                          name: '优惠券',
+                      coupon_id: 710,
+                  } */
+                ],
+                award_num: '',
+                award_limit_type: '0',
+                award_limit: 0,
+              }
+            }
+            this.dataList.push(adObj);
+            break;
+            //弹窗广告
+          case 'modal':
+            let modalObj = {
+              Id: 'modal',
+              isCked: false,
+              data: {
+                opened: false,
+                list: [{
+                  picUrl: '',
+                  link: {
+                    url: '',
+                    openType: '',
+                  },
+                }, ],
+                times: 0
+              }
+            }
+            this.dataList.push(modalObj);
+            break;
+            //快捷导航
+          case 'quick-nav':
+            let quickObj = {
+              Id: 'quick-nav',
+              isCked: false,
+              data: {
+                navSwitch: 0,
+                useMallConfig: true,
+                navStyle: 1,
+                closedPicUrl: '',
+                openedPicUrl: '',
+                home: {
+                  opened: false,
+                  picUrl: '',
+                },
+                customerService: {
+                  opened: false,
+                  picUrl: '',
+                },
+                tel: {
+                  opened: false,
+                  picUrl: '',
+                  number: '',
+                },
+                web: {
+                  opened: false,
+                  picUrl: '',
+                  url: '',
+                },
+                mApp: {
+                  opened: false,
+                  picUrl: '',
+                  appId: '',
+                  page: '',
+                },
+                mapNav: {
+                  opened: false,
+                  picUrl: '',
+                  address: '',
+                  location: '',
+                },
+                customize: {
+                  opened: false,
+                  picUrl: '',
+                  open_type: '',
+                  params: '',
+                  link_url: '',
+                  key: '',
+                }
+              }
+            }
+            this.dataList.push(quickObj);
+            break;
+
         }
       },
       //给子组件调用 重新排序上移下移