修改bug

canvas-container/components/canvasEditPage.vue

@@ -175,7 +175,7 @@
               break
             case 'productList':
               _data = newVal.productData
-              if((_data.sourceType=='1' && _data.productIdList.length > 0) || (_data.sourceType=='2' && _data.categoryId != 0)){
+              if((_data.sourceType=='1' && _data.productIdList.length > 0) || (_data.sourceType=='2' && _data.categoryId != 0) || (_data.sourceType!='1' && _data.sourceType!='2')){
                 isEmpty = false
               }
               break
@@ -252,7 +252,7 @@
 
 <style lang="scss" scoped>
 .hom-layout {
-  background-color: #fff;
+  background-color: #FAFAFA;
   ::v-deep .sortable-chosen {
     .contentBox {
       display: none;
@@ -274,7 +274,7 @@
   .list-group-item {
     position: relative;
     cursor: move;
-    background-color: #fff;
+    background-color: #FAFAFA;
     min-height: 60px;
     &.item-assistDiv,&.item-notice,&.item-text{
       min-height: 0px;

canvas-container/components/canvasShow/basics/classifyheader/app/index.vue

@@ -3,8 +3,8 @@
     <div class="tabs-nav-warp">
       <div class="tabs-nav" scroll-x="true">
         <div class="ul">
-          <div class="li" :class="{'on':activeTab===0}" @click="tabChange(0)">首页</div>
-          <div class="li" :class="{'on':activeTab===index+1}" v-for="(item,index) in classifyData" :key="index">
+          <div class="li" :class="{'on':activeTab===0}" @click="tabChange(0)" v-if="componentContent.firstClassify">{{componentContent.firstClassify}}</div>
+          <div class="li" :class="{'on':activeTab===index+beginIndex}" v-for="(item,index) in classifyData" :key="index">
             {{item.categoryName}}
           </div>
         </div>
@@ -19,12 +19,10 @@ export default {
   mixins: [commonMixin],
   data () {
     return {
+      beginIndex:(this.componentContent.firstClassify && this.componentContent.firstClassify.length ) ? 1 : 0,
       activeTab: 0
     }
-  },
-  computed: {
-
-  },
+  }
 }
 </script>
 
@@ -37,27 +35,27 @@ export default {
     .tabs-nav{
       .ul{
         display: flex;
+        padding-left: 20px;
+		      padding-right: 20px;
         .li{
           flex: 1 0 auto;
-          margin-left: 36px;
+          margin-left: 5px;
+		      margin-right: 5px;
           font-size: 30px;
-          color: #999999;
+          color: #252744;
           position: relative;
-          padding-bottom: 18px;
+          padding-bottom: 15px;
+          padding-left: 27px;
+          padding-right: 27px;
+          padding-top: 15px;
           &:first-child{
             margin-left: 0;
           }
           &.on{
-            &:after{
-              content: '';
-              width: 100%;
-              height: 4px;
-              background: #C5AA7B;
-              position: absolute;
-              left: 0;
-              bottom: 0;
-            }
-            font-weight:bold;
+            background: #252744;
+              box-shadow: 0px 7px 14px 0px #C5C8ED;
+              border-radius: 40px;
+              color: white;
           }
         }
       }

canvas-container/components/canvasShow/basics/classifyheader/mixin.js

@@ -39,7 +39,6 @@ export const commonMixin = {
       }, (res) => {
         _.afterGetData()
         _.classifyData = res.data
-        console.log(_.classifyData)
       },(err)=>{
         _.afterGetData()
       })

canvas-container/components/canvasShow/basics/classifyheader/pc/index.vue

@@ -2,17 +2,21 @@
   <div class="header">
     <nav class="nav">
       <ul>
-        <li class="on">
+        <li class="on" v-if="false">
           <router-link to="/">
             首页
           </router-link>
         </li>
-        <li v-for="(item,index) in classifyData.slice(0, 6)" :key="index" @click="jumpCategory(item)">
-          {{item.categoryName}}
+        <li v-for="(item,index) in classifyData" :key="index" @click="jumpCategory(item)">
+          <div class="classify-item">
+            <img class="classify-img" :src="item.classifyImage">
+            <span class="classify-name" >{{item.categoryName}}</span>
+          </div>
+          
         </li>
       </ul>
     </nav>
-    <div class="search">
+    <div class="search" v-if="false">
       <div class="searchSelect">
         <el-dropdown trigger="click">
               <span class="el-dropdown-link">{{ $t('common.beautiproduct') }}
@@ -43,11 +47,10 @@
 
 <style lang="scss" scoped>
   .header{
-    height: 80px;
     width: 1200px;
     margin: 0 auto;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
     .nav{
@@ -66,8 +69,33 @@
         cursor: pointer;
         border-bottom: 3px solid #fff;
         &.on,&:hover{
-          color: #C5AA7B;
-          border-color: #C5AA7B;
+          transform: scale(1.2);
+        }
+        .classify-item{
+          width: 126px;
+          height: 204px;
+          background: #F6F6F8;
+          box-shadow: 0rpx 12rpx 27rpx 0rpx #E2E2E2;
+          border-radius: 8rpx;
+          border: 1px solid #FFFFFF;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          align-content: center;
+          justify-content: center;
+          align-items: center;
+
+          .classify-img{
+            height: 100px;
+          }
+
+          .classify-name{
+            margin-top: 48px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            font-size: 12px;
+            color: #252744;
+          }
         }
       }
     }

canvas-container/components/canvasShow/basics/product/app/index.vue

@@ -1,76 +1,185 @@
 <template>
   <div class="hom-pro-list">
-    <div class="title">
-      <img src="../../../static/images/product/img-title.png" alt="商品推荐"/>
-    </div>
+
     <div v-if="componentContent.arrangeType == '横向滑动'" class="product-list product-swiper">
       <swiper ref="mySwiper" class="product-list-box" :options="swiperOption">
-        <swiper-slide class="product-list-item" v-for="(item,index) in productData.slice(0, 10)" :key="index" @click="jumpProductDetail(item)">
-          <div class="product-list-img">
-            <img v-show="item.image" class="img" :src="item.image">
+        <swiper-slide class="item" v-for="(item, index) in productData" :key="index" @click="jumpProductDetail(item)">
+          <div class="product-list-item" v-if="componentContent.productStyleValue == '1'">
+            <div class="product-list-img">
+              <img v-show="item.image" class="img" :src="item.image">
+            </div>
+            <div class="product-list-info">
+              <label class="product-name">{{ item.productName }}</label>
+              <div>
+                <div class="shop-box" v-if="typeId == 1" @click.stop="jumpStore(item)">
+                  <label class="shop-name">{{ item.shopName }}</label>
+                  <div class="shop-logo">
+                    <img :src="item.shopLogo">
+                  </div>
+                </div>
+                <label class="buy-count">{{ item.users ? item.users : 0 }}人付款</label>
+              </div>
+              <div class="price-warp">
+                <div class="price">
+                  ¥ {{ item.price }}
+                </div>
+                <div class="original-price">
+                  ¥ {{ item.originalPrice }}
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="product-list-info">
-            <label class="product-name">{{item.productName}}</label>
-            <div>
-              <div class="shop-box" v-if="typeId == 1" @click.stop="jumpStore(item)">
-                <label class="shop-name">{{item.shopName}}</label>
-                <div class="shop-logo">
-                  <img :src="item.shopLogo">
+
+          <div class="product-swiper-item" v-if="componentContent.productStyleValue == '2'">
+            <div class="product-swiper-img">
+              <img class="img pic-img default-img" :src="item.image"
+                onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null">
+            </div>
+            <div class="product-swiper-info">
+              <div class="product-info-content">
+                <div class="product-name-row">
+                  <label class="product-name">{{ item.productName }}</label>
+                  <img class="product-star" src="../../../static/images/product/icon_star.png">
+
+                  <label class="product-star-text">{{ item.qaNum || 3.5 }}</label>
+                </div>
+                <div class="product-price-row">
+                  <div class="price-warp">
+                    ¥ {{ item.price }}
+                  </div>
+                  <img class="product-add" src="../../../static/images/product/icon_add.png">
                 </div>
+
               </div>
-              <label class="buy-count">{{item.users?item.users: 0}}人付款</label>
             </div>
-            <div class="price-warp">
-              <div class="price">
-                ¥ {{item.price}}
+          </div>
+
+          <div class="item3" v-if="componentContent.productStyleValue == '3'">
+            <div class="item3_name">{{ item.productName }}</div>
+            <div class="item3_image"><el-image :src="item.image" fit="contain"></el-image></div>
+            <div class="item3_btn_row">
+              <div class="item3_btn">点击</div>
+            </div>
+          </div>
+
+          <div class="item4" v-if="componentContent.productStyleValue == '4'">
+           
+            <div class="item4_content">
+              <div class="item4_image"><el-image :src="item.image" fit="contain"></el-image></div>
+              <div class="item4_info">
+                <div class="item4_name">{{ item.productName }}</div>
+                <div class="item4_price">¥{{ item.price }}</div>
               </div>
-              <div class="original-price">
-                ¥ {{item.originalPrice}}
+
+              <div class="item4_arrow">
+                <img src="../../../static/images/product/icon_right_arrow.png">
               </div>
             </div>
+
+            <div class="item4_index_image" v-if="index < 3">
+              <img src="../../../static/images/product/icon_index_1.png" v-if="index == 0">
+              <img src="../../../static/images/product/icon_index_2.png" v-if="index == 1">
+              <img src="../../../static/images/product/icon_index_3.png" v-if="index == 2">
+            </div>
           </div>
         </swiper-slide>
       </swiper>
       <div class="pagination product-pagination" slot="pagination"></div>
     </div>
     <div v-if="componentContent.arrangeType == '多行多列'" class="product-list">
-      <div class="product-list-box" >
-        <div class="product-list-item" v-for="(item,index) in productData" :key="index" @click="jumpProductDetail(item)">
-          <div class="product-list-img">
-            <img v-show="item.image" class="img" :src="item.image">
+      <div class="product-list-box">
+        <div class="item" v-for="(item, index) in productData" :key="index" @click="jumpProductDetail(item)">
+          <div class="product-list-item" v-if="componentContent.productStyleValue == '1'">
+            <div class="product-list-img">
+              <img v-show="item.image" class="img" :src="item.image">
+            </div>
+            <div class="product-list-info">
+              <label class="product-name">{{ item.productName }}</label>
+              <div>
+                <div class="shop-box" v-if="typeId == 1" @click.stop="jumpStore(item)">
+                  <label class="shop-name">{{ item.shopName }}</label>
+                  <div class="shop-logo">
+                    <img :src="item.shopLogo">
+                  </div>
+                </div>
+                <label class="buy-count">{{ item.users ? item.users : 0 }}人付款</label>
+              </div>
+              <div class="price-warp">
+                <div class="price">
+                  ¥ {{ item.price }}
+                </div>
+                <div class="original-price">
+                  ¥ {{ item.originalPrice }}
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="product-list-info">
-            <label class="product-name">{{item.productName}}</label>
-            <div>
-              <div class="shop-box" v-if="typeId == 1" @click.stop="jumpStore(item)">
-                <label class="shop-name">{{item.shopName}}</label>
-                <div class="shop-logo">
-                  <img :src="item.shopLogo">
+
+          <div class="product-swiper-item" v-if="componentContent.productStyleValue == '2'">
+            <div class="product-swiper-img">
+              <img class="img pic-img default-img" :src="item.image"
+                onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null">
+            </div>
+            <div class="product-swiper-info">
+              <div class="product-info-content">
+                <div class="product-name-row">
+                  <label class="product-name">{{ item.productName }}</label>
+                  <img class="product-star" src="../../../static/images/product/icon_star.png">
+
+                  <label class="product-star-text">{{ item.qaNum || 3.5 }}</label>
                 </div>
+                <div class="product-price-row">
+                  <div class="price-warp">
+                    ¥ {{ item.price }}
+                  </div>
+                  <img class="product-add" src="../../../static/images/product/icon_add.png">
+                </div>
+
               </div>
-              <label class="buy-count">{{item.users?item.users: 0}}人付款</label>
             </div>
-            <div class="price-warp">
-              <div class="price">
-                ¥ {{item.price}}
+          </div>
+
+          <div class="item3" v-if="componentContent.productStyleValue == '3'">
+            <div class="item3_name">{{ item.productName }}</div>
+            <div class="item3_image"><el-image :src="item.image" fit="contain"></el-image></div>
+            <div class="item3_btn_row">
+              <div class="item3_btn">点击</div>
+            </div>
+          </div>
+
+          <div class="item4" v-if="componentContent.productStyleValue == '4'">
+           
+            <div class="item4_content">
+              <div class="item4_image"><el-image :src="item.image" fit="contain"></el-image></div>
+              <div class="item4_info">
+                <div class="item4_name">{{ item.productName }}</div>
+                <div class="item4_price">¥{{ item.price }}</div>
               </div>
-              <div class="original-price">
-                ¥ {{item.originalPrice}}
+
+              <div class="item4_arrow">
+                <img src="../../../static/images/product/icon_right_arrow.png">
               </div>
             </div>
+
+            <div class="item4_index_image" v-if="index < 3">
+              <img src="../../../static/images/product/icon_index_1.png" v-if="index == 0">
+              <img src="../../../static/images/product/icon_index_2.png" v-if="index == 1">
+              <img src="../../../static/images/product/icon_index_3.png" v-if="index == 2">
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <button v-show="componentContent.showMore" class="btn-more" @click="jumpLink(componentContent.linkObj)">{{ $t('common.seeall') }} <span class="icon iconfont icon-arrow-right"></span></button>
+    <button v-show="componentContent.showMore" class="btn-more" @click="jumpLink(componentContent.linkObj)">{{
+      $t('common.seeall') }} <span class="icon iconfont icon-arrow-right"></span></button>
   </div>
 </template>
 
 <script>
-import {commonMixin} from '../mixin'
+import { commonMixin } from '../mixin'
 export default {
   mixins: [commonMixin],
-  data () {
+  data() {
     return {
       swiperOption: {
         slidesPerView: 2,
@@ -92,127 +201,442 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.hom-pro-list{
+.hom-pro-list {
   padding: 20px 0;
-  .title{
+
+  .title {
     text-align: center;
     margin-bottom: 20px;
-    label{
+
+    label {
       background: url("../../../static/images/icon-title.png") no-repeat left center;
       font-size: 30px;
       font-weight: bold;
       padding-left: 48px;
     }
   }
+
   /**多行多列**/
   .product-list {
     position: relative;
-    &-box {
+
+    .product-list-box {
       display: flex;
       flex-wrap: wrap;
       flex-direction: row;
       padding-left: 20px;
-      ::v-deep .swiper-pagination-bullet{
+      padding-right: 20px;
+
+      ::v-deep .swiper-pagination-bullet {
         display: none;
       }
     }
-    &.product-swiper .product-list-box{
-      margin: 0 20px;
+
+    .product-swiper .product-list-box {
+      margin: 0 ;
       padding-left: 0;
     }
-    &-item {
-      margin: 0 14px 20px 0;
-      width: 348px;
-    }
-    &-img {
-      width: 348px;
-      height: 348px;
-      background-color: #f5f5f5;
-      border-radius: 10px 10px 0 0;
-      .img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-    &-info {
-      background-color: #FFFFFF;
-      //box-shadow: 0px 0px 15px 0px rgba(52, 52, 52, 0.15);
-      border-radius: 0 0 10px 10px;
-      padding: 20px;
-      label{
-        font-weight: normal;
-      }
-      .product-name{
-        font-size: 28px;
-        color: #333;
-        display: block;
-        overflow: hidden;
-        text-overflow:ellipsis;
-        white-space: nowrap;
-        margin-bottom: 18px;
-        line-height: 40px;
-      }
-      .shop-box{
-        background-color: #333333;
-        border-radius: 0px 20px 20px 0px;
-        line-height: 40px;
-        display: inline-block;
-        height: 40px;
-        margin-right: 10px;
-        .shop-name{
-          font-size: 20px;
-          color: #FFEBC4;
-          padding: 0 8px 0 12px;
+
+    .item {
+      width:auto !important;
+      margin-right: 0px !important;
+
+      .product-list-item {
+        margin: 0 14px 20px 0;
+        width: 348px;
+
+        .product-list-img {
+          width: 348px;
+          height: 348px;
+          background-color: #f5f5f5;
+          border-radius: 10px 10px 0 0;
+
+          .img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+
+
         }
-        .shop-logo{
-          border: 2px solid #707070;
-          border-radius: 50%;
-          overflow: hidden;
-          float: right;
-          img{
-            width: 34px;
-            height: 34px;
+
+        .product-list-info {
+          background-color: #FFFFFF;
+          //box-shadow: 0px 0px 15px 0px rgba(52, 52, 52, 0.15);
+          border-radius: 0 0 10px 10px;
+          padding: 20px;
+
+          label {
+            font-weight: normal;
+          }
+
+          .product-name {
+            font-size: 28px;
+            color: #333;
             display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-bottom: 18px;
+            line-height: 40px;
+          }
+
+          .shop-box {
+            background-color: #333333;
+            border-radius: 0px 20px 20px 0px;
+            line-height: 40px;
+            display: inline-block;
+            height: 40px;
+            margin-right: 10px;
+
+            .shop-name {
+              font-size: 20px;
+              color: #FFEBC4;
+              padding: 0 8px 0 12px;
+            }
+
+            .shop-logo {
+              border: 2px solid #707070;
+              border-radius: 50%;
+              overflow: hidden;
+              float: right;
+
+              img {
+                width: 34px;
+                height: 34px;
+                display: block;
+              }
+            }
+          }
+
+          .buy-count {
+            color: #C5AA7B;
+            font-size: 20px;
+            margin-bottom: 16px;
+            border: 2px solid #E4E5E6;
+            line-height: 40px;
+            padding: 0 5px;
+            display: inline-block;
+          }
+
+          .price-warp {
+            display: flex;
+            align-items: baseline;
+            line-height: 56px;
+
+            .price {
+              color: #C83732;
+              font-size: 40px;
+              margin-right: 20px;
+            }
+
+            .original-price {
+              font-size: 24px;
+              color: #ccc;
+              text-decoration: line-through;
+            }
           }
         }
       }
-      .buy-count{
-        color: #C5AA7B;
-        font-size: 20px;
-        margin-bottom: 16px;
-        border: 2px solid #E4E5E6;
-        line-height: 40px;
-        padding: 0 5px;
-        display: inline-block;
+
+      .product-swiper-item {
+        height: 320px;
+        width: 242px !important;
+        position: relative;
+        margin-left: 10px;
+        margin-right: 10px;
+
+
+        .product-swiper-img {
+          width: 210px;
+          height: 220px;
+          margin-left: auto;
+          margin-right: auto;
+          background: #F6F6F8;
+          border: 2px solid #FFFFFF;
+          border-radius: 16px;
+          position: relative;
+          padding: 20px;
+          z-index: 2;
+          box-sizing: border-box;
+
+          .img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+
+        .product-swiper-info {
+          width: 242px;
+          height: 210px;
+          position: absolute;
+          top: 110px;
+          background: #FDFDFD;
+          box-shadow: 0px 16px 24px 0px #F6F6F6;
+          border-radius: 16px;
+          text-align: center;
+
+          .product-info-content {
+            margin-top: 125px;
+
+            .product-name-row {
+              width: 100%;
+              height: 22px;
+              line-height: 22px;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-content: center;
+              justify-content: flex-start;
+              align-items: center;
+
+              .product-name {
+                width: 100%;
+                height: auto;
+                font-size: 16px;
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                color: #252744;
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                line-height: 28px;
+                margin-left: 24px;
+                text-align: left;
+              }
+
+              .product-star {
+                width: 22px;
+                height: 22px;
+              }
+
+              .product-star-text {
+                width: auto;
+                height: 28px;
+                line-height: 28px;
+                font-size: 14px;
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                color: #A5A5AD;
+                margin-right: 20px;
+                margin-left: 5px;
+              }
+            }
+
+            .product-sku-row {
+              width: 100%;
+              height: 28px;
+              line-height: 28px;
+              margin-top: 15px;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-content: center;
+              justify-content: flex-start;
+              align-items: center;
+
+              .product-sku-name {
+                font-size: 24px;
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                color: #90919C;
+                margin-left: 30px;
+              }
+            }
+
+            .product-price-row {
+              width: 100%;
+              height: 50px;
+              line-height: 50px;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              align-content: center;
+              justify-content: space-between;
+              align-items: center;
+              margin-top: 10px;
+
+              .price-warp {
+                display: flex;
+                align-items: center;
+                line-height: 28px;
+                margin-left: 24px;
+                justify-content: flex-start;
+                width: auto;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                font-size: 14px;
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                color: #252744;
+              }
+
+              .product-add {
+                width: 50px;
+                height: 50px;
+                margin-right: 24px;
+              }
+            }
+
+
+          }
+        }
       }
-      .price-warp{
+
+      .item3 {
         display: flex;
-        align-items: baseline;
-        line-height: 56px;
-        .price{
-          color: #C83732;
-          font-size: 40px;
-          margin-right: 20px;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+        background: #F6F6F8;
+        box-shadow: 0px 12px 24px 0px #EDEDED;
+        border-radius: 24px;
+        border: 1px solid #FFFFFF;
+        width: 280px;
+        height: 400px;
+        margin: 10px 10px;
+
+        .item3_name {
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 14px;
+          color: #252744;
+          margin-top: 15px;
         }
-        .original-price{
-          font-size: 24px;
-          color: #ccc;
-          text-decoration: line-through;
+
+        .item3_image {
+          margin: 15px;
+          width: 100%;
+
+          padding: 10px;
+
+          el-image{
+            width: 100%;
+          }
+        }
+
+        .item3_btn_row {
+          margin-bottom: 15px;
+
+          .item3_btn {
+            background: #252744;
+            border-radius: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            font-size: 12px;
+            color: #FFFFFF;
+            padding-left: 20px;
+            padding-right: 20px;
+            padding-top: 8px;
+            padding-bottom: 8px;
+          }
         }
       }
+
+      .item4 {
+        width: 680px;
+    height: 210px;
+    margin: 10px 20px;
+        background: #FDFDFD;
+        box-shadow: 0px 24px 60px 0px #E5E5E5;
+        border-radius: 16px;
+        position: relative;
+
+        .item4_index_image {
+          width: 50px;
+          height: 50px;
+          position: absolute;
+          left: 26px;
+          z-index: 100;
+
+          img {
+            width: 100%;
+          }
+        }
+
+        .item4_content {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-content: center;
+          justify-content: space-between;
+          align-items: center;
+
+          .item4_image {
+            width: 164px;
+            height: 164px;
+            background: #F6F6F7;
+            border-radius: 8rpx;
+            margin: 24px;
+
+            img {
+              width: 100%;
+            }
+          }
+
+          .item4_info {
+            height: 100%;
+            padding-top: 46px;
+            padding-bottom: 46px;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            align-content: center;
+            justify-content: space-between;
+            align-items: flex-start;
+
+            .item4_name {
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              font-size: 20px;
+              color: #252744;
+            }
+
+            .item4_price {
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              font-size: 20px;
+              color: #252744;
+            }
+          }
+
+          .item4_arrow {
+            width: 20px;
+            height: 20px;
+            margin: 24px;
+
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+
+      }
     }
+
+
+
     //::v-deep .swiper-pagination-bullet{
     //  display: none;
     //}
   }
 }
 
-.pagination{
+.pagination {
   display: flex;
   justify-content: center;
   padding: 20px 0;
-  ::v-deep .swiper-pagination-bullet{
+
+  ::v-deep .swiper-pagination-bullet {
     width: 10px;
     height: 10px;
     background: #333333;
@@ -220,12 +644,14 @@ export default {
     border-radius: 5px;
     margin: 0 5px;
   }
-  ::v-deep .swiper-pagination-bullet-active{
+
+  ::v-deep .swiper-pagination-bullet-active {
     width: 20px;
     height: 10px;
     opacity: 1;
   }
 }
+
 .btn-more {
   width: 170px;
   height: 54px;
@@ -236,5 +662,4 @@ export default {
   margin: 20px auto 0;
   display: block;
 }
-
 </style>

canvas-container/components/canvasShow/basics/product/mixin.js

@@ -82,7 +82,7 @@ export const commonMixin = {
         if(_.componentContent.productData.categoryId) {
           this.beforeGetData()
           _.sendReq({
-            url: `${api.getProducts}?page=1&pageSize=99&classifyId=${_.componentContent.productData.categoryId}`,
+            url: `${api.getProducts}?page=1&pageSize=20&classifyId=${_.componentContent.productData.categoryId}`,
             method: 'GET'
           }, (proRes) => {
             _.afterGetData()
@@ -99,6 +99,66 @@ export const commonMixin = {
             products:[]
           }
         }
+      }else if(_.componentContent.productData.sourceType === '3'){
+        this.beforeGetData()
+        _.sendReq({
+          url: `${api.getProducts}?page=1&pageSize=20&type=4`,
+          method: 'GET'
+        }, (proRes) => {
+          _.afterGetData()
+          _.productData = proRes.data.list
+          if(isFirst){
+            _.componentContent.productData.imgTextData = _.productData
+          }
+          // _.swiper.update()
+        },(err)=>{
+          _.afterGetData()
+        })
+      }else if(_.componentContent.productData.sourceType === '4'){
+        this.beforeGetData()
+        _.sendReq({
+          url: `${api.getProducts}?page=1&pageSize=20&type=5`,
+          method: 'GET'
+        }, (proRes) => {
+          _.afterGetData()
+          _.productData = proRes.data.list
+          if(isFirst){
+            _.componentContent.productData.imgTextData = _.productData
+          }
+          // _.swiper.update()
+        },(err)=>{
+          _.afterGetData()
+        })
+      }else if(_.componentContent.productData.sourceType === '5'){
+        this.beforeGetData()
+          _.sendReq({
+            url: `${api.getProducts}?page=1&pageSize=20&type=6`,
+            method: 'GET'
+          }, (proRes) => {
+            _.afterGetData()
+            _.productData = proRes.data.list
+            if(isFirst){
+              _.componentContent.productData.imgTextData = _.productData
+            }
+            // _.swiper.update()
+          },(err)=>{
+            _.afterGetData()
+          })
+      }else if(_.componentContent.productData.sourceType === '6'){
+        this.beforeGetData()
+          _.sendReq({
+            url: `${api.getProducts}?page=1&pageSize=6&type=7`,
+            method: 'GET'
+          }, (proRes) => {
+            _.afterGetData()
+            _.productData = proRes.data.list
+            if(isFirst){
+              _.componentContent.productData.imgTextData = _.productData
+            }
+            // _.swiper.update()
+          },(err)=>{
+            _.afterGetData()
+          })
       }
     },
   }

canvas-container/components/canvasShow/basics/product/pc/index.vue

@@ -1,226 +1,632 @@
 <template>
-  <div class="product-list" :class="'terminal'+terminal">
+  <div class="product-list" :class="'terminal' + terminal">
     <div class="picListWarp" v-if="componentContent.arrangeType == '横向滑动'">
-      <div class="picList" v-if="productData && productData.length>0">
+      <div class="picList" v-if="productData && productData.length > 0">
         <div class="swiper-button-prev"></div>
         <div class="swiper-button-next"></div>
         <swiper ref="swiper" class="products-swiper" :options="swiperOption">
-          <swiper-slide class="products-swiper-slide item" v-for="(item,index) in productData" :key="index">
-            <div class="a-link" @click="jumpProductDetail(item)">
-              <div class="itemImgBox">
-                <div class="imgBox">
-                  <el-image
-                    :src="item.image"
-                    fit="contain"></el-image>
-                </div>
+          <swiper-slide class="products-swiper-slide item" v-for="(item, index) in productData" :key="index">
+
+            <div class="a-link" v-if="componentContent.productStyleValue == '1'" @click="jumpProductDetail(item)">
+            <div class="itemImgBox">
+              <div class="imgBox">
+                <el-image :src="item.image" fit="contain"></el-image>
               </div>
-              <div class="text">
-                <h4 class="h4">{{item.productName}}</h4>
-                <div class="priceBox">
-                  <span>¥{{item.price}}</span>
-                  <span class="discount" v-if="item.originalPrice">¥{{item.originalPrice}}</span>
+            </div>
+            <div class="text">
+              <h4 class="h4">{{ item.productName }}</h4>
+              <div class="priceBox">
+                <span>¥{{ item.price }}</span>
+                <span class="discount" v-if="item.originalPrice">¥{{ item.originalPrice }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="product-swiper-item" v-if="componentContent.productStyleValue == '2'"
+            @click="jumpProductDetail(item)">
+            <div class="product-swiper-img">
+              <img class="img pic-img default-img" :src="item.image"
+                onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null">
+            </div>
+            <div class="product-swiper-info">
+              <div class="product-info-content">
+                <div class="product-name-row">
+                  <label class="product-name">{{ item.productName }}</label>
+                  <img class="product-star" src="../../../static/images/product/icon_star.png">
+
+                  <label class="product-star-text">{{ item.qaNum || 3.5 }}</label>
+                </div>
+                <div class="product-price-row">
+                  <div class="price-warp">
+                    ¥ {{ item.price }}
+                  </div>
+                  <img class="product-add" src="../../../static/images/product/icon_add.png">
                 </div>
+
+              </div>
+            </div>
+          </div>
+
+
+          <div class="item3" v-if="componentContent.productStyleValue == '3'" @click="jumpProductDetail(item)">
+            <div class="item3_name">{{ item.productName }}</div>
+            <div class="item3_image"><el-image :src="item.image" fit="contain"></el-image></div>
+            <div class="item3_btn_row">
+              <div class="item3_btn">点击</div>
+            </div>
+          </div>
+
+          <div class="item4" v-if="componentContent.productStyleValue == '4'" @click="jumpProductDetail(item)">
+           
+            <div class="item4_content">
+              <div class="item4_image"><el-image :src="item.image" fit="contain"></el-image></div>
+              <div class="item4_info">
+                <div class="item4_name">{{ item.productName }}</div>
+                <div class="item4_price">¥{{ item.price }}</div>
+              </div>
+
+              <div class="item4_arrow">
+                <img src="../../../static/images/product/icon_right_arrow.png">
               </div>
             </div>
+
+            <div class="item4_index_image" v-if="index < 3">
+              <img src="../../../static/images/product/icon_index_1.png" v-if="index == 0">
+              <img src="../../../static/images/product/icon_index_2.png" v-if="index == 1">
+              <img src="../../../static/images/product/icon_index_3.png" v-if="index == 2">
+            </div>
+          </div>
+
           </swiper-slide>
         </swiper>
       </div>
     </div>
-    <div v-else class="picList" >
-      <ul class="clearfix" :class="'imgTextNum' +  componentContent.productNum">
-        <li class="item" v-for="(item,index) in productData.slice(0, componentContent.productRowNum * componentContent.productNum)" :key="index">
-          <div class="a-link" @click="jumpProductDetail(item)">
+    <div v-else class="picList">
+      <ul class="clearfix" :class="'imgTextNum' + componentContent.productNum">
+        <li class="item"
+          v-for="(item, index) in productData.slice(0, componentContent.productRowNum * componentContent.productNum)"
+          :key="index">
+
+
+          <div class="a-link" v-if="componentContent.productStyleValue == '1'" @click="jumpProductDetail(item)">
             <div class="itemImgBox">
               <div class="imgBox">
-                <el-image
-                  :src="item.image"
-                  fit="contain"></el-image>
+                <el-image :src="item.image" fit="contain"></el-image>
               </div>
             </div>
             <div class="text">
-              <h4 class="h4">{{item.productName}}</h4>
+              <h4 class="h4">{{ item.productName }}</h4>
               <div class="priceBox">
-                <span>¥{{item.price}}</span>
-                <span class="discount" v-if="item.originalPrice">¥{{item.originalPrice}}</span>
+                <span>¥{{ item.price }}</span>
+                <span class="discount" v-if="item.originalPrice">¥{{ item.originalPrice }}</span>
               </div>
             </div>
           </div>
+
+          <div class="product-swiper-item" v-if="componentContent.productStyleValue == '2'"
+            @click="jumpProductDetail(item)">
+            <div class="product-swiper-img">
+              <img class="img pic-img default-img" :src="item.image"
+                onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null">
+            </div>
+            <div class="product-swiper-info">
+              <div class="product-info-content">
+                <div class="product-name-row">
+                  <label class="product-name">{{ item.productName }}</label>
+                  <img class="product-star" src="../../../static/images/product/icon_star.png">
+
+                  <label class="product-star-text">{{ item.qaNum || 3.5 }}</label>
+                </div>
+                <div class="product-price-row">
+                  <div class="price-warp">
+                    ¥ {{ item.price }}
+                  </div>
+                  <img class="product-add" src="../../../static/images/product/icon_add.png">
+                </div>
+
+              </div>
+            </div>
+          </div>
+
+
+          <div class="item3" v-if="componentContent.productStyleValue == '3'" @click="jumpProductDetail(item)">
+            <div class="item3_name">{{ item.productName }}</div>
+            <div class="item3_image"><el-image :src="item.image" fit="contain"></el-image></div>
+            <div class="item3_btn_row">
+              <div class="item3_btn">点击</div>
+            </div>
+          </div>
+
+          <div class="item4" v-if="componentContent.productStyleValue == '4'" @click="jumpProductDetail(item)">
+           
+            <div class="item4_content">
+              <div class="item4_image"><el-image :src="item.image" fit="contain"></el-image></div>
+              <div class="item4_info">
+                <div class="item4_name">{{ item.productName }}</div>
+                <div class="item4_price">¥{{ item.price }}</div>
+              </div>
+
+              <div class="item4_arrow">
+                <img src="../../../static/images/product/icon_right_arrow.png">
+              </div>
+            </div>
+
+            <div class="item4_index_image" v-if="index < 3">
+              <img src="../../../static/images/product/icon_index_1.png" v-if="index == 0">
+              <img src="../../../static/images/product/icon_index_2.png" v-if="index == 1">
+              <img src="../../../static/images/product/icon_index_3.png" v-if="index == 2">
+            </div>
+          </div>
         </li>
       </ul>
     </div>
-    <button v-show="componentContent.showMore" class="btn-more" @click="jumpLink(componentContent.linkObj)">{{ $t('common.seeall') }} <span class="icon iconfont icon-arrow-right"></span></button>
+    <button v-show="componentContent.showMore" class="btn-more" @click="jumpLink(componentContent.linkObj)">{{
+      $t('common.seeall') }} <span class="icon iconfont icon-arrow-right"></span></button>
   </div>
 </template>
 
 <script>
-import {commonMixin} from '../mixin'
-  export default {
-    mixins: [commonMixin],
-    data () {
-      return {
-        swiperOption: {
-          slidesPerView: 4, // 显示数量
-          spaceBetween: 13, // 间隔
-          autoplay: false, // 可选选项，自动滑动
-          loop: true,
-          pagination: {
-            el: '.product-pagination'
-          },
-          navigation: {
-            nextEl: '.swiper-button-next',
-            prevEl: '.swiper-button-prev'
-          }
+import { commonMixin } from '../mixin'
+export default {
+  mixins: [commonMixin],
+  data() {
+    return {
+      swiperOption: {
+        slidesPerView: 4, // 显示数量
+        spaceBetween: 13, // 间隔
+        autoplay: false, // 可选选项，自动滑动
+        loop: true,
+        pagination: {
+          el: '.product-pagination'
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
         }
       }
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .product-list{
-    padding: 20px 0;
-    background-color: #fff;
-    .picListWarp{
-      width: 1380px;
-      max-width: 100%;
-      margin: 0 auto;
-      position: relative;
+.product-list {
+  padding: 20px 0;
+  background-color: #FAFAFA;
+
+  .picListWarp {
+    width: 1380px;
+    max-width: 100%;
+    margin: 0 auto;
+    position: relative;
+  }
+
+  .picList {
+    width: 1200px;
+    max-width: 100%;
+    margin: 0 auto;
+
+    .swiper-button-prev,
+    .swiper-button-next {
+      width: 50px;
+      height: 50px;
+      position: absolute;
+      cursor: pointer;
+      top: 140px;
+      background-repeat: no-repeat;
+
+      &:after {
+        content: '';
+      }
     }
-    .picList{
-      width: 1200px;
-      max-width: 100%;
-      margin: 0 auto;
-      .swiper-button-prev,.swiper-button-next{
-        width: 50px;
-        height: 50px;
-        position: absolute;
-        cursor:pointer;
-        top: 140px;
-        background-repeat: no-repeat;
-        &:after{
-          content: '';
+
+    .swiper-button-prev {
+      left: 0;
+      background: url('../../../static/images/btn-prev.png');
+    }
+
+    .swiper-button-next {
+      right: 0;
+      background: url('../../../static/images/btn-next.png');
+    }
+
+    .a-link {
+      cursor: pointer;
+
+      &:hover {
+        box-shadow: 3px 4px 20px 0px rgba(186, 186, 186, 0.5);
+      }
+
+      .itemImgBox {
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .imgBox {
+          padding-bottom: 100%;
+          background-color: #cacaca;
+          position: relative;
+
+          .el-image {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
         }
       }
-      .swiper-button-prev{
-        left: 0;
-        background: url('../../../static/images/btn-prev.png');
+
+      .text {
+        padding: 25px 20px 17px;
+        text-align: center;
+
+        //height: 180px;
+        .h4 {
+          font-size: 18px;
+          line-height: 24px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: #333333;
+          //max-height: 48px;
+        }
+
+        .p {
+          color: #999;
+          font-size: 16px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          padding-top: 18px;
+          position: relative;
+          margin-top: 8px;
+
+          &:after {
+            position: absolute;
+            top: 0;
+            left: 50%;
+            margin-left: -80px;
+            width: 160px;
+            height: 2px;
+            background: #F0F0F0;
+            content: '';
+          }
+        }
+
+        .priceBox {
+          padding-top: 11px;
+          line-height: 33px;
+
+          span {
+            font-size: 25px;
+            color: #C83732;
+            padding-right: 12px;
+          }
+
+          span.discount {
+            font-size: 18px;
+            color: #ccc;
+            text-decoration: line-through;
+          }
+        }
       }
-      .swiper-button-next{
-        right: 0;
-        background: url('../../../static/images/btn-next.png');
+    }
+
+    ul {
+      margin: -15px 0 0 -15px;
+      display: flex;
+      flex-wrap: wrap;
+
+      li {
+        flex: 0 0 50%;
+        padding: 15px;
+        width: 0;
+      }
+    }
+
+    .imgTextNum2 {
+      li {
+        flex: 0 0 50%;
+      }
+    }
+
+    .imgTextNum3 {
+      li {
+        flex: 0 0 33.33%;
+      }
+    }
+
+    .imgTextNum4 {
+      li {
+        flex: 0 0 25%;
+      }
+    }
+
+    .imgTextNum5 {
+      li {
+        flex: 0 0 20%;
       }
-      .a-link{
-        cursor: pointer;
-        &:hover{
-          box-shadow: 3px 4px 20px 0px rgba(186, 186, 186, 0.5);
+    }
+
+
+    .product-swiper-item {
+      height: 320px;
+      width: 242px !important;
+      position: relative;
+
+      .product-swiper-img {
+        width: 210px;
+        height: 220px;
+        margin-left: auto;
+        margin-right: auto;
+        background: #F6F6F8;
+        border: 2px solid #FFFFFF;
+        border-radius: 16px;
+        position: relative;
+        padding: 20px;
+        z-index: 2;
+
+        .img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
         }
-        .itemImgBox {
-          height: auto;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          .imgBox {
-            padding-bottom: 100%;
-            background-color: #cacaca;
-            position: relative;
-            .el-image {
+      }
+
+      .product-swiper-info {
+        width: 242px;
+        height: 210px;
+        position: absolute;
+        top: 110px;
+        background: #FDFDFD;
+        box-shadow: 0px 16px 24px 0px #F6F6F6;
+        border-radius: 16px;
+        text-align: center;
+
+        .product-info-content {
+          margin-top: 125px;
+
+          .product-name-row {
+            width: 100%;
+            height: 22px;
+            line-height: 22px;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-content: center;
+            justify-content: flex-start;
+            align-items: center;
+
+            .product-name {
               width: 100%;
-              height: 100%;
-              position: absolute;
-              top: 0;
-              left: 0;
+              height: auto;
+              font-size: 16px;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              color: #252744;
+              display: block;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              line-height: 28px;
+              margin-left: 24px;
+              text-align: left;
+            }
+
+            .product-star {
+              width: 22px;
+              height: 22px;
+            }
+
+            .product-star-text {
+              width: auto;
+              height: 28px;
+              line-height: 28px;
+              font-size: 14px;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              color: #A5A5AD;
+              margin-right: 20px;
+              margin-left: 5px;
             }
           }
-        }
-        .text{
-          padding:25px 20px 17px;
-          text-align: center;
-          //height: 180px;
-          .h4{
-            font-size: 18px;
-            line-height: 24px;
-            overflow: hidden;
-            text-overflow:ellipsis;
-            white-space: nowrap;
-            color: #333333;
-            //max-height: 48px;
-          }
-          .p{
-            color: #999;
-            font-size: 16px;
-            overflow: hidden;
-            text-overflow:ellipsis;
-            white-space: nowrap;
-            padding-top: 18px;
-            position: relative;
-            margin-top: 8px;
-            &:after{
-              position: absolute;
-              top: 0;
-              left: 50%;
-              margin-left: -80px;
-              width: 160px;
-              height: 2px;
-              background: #F0F0F0;
-              content: '';
+
+          .product-sku-row {
+            width: 100%;
+            height: 28px;
+            line-height: 28px;
+            margin-top: 15px;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-content: center;
+            justify-content: flex-start;
+            align-items: center;
+
+            .product-sku-name {
+              font-size: 24px;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              color: #90919C;
+              margin-left: 30px;
             }
           }
-          .priceBox {
-            padding-top: 11px;
-            line-height: 33px;
-            span {
-              font-size: 25px;
-              color: #C83732;
-              padding-right: 12px;
+
+          .product-price-row {
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-content: center;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 10px;
+
+            .price-warp {
+              display: flex;
+              align-items: center;
+              line-height: 28px;
+              margin-left: 24px;
+              justify-content: flex-start;
+              width: auto;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              font-size: 14px;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              color: #252744;
             }
-            span.discount {
-              font-size: 18px;
-              color: #ccc;
-              text-decoration: line-through;
+
+            .product-add {
+              width: 50px;
+              height: 50px;
+              margin-right: 24px;
             }
           }
+
+
         }
       }
-      ul{
-        margin: -15px 0 0 -15px;
-        display: flex;
-        flex-wrap: wrap;
-        li{
-          flex: 0 0 50%;
-          padding: 15px 0 0 15px;
-          width: 0;
-        }
+    }
+
+    .item3 {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+      background: #F6F6F8;
+      box-shadow: 0px 12px 24px 0px #EDEDED;
+      border-radius: 24px;
+      border: 1px solid #FFFFFF;
+
+      .item3_name {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #252744;
+        margin-top: 15px;
       }
-      .imgTextNum2 {
-        li {
-          flex: 0 0 50%;
-        }
+
+      .item3_image {
+        margin: 15px;
       }
-      .imgTextNum3 {
-        li {
-          flex: 0 0 33.33%;
+
+      .item3_btn_row {
+        margin-bottom: 15px;
+
+        .item3_btn {
+          background: #252744;
+          border-radius: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          font-size: 12px;
+          color: #FFFFFF;
+          padding-left: 20px;
+          padding-right: 20px;
+          padding-top: 8px;
+          padding-bottom: 8px;
         }
       }
-      .imgTextNum4 {
-        li {
-          flex: 0 0 25%;
+    }
+
+    .item4 {
+
+      height: 210px;
+      background: #FDFDFD;
+      box-shadow: 0px 24px 60px 0px #E5E5E5;
+      border-radius: 16px;
+      position: relative;
+
+      .item4_index_image {
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        left: 26px;
+        z-index: 100;
+        
+        img{
+          width: 100%;
         }
       }
-      .imgTextNum5 {
-        li {
-          flex: 0 0 20%;
+
+      .item4_content {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-content: center;
+        justify-content: space-between;
+        align-items: center;
+
+        .item4_image {
+          width: 164px;
+          height: 164px;
+          background: #F6F6F7;
+          border-radius: 8rpx;
+          margin: 24px;
+
+          img{
+            width: 100%;
+          }
+        }
+
+        .item4_info {
+          height: 100%;
+    padding-top: 46px;
+    padding-bottom: 46px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: space-between;
+    align-items: flex-start;
+
+          .item4_name {
+            font-family: Microsoft YaHei;
+          font-weight: bold;
+        font-size: 20px;
+        color: #252744;
+          }
+
+          .item4_price {
+            font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 20px;
+        color: #252744;
+          }
+        }
+
+        .item4_arrow {
+        width: 20px;
+        height: 20px;
+        margin: 24px;
+        img{
+          width: 100%;
+          height: 100%;
+        }
         }
       }
+
     }
   }
-  .btn-more {
-    width: 130px;
-    height: 41px;
-    border: 2px solid #C5AA7B;
-    color: #C5AA7B;
-    font-size: 18px;
-    background-color: transparent;
-    margin: 20px auto 0;
-    display: block;
-  }
-</style>
+}
+
+.btn-more {
+  width: 130px;
+  height: 41px;
+  border: 2px solid #C5AA7B;
+  color: #C5AA7B;
+  font-size: 18px;
+  background-color: transparent;
+  margin: 20px auto 0;
+  display: block;
+}</style>

canvas-container/components/canvasShow/basics/text.vue

@@ -3,7 +3,7 @@
     <div class="line-warp" :class="{'borderBot':componentContent.showLine}">
       <h3 class="h3" :style="{fontSize:componentContent.fontSizeNum+'px',fontWeight:componentContent.textFontW,color:componentContent.titColor}">{{componentContent.title}}</h3>
       <p class="p" :style="{fontSize:componentContent.describeSizeNum+'px',fontWeight:componentContent.describeFontW,color:componentContent.describeColor}">{{componentContent.describe}}</p>
-      <div class="btn-more" v-show="componentContent.showMore" :class="'style'+componentContent.styleValue" @click="jumpLink(item.linkObj)"><span>{{ $t('common.seemore') }}</span><i class="iconfont icon-arrow-right"></i></div>
+      <div class="btn-more" v-show="componentContent.showMore" :class="'style'+componentContent.styleValue" @click="jumpLink(item.linkObj)"><span>{{ $t('common.more') }}</span><i class="iconfont icon-arrow-right"></i></div>
     </div>
   </div>
 </template>
@@ -33,12 +33,19 @@
     position: relative;
     .line-warp{
       padding: 10px 0;
+      display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: flex-start;
+    align-items: center;
     }
     .borderBot{
       border-bottom: 1px solid #cccc;
     }
     .h3{
       line-height: 1.5;
+      flex:1;
     }
     .p{
       line-height: 1.5;
@@ -65,7 +72,6 @@
         .btn-more{
           position: absolute;
           right: 0;
-          top: 10px;
         }
       }
     }

canvas-container/components/leftBar/panelList.js

@@ -26,13 +26,13 @@ export const panelList = [
         iconClass: 'icon-dianputoubu',
         type: 'classify-header',
         undraggable: true, // 不可拖动
-        onlyAdmin: true, // 平台端显示
-        onlyApp: true, // 只在app显示
         componentContent: {
           fontSizeNum: '',
           textFontW: 'normal',
           titColor: '#CD5353',
-         
+          firstClassify:'所有',
+          searchKey:'all',
+          showProduct: true
         }
       },
       {
@@ -309,6 +309,7 @@ export const panelList = [
           productRowNum: 1, // 展示行数
           productNum: 4, //  展示列数
           arrangeType: '多行多列', // 布局方式
+          productStyleValue: '1', // 商品样式
           showMore: false, // 显示隐藏更多
           styleValue: '1', // 查看更多样式
           linkObj: {

canvas-container/components/toolBar/BasicsComp/classifyheaderTool.vue

@@ -3,13 +3,13 @@
       <h3 class="toolTit">类别设置</h3>
       <div class="operationBox">
         
-        <div class="itemBox">
+        <div class="itemBox" v-if="false">
             <div class="Tit">文本大小</div>
             <div class="modifyBox fontSize">
               <font-size-select :fontSize.sync='activeComponent.componentContent.fontSizeNum'></font-size-select>
             </div>
         </div>
-        <div class="itemBox">
+        <div class="itemBox" v-if="false">
           <div class="Tit">文本粗细</div>
           <div class="Info" v-text="activeComponent.componentContent.textFontW === 'bold' ? '加粗体' : '常规体'"></div>
           <div class="modifyBox fontSize">
@@ -17,7 +17,7 @@
             <span class="iconfont" :class="{textActive: activeComponent.componentContent.textFontW === 'normal'}" @click="changeFontW(type = 'normal')">&#xe8c2;</span>
           </div>
         </div>
-        <div class="itemBox">
+        <div class="itemBox" v-if="false">
           <div class="Tit">文本颜色</div>
           <div class="Info">{{activeComponent.componentContent.titColor}}</div>
           <div class="modifyBox">
@@ -29,7 +29,26 @@
             </div>
           </div>
         </div>
-      </div>
+        <div class="itemBox">
+            <div class="Tit">第一项文本</div>
+            <el-input class="item-input" v-model="activeComponent.componentContent.firstClassify" maxlength="8" :placeholder="$t('common.defaulthint')"></el-input>
+          </div>
+        <div class="itemBox">
+            <div class="Tit">第一项搜索类型</div>
+              <el-select v-model="activeComponent.componentContent.searchKey" :placeholder="$t('common.choose')">
+                <el-option label="all" value="所有"></el-option>
+                <el-option label="hot" value="热销"></el-option>
+              </el-select>
+            </div>
+        </div>
+        <div class="itemBox">
+          <div class="Tit">是否显示具体商品</div>
+          <el-radio-group v-model="activeComponent.componentContent.showProduct">
+            <el-radio label="true">是</el-radio>
+            <el-radio label="false">否</el-radio>
+          </el-radio-group>
+        </div>
+        
     </div>
 </template>
 

canvas-container/components/toolBar/goodsComp/productList.vue

@@ -7,6 +7,17 @@
 <!--        <el-input v-model="activeComponent.componentContent.title" :placeholder="$t('common.defaulthint')"></el-input>-->
 <!--      </div>-->
       <tool-product-source :productData.sync='activeComponent.componentContent.productData' :type="activeComponent.type"></tool-product-source>
+
+    <div class="title">
+      <div>商品显示样式</div>
+      <div class="source-select">
+        <el-radio class="source-item" v-model="activeComponent.componentContent.productStyleValue" label="1">样式一</el-radio>
+        <el-radio class="source-item" v-model="activeComponent.componentContent.productStyleValue" label="2">样式二</el-radio>
+        <el-radio class="source-item" v-model="activeComponent.componentContent.productStyleValue" label="3">样式三</el-radio>
+        <el-radio class="source-item" v-model="activeComponent.componentContent.productStyleValue" label="4">样式四</el-radio>
+      </div>
+    </div>
+
       <div class="styleSelectLine">
         <div class="blockTit">
           <span>排列样式</span>
@@ -220,6 +231,24 @@
 </script>
 
 <style lang="scss" scoped>
+
+.title{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-content: flex-start;
+    justify-content: center;
+    align-items: flex-start;
+     margin-bottom: 10px;
+
+     .source-select{
+      margin-top: 10px;
+      .source-item{
+        width: 50%;
+        margin-right: 0px;
+      }
+     }
+   }
   .brandListTool {
     padding: 20px 20px 0px 20px;
     h3 {

canvas-container/components/toolBar/toolModule/tool-product-source.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="tool-select-product">
     <div class="title">
-      <span>商品来源</span>
+      <div>商品来源</div>
       <div class="source-select">
-        <el-radio v-model="productData.sourceType" label="1">商品</el-radio>
-        <el-radio v-model="productData.sourceType" label="2">类别</el-radio>
+        <el-radio class="source-item" v-model="productData.sourceType" label="1">商品</el-radio>
+        <el-radio class="source-item" v-model="productData.sourceType" label="2">类别</el-radio>
+        <el-radio class="source-item" v-model="productData.sourceType" label="3">新品推荐</el-radio>
+        <el-radio class="source-item" v-model="productData.sourceType" label="4">低价优选</el-radio>
+        <el-radio class="source-item" v-model="productData.sourceType" label="5">尖端首发</el-radio>
+        <el-radio class="source-item" v-model="productData.sourceType" label="6">热销排行</el-radio>
       </div>
     </div>
     <div class="porListBox">
@@ -47,9 +51,21 @@ name: "tool-product-source",
 <style lang="scss" scoped>
  .tool-select-product{
    .title{
-     display: flex;
-     justify-content: space-between;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-content: flex-start;
+    justify-content: center;
+    align-items: flex-start;
      margin-bottom: 10px;
+
+     .source-select{
+      margin-top: 10px;
+      .source-item{
+        width: 50%;
+        margin-right: 0px;
+      }
+     }
    }
  }
 </style>

canvas-container/locales/en.json

@@ -602,5 +602,6 @@
 	"common.refundamount":"Refund Amount",
 	"common.deal":"Deal",
 	"common.exportafterorder_filename":"afterorderdatadetail.xls",
-	"common.after-salestatus_info":"After-sale Info"
+	"common.after-salestatus_info":"After-sale Info",
+	"common.more":"More"
 }

canvas-container/locales/zh-CN.json

@@ -602,6 +602,6 @@
 	"common.refundamount":"退款金额(元)",
 	"common.deal":"处理",
 	"common.exportafterorder_filename":"售后订单数据明细表.xls",
-	"common.after-salestatus_info":"售后信息"
-	
+	"common.after-salestatus_info":"售后信息",
+	"common.more":"更多"
 }

src/locales/en.json

@@ -573,6 +573,7 @@
 	"common.productinfo":"Product Info",
 	"common.product":"Product",
 	"common.quantity":"Quantity",
+	"common.total":"Total",
 	"common.total_small":"Total",
 	"common.producttotalprice":"Product Amount",
 	"common.freightamount":"Freight Amount",
@@ -602,5 +603,7 @@
 	"common.refundamount":"Refund Amount",
 	"common.deal":"Deal",
 	"common.exportafterorder_filename":"afterorderdatadetail.xls",
-	"common.after-salestatus_info":"After-sale Info"
-}
+	"common.after-salestatus_info":"After-sale Info",
+	"common.own":"All",
+	"common.more":"More"
+}

src/locales/zh-CN.json

@@ -573,6 +573,7 @@
 	"common.productinfo":"商品信息",
 	"common.product":"商品",
 	"common.quantity":"数量",
+	"common.total":"合计",
 	"common.total_small":"小计",
 	"common.producttotalprice":"商品总价",
 	"common.freightamount":"运费金额",
@@ -602,6 +603,7 @@
 	"common.refundamount":"退款金额(元)",
 	"common.deal":"处理",
 	"common.exportafterorder_filename":"售后订单数据明细表.xls",
-	"common.after-salestatus_info":"售后信息"
-	
-}
+	"common.after-salestatus_info":"售后信息",
+	"common.own":"所有",
+	"common.more":"更多"
+}

src/views/stock/stocknote/Edit.vue

@@ -224,7 +224,6 @@ export default {
       this.$emit('close')
     },
     async reset() {
-      console.log("reset")
       this.params = {
         storehouseId: 0,
         storehouseName: '',
@@ -240,6 +239,7 @@ export default {
       }
       if(this.storehouseList && this.storehouseList.length > 0){
         this.params.storehouseId = this.storehouseList[0].storehouseId
+        this.params.storehouseName = this.storehouseList[0].storehouseName
         this.getProductList();
       }
     },
@@ -251,6 +251,7 @@ export default {
       }
     },
     async onSubmit() {
+      console.log(this.params)
       this.params.originPrice = this.params.price;
       if (this.params.storehouseName === '') {
         this.$message.error('请输入仓库名称')