分类栏设置推荐图片，装修功能新增首页顶部栏

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

@@ -183,6 +183,13 @@ export default {
           pic: require('@/assets/img/micro-page/p-prod-list.png'),
           picActive: require('@/assets/img/micro-page/p-prod-list-active.png'),
           routerPath: () => import('../goodsTab/index.vue')
+        },
+        {
+          type: 'topLogoTab',
+          title: '顶部logo栏',
+          pic: require('@/assets/img/micro-page/p-tabs.png'),
+          picActive: require('@/assets/img/micro-page/p-tabs-active.png'),
+          routerPath: () => import('../top_logo_tab/index.vue')
         }
         // ,
         // // 分类

src/views/modules/platform/feature/create/edit/components/goodsTab/index.scss

@@ -55,10 +55,10 @@
 
       .tab-item-hot{
         position: absolute;
-        right: 2px;
-        top: 15px;
-        width: 8px;
-        height: 8px;
+        right: 0px;
+        top: 10px;
+        width: 20px;
+        height: 20px;
         border-radius: 50%;
       }
     }
@@ -201,6 +201,11 @@
       }
       .goods-select-con {
         background: #fff;
+
+        .imgs{
+          width: 100px;
+          height: 100px;
+        }
         .goods-select-control-group {
           display: flex;
           align-items: center;

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

@@ -8,7 +8,7 @@
             <div class="tab-item-child"
                  :style="addTabForm.categoryId===item.categoryId ? 'color:' + formData.tabStyle.activeColor + ';font-weight: bold;' : 'color:' + formData.tabStyle.color">
               {{item.categoryName}}
-              <div class="tab-item-hot" :style="'background:' + formData.tabStyle.hotColor" v-show="item.hotTip===1"></div>
+              <div class="tab-item-hot" :style="'background-image: url('+ formData.tabStyle.hotImg +');background-size: 100%; background-repeat: no-repeat;'" v-show="item.hotTip===1"></div>
               <div class="guangbiao" :style="'background:' + formData.tabStyle.bottomColor" v-if="addTabForm.categoryId===item.categoryId"></div>
             </div>
             </div>
@@ -101,8 +101,10 @@
               <el-form-item label="下标颜色" class="goods-select-con">
                 <el-color-picker v-model="formData.tabStyle.bottomColor" size="small"></el-color-picker>
               </el-form-item>
-              <el-form-item label="热度点颜色" class="goods-select-con">
-                <el-color-picker v-model="formData.tabStyle.hotColor" size="small"></el-color-picker>
+              <el-form-item label="推荐icon" class="goods-select-con">
+                <div :style="'background-image: url('+ formData.tabStyle.hotImg +');background-size: 100%; background-repeat: no-repeat;height: 100px;width: 100px;'"></div>
+                <el-button @click="changeImg(2)">选择</el-button>
+<!--                <el-color-picker v-model="formData.tabStyle.hotColor" size="small"></el-color-picker>-->
               </el-form-item>
               <el-form-item label="字体颜色" class="goods-select-con">
                 <el-color-picker v-model="formData.tabStyle.color" size="small"></el-color-picker>
@@ -123,16 +125,16 @@
                        :key="index"
                        class="goods-select-item">
                     <div @dragenter="tabdragenter($event, index)" @dragover="tabdragover($event, index)" @dragstart="tabdragstart(index)" draggable>
-                       <span class="edit-item"
+                       <span class="edit-item" v-if="item.categoryId!=='all'"
                              @click="openadd(item)"><i class="el-icon-edit"></i></span>
                       <div class="goods-select-item-img" @click="clickTab(item)" :style="addTabForm.categoryId===item.categoryId?'font-weight: bold':''">{{item.categoryName}}</div>
-                      <span class="close-item"
+                      <span class="close-item" v-if="item.categoryId!=='all'"
                             @click="formData.tabList.splice(index,1)"><i class="el-icon-delete"></i></span>
                     </div>
                   </div>
                 </transition-group>
                 <div class="goods-select-item">
-                  <el-button @click="openadd()">
+                  <el-button @click="openbefore()">
                     <i class="el-icon-plus"></i>
                   </el-button>
                 </div>
@@ -208,6 +210,8 @@
       </div>
     </el-dialog>
     <ProdsSelect v-if="dialogChooseGoods" ref="ProdsSelect" @refreshSelectProds="chooseGoodsFun"></ProdsSelect>
+    <!-- 弹窗, 新增图片 -->
+    <elx-imgbox ref="elxImgbox" @refreshPic="refreshPic" :maxSize="10" :imgSizeLimit="false"></elx-imgbox>
   </div>
 </template>
 <script>
@@ -220,6 +224,7 @@ import { microCreateMinis } from '../../minis'
 import ProdsSelect from '@/components/prods-select'
 import {treeDataTranslate} from "@/utils";
 import category from './category.png'
+import ElxImgbox from "@/components/elx-imgbox/index.vue";
 /** 商品组件 */
 export default {
   name: 'micro-goods-box',
@@ -227,6 +232,9 @@ export default {
   props: {},
   data () {
     return {
+      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
+      imgchouse: 1,
+      elxImgboxVisible: false,
       category: category,
       categoryList: [],
       loadlist: [
@@ -261,14 +269,15 @@ export default {
         leftBackColor: '#fff',
         tabStyle: {
           bottomColor: '#EE4C0C',
-          hotColor: '#EE4C0C',
+          // hotColor: '#EE4C0C',
+          hotImg: '',
           rightBackColor: '#ffffff',
           leftBackColor: '#ffffff',
           tabOpacity: 100,
           activeColor: '#000000',
           color: '#333333'
         },
-        tabList: []
+        tabList: [{categoryName: '全部', categoryId: 'all'}]
         // buy_btn_type: 1, // 购买按钮的样式
         // button_text: '马上抢'// 购买按钮的文本
       },
@@ -354,6 +363,7 @@ export default {
     }
   },
   components: {
+    ElxImgbox,
     ProdsSelect
   },
   computed: {
@@ -384,6 +394,25 @@ export default {
     }
   },
   methods: {
+    elxImgboxHandle (type) {
+      // if (this.disabled) {
+      //     return false
+      // }
+      this.elxImgboxVisible = true
+      this.$nextTick(() => {
+        this.$refs.elxImgbox.init(type || 2, 1)
+      })
+    },
+    refreshPic (imagePath) {
+      console.log(this.resourcesUrl + imagePath)
+      this.formData.tabStyle.hotImg = this.resourcesUrl + imagePath
+    },
+    changeImg (index) {
+      console.log(index)
+      this.currentEditIndex = index
+      this.elxImgboxHandle(1)
+      // this.canChooseImagesNum = 1
+    },
     hexToRgba(hex, opacity) {
       let str = 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ','
         + parseInt('0x' + hex.slice(5, 7)) + ',' + (opacity/100) + ')';
@@ -407,6 +436,9 @@ export default {
       e.preventDefault();
     },
     clickTab(item){
+      if(item.categoryId==='all'){
+        return
+      }
       console.log(item)
       this.addTabForm = item
       this.getGoodsInfo(item.goods, '')
@@ -477,8 +509,35 @@ export default {
       this.adddia = false
       console.log('this.formdata',this.formData.tabList)
     },
+    openbefore(){
+      if(this.formData.tabList.length === 1){
+        this.$confirm(`检测到系统配置的分类列表，是否一键导入?`, '提示', {
+          confirmButtonText: '立即导入',
+          cancelButtonText: '去自定义',
+          type: 'warning'
+        }).then(() => {
+          this.categoryList.forEach(item => {
+            console.log('item',item)
+            let obj = {
+              hotTip: 0,
+              categoryName: item.categoryName,
+              categoryId: item.categoryId,
+              goods: [],
+              loadType: 1
+            }
+            this.formData.tabList.push(obj)
+          })
+          this.adddia = false
+        }).catch(() => {
+          this.openadd()
+        })
+      }else{
+        this.openadd()
+      }
+    },
     // 获取数据列表
     openadd (item) {
+
       console.log('item',item)
       this.addTabForm = {
         categoryName: null,

src/views/modules/platform/feature/create/edit/components/header/index.scss

@@ -3,13 +3,12 @@
   .preview-header {
     height: 64px;
     width: 100%;
-    background-repeat:no-repeat;
-    background-size:100% 100%;
-    -moz-background-size:100% 100%;
+    background-repeat: no-repeat;
+    background-size: contain;
     position: relative;
-    background-image: url("../../../../../../../../assets/img/micro-page/micro-create-header.png");
     display: flex;
     justify-content: center;
+    background-image: url("../../../../../../../../assets/img/micro-page/micro-create-header.png");
     .preview-header-title {
       box-sizing: initial;
       display: inline-block;

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

@@ -13,18 +13,20 @@
 </div>
 -->
 <template>
-  <div class="micro-header-box">
+  <div class="micro-header-box" style="display: block">
     <!--预览控制区-->
-    <div class="design-preview-controller">
-      <div v-if="formData.bgType===0" class="preview-header" :style="{ 'background': formData.bgColor }">
-        <div class="preview-header-title" :style="{color: formData.textColor}">{{ formData.title || $t('shopFeature.header.microTitle') }}</div>
-      </div>
-      <div v-else-if="formData.bgType===1" class="preview-header" :style="[formData.bgImg ? {'background-image': `url(${resources + formData.bgImg}) !important`} : { 'background': formData.bgColor }]">
-        <div class="preview-header-title" :style="{color: formData.textColor}">{{ formData.title || $t('shopFeature.header.microTitle') }}</div>
-      </div>
-      <div v-else class="preview-header">
-        <div class="preview-header-title" :style="{color: formData.textColor}">{{ formData.title || $t('shopFeature.header.microTitle') }}</div>
-      </div>
+    <div class="design-preview-controller" style="position:absolute;top:-20px;width: 100%">
+      <div class="preview-header">
+        <div class="preview-header-title">{{ formData.title || $t('shopFeature.header.microTitle') }}</div>
+      </div><!--      <div v-if="formData.bgType===0" class="preview-header" :style="{ 'background': formData.bgColor }">-->
+<!--        <div class="preview-header-title" :style="{color: formData.textColor}">{{ formData.title || $t('shopFeature.header.microTitle') }}</div>-->
+<!--      </div>-->
+<!--      <div v-else-if="formData.bgType===1" class="preview-header" :style="[formData.bgImg ? {'background-image': `url(${resources + formData.bgImg}) !important`} : { 'background': formData.bgColor }]">-->
+<!--        <div class="preview-header-title" :style="{color: formData.textColor}">{{ formData.title || $t('shopFeature.header.microTitle') }}</div>-->
+<!--      </div>-->
+<!--      <div v-else class="preview-header">-->
+<!--        <div class="preview-header-title" :style="{color: formData.textColor}">{{ formData.title || $t('shopFeature.header.microTitle') }}</div>-->
+<!--      </div>-->
     </div>
     <!--编辑工作区-->
     <div v-show="isShowEdit"

src/views/modules/platform/feature/create/edit/components/top_logo_tab/index.scss

@@ -0,0 +1,73 @@
+/**class 必须有一个父class包起来，避免混淆*/
+.micro-search-bar-box {
+  .design-preview-controller {
+    .search-con {
+      height: 100px;
+      //background-color: #fff;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      background-repeat: no-repeat;
+      background-size: 100%;
+      border-bottom: 1px solid grey;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .top {
+        width: 100%;
+        height: 50px;
+      }
+
+      .logo-f {
+        width: 90%;
+        height: 50px;
+        display: flex;
+        // justify-content: center;
+        align-items: center;
+
+        .logoimg {
+          width: 30px;
+          height: 30px;
+
+        }
+
+        .title{
+          font-weight: bold;
+          margin-left: 10px;
+        }
+      }
+    }
+
+    .micro-search-bar {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      color: #999;
+      padding-left: 10px;
+
+      .tit-text {
+        margin-left: 2px;
+      }
+    }
+  }
+
+  .design-config-editor {
+    .imgs {
+      width: 50px;
+      height: 50px;
+    }
+
+    .design-editor-component-title {
+      margin-bottom: 5px;
+    }
+
+    .el-form-item {
+      margin-bottom: 10px;
+    }
+
+    .el-slider {
+      width: 80%;
+    }
+  }
+}

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

@@ -0,0 +1,145 @@
+import { url } from 'video.js';
+<!--公共广告头部组件-->
+<template>
+  <div class="micro-search-bar-box">
+    <!--预览控制区-->
+    <div class="design-preview-controller">
+      <div class="search-con"
+           :style="'background: linear-gradient(to right, '+this.formData.left_color+','+this.formData.right_color+');'">
+        <!--           :style="'background-image:url('+formData.bg_src+')'">-->
+        <div class="top"></div>
+        <div class="logo-f">
+          <div class="logoimg" :style="'backgroundImage: url('+formData.logo_src+');background-size: 100%; background-repeat: no-repeat;'"></div>
+          <div class="title" :style="'color: '+ formData.title_color +';'">{{ formData.title_text }}</div>
+        </div>
+      </div>
+    </div>
+    <!--编辑工作区-->
+    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
+      <div class="design-config-editor">
+        <div class="design-editor-component-title">顶部logo栏</div>
+
+        <el-form ref="formData" :model="formData" label-width="100px" label-position="left">
+          <!--                    <el-form-item label="背景图">-->
+          <!--                        <el-image class="imgs" :src="formData.bg_src"></el-image>-->
+          <!--                        <el-button  @click="changeImg(1)">选择</el-button>-->
+          <!--                    </el-form-item>-->
+          <el-form-item label="渐变色(左)">
+<!--            <el-input v-model="formData.left_color"></el-input>-->
+            <el-color-picker v-model="formData.left_color"></el-color-picker>
+          </el-form-item>
+          <el-form-item label="渐变色(右)">
+<!--            <el-input v-model="formData.right_color"></el-input>-->
+            <el-color-picker v-model="formData.right_color"></el-color-picker>
+          </el-form-item>
+          <el-form-item label="logo图">
+            <div class="imgs" :style="'backgroundImage: url('+formData.logo_src+');background-size: 100%; background-repeat: no-repeat;'"></div>
+<!--            <el-image class="imgs" :src="formData.logo_src"></el-image>-->
+            <el-button @click="changeImg(2)">选择</el-button>
+          </el-form-item>
+          <el-form-item label="标题">
+            <el-input v-model="formData.title_text"></el-input>
+          </el-form-item>
+          <el-form-item label="标题颜色">
+            <el-color-picker v-model="formData.title_color"></el-color-picker>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <!-- 弹窗, 新增图片 -->
+    <elx-imgbox ref="elxImgbox" @refreshPic="refreshPic" :maxSize="10" :imgSizeLimit="false"></elx-imgbox>
+  </div>
+</template>
+<script>
+import './index.scss'
+import ElxImgbox from '@/components/elx-imgbox'
+
+/**
+ * 创建新组件之后，在all-can-use-components中添加
+ * 必须应用 microCreateMinis
+ * 数据必须以formData包含
+ * */
+import {microCreateMinis} from '../../minis'
+
+export default {
+  name: 'micro-search-bar',
+  mixins: [microCreateMinis],
+  props: {},
+  data () {
+    return {
+      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
+      imgchouse: 1,
+      elxImgboxVisible: false,
+      formData: {
+        title: '顶部logo栏',
+        bg_src: '',
+        logo_src: '',
+        title_text: '',
+        left_color: '#FEEAFF',
+        right_color: '#D8D6FA',
+        title_color: '#000000'
+      },
+      // 各项设置
+      positionType: [
+        {label: 1, title: this.$i18n.t('shopFeature.searchBar.normal')},
+        {label: 2, title: this.$i18n.t('shopFeature.searchBar.topThenLock')}
+      ],
+      boxRadio: [
+        {label: 2, title: this.$i18n.t('shopFeature.searchBar.square')},
+        {label: 50, title: this.$i18n.t('shopFeature.searchBar.fillet')}
+      ],
+      textAlgin: [
+        {label: 'start', title: this.$i18n.t('shopFeature.searchBar.left')},
+        {label: 'center', title: this.$i18n.t('shopFeature.searchBar.center')}
+      ],
+      commonCheckFieldRules: 'checkData' // 当前组件默认的规则判断函数
+    }
+  },
+  watch: {},
+  components: {
+    ElxImgbox
+  },
+  computed: {},
+  mounted () {
+  },
+  methods: {
+    /** 更换图片 */
+    changeImg (index) {
+      console.log(index)
+      this.imgchouse = index
+      this.isChangeImg = true
+      this.currentEditIndex = index
+      this.elxImgboxHandle(1)
+      // this.canChooseImagesNum = 1
+    },
+    elxImgboxHandle (type) {
+      // if (this.disabled) {
+      //     return false
+      // }
+      this.elxImgboxVisible = true
+      this.$nextTick(() => {
+        this.$refs.elxImgbox.init(type || 2, 1)
+      })
+    },
+    refreshPic (imagePath) {
+      if (this.imgchouse == 1) {
+        this.formData.bg_src = this.resourcesUrl + imagePath
+      } else {
+        this.formData.logo_src = this.resourcesUrl + imagePath
+      }
+      // console.log(this.formData.button_imgsrc)
+    },
+    /**
+     * 开始验证
+     */
+    checkData () {
+      this.myCheckResult(true)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>