优化首页装修商品列表

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

@@ -6,8 +6,8 @@
              :class="{ isGoodCell3: formData.size === 3, isGoodCell1: formData.size === 1 }">
           <div class="goods-li-box"
                :class="{ 'no-goods-price': !formData.showContent.find(x => x === 3) && formData.showContent.find(x => x === 4) }">
-            <div class="goods-item" :class="{ goodsItem1: formData.size === 1 }" style="background: #fff"
-                 :style="'backgroundImage:url(' + formData.back_imgsrc + ');background-repeat: no-repeat;background-size: 100%'"
+            <div class="goods-item" :class="{ goodsItem1: formData.size === 1 }"
+                 :style="formData.back_type==='1' ? 'backgroundImage:url(' + formData.back_imgsrc + ');background-repeat: no-repeat;background-size: 100%;padding-bottom:'+formData.bottom_height+'px' : 'background: '+ formData.back_color +';padding-bottom:'+formData.bottom_height+'px'"
             >
               <!--图片-->
               <div class="goods-img-one"
@@ -16,7 +16,7 @@
                 <div :style="'backgroundImage: url(' + item.pic + ');width: '+formData.img_unit+'%;height: '+formData.img_unit+'%;padding-top: '+formData.img_unit+'%;background-repeat: no-repeat;background-size: 100%'"></div>
               </div>
               <!--end 图片-->
-              <div class="goods-box-info" :class="{ goodsBoxInfo1: formData.size === 1 }" style="display: flex;justify-content: center">
+              <div class="goods-box-info" :class="{ goodsBoxInfo1: formData.size === 1 }" :style="'display: flex;justify-content: center;margin-top: '+formData.info_top+'px'">
                 <div :style="'width: '+formData.info_unit+'%;'">
                   <div v-if="formData.showContent.find(x => x === 1)" class="goods-info-title">{{ item.prodName }}
                   </div>
@@ -150,13 +150,20 @@
               </div>
             </el-form-item>
             <el-form-item label="背景样式" class="goods-show-container">
-              <div class="goods-show-content">
+              <el-radio v-model="formData.back_type" label="1">图片背景</el-radio>
+              <el-radio v-model="formData.back_type" label="2">颜色背景</el-radio>
+              <div class="goods-show-content" v-show="formData.back_type === '1'">
                 <el-form-item label="背景图选择:">
                   <div :style="'width: 50px;height:50px;backgroundImage: url('+formData.back_imgsrc+');background-size: 100%; background-repeat: no-repeat;'">
                   </div>
                 </el-form-item>
                 <el-button @click="changeImg(2)">选择图片</el-button>
               </div>
+              <div class="goods-show-content" v-show="formData.back_type === '2'">
+                <el-form-item label="背景颜色选择:">
+                  <el-color-picker size="small" v-model="formData.back_color"></el-color-picker>
+                </el-form-item>
+              </div>
             </el-form-item>
             <el-form-item label="海报比例" class="goods-show-container">
               <el-input type="number" v-model="formData.img_unit"></el-input>
@@ -164,6 +171,12 @@
             <el-form-item label="详情比例" class="goods-show-container">
               <el-input type="number" v-model="formData.info_unit"></el-input>
             </el-form-item>
+            <el-form-item label="详情位置" class="goods-show-container">
+              <el-input type="number" v-model="formData.info_top"></el-input>
+            </el-form-item>
+            <el-form-item label="底部间距" class="goods-show-container">
+              <el-input type="number" v-model="formData.bottom_height"></el-input>
+            </el-form-item>
             <el-form-item v-if="formData.showContent.find(x => x === 4)" label="按钮样式" class="goods-show-container">
               <el-radio v-model="formData.button_type" label="1">图片按钮</el-radio>
               <el-radio v-model="formData.button_type" label="2">自定义按钮</el-radio>
@@ -258,9 +271,13 @@ export default {
         button_border_radius: 0, //购买按钮边框弧度
         button_back_color: '#ffffff', //购买按钮背景颜色
 
+        back_type: '2',
+        back_color: '#ffffff',
         back_imgsrc: undefined, //商品卡片背景图
         img_unit: 80,
         info_unit: 80,
+        info_top: 10,
+        bottom_height: 10
       },
       // 商品显示内容
       goodsShowContent: [