qimall/addons/DepositPresale/backend/views/default/components/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="背景图片">
          <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>
  </div>
</template>
<script>
  Vue.component('diy-main-page', {
    name: "diy-main-page",
    template: '#diy-main-page',
    props: {
      mainPage: {
        type: Object,
        default () {
          return {}
        }
      },
    },
    data() {
      return {
        form: {
          name: '',
          type: '纯色',
          imageUrl: [],
          defColor: ''
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        var data = deepClone(this.mainPage)
        if (data.imgUrl) {
          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) {
        this.form.imgUrl = arr[0].imgUrl
        this.update()
      },
      update() {
        this.$emit("change", this.form)
      },
    }
  });
</script>