1、商品列表装修自定义按钮已完成

src/views/common/home.vue

@@ -459,7 +459,6 @@ export default {
     }
   },
   mounted () {
-    debugger
     let user = this.$store.state.user
     this.employeeType = user.employeeType
     this.getpayActualTotalByDay()

src/views/modules/shop/feature/create/edit/components/goods/index.vue

@@ -180,11 +180,11 @@
 
 <!--            新版本，每个都可设置-->
             <el-form-item label="按钮样式" class="goods-show-container">
-              <div v-for="(item, index) in goodsList" :key="index" class="goods-select-item">
+              <div v-for="(item, index) in formData.goodsDetail" :key="index" class="goods-select-item">
                 <div style="border: 1px solid deepskyblue;margin-bottom: 5px;">
                   <div style="display: inline-flex;">
                     <div style="display: inline-block;margin: 5px;width: 50px;height: 50px;line-height: 50px;text-align: center;">{{index+1}}</div>
-                    <el-image :src="item.pic" style="width: 50px;height: 50px;margin: 5px 5px 5px 0;"></el-image>
+                    <el-image :src="goodsList.find(i => i.prodId === item.prodId).pic" style="width: 50px;height: 50px;margin: 5px 5px 5px 0;"></el-image>
                   </div>
                   <div style="display: inline-block;">
 <!--                    <div style="display: none;">{{item.styleData = new Object()}}</div>-->
@@ -197,12 +197,19 @@
                       <el-input type="number" v-model="item.button_img_height" placeholder="高度"></el-input>
                     </div>
                     <!-- 自定义按钮样式 -->
-                    <div style="display: inline-flex;margin: 3px;padding: 3px;border: 1px double darkgreen;" v-show="item.button_type === '2'">
-                      <el-input type="text" size="small" v-model="item.button_text" maxlength="4" placeholder="文本内容"></el-input>
-                      <el-color-picker size="small" v-model="item.button_font_color" placeholder="文本颜色"></el-color-picker>
-                      <el-input type="number" size="small" v-model="item.button_font_size" placeholder="字体大小"></el-input>
-                      <el-input type="number" size="small" v-model="item.button_border_radius" placeholder="边框弧度"></el-input>
-                      <el-color-picker size="small" v-model="item.button_back_color" placeholder="背景颜色"></el-color-picker>
+                    <div style="margin: 3px;padding: 3px;border: 1px double darkgreen;" v-show="item.button_type === '2'">
+                      <el-row>
+                        <el-col :span="10"><el-input type="text" size="small" v-model="item.button_text" maxlength="6" placeholder="文本内容"></el-input></el-col>
+                        <el-col :span="10"><el-input type="number" size="small" v-model="item.button_font_size" placeholder="字体大小"></el-input></el-col>
+                        <el-col :span="4"><el-color-picker size="small" v-model="item.button_font_color"></el-color-picker></el-col>
+                      </el-row>
+                      <el-row>
+                        <el-col :span="20"><el-input type="number" size="small" v-model="item.button_border_radius" placeholder="边框弧度"></el-input></el-col>
+                        <el-col :span="4"><el-color-picker size="small" v-model="item.button_back_color"></el-color-picker></el-col>
+                      </el-row>
+                      <el-row>
+                        <el-col :span="24"><el-input type="text" size="small" v-model="item.route_path" placeholder="自定义跳转路径"></el-input></el-col>
+                      </el-row>
                     </div>
                   </div>
 
@@ -237,6 +244,9 @@
                   <el-form-item label="字体大小:">
                     <el-input type="number" size="small" v-model="formData.button_font_size"></el-input>
                   </el-form-item>
+                  <el-form-item label="文本颜色">
+                    <el-color-picker size="small" v-model="formData.button_font_color"></el-color-picker>
+                  </el-form-item>
                   <el-form-item label="边框弧度:">
                     <el-input type="number" size="small" v-model="formData.button_border_radius"></el-input>
                   </el-form-item>
@@ -302,10 +312,10 @@ export default {
         button_text: '去定制',// 购买按钮的文本
         icon_class: 'el-icon-s-goods', //购买按钮的icon
         button_font_size: 10,// 购买按钮的字体大小
-        button_font_color: '#999999',// 购买按钮的字体大小
+        button_font_color: '#FFFFFF',// 购买按钮的字体大小
         button_border_radius: 5, //购买按钮边框弧度
         button_back_color: '#ffffff', //购买按钮背景颜色
-
+        goodsDetail:[],
         back_type: '2',
         back_color: '#ffffff',
         back_imgsrc: undefined, //商品卡片背景图
@@ -350,7 +360,7 @@ export default {
       // 获取的接口数据
       goodsList: [],
       // 默认数据
-      demoGoods: []
+      demoGoods: [],
     }
   },
   watch: {
@@ -358,23 +368,10 @@ export default {
       deep: true,
       handler (val) {
         if (val.length) {
-          debugger
           if (!this.goodsList.find(x => x.myGoodsType === 1)) {
-            // this.formData.goods = []
-            this.formData.goodsTest = []
+            this.formData.goods = []
             val.map(res => {
-
-              this.formData.goodsTest.push({
-                prodId: res.prodId,
-                button_type: res.button_type,
-                button_img_width: res.button_img_width,
-                button_img_height: res.button_img_height,
-                button_text: res.button_text,
-                button_font_color: res.button_font_color,
-                button_font_size: res.button_font_size,
-                button_border_radius: res.button_border_radius,
-                button_back_color: res.button_back_color
-              })
+              this.formData.goods.push(res.prodId)
             })
             this.goodsList.concat(val)
           } else {
@@ -386,6 +383,7 @@ export default {
       }
     }
   },
+
   filters: {
     buy_btn_type (val) { // 标题
       let str = ''
@@ -426,7 +424,7 @@ export default {
       this.goodsList = this.demoGoods
     }
     if (Object.keys(this.dataField).length !== 0) {
-      this.getGoodsInfo(this.dataField.goods, '')
+      this.getGoodsInfo(this.dataField.goods, '');
     }
   },
   methods: {
@@ -452,7 +450,6 @@ export default {
      * @param {String} imgPath：单图   imagePaths 无前缀的图片地址字符串(多图时用,分割)
      */
     refreshPic({imgPath, imagePaths, prodIndex}) {
-      debugger
       if (prodIndex == null || prodIndex == undefined){
         if(this.currentEditIndex===1){
           this.formData.button_imgsrc = this.resourcesUrl + imgPath
@@ -471,7 +468,6 @@ export default {
       console.log(index)
       this.isChangeImg = true
       this.currentEditIndex = index
-      debugger
       this.prodIndex = prodIndex
       this.elxImgboxHandle(1)
       // this.canChooseImagesNum = 1
@@ -522,6 +518,35 @@ export default {
             item.pic = process.env.VUE_APP_RESOURCES_URL + item.pic
           }
         })
+       if(!!this.formData.goodsDetail){
+         this.formData.goodsDetail.forEach(gd =>{
+             gd.button_type = !!gd.button_type? gd.button_type: this.formData.button_type,
+             gd.button_img_width = !!gd.button_img_width? gd.button_img_width: this.formData.button_img_width,
+             gd.button_img_height = !!gd.button_img_height? gd.button_img_height: this.formData.button_img_height,
+             gd.button_text = !!gd.button_text? gd.button_text: this.formData.button_text,
+             gd.button_font_color = !!gd.button_font_color? gd.button_font_color: this.formData.button_font_color,
+             gd.button_font_size = !!gd.button_font_size? gd.button_font_size: this.formData.button_font_size,
+             gd.button_border_radius = !!gd.button_border_radius? gd.button_border_radius: this.formData.button_border_radius,
+             gd.button_back_color = !!gd.button_back_color? gd.button_back_color: this.formData.button_back_color,
+             gd.route_path = !!gd.route_path? gd.route_path : this.formData.route_path
+         })
+       }
+        if(this.formData.goodsDetail.length === 0){
+          this.goodsList.forEach(item =>{
+            this.formData.goodsDetail.push(
+              { prodId: item.prodId,
+                button_type:this.formData.button_type,
+                button_img_width:this.formData.button_img_width,
+                button_img_height:this.formData.button_img_height,
+                button_text:this.formData.button_text,
+                button_font_color:this.formData.button_font_color,
+                button_font_size:this.formData.button_font_size,
+                button_border_radius:this.formData.button_border_radius,
+                button_back_color:this.formData.button_back_color,
+                route_path:this.formData.route_path,
+              })
+          })
+        }
       })
     },
     /**