qimall/addons/Bargain/backend/views/default/components/common/nav/style.php

<template id="nav-style">
    <div class="fill-border-top nav-style">
        <diy-style-contain :show-title="false" :default-style="{}">
            <div class="diy-nav-tabs">
                <el-radio-group v-model="tabsNav" @change="onChange($event,'tabsNav')">
                    <el-radio-button :label="item.value" v-for="(item,index) in tabsNavList" :key="index">{{item.label}}</el-radio-button>
                </el-radio-group>
            </div>
        </diy-style-contain>

        <div v-if="tabsNav == 2">
            <diy-main-page :main-page="mainPage" @change="mainPageChange" />
        </div>
        <div v-else-if="tabsNav == 3">
            <diy-share @change="shareChange" :default-data="defaultShareData"></diy-share>
        </div>
        <div v-else>
            <div>
                <diy-style-contain title="标题">
                    <div class="flex flex-y-center flex-x-sw gutter-bot-10">
                        <div class="second-level">内容形式</div>
                        <el-radio-group v-model="contentType" @change="onChangeData($event,'contentType')">
                            <el-radio-button :label="item.value" v-for="(item,index) in contentTypeList" :key="index">{{item.label}}</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div v-if="contentType == 1" class="flex flex-y-center flex-x-sw flex-x-sw gutter-bot-10">
                        <div class="second-level"> </div>
                        <el-input class="name-input" v-model="name" size="small" placeholder="请输入商城名称" @input="onChangeData($event,'name')" :maxlength="10" show-word-limit />
                    </div>
                    <div v-else class="flex flex-y-center flex-x-sw gutter-bot-10">
                        <div class="second-level"> </div>
                        <div style="height:88px;background: #ddd">
                            <diy-img-setting :img-infos="imageUrl" def-img-count="1" :show-url="false" :suggest-site="2" suggest-size-text="建议 112x30" :img-contain-style="{padding: 0}" :show-title="false" @change="addIconImg($event,'logoSrc')"></diy-img-setting>
                        </div>
                    </div>
                    <div class="flex flex-y-center flex-x-sw">
                        <div class="second-level">位置选择</div>
                        <el-radio-group v-model="positionChoose" @change="onChangeData($event,'positionChoose')">
                            <el-radio-button :label="item.value" v-for="(item,index) in positionChooseList" :key="index">{{item.label}}</el-radio-button>
                        </el-radio-group>
                    </div>
                </diy-style-contain>
                <diy-style-contain title="风格">
                    <div class="flex flex-y-center flex-x-sw">
                        <div class="second-level">风格选择</div>
                        <el-radio-group v-model="styleChoose" @change="onChangeData($event,'styleChoose')">
                            <el-radio-button :label="item.value" v-for="(item,index) in styleChooseList" :key="index">{{item.label}}</el-radio-button>
                        </el-radio-group>
                    </div>
                </diy-style-contain>
                <diy-style-contain title="样式设置">
                    <div class="flex flex-y-center flex-x-sw">
                        <div class="second-level">文字颜色</div>
                        <el-radio-group v-model="statusBar" @change="onChange($event,'statusBar')">
                            <el-radio-button :label="item.value" v-for="(item,index) in statusBarList" :key="index">{{item.label}}</el-radio-button>
                        </el-radio-group>
                    </div>
                    <diy-color :contain-obj="containObj" :color-infos="defaultForm.statusBarColor" @chang="updateColor($event,'statusBarColor')" style="padding: 0"></diy-color>
                </diy-style-contain>
            </div>
        </div>
    </div>
</template>
<script>
    Vue.component('nav-style', {
        name: "nav-style",
        template: '#nav-style',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            },
        },
        data() {
            return {
                styleChoose: 1,
                styleChooseList:[{
                    label: "标准",
                    value: "1"
                }, {
                    label: "沉浸式",
                    value: "2"
                }],

                contentType: 1,
                contentTypeList: [{
                    label: "文字",
                    value: "1"
                }, {
                    label: "图片",
                    value: "2"
                }],
                // defaultShareData: null,
                imageUrl: [],
                imageUrl1: [],

                containObj: {
                    showTitle: false
                },
                tabsNav: 1,
                tabsNavList: [{
                    label: "导航设置",
                    value: "1"
                }, {
                    label: "页面设置",
                    value: "2"
                }, {
                    label: "分享配置",
                    value: "3"
                }],

                statusBar: -1,
                statusBarList: [{
                    label: "黑色",
                    value: "1"
                }, {
                    label: "白色",
                    value: "2"
                }],

                isShowName: -1,
                nameList: [{
                    label: "是",
                    value: "1"
                }, {
                    label: "否",
                    value: "2"
                }],

                positionChoose: 0,
                positionChooseList: [{
                    label: "居左",
                    value: "0"
                }, {
                    label: "居中",
                    value: "1"
                }],

                border: -1,
                borderList: [{
                    label: "无",
                    value: "1"
                }, {
                    label: "细",
                    value: "2"
                }, {
                    label: "粗",
                    value: "3"
                }],

                icon: -1,
                iconList: [{
                    label: "icon1",
                    value: "1",
                    key: "text",
                    text: "隐藏"
                }, {
                    label: "icon2",
                    value: "2",
                    key: "src",
                    src: "resources/img/decorate/search1.png",
                    width: 12,
                    height: 12
                }, {
                    label: "icon3",
                    value: "3",
                    key: "src",
                    src: "resources/img/decorate/search3.png",
                    width: 18,
                    height: 15
                }],

                searchBorder: -1,
                searchBorderList: [{
                    label: "圆角",
                    value: "1"
                }, {
                    label: "直角",
                    value: "2"
                }],

                name: "",
                // placeholder: "",

                defaultForm: {
                    // 商城名称
                    titleBgColor: [{
                        name: '底部背景', //名字
                        color: "transparent", //颜色
                        showAlpha: false, //是否开启透明度
                    }, ],
                    titleDistance: [{
                        name: '文字大小', //名字
                        value: 16, //值
                        unit: "px", //单位
                        disabled: false, //是否禁用
                        maxValue: 20,
                    }, {
                        name: '高度', //名字
                        value: 0, //值
                        unit: "px", //单位
                        disabled: false, //是否禁用
                        maxValue: 44,
                    }, {
                        name: '宽度', //名字
                        value: 50, //值
                        unit: "px", //单位
                        disabled: false, //是否禁用
                        maxValue: 200,
                    }, {
                        name: '左侧距离', //名字
                        value: 20, //值
                        unit: "px", //单位
                        disabled: false, //是否禁用
                        maxValue: 100,
                    }],
                    // 背景
                    statusBarColor: [{
                        name: '背景颜色', //名字
                        color: "transparent", //颜色
                        showAlpha: true, //是否开启透明度
                    }, ],
                    // 搜索
                    searchColor: [{
                        name: '文字颜色', //名字
                        color: "transparent", //颜色
                        showAlpha: false, //是否开启透明度
                    }, {
                        name: '背景颜色', //名字
                        color: "transparent", //颜色
                        showAlpha: true, //是否开启透明度
                    }, ],
                    searchDistance: [{
                        name: '文字大小', //名字
                        value: 0, //值
                        unit: "px", //单位
                        disabled: false, //是否禁用
                        maxValue: 20,
                    }, {
                        name: '高度', //名字
                        value: 29, //值
                        unit: "px", //单位
                        disabled: false, //是否禁用
                        maxValue: 44,
                    }],
                    searchMarPad: [{
                        name: '左侧距离', //名字
                        value: 30, //值
                        unit: "px", //单位
                        disabled: false, //是否禁用
                        maxValue: 200,
                    }, {
                        name: '左内边距', //名字
                        value: 0, //值
                        unit: "px", //单位
                        disabled: false, //是否禁用
                        maxValue: 100,
                    }],
                    iconSize: [{
                        name: '图标大小', //名字
                        value: 0, //值
                        unit: "px", //单位
                        disabled: false, //是否禁用
                        maxValue: 40,
                    }],
                    // 默认
                    defColor: "transparent",
                },
            }
        },
        created() {
            if (PageShareData.pageIndex) {
                this.tabsNav = 2
            }
            this.$eventBus.$on("onPageClick", () => {
                this.tabsNav = 2
            })
            this.init()
        },
        destroyed() {
            PageShareData.pageIndex = false
            this.$eventBus.$off("onPageClick")
        },
        computed: {
            mainPage() {
                return this.activeItem.data.mainPage
            },
            defaultShareData() {
                return this.activeItem.data.share
            }
        },
        methods: {
            shareChange(e) {
                const result = {
                    title: e[0].value,
                    desc: e[1].value,
                    appletImg: e[2].value,
                    officialAccountImg: e[4].value
                }
                this.result.data.share = result;
                console.log(this.result.data)
                this.$emit("update", this.result);
            },
            mainPageChange(item) {
                this.result.data.mainPage = item;
                this.$emit("update", this.result);
            },
            // 图片
            addIconImg(arr, type) {
                this.imageUrl = arr
                this.updateUrl(arr, type)
            },
            addIconImg1(arr, type) {
                this.imageUrl1 = arr
                this.updateUrl(arr, type)
            },
            updateUrl(arr, type) {
                this.result.data[type] = arr[0].imgUrl;
                this.$emit("update", this.result);
            },
            setValue(key, value) {
                // 空值不做 赋值操作
                if (value) {
                    this[key] = value
                }
            },
            init() {
                // 初始化 - 傻瓜式复制
                this.result = deepClone(this.activeItem)
                this.setValue("statusBar", this.result.computedStyle.statusBar)
                this.setValue("border", this.result.computedStyle.border)
                this.setValue("isShowName", this.result.data.isShowName)
                this.setValue("name", this.result.data.name)
                this.setValue("positionChoose", this.result.data.positionChoose)
                // this.setValue("defaultShareData", this.result.data.share)
                console.log(this.result.data, 'this.result.data')
                this.setValue("styleChoose", this.result.data.styleChoose)
                let a = ['computedStyle', 'icon', 'value']
                this.icon = getObjValue(this.result, a, 1)

                let arr = ['computedStyle', 'titleBgColor']
                this.defaultForm.titleBgColor = [{
                    name: '底部背景', //名字
                    color: getObjValue(this.result, arr, "transparent"), //颜色
                    showAlpha: true, //是否开启透明度
                }, ]

                let arr1 = ['computedStyle', 'titleDistance', 'fontSize']
                let arr2 = ['computedStyle', 'titleDistance', 'height']
                let arr3 = ['computedStyle', 'titleDistance', 'width']
                let arr4 = ['computedStyle', 'titleDistance', 'marginLeft']
                this.defaultForm.titleDistance = [{
                    name: '文字大小', //名字
                    value: getObjValue(this.result, arr1, 16),
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 20,
                }, {
                    name: '高度', //名字
                    value: getObjValue(this.result, arr2, 0),
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 44,
                }, {
                    name: '宽度', //名字
                    value: getObjValue(this.result, arr3, 32),
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 200,
                }, {
                    name: '左侧距离', //名字
                    value: getObjValue(this.result, arr4, 20),
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 100,
                }]

                let arr6 = ['computedStyle', 'searchColor']
                let arr7 = ['computedStyle', 'searchBgColor']
                this.defaultForm.searchColor = [{
                    name: '文字颜色', //名字
                    color: getObjValue(this.result, arr6, "transparent"), //颜色
                    showAlpha: false, //是否开启透明度
                }, {
                    name: '背景颜色', //名字
                    color: getObjValue(this.result, arr7, "transparent"), //颜色
                    showAlpha: false, //是否开启透明度
                }, ]

                let arr8 = ['computedStyle', 'statusBarColor']
                this.defaultForm.statusBarColor = [{
                    name: '背景颜色', //名字
                    color: getObjValue(this.result, arr8, "transparent"),
                    showAlpha: false, //是否开启透明度
                }, ]

                let arr9 = ['computedStyle', 'searchDistance', 'fontSize']
                let arr10 = ['computedStyle', 'searchDistance', 'height']
                this.defaultForm.searchDistance = [{
                    name: '文字大小', //名字
                    value: getObjValue(this.result, arr9, 16), //值
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 20,
                }, {
                    name: '高度', //名字
                    value: getObjValue(this.result, arr10, 29), //值
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 44,
                }]

                let arr11 = ['computedStyle', 'searchMarPad', 'marginLeft']
                let arr12 = ['computedStyle', 'searchMarPad', 'paddingLeft']
                this.defaultForm.searchMarPad = [{
                    name: '左侧距离', //名字
                    value: getObjValue(this.result, arr11, 20), //值
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 200,
                }, {
                    name: '左内边距', //名字
                    value: getObjValue(this.result, arr12, 0), //值
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 100,
                }]

                let arr13 = ['computedStyle', 'iconSize', 'size']
                this.defaultForm.iconSize = [{
                    name: '图标大小', //名字
                    value: getObjValue(this.result, arr13, 0), //值
                    unit: "px", //单位
                    disabled: false, //是否禁用
                    maxValue: 40,
                }]

                // 图片
                this.imageUrl = []
                if (this.activeItem.data.logoSrc) {
                    this.imageUrl.push({
                        imgUrl: this.result.data.logoSrc
                    })
                }
                this.imageUrl1 = []
                if (this.activeItem.data.backSrc) {
                    this.imageUrl1.push({
                        imgUrl: this.result.data.backSrc
                    })
                }
            },
            /**
             * key对应属性名字
             */
            onChange(event, key) {
                if (key === 'icon') {
                    this.result.computedStyle[key] = this.iconList.find(item => (item.value === event))
                } else {
                    this.result.computedStyle[key] = event
                }
                this.$emit("update", this.result)
            },
            onChangeData(event, key) {
                this.result.data[key] = event
                this.$emit("update", this.result)
            },
            updateColor(e, type) { // 选择颜色
                const cb = {
                    titleBgColor: () => {
                        this.result.computedStyle.titleBgColor = e[0].color
                    },
                    statusBarColor: () => {
                        this.result.computedStyle.statusBarColor = e[0].color
                    },
                    searchColor: () => {
                        this.result.computedStyle.searchColor = e[0].color
                        this.result.computedStyle.searchBgColor = e[1].color
                    },
                }
                cb[type] && cb[type]()
                this.$emit("update", this.result)
            },
            sliderChange(arr, type) { // 边距
                const cb = {
                    titleDistance: () => {
                        var target = this.result.computedStyle.titleDistance || {}
                        var result = {
                            fontSize: arr[0].value,
                            height: arr[1].value,
                            width: arr[2].value,
                            marginLeft: arr[3].value,
                        }
                        this.result.computedStyle.titleDistance = Object.assign({}, target, result)
                    },
                    searchDistance: () => {
                        var target = this.result.computedStyle.searchDistance || {}
                        var result = {
                            fontSize: arr[0].value,
                            height: arr[1].value,
                        }
                        this.result.computedStyle.searchDistance = Object.assign({}, target, result)
                    },
                    searchMarPad: () => {
                        var target = this.result.computedStyle.searchMarPad || {}
                        var result = {
                            marginLeft: arr[0].value,
                            paddingLeft: arr[1].value,
                        }
                        this.result.computedStyle.searchMarPad = Object.assign({}, target, result)
                    },
                    iconSize: () => {
                        var target = this.result.computedStyle.iconSize || {}
                        var result = {
                            size: arr[0].value,
                        }
                        this.result.computedStyle.iconSize = Object.assign({}, target, result)
                    },
                }
                cb[type] && cb[type]()
                this.$emit("update", this.result)
            },
        }
    });
</script>
<style>
    .flex {
        display: flex;
    }

    .flex-y-center {
        align-items: center;
    }

    .flex-x-sw {
        justify-content: space-between;
    }

    .gutter-2 {
        padding: 20px;
    }

    .gutter-bot-10 {
        margin-bottom: 20px;
    }

    .gutter-top-10 {
        margin-top: 20px;
    }

    .name-input {
        width: 169px;
    }

    .desc {
        padding: 0 20px;
        font-size: 13px;
        color: #CACACA;
        background-color: #fff;
    }

    .nav-style .diy-name {
        text-align: left;
        flex: 1;
    }

    .clear-diy-style .diy-style-contain {
        padding: 0;
    }

    .second-level {
        font-size: 14px;
        font-weight: bold;
        color: #999999;
    }

    .searchPosition .el-radio-button__inner {
        padding: 8px 10px;
    }

    .search-position-icon {
        padding: 0;
        width: 24px;
    }

    .iconList .el-radio-button__inner {
        padding: 6px 14px;
    }

    .flex {
        display: flex;
    }

    .flex-y-c {
        align-items: center;
    }

    /* 修改element样式 */
    .diy-nav-tabs .el-radio-group {
        width: 100%;
    }

    .diy-nav-tabs .el-radio-button {
        width: 33.33%;
    }

    .diy-nav-tabs .el-radio-button__inner {
        width: 100%;
    }

    .nav-style .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background-color: transparent;
        color: var(--diy-theme);
        border-color: var(--diy-theme);
    }
</style>