add: 增加设置

src/common/js/public.js

+// 防抖
+export function _debounce(fn, delay) {
+
+    var delay = delay || 200;
+    var timer;
+    // console.log(fn)
+    return function () {
+        var that = this;
+        var args = arguments;
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(function () {
+            timer = null;
+            fn.apply(that, args);
+        }, delay);
+    };
+}
+// 节流
+export function _throttle(fn, interval) {
+    var last;
+    var timer;
+    var interval = interval || 200;
+    return function () {
+        var that = this;
+        var args = arguments;
+        var now = +new Date();
+        if (last && now - last < interval) {
+            clearTimeout(timer);
+            timer = setTimeout(function () {
+                last = now;
+                fn.apply(that, args);
+            }, interval);
+        } else {
+            last = now;
+            fn.apply(that, args);
+        }
+    }
+}

src/components/nav/nav.vue

@@ -4,7 +4,7 @@
       <template v-for="item in navpath">
         <template v-if="!!item.path">
           <!-- <el-breadcrumb-item :data-v="item.path" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item> -->
-          <el-breadcrumb-item :to="{ path: item.path }" @click="changeRoute(item.path)"><span class="el-breadcrumb__inner is-link" @click="changeRoute(item.path)">{{ item.name }}</span></el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: item.path }" @click="changeRoute(item.path, item.relocation)"><span class="el-breadcrumb__inner is-link" @click="changeRoute(item.path, item.relocation)">{{ item.name }}</span></el-breadcrumb-item>
         </template>
         <template v-else>
           <el-breadcrumb-item>{{ item.name }}</el-breadcrumb-item>
@@ -14,6 +14,9 @@
       <!-- :to="{ path: item.path}"-->
     </el-breadcrumb>
     <h1 class="navtitle">{{ navpath[navpath.length - 1].name }}</h1>
+    <div class="navmTop" v-if="subNavText">
+      {{subNavText}}
+    </div>
     <div class="navtip navmTop" v-if="navtip == true"><i class="el-icon-info navtipcolor"></i>变更导航个数，移动顺序，更换页面链接均需提交小程序审核后重新发布生效，其他变更立即生效。小程序审核请联系品牌项目经理。</div>
   </div>
 </template>
@@ -26,40 +29,44 @@
       name: "navpath",
       data() {
         return {
-          projectName: 'gic-clique', // 当前项目名
-          navpath: [
-            {
-              name: '首页',
-              path: ''
-            },
-            {
-              name: '',
-              path: ''
-            },
-            {
-              name: '',
-              path: ''
-            },
-
-          ],
+          projectName: 'member', // 当前项目名
+          // navpath: [
+          //   {
+          //     name: '首页',
+          //     path: ''
+          //   },
+          //   {
+          //     name: '会员标签',
+          //     path: ''
+          //   },
+
+          // ],
         }
       },
       props: {
-        // navpath: {
-        //   type: Array,
-        //   default: []
-        // },
+        navpath: {
+          type: Array,
+          default: []
+        },
         navtip: {
           type: Boolean,
           default: false
+        },
+        subNavText: {
+          type: String,
+          default: ''
         }
       },
       methods: {
 
-        changeRoute(path) {
+        changeRoute(path, relocation) {
           var that = this
-          console.log(path)
-          that.$router.push(path)
+          console.log(path, relocation);
+          if (relocation) {
+            window.location.href = path;
+          } else {
+            that.$router.push(path)
+          }
         },
         // get nav path
         getNavPath() {
@@ -130,7 +137,7 @@
       },
       mounted() {
         var that = this
-        that.getNavPath();
+        // that.getNavPath();
       }
 
     }
@@ -154,7 +161,7 @@
    margin: 24px 0 0 0;
    font-size: 20px;
    color: #303133;
-   font-weight:700;
+   font-weight: 500;
  }
   .navtip{
     width: 100%;

src/views/setting/companyAddress.vue

 <template>
-  <div class="companyAddress-wrap">
+  <div class="companyAddress-wrap common-set-wrap">
+    <nav-crumb :navpath="navpath"></nav-crumb>
+    <div class="right-content">
+      <div class="right-box">
+        <h2>企业地址设置</h2>
+        <p class="m-t-24">开启后手机端通讯录将显示,反之则不显示</p>
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+          <el-form-item label="企业地址" prop="switch">
+            <el-switch v-model="ruleForm.switch"></el-switch>
+          </el-form-item>
+          <el-form-item label=" " prop="name" class="">
+            <el-input v-model="ruleForm.name" placeholder="请输入地址" class="w-380"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
   </div>
 </template>
 <script>
+import navCrumb from '@/components/nav/nav.vue';
 
+import strLength from '@/common/js/strlen';
+import showMsg from '@/common/js/showmsg';
+import errMsg  from '@/common/js/error';
+import { _debounce } from "@/common/js/public";
+import { getRequest, postRequest, postJson, postForm } from '@/api/api';
 export default {
   name: "companyAddress",
   data() {
     return {
+      // 面包屑参数
+      navpath: [
+        {
+          name: '首页',
+          path: '/index',
+          relocation: true
+        },
+        {
+          name: '设置',
+          path: '/companyAddress'
+        },
+        {
+          name: '企业设置',
+          path: '/companyAddress'
+        },
+        {
+          name: '企业地址',
+          path: ''
+        }
+      ],
+
+      ruleForm: {
+        switch: false,
+        name: ''
+      },
+      rules: {}
 
     }
   },
@@ -15,14 +65,65 @@ export default {
 
   },
   methods: {
+    /**
+     * 保存
+     */
+    submitForm(formName) {
+      const that = this;
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+
+        } else {
+          return false;
+        }
+      });
+    },
+
+    /**
+     * 保存---api
+     */
+    postSave() {
+      const that = this;
+
+    }
 
   },
   mounted() {
 
   },
+  components: {
+    navCrumb
+  }
 }
 
 </script>
 <style lang="less" scoped>
+.right-content {
+  /*width: 100%;*/
+  padding: 24px;
+  min-height: calc(100% - 240px);
+
+  .right-box {
+    background: #fff;
+    padding: 24px;
+
+    h2 {
+      font-size: 16px;
+      color: #303133;
+    }
+
+    p {
+      font-size: 14px;
+      color: #909399;
+    }
 
+    .m-t-24 {
+      margin-top: 24px;
+    }
+
+    .w-380 {
+      width: 380px;
+    }
+  }
+}
 </style>

src/views/setting/companyCertify.vue

 <template>
-  <div class="companyCertify-wrap">
+  <div class="companyCertify-wrap common-set-wrap">
+
   </div>
 </template>
 <script>

src/views/setting/index.vue

@@ -2,7 +2,20 @@
   <div class="setting-wrap">
     <!-- 公共头部菜单插件 -->
     <vue-office-header :projectName="projectName" @collapseTag="collapseTag" @toRouterView="toRouterView"></vue-office-header>
-    <div class="review-wrap__body">
+    <div class="setting-wrap__body">
+      <div id="content" class="content">
+        <div class="content-body" :style="{height: contentHeight}">
+          <div class="left-menu" :style="{height: contentHeight}">
+            <vue-office-aside ref="asideMenu" :projectName="projectName"  :collapseFlag="collapseFlag"></vue-office-aside>
+          </div>
+          <transition name="fade" mode="out-in">
+            <!-- 缓存已经填好内容的页面 -->
+            <!-- <keep-alive include="editGroupGrade"> -->
+              <router-view></router-view>
+            <!-- </keep-alive > -->
+          </transition>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -12,7 +25,8 @@ export default {
   name: "setting",
   data() {
     return {
-      projectName: 'gic-clique', // 当前项目名
+      projectName: 'gic-clique',
+      contentHeight: '0px', //页面内容高度
       collapseFlag: false, // 折叠参数
     }
   },
@@ -43,11 +57,59 @@ export default {
     },
   },
   mounted() {
+    const that = this;
+    //获取项目名 pathname (路由的hash)
+    that.pathName = window.location.hash.split('/')[1];
+    console.log("pathname:",that.pathName,this.$route.path)
 
+    that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 +'px'
   },
 }
 
 </script>
 <style lang="less" scoped>
+.setting-wrap__body{
+  .content{
+    padding-top: 64px;
+   /* height: calc(100% - 64px);
+    overflow-y: auto;*/
+    min-width: 1400px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 
+    .content-body {
+      display: flex;
+      overflow: hidden;
+
+      .common-set-wrap {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+
+        .right-content {
+          /*width: 100%;*/
+          padding: 24px;
+          min-height: calc(100% - 240px);
+
+          .right-box {
+            background: #fff;
+            padding: 24px;
+          }
+        }
+      }
+    }
+  }
+}
+/*.content-body .left-menu {
+  -ms-flex: 0 0 200px;
+  flex: 0 0 200px;
+  width: 200px;
+  height: 100%;
+  background: #020b21;
+  transition: all .2s ease;
+  position: fixed;
+  z-index: 5;
+}*/
 </style>

src/views/setting/replaceAdmin.vue

 <template>
-  <div class="replaceAdmin-wrap">
+  <div class="replaceAdmin-wrap common-set-wrap">
+    <nav-crumb :navpath="navpath"></nav-crumb>
+    <div class="right-content">
+      <div class="right-box">
+        <el-steps :active="active" finish-status="success">
+          <el-step title="步骤 1"></el-step>
+          <el-step title="步骤 2"></el-step>
+          <el-step title="步骤 3"></el-step>
+        </el-steps>
+        <div class="w-514 replaceAdmin-wrap-form m-t-45">
+          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label="当前绑定账号" prop="name" class="">
+              <el-input v-model="ruleForm.name" disabled placeholder="" class="w-280"></el-input>
+            </el-form-item>
+            <el-form-item label="手机号" prop="phone" class="">
+              <el-input v-model="ruleForm.phone" disabled placeholder="" class="w-280"></el-input><el-button class="m-l-20 v-align-b" type="primary" @click="sendCode(ruleForm.phone)">获取验证码</el-button>
+            </el-form-item>
+            <el-form-item label="验证码" prop="code" class="">
+              <el-input v-model="ruleForm.code" placeholder="请输入验证码" class="w-280"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-
+import navCrumb from '@/components/nav/nav.vue';
 export default {
   name: "replaceAdmin",
   data() {
     return {
+      // 面包屑参数
+      navpath: [
+        {
+          name: '首页',
+          path: '/index',
+          relocation: true
+        },
+        {
+          name: '设置',
+          path: '/companyAddress'
+        },
+        {
+          name: '更换超级管理员',
+          path: ''
+        }
+
+      ],
+      subNavText: '更换超级管理员,需要先验证当前超级管理员身份',
+
+      active: 0,
 
+      ruleForm: {
+        name: '',
+        phone: 1334444444,
+        code: ''
+      },
+      rules: {}
     }
   },
   computed: {
 
   },
   methods: {
+    /**
+     * 保存
+     */
+    sendCode(phone) {
+      const that = this;
 
+    },
+    /**
+     * 保存
+     */
+    submitForm(formName) {
+      const that = this;
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (that.active++ > 2) that.active = 0;
+        } else {
+          return false;
+        }
+      });
+    },
   },
   mounted() {
 
   },
+  components: {
+    navCrumb
+  }
 }
 
 </script>
 <style lang="less" scoped>
+.right-content {
+  /*width: 100%;*/
+  padding: 24px;
+  min-height: calc(100% - 240px);
+
+  .right-box {
+    background: #fff;
+    padding: 24px;
+
+    .w-280 {
+      width: 280px;
+    }
+
+    .w-514 {
+      width: 514px;
+    }
+
+    .m-l-20 {
+      margin-left: 20px;
+    }
+
+    .m-t-45 {
+      margin-top: 45px;
+    }
+
+    .v-align-b {
+      vertical-align: bottom;
+    }
 
+    .text-center {
+      text-align: center;
+    }
+
+    .replaceAdmin-wrap-form {
+      margin: 45px auto 0;
+    }
+  }
+}
 </style>

src/views/setting/setChildAdmin.vue

 <template>
-  <div class="setChildAdmin-wrap">
+  <div class="setChildAdmin-wrap common-set-wrap">
+
   </div>
 </template>
 <script>

src/views/setting/staffDetails.vue

 <template>
-  <div class="staffDetails-wrap">
+  <div class="staffDetails-wrap common-set-wrap">
   </div>
 </template>
 <script>

src/views/setting/storePermission.vue

 <template>
-  <div class="storePermission-wrap">
+  <div class="storePermission-wrap common-set-wrap">
   </div>
 </template>
 <script>