qimall/backend/modules/mall/views/decorate/setting.php

<?php

/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: lun
 * Date: 2021-09-15
 * Time: 12:36
 */

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-image');
?>

<style lang="scss">
    .nav-box {
        width: 220px;
        height: 45px;
        line-height: 45px;
        border: 1px solid #000000;
        text-align: center;
    }

    .bottom-icon {
        width: 80px;
        height: 80px;
        margin-right: 10px;
        border: 1px solid #eeeeee;
        cursor: move;
    }

    .nav-action {
        cursor: pointer;
    }

    .nav-icon {
        width: 30px;
        height: 30px;
    }

    .nav-add {
        border: 1px dashed #eeeeee;
        cursor: pointer;
    }

    .nav-add-icon {
        font-size: 50px;
        color: #eeeeee;
    }

    .form-body {
        padding: 20px 0;
        background-color: #fff;
        margin-bottom: 20px;
    }
    .theme-box {
        gap: 0 10px;
    }
    .theme-color {
        padding: 4px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        font-size: 0;
        position: relative;
        cursor: pointer;
      
        .theme-color-inner {
            background-color: #F54B4A; 
            width: 57px;
            height: 22px;
            color: #FFF;
        }  
    }
    .theme-color.active {
        border-color: #F10009;
    }
   
    .button-item {
        padding: 9px 25px;
    }

    .mobile {
        width: 404px;
        height: 736px;
        border-radius: 30px;
        background-color: #fff;
        padding: 33px 12px;
        margin-right: 10px;
    }

    .screen {
        border: 2px solid #F3F5F6;
        height: 670px;
        width: 380px;
        margin: 0 auto;
        position: relative;
        background-color: #F7F7F7;
    }

    .screen .head {
        position: absolute;
        top: 0;
        left: 0;
        width: 376px;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        font-weight: bolder;
        text-align: center;
    }

    .screen .foot {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 376px;
        /*padding: 5px 25px;*/
        height: 45px;
        /*display: flex;*/
        /*text-align: center;*/
        /*justify-content: space-between;*/
        /*font-size: 11px;*/
    }

    .screen .foot .nav-icon {
        height: 20px;
        width: 20px;
    }

    .screen .foot .nav-icon+div {
        margin-top: -10px;
    }

    .title {
        padding: 18px 20px;
        border-bottom: 1px solid #F3F3F3;
        background-color: #fff;
    }

    .mall-bg {
        position: absolute;
        top: 50px;
        width: 100%;
        height: 180px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .el-color-picker__trigger {
        border-radius: 50%;
        padding: 3px;
    }

    .el-color-picker__color {
        border-radius: 50%;
    }

    .el-color-picker__color-inner {
        border-radius: 50%;
    }

    .el-color-picker__icon {
        display: none;
    }

    .preview_box {
        padding: 0 25px 30px;
        flex-wrap: wrap;
    }

    .preview_common {
        width: 282px;
        height: 590px;
        margin-right: 50px;
        position: relative;
    }

    .goodsDetail_box {
        background: url('resources/img/mall/globalSet/goodsDetail.png');
    }

    .goodsDetail_price {
        font-weight: 600;
        font-size: 15px;
        position: absolute;
        top: 328px;
        left: 10px;
        align-items: center;
    }

    .goodsDetail_coupon {
        font-size: 12px;
        position: absolute;
        top: 416px;
        left: 37px;
    }

    .btn_capsule {
        position: absolute;
        bottom: 13px;
        right: 3px;
        font-size: 12px;
        text-align: center;
        line-height: 28px;
    }

    .btn_capsule_left {
        width: 80px;
        height: 28px;
        border-radius: 30px 0 0 30px;
    }

    .btn_capsule_right {
        width: 80px;
        height: 28px;
        color: #fff;
        border-radius: 0px 30px 30px 0px;
    }

    .sku_box {
        background: url('resources/img/mall/globalSet/sku.png');
    }

    .sku_price {
        position: absolute;
        top: 255px;
        left: 93px;
    }

    .sku_item {
        width: 75px;
        height: 26px;
        border-radius: 4px;
        position: absolute;
        text-align: center;
        line-height: 24px;
        top: 355px;
        left: 12px;
        font-size: 12px;
    }

    .sure_btn {
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 250px;
        height: 25px;
        color: #fff;
        border-radius: 40px;
        text-align: center;
        line-height: 25px;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .tab_box {
        background: url('resources/img/mall/globalSet/tab.png');
    }

    .tab_item {
        position: absolute;
        left: 69px;
        top: 79px;
        font-size: 11px;
        transform: scale(0.8);
    }

    .tab_line {
        position: absolute;
        width: 25px;
        height: 1px;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
    }

    .coupon_box {
        background: url('resources/img/mall/globalSet/coupon.png');
    }

    .coupon_item {
        position: absolute;
        top: 402px;
        left: 50%;
        transform: translateX(-50%);
        width: 270px;
        height: 80px;
        border-radius: 5px;
        background-size: cover !important;
    }

    .coupon_item2 {
        top: 490px;
    }

    .coupon_left {
        width: 108px;
        flex-direction: column;
        color: #fff;
    }

    .coupon_right {
        flex: 1;
        font-size: 12px;
        flex-direction: column;
        padding-left: 5px;
    }

    .receive_coupon {
        border: 1px solid #bc0100;
        border-radius: 30px;
        padding: 1px 12px;
        color: #bc0100;
        margin-right: 3px;
    }


    /* 公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    /* 溢出隐藏 */
    .over1 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .over2 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;" v-loading="cardLoading">
        <div slot="header">
            <div>
                <span>全局颜色设置</span>
            </div>
        </div>
        <div style="display: flex;">
            <div style="width: 100%;">
                <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="120px">
                    <div class="title">全局设置</div>
                    <el-row class='form-body'>
                        <el-col>
                            <div class="flex">
                                <el-form-item label="全局文字颜色" prop="color">
                                    <el-color-picker color-format="hex" size="mini" v-model="ruleForm.global_text_color" :predefine="predefineColors"></el-color-picker>
                                    <!-- <div class="flex theme-box">
                                        <div class="theme-color" :class="ruleForm.global_text_color == item && 'active'"  v-for="item in themeStyleList" @click="changeTheme(item)">
                                            <div class="theme-color-inner" :style="`background-color:${item}`" >{{item}}</div>
                                        </div>
                                    </div> -->
                                </el-form-item>
                                <div style="margin: 6px 0 0 30px;color:#C5C8CE;font-size:13px">建议：自定义风格不要设置成白色！</div>
                            </div>
                            <div class="flex">
                                <el-form-item label="按需DIY">
                                    <el-col :span="12">
                                        <el-switch v-model="ruleForm.global_goods_need" :active-value="1" :inactive-value="0"></el-switch>
                                    </el-col>
                                </el-form-item>
<!--                                <div style="margin: 6px 0 0 20px;color:#C5C8CE;font-size:13px">开启之后,商品信息将默认不展示领券、库存、服务、规格等选择框</div>-->
                            </div>
                            <div class="preview_box flex">
                                <div class="goodsDetail_box preview_common">
                                    <div class="goodsDetail_price flex flex-x-bottom" :style="{color:ruleForm.global_text_color}">
                                        &yen;2899<span style="font-size: 12px;display:inline-block;transform:scale(0.9);margin-top:3px">起</span>
                                    </div>
                                    <div class='goodsDetail_coupon'>
                                        <div class="flex flex-y-center" :style="{color:ruleForm.global_text_color}">
                                            <i style="font-size: 16px;" class="iconfont icon-youhuiquan"></i>
                                            <div style="transform: scale(0.85);">满10减1</div>
                                        </div>
                                    </div>
                                    <div class='btn_capsule flex'>
                                        <div class='btn_capsule_left' :style="{color:ruleForm.global_text_color,border:'1px solid'+ruleForm.global_text_color}">加入购物车</div>
                                        <div class="btn_capsule_right" :style="{background:ruleForm.global_text_color}">立即购买</div>
                                    </div>
                                </div>
                                <!-- 多规格 -->
                                <div class="sku_box preview_common">
                                    <div class='sku_price' :style="{color:ruleForm.global_text_color}">&yen;2988.00</div>
                                    <div class='sku_item' :style="{color:ruleForm.global_text_color,border:'1px solid'+ruleForm.global_text_color}">黑色</div>
                                    <div class='sure_btn' :style="{background:ruleForm.global_text_color}">确定</div>
                                </div>
                                <!-- 订单 -->
                                <div class="tab_box preview_common">
                                    <div class='tab_item' :style="{color:ruleForm.global_text_color}">
                                        待付款
                                        <div class="tab_line" :style="{background:ruleForm.global_text_color}"></div>
                                    </div>
                                </div>
                            </div>
                            <!--                            <el-form-item label="优惠券图片" prop="coupon_pic_url">-->
                            <!--                                <com-attachment :multiple="false" :max="1" @selected="couponPicUrl">-->
                            <!--                                    <el-tooltip class="item" effect="dark" content="建议尺寸:691*196" placement="top">-->
                            <!--                                        <el-button size="mini">选择文件</el-button>-->
                            <!--                                    </el-tooltip>-->
                            <!--                                </com-attachment>-->
                            <!--                                <com-image width="80px" height="80px" mode="aspectFill" :src="ruleForm.coupon_pic_url"></com-image>-->
                            <!--                            </el-form-item>-->

                            <!--                            <div class="preview_box flex">-->
                            <!--                                <div class="coupon_box preview_common">-->
                            <!--                                    <div class="coupon_item flex" :style="{background:'url('+(ruleForm.coupon_pic_url || 'resources/img/mall/globalSet/couponBg.png')+')'}">-->
                            <!--                                        <div class='coupon_left flex flex-y-center flex-x-center'>-->
                            <!--                                            <div style="margin-bottom: 4px;">-->
                            <!--                                                &yen;<span style="font-size: 19px;font-weight:600">1.00</span>-->
                            <!--                                            </div>-->
                            <!--                                            <div style="font-size: 12px;">满100.00元可用</div>-->
                            <!--                                        </div>-->
                            <!--                                        <div class="coupon_right flex flex-x-center">-->
                            <!--                                            <div style="margin-bottom: 10px;font-size:14px">满10减1</div>-->
                            <!--                                            <div class='flex flex-x-between flex-y-center'>-->
                            <!--                                                <div>领取1天后过期</div>-->
                            <!--                                                <div class='receive_coupon'>领取</div>-->
                            <!--                                            </div>-->
                            <!--                                        </div>-->
                            <!--                                    </div>-->
                            <!--                                    <div class="coupon_item coupon_item2 flex" :style="{background:'url('+(ruleForm.coupon_pic_url || 'resources/img/mall/globalSet/couponBg.png')+')'}">-->
                            <!--                                        <div class='coupon_left flex flex-y-center flex-x-center'>-->
                            <!--                                            <div style="margin-bottom: 4px;">-->
                            <!--                                                &yen;<span style="font-size: 19px;font-weight:600">1.00</span>-->
                            <!--                                            </div>-->
                            <!--                                            <div style="font-size: 12px;">满100.00元可用</div>-->
                            <!--                                        </div>-->
                            <!--                                        <div class="coupon_right flex flex-x-center">-->
                            <!--                                            <div style="margin-bottom: 10px;font-size:14px">满10减1</div>-->
                            <!--                                            <div class='flex flex-x-between flex-y-center'>-->
                            <!--                                                <div></div>-->
                            <!--                                                <div class='receive_coupon'>领取</div>-->
                            <!--                                            </div>-->
                            <!--                                        </div>-->
                            <!--                                    </div>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                        </el-col>
                    </el-row>
                    <!--                    <el-form-item label="首页显示状态栏">-->
                    <!--                        <el-switch v-model="ruleForm.is_show_statusbar" active-value="1" inactive-value="0" active-text="是" inactive-text="否">-->
                    <!--                        </el-switch>-->
                    <!--                    </el-form-item>-->
                    <el-button class="button-item" :loading="btnLoading" type="primary" @click="store('ruleForm')" size="small">保存
                    </el-button>
                    <el-button class="button-item" :loading="btnLoading" size="small" plain @click="restoreDefault">
                        恢复默认
                    </el-button>
                    <div style="height: 30px;"></div>
                </el-form>
            </div>
        </div>
    </el-card>
</div>
<!-- <script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.3/Sortable.min.js"></script> -->
<script src="/resources/js/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                ruleForm: {
                    coupon_pic_url: '',
                    global_text_color: '#F54B4A',//#bc0100
                    global_goods_need:0
                    // is_show_statusbar: 0
                },
                predefineColors: ['#F54B4A','#4985E9','#AA4DF1','#1EB83D','#FF508C'],
                btnLoading: false,
                cardLoading: false,

                activeName: 'first',
                isNavAction: false, //编辑删除框是否显示
                navIconIndex: -1, //控制导航编辑隐藏显示
                navEditIndex: -1, //当前编辑的导航索引
                dialogFormVisible: false,
                dialogRuleForm: {
                    active_color: '#ff4544',
                    active_icon: '',
                    color: '#888',
                    text: '',
                    icon: '',
                    url: '',
                    params: [],
                },
                default_setting: {
                    global_text_color: '#F54B4A',
                    // is_show_statusbar: 0,
                    coupon_pic_url: '',
                    global_goods_need:0
                },
                themeStyleList: ['#F54B4A','#4985E9','#AA4DF1','#1EB83D','#FF508C']
            };
        },
        methods: {
            changeTheme(theme){
                this.ruleForm.global_text_color = theme
            },
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    let self = this;
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'mall/decorate/setting'
                            },
                            method: 'post',
                            data: {
                                form: self.ruleForm,
                            }
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getDetail() {
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'mall/decorate/setting',
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        if (!isEmpty(e.data.data)) self.ruleForm = e.data.data;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            // 鼠标移入事件
            navIconEnter(index) {
                this.navIconIndex = index;
            },
            // 鼠标离开事件
            navIconAway() {
                this.navIconIndex = -1;
            },
            // 导航图标编辑
            navIconEdit(index) {
                this.dialogFormVisible = true;
                if (index != -1) {
                    this.navEditIndex = index;
                    this.dialogRuleForm = this.ruleForm.navs[index]
                }
            },
            // 弹框关闭事件回调
            dialogColse() {
                this.navEditIndex = -1;
                this.clearDialogData();
            },
            clearDialogData() {
                this.dialogRuleForm = {
                    active_color: '#ff4544',
                    active_icon: '',
                    color: '#888',
                    text: '',
                    icon: '',
                    url: '',
                    params: [],
                };
            },
            // 导航图标删除
            navIconDestroy(index) {
                this.ruleForm.navs.splice(index, 1)
            },
            dialogFormSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    let self = this;
                    if (valid) {
                        self.dialogFormVisible = false;
                        if (self.navEditIndex != -1) {
                            self.ruleForm.navs[self.navEditIndex] = self.dialogRuleForm;
                        } else {
                            self.ruleForm.navs.push(self.dialogRuleForm)
                        }
                        self.navEditIndex = -1;
                        this.clearDialogData();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 添加图标
            iconUrl(e) {
                if (e.length) {
                    this.dialogRuleForm.icon = e[0].url
                    this.$refs.dialogRuleForm.validateField('icon');
                }
            },
            couponPicUrl(e) {
                if (e.length) {
                    // this.ruleForm.coupon_pic_url = e[0].url;
                    this.$set(this.ruleForm, 'coupon_pic_url', e[0].url);
                    console.log(e[0].url, 'e[0].url')
                    this.$refs.ruleForm.validateField('coupon_pic_url');
                }
            },
            // 添加选择状态图标
            activeIconUrl(e) {
                if (e.length) {
                    this.dialogRuleForm.active_icon = e[0].url
                    this.$refs.dialogRuleForm.validateField('active_icon');
                }
            },
            // 导航链接选择
            selectNavUrl(e) {
                let self = this;
                e.forEach(function(item, index) {
                    self.dialogRuleForm.url = item.new_link_url;
                    self.dialogRuleForm.open_type = !item.open_type || item.open_type === 'navigate' ? 'redirect' : item.open_type;
                    self.dialogRuleForm.params = item.params;
                })
            },
            // 恢复默认
            restoreDefault() {
                let self = this;
                self.$confirm('恢复默认, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.btnLoading = true;
                    request({
                        params: {
                            r: 'mall/decorate/setting',
                        },
                        method: 'post',
                        data: {
                            form: self.default_setting
                        }
                    }).then(e => {
                        self.btnLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            self.getDetail();
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消')
                });
            },
            navClick(index) {
                this.navCurrent = index
            }
        },
        mounted: function() {
            this.getDetail();
        }
    });
</script>