增加标签栏

src/assets/css/zkcss.css

@@ -30,4 +30,5 @@ input, textarea, select{
     background-color: #fff;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
+    color:#303133;
 }

src/components/StoreDesign/labelBar.vue

+<style>
+    .labelBar .LB_content{
+        margin-top:10px;
+    }
+    .labelBar .LB_divInner{
+        display: flex;
+        color:#303133;
+    }
+    .labelBar .Label_mobile{
+        width: 404px;
+        height: 736px;
+        border-radius: 30px;
+        background-color: #fff;
+        padding: 33px 12px;
+        margin-right: 10px;
+    }
+    .labelBar .Label_Screen{
+        border: 2px solid #F3F5F6;
+        height: 670px;
+        width: 380px;
+        margin: 0 auto;
+        position: relative;
+        background-color: #F7F7F7;
+    }
+    .labelBar .Label_Head{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 376px;
+        height: 60px;
+        line-height: 60px;
+        font-size: 18px;
+        font-weight: bolder;
+        text-align: center;
+    }
+    .labelBar .Label_foot{
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 376px;
+        height: 45px;
+        display: flex;
+        flex-direction: row;
+    }
+    .labelBar .Label_foot>div{
+        display: flex;
+        align-items: center;
+        flex-grow:1;
+        flex-direction: column;
+    }
+    .Label_Screen .Label_foot .nav-icon {
+        height: 20px;
+        width: 20px;
+    }
+    .labelBar .Label_Right{
+        width:100%;
+    }
+    .Label_RightTop{
+        background-color: #fff;
+    }
+    .labelBar .Label_title{
+        padding: 18px 20px;
+        border-bottom: 1px solid #F3F3F3;
+    }
+    .labelBar .Label_RightBtm{
+        margin-top:20px;
+        background-color: #fff;
+    }
+    .labelBar .nav_Main{
+        display: flex;
+        justify-content: flex-start;
+    }
+    .labelBar .nav_IconContent{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+    .labelBar .nav_Add{
+        display: flex;
+        border:1px dashed #eeeeee;
+        cursor: pointer;
+        width: 80px;
+        height: 80px;
+        margin-right: 10px;
+        align-items: center;
+        justify-content: center;
+    }
+    .labelBar .nav-add-icon {
+        font-size: 50px;
+        color: #eeeeee;
+    }
+    .labelBar .bottom-icon {
+        width: 80px;
+        height: 80px;
+        margin-right: 10px;
+        border: 1px solid #eeeeee;
+        cursor: move;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+    }
+    .labelBar .btm_icon {
+        width: 30px;
+        height: 30px;
+    }
+    .Btm_ImgIcon,.btnCenter{
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .labelBar .nav_Action{
+        display:flex;
+        position: absolute;
+        width:100%;
+        height:26px;
+        bottom:0;
+        visibility: hidden;
+        cursor: pointer!important;
+    }
+    .nav_Action span{
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        justify-content: center;
+    }
+    .bottom-icon:hover .nav_Action{
+        visibility: visible;
+    }
+    .labelBar .labelBarIconImg {
+        width: 80px;
+        height: 80px;
+    }
+    .labelBar .labelBarIconImg img{
+        width:100%;
+        height:100%;
+    }
+</style>
+<template>
+    <div class="labelBar">
+        <div class="CommonHeader">标签栏设置</div>
+        <div class="LB_content">
+            <div class="LB_divInner">
+                <div class="Label_mobile">
+                    <div class="Label_Screen">
+                        <div class="Label_Head" :style="{color:TextColor,backgroundColor:BackColor}">这里是标题</div>
+                        <div class="Label_foot" :style="{backgroundColor:btmBackground}">
+                            <div v-for="(item,index) in msg.navObj" :key="index" @click="getChecked(item)">
+                                <div>
+                                    <img class="nav-icon" v-if="item.isActive" :src="domainManager().ImageUrl+'/Static/'+item.checkedIcon" alt="">
+                                    <img class="nav-icon" v-else :src="domainManager().ImageUrl+'/Static/'+item.icon" alt="">
+                                </div>
+                                <div v-if="item.isActive" :style="{color:item.ckedTextColor}">
+                                    {{item.name}}
+                                </div>
+                                <div v-else :style="{color:item.textColor}">
+                                    {{item.name}}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="Label_Right">
+                    <div class="Label_RightTop">
+                        <div class="Label_title">顶部标题栏</div>
+                        <el-form label-width="120px" style="padding:20px 0;">
+                            <el-form-item label="文字颜色" size="small">
+                                <el-radio-group v-model="msg.textColor" @change="changeColor">
+                                    <el-radio label="1">白色</el-radio>
+                                    <el-radio label="2">黑色</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                            <el-form-item label="背景颜色" size="small">
+                                  <el-color-picker size="small" v-model="msg.titleBgColor" @change="getTopBgColort"></el-color-picker>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                    <div class="Label_RightBtm">
+                        <div class="Label_title">底部标签栏</div>
+                        <el-form label-width="120px" style="padding:20px 0;">
+                            <el-form-item label="背景颜色" size="small">
+                                  <el-color-picker size="small" v-model="msg.btmBgColor" @change="getBtmBgColor"></el-color-picker>
+                            </el-form-item>
+                            <el-form-item label="导航阴影效果" size="small">
+                                <el-switch v-model="msg.isShadow"></el-switch>
+                            </el-form-item>
+                            <el-form-item label="底部导航图标" size="small">
+                                <div class="nav_Main">
+                                    <div class="nav_IconContent">
+                                        <div class="bottom-icon" v-for="(item,index) in msg.navObj" :key="index">
+                                            <div class="Btm_ImgIcon">
+                                                <img class="btm_icon" :src="domainManager().ImageUrl+'/Static/'+item.icon" alt="">
+                                            </div>
+                                            <div class="btnCenter">{{item.name}}</div>
+                                            <div class="nav_Action">
+                                                <span style="background: rgba(64, 158, 255, 0.9);" @click="EditInfo(item)">编辑</span>
+                                                <span style="background: rgba(245, 108, 108, 0.9);" @click="delItem(index)">删除</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="nav_Add" @click="addIconList">
+                                        <i class="el-icon-plus nav-add-icon"></i>
+                                    </div>
+                                </div>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </div>
+            </div>  
+        </div>
+
+        <!-- 导航菜单编辑 -->
+        <el-dialog title="导航菜单编辑" :visible.sync="isShowDialog" width="800px">
+            <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
+                <el-form-item label="图标" prop="icon">
+                    <div>
+                        <el-tooltip class="item" effect="dark" content="建议尺寸:64*64" placement="top-start">
+                            <el-button size="small" @click="UploadIcon">选择文件</el-button>
+                        </el-tooltip>
+                    </div>
+                    <div class="labelBarIconImg">
+                        <img v-if="addMsg.icon" :src="domainManager().ImageUrl+'/Static/'+addMsg.icon" alt="" />
+                        <img v-else src="../../assets/img/default.png" alt="" />
+                    </div>
+                </el-form-item>
+                <el-form-item label="选择状态图标" prop="checkedIcon">
+                    <div>
+                        <el-tooltip class="item" effect="dark" content="建议尺寸:64*64" placement="top-start">
+                            <el-button size="small" @click="UploadCkedIcon">选择文件</el-button>
+                        </el-tooltip>
+                    </div>
+                    <div class="labelBarIconImg">
+                        <img v-if="addMsg.checkedIcon" :src="domainManager().ImageUrl+'/Static/'+addMsg.checkedIcon" alt="" />
+                        <img v-else src="../../assets/img/default.png" alt="" />
+                    </div>
+                </el-form-item>
+                <el-form-item label="名称" prop="name">
+                    <el-input type="text" v-model="addMsg.name" size="small" class="w400" maxlength="100" />
+                </el-form-item>
+                <el-form-item label="文字颜色" prop="textColor">
+                    <el-color-picker size="small" v-model="addMsg.textColor"></el-color-picker>
+                </el-form-item>
+                <el-form-item label="选中文字颜色" prop="ckedTextColor">
+                    <el-color-picker size="small" v-model="addMsg.ckedTextColor"></el-color-picker>
+                </el-form-item>
+                <el-form-item label="导航链接" prop="Url">
+                    <el-input v-model="addMsg.Url" class="w400" size="small" maxlength="100" />
+                    <el-button plain size="small">选择链接</el-button>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="small" @click="isShowDialog = false">取 消</el-button>
+                <el-button size="small" type="primary" @click="submitForm('addMsg')">提交</el-button>
+            </span>
+        </el-dialog>
+
+    </div>
+</template>
+<script>
+  export default {
+    data() {
+      let validataIcon = (rule, value, callback) => {
+        if (this.addMsg.icon == '') {
+          return callback(new Error('请选择图标'));
+        } else {
+          callback();
+        }
+      }
+      let validataCkedIcon = (rule, value, callback) => {
+        if (this.addMsg.checkedIcon == '') {
+          return callback(new Error('请选择选中状态图标'));
+        } else {
+          callback();
+        }
+      }
+      return {
+         //文字颜色
+         TextColor:'',
+         BackColor:'rgb(255, 255, 255)',
+         //底部颜色
+         btmBackground:'rgb(255, 255, 255)',
+
+        //显示弹窗
+         isShowDialog:false,
+         msg:{
+            //文字颜色
+            textColor: '2',
+            //选择的顶部背景色
+            titleBgColor:'#FFFFFF',
+            //底部背景色
+            btmBgColor:"#FFFFFF",
+            //是否导航阴影效果
+            isShadow:false,
+            navObj:[{
+                name:'我',
+                icon:'nav-icon-user.png',
+                checkedIcon:'nav-icon-user.active.png',
+                textColor:'rgb(136, 136, 136)',
+                ckedTextColor:'rgb(255, 69, 68)',
+                isActive:true
+            },{
+                name:'首页',
+                icon:'nav-icon-index.png',
+                checkedIcon:'nav-icon-index.active.png',
+                textColor:'rgb(136, 136, 136)',
+                ckedTextColor:'rgb(255, 69, 68)',
+                isActive:false
+            },{
+                name:'购物车',
+                icon:'nav-icon-cart.png',
+                checkedIcon:'nav-icon-cart.active.png',
+                textColor:'rgb(136, 136, 136)',
+                ckedTextColor:'rgb(255, 69, 68)',
+                isActive:false
+            },{
+                name:'分类',
+                icon:'nav-icon-cat.png',
+                checkedIcon:'nav-icon-cat.active.png',
+                textColor:'rgb(136, 136, 136)',
+                ckedTextColor:'rgb(255, 69, 68)',
+                isActive:false
+            }]
+         },
+         addMsg:{
+             icon:'',
+             checkedIcon:'',
+             name:'',
+             textColor:'rgb(136, 136, 136)',
+             ckedTextColor:'rgb(255, 69, 68)',
+             Url:''   
+         },
+         rules:{
+            icon: [{
+                required: true,
+                validator:validataIcon,
+                trigger: "blur"
+            }],
+            checkedIcon: [{
+                required: true,
+                validator:validataCkedIcon,
+                trigger: "blur"
+            }],
+            name:[{
+                required: true,
+                message: "请输入导航名称",
+                trigger: "blur"
+            }],
+            textColor:[{
+                required: true,
+                message: "",
+                trigger: "blur"
+            }],
+            ckedTextColor:[{
+                required: true,
+                message: "",
+                trigger: "blur"
+            }],
+            Url:[{
+                required: true,
+                message: "请选择导航链接",
+                trigger: "blur"
+            }],
+         }
+      };
+    },
+    created() {
+
+    },
+    methods: {
+        //点击切换
+        getChecked(item){
+            this.msg.navObj.forEach(x=>{
+                x.isActive=false;
+            })
+            item.isActive=!item.isActive;
+        },
+        //切换文字颜色
+        changeColor(val){
+            console.log(val,'val')
+            if(val==1){
+                this.TextColor="#fff"
+            }else{
+                this.TextColor="rgb(0, 0, 0)"
+            }
+        },
+        //切换顶部背景色
+        getTopBgColort(val){
+            this.BackColor=val;
+        },
+        //切换底部背景色
+        getBtmBgColor(val){
+            this.btmBackground=val;
+        },
+        //删除底部图标
+        delItem(index){
+            this.msg.navObj.splice(index,1);
+        },
+        //上传图标
+        UploadIcon(){
+        },
+        //上传选中图标
+        UploadCkedIcon(){
+        },
+        //点击添加图标
+        addIconList(){
+            this.isShowDialog=true;
+            this.addMsg.icon='';
+            this.addMsg.checkedIcon='';
+            this.addMsg.name='';
+            this.addMsg.textColor='rgb(136, 136, 136)';
+            this.addMsg.ckedTextColor='rgb(255, 69, 68)';
+            this.addMsg.Url='';
+        },
+        //点击编辑
+        EditInfo(item){
+            this.addMsg = JSON.parse(JSON.stringify(item));
+            this.isShowDialog=true;
+        },
+        //提交数据
+        submitform(addMsg) {
+            //提交创建、修改表单
+            this.$refs[addMsg].validate(valid => {
+                if (valid) {
+                    this.saveMsg();
+                } else {
+                    return false;
+                }
+            });
+        },
+    },
+    mounted() {
+
+    }
+  };
+</script>
\ No newline at end of file

src/router/index.js

@@ -137,6 +137,12 @@ export default new Router({
           path: '/mimipage',
           name: 'mimipage',
           component: resolve => require(['@/components/StoreDesign/mimipage'], resolve),
+        },
+        //店铺管理 标签栏
+        {
+          path: '/labelBar',
+          name: 'labelBar',
+          component: resolve => require(['@/components/StoreDesign/labelBar'], resolve),
         }
       ]
     },