qimall/backend/modules/mall/views/decorate/bottom-nav.php

<?php
/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * 设置
 * Author: zal
 * Date: 2020-04-13
 * Time: 10:16
 */
?>

<style>
    .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;
    }

    .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;
    }
</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 class="mobile">
                <div class="screen">
                    <!-- <div class="head"
                         :style="{backgroundColor: ruleForm.top_background_color, color: ruleForm.top_text_color}">这里是标题
                    </div> -->
                    <div class="foot"
                         :style="{backgroundColor: ruleForm.bottom_background_color, color: ruleForm.bottom_text_color}">
                        <div flex="dir:left box:mean">
                            <div flex="dir:top cross:center" v-for="(item, index) in ruleForm.navs" @click="navClick(index)">
                                <div>
                                    <img v-if="item.iconPath" :src="navCurrent == index ? item.selectedIconPath : item.iconPath" class="nav-icon">
                                    <el-image v-else>
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline" style="font-size: 14px;"></i>
                                        </div>
                                    </el-image>
                                </div>
                                <div :style="{color:navCurrent == index ? ruleForm.active_color : ruleForm.inactive_color}">
                                    {{item.text}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 100%;">
                <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="120px">
                    <div class="title">底部标签栏</div>
                    <div class='form-body'>
                        <el-form-item label="背景颜色" prop="bottom_background_color">
                            <el-color-picker
                                    show-alpha
                                    color-format="rgb"
                                    v-model="ruleForm.bottom_background_color"
                                    :predefine="predefineColors">
                            </el-color-picker>
                        </el-form-item>

<!--                        <el-form-item label="导航阴影效果">-->
<!--                            <el-switch v-model="ruleForm.shadow" :active-value="1" :inactive-value="0"></el-switch>-->
<!--                        </el-form-item>-->

                        <el-form-item label="文字颜色" prop="inactive_color">
                            <el-color-picker
                                    color-format="rgb"
                                    v-model="ruleForm.inactive_color"
                                    :predefine="predefineColors">
                            </el-color-picker>
                        </el-form-item>

                        <el-form-item label="选中文字颜色" prop="active_color">
                            <el-color-picker
                                    color-format="rgb"
                                    v-model="ruleForm.active_color"
                                    :predefine="predefineColors">
                            </el-color-picker>
                        </el-form-item>

                        <el-form-item label="底部导航图标">
                            <div flex="main:left">
                                <!-- 首页不能被拖拽特殊处理 -->
                                <div @mouseenter="navIconEnter(index)"
                                     @mouseleave="navIconAway"
                                     style="position: relative"
                                     flex="dir:top box:mean"
                                     v-for="(item, index) in ruleForm.navs"
                                     class="bottom-icon" v-if="index == 0">
                                    <div flex="main:center cross:center">
                                        <img v-if="item.iconPath" :src="item.iconPath" class="nav-icon">
                                        <el-image v-else>
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline" style="font-size: 18px;"></i>
                                            </div>
                                        </el-image>
                                    </div>
                                    <div flex="main:center cross:center">{{item.text}}</div>
                                    <div v-show="navIconIndex == index"
                                         style="position: absolute;bottom: 0;width: 100%;height: 25px;"
                                         class="nav-action"
                                         flex="box:mean">
                                        <span @click="navIconEdit(index)" style="background: rgba(64, 158, 255, 0.9);"
                                              flex="main:center cross:center">
                                            编辑
                                        </span>
                                        <span @click="navIconDestroy(index)"
                                              style="background: rgba(245, 108, 108, 0.9);"
                                              flex="main:center cross:center">
                                            删除
                                        </span>
                                    </div>
                                </div>

                                <!-- 非首页处理 -->
                                <draggable flex="main:left" :options="{filter:'.bottom-icon-false',preventOnFilter:false}" style="display:flex;flex-wrap: wrap" v-model="ruleForm.navs" id="box">
                                    <div @mouseenter="navIconEnter(index)"
                                         @mouseleave="navIconAway"
                                         style="position: relative"
                                         flex="dir:top box:mean"
                                         v-for="(item, index) in ruleForm.navs"
                                         class="bottom-icon" v-if="index > 0">
                                        <div flex="main:center cross:center">
                                            <img :src="item.iconPath" class="nav-icon">
                                        </div>
                                        <div flex="main:center cross:center">{{item.text}}</div>
                                        <div v-show="navIconIndex == index"
                                             style="position: absolute;bottom: 0;width: 100%;height: 25px;"
                                             class="nav-action"
                                             flex="box:mean">
                                        <span @click="navIconEdit(index)" style="background: rgba(64, 158, 255, 0.9);"
                                              flex="main:center cross:center">
                                            编辑
                                        </span>
                                            <span @click="navIconDestroy(index)"
                                                  style="background: rgba(245, 108, 108, 0.9);"
                                                  flex="main:center cross:center">
                                            删除
                                        </span>
                                        </div>
                                    </div>
                                </draggable>
                                <div v-if="ruleForm.navs.length < navMaxCount"
                                     @click="navIconEdit('-1')"
                                     flex="main:center cross:center"
                                     class="bottom-icon nav-add">
                                    <i class="el-icon-plus nav-add-icon"></i>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                    <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>
                </el-form>
            </div>
        </div>
        <el-dialog @close="dialogColse" title="导航菜单编辑" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="dialogRuleForm" :rules="dialogRules" size="small" ref="dialogRuleForm" label-width="120px">
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="图标" prop="iconPath">
                            <com-attachment :multiple="false" :max="1" @selected="iconUrl">
                                <el-tooltip effect="dark" content="建议尺寸64*64" placement="top">
                                    <el-button size="mini">选择文件</el-button>
                                </el-tooltip>
                            </com-attachment>
                            <com-image mode="aspectFill" width="80px" height="80px"
                                       :src="dialogRuleForm.iconPath"></com-image>
                        </el-form-item>
                        <el-form-item label="选择状态图标" prop="selectedIconPath">
                            <com-attachment :multiple="false" :max="1" @selected="activeIconUrl">
                                <el-tooltip effect="dark" content="建议尺寸64*64" placement="top">
                                    <el-button size="mini">选择文件</el-button>
                                </el-tooltip>
                            </com-attachment>
                            <com-image mode="aspectFill"
                                       width="80px"
                                       height="80px"
                                       :src="dialogRuleForm.selectedIconPath">
                            </com-image>
                        </el-form-item>
                        <el-form-item label="显示" prop="text">
                            <el-switch v-model="dialogRuleForm.is_show" :active-value="1" :inactive-value="0"></el-switch>

                        </el-form-item>
                        <el-form-item label="名称" prop="text">
                            <el-input v-model.trim="dialogRuleForm.text"></el-input>
                        </el-form-item>

                        <el-form-item label="类型" prop="open_type" style="display: none;">
                            <el-input disabled v-model="dialogRuleForm.open_type"></el-input>
                        </el-form-item>

                        <el-form-item label="导航链接" prop="url">
                            <div flex="box:last">
                                <el-input disabled v-model="dialogRuleForm.url"></el-input>
                                <div v-if="nowNavIndex > 1">
                                    <com-pick-link @selected="selectNavUrl" :is-show-goods-cate-select="false">
                                        <el-button>选择链接</el-button>
                                    </com-pick-link>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="dialogFormSubmit('dialogRuleForm')">提 交</el-button>
            </div>
        </el-dialog>
    </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: {
                    bottom_background_color: '#ffffff',
                    top_background_color: '#ffffff',
                    top_text_color: '#000000',
                    active_color: '#ff4544',
                    inactive_color: '#888',
                    // shadow: false,
                    navs: [],
                },
                defaultForm: {
                    bottom_background_color: '#ffffff',
                    top_background_color: '#ffffff',
                    top_text_color: '#000000',
                    active_color: '#ff4544',
                    inactive_color: '#888',
                    recover_default: 1,
                    navs: [],
                },
                rules: {
                    bottom_background_color: [
                        {required: true, message: '请选择底栏背景颜色', trigger: 'change'},
                    ],
                    inactive_color: [
                        {required: true, message: '请选择文字颜色', trigger: 'change'},
                    ],
                    active_color: [
                        {required: true, message: '请选择文字选中状态颜色', trigger: 'change'},
                    ],
                },
                predefineColors: [
                    '#000',
                    '#fff',
                    '#888',
                    '#ff4544'
                ],
                btnLoading: false,
                cardLoading: false,

                isNavAction: false,//编辑删除框是否显示
                navIconIndex: -1,//控制导航编辑隐藏显示
                navEditIndex: -1, //当前编辑的导航索引
                dialogFormVisible: false,
                dialogRuleForm: {
                    selectedIconPath: '',
                    text: '',
                    iconPath: '',
                    url: '',
                    open_type: '',
                    params: [],
                    is_show: 1,
                },
                navMaxCount: 5, // 导航最大数量限制
                nowNavIndex: 5, // 当前选的导航按钮
                dialogRules: {
                    iconPath: [
                        {required: true, message: '请选择图标', trigger: 'change'},
                    ],
                    selectedIconPath: [
                        {required: true, message: '请选择选中状态图标', trigger: 'change'},
                    ],
                    text: [
                        {required: true, message: '请输入导航名称', trigger: 'change'},
                    ],
                    url: [
                        {required: true, message: '请选择导航链接', trigger: 'change'},
                    ],
                },
                navCurrent: 0,
            };
        },
        methods: {
            store(formName) {
                this.$refs[formName].validate((valid) => {
                    let self = this;
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'mall/decorate/bottom-nav'
                            },
                            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/bottom-nav',
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        if (!isEmpty(e.data.data.detail)) {
                            if (e.data.data.detail.inactive_color) {
                                self.ruleForm = e.data.data.detail;
                            }
                            if (e.data.data.detail.navs) {
                                self.ruleForm.navs = e.data.data.detail.navs;
                            }
                        }
                    } 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.nowNavIndex = this.ruleForm.navs.length + 1;
                this.dialogFormVisible = true;
                if (index != -1) {
                    this.nowNavIndex = index + 1;
                    this.navEditIndex = index;
                    this.dialogRuleForm = this.ruleForm.navs[index]
                }
            },
            // 弹框关闭事件回调
            dialogColse() {
                this.navEditIndex = -1;
                this.clearDialogData();
            },
            clearDialogData() {
                this.dialogRuleForm = {
                    selectedIconPath: '',
                    text: '',
                    iconPath: '',
                    url: '',
                    open_type: '',
                    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.iconPath = e[0].url
                    this.$refs.dialogRuleForm.validateField('iconPath');
                }
            },
            // 添加选择状态图标
            activeIconUrl(e) {
                if (e.length) {
                    this.dialogRuleForm.selectedIconPath = e[0].url
                    this.$refs.dialogRuleForm.validateField('selectedIconPath');
                }
            },
            // 导航链接选择
            selectNavUrl(e) {
                let self = this;
                e.forEach(function (item) {
                    let open_url = item.route;
                    if (item.open_type === 'web') {
                        open_url = item.params.link;
                    }
                    if (item.open_type === 'applet') {
                        open_url = item.params.app_path;
                    }
                    if (item.open_type === 'call') {
                        open_url = item.params.telphone;
                    }
                    if (item.open_type === 'wechat_video_account') {
                        open_url = item.params.feedId;
                    }
                    self.dialogRuleForm.url = open_url;
                    self.dialogRuleForm.open_type = item.params.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/bottom-nav',
                        },
                        method: 'post',
                        data: {
                            form: self.defaultForm
                        }
                    }).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>