hemall.terabimsoft.com.cn/plugins/pc-terminal/views/admin/nav-top.blade.php

@extends('layouts.base')
@section('title', '基础设置')
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/pc-terminal/views/admin/index.css')}}">
<style>
    .vue-main{background: #eff3f6;}
    /* 导航 */
    .el-radio-button .el-radio-button__inner,.el-radio-button:first-child .el-radio-button__inner {border-radius: 4px 4px 4px 4px;border-left: 0px;}
    .el-radio-button__inner{border:0;}
    .el-radio-button:last-child .el-radio-button__inner {border-radius: 4px 4px 4px 4px;}
    .tabel .head{width:100%;display:flex;align-items:center;padding-bottom:10px;border-bottom:solid 1px #ccc;}
    .tabel .head .checkbox{width:10%;display:flex;align-items:center;justify-content:center;}
    .tabel .head .name{width:20%;display:flex;align-items:center;justify-content:center;}
    .tabel .head .sort{width:20%;display:flex;align-items:center;justify-content:center;}
    .tabel .head .link{width:20%;display:flex;align-items:center;justify-content:center;}
    .tabel .head .icon{width:10%;display:flex;align-items:center;justify-content:center;}
    .tabel .head .show-checked{width:10%;display:flex;align-items:center;justify-content:center;}
    .tabel .head .action{width:10%;display:flex;align-items:center;justify-content:center;}
    .tabel .list-content .list{
        width:100%;
        padding:10px 0;
        border-bottom:solid 1px #ccc;
        display:flex;
        align-items:center;
        flex-wrap:wrap;
    }
    .tabel .list-content .list .list-first{
        width:100%;
        display:flex;
        align-items:center;
    }
    .tabel .list-content .list  .list-first .checkbox-content{width:10%;display:flex;align-items:center;justify-content:center;}
    .tabel .list-content .list  .list-first .sort-content{width:20%;display:flex;align-items:center;justify-content:center;}
    .tabel .list-content .list  .list-first .name-content{width:20%;display:flex;align-items:center;justify-content:center;}
    .tabel .list-content .list  .list-first .link-content{width:20%;display:flex;align-items:center;justify-content:center;}
    .tabel .list-content .list .list-first .show-content{width:10%;display:flex;align-items:center;justify-content:center;}
    .tabel .list-content .list .list-first .icon-content{width:10%;display:flex;align-items:center;justify-content:center;}
    .tabel .list-content .list  .list-first .action-content{width:10%;display:flex;align-items:center;justify-content:center;}
    .tabel .list-content .list .list-first .el-input{
        width:90%;
    } 
    .tabel .list-content .list  .list-second{
        width:100%;
        display:flex;
        align-items:center;
        margin-top:10px;
    }
    .tabel .list-content .list  .list-second .checkbox-content{width:10%;display:flex;align-items:center;justify-content:center;}
    .tabel .list-content .list  .list-second .sort-content{width:20%;display:flex;align-items:center;justify-content: center;}
    .tabel .list-content .list  .list-second .name-content{width:20%;display:flex;align-items:center;}
    .tabel .list-content .list  .list-second .link-content{width:20%;display:flex;align-items:center;justify-content: center;}
    .tabel .list-content .list .list-second .show-content{width:10%;display:flex;align-items:center;justify-content:center;}
    .tabel .list-content .list .list-second .icon-content{width:10%;display:flex;align-items:center;justify-content:center;}
    .tabel .list-content .list  .list-second .action-content{width:10%;display:flex;align-items:center;justify-content:center;}
    
    .confirm-btn{
    width: calc(100% - 266px);
    position:fixed;
    bottom:0;
    right:0;
    margin-right:10px;
    line-height:63px;
	background-color: #ffffff;
	box-shadow: 0px 8px 23px 1px 
		rgba(51, 51, 51, 0.3);
    background-color:#fff;
    text-align:center;
}
.upload-box{
    width:30px;
    height:30px;
}
.upload-boxed{
    width:30px;
    height:30px;
}
</style>
    <div class="all">
    <div id="app" v-cloak>
      <el-form ref="form" label-width="15%">
        <div class="vue-head">
          <el-radio-group v-model="order_type">
            <el-radio-button label="1" @click.native="gotoOther(1)">基础设置</el-radio-button>
            <el-radio-button label="2" @click.native="gotoOther(2)">SEO设置</el-radio-button>
            <el-radio-button label="3" @click.native="gotoOther(3)">顶部导航</el-radio-button>
            <el-radio-button label="4" @click.native="gotoOther(4)">底部导航</el-radio-button>
            <el-radio-button label="5" @click.native="gotoOther(5)">登录页设置</el-radio-button>
              <el-radio-button label="6" @click.native="gotoOther(6)">聚合搜索</el-radio-button>
          </el-radio-group>
        </div>
        <div class="vue-head">
            <div class="vue-main-title" style="margin-bottom:15px;">
                <div class="vue-main-title-left"></div>
                <div class="vue-main-title-content" >设置</div>
            </div>
            <div class="vue-main-form">
                <el-form-item label="下滑置顶模块" prop="set_top">
                    <el-radio v-model="form.set_top" :label="0">logo/搜索框模块</el-radio>
                    <el-radio v-model="form.set_top" :label="1">导航栏模块</el-radio>
                </el-form-item>
                <el-form-item label="全部分类展示" prop="category_show">
                    <el-radio v-model="form.category_show" :label="0">折叠</el-radio>
                    <el-radio v-model="form.category_show" :label="1">展开</el-radio>
                </el-form-item>
            </div>
          <div class="vue-main-title" style="margin-bottom:15px;"> 
            <div class="vue-main-title-left"></div>
            <div class="vue-main-title-content" >顶部导航</div>
            <el-button type="primary" @click="delAll">删除选中</el-button>
            <el-button type="primary" @click="addnav">添加主导航</el-button>
          </div>
          <div class="tabel" style="    min-height: 100vh;">
            <div class="head">
              <div class="checkbox">

              </div>
              <div class="sort">
                显示顺序
              </div>
              <div class="name">
                名称
              </div>
              <div class="link">
                链接
              </div>
              <div class="icon">
                图标
              </div>
              <div class="show-checked">
                显示
              </div>
              <div class="action">
                操作
              </div>
            </div>
            <div class="list-content">
              <div class="list" v-for="(item,index) in nav">
                <div class="list-first">
                    <div class="checkbox-content">
                        <el-checkbox v-model="item.checked" :true-label="1" :false-label="0" @change="change(item)"></el-checkbox>
                    </div>
                    <div class="sort-content">
                        
                        <el-input v-model="item.sort" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="name-content">
                    <el-input v-model="item.nav_name" placeholder="请输入内容"></el-input>
                        <a><img :src="addIcon" @click="addsecond(item)" style="width:30px;height:30px;margin-left:5px;"/></a>
                    </div>
                    <div class="link-content">
                    <el-input v-model="item.url" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="icon-content">
                            <div class="upload-box" v-if="!item.img">
                                <i class="el-icon-plus" style="font-size:32px" @click="openUpload(item)" >
                                 
                                </i>
                            </div>
                            <div @click="openUpload(item)" class="upload-boxed" v-if="item.img">
                                <img :src="item.img_src" alt="" style="width:30px;height:30px;border-radius: 5px;cursor: pointer;">
                              
                            </div>
                            <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
                    </div>
                    <div class="show-content">
                    <el-checkbox v-model="item.is_show" :true-label="1" :false-label="0"></el-checkbox>
                    </div>
                    <div class="action-content">
                        <a style="color:#999"><i  class="iconfont icon-ht_operation_delete" style="font-size:16px;"  @click="del(index)"></i></a>
                    </div>
                </div>
                 <template   v-if="item.sub_nav&&item.sub_nav.length>0">
                    <div class="list-second" v-for="(list,ind) in item.sub_nav" >
                        <div class="checkbox-content">
                        
                        </div>
                        <div class="sort-content">
                            <div style="width:90%; display:flex;padding-left: 20px;">
                                <img :src="arrow" style="width: 30px;height: 30px;margin-right: 5px;">
                                <el-input v-model="list.sort" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                        <div class="name-content">
                            
                                <el-input v-model="list.nav_name" placeholder="请输入内容" style="width:90%;"></el-input>
                          
                        </div>
                        <div class="link-content">
                        <el-input v-model="list.url" placeholder="请输入内容" style="width:90%;"></el-input>
                        </div>
                        <div class="icon-content">

                        </div>
                        <div class="show-content">
                        <el-checkbox v-model="list.is_show" :true-label="1" :false-label="0"></el-checkbox>
                        </div>
                        <div class="action-content">
                            <a style="color:#999"><i  class="iconfont icon-ht_operation_delete" style="font-size:16px;"  @click="delsecond(ind,item)"></i></a>
                        </div>
                    </div>
                </template>
              </div>
            </div>

          </div>
        </div>
        <div class="confirm-btn">
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </el-form>
    </div>
  </div>
  @include('public.admin.uploadImg')
    <script>
        const addIcon = `{!! resource_get('plugins/pc-terminal/assets/images/add.png') !!}`;
        const arrow = `{!! resource_get('plugins/pc-terminal/assets/images/arrow.png') !!}`;
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                let list={!!json_encode($list?:[] )!!}
                let set={!!json_encode($set?:[] )!!}
                return{
                    form:{
                        set_top:set&&set.set_top?set.set_top:0,
                        category_show:set&&set.category_show?set.category_show:0,
                    },
                    order_type:'3',
                    nav:list,
                    addIcon:addIcon,
                    uploadShow:false,
                    chooseImgName:'',
                    img_type:"",
                    arrow:arrow
                }
            },
            created() {
            },
            mounted() {
               if(this.nav&&this.nav.length>0){
                   this.nav.forEach((item,index)=>{
                       item.checked=0
                   })
               }
            },
            methods: {
                change(){
                    this.$forceUpdate();
                },
                delAll(){
                    var arr=[]
                    this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                     
                        this.nav.forEach((item,index)=>{
                            if(!item.checked){
                               arr.push(item)
                            }
                        })
                   
                        this.nav=arr
                        console.log(this.nav)
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });  
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                    });
                   
                    this.$forceUpdate();
                 
                        
                },
                changeProp(val) {
                    if(val == true) {
                        this.uploadShow = false;
                    }
                    else {
                        this.uploadShow = true;
                    }
                },
                sureImg(name,image,image_url) {
                        
                        this.chooseImgName.img = image;
                        this.chooseImgName.img_src = image_url;
                     
                        this.$forceUpdate();
                },
                openUpload(str) {
                   
                    this.chooseImgName = str;
                 
                    this.uploadShow = true;
                },
                delsecond(ind,item){
                    this.$confirm('是否删除二级菜单?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        item.sub_nav.splice(ind, 1);
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });  
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                    });
                },
                del(index){
                this.$confirm('是否删除一级菜单?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.nav.splice(index, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });  
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
                
            },
                addsecond(item){
                    item.sub_nav.push({nav_name:'',url:'',img:'',sort:'',is_show:'0'})
                },
                addnav(){
                    this.nav.push({nav_name:'',url:'',img:'',sort:'',is_show:'0',sub_nav:[]})
                },
                gotoOther(type) {
                    let url = ""
                    if(type==1) {
                         url = '{!! yzWebFullUrl('plugin.pc-terminal.admin.set.basic') !!}'
                    }
                    else if(type==2) {
                        url = '{!! yzWebFullUrl('plugin.pc-terminal.admin.set.seo') !!}'
                    }
                    else if(type==3) {
                        url = '{!! yzWebFullUrl('plugin.pc-terminal.admin.set.nav-top') !!}'
                    }
                    else if(type==4) {
                        url = '{!! yzWebFullUrl('plugin.pc-terminal.admin.set.nav-bottom') !!}'
                    }
                    else if(type==5) {
                        url = '{!! yzWebFullUrl('plugin.pc-terminal.admin.set.login-set') !!}'
                    }
                    else if(type==6) {
                        url = '{!! yzWebFullUrl('plugin.pc-terminal.admin.set.search-set') !!}'
                    }
                    if(url) {
                        window.location.href=url
                    }
                },
                submit(){
                    this.$http.post('{!! yzWebFullUrl('plugin.pc-terminal.admin.set.nav-top') !!}',{nav:this.nav,set:this.form}).then(response => {
                                if (response.data.result) {
                                    this.$message({message: response.data.msg,type: 'success'});
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                              
                            },response => {
                              
                            });
                },    
            },
        })

    </script>
@endsection