页面修改

src/components/sallCenter/plugin/tradeCustom.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':cusData.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)+')'">
@@ -274,7 +281,10 @@
               <el-radio v-model="data.addGoodsType" :label="0">自动添加</el-radio>
               <el-radio v-model="data.addGoodsType" :label="1">手动添加</el-radio>
             </el-form-item>
-            <el-form-item label="自定义列表">
+            <el-form-item label="添加类型" v-if="data.addGoodsType==1">
+                 <el-button size="small" @click="chooseData()">选择</el-button>
+            </el-form-item>
+            <el-form-item label="自定义列表" v-if="data.addGoodsType==1">
               <div flex="dir:top">
                 <div class="education-edit-item" v-for="(item,index) in data.list" :key="index">
                   <div class="education-edit-options">
@@ -296,8 +306,10 @@
                     </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-input type="text" v-model="item.lableName" placeholder="副标题" size="small"
+                          style="margin-bottom:5px;"></el-input>
                         <el-input type="text" v-model="item.linkUrl" placeholder="点击选择链接" size="small">
                           <el-button slot="append" @click="getMyChoice(index)">选择链接</el-button>
                         </el-input>
@@ -395,14 +407,19 @@
         isShowGoods: false,
         //添加的下标
         comIndex: -1,
-        commonIndex:0,
-        isShowLink:false,
+        commonIndex: 0,
+        isShowLink: false,
       };
     },
     created() {
 
     },
     methods: {
+      //选择数据
+      chooseData()
+      {
+
+      },
       //向父组件传值 并调用排序
       resetSord(IsUp) {
         this.$emit('getSord', this.index, IsUp);
@@ -423,9 +440,9 @@
             const defaultGoodsItem = {
               id: 0,
               name: '商品名称',
-              lableName:'',
+              lableName: '',
               picUrl: '',
-              linkUrl:'',
+              linkUrl: '',
             };
             newList = new Array(cat.goodsNum).fill(defaultGoodsItem);
           }
@@ -434,8 +451,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() {
@@ -460,47 +477,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:'' //链接
-        }
-        if(this.data.list.length<this.data.goodsLength){
+      addBanner() {
+        let obj = {
+          id: 0,
+          name: '', //标题
+          lableName: '', //副标题
+          picUrl: '', //商品图片
+          linkUrl: '' //链接
+        }
+        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==''){
+          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);
           // }
-        }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;
       },
     },