快捷购买

src/App.vue

@@ -283,7 +283,7 @@ export default {
       bindType: null,
       brief:'',
       categoryList: [],
-      categoryId: [],
+      categoryId: '',
     }
   },
   computed: {

src/components/View/editorBanner.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="banner">
-        <el-carousel height="170px" trigger="click" arrow="never" v-if="data.value.imageList.length > 0">
+        <el-carousel height="700px" trigger="click" arrow="never" v-if="data.value.imageList.length > 0">
             <el-carousel-item v-for="item, index in data.value.imageList" :key="index">
                 <img v-if="item.src" :src="item.src">
                 <img v-else src="../../assets/images/defaultimg.jpg" />

src/components/View/editorProduct.vue

@@ -1,5 +1,47 @@
 <template>
-    <div class="product" :class="className">
+    <div class="product-sol-box" v-if="content.value.simpleBuy">
+        <template v-if="content.value.productList && content.value.productList.length > 0">
+            <div class="product-sol">
+                <div class="product-sol-tit">行业方案</div>
+                <div class="product-sol-list">
+                    <div class="product-sol-li" :class="{active: index == 0}" v-for="(item, index) in content.value.productList" :key="index">
+                        <img :src="item.pic" alt="" class="product-sol-img">
+                        <p class="product-sol-name">{{ item.title }}</p>
+                        <img src="../../assets/images/sol_gou.png" class="product-sol-gou" v-if="index == 0">
+                    </div>
+                </div>
+                <div class="product-sol-sel">已选择<span>{{content.value.productList[0].title}}</span></div>
+                <div class="product-sol-opt">
+                    <div class="product-sol-price"><span class="t-hui">特惠价￥</span>{{ content.value.productList[0].minSalePrice?content.value.productList[0].minSalePrice:0 }}<span class="t-yuan" v-if="content.value.showOriginalPrice && content.value.productList[0].originalPrice > 0">￥{{ content.value.productList[0].originalPrice }}</span></div>
+                    <div class="product-sol-btn">立即抢购</div>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+        <div class="product-sol" v-if="content.value.simpleBuy">
+                <div class="product-sol-tit">行业方案</div>
+                <div class="product-sol-list">
+                    <div class="product-sol-li">
+                        <img src="../../assets/images/defaultimg.jpg" alt="" class="product-sol-img">
+                        <p class="product-sol-name">产品名称</p>
+                    </div>
+                    <div class="product-sol-li">
+                        <img src="../../assets/images/defaultimg.jpg" alt="" class="product-sol-img">
+                        <p class="product-sol-name">产品名称</p>
+                    </div>
+                    <div class="product-sol-li">
+                        <img src="../../assets/images/defaultimg.jpg" alt="" class="product-sol-img">
+                        <p class="product-sol-name">产品名称</p>
+                    </div>
+                </div>
+                <div class="product-sol-opt">
+                    <div class="product-sol-price">价格</div>
+                    <div class="product-sol-btn">立即抢购</div>
+                </div>
+            </div>
+        </template>
+    </div>
+    <div class="product" :class="className" v-else>
         <template v-if="content.value.productList && content.value.productList.length > 0">
             <div class="product-item" v-for="(item, index) in content.value.productList" :key="index">
                 <div class="image">
@@ -197,4 +239,22 @@ export default {
     margin-left: 4px;
     text-decoration: line-through;
 }
+
+.product-sol-box{padding: 4px 8px;box-sizing: border-box;}
+.product-sol-tit{font-size: 15px;color: #333;font-weight: bold;}
+.product-sol-list{display: flex;display: -webkit-flex;align-items: flex-start;margin-top: 5px;width: 100%;flex-wrap: wrap;}
+.product-sol-li{width: 32.33%;position: relative;margin-top: 10px;margin-right: 1.5%;border-radius: 5px;height: 108px;box-sizing: border-box;}
+.product-sol-li:nth-child(3n){margin-right: 0;}
+.product-sol-li.active{border: 3px solid #6BBFFF;}
+.product-sol-img{width: 100%;height: 100%;display: block;border-radius: 5px;}
+.product-sol-name{position: absolute;left: 0;right: 0;bottom: 0;background: rgba(51,51,51,.8);font-size: 14px;color: #fff;margin: 0;height: 27px;line-height: 27px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;text-align: center;}
+.product-sol-gou{position: absolute;right: 0;bottom: 0;}
+.product-sol-sel{margin-top: 20px;font-size: 15px;color: #999;}
+.product-sol-sel span{margin-left: 10px;color: #333;}
+.product-sol-opt{height: 35px;background-color: #FFE1CE;margin-top: 30px;padding: 5px;display: flex;display: -webkit-flex;justify-content: space-between;border-radius: 5px;}
+.product-sol-price{font-size: 20px;color: #FC3C31;line-height: 35px;}
+.t-hui{font-size: 12px;font-weight: bold;}
+.t-yuan{font-size: 12px;color: #909399;text-decoration: line-through;}
+.product-sol-btn{width: 113px;height: 35px;background: linear-gradient( 90deg, #FE934C 0%, #FD3A31 100%);border-radius: 5px;font-size: 18px;color: #fff;font-weight: bold;text-align: center;height: 35px;line-height: 35px;}
+
 </style>

src/components/setting/settingProduct.vue

@@ -4,7 +4,23 @@
             <h3 class="header-title">{{ content.name }}设置</h3>
             <a class="el-icon-close close-btn" @click="closeRightTemplateHandle"></a>
         </div>
-        <div class="tab">
+        <div class="options product-sel">
+            <el-form label-width="100px" label-position="left" style="text-align:right;">
+                <el-form-item label="快捷购买">
+                    是否开启
+                    <el-switch v-model="content.value.simpleBuy" :active-value="true" :inactive-value="false"
+                        @change="handleDate">
+                    </el-switch>
+                </el-form-item>
+                <el-form-item label="划线价">
+                    是否开启
+                    <el-switch v-model="content.value.showOriginalPrice" :active-value="true" :inactive-value="false"
+                        @change="handleDate">
+                    </el-switch>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="tab" v-if="!content.value.simpleBuy">
             <span v-for="(item, index) in 3" :key="index" @click="changeLayoutNum(index)"
                 :class="{ active: index + 1 == content.value.layoutNum }"><i class="el-icon-s-data"></i> {{ index + 1
                 }}</span>
@@ -21,30 +37,20 @@
                     </li>
                     <div style="flex: 1;min-width: 0;">
                         <div style="flex: 1;" class="tover">{{ item.title }}</div>
-                        <div style="display: flex;margin-top: 10px;">
+                        <div style="display: flex;margin-top: 10px;" v-if="!content.value.simpleBuy">
                             <div style="margin-right: 10px;">是否悬浮</div>
                             <el-switch v-model="item.isFixedNode" @change="fixedNodeChange($event,item)" :active-value="true" :inactive-value="false">
                         </el-switch>
                         </div>
+                        <div class="sol-price" v-else>
+                            ￥{{item.minSalePrice}}<span v-if="item.maxSalePrice > item.minSalePrice"> - {{item.maxSalePrice}}</span>
+                        </div>
                     </div>
                 </div>
             </ul>
         </template>
 
-        <div class="options">
-            <el-form label-width="100px">
-                <el-form-item label="划线价">
-                    <el-switch v-model="content.value.showOriginalPrice" :active-value="true" :inactive-value="false"
-                        @change="handleDate">
-                    </el-switch>
-                </el-form-item>
-                <el-form-item label="简单流程">
-                    <el-switch v-model="content.value.simpleBuy" :active-value="true" :inactive-value="false"
-                        @change="handleDate">
-                    </el-switch>
-                </el-form-item>
-            </el-form>
-        </div>
+        
 
         <el-dialog title="添加商品" :visible.sync="show" @close="close">
             <el-form label-width="100px">
@@ -401,7 +407,7 @@ export default {
 }
 
 .product-content .options .el-form {
-    background: #f7f8f9;
+    // background: #f7f8f9;
     overflow: hidden;
     padding: 10px 0;
 }
@@ -415,4 +421,5 @@ export default {
 }
 
 .tover{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
+.sol-price{font-size: 16px;color: #F56C6C;margin-top: 20px;}
 </style>