可视化

可视化使用

可视化页面目录：src/pages/setting/devise/index.vue;

页面分3个模块：移动端首页、首页的可视化编辑、项目链接；

页面组成

<div class="flex-wrapper">
    <iframe class="iframe-box" :src="iframeUrl" frameborder="0" ref="iframe"></iframe>
    <div>
        <div class="content">
            <rightConfig :name="configName" :pageId="pageId"></rightConfig>
	</div>
    </div>
    <links></links>
</div>

1.移动端首页：使用iframe引用前台页面； 例如：

<iframe class="iframe-box" :src="iframeUrl" frameborder="0" ref="iframe"></iframe>

参数说明

iframeUrl iframe链接地址

生产线上环境：this.iframeUrl = `${location.origin}?type=iframeMakkMinkkJuan`

本地调试环境： this.iframeUrl = http://localhost:xxxx/?type=iframeMakkMinkkJuan http://localhost:xxxx 为uni-app前台启动的环境,方便调试

iframe 参数接受

mounted () {
    //监听子页面给当前页面传值
    window.addEventListener('message', this.handleMessage, false)
},
//接收iframe值
handleMessage (event) {
    if (event.data.name) {
        this.configName = event.data.name
        this.add(event.data.name)
    }
},

拿到值之后就能判断到当前点击的是哪个组件

2.可视化编辑： src/components/rightConfig/index.vue

页面为主要操作的容器；

所有小组件使用动态添加的方法引用到此页面；

例如：

<template>
    <div class="right-box" v-if="rCom.length">
        <div class="title-bar">模块配置</div>
        <div class="mobile-config" v-if="rCom.length">
            <div v-for="(item, key) in rCom" :key="key">
                //此标签为动态添加组件
                <component :is="item.components.name" :name="item.configNme" :configData="configData"></component>
            </div>
            <div style="text-align: center;" v-if="rCom.length">
                <Button type="primary" style="width:100%;margin:0 auto;height: 40px" @click="saveConfig">保存</Button>
            </div>
        </div>
    </div>
</template>

小组件目录：src/components/diyComponents/放置你要编辑产品的具体操作功能； 例如（c_is_show.vue）：

<template>
    <div class="c_row-item">
        <Col class="label" span="4">
            是否显示
        </Col>
        <Col span="19">
            <i-switch v-model="datas[name].val" />
        </Col>
    </div>
</template>

小组件初始化数据datas在vuex里面储存，查找src/store/module/moren.js vuex中首页可视化数据: 例如：

import toolCom from '@/components/diyComponents/index.js';
export default {
    namespaced: true,
    state: {
        activeName: {},
        defaultConfig: {
            //a_headerSerch此名字必须与前台页面组件名字保持一致
            a_headerSerch: {
                isShow: {
                    val: true
                },
                imgUrl: {
                    title: '最多可添加1张图片，图片建议宽度128 * 45px',
                    url: 'http://kaifa.crmeb.net/uploads/attach/2019/10/20191023/db7b7bef9dffdedd27e9a3aa34218cea.png'
                }
            }
        },
        component: {
            //a_headerSerch此名字必须与前台页面组件名字保持一致
            a_headerSerch: {
                list: [
                    {
                        components: toolCom.c_is_show,
                        configNme: 'isShow'
                    },
                    {
                        components: toolCom.c_upload_img,
                        configNme: 'imgUrl'
                    }
                ]
            }
        }
    },
    mutations: {
        setConfig(state, name) {
            state.activeName = name;
        },
        upDataGoodList(state, type) {},
        /**
         * @description 更新默认数据
         * @param {Object} state vuex state
         * @param {Object} data
         */
        updataConfig(state, data) {
            state.defaultConfig = data;
            let value = Object.assign({}, state.defaultConfig);
            state.defaultConfig = value;
        }
    },
    actions: {}
};