1

.env.development

@@ -2,8 +2,8 @@
 ENV = 'development'
 
 // api接口请求地址
-//VUE_APP_BASE_API = 'http://lymall-multishop.58for.com/apis'
-VUE_APP_BASE_API = 'http://127.0.0.1:8087'
+VUE_APP_BASE_API = 'http://lymall-multishop.58for.com/apis'
+//VUE_APP_BASE_API = 'http://127.0.0.1:8087'
 
 // 客服api接口请求地址
 //VUE_APP_IM_API = 'https://b2b2c-im.mall4j.com'

src/components/order-card-item/index.vue

@@ -89,6 +89,7 @@
     components: {CanvasPreview, YuyinPreview,OrgPicPreview},
     data () {
       return {
+        shopId: this.$store.state.user.shopId,
         lang: localStorage.getItem('lang') || 'zh_CN',
         cardItemList:[],
         previewPicUrl: null,
@@ -145,6 +146,7 @@
         let width = 709;
         let height = 1087;
         let prodName = item.prodName;
+        let that = this;
         isSize = new Promise(function(resolve, reject) {
           if(prodName.indexOf("小卡") !== -1 || prodName.indexOf("影像级花式拍立得") !== -1){
             width = 709;
@@ -153,8 +155,17 @@
             width = 780;
             height = 1489;
           }else if(prodName.indexOf("直拍封面") !== -1){
-            width = 732;
-            height = 1252;
+            debugger
+            if(that.shopId === 6){
+              width = 709;
+              height = 1228;
+            }else{
+              width = 732;
+              height = 1252;
+            }
+          } else if(prodName.indexOf("超清二宫格") !== -1){
+            width = 1228;
+            height = 709;
           }else if(prodName.indexOf("二宫格") !== -1){
             width = 1252;
             height = 732;
@@ -167,6 +178,9 @@
           }else if(prodName.indexOf("书签") !== -1){
             width = 638;
             height = 1796;
+          }else if(prodName.indexOf("竖版四宫格") !== -1){
+            width = 638;
+            height = 1796;
           }else if(prodName.indexOf("小方卡") !== -1){
             width = 673;
             height = 673;

src/i18n/langs/en.js

@@ -2461,6 +2461,7 @@ const en = {
       picNav: 'Picture',
       picTextNav: 'Picture & Text',
       tetxNav: 'Text',
+      line3item: 'Three item a row',
       line4item: 'Four item a row',
       line5item: 'Five item a row',
       cart: 'Shopping Cart',

src/i18n/langs/zhCn.js

@@ -2515,6 +2515,7 @@ const zhCn = {
       picNav: '图片导航',
       picTextNav: '图文导航',
       tetxNav: '文字导航',
+      line3item: '一行三个',
       line4item: '一行四个',
       line5item: '一行五个',
       cart: '购物车',

src/views/modules/afterSales/thirdAfterSales.vue

@@ -8,6 +8,7 @@
             <el-select v-model="searchForm.printChannel" clearable>
               <el-option label="快印" value="KuaiYin" v-if="shopId === 1"></el-option>
               <el-option label="闪电" value="Lightning" v-if="shopId === 1"></el-option>
+              <el-option label="蜗牛" value="WoNiu" v-if="shopId === 9"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="波次号" class="search-form-item">

src/views/modules/prod/post-product/postProduct.vue

@@ -415,11 +415,13 @@ export default {
         return
       }
       //skuMap拼接
+      debugger
       let skuPicMapArr = this.cartesianProduct(this.skuTags);
-
-      for(let i = 0; i < this.dataForm.skuList.length; i++){
-        this.dataForm.skuList[i].skuPicMap = skuPicMapArr[i]
-        this.dataForm.skuList[i].pic = skuPicMapArr[i].split(",")[0]
+      if(skuPicMapArr.length > 0){
+        for(let i = 0; i < this.dataForm.skuList.length; i++){
+          this.dataForm.skuList[i].skuPicMap = skuPicMapArr[i]
+          this.dataForm.skuList[i].pic = skuPicMapArr[i].split(",")[0]
+        }
       }
       this.dataForm.prodName = this.dataForm.prodNameCn
       this.dataForm.brief = this.dataForm.briefCn
@@ -527,7 +529,7 @@ export default {
           tempResult.forEach(arr =>{
             skuTags[i].tagItems.forEach(item =>{
               if(!item.pic){
-                item.pic = 'null'
+                item.pic = ''
               }
               let newArr = arr.concat(',').concat(item.pic);
               newResult.push(newArr);

src/views/modules/prod/printPicLib-add-or-update.vue

@@ -140,6 +140,9 @@ export default {
       }else if(prodName.indexOf("明信片") !== -1){
         width = 1229;
         height = 1796;
+      }else if(prodName.indexOf("超清二宫格") !== -1){
+        width = 1228;
+        height = 709;
       }else if(prodName.indexOf("二宫格") !== -1){
         width = 1252;
         height = 732;

src/views/modules/prod/prodTemplate-add-or-update.vue

@@ -164,8 +164,8 @@ export default {
             width = 709;
             height = 1087;
           }else if(templateUsage.indexOf("EGG") !== -1){
-            width = 1252;
-            height = 732;
+            width = 1228;
+            height = 709;
           }else if(templateUsage.indexOf("SBSGG") !== -1){
             width = 638;
             height = 1796;

src/views/modules/prod/sku-tag.vue

@@ -460,6 +460,8 @@ export default {
       this.addImgchecked = isIncludeImg
       this.tagItemInputs.push({ visible: false, value: '' })
       this.skuTags = skuTags
+      this.$emit('updateSkuTags', this.skuTags)
+
     },
 
     /**
@@ -708,7 +710,8 @@ export default {
             propId: index === -1 ? 0 : this.skuTags[tagIndex].tagItems[index].propId,
             propValue: itemValue.propValue,
             propValueEn: itemValue.propValueEn,
-            valueId: itemValue.valueId
+            valueId: itemValue.valueId,
+            pic: ""
           }
         } else {
           // 纯空格校验

src/views/modules/settlement/third-print-settlement.vue

@@ -84,8 +84,7 @@
           <el-col :span="4">
             <el-card :body-style="{padding:'10px'}"shadow="never">
               <div>
-                <span style="font-size: 16px" v-if="employeeId == 43">待结算打包快递金额</span>
-                <span style="font-size: 16px" v-else>待结算人工金额</span>
+                <span style="font-size: 16px">待结算人工(快递)金额</span>
                 <div style="margin-top: 5px">
                   <span v-if="stat.settleLaborAmount" style="color: green; font-weight: bold;font-size: 20px;">+ ¥{{parseFloat(stat.settleLaborAmount).toFixed(2)}}</span>
                   <span v-else style="color: green; font-weight: bold;font-size: 20px;">+ ¥0</span>

src/views/modules/shop/feature/create/edit/components/all-can-use-components/index.vue

@@ -160,6 +160,14 @@ export default {
           picActive: require('@/assets/img/micro-page/p-tabs-active.png'),
           routerPath: () => import('../tab-nav/index.vue')
         },
+        // 滚动导航栏
+        {
+          type: 'scrollTabNav',
+          title: '滚动导航栏',
+          pic: require('@/assets/img/micro-page/p-tabs.png'),
+          picActive: require('@/assets/img/micro-page/p-tabs-active.png'),
+          routerPath: () => import('../scroll-tab-nav/index.vue')
+        },
         // 促销活动
         {
           type: 'promotionalActivities',
@@ -168,6 +176,14 @@ export default {
           picActive: require('@/assets/img/micro-page/p-promotion-active.png'),
           routerPath: () => import('../promotional-activities/index.vue')
         },
+        // 视频商品布局
+        {
+          type: 'videoGoods',
+          title: '视频商品布局',
+          pic: require('@/assets/img/micro-page/p-prod-list.png'),
+          picActive: require('@/assets/img/micro-page/p-prod-list-active.png'),
+          routerPath: () => import('../videoGoods/index.vue')
+        },
         // 搜索
         {
           type: 'search',
@@ -231,7 +247,7 @@ export default {
       let shopDisList = []
       for (let i = 0; i < this.componentLists.length; i++) {
         const item = this.componentLists[i]
-        if (item.type === 'promotionalActivities' || item.type === 'goods' || item.type === 'water-goods') {
+        if (item.type === 'promotionalActivities' || item.type === 'goods' || item.type === 'water-goods' || item.type === 'videoGoods') {
           shopDisList.push(item)
         } else {
           baseList.push(item)

src/views/modules/shop/feature/create/edit/components/scroll-tab-nav/index.scss

@@ -0,0 +1,295 @@
+.micro-tab-nav-box {
+  .text_overFlow_1 {
+    font-size: 14px;
+    margin-top: 10px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // 四列/五列 样式
+  .column-three {
+    width: 33.3%;
+  }
+  .column-four {
+      width: 25%;
+    }
+  .column-five {
+    width: 20%;
+  }
+
+  // 预览区
+  .nav-list {
+    display: flex;
+    padding-bottom: 10px;
+    flex-wrap: wrap;
+    .nav-item-item {
+      vertical-align: top;
+      height: 45px;
+      line-height: 45px;
+      text-align: center;
+      color: #666666;
+
+      &.active {
+        font-size: 14px;
+        font-weight: bold;
+        color: #222222;
+
+        &:before {
+          position: absolute;
+          content: '';
+          left: 50%;
+          transform: translateX(-50%);
+          bottom: 0;
+          width: 15px;
+          height: 4px;
+          background: rgba(184, 28, 40, 1);
+          border-radius: 7px;
+        }
+      }
+    }
+  }
+  .nav-item-image {
+    padding: 0px 5px 5px 5px;
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    text-align: center;
+    .nav-item-image-li {
+      display: flex;
+      flex-direction: column;
+      vertical-align: bottom;
+      align-items: center;
+      margin-bottom: 10px;
+      &:last-child {
+        margin-right: 0;
+      }
+      .img-con-three {
+        width: 100px;
+        height: 100px;
+        background-color: #f3f5f7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 18px;
+          transition: all 0.28s;
+          object-fit: cover;
+          object-position: center;
+        }
+      }
+      .img-con-four {
+        width: 80px;
+        height: 80px;
+        background-color: #f3f5f7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 18px;
+          transition: all 0.28s;
+          object-fit: cover;
+          object-position: center;
+        }
+      }
+      .img-con-five {
+        width: 60px;
+        height: 60px;
+        background-color: #f3f5f7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 18px;
+          transition: all 0.28s;
+          object-fit: cover;
+          object-position: center;
+        }
+      }
+      .full-img {
+        img {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+
+  // 右侧编辑区域
+  .tab-nav-set {
+    .tab-set-box {
+      margin-bottom: 10px;
+      .edit-form {
+        padding: 0;
+        .tab-set-style {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          ::v-deep .el-form-item__content {
+            width: 100%;
+            .el-radio-group {
+              border: 1px solid #EAEAF2;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              margin: 0;
+              padding: 5px 10px;
+              .el-radio {
+                padding: 0;
+                margin: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+    .tab-nav-set-item {
+      position: relative;
+      background: #fff;
+      padding: 20px 10px;
+      border: 1px solid #eee;
+      margin-bottom: 10px;
+      height: 210px;
+      .set-box {
+        display: flex;
+        align-items: center;
+        .set-image {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 60px;
+          height: 60px;
+          background-color: #eaeaf2;
+          background-size: 100%;
+          background-repeat: no-repeat;
+          background-position: center;
+          color: #9FA4B1;
+          cursor: pointer;
+
+          .set-bgImage-add {
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            background: rgba(0, 0, 0, 0.55);
+            color: #fff;
+            font-size: 12px;
+          }
+          .set-image-add {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 20px;
+            line-height: 20px;
+            text-align: center;
+            background: rgba(0, 0, 0, 0.55);
+            color: #fff;
+            font-size: 12px;
+          }
+          .set-image-empty {
+            width: 100%;
+            text-align: center;
+          }
+        }
+
+        .set-info {
+          height: 60px;
+          padding-left: 10px;
+          flex: 1;
+          align-self: center;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+
+          .el-dropdown {
+            cursor: pointer;
+          }
+          .set-item-title {
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+            > span {
+              width: 30px;
+              line-height: 16px;
+              margin-right: 10px;
+            }
+            > .el-input {
+              width: 80%;
+            }
+            .ad-image-link {
+              display: flex;
+              max-width: 220px;
+              .ad-image-link-info {
+                display: flex;
+                align-items: center;
+                .ad-image-link-dropdown {
+                  .type-name {
+                    font-size: 12px;
+                    text-align: center;
+                    color: #155BD4;
+                  }
+                  .el-dropdown-selfdefine {
+                    max-width: 200px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+              .title {
+                line-height: 16px;
+                margin-left: 10px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                cursor: pointer;
+              }
+            }
+          }
+
+        }
+        .set-info.flex-center {
+          justify-content: center;
+        }
+      }
+      .set-close {
+        position: absolute;
+        right: 5px;
+        top: 5px;
+        font-size: 16px;
+        cursor: pointer;
+        display: none;
+      }
+      .mini-programs-path {
+        margin: 10px auto;
+      }
+      &:hover {
+        .set-close {
+          display: block;
+        }
+      }
+    }
+  }
+
+  // 弹窗
+  .custom-path-con {
+    margin-top: 10px;
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+    span {
+      white-space: nowrap;
+      margin-right: 10px;
+    }
+  }
+  .el-dialog__title {
+    font-size: 16px;
+  }
+}

src/views/modules/shop/feature/create/edit/components/scroll-tab-nav/index.vue

@@ -0,0 +1,668 @@
+<template>
+  <div class="micro-tab-nav-box">
+    <!--预览控制区-->
+    <div class="design-preview-controller">
+      <div style="background-color: white; border-radius: 10px; margin: 5px">
+        <div style="display: inline-flex">
+          <el-image :src="formData.bgImg.indexOf('https')? formData.bgImg.replace(resourcesUrl, ''): formData.bgImg" v-if="formData.bgImg"/>
+          <span :style="{position: 'absolute',right: '5%', top: '5%', fontColor: formData.moreTextColor }">{{formData.moreText}} > </span>
+        </div>
+        <!--文本-->
+        <div class="nav-list"
+             v-if="formData.set.type === 3">
+          <div :class="['nav-item-item text_overFlow_1 nav-item-image-li', formData.size===3? 'column-three': formData.size===4? 'column-four': 'column-five']"
+               v-for="(item,index) in showNav"
+               :key="index">
+            <span :style="{color:formData.set.font_color}">{{item.title || `demo${index+1}`}}</span>
+          </div>
+        </div>
+        <!--模式 图文-->
+        <div v-else
+             class="nav-item-image">
+          <div :class="['nav-item-image-li', formData.size==3? 'column-three': formData.size==4?'column-four': 'column-five']"
+               v-for="(item,index) in showNav"
+               :key="index">
+            <div :class="[{'full-img': item.img}, formData.size==3? 'img-con-three': formData.size==4?'img-con-four': 'img-con-five']">
+              <img :src="item.img || defPic">
+            </div>
+            <!--图文模式-->
+            <span v-if="formData.set.type !==1"
+                  class="text_overFlow_1"
+                  :style="{color:formData.set.font_color}">
+            {{item.title || `demo${index+1}`}}</span>
+          </div>
+          <!-- 补齐flex布局样式 -->
+          <slot v-if="showNav.length % formData.size !=0">
+            <div :class="['nav-item-image-li', formData.size==3? 'column-three': formData.size==4?'column-four': 'column-five']"
+                 style="visibility:hidden;"
+                 v-for="(item,index) in formData.size - (showNav.length % formData.size)"
+                 :key="index + 100">
+              <div class="img-con">
+                <img :src="defPic">
+              </div>
+              <!--图文模式-->
+              <span v-if="formData.set.type !==1"
+                    class="text_overFlow_1">
+              {{item.title || `demo${index+1}`}}</span>
+            </div>
+          </slot>
+        </div>
+        <!-- <div class="nav-content">
+          显示内容，客户端才能展示
+        </div> -->
+      </div>
+
+    </div>
+    <!--编辑工作区-->
+    <div class="design-editor-item design-hide-class"
+         v-if="isShowEdit">
+      <div class="design-config-editor">
+        <div class="design-editor-component-title">{{$t('shopFeature.tabNav.navBar')}}</div>
+        <div class="tab-nav-set design-editor-component-container">
+          <!-- 配置-->
+          <div class="tab-set-box">
+            <el-form ref="formData" class="edit-form" size="small">
+              <el-form-item label="选择背景">
+                <div @click="changeImgType(1)">
+                  <img-upload v-model="formData.bgImg" v-if="!formData.bgImg" @input="changeImg"></img-upload>
+                </div>
+                <el-image :src="formData.bgImg" v-if="formData.bgImg"></el-image>
+                <div v-if="formData.bgImg" @click="formData.bgImg = ''" class="default-btn">删除</div>
+              </el-form-item>
+              <el-form-item label="查看更多的文本">
+                <div style="display: inline-flex;align-items: center">
+                  <el-input style="width: 210px" type="text" v-model="formData.moreText"></el-input>
+                  <el-input-number placeholder="字体大小" size="mini" controls-position="right" v-model="formData.moreTextSize" :min="0" style="width:112px" />
+                  <el-color-picker v-model="formData.moreTextColor" size="small"></el-color-picker>
+                </div>
+                <el-input type="text" v-model="formData.moreLink" placeholder="跳转链接"></el-input>
+                <div style="display: inline-flex">
+                  <span>上边距：</span><el-input type="text" v-model="formData.marginTop" placeholder="上边距" style="width: 100px"></el-input>
+                  <span>下边距：</span><el-input type="text" v-model="formData.marginBottom" placeholder="下边距" style="width: 100px"></el-input>
+                </div>
+              </el-form-item>
+              <el-form-item label="选择模版" class="tab-set-style">
+                <el-radio-group v-model="formData.set.type">
+                  <el-radio v-for="(typeItem, index) in setTypeList"
+                                   :key="index"
+                                   :label="typeItem.type">{{typeItem.title}}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item :label="$i18n.t('shopFeature.tabNav.countInLine')">
+                <el-radio-group v-model="formData.size">
+                  <el-radio v-for="(typeItem, index) in setCountsList"
+                            :key="index"
+                            :label="typeItem.value">{{typeItem.label}}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-form>
+          </div>
+          <!-- 各个导航分类 -->
+          <div class="tab-nav-set-item" :style="{borderColor:errIndex===index ? '#f56c6c': '#eee'}"
+               v-for="(item,index) in formData.nav"
+               :key="index">
+            <div class="set-box">
+              <!--图片-->
+              <div class="set-image"
+                   v-if="formData.set.type !==3"
+                   @click="choosePic(index)"
+                   :style="{backgroundImage:'url('+item.img+')'}">
+                <div v-if="item.img" class="set-image-add">{{$t('shopFeature.tabNav.changePic')}}</div>
+
+                <div v-else class="set-image-empty">
+                  <div><i class="el-icon-plus"></i></div>
+                  <div>{{ $t('shopFeature.tabNav.addPic')}}</div>
+                </div>
+              </div>
+              <!-- 标题信息 -->
+              <div class="set-info" :class="{'flex-center': formData.set.type === 1}">
+                <div class="set-item-title"
+                     v-if="formData.set.type !==1">
+                  <span>{{$t('shopFeature.tabNav.tit')}}</span>
+                  <el-input maxlength="25"
+                            size="mini"
+                            width="80px"
+                            :placeholder="$i18n.t('shopFeature.tabNav.tit')"
+                            v-model="item.title">
+                  </el-input>
+                </div>
+                <div class="set-item-title">
+                  <span>{{$t('shopFeature.tabNav.link')}}</span>
+                  <div class="ad-image-link">
+                    <div class="ad-image-link-info">
+                      <el-dropdown trigger="click"
+                              size="small"
+                              @command="command"
+                              class="ad-image-link-dropdown">
+                        <div class="cursor color">
+                          <span class="type-name" v-if="!item.linkTitle">{{$t('shopFeature.tabNav.choose')}}</span>
+                          <span class="type-name" v-else>
+                            {{[linkList[item.linkType-1].linkTitle] | pathFilter}}
+                            <i class="el-icon-close" @click.stop="resetLink(index)" />
+                          </span>
+                        </div>
+                        <el-dropdown-menu slot="dropdown">
+                          <el-dropdown-item v-for="(linkItem,linkIndex) in linkList"
+                                            :key="linkIndex"
+                                            :command="({linkItem,currentEditIndex:index})">
+                            <span style="font-size: 12px;">{{ linkItem.linkTitle }}</span>
+                          </el-dropdown-item>
+                        </el-dropdown-menu>
+                      </el-dropdown>
+                    </div>
+                    <div class="title" v-if="item.linkType===1 || item.linkType===5" @click="reChooseLink(item, index)">
+                      {{ item.linkType===5 && item.microTitle ? item.microTitle : item.linkTitle ? item.linkTitle : $t('shopFeature.tabNav.choose') }}
+                    </div>
+                    <div class="title" v-if="item.linkType===4" @click="reChooseLink(item, index)">{{item.link}}</div>
+                  </div>
+                </div>
+                <el-radio-group v-model="item.textType" style="margin-top: 10px">
+                  <el-radio key="1" label="1">商品模式</el-radio>
+                  <el-radio key="2" label="2">买家分享</el-radio>
+                </el-radio-group>
+                <div v-if="item.textType === '1'">
+                  <div class="set-item-title"
+                       v-if="formData.set.type !==1">
+                    <span>左字</span>
+                    <el-input
+                              maxlength="25"
+                              size="mini"
+                              v-model="item.leftText">
+                    </el-input>
+                    <el-color-picker v-model="item.leftTextColor" size="mini"></el-color-picker>
+                    <div style="position: absolute; top: 56%; left: 33.5%">
+                      <el-input-number placeholder="字体大小" size="mini" controls-position="right" v-model="item.leftTextSize" :min="0" style="width:112px" />
+                      <el-checkbox style="margin-left: 10px" v-model="item.leftTextBold">加粗</el-checkbox>
+                    </div>
+                  </div>
+                  <div class="set-item-title" style="margin-top: 30px"
+                       v-if="formData.set.type !==1">
+                    <span>右字</span>
+                    <el-input
+                              maxlength="25"
+                              size="mini"
+                              v-model="item.rightText">
+                    </el-input>
+                    <div style="position: absolute;  top: 85%; left: 33.5%;">
+                      <el-input-number placeholder="字体大小" size="mini" controls-position="right" v-model="item.rightTextSize" :min="0" style="width:112px" />
+                      <el-input-number placeholder="左边距" size="mini" controls-position="right" v-model="item.rightTextMarginLeft" :min="0" style="width:112px" />
+                    </div>
+                    <el-color-picker v-model="item.rightTextColor" size="mini"></el-color-picker>
+                  </div>
+                </div>
+                <div v-if="item.textType === '2'">
+                  <div class="set-item-title" style="margin-top: 10px">
+                    <span style="font-size: 14px">点赞</span>
+                    <el-input-number placeholder="点赞数" size="mini"controls-position="right"  v-model="item.rightLikeNum" :min="0" style="width:80px" />
+                    <div @click="changeImgType(2, index)">
+                      <div class="set-image"
+                           v-if="formData.set.type !==3"
+                           @click="choosePic(index)"
+                           :style="{backgroundImage:'url('+item.leftAvatar+')'}">
+                        <div v-if="item.leftAvatar" class="set-image-add">{{$t('shopFeature.tabNav.changePic')}}</div>
+                        <div v-else class="set-image-empty">
+                          <div><i class="el-icon-plus"></i></div>
+                          <div>{{ $t('shopFeature.tabNav.addPic')}}</div>
+                        </div>
+                      </div>
+<!--                      <img-upload v-model="item.leftAvatar" v-if="!item.leftAvatar" @input="changeImg"></img-upload>-->
+                    </div>
+                    <el-input style="width: 70px" maxlength="25" size="mini" v-model="item.leftNickName" placeholder="昵称"></el-input>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <i class="el-icon-close set-close" @click="formData.nav.splice(index,1)"></i>
+          </div>
+          <div class="p-add-btn"
+               @click="addNav">{{$t('shopFeature.tabNav.addNav')}}</div>
+        </div>
+      </div>
+    </div>
+    <!--选择微页面-->
+    <el-dialog custom-class="up-dialog"
+               :close-on-click-modal="false"
+               top="5vh"
+               :title="$i18n.t('shopFeature.tabNav.microPage')"
+               :visible.sync="dialogChoosePages"
+               width="42%">
+      <div class="choose-goods-compent">
+        <choose-feature :isGetChooseData="isGetChooseFeature"
+                        @chooseChooseFeaturesFun="chooseChooseFeaturesFun"></choose-feature>
+        <div slot="footer"
+             style="text-align: right;margin-top: 20px;">
+          <el-button size="mini"
+                     type="primary"
+                     @click="isGetChooseFeature=!isGetChooseFeature">{{$t('shopFeature.tabNav.confirm')}}</el-button>
+          <el-button size="mini"
+                     @click="dialogChoosePages = false">{{$t('shopFeature.tabNav.cancel')}}</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 弹窗, 新增图片 -->
+    <elx-imgbox ref="elxImgbox"
+                @refreshPic="refreshPic"
+                :maxSize="10"
+                :imgSizeLimit="false"></elx-imgbox>
+    <!-- 商品选择弹窗  -->
+    <prods-select v-if="dialogChooseGoods"
+                  ref="ProdsSelect"
+                  :isSingle="true"
+                  @refreshSelectProds="chooseGoodsFun"></prods-select>
+    <!-- 弹窗: 输入自定义路径 -->
+    <el-dialog :close-on-click-modal="false" custom-class="up-dialog" :title="$i18n.t('shopFeature.tabNav.customPath')" width="40%" top="30vh" :visible.sync="showPathInputDialog">
+      <div class="custom-path-con">
+        <span>{{$t('shopFeature.tabNav.routeLink')}}</span>
+        <el-input style="margin-rigth: 10px;" :placeholder="$i18n.t('shopFeature.tabNav.pleaseFillThePath')" size="small" v-model="customPath">
+
+        </el-input>
+      </div>
+      <div slot="footer" style="text-align: right;">
+          <el-button size="mini"
+                     type="primary"
+                     @click="customPathComfirm">{{$t('shopFeature.tabNav.confirm')}}</el-button>
+          <el-button size="mini"
+                     @click="customPathCancel">{{$t('shopFeature.tabNav.cancel')}}</el-button>
+        </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+/**
+ * 创建新组件之后，在all-can-use-components中添加
+ * 必须应用 microCreateMinis
+ * 数据必须以formData包含
+ * */
+import {microCreateMinis} from '../../minis'
+import ProdsSelect from '@/components/prods-select'
+import ChooseFeature from '@/components/choose-feature/index.vue'
+import ElxImgbox from '@/components/elx-imgbox'
+import ImgUpload from '@/components/img-upload'
+
+/** 导航配置 */
+export default {
+  name: 'micro-tab-nav-box',
+  mixins: [microCreateMinis],
+  props: {},
+  data () {
+    return {
+      isGetChooseFeature: false, // 是否可以返回微页面
+      dialogChoosePages: false, // 微页面弹窗
+      /** 选择图片的弹窗 */
+      isGetChooseImages: false,
+      dialogChooseImgVisible: false,
+      dialogChooseGoods: false,
+      setTypeList: [// 模式
+        {
+          type: 1,
+          title: this.$i18n.t('shopFeature.tabNav.picNav')
+        },
+        {
+          type: 2,
+          title: this.$i18n.t('shopFeature.tabNav.picTextNav')
+        },
+        {
+          type: 3,
+          title: this.$i18n.t('shopFeature.tabNav.tetxNav')
+        }
+      ],
+      formData: {
+        set: {
+          type: 2 // 模板类型   1图片 2 图文 3 文字
+          // bg_color: '#fff', // 背景颜色
+          // font_color: '#222' // 字体颜色
+        },
+        // 配置
+        nav: [],
+        size: 4, // 默认一行四个导航
+        bgImg: "",
+        moreText: '查看更多',
+        moreTextColor: '',
+        marginTop: '0',
+        marginBottom: '0'
+      },
+      setCountsList: [
+        {
+          value: 3,
+          label: this.$i18n.t('shopFeature.tabNav.line3item')
+        },
+        {
+          value: 4,
+          label: this.$i18n.t('shopFeature.tabNav.line4item')
+        },
+        {
+          value: 5,
+          label: this.$i18n.t('shopFeature.tabNav.line5item')
+        }
+      ],
+      linkList: [
+        {
+          id: '',
+          img: '',
+          linkType: 1,
+          microTitle: '',
+          linkTitle: this.$i18n.t('shopFeature.imageAd.prodDetPage'),
+          link: ''
+        },
+        {
+          img: '',
+          linkType: 2,
+          microTitle: '',
+          linkTitle: this.$i18n.t('shopFeature.tabNav.cart'),
+          link: ''
+        },
+        {
+          img: '',
+          linkType: 3,
+          microTitle: '',
+          linkTitle: this.$i18n.t('shopFeature.tabNav.personalCenter'),
+          link: ''
+        },
+        {
+          img: '',
+          linkType: 4,
+          microTitle: '',
+          linkTitle: this.$i18n.t('shopFeature.tabNav.customPath'),
+          link: ''
+        },
+        {
+          img: '',
+          linkType: 5,
+          microTitle: '',
+          linkTitle: this.$i18n.t('shopFeature.headerAd.microPage'),
+          link: ''
+        }
+      ],
+      demoNav: [],
+      currentNav: 0,
+      showNav: [],
+      id: '',
+      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
+      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
+      selectLinkItem: null,
+      customPath: '', // 自定义路径
+      showPathInputDialog: false, // 自定义路径输入弹窗
+      errIndex: '', // 信息不完整的导航项的索引
+      customPathIndex: '',
+      defPic: require('@/assets/img/micro-page/def.png'),
+      selectImgType: 1
+    }
+  },
+  watch: {
+    formData: {
+      deep: true,
+      handler (res) {
+        if (res.size === 4) {
+          this.demoNav.splice(4, 1)
+        } else if (res.size === 5 && this.demoNav.length === 4) {
+          this.demoNav.push({
+            title: 'demo5'
+          })
+        }
+        if (res.nav.length) {
+          this.showNav = res.nav
+        } else {
+          this.showNav = this.demoNav
+        }
+      }
+    }
+  },
+  components: {
+    ProdsSelect,
+    ElxImgbox,
+    ChooseFeature,
+    ImgUpload
+  },
+  computed: {},
+  filters: {
+    pathFilter (val) {
+      if (!val) return ''
+      return String(val)
+    }
+  },
+  mounted () {
+    for (let i = 0; i < 4; i++) {
+      this.demoNav.push({
+        title: `demo${i + 1}`
+      })
+    }
+    if (this.formData.nav.length) {
+      this.showNav = this.formData.nav
+    } else {
+      this.showNav = this.demoNav
+    }
+  },
+  methods: {
+    // 选择商品操作
+    // selectProdHandle() {
+    //   this.dialogChooseGoods = true
+    //   this.$nextTick(() => {
+    //     this.$refs.ProdsSelect.init()
+    //   })
+    // },
+    chooseGoodsFun($event) {
+      this.setLinkInfo()
+      this.formData.nav[this.currentNav].link = $event.prodId
+      this.formData.nav[this.currentNav].microTitle = $event.prodName
+      this.formData.nav[this.currentNav].linkTitle = $event.prodName
+      this.formData.nav[this.currentNav].img = this.resourcesUrl + $event.pic
+      this.dialogChoosePages = false
+    },
+    /**
+     * 重新选择商品/微页面 (商品暂时注释了)
+     */
+    reChooseLink (item, index) {
+      this.selectLinkItem = {}
+      this.selectLinkItem.currentEditIndex = index
+      this.selectLinkItem.linkItem = item
+      if (item.linkType === 1) {
+        this.$nextTick(() => {
+          this.$refs.ProdsSelect.init()
+        })
+      }
+      if (item.linkType === 5) {
+        // 微页面
+        this.choosePage(index)
+      }
+      if (item.linkType === 4) {
+        // 修改自定义路径
+        this.customPath = this.formData.nav[index].link
+        this.customPathIndex = index
+        this.showPathInputDialog = true
+      }
+    },
+     /**
+      * 选择跳转路径
+      **/
+    command (selectLinkItem) {
+      this.selectLinkItem = selectLinkItem
+      // 跳转到商品
+      if (selectLinkItem.linkItem.linkType === 1) {
+        this.dialogChooseGoods = true
+        this.$nextTick(() => {
+          this.$refs.ProdsSelect.init()
+        })
+        return
+      }
+      // 跳转到自定义路径: 显示路径输入弹窗
+      if (selectLinkItem.linkItem.linkType === 4) {
+        this.showPathInputDialog = true
+        return
+      }
+      // 跳转到微页面: 打开微页面列表选择一个页面
+      if (selectLinkItem.linkItem.linkType === 5) {
+        this.choosePage(selectLinkItem.currentEditIndex)
+        return
+      }
+      this.setLinkInfo()
+    },
+    /**
+     * 重置跳转路径
+     */
+    resetLink (index) {
+      this.formData.nav[index].link = ''
+      this.formData.nav[index].linkType = ''
+      this.formData.nav[index].linkTitle = ''
+    },
+    setLinkInfo () {
+      if (this.customPathIndex !== '') {
+        this.formData.nav[this.customPathIndex].link = this.customPath
+        this.customPathIndex = ''
+      } else {
+        // 设置跳转信息
+        this.currentNav = this.selectLinkItem.currentEditIndex
+        this.formData.nav[this.selectLinkItem.currentEditIndex].link = this.selectLinkItem.linkItem.linkType === 4 ? this.customPath : this.selectLinkItem.linkItem.link
+        this.formData.nav[this.selectLinkItem.currentEditIndex].linkType = this.selectLinkItem.linkItem.linkType
+        this.formData.nav[this.selectLinkItem.currentEditIndex].linkTitle = this.selectLinkItem.linkItem.linkTitle
+        this.formData.nav[this.selectLinkItem.currentEditIndex].microTitle = this.selectLinkItem.linkItem.microTitle
+      }
+    },
+    /**
+     * 自定义路径弹窗确认
+     */
+    customPathComfirm () {
+      if (!this.customPath.trim()) {
+        this.$newMessage.error(this.$i18n.t('shopFeature.tabNav.pleaseFillThePath'))
+        return
+      }
+      this.setLinkInfo()
+      this.showPathInputDialog = false
+      this.customPath = ''
+    },
+    /**
+     * 自定义路径弹窗取消
+     */
+    customPathCancel () {
+      this.showPathInputDialog = false
+    },
+    /**
+     * 点击图片
+     */
+    choosePic (index) {
+      this.currentNav = index
+      this.elxImgboxHandle(1)
+    },
+    /**
+     * 选择图片
+     * @param {String} type
+     * type 1 单选; 2 多选
+     */
+    elxImgboxHandle (type) {
+      this.$nextTick(() => {
+        this.$refs.elxImgbox.init(type)
+      })
+    },
+    /**
+     * 选择图片回调
+     * @param {String} imagePath 无前缀的图片地址字符串(多图时用,分割)
+     */
+    refreshPic (imagePath) {
+      // 导航这里只有单选的
+      if(this.selectImgType === 1){
+        this.formData.nav[this.currentNav].img = this.resourcesUrl + imagePath;
+      }else{
+        this.formData.nav[this.currentNav].leftAvatar = this.resourcesUrl + imagePath
+      }
+      // this.formData.nav[this.currentNav].img = this.resourcesUrl + imagePath
+    },
+    changeImgType(selectImgType, index){
+      this.selectImgType = selectImgType;
+      if(selectImgType === 2){
+        this.currentNav = index
+      }
+    },
+    changeImg(imagePath){
+      this.formData.bgImg = this.resourcesUrl + imagePath
+    },
+    /** 添加导航 */
+    addNav () {
+      this.formData.nav.push({
+        title: `demo${this.formData.nav.length + 1}`, // nav 标题
+        microTitle: '', // 微页面的名称
+        img: '', // 图文/图片导航  图片
+        linkType: '', // 1商品详情(暂时弃用)  2购物车 2个人中心 4自定义路径 5微页面
+        link: '', // 自定义路径 || 微页面id
+        linkTitle: '' // 跳转类型名称
+      })
+    },
+    /**
+     * @param {当前操作项索引} index
+     * @param {*} img
+     */
+    choosePage (index, img = false) {
+      this.currentNav = index || this.currentNav
+      if (img) { // 选择图片
+        this.elxImgboxHandle(1)
+      } else {
+        this.dialogChoosePages = true
+      }
+    },
+    // 选择微页面回调
+    chooseChooseFeaturesFun ($event) {
+      this.setLinkInfo()
+      this.formData.nav[this.currentNav].link = $event.data.renovationId
+      this.formData.nav[this.currentNav].microTitle = $event.data.name
+      this.dialogChoosePages = false
+    },
+
+    /**
+     * 开始验证
+     * */
+    checkData () {
+      let isPass = true
+      let errorMessage = ''
+      if (!this.formData.nav.length) {
+        isPass = false
+        errorMessage = this.$i18n.t('shopFeature.tabNav.pleaseAddNav')
+      } else {
+        for (let index = 0; index < this.formData.nav.length; index++) {
+          const navItem = this.formData.nav[index]
+          // this.formData.set.type    1图片 2图文 3文字
+          if (this.formData.set.type < 3) {
+            // 图片校验
+            if (!navItem.img || !navItem.img.trim()) {
+              isPass = false
+              errorMessage = this.$i18n.t('shopFeature.tabNav.pleaseAddPic')
+              this.errIndex = index
+              break
+            }
+          }
+          if (this.formData.set.type > 1) {
+            // 导航标题校验
+            if (!navItem.title || !navItem.title.trim()) {
+              isPass = false
+              errorMessage = this.$i18n.t('shopFeature.tabNav.pleaseFillNavTitle')
+              this.errIndex = index
+              break
+            }
+          }
+          // 公共校验
+          if (!navItem.linkType) {
+            errorMessage = this.$i18n.t('shopFeature.tabNav.pleaseChooseRouteLink')
+            isPass = false
+            this.errIndex = index
+            break
+          }
+          if (navItem.linkType === 4 && !navItem.link.trim()) {
+            errorMessage = this.$i18n.t('shopFeature.tabNav.pleaseFillThePath')
+            isPass = false
+            this.errIndex = index
+            break
+          }
+        }
+      }
+      if (isPass) {
+        this.myCheckResult(isPass)
+        this.errIndex = ''
+      } else {
+        this.showCheckForm()  // 使用element-ui表单自定义校验规则: 需在form标签内,自定义rules:{required:true}
+        this.$newMessage.error(errorMessage)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/views/modules/shop/feature/create/edit/components/videoGoods/index.scss

@@ -0,0 +1,238 @@
+.micro-goods-box {
+  position: relative;
+  padding: 5px 5px;
+  .goods-list {
+    display: flex;
+    flex-wrap: wrap;
+    .goods-li {
+      width: 50%;
+      &.isGoodCell3 {
+        width: 33.33%;
+      }
+      &.isGoodCell1 {
+        width: 100%;
+      }
+      .goods-li-box {
+        padding: 10px 5px;
+        &.no-goods-price {
+          padding-bottom: 32px;
+        }
+        .goodsItem1 {
+          display: flex;
+        }
+        .goods-item {
+          position: relative;
+          .goods-img-one {
+            width: 100%;
+            background-repeat: no-repeat;
+            background-size: contain;
+            background-position: center;
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &::before {
+              content: "";
+              padding-top: 100%;
+              float: left;
+            }
+            &::after {
+              content: "";
+              display: block;
+              clear: both;
+            }
+          }
+          .goods-img-one.goods-empty {
+            background-size: 26px;
+            background-color: #f3f5f7;
+          }
+          .goodsImgOne1 {
+            max-width: 33%;
+            margin-right: 10px;
+          }
+          .goodsBoxInfo1 {
+            max-width: 65%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+          }
+          .goods-box-info {
+            margin-top: 3px;
+            .goods-info-title {
+              width: 100%;
+              font-size: 12px;
+              line-height: 14px;
+              text-overflow: ellipsis;
+              -o-text-overflow: ellipsis;
+              -webkit-text-overflow: ellipsis;
+              -moz-text-overflow: ellipsis;
+              word-break: break-word;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+            }
+            .goods-info-desc {
+              width: 100%;
+              font-size: 12px;
+              color: #999;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              -o-text-overflow: ellipsis;
+              -webkit-text-overflow: ellipsis;
+              -moz-text-overflow: ellipsis;
+              white-space: nowrap;
+              margin-top: 5px;
+            }
+            .goods-info-price {
+              position: relative;
+              margin-top: 10px;
+              &.goods-cell-3 {
+                padding-right: 20px;
+              }
+              .price-info {
+                width: 100%;
+                font-size: 14px;
+                color: #ff4444;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                -o-text-overflow: ellipsis;
+                -webkit-text-overflow: ellipsis;
+                -moz-text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              .goods-info-buy-btn {
+                position: absolute;
+                top: 0;
+                right: 0;
+                .btn-type-1 {
+                  display: inline-block;
+                  width: 20px;
+                  height: 20px;
+                  background-image: url("/img/micro-page/card.png");
+                  background-size: 100%;
+                }
+                i[class^="el-icon-"] {
+                  font-size: 22px;
+                  color: #ff4444;
+                }
+                .el-button {
+                  line-height: 22px;
+                  height: 24px;
+                  padding: 0 7px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .design-config-editor {
+    .design-editor-component-container {
+      padding: 10px 0 !important;
+      .goods-select-form.el-form {
+        .el-form-item {
+          display: flex;
+          flex-direction: column;
+          margin-bottom: 15px
+        }
+      }
+      .goods-select-con {
+        background: #fff;
+        .goods-select-control-group {
+          display: flex;
+          align-items: center;
+        }
+        .goods-select-list {
+          display: flex;
+          flex-wrap: wrap;
+          padding: 12px 0 0 20px;
+          border: 1px solid #EAEAF2;
+          .goods-select-item {
+            position: relative;
+            display: inline-block;
+            margin: 0 16px 12px 0;
+            background-color: #fff;
+            &:hover {
+              .close-item,.edit-item {
+                display: block;
+              }
+            }
+            &:nth-child(5n) {
+              margin-right: 0;
+            }
+            .goods-select-item-img {
+              width: 50px;
+              height: 50px;
+              line-height: 50px;
+              text-align: center;
+              background-repeat: no-repeat;
+              background-position: center;
+              background-size: cover;
+              font-size: 10px;
+              border-radius: 2px;
+            }
+            .goods-select-item-img.goods-empty {
+              background-size: 11px;
+              background-color: #f3f5f7;
+            }
+            .goods-select-item-img.add-btn {
+              border: 1px solid #EAEAF2;
+              cursor: pointer;
+            }
+            .edit-item {
+              position: absolute;
+              width: 20px;
+              height: 20px;
+              border-radius: 20px;
+              line-height: 20px;
+              text-align: center;
+              top: -10px;
+              left: -10px;
+              z-index: 15;
+              font-size: 14px;
+              cursor: pointer;
+              color: #fff;
+              background: #bbb;
+              display: none;
+            }
+            .close-item {
+              position: absolute;
+              width: 20px;
+              height: 20px;
+              border-radius: 20px;
+              line-height: 20px;
+              text-align: center;
+              top: -10px;
+              right: -10px;
+              z-index: 15;
+              font-size: 14px;
+              cursor: pointer;
+              color: #fff;
+              background: #bbb;
+              display: none;
+            }
+          }
+        }
+
+      }
+      .goods-show-container.el-form-item {
+        ::v-deep .el-form-item__content {
+          line-height: 30px;
+          .goods-show-content {
+            border-radius: 2px;
+            padding: 15px 20px;
+            border: 1px solid #EAEAF2;
+            .el-checkbox-group {
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: space-between;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,563 @@
+<template>
+  <div class="micro-goods-box">
+    <!-- 预览区域 -->
+    <div class="design-preview-controller">
+      <div style="background-color: white; border-radius: 10px; margin: 5px">
+        <div style="margin-bottom: 10px">
+          <el-image :src="formData.bgImg.indexOf('https') < 0? resourcesUrl + formData.bgImg: formData.bgImg" v-if="formData.bgImg"/>
+          <span :style="{position: 'absolute',right: '26px', top: '26px', fontColor: formData.moreTextColor }">{{formData.moreText}} > </span>
+          <div :style="{fontSize: (formData.descSize / 2) + 'px', color: formData.descColor, marginLeft: '8px', marginTop: '8px'}">{{formData.desc}}</div>
+        </div>
+        <el-row>
+          <el-col style="width: 205px; height: 308px; margin-left: 8px">
+            <el-image style="border-radius: 16px" :src="formData.videoCover.indexOf('https') < 0? resourcesUrl + formData.videoCover: formData.videoCover" v-if="formData.videoCover"/>
+          </el-col>
+          <el-col style="width: 125px;height: 125px; margin-left: 8px">
+            <el-row>
+              <el-image style="width: 125px;height: 125px; border-radius: 16px;" :src="formData.vGoods[0].pic.indexOf('https') < 0? resourcesUrl + formData.vGoods[0].pic: formData.vGoods[0].pic" v-if="formData.vGoods.length > 0"/>
+              <div v-if="formData.vGoods.length > 0" style="width: 125px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; margin-bottom: 8px; margin-top: 4px">{{formData.vGoods[0].prodName}}</div>
+            </el-row>
+            <el-row>
+              <el-col style="width: 125px;height: 125px">
+                <el-image style="width: 125px;height: 125px; border-radius: 16px;" :src="formData.vGoods[1].pic.indexOf('https') < 0? resourcesUrl + formData.vGoods[1].pic: formData.vGoods[1].pic" v-if="formData.vGoods.length > 1"/>
+                <div v-if="formData.vGoods.length > 1" style="width: 125px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; margin-bottom: 8px; margin-top: 4px">{{formData.vGoods[1].prodName}}</div>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col></el-col>
+        </el-row>
+        <div class="goods-list">
+          <div v-for="(item, index) in goodsList" :key="index">
+            <div>
+              <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 style="margin-left: 8px;margin-right: 8px; margin-top: 8px">
+                  <el-image style="width: 100px;height: 100px;border-radius: 16px;" :src="item.pic.indexOf('https') < 0? resourcesUrl + item.pic: item.pic" v-if="item.pic"/>
+                </div>
+                <!--end 图片-->
+                <div class="goods-box-info" :class="{ goodsBoxInfo1: formData.size === 1 }" :style="{display: 'flex', justifyContent: 'center', marginTop: formData.info_top +'px'}">
+                  <div :style="'width: '+formData.info_unit+'%;'">
+                    <div v-if="formData.showContent.find(x => x === 1)" class="goods-info-title" style="width: 100px; overflow: hidden; text-overflow: ellipsis;">{{ item.prodName }}
+                    </div>
+                    <div v-if="formData.showContent.find(x => x === 2) && item.brief" class="goods-info-desc">
+                      {{ item.brief }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+          <div class="empty-tips" v-if="goodsList.length == 0">
+            {{ $t('shopFeature.goods.pleaseAddProd') }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧编辑区域-->
+    <div v-if="isShowEdit" class="design-editor-item design-hide-class">
+      <div class="design-config-editor">
+        <div class="design-editor-component-title">{{ $t('shopFeature.allCanUse.goodsList') }}</div>
+        <!-- 视频介绍 -->
+        <!-- 选择商品 -->
+        <div class="design-editor-component-container">
+          <el-form ref="formData" :model="formData" label-position="left" class="goods-select-form">
+            <el-form-item label="选择背景">
+              <div @click="changeImgType(1)">
+                <img-upload v-model="formData.bgImg" v-if="!formData.bgImg" @input="changeImg"></img-upload>
+              </div>
+              <el-image :src="formData.bgImg" v-if="formData.bgImg"></el-image>
+              <div v-if="formData.bgImg" @click="formData.bgImg = ''" class="default-btn">删除</div>
+            </el-form-item>
+            <el-form-item label="产品专区介绍">
+              <div style="display: block;">
+                <el-input type="textarea" style="width: 340px" size="mini" :rows="4" v-model="formData.desc"></el-input>
+                <span>字体大小</span>
+                <el-input-number placeholder="字体大小" size="small" controls-position="right" v-model="formData.descSize" :min="0" style="width:112px;margin-right: 20px" />
+                <span>字体颜色</span>
+                <el-color-picker v-model="formData.descColor" size="small"></el-color-picker>
+                <el-input v-model="formData.moreLink" placeholder="跳转链接"></el-input>
+              </div>
+            </el-form-item>
+            <el-form-item label="查看更多的文本">
+              <div style="display: inline-flex;align-items: center">
+                <el-input style="width: 210px" type="text" size="mini" v-model="formData.moreText"></el-input>
+                <el-input-number placeholder="字体大小" size="mini" controls-position="right" v-model="formData.moreTextSize" :min="0" style="width:112px" />
+                <el-color-picker v-model="formData.moreTextColor" size="small"></el-color-picker>
+              </div>
+              <el-input type="text" v-model="formData.moreLink" placeholder="跳转链接" size="small"></el-input>
+              <div style="display: inline-flex">
+                <span>上边距：</span><el-input size="mini" type="text" v-model="formData.marginTop" placeholder="上边距" style="width: 100px; margin-right: 36px"></el-input>
+                <span>下边距：</span><el-input size="mini" type="text" v-model="formData.marginBottom" placeholder="下边距" style="width: 100px;"></el-input>
+              </div>
+            </el-form-item>
+            <el-form-item label="大视频和封面">
+              <el-row>
+                <el-col :span="12">
+                  <span>大视频</span>
+                  <video-upload v-model="formData.video" />
+                </el-col>
+                <el-col :span="12">
+                  <span>视频封面</span>
+                  <div @click="changeImgType(2)">
+                    <img-upload v-model="formData.videoCover" @input="changeCover"></img-upload>
+                  </div>
+                </el-col>
+              </el-row>
+            </el-form-item>
+            <!-- 竖版商品选择 -->
+            <el-form-item label="竖向商品" class="goods-select-con">
+              <div  class="goods-select-list">
+                <transition-group>
+                  <div v-for="(item, index) in vGoodsList" :key="index" class="goods-select-item">
+                    <div class="goods-select-item-img"
+                         :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div>
+                    <span class="close-item" @click="vGoodsList.splice(index, 1)">x</span>
+                    <span @click="showGoodsEdit(item, 1)" style="color: blue; cursor: pointer">修改</span>
+                  </div>
+                </transition-group>
+                <div class="goods-select-item">
+                  <div class="goods-select-item-img add-btn" @click="selectProdHandle(1)">
+                    <i class="el-icon-plus"></i>
+                  </div>
+                </div>
+              </div>
+            </el-form-item>
+            <!-- 横版滚动商品选择 -->
+            <el-form-item label="横向滚动商品" class="goods-select-con">
+              <div  class="goods-select-list">
+                <transition-group>
+                  <div v-for="(item, index) in goodsList" :key="index" class="goods-select-item">
+                    <div  @dragenter="dragenter($event, index)" @dragover="dragover($event, index)" @dragstart="dragstart(index)" draggable >
+                      <div class="goods-select-item-img" :class="{ 'goods-empty': !goodsList[0].prodId }"
+                           :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div>
+                      <span class="close-item" @click="goodsList.splice(index, 1)">x</span>
+                      <span @click="showGoodsEdit(item, 2)" style="color: blue; cursor: pointer">修改</span>
+                    </div>
+                  </div>
+                </transition-group>
+                <div class="goods-select-item">
+                  <div class="goods-select-item-img add-btn" @click="selectProdHandle(2)">
+                    <i class="el-icon-plus"></i>
+                  </div>
+                </div>
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+    <prods-select v-if="dialogChooseGoods" ref="ProdsSelect" @refreshSelectProds="chooseGoodsFun"></prods-select>
+    <!-- 弹窗, 新增图片 -->
+    <elx-imgbox ref="elxImgbox" @refreshPic="refreshPic" :maxSize="10" :imgSizeLimit="false" :prod-index="prodIndex"></elx-imgbox>
+    <el-dialog :visible.sync="goodsEditVisible" v-if="goodsEditVisible" width="400px">
+      <span>商品名称</span>
+      <el-input size="small" placeholder="请输入商品名称" v-model="currentEditGoods.prodName"></el-input>
+      <img-upload v-model="currentEditGoods.pic" style="width: 100px; height: 100px;"/>
+      <el-button size="small" @click="editGoods">确认修改</el-button>
+    </el-dialog>
+  </div>
+</template>
+<script>
+/**
+ * 创建新组件之后，在all-can-use-components中添加
+ * 必须应用 microCreateMinis
+ * 数据必须以formData包含
+ * */
+import {microCreateMinis} from '../../minis'
+import ProdsSelect from '@/components/prods-select'
+import ElxImgbox from '@/components/elx-imgbox'
+import VideoUpload from '@/components/video-upload'
+import ImgUpload from '@/components/img-upload'
+
+/** 商品组件 */
+export default {
+  name: 'micro-goods-box',
+  mixins: [microCreateMinis],
+  props: {},
+  data () {
+    return {
+      selectImgType: 1,
+      goodsEditVisible: false,
+      currentEditGoods: {},
+      goodsType: 1,
+      dragIndex: '',
+      enterIndex: '',
+      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
+      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
+      dialogChooseGoods: false,
+      isGetChooseData: false, // 是否该是获取选择的数据
+      iconList: [{
+        value: 'el-icon-circle-plus-outline',
+        label: '1'
+      }, {
+        value: 'el-icon-goods',
+        label: '2'
+      }, {
+        value: 'el-icon-s-goods',
+        label: '3'
+      }],
+      currentEditIndex: undefined,
+      prodIndex: undefined,
+      formData: {
+        marginTop: '0',
+        marginBottom: '0',
+        descColor: '',
+        descSize:'',
+        bgImg: '',
+        videoCover:'',
+        desc: '',
+        size: 2, // 一行多少个
+        showContent: [1, 2, 3, 4],//1.商品名称2.商品描述3.商品价格4.按钮
+        button_type: '2',
+        goods: [],
+        vGoods:[],
+        button_img_width: 54,
+        button_img_height: 24,
+        button_imgsrc: undefined,//购买按钮背景图
+        buy_btn_type: 1, // 购买按钮的样式
+        button_text: '去定制',// 购买按钮的文本
+        icon_class: 'el-icon-s-goods', //购买按钮的icon
+        button_font_size: 10,// 购买按钮的字体大小
+        button_font_color: '#FFFFFF',// 购买按钮的字体大小
+        button_border_radius: 5, //购买按钮边框弧度
+        button_back_color: '#FB4A73', //购买按钮背景颜色
+        goodsDetail:[],
+        back_type: '2',
+        back_color: '#ffffff',
+        back_imgsrc: undefined, //商品卡片背景图
+        img_unit: 100,
+        info_unit: 90,
+        info_top: 10,
+        bottom_height: 10
+      },
+      // 商品显示内容
+      goodsShowContent: [
+        {
+          value: 1,
+          label: this.$i18n.t('shopFeature.goods.prodName')
+        },
+        {
+          value: 2,
+          label: this.$i18n.t('shopFeature.goods.prodDesc')
+        },
+        {
+          value: 3,
+          label: this.$i18n.t('shopFeature.goods.prodPrice')
+        },
+        {
+          value: 4,
+          label: '按钮'
+        }],
+      // 一行几个
+      lineSize: [
+        {
+          value: 1,
+          label: this.$i18n.t('shopFeature.goods.oneLineItem1')
+        },
+        {
+          value: 2,
+          label: this.$i18n.t('shopFeature.goods.oneLineItem2')
+        },
+        {
+          value: 3,
+          label: this.$i18n.t('shopFeature.goods.oneLineItem3')
+        }
+      ],
+      // 获取的接口数据
+      goodsList: [],
+      vGoodsList:[],
+      // 默认数据
+      demoGoods: [],
+    }
+  },
+  watch: {
+    goodsList: {
+      deep: true,
+      handler (val) {
+        if (val.length) {
+          if (!this.goodsList.find(x => x.myGoodsType === 1)) {
+            this.formData.goods = []
+            val.map(res => {
+              let good = {prodId: res.prodId, prodName: res.prodName, pic: res.pic, price: res.price}
+              this.formData.goods.push(good)
+            })
+            this.goodsList.concat(val)
+          } else {
+
+          }
+        } else {
+          this.goodsList = this.demoGoods
+        }
+      }
+    },
+    vGoodsList: {
+      deep: true,
+      handler (val) {
+        if (val.length) {
+          if (!this.vGoodsList.find(x => x.myGoodsType === 1)) {
+            this.formData.vGoods = []
+            val.map(res => {
+              let good = {prodId: res.prodId, prodName: res.prodName, pic: res.pic, price: res.price}
+              this.formData.vGoods.push(good)
+            })
+            this.vGoodsList.concat(val)
+          } else {
+
+          }
+        }
+      }
+    }
+  },
+
+  filters: {
+    buy_btn_type (val) { // 标题
+      let str = ''
+      switch (val) {
+        case 6:
+          str = 'danger'
+          break
+        case 8:
+          str = 'danger'
+          break
+      }
+      return str
+    }
+  },
+  components: {
+    ProdsSelect,
+    ElxImgbox,
+    VideoUpload,
+    ImgUpload
+
+  },
+  computed: {
+    theme () {
+      return this.$store.getters.theme
+    }
+  },
+  mounted () {
+    for (let i = 0; i < 4; i++) {
+      this.demoGoods.push(
+        {
+          myGoodsType: 1,
+          brief: this.$i18n.t('shopFeature.goods.prodDesc'),
+          pic: require('@/assets/img/micro-page/def.png'),
+          prodName: this.$i18n.t('shopFeature.goods.prodName'),
+          price: '90'
+        }
+      )
+    }
+    if (!this.goodsList.length) {
+      this.goodsList = this.demoGoods
+    }
+    if (Object.keys(this.dataField).length !== 0) {
+      // this.getGoodsInfo(this.dataField.goods, '');
+      this.goodsList = this.dataField.goods;
+      this.vGoodsList = this.dataField.vGoods;
+    }
+  },
+  methods: {
+    showGoodsEdit(item, goodsType){
+      this.goodsType = goodsType
+      this.goodsEditVisible = true;
+      this.currentEditGoods = item;
+      if(item.pic.indexOf('https') >= 0){
+        this.currentEditGoods.pic = item.pic.replace(this.resourcesUrl, '')
+      }
+    },
+    editGoods(newGoods){
+      if(this.goodsType === 1){
+        for(let vGood in this.vGoodsList){
+          let item = this.vGoodsList[vGood]
+          if(item.prodId === this.currentEditGoods.prodId){
+            item.pic = this.resourcesUrl + this.currentEditGoods.pic
+            item.prodName = this.currentEditGoods.prodName
+            this.goodsEditVisible = false
+            this.$forceUpdate()
+            return;
+          }
+        }
+      }else{
+        for(let good in this.goodsList){
+          let item = this.dataField.goodsList[good]
+          if(item.prodId === this.currentEditGoods.prodId){
+            item.pic = this.resourcesUrl + this.currentEditGoods.pic
+            item.prodName = this.currentEditGoods.prodName
+            this.goodsEditVisible = false
+            this.$forceUpdate()
+            return;
+          }
+        }
+      }
+
+    },
+    changeImgType(selectImgType){
+      this.selectImgType = selectImgType;
+    },
+    changeCover(imagePath){
+      if(this.selectImgType === 1){
+        this.formData.bgImg = imagePath;
+      }else{
+        this.formData.videoCover = imagePath
+      }
+    },
+    dragstart(index) {
+      this.dragIndex = index;
+    },
+    dragenter(e, index) {
+      e.preventDefault();
+      // 避免源对象触发自身的dragenter事件
+      if (this.dragIndex !== index) {
+        const moving = this.goodsList[this.dragIndex];
+        this.goodsList.splice(this.dragIndex, 1);
+        this.goodsList.splice(index, 0, moving);
+        // 排序变化后目标对象的索引变成源对象的索引
+        this.dragIndex = index;
+      }
+    },
+    dragover(e, index) {
+      e.preventDefault();
+    },
+    /**
+     * 选择图片回调
+     * @param {String} imagePath 无前缀的图片地址字符串(多图时用,分割)
+     */
+    refreshPic(imagePath) {
+      if(this.currentEditIndex===1){
+        this.formData.button_imgsrc = this.resourcesUrl + imagePath
+      }else{
+        this.formData.back_imgsrc = this.resourcesUrl + imagePath
+      }
+      // console.log(this.formData.button_imgsrc)
+
+    },
+    /** 更换图片 */
+    changeImg(imagePath) {
+      // console.log(index)
+      // this.isChangeImg = true
+      // this.currentEditIndex = index
+      // this.elxImgboxHandle(1)
+      // // this.canChooseImagesNum = 1
+      this.formData.bgImg = this.resourcesUrl + imagePath
+    },
+    elxImgboxHandle(type) {
+      if (this.disabled) {
+        return false
+      }
+      this.elxImgboxVisible = true
+      this.$nextTick(() => {
+        this.$refs.elxImgbox.init(type || 2, 1)
+      })
+    },
+    // 选择商品操作
+    selectProdHandle(goodsType) {
+      this.dialogChooseGoods = true
+      this.goodsType = goodsType;
+      this.$nextTick(() => {
+        this.$refs.ProdsSelect.init()
+      })
+    },
+    // 选择商品回调
+    chooseGoodsFun($event) {
+      if ($event) {
+        if(this.goodsType === 1){
+          if (this.vGoodsList.find(x => x.myGoodsType === 1)) {
+            this.vGoodsList = []
+          }
+          $event.map(newGoodItem => {
+            if (this.formData.vGoods.indexOf(newGoodItem.prodId) === -1) {
+              this.vGoodsList.push(newGoodItem)
+            }
+          })
+        }else{
+          if (this.goodsList.find(x => x.myGoodsType === 1)) {
+            this.goodsList = []
+          }
+          $event.map(newGoodItem => {
+            if (this.formData.goods.indexOf(newGoodItem.prodId) === -1) {
+              this.goodsList.push(newGoodItem)
+            }
+          })
+        }
+      }
+      this.dialogChooseGoods = false
+    },
+    /** 批量获取商品详情 */
+    getGoodsInfo(prodIds, prodType) {
+      this.$http({
+        url: this.$http.adornUrl('/prod/prod/listProdByIdsAndType'),
+        method: 'get',
+        params: this.$http.adornParams({
+          prodIds,
+          prodType
+        })
+      }).then(({data}) => {
+        this.goodsList = this.sortList(data)
+        this.goodsList.forEach(item => {
+          if (!item.pic.includes('http')) {
+            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,
+              })
+          })
+        }
+      })
+    },
+    /**
+     * 按照添加的顺序排序
+     */
+    sortList(goodsList) {
+      let showArr = this.dataField.goods
+      goodsList.forEach(item => {
+        item.sortId = showArr.indexOf(item.prodId)
+      })
+      return goodsList.sort((a, b) => {
+        return a.sortId - b.sortId
+      })
+    },
+    /* 校验 */
+    checkData() {
+      if (this.formData.goods.length > 0) {
+        this.myCheckResult(true)
+      } else {
+        this.$newMessage.error(this.$i18n.t('shopFeature.goods.pleaseAddProd'))
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>