qimall/backend/views/components/common/diy/style-components/nav/diy-main-page.php

<template id="diy-main-page">
  <div>
    <diy-style-contain title="背景设置">
      <el-form ref="form" :model="form" label-width="80px" style="margin-top: 20px;">
        <el-form-item label="页面风格">
          <div>标准</div>
        </el-form-item>
        <el-form-item label="底部颜色">
          <el-color-picker v-model="form.defColor" @change="updateColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="背景图片">
          <div class="bg-img-box" v-show="isShowDefBg">
            <div  class="bg-img-item" @click="bgChange('')">
                <div class=" bg-img"  :class="!defBg?'active-img':''"></div>
                <span class="img-text">空</span>
            </div>
            <div v-for="(item,index) in defBgList" :key="item.type" class="bg-img-item" @click="bgChange(item.url)">
                <image  :src="static_img_prefix+item.url"  class="bg-img" :class="defBg == item.url?'active-img':''">
                <span class="img-text">背景样式{{item.type}}</span>
            </div>
          </div>
          <diy-img-setting :img-infos="form.imageUrl" def-img-count="1" :show-url="false" :suggest-site="2" suggest-size-text="建议尺寸：宽750x高度不限" :img-contain-style="{padding: 0}" :show-title="false" @change="addIconImg"></diy-img-setting>
        </el-form-item>
    </diy-style-contain>
    <diy-size-setting 
      top-name="边距" 
      style="border: none" 
      :size-infos="sizeInfos" 
      :size-infos-value="sizeInfosValue" 
      :max-value="25" 
      @chang="paddingChange"
    ></diy-size-setting>
  </div>
</template>
<script>
  Vue.component('diy-main-page', {
    name: "diy-main-page",
    template: '#diy-main-page',
    props: {
      mainPage: {
        type: Object,
        default () {
          return {}
        }
      },
    },
    data() {
      return {
        static_img_prefix: '<?= Yii::getAlias('@attachurl') ?>'+'/static',
        form: {
          name: '',
          type: '纯色',
          imgUrl:'',
          imageUrl: [],
          defColor: '',
          paddingTop: 0,
          paddingBottom: 0,
          paddingLeft: 0,
          paddingRight: 0
        },
        sizeInfos: ['上边距', '下边距', '左右边距'],
        // 页面内边距
        sizeInfosValue: [0, 0, 0],
        defBg:'',
        defBgList:[{
            type:'1',
            url:'/diy/nav/bg1.png'
          },{
            type:'2',
            url:'/diy/nav/bg2.png'
          },{
            type:'3',
            url:'/diy/nav/bg3.png'
          },{
            type:'4',
            url:'/diy/nav/bg4.png'
          },{
            type:'5',
            url:'/diy/nav/bg5.png'
          }]
      }
    },
    computed: {
        isShowDefBg() {
            return  this.mainPage.diytemplate =='user_center'
        }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        console.log('data------------',this)
        let data = deepClone(this.mainPage)
        this.sizeInfosValue = [parseInt(data.paddingTop),parseInt(data.paddingBottom),parseInt(data.paddingLeft)]
        if (data.imgUrl) {
          if (data.imgUrl.indexOf('http') ==-1){
            this.defBg = data.imgUrl 
          } else {
            this.defBg = 'diy'
            data.imageUrl = [{
              imgUrl: data.imgUrl
            }]
          } 
          
        } else {
          data.imageUrl = []
        }
        this.form = data
      },
      handleChange(val) {
        console.log(val);
      },
      radioChange() {
        this.update()
      },
      updateColor(colors) {
        this.update()
      },
      nameChange() {
        this.update()
      },
      // 图片
      addIconImg(arr) {
        if (arr[0].imgUrl || this.defBg == 'diy') {
          this.form.imgUrl =  arr[0].imgUrl
          this.defBg = arr[0].imgUrl ? 'diy':''
        } 
        this.update()
      },
      bgChange(url) {
        this.defBg = url || '';
        this.form.imgUrl = this.defBg
        this.update()
      },
      // 内边距设置
      paddingChange(data) {
        console.log("paddingChange", data);
        this.sizeInfos = data;
        
        const [topInfo, bottomInfo, lrInfo] = this.sizeInfos;
        
        const formatValue = info => info ? `${info.value}${info.unit}` : '0px';
        
        const top = formatValue(topInfo);
        const bottom = formatValue(bottomInfo);
        const lr = formatValue(lrInfo);
        
        this.form = {
            ...this.form,
            paddingTop: top,
            paddingBottom: bottom,
            paddingLeft: lr,
            paddingRight: lr
        };
        
        this.update();
      },
      update() {
        this.$emit("change", this.form)
      },
    }
  });
</script>
<style lang="scss">
.bg-img-box {
  display: flex;
  flex-wrap: wrap;
  background: #f6f6f6;
  padding:12px 9px 0;
  .bg-img-item { 
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-right: 12px;
    .img-text {
     color: #606266
    }
  }
  .bg-img {
    border:1px solid #e6e6e6;
    background: #fff;
    width:80px;
    height:60px;
    padding: 4px;
    border-radius:4px;
  }
  .active-img {
    border-color:var(--diy-color)
  }
 
}
</style>