qimall/backend/modules/mall/views/cate/component/cat-style.php

<?php
$mchId = Yii::$app->user->identity->mch_id;
?>

<style>
    .cat-style .table-body {
        padding: 0;
        background-color: #fff;
    }

    .cat-style .el-card__body {
        padding: 0;
    }

    .cat-style .cat-style .text {
        cursor: pointer;
        background: #409eff;
        width: 90px;
        color: #fff;
    }

    .new-table-body {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 0;
    }

    .cat-style .cat-style-model {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
    }

    .cat-style .cat-style-nmodel {
        background-color: transparent;
    }

    .cat-style .button-item {
        padding: 9px 25px;
        margin-top: 20px;
    }

    .cat-style .image-box {
        width: 340px;
        border: 1px solid #f2f4f5;
        cursor: pointer;
        border-radius: 25px;
        margin-right: 5px;
        padding: 30px 0;
        position: relative;
    }

    .cat-style .image-box .active {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }

    .cat-style .image-box .text {
        cursor: pointer;
        background: #409eff;
        text-align: center;
        position: absolute;
        top: 245px;
        left: auto;
        line-height: 30px;
        width: 90px;
        color: #fff;
    }

    .cat-style .tab-box {
        margin-bottom: 20px;
    }

    .cat-style .tab-box .btn {
        cursor: pointer;
        padding: 7px 15px;
        margin-right: 10px;
        border: 1px solid #E3E3E3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .cat-style .tab-box .active {
        background: #409eff;
        color: #FFFFFF;
    }

    .cats-third-style {
        margin-left: 10px;
        width: 300px;
    }

    .cats-third-style .el-color-picker__trigger {
        height: 28px;
        width: 60px;
    }

    .cats-third-style .el-input__inner {
        height: 28px;
        line-height: 28px;
        width: 96px;
        border: none;
        background-color: #EBEEF5;
    }

    .cats-third-style .el-slider {
        width: 60px;
    }

    .m-left-12 {
        margin-left: 12px;
    }

    .label-style {
        display: inline-block;
        height: 28px;
        line-height: 28px;
        width: 90px;
    }
</style>

<template id="cat-style">
    <div class="cat-style">
        <el-card v-loading="listLoading" shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 0 0;">
            <el-form :model="form" :rules="rules" ref="form" label-width="200px" size="small">
                <el-card shadow="never" style="border:0;">
                    <el-row class="table-body">
                        <!--
                        <div class="tab-box" flex="dir:left">
                            <div :class="{'active': activeName == 'one' ? true : false}" class="btn" @click="handleClick('one')">一级分类样式
                            </div>
                            <div :class="{'active': activeName == 'two' ? true : false}" class="btn" @click="handleClick('two')">二级分类样式
                            </div>
                            <div :class="{'active': activeName == 'three' ? true : false}" class="btn" @click="handleClick('three')">三级分类样式
                            </div>
                        </div>
                        -->
                        <div v-if="activeName == 'one'">
                            <div flex="dir:left">
                                <div v-for="item in catList[0]" @mouseenter="enter(item.value)" @mouseleave="leave(item.value)">
                                    <div class="image-box" flex="main:center" :style="{'border': item.value == form.cat_style ? '1px solid #409eff' : '1px solid #F2F4F5'}">
                                        <div>
                                            <div :class="item.value == selectModel ? 'cat-style-model': 'cat-style-nmodel'"></div>
                                            <img :src="item.pic_url">
                                        </div>
                                        <com-image class="active" v-if="item.value == form.cat_style" width="80px" height="80px" :src="cat_select">
                                        </com-image>
                                        <div v-if="item.value == selectModel" @click="setStyle(item.value)" class="text">
                                            启用该样式
                                        </div>
                                    </div>
                                </div>
                                <div class="cats-third-style" v-if="this.form.cat_style == 3">
                                    <div flex>
                                        <span class="label-style">一级背景颜色</span>
                                        <div class="m-left-12"><el-color-picker v-model="form.cats_third_style.aLevelBgColor"></el-color-picker></div>
                                        <div class="m-left-12"><el-input v-model="form.cats_third_style.aLevelBgColor" /></div>
                                    </div>
                                    <div flex>
                                        <span class="label-style">二级背景颜色</span>
                                        <div class="m-left-12"><el-color-picker v-model="form.cats_third_style.bLevelBgColor"></el-color-picker></div>
                                        <div class="m-left-12"><el-input v-model="form.cats_third_style.bLevelBgColor" /></div>
                                    </div>
                                    <div flex>
                                        <span class="label-style">三级背景颜色</span>
                                        <div class="m-left-12"><el-color-picker v-model="form.cats_third_style.cLevelBgColor"></el-color-picker></div>
                                        <div class="m-left-12"><el-input v-model="form.cats_third_style.cLevelBgColor" /></div>
                                    </div>
                                    <div flex>
                                        <span class="label-style">一级字体颜色</span>
                                        <div class="m-left-12"><el-color-picker v-model="form.cats_third_style.fontColor"></el-color-picker></div>
                                        <div class="m-left-12"><el-input v-model="form.cats_third_style.fontColor" /></div>
                                    </div>
                                    <div flex>
                                        <span class="label-style">二级字体颜色</span>
                                        <div class="m-left-12"><el-color-picker v-model="form.cats_third_style.bFontColor"></el-color-picker></div>
                                        <div class="m-left-12"><el-input v-model="form.cats_third_style.bFontColor" /></div>
                                    </div>
                                    <div flex>
                                        <span class="label-style">三级字体颜色</span>
                                        <div class="m-left-12"><el-color-picker v-model="form.cats_third_style.cFontColor"></el-color-picker></div>
                                        <div class="m-left-12"><el-input v-model="form.cats_third_style.cFontColor" /></div>
                                    </div>
                                    <div flex>
                                        <span class="label-style">字体大小</span>
                                        <div class="m-left-12">
                                            <el-slider :min="14" :max="18" v-model="form.cats_third_style.fontSize"></el-slider>
                                        </div>
                                        <div class="m-left-12"><el-input v-model="form.cats_third_style.fontSize"></div>
                                    </div>
                                    <div flex>
                                        <span class="label-style">字体粗细</span>
                                        <div class="m-left-12" style="display: flex;align-items:center;padding-top:4px;">
                                            <el-radio-group v-model="form.cats_third_style.fontWeight">
                                                <el-radio label="lighter">细</el-radio>
                                                <el-radio label="normal">中</el-radio>
                                                <el-radio label="bold">粗</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--
                        <div v-if="activeName == 'two'">
                            <div flex="dir:left">
                                <div v-for="item in catList[1]" flex="main:center" @mouseenter="enter(item.value)" @mouseleave="leave(item.value)">
                                    <div class="image-box" flex="main:center" :style="{'border': item.value == form.cat_style ? '1px solid #409eff' : '1px solid #F2F4F5'}">
                                        <div>
                                            <div :class="item.value == selectModel ? 'cat-style-model': 'cat-style-nmodel'"></div>
                                            <img :src="item.pic_url">
                                        </div>
                                        <com-image class="active" v-if="item.value == form.cat_style" width="80px" height="80px" :src="cat_select">
                                        </com-image>
                                        <div v-if="item.value == selectModel" @click="setStyle(item.value)" class="text">
                                            启用该样式
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="activeName == 'three'">
                            <div flex="dir:left">
                                <div v-for="item in catList[2]" flex="main:center" @mouseenter="enter(item.value)" @mouseleave="leave(item.value)">
                                    <div class="image-box" flex="main:center" :style="{'border': item.value == form.cat_style ? '1px solid #409eff' : '1px solid #F2F4F5'}">
                                        <div>
                                            <div :class="item.value == selectModel ? 'cat-style-model': 'cat-style-nmodel'"></div>
                                            <img :src="item.pic_url">
                                        </div>
                                        <com-image class="active" v-if="item.value == form.cat_style" width="80px" height="80px" :src="cat_select">
                                        </com-image>
                                        <div v-if="item.value == selectModel" @click="setStyle(item.value)" class="text">
                                            启用该样式
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        -->
                    </el-row>
                </el-card>
                <el-card shadow="never" style="border:0;">
                    <!--
                    <template>
                        <div slot="header">
                            <span>显示设置</span>
                        </div>
                        <el-row class="new-table-body">
                            <el-form-item label="" prop="cat_goods_count">
                                <template slot='label'>
                                    <span>每个分类商品显示总数</span>
                                    <el-tooltip effect="dark" content="每个分类板块显示的商品最大数(0~100)" placement="top">
                                        <i class="el-icon-info"></i>
                                    </el-tooltip>
                                </template>
                                <el-input v-model="form.cat_goods_count" style="width:30%" type="number">
                                    <template slot="append">个</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="cat_goods_cols">
                                <template slot='label'>
                                    <span>商品每行显示数量</span>
                                    <el-tooltip effect="dark" content="默认首页显示" placement="top">
                                        <i class="el-icon-info"></i>
                                    </el-tooltip>
                                </template>
                                <el-select v-model="form.cat_goods_cols" placeholder="请选择">
                                    <el-option v-for="item in catGoodsCols" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                    </template>
                    -->
                    <el-button class="button-item" :loading="btnLoading" size="small" type="primary" @click="onSubmit">
                        保存
                    </el-button>
                </el-card>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    Vue.component('cat-style', {
        template: '#cat-style',
        data() {
            return {
                catList: [
                    [{
                            value: 1,
                            pic_url: '/resources/img/mall/cat/style-1.png'
                        },
                        // {
                        //     value: 2,
                        //     pic_url: '/resources/img/mall/cat/style-2.png'
                        // },
                        {
                            value: 3,
                            pic_url: '/resources/img/mall/cat/style-3.png'
                        },
                        {
                            value: 4,
                            pic_url: '/resources/img/mall/cat/style-4.png'
                        }
                    ],
                    [{
                        value: 2,
                        pic_url: '/resources/img/mall/cat/two-c.png'
                    }],
                    [{
                        value: 3,
                        pic_url: '/resources/img/mall/cat/three-b.png'
                    }],
                ],
                mchCatList: [
                    [{
                            value: 3,
                            pic_url: '/resources/img/mall/cat/mch-one-a.png'
                        },
                        {
                            value: 1,
                            pic_url: '/resources/img/mall/cat/mch-one-b.png',
                        },
                    ],
                    [{
                            value: 2,
                            pic_url: '/resources/img/mall/cat/mch-two-a.png',
                        },
                        {
                            value: 4,
                            pic_url: '/resources/img/mall/cat/mch-two-c.png',
                        }
                    ],
                    [{
                            value: 6,
                            pic_url: '/resources/img/mall/cat/mch-three-a.png',
                        },
                        {
                            value: 7,
                            pic_url: '/resources/img/mall/cat/mch-three-b.png',
                        },
                    ],
                ],
                cat_select: '/resources/img/mall/cat/select.png',
                selectModel: 0,
                catGoodsCols: [{
                        label: '1',
                        value: 1
                    },
                    {
                        label: '2',
                        value: 2
                    },
                    {
                        label: '3',
                        value: 3
                    },
                ],

                form: {
                    cat_style: 1,
                    cats_third_style: {
                        aLevelBgColor: '#fff',
                        bLevelBgColor: '#fff',
                        cLevelBgColor: '#fff',
                        fontColor: '#000',
                        bFontColor: '#000',
                        cFontColor: '#000',
                        fontSize: 14,
                        fontWeight: 'normal'
                    },
                },
                btnLoading: false,
                listLoading: false,
                activeName: 'one',
                selectSet: 0,

                rules: {
                    cat_goods_count: [{
                        required: true,
                        message: '每个分类商品显示总数不能为空',
                        trigger: 'change'
                    }, ],
                    cat_goods_cols: [{
                        required: true,
                        message: '商品每行显示数量不能为空',
                        trigger: 'change'
                    }, ]
                },
                is_mch: <?= $mchId > 0 ? 1 : 0 ?>,
            }
        },
        methods: {
            //样式切换
            setStyle(value) {
                this.form.cat_style = value;
                this.selectModel = 0;
            },
            enter(value) {
                if (this.form.cat_style == value) {
                    return;
                }
                this.selectModel = value;
            },
            leave(value) {
                if (this.form.cat_style == value) {
                    return;
                }
                if (this.selectModel == value) {}
            },

            handleClick(name) {
                this.activeName = name;
            },

            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        let para = Object.assign({}, this.form);
                        request({
                            params: {
                                r: 'mall/cate/style'
                            },
                            data: para,
                            method: 'post'
                        }).then(e => {
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                                // navigateTo({r: 'mall/cat/index'});
                            } else {
                                this.$message.error(e.data.msg);
                            }
                            this.btnLoading = false;
                        }).catch(e => {
                            this.btnLoading = false;
                        });
                    }
                });
            },
            //获取列表
            getList() {
                this.listLoading = true;
                request({
                    params: {
                        r: 'mall/cate/style'
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        if (e.data.data) {
                            let cats_third_style = this.form.cats_third_style
                            // this.form = e.data.data.setting;
                            Object.assign(this.form, e.data.data.setting)

                            for (let i in cats_third_style) {
                                if (!this.form.cats_third_style[i]) {
                                    this.form.cats_third_style[i] = cats_third_style[i]
                                }
                            }
                        }
                        // let catStyle = this.form.cat_style;
                        // if (catStyle == 2 || catStyle == 4 || catStyle == 5) {
                        //     this.activeName = 'two'
                        // } else if (catStyle == 6 || catStyle == 7) {
                        //     this.activeName = 'three'
                        // }
                    }
                    this.listLoading = false;
                }).catch(e => {
                    this.listLoading = false;
                });
            },
        },
        mounted() {
            this.getList();
            if (this.is_mch) {
                this.catList = this.mchCatList;
            }
        }
    })
</script>