增加组件

src/components/common/choiceFenlei.vue

+<template>
+    <div>
+        <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%"
+        @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55">
+            </el-table-column>
+            <el-table-column label="ID">
+                <template slot-scope="scope">{{ scope.row.id }}</template>
+            </el-table-column>
+            <el-table-column prop="name" label="名称">
+                <template slot-scope="scope">{{ scope.row.name }}</template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        dataList: [],
+        msg:{
+          Id:0,
+          Name:'',
+          Tier:0,
+          ParentId:0,
+          Enabled:1,
+          IsShow:1,          
+        },
+        selectRow:[],
+      };
+    },
+    created() {},
+    methods: {
+      //获取所有菜单
+      getList() {
+        this.apipost("/api/product/GetProductCategoryTreeList", this.msg, res => {
+          if (res.data.resultCode == 1) {
+            var dataArray = res.data.data;
+            this.dataList=[];
+            if (dataArray && dataArray.length > 0) {
+              dataArray.forEach(x => {
+                 this.dataList.push({
+                    id: x.Id,
+                    name: x.Name,
+                    menuName: x.Name,
+                    goodsNum: 30,
+                    staticGoods: false,
+                    goodsList: [],
+                 })
+                 if(x.ChildList&&x.ChildList.length>0){
+                    x.ChildList.forEach(y=>{
+                        this.dataList.push({
+                            id: y.Id,
+                            name: y.Name,
+                            menuName: y.Name,
+                            goodsNum: 30,
+                            staticGoods: false,
+                            goodsList: [],
+                        })
+                        if(y.ChildList&&y.ChildList.length>0){
+                            y.ChildList.forEach(z=>{
+                                this.dataList.push({
+                                    id: z.Id,
+                                    name: z.Name,
+                                    menuName: z.Name,
+                                    goodsNum: 30,
+                                    staticGoods: false,
+                                    goodsList: [],
+                                })
+                            })
+                        }
+                    })
+                 }
+              });
+            }
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      handleSelectionChange(val){
+        this.selectRow=JSON.parse(JSON.stringify(val));
+      },
+      //父组件调用方法
+      getChoicedFenlei(){
+        return this.selectRow;
+      },
+      //清空多选方法
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row);
+          });
+        } else {
+          this.$refs.multipleTable.clearSelection();
+        }
+      },  
+    },
+    mounted() {
+      this.getList();
+    }
+  };
+
+</script>

src/components/common/choiceGood.vue

+<template>
+    <div>
+        <el-input size="mini" v-model="msg.Name" placeholder="根据名称搜索" :clearable="true"
+                    @clear="getList" @keyup.enter.native="getList">
+            <el-button slot="append" @click="getList">搜索</el-button>
+        </el-input>
+        <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%"
+        @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="50px">
+            </el-table-column>
+            <el-table-column label="ID" width="100px">
+                <template slot-scope="scope">{{ scope.row.Id }}</template>
+            </el-table-column>
+            <el-table-column prop="name" label="名称">
+                <template slot-scope="scope">
+                    <div flex="cross:center dir:left">
+                        <img style="width:50px;height:50px;margin-right:10px;" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+scope.row.CoverImage"/>
+                        <div>{{ scope.row.Name }}</div>
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination style="text-align:right"
+        background
+        @current-change="handleCurrentChange"
+        :page-size="msg.pageSize"
+        layout="prev, pager, next"
+        :total="total">
+        </el-pagination>
+    </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        dataList: [],
+        msg:{
+            pageIndex:1,
+            pageSize:15,
+            Name:'',
+        },
+        total:0,
+        selectRow:[],
+      };
+    },
+    created() {},
+    methods: {
+      //获取所有菜单
+      getList() {
+        this.apipost("/api/product/GetProductGoodsDialogList", this.msg, res => {
+          if (res.data.resultCode == 1) {
+            console.log(res,'res');
+            this.total=res.data.data.count;
+            this.dataList=res.data.data.pageData;
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      handleSelectionChange(val){
+        this.selectRow=JSON.parse(JSON.stringify(val));
+      },
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      //父组件调用方法
+      getChoicedGoods(){
+        return this.selectRow;
+      },
+      //清空多选方法
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row);
+          });
+        } else {
+          this.$refs.multipleTable.clearSelection();
+        }
+      },  
+    },
+    mounted() {
+      this.getList();
+    }
+  };
+
+</script>

src/components/sallCenter/plugin/banner.vue

@@ -120,7 +120,7 @@
 <template>
     <div :class="{'active':banData.isCked}">
         <div class="diy-component-options" v-if="banData.isCked">
-            <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
+            <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>
@@ -273,6 +273,11 @@
       resetSord(IsUp){
         this.$emit('getSord', this.index,IsUp);
       },
+      //点击触发父组件删除
+      delPlugin(){
+        this.$emit('comDelPlugin', this.index);
+      },
+
     },
     mounted() {
 

src/components/sallCenter/plugin/navigationIcon.vue

@@ -143,7 +143,7 @@
 <template>
     <div :class="{'active':navData.isCked}">
         <div class="diy-component-options" v-if="navData.isCked">
-            <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
+            <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>
@@ -386,6 +386,10 @@
                 str= 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+url
             }
             return str;
+        },
+        //点击触发父组件删除
+        delPlugin(){
+            this.$emit('comDelPlugin', this.index);
         }
     },
     mounted() {

src/components/sallCenter/plugin/notice.vue

+<style>
+  .diy-notice {
+    width: 100%;
+    height: 80px;
+    padding: 0 24px;
+    justify-content: space-between;
+  }
+
+  .diy-notice .content {
+    flex-grow: 1;
+  }
+
+  .diy-notice .content div {
+    white-space: nowrap;
+    overflow-x: hidden;
+  }
+
+  .diy-notice-dialog {
+    min-width: 900px;
+  }
+
+  .diy-notice-dialog .left .phone {
+    width: 750px;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 80px;
+    zoom: 0.5;
+    font-size: 28px;
+    position: relative;
+  }
+
+  .diy-notice-dialog .left .notice-dialog {
+    width: 100%;
+    max-height: 800px;
+    background-color: #FFFFFF;
+    padding: 24px;
+  }
+
+  .notice-gallery-item {
+    width: 100px;
+    height: 100px;
+    border: 1px solid #e3e3e3;
+    border-radius: 2px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    position: relative;
+  }
+
+  .diy-notice-dialog .left .phone {
+    width: 750px;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 80px;
+    zoom: 0.5;
+    font-size: 28px;
+    position: relative;
+  }
+
+</style>
+<template>
+  <div :class="{'active':noticeData.isCked}">
+    <div class="diy-component-options" v-if="noticeData.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-component-preview">
+      <div class="diy-notice" :style="cStyle" flex="dir:left cross:center">
+        <img :src="getIconLink(data.icon)" style="width: 36px;height: 36px;margin-right: 24px;">
+        <div class="content" flex="dir:left box:first">
+          <div style="min-width: 2rem;max-width: 7rem;">{{data.name}}</div>
+          <div style="margin: 0 12px;">{{data.content}}</div>
+        </div>
+        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-left-arrow.png"
+          style="width: 10px;height: 18px;">
+      </div>
+    </div>
+    <div class="diy-component-edit" v-if="noticeData.isCked">
+      <el-form label-width="100px" @submit.native.prevent>
+        <el-form-item label="公告名称">
+          <el-input v-model="data.name" max="8"></el-input>
+        </el-form-item>
+        <el-form-item label="公告内容">
+          <el-input type="textarea" :rows="3" v-model="data.content"></el-input>
+        </el-form-item>
+        <el-form-item label="公告图标">
+          <el-tooltip class="item" effect="dark" content="建议尺寸36*36" placement="top">
+            <el-button size="mini" @click="choicImg=true,checkIndex=1">选择图片</el-button>
+          </el-tooltip>
+          <div flex="main:center cross:center" class="notice-gallery-item">
+            <img :src="getIconLink(data.icon)" style="width:100%;height:100%;" class="app-gallery-img"
+              draggable="false">
+          </div>
+        </el-form-item>
+        <el-form-item label="文字颜色">
+          <el-color-picker size="small" v-model="data.textColor"></el-color-picker>
+          <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.textColor"></el-input>
+        </el-form-item>
+        <el-form-item label="背景颜色">
+          <el-color-picker size="small" v-model="data.background"></el-color-picker>
+          <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.background"></el-input>
+        </el-form-item>
+        <el-form-item label="弹窗设置">
+          <el-button @click="dialogVisible = !dialogVisible" size="small">弹窗设置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 选择图片文件 -->
+    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
+      <ChooseImg @SelectId="SelectId"></ChooseImg>
+    </el-dialog>
+    <!-- 公告弹窗 -->
+    <el-dialog title="弹窗设置" :visible.sync="dialogVisible" width="956px" custom-class="diy-notice-dialog">
+      <div flex="dir:left box:mean">
+        <div class="left" flex="main:center cross:center">
+          <div class="phone" flex="main:center cross:center">
+            <div style="width: 600px">
+              <img :src="getIconLink(data.headerUrl)" style="width: 600px;height: 150px;display: block">
+              <div class="notice-dialog">
+                <div style="margin-bottom: 24px;max-height: 600px;overflow-y: auto;">{{data.content}}</div>
+                <div flex="dir:left main:center">
+                  <div :style="btnStyle" style="text-align: center;">{{data.btnText}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <el-form label-width="100px" @submit.native.prevent>
+            <el-form-item label="头部图片">
+              <el-tooltip class="item" effect="dark" content="建议尺寸600*150" placement="top">
+                <el-button size="mini" @click="choicImg=true,checkIndex=2">选择图片</el-button>
+              </el-tooltip>
+              <div flex="main:center cross:center" class="notice-gallery-item">
+                <img style="max-width:100%;max-height: 100%;" :src="getIconLink(data.headerUrl)" />
+              </div>
+            </el-form-item>
+            <el-form-item label="按钮颜色">
+              <el-color-picker v-model="data.btnColor"></el-color-picker>
+            </el-form-item>
+            <el-form-item label="按钮宽度">
+              <label slot="label">按钮宽度
+                <el-tooltip class="item" effect="dark" content="最大宽度500px" placement="top">
+                  <i class="el-icon-info"></i>
+                </el-tooltip>
+              </label>
+              <el-input v-model.number="data.btnWidth" type="number" max="500">
+                <template slot="append">
+                  <span>px</span>
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="按钮高度">
+              <label slot="label">按钮高度
+                <el-tooltip class="item" effect="dark" content="最大高度80px" placement="top">
+                  <i class="el-icon-info"></i>
+                </el-tooltip>
+              </label>
+              <el-input v-model.number="data.btnHeight" type="number" max="80">
+                <template slot="append">
+                  <span>px</span>
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="按钮圆角">
+              <label slot="label">按钮圆角
+                <el-tooltip class="item" effect="dark" content="最大圆角40px" placement="top">
+                  <i class="el-icon-info"></i>
+                </el-tooltip>
+              </label>
+              <el-input v-model.number="data.btnRadius" type="number" max="40">
+                <template slot="append">
+                  <span>px</span>
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="按钮文本内容">
+              <el-input v-model="data.btnText"></el-input>
+            </el-form-item>
+            <el-form-item label="按钮文本颜色">
+              <el-color-picker v-model="data.btnTextColor"></el-color-picker>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="dialogVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  export default {
+    props: ["noticeData", "index", "dataLeng"],
+    components: {
+      ChooseImg
+    },
+    data() {
+      return {
+        choicImg: false,
+        dialogVisible: false,
+        data: this.noticeData.data,
+        checkIndex: 0,
+
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      //向父组件传值 并调用排序
+      resetSord(IsUp) {
+        this.$emit('getSord', this.index, IsUp);
+      },
+      //点击触发父组件删除
+      delPlugin() {
+        this.$emit('comDelPlugin', this.index);
+      },
+      //选择图片
+      SelectId(msg) {
+        if (this.checkIndex == 1) {
+          this.data.icon = msg.url;
+        } else if (this.checkIndex == 2) {
+          this.data.headerUrl = msg.url;
+        }
+        this.choicImg = 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: {
+      cStyle() {
+        if (this.data.background) {
+          return `background: ${this.data.background};` +
+            `color: ${this.data.textColor};`
+        } else {
+          return `color: ${this.data.textColor};`
+        }
+      },
+      btnStyle() {
+        return `background: ${this.data.btnColor};` +
+          `color: ${this.data.btnTextColor};` +
+          `border-radius: ${this.data.btnRadius}px;` +
+          `width: ${this.data.btnWidth}px;` +
+          `height: ${this.data.btnHeight}px;` +
+          `line-height: ${this.data.btnHeight}px;`
+      }
+
+    },
+    mounted() {
+
+    }
+  };
+
+</script>

src/components/sallCenter/plugin/rubik.vue

@@ -62,7 +62,7 @@
 <template>
   <div :class="{'active':rubData.isCked}">
     <div class="diy-component-options" v-if="rubData.isCked">
-      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
+      <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>
@@ -713,6 +713,10 @@
       resetSord(IsUp){
         this.$emit('getSord', this.index,IsUp);
       },
+      //点击触发父组件删除
+      delPlugin(){
+        this.$emit('comDelPlugin', this.index);
+      }
     },
     updated() {
       this.init = false;

src/components/sallCenter/plugin/search.vue

 <template>
   <div :class="{'active':searchData.isCked}">
     <div class="diy-component-options" v-if="searchData.isCked">
-        <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
+        <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>
@@ -56,7 +56,12 @@
         //向父组件传值 并调用排序
         resetSord(IsUp){
             this.$emit('getSord', this.index,IsUp);
-        }
+        },
+        //点击触发父组件删除
+        delPlugin(){
+            this.$emit('comDelPlugin', this.index);
+        },
+
     },
     mounted() {
     }

src/components/sallCenter/plugin/video.vue

+<style>
+  .diy-video {
+    width: 100%;
+    height: 400px;
+    background: #353535;
+  }
+
+  .diy-video .el-input-group__append {
+    background-color: #fff
+  }
+
+  .video-gallery-item {
+    width: 100px;
+    height: 100px;
+    border: 1px solid #e3e3e3;
+    border-radius: 2px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    position: relative;
+  }
+
+</style>
+<template>
+  <div :class="{'active':videoData.isCked}">
+    <div class="diy-component-options" v-if="videoData.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-component-preview">
+      <div class="diy-video">
+        <img :src="getIconLink(data.pic_url)" style="width: 100%;height:100%;" v-if="data.pic_url">
+      </div>
+    </div>
+    <div class="diy-component-edit" v-if="videoData.isCked">
+      <el-form label-width="100px" @submit.native.prevent>
+        <el-form-item label="封面图片">
+          <el-tooltip class="item" effect="dark" content="建议尺寸750*400" placement="top">
+            <el-button size="mini" @click="choicImg=true">选择图片</el-button>
+          </el-tooltip>
+          <div flex="main:center cross:center" class="video-gallery-item">
+            <img v-if="data.pic_url!=''" style="max-width:100%;max-height: 100%;" :src="getIconLink(data.pic_url)" />
+          </div>
+        </el-form-item>
+        <el-form-item label="视频链接">
+          <label slot="label">视频链接
+            <el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB" placement="top">
+              <i class="el-icon-info"></i>
+            </el-tooltip>
+          </label>
+          <el-input size="small" v-model="data.url" placeholder="请输入视频原地址或选择上传视频">
+            <template slot="append">
+              <el-button size="mini" @click="choicImg=true">选择文件</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 选择图片文件 -->
+    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
+      <ChooseImg @SelectId="SelectId"></ChooseImg>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  export default {
+    props: ["videoData", "index", "dataLeng"],
+    components: {
+      ChooseImg
+    },
+    data() {
+      return {
+        choicImg: false,
+        data: this.videoData.data,
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      //向父组件传值 并调用排序
+      resetSord(IsUp) {
+        this.$emit('getSord', this.index, IsUp);
+      },
+      //点击触发父组件删除
+      delPlugin() {
+        this.$emit('comDelPlugin', this.index);
+      },
+      //选择图片
+      SelectId(msg) {
+        this.data.pic_url = msg.url;
+        this.choicImg = 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>