装修优化

src/store/modules/user.js

@@ -3,9 +3,13 @@ export default {
   state: {
     id: 0,
     name: '',
-    mobile: ''
+    mobile: '',
+    backSty : ''
   },
   mutations: {
+    updateback(state,str){
+      state.backSty = str
+    },
     updateId (state, id) {
       state.id = id
     },

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

@@ -65,6 +65,24 @@
                   size="small" />
               </el-form-item>
             </el-form-item>
+            <el-form-item label="页面背景">
+              <el-radio-group v-model="formData.backType">
+                <el-radio :label="1">颜色背景</el-radio>
+                <el-radio :label="2">图片背景</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="渐变色(左)" v-if="formData.backType===1">
+              <el-color-picker v-model="formData.leftcolor" size="small"></el-color-picker>
+            </el-form-item>
+            <el-form-item label="渐变色(右)" v-if="formData.backType===1">
+              <el-color-picker v-model="formData.rightcolor" size="small"></el-color-picker>
+            </el-form-item>
+            <el-form-item label="背景图" v-if="formData.backType===2">
+              <img-upload v-model="formData.backImg"></img-upload>
+              <div class="default-btn" @click="formData.backImg=''">
+                {{$t('shopFeature.header.reset')}}
+              </div>
+            </el-form-item>
             <!-- <el-form-item label="页面描述:">
               <el-input v-model="formData.description"
                         size="small"
@@ -124,9 +142,15 @@ export default {
       }
     }
     return {
+      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
       formData: {
+        backType: 1,
         title: '',
         bgImg: '',
+        leftcolor: '',
+        rightcolor: '',
+        backImg: '',
+        bg_src: '',
         textColor: '#ffffff',
         description: '',
         category: '',
@@ -148,7 +172,52 @@ export default {
       }
     }
   },
-  watch: {},
+  watch: {
+    'formData.leftcolor': {
+      handler () {
+        if (this.formData.backType === 1) {
+          let str = 'background: linear-gradient(to right, ' + (this.formData.leftcolor || '#fff') + ',' + (this.formData.rightcolor || '#fff') + ');'
+          this.$store.commit('user/updateback', str)
+        } else {
+          let str = 'background-image: url(' + this.resourcesUrl + this.formData.backImg + ');'
+          this.$store.commit('user/updateback', str)
+        }
+      }
+    },
+    'formData.rightcolor': {
+      handler () {
+        if (this.formData.backType === 1) {
+          let str = 'background: linear-gradient(to right, ' + (this.formData.leftcolor || '#fff') + ',' + (this.formData.rightcolor || '#fff') + ');'
+          this.$store.commit('user/updateback', str)
+        } else {
+          let str = 'background-image: url(' + this.resourcesUrl + this.formData.backImg + ');'
+          this.$store.commit('user/updateback', str)
+        }
+      }
+    },
+    'formData.backType': {
+      handler () {
+        if (this.formData.backType === 1) {
+          let str = 'background: linear-gradient(to right, ' + (this.formData.leftcolor || '#fff') + ',' + (this.formData.rightcolor || '#fff') + ');'
+          this.$store.commit('user/updateback', str)
+        } else {
+          let str = 'background-image: url(' + this.resourcesUrl + this.formData.backImg + ');'
+          this.$store.commit('user/updateback', str)
+        }
+      }
+    },
+    'formData.backImg': {
+      handler () {
+        if (this.formData.backType === 1) {
+          let str = 'background: linear-gradient(to right, ' + (this.formData.leftcolor || '#fff') + ',' + (this.formData.rightcolor || '#fff') + ');'
+          this.$store.commit('user/updateback', str)
+        } else {
+          let str = 'background-image: url(' + this.resourcesUrl + this.formData.backImg + ');'
+          this.$store.commit('user/updateback', str)
+        }
+      }
+    }
+  },
   components: {
     ImgUpload
   },

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

@@ -4,12 +4,19 @@ import { url } from 'video.js';
   <div class="micro-search-bar-box">
     <!--预览控制区-->
     <div class="design-preview-controller">
-      <div class="search-con"
+      <div class="search-con" v-if="formData.backType===1"
            :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="logoimg" :style="'backgroundImage: url('+resourcesUrl+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 class="search-con" v-else
+           :style="'background-image:url('+resourcesUrl+formData.bg_src+')'">
+        <div class="top"></div>
+        <div class="logo-f">
+          <div class="logoimg" :style="'backgroundImage: url('+resourcesUrl+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>
@@ -20,22 +27,29 @@ import { url } from 'video.js';
         <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-form-item label="背景形式">
+            <el-radio-group v-model="formData.backType">
+              <el-radio :label="1">颜色背景</el-radio>
+              <el-radio :label="2">图片背景</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="渐变色(左)" v-if="formData.backType===1">
             <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-form-item label="渐变色(右)" v-if="formData.backType===1">
             <el-color-picker v-model="formData.right_color"></el-color-picker>
           </el-form-item>
+          <el-form-item label="背景图" v-if="formData.backType===2">
+            <img-upload v-model="formData.bg_src"></img-upload>
+            <div class="default-btn" @click="formData.bg_src=''">
+              {{$t('shopFeature.header.reset')}}
+            </div>
+          </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>
+            <img-upload v-model="formData.logo_src"></img-upload>
+            <div class="default-btn" @click="formData.logo_src=''">
+              {{$t('shopFeature.header.reset')}}
+            </div>
           </el-form-item>
           <el-form-item label="标题">
             <el-input v-model="formData.title_text"></el-input>
@@ -61,6 +75,7 @@ import ElxImgbox from '@/components/elx-imgbox'
  * 数据必须以formData包含
  * */
 import {microCreateMinis} from '../../minis'
+import ImgUpload from "@/components/img-upload/index.vue";
 
 export default {
   name: 'micro-search-bar',
@@ -76,6 +91,7 @@ export default {
         bg_src: '',
         logo_src: '',
         title_text: '',
+        backType: 1,
         left_color: '#FEEAFF',
         right_color: '#D8D6FA',
         title_color: '#000000'
@@ -98,6 +114,7 @@ export default {
   },
   watch: {},
   components: {
+    ImgUpload,
     ElxImgbox
   },
   computed: {},

src/views/modules/platform/feature/create/edit/edit.scss

@@ -325,7 +325,9 @@ body > .preview-box {
               min-height: 760px;
               margin: 30px 350px 0 0;
               border: 1px solid #e5e5e5;
-              background: #fff;
+              //background: #fff;
+              background-size: 100%;
+              background-repeat: no-repeat;
               .item-list {
                 position: relative;
                 min-height: 304px;

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

@@ -18,7 +18,7 @@
           <!-- 界面预览 -->
           <div id="scrollbar" class="design-editor">
             <div ref="designBox" class="design-box">
-              <div ref="designPreview" class="design-preview">
+              <div ref="designPreview" class="design-preview" :style="getBackSty()">
                 <div v-if="componentLists.length" ref="Preview" class="item-list">
                   <!--头部-->
                   <div
@@ -434,6 +434,10 @@ export default {
     this.configComponents = JSON.parse(JSON.stringify(this.currentConfigComponents))
   },
   methods: {
+    getBackSty(){
+      console.log('this.$store.state.user.backSty',this.$store.state.user.backSty)
+      return this.$store.state.user.backSty || ''
+    },
     /** 关闭组件管理 */
     componentOperation () {
       this.setOther.componentOperation = false