修改增加页面

src/assets/css/zkcss.css

@@ -10,9 +10,16 @@
     font-size: 14px;
     margin-top: 15px;
 }
+input, textarea, select{
+    outline: none !important;
+    box-shadow: none;
+}
 .w120{
     width:120px;
 }
 .w160{
     width:160px;
-} 
\ No newline at end of file
+}
+.w400{
+    width:400px;
+}
\ No newline at end of file

src/components/StoreDesign/navigationIcon.vue

+
+<template>
+  <div class="navigation">
+    <template v-if="isShowAdd">
+        <div class="head-title">
+            导航图标列表
+            <el-button @click="isShowAdd=false" style="float:right;margin-top: -5px;" size="small" type="primary">添加导航图标</el-button>
+        </div>
+        <div class="content">
+            <div>
+                <div class="searchInput">
+                    <el-input style="display:inline-block;width:225px;height:30px"
+                    placeholder="请输入搜索内容"
+                    v-model="value"
+                    size="small"
+                    clearable>
+                    </el-input>
+                    <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
+                </div>
+            </div>
+            <el-table
+                :data="tableData"
+                v-loading="loading"
+                border
+                style="width: 100%;margin:20px 0">
+                <el-table-column
+                prop="ID"
+                label="ID"
+                width="100">
+                </el-table-column>
+                <el-table-column
+                prop="address"
+                width="120"
+                label="名称">
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                label="导航图标"
+                width="80">
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                label="导航链接">
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                label="排序"
+                width="180">
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                label="是否显示"
+                width="120">
+                </el-table-column>
+                <el-table-column
+                prop="address"
+                width="220"
+                label="操作">
+                </el-table-column>
+            </el-table>
+            <el-pagination style="text-align:right"
+                background
+                @current-change="handleCurrentChange"
+                :page-size="msg.pageSize"
+                layout="prev, pager, next"
+                :total="total">
+            </el-pagination>
+        </div>
+    </template>
+    <template v-else>
+        <div class="head-title">
+            <span @click="isShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">导航图标列表</span><span style="margin:0 9px;color:#C0C4CC">/</span><span>导航图标编辑</span>
+        </div>
+        <div class="content">
+            <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="80px" style="padding:0 20px;">
+                <el-form-item label="名称" prop="name">
+                    <el-input v-model="addMsg.name" class="w400" size="small" placeholder="请输入名称" maxlength="20" />
+                </el-form-item>
+                <el-form-item label="排序" prop="Sort">
+                    <el-input type="text" v-model="addMsg.Sort" size="small" class="w400" placeholder="请输入排序" maxlength="20" />
+                </el-form-item>
+                <el-form-item label="导航图标" prop="img">
+                    <div>
+                        <el-tooltip class="item" effect="dark" content="建议尺寸:88*88" placement="top-start">
+                            <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
+                                :show-file-list="false" :http-request="UploadImage">
+                                <el-button size="small">选择文件</el-button>
+                            </el-upload>
+                        </el-tooltip>
+                    </div>
+                    <div class="navImg">
+                        <img v-if="addMsg.img" :src="addMsg.img" alt="" />
+                        <img v-else src="../../assets/img/default.png" alt=""/>
+                    </div>
+                </el-form-item>
+                <el-form-item label="导航链接" prop="link">
+                    <el-input type="password" v-model="addMsg.link" class="w400" size="small" maxlength="100" />
+                    <el-button plain size="small">选择链接</el-button>
+                </el-form-item>
+                <el-form-item label="是否显示">
+                    <el-switch v-model="addMsg.isShow" ></el-switch>                
+                </el-form-item>
+            </el-form>
+        </div>
+        <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存</el-button>
+    </template>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      let validataImg = (rule, value, callback) => {
+        if (this.addMsg.img == '') {
+          return callback(new Error('请选择导航图标'));
+        } else {
+          callback();
+        }
+      }
+      return {
+        loading:false,
+        dialogVisible:false,
+        value:'',
+        options:[],
+        tableData:[
+            {ID:'111'}
+        ],
+        msg:{
+            pageIndex:1,
+            pageSize:15,
+        },
+        total:0, 
+        isShowAdd:true,
+        addMsg:{
+            name:'',
+            Sort:100,
+            img:'',
+            link:'',
+            isShow:true
+        },
+        rules: {
+          name: [{
+            required: true,
+            message: "请输入导航名称",
+            trigger: "blur"
+          }],
+          Sort: [{
+            required: true,
+            message: "请输入导航排序",
+            trigger: "blur"
+          }],
+          img:[{
+            validator: validataImg,
+            trigger: "blur",
+            required: true
+          }],
+          link: [{
+            required: true,
+            message: "请选择导航链接",
+            trigger: "blur"
+          }]
+        },
+      };
+    },
+    created() {
+
+    },
+    methods: {
+        handleCurrentChange(val) {
+            this.msg.pageIndex = val;
+            this.getList();
+        },
+        getList(){
+
+        },
+        //上传图片
+        UploadImage(file) {
+            this.UploadFileToTencent(this.FileType().UserImg, file.file, res => {
+            if (res.resultCode == 1) {
+                this.addMsg.img = res.FileUrl;
+            }
+            })
+        },
+        submitform(addMsg) {
+            //提交创建、修改表单
+            this.$refs[addMsg].validate(valid => {
+            if (valid) {
+                this.saveMsg();
+            } else {
+                return false;
+            }
+            });
+        },
+        //保存
+        saveMsg(){
+
+        }
+    },
+    mounted() {
+      
+    }
+  };
+
+</script>
+<style>
+.navImg{
+    width:80px;
+    height:80px;
+}
+.navImg img{
+    width:100%;
+    height:100%;
+}
+.navigation .blue{
+    color:#409EFF;
+    
+}
+.navigation .content .searchInput{
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+}
+.navigation .content .searchInput .el-input__inner{
+    border:none;outline:none;
+    height: 30px;
+    line-height: 30px;
+}
+.navigation .content .searchInput{
+    line-height: normal;
+    display: inline-table;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    width:250px;
+    margin-right: 20px;
+}
+.navigation .content{
+    background: #fff;
+    margin-top:10px;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+</style>

src/components/mall.vue

@@ -234,6 +234,7 @@
     flex-wrap: wrap;
     align-items: center;
     width: 300px;
+    float:right;
   }
 
   .marinRightList ul {
@@ -284,7 +285,7 @@
       <div class="is-show-menu-2" v-if="isShowOne" @click="showTwo=true,isShowOne=false">>></div>
       <div class="leftMenu1">
         <div class="aside-logo">
-          <div class="asideInner">{{currentUser.MallName}}</div>
+          <div class="asideInner" @click="CommonJump('zanIndex'),firstCked=0,showTwo=false">{{currentUser.MallName}}</div>
         </div>
         <ul>
           <li class="menu-item" @mouseover="mouseOver(item)" @mouseout="mouseOutMenu()" v-for="(item,index) in MenuList"
@@ -411,7 +412,7 @@
       mouseOutMenu() {
         this.MenuList.forEach(item => {
           if (item.MenuId == this.firstCked) {
-            //this.secondItem = item;
+            this.secondItem = item;
           }
         })
       },

src/main.js

@@ -7,6 +7,8 @@ import router from './router'
 import ajaxPlug from './plug/index'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import echarts from 'echarts'
+
 Vue.use(ElementUI);
 
 import commonUtils from './assets/utils/commonUtils'
@@ -14,6 +16,8 @@ Vue.commonUtils = Vue.prototype.$commonUtils=commonUtils
 
 Vue.config.productionTip = false
 Vue.http = Vue.prototype.$http = axios
+Vue.prototype.$echarts = echarts
+
 Vue.use(ajaxPlug)
 /* eslint-disable no-new */
 new Vue({

src/router/index.js

@@ -100,6 +100,12 @@ export default new Router({
           name: 'basicSetUp',
           component: resolve => require(['@/components/setup/basicSetUp'], resolve),
         },
+        //店铺管理 导航图标
+        {
+          path: '/navigationIcon',
+          name: 'navigationIcon',
+          component: resolve => require(['@/components/StoreDesign/navigationIcon'], resolve),
+        }
       ]
     },