添加商品结构梳理，楼层效果

src/views/system/goods/add/addIndex.vue

-<template>
-  <div>
-    <p>hi，你好</p>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "AddIndex",
-    data() {
-      return {}
-    }
-  }
-</script>
-
-<style lang="scss" type="text/stylus" scoped>
-
-</style>

src/views/system/goods/add/index.vue

 <template>
   <div class="app-container">
-    <el-card class="box-card">
+    <!-- 选择商品类目 start -->
+    <el-card class="box-card" v-if="!isShowGoodsDetails">
       <div slot="header" class="clearfix">
         <p class="card-header-title"><span class="blue-block-goods"></span>确认商品所在目录</p>
       </div>
@@ -9,22 +10,66 @@
           <p class="goods-type-tip">为商品设置正确的类目，能让商品快速的被搜索到</p>
         </div>
         <div class="goods-type-options" v-loading="loading">
-          <el-cascader-panel v-model="SSQList" :props='props' @change="SSQChange" ref="hxz"></el-cascader-panel>
+          <el-cascader-panel v-model="SSQList" :props='props' @change="SSQChange" ref="ssqCascader" @blur="handleAddressFun"></el-cascader-panel>
         </div>
         <el-button type="primary" class="next-step" :disabled="isNextStep" @click="nextStep">下一步</el-button>
       </div>
+    </el-card>
+    <!-- 选择商品类目  end  -->
+    <!-- 添加商品 start -->
+    <el-card class="box-card good-details-body" v-show="isShowGoodsDetails">
+      <div class="floor-nav" id="floorNavList" :class="{'is-fixed': isFixed}">
+        <ul class="nav-list">
+          <li class="nav-list-item" :class="{'floor-item-active': isFIActive === index}" v-for="(item, index) in floorNav" :key="item.id" @click="setFloorNavMountClick(index)">{{ item.name }}</li>
+        </ul>
+      </div>
+      <div class="floor-cont" ref="scrollview">
+        <div class="floor-item">
+          <div class="floor-item-box">
+            <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品信息</p>
+            <Goodsinfomation ref="GoodsInfo" :goodsinfodata='goodsinfodata'/>
+          </div>
+        </div>
 
+        <div class="floor-item">
+          <div class="floor-item-box">
+            <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品规格</p>
+          </div>
+        </div>
+        <div class="floor-item">
+          <div class="floor-item-box">
+            <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品售价</p>
+          </div>
+        </div>
+        <div class="floor-item">
+          <div class="floor-item-box">
+            <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品详情</p>
+          </div>
+        </div>
+        <div class="floor-item">
+          <div class="floor-item-box">
+            <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>售后及服务</p>
+          </div>
+        </div>
+      </div>
+      <div class="submit-cont">
+        <el-button type="primary" style="padding: 10px 30px;">提 交</el-button>
+      </div>
     </el-card>
+    <!-- 添加商品  end  -->
   </div>
 </template>
 
 <script>
   import { getAreaList } from '@/api/module/retreat/address';
+  import Goodsinfomation from './components/goodsinfomation'
+  let TIMER = null;
   export default {
     data() {
       return {
         loading: false,
         SSQList: [], // 省市区
+        SSQStr: '', // 省市区 拼接
         props: {
           expandTrigger: 'click',
           lazy: true,
@@ -33,12 +78,33 @@
           label: 'name',
           leaf: 'leaf'
         },
-        isNextStep: true
+        isNextStep: true,
+        isFixed: false,
+        scrollHeight: 0,
+        isShowGoodsDetails: false,
+        isFIActive: 0,
+        /**/
+        floorNav: [ // 自定义左侧楼层数
+          { id: 1, name: '商品信息' },
+          { id: 2, name: '商品规格' },
+          { id: 3, name: '商品售价' },
+          { id: 4, name: '商品详情' },
+          { id: 5, name: '售后及服务' },
+        ],
+        /* 商品信息 */
+        goodsinfodata: {}
       }
     },
+    components: {
+      Goodsinfomation,
+    },
     created() {
 
     },
+    mounted() {
+
+    },
+
     methods: {
       // 只有点击完最后一级，才会有值
       SSQChange() {
@@ -51,6 +117,7 @@
       },
       lazyLoad(node, resolve) {
         this.SSQList = [];
+        this.SSQStr = '';
         this.getArea(node, resolve);
         if(this.SSQList && this.SSQList.length > 0) {
           this.isNextStep = false
@@ -72,7 +139,9 @@
         }
         this.loading = true;
         getAreaList(limboNode).then(res => {
+
           let result = {};
+         // debugger
           if (level === 0) {
             result = res.data
             result.forEach(item => {
@@ -108,12 +177,75 @@
           this.loading = false;
         });
       },
-
+      // handleAddressFun: function(e,form,this.ssqStr){
+      //   // thsAreaCode = this.form.areaCode    // 注意1：获取value值
+      //   thsAreaCode = this.$refs['ssqCascader'].currentLabels    //注意2： 获取label值
+      //   console.log(thsAreaCode)  // 注意3： 最终结果是个一维数组对象
+      //
+      // },
       nextStep() {
         // 注意数据格式 [1,2,3] 数组，且里面是数字类型
-        console.log(111,this.SSQList);
-      }
-    }
+        // let a1 = []
+        // a1.push(this.SSQList[0]);
+        //let fuck1 = this.$refs['ssqCascader'].getCheckedNodes(this.SSQList)
+        // console.log(111,this.SSQList);
+        //console.log(222,fuck1);
+        this.isShowGoodsDetails = true;
+      },
+
+      /*  添加商品详细 */
+      /* 设置楼层导航事件驱动方法* @params Number index  楼层下标 */
+      setFloorNavMountClick(index) {
+        let _this = this
+        this.isFIActive = index;
+        let floor_item = document.getElementsByClassName('floor-item'),
+          floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop,
+          window_scrollTop = this.$refs.scrollview.scrollTop,
+          timer = {
+            step: 50,
+            times: 15,
+            FLOOR_OFFSETTOP: floor_offsetTop
+          }
+        if (window_scrollTop > floor_offsetTop) {
+          _this.setFloorScrollArrowUp(timer)
+        } else if (window_scrollTop == floor_offsetTop) {
+          return false
+        } else {
+          _this.setFloorScrollArrowDown(timer)
+        }
+      },
+
+      /* 设置楼层向上滚动* @params Object timer 定时器配置 */
+      setFloorScrollArrowUp(timer) {
+        //debugger
+        let _this = this
+        clearInterval(TIMER)
+        TIMER = setInterval(() => {
+          const window_scrollTop = this.$refs.scrollview.scrollTop
+          if (window_scrollTop <= timer.FLOOR_OFFSETTOP) {
+            this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
+            clearInterval(TIMER)
+          } else {
+            this.$refs.scrollview.scrollTop = window_scrollTop - timer.step
+          }
+        }, timer.times)
+      },
+      /* 设置楼层向下滚动@params Object timer 定时器配置 */
+      setFloorScrollArrowDown(timer) {
+        let _this = this
+        clearInterval(TIMER)
+        TIMER = setInterval(() => {
+          const window_scrollTop = this.$refs.scrollview.scrollTop
+          if (window_scrollTop >= timer.FLOOR_OFFSETTOP) {
+            this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP
+            clearInterval(TIMER)
+          } else {
+            this.$refs.scrollview.scrollTop = window_scrollTop + timer.step
+          }
+        }, timer.times)
+      },
+
+    } // methods end
   }
 </script>
 
@@ -128,14 +260,14 @@
     flex-direction: row;
     justify-content: start;
     align-items: center;
-    font-size: 20px;
+    font-size: 18px;
     color: #333;
     font-weight: 400;
     height: 24px;
   }
   .blue-block-goods {
     width: 5px;
-    height: 20px;
+    height: 24px;
     background: #3A84FF;
     margin: 0 7px 0 0;
     border-radius: 2px;
@@ -181,4 +313,70 @@
     margin: 0 auto;
     display: block;
   }
+
+  /* 电梯效果 样式 */
+  .floor-nav {
+    width: 100%;
+  }
+  .floor-nav .nav-list {
+    padding: 0;
+    margin:0;
+    display: flex;
+    justify-content: start;
+    flex-direction: row;
+    border-bottom:1px solid #eee;
+  }
+  .floor-nav .nav-list .nav-list-item {
+    font-size: 18px;
+    font-weight: 400;
+    color: #333333;
+    padding: 0 25px 15px;
+    list-style: none;
+    vertical-align: middle;
+    align-self: center;
+    border-bottom: 2px solid #fff;
+    cursor: pointer;
+  }
+  .floor-nav .nav-list .floor-item-active,
+  .floor-nav .nav-list .nav-list-item:hover {
+    color: #3A84FF;
+    font-weight: bold;
+    border-bottom: 2px solid #3A84FF;
+  }
+
+  .floor-item-box-title {
+    background: #F1F1F6;
+    height: 45px;
+  }
+  .blue-block-goods-title {
+    margin: 0 20px 0 0;
+  }
+  /deep/.good-details-body .el-card__body  {
+    height: 100%;
+    padding: 15px 20px 0px 20px;
+    overflow: hidden;
+  }
+
+  .floor-cont{
+    height: calc(100% - 98px);
+    overflow: auto;
+  }
+
+  .floor-item {
+    padding: 0 20px 0 0;
+    margin: 15px auto;
+    min-height: 300px;
+    color: #333;
+  }
+  .submit-cont {
+    width: calc(100% + 40px);
+    padding: 12px 0 8px;
+    margin-left: -20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    /*align-content: center;*/
+    box-shadow: 0px -8px 9px 1px rgba(51, 51, 51, 0.06);
+  }
 </style>