修改

src/components/sallCenter/plugin/miaiactiviCustom.vue → src/components/sallCenter/plugin/miaiactivityCustom.vue

@@ -164,13 +164,15 @@
   .goodsDialog .el-dialog__body {
     padding: 10px 20px;
   }
+
   .education-edit-item {
     border: 1px solid #dcdfe6;
     padding: 5px;
     margin-bottom: 5px;
     position: relative;
-}
-.education_image_upload .pic-box {
+  }
+
+  .education_image_upload .pic-box {
     width: 70px;
     height: 70px;
     border: 1px solid #ccc;
@@ -180,8 +182,9 @@
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
-}
-.education-edit-options .el-button {
+  }
+
+  .education-edit-options .el-button {
     height: 25px;
     line-height: 25px;
     width: 25px;
@@ -191,8 +194,9 @@
     border-radius: 0;
     position: absolute;
     margin-left: 0;
-}
-.education_image_upload .pic-box .size-tip {
+  }
+
+  .education_image_upload .pic-box .size-tip {
     line-height: 1.35;
     text-align: center;
     position: absolute;
@@ -206,18 +210,21 @@
     color: #fff;
     background: rgba(0, 0, 0, 0.2);
     letter-spacing: -1px;
-}
-.education_image_upload .image-delete {
+  }
+
+  .education_image_upload .image-delete {
     position: absolute;
     top: -10px;
     right: -10px;
     padding: 5px;
     visibility: hidden;
     z-index: 1;
-}
-.education_image_upload:hover .image-delete {
+  }
+
+  .education_image_upload:hover .image-delete {
     visibility: visible;
-}
+  }
+
 </style>
 <template>
   <div :class="{'active':mcData.isCked}">
@@ -230,8 +237,7 @@
         style="right: -25px; top: 30px;"></el-button>
     </div>
     <div class="diy-goods">
-      <div class="diy-component-preview"
-        :style="{'backgroundColor':data.backgroundColor}">
+      <div class="diy-component-preview" :style="{'backgroundColor':data.backgroundColor}">
         <div :flex="cMainFlex" :style="{marginLeft:data.PaddingLeft+'px',
         marginRight:data.PaddingRight+'px',marginTop:data.PaddingTop+'px',
         marginBottom:data.PaddingBottom+'px'}">
@@ -241,7 +247,8 @@
                 <div v-for="(goods,goodsIndex) in cCatGoodsList(cat, catIndex)" class="goods-item" :key="goodsIndex"
                   :class="data.catPosition==='left'?'goods-cat-list':''">
                   <div style="display: inline-block;" :style="cGoodsItemWidth">
-                    <div :style="{'borderRadius':data.SearchFilletPX+'px'}" :flex="cGoodsItemFlex" style="position: relative;border:1px solid rgb(226, 226, 226);overflow:hidden;">
+                    <div :style="{'borderRadius':data.SearchFilletPX+'px'}" :flex="cGoodsItemFlex"
+                      style="position: relative;border:1px solid rgb(226, 226, 226);overflow:hidden;">
                       <div class="goods-pic"
                         :class="'goods-pic-'+data.goodsCoverProportion+' goods-pic-fill-'+data.fill"
                         :style="'background-image: url('+getIconLink(goods.picUrl)+')'">
@@ -249,7 +256,9 @@
                       <div :style="cGoodsItemInfoStyle">
                         <div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
                           <div style="font-size:30px;">{{goods.name}}</div>
-                          <div style="font-size:25px;margin-top:10px;">{{goods.lableName}}</div>
+                          <el-tag :key="sindex" style="margin-right:5px;font-size:20px;" v-for="(sitem,sindex) in goods.lableNameList">
+                            {{sitem}}
+                          </el-tag>
                         </div>
                       </div>
                     </div>
@@ -288,8 +297,14 @@
                     </div>
                     <div>
                       <div>
-                        <el-input type="text" v-model="item.name" placeholder="标题" size="small" style="margin-bottom:5px;"></el-input>
-                        <el-input type="text" v-model="item.lableName" placeholder="副标题" size="small" style="margin-bottom:5px;"></el-input>
+                        <el-input type="text" v-model="item.name" placeholder="标题" size="small"
+                          style="margin-bottom:5px;"></el-input>
+                        <el-tag :key="tagIndex" v-for="(tag,tagIndex) in item.lableNameList" style="margin-right:3px;"
+                          size="small" closable :disable-transitions="false" @close="deltags(tag,index,tagIndex)">
+                          {{tag}}
+                        </el-tag>
+                        <el-input type="text" size="mini" style="width:80px;" v-model="commonLabels"
+                          @blur="getLabel(index)" placeholder="输入标签"></el-input>
                         <el-input type="text" v-model="item.linkUrl" placeholder="点击选择链接" size="small">
                           <el-button slot="append" @click="getMyChoice(index)">选择链接</el-button>
                         </el-input>
@@ -355,11 +370,11 @@
       </span>
     </el-dialog>
     <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
-        <chooseMenu ref="chooseMenu"></chooseMenu>
-        <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>
+      <chooseMenu ref="chooseMenu"></chooseMenu>
+      <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>
@@ -387,14 +402,26 @@
         isShowGoods: false,
         //添加的下标
         comIndex: -1,
-        commonIndex:0,
-        isShowLink:false,
+        commonIndex: 0,
+        isShowLink: false,
+        commonLabels: ''
       };
     },
     created() {
 
     },
     methods: {
+      //添加标签
+      getLabel(index) {
+        if (this.commonLabels != '') {
+          this.data.list[index].lableNameList.push(this.commonLabels);
+        }
+        this.commonLabels = '';
+      },
+      //删除标签
+      deltags(tag, index, tagindex) {
+        this.data.list[index].lableNameList.splice(tagindex, 1);
+      },
       //向父组件传值 并调用排序
       resetSord(IsUp) {
         this.$emit('getSord', this.index, IsUp);
@@ -415,9 +442,9 @@
             const defaultGoodsItem = {
               id: 0,
               name: '商品名称',
-              lableName:'',
+              lableName: '',
               picUrl: '',
-              linkUrl:'',
+              linkUrl: '',
             };
             newList = new Array(cat.goodsNum).fill(defaultGoodsItem);
           }
@@ -426,8 +453,8 @@
       },
       //选择图片
       SelectId(msg) {
-        this.data.list[this.commonIndex].picUrl=this.getIconLink(msg.url);
-        this.choicImg=false;
+        this.data.list[this.commonIndex].picUrl = this.getIconLink(msg.url);
+        this.choicImg = false;
       },
       //选择商品
       getGoodsChoice() {
@@ -452,47 +479,47 @@
         this.$refs.choiceGood.toggleSelection();
       },
       //删除banner
-      delBanner(index){
-        this.data.list.splice(index,1);
+      delBanner(index) {
+        this.data.list.splice(index, 1);
       },
       //选取图片
-      choiceMyImg(index){
+      choiceMyImg(index) {
         this.choicImg = true;
-        this.commonIndex=index;
+        this.commonIndex = index;
       },
       //选择链接
-      getMyChoice(index){
-        this.isShowLink=true;
-        this.commonIndex=index;
+      getMyChoice(index) {
+        this.isShowLink = true;
+        this.commonIndex = index;
       },
       //添加商品
-      addBanner(){
-        let obj={
-            id:0,
-            name:'', //标题
-            lableName:'', //副标题
-            picUrl:'', //商品图片
-            linkUrl:'' //链接
+      addBanner() {
+        let obj = {
+          id: 0,
+          name: '', //标题
+          lableNameList: [], //副标题
+          picUrl: '', //商品图片
+          linkUrl: '' //链接
         }
-        if(this.data.list.length<this.data.goodsLength){
+        if (this.data.list.length < this.data.goodsLength) {
           // if(this.data.list.length>0){
-            for(var i=0;i<this.data.list.length;i++){
-              if(this.data.list[i].linkUrl==''){
-                this.Error(`请选择第${i+1}个的链接`);
-                return;
-              }
+          for (var i = 0; i < this.data.list.length; i++) {
+            if (this.data.list[i].linkUrl == '') {
+              this.Error(`请选择第${i+1}个的链接`);
+              return;
             }
-            this.data.list.push(obj);
+          }
+          this.data.list.push(obj);
           // }
-        }else{
+        } else {
           this.Error('超出自定义数量');
         }
       },
       //获取选择链接
-      getChoiceLink(){
+      getChoiceLink() {
         //调用子组件方法
         var obj = this.$refs.chooseMenu.getChooseMenu();
-        this.data.list[this.commonIndex].linkUrl=obj.PageUrl;
+        this.data.list[this.commonIndex].linkUrl = obj.PageUrl;
         this.isShowLink = false;
       },
     },

src/components/sallCenter/templateEdit.vue

@@ -302,8 +302,8 @@
                   :index="index" :dataLeng="dataList.length"></miaiuser>
                 <miaiactivitytype v-if="item.Id=='miaiactivitytype'" :mData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                   :index="index" :dataLeng="dataList.length"></miaiactivitytype>
-                <miaiactiviCustom v-if="item.Id=='miaiactiviCustom'" :mcData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
-                  :index="index" :dataLeng="dataList.length" ></miaiactiviCustom>
+                <miaiactivityCustom v-if="item.Id=='miaiactivityCustom'" :mcData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length" ></miaiactivityCustom>
               </div>
             </div>
           </div>
@@ -421,7 +421,7 @@
   import navPage from "../sallCenter/plugin/nav-page"
   import miaiuser from "../sallCenter/plugin/miaiuser"
   import miaiactivitytype from "../sallCenter/plugin/miaiactivitytype"
-  import miaiactiviCustom from "../sallCenter/plugin/miaiactiviCustom"
+  import miaiactivityCustom from "../sallCenter/plugin/miaiactivityCustom"
 
 
   import ChooseImg from "@/components/global/ChooseImg.vue";
@@ -502,7 +502,7 @@
       navPage,
       miaiuser,
       miaiactivitytype,
-      miaiactiviCustom
+      miaiactivityCustom
     },
     methods: {
       //选择图片
@@ -1537,9 +1537,9 @@
             this.dataList.push(miaiactivityData);
             break;
            //相亲自定义
-          case 'miaiactiviCustom':
+          case 'miaiactivityCustom':
             let miaiacObj = {
-              Id: 'miaiactiviCustom',
+              Id: 'miaiactivityCustom',
               isCked: false,
               data: {
                 goodsLength: 10, //商品数量