Browse Source

'品牌管理及页面布局调整'

zhangyu 4 years ago
parent
commit
0ad3a9626d

+ 7 - 19
src/components/brand/brandTool.vue

@@ -2,7 +2,7 @@
  * @Author: zhangyu
  * @Date: 2020-05-08 18:37:31
  * @Info:
- * @LastEditTime: 2020-05-11 09:49:46
+ * @LastEditTime: 2020-05-12 19:36:27
  -->
 <template>
   <div class="saga-toolbar-box">
@@ -20,31 +20,19 @@
         <span>7</span>个
       </div>
       <span style="float: right;">
-        <el-input
-          v-model="value"
-          style="width: 360px;"
-          placeholder="请输入关键词/拼音/首字母"
-          class="reset-input"
-        >
-          <i slot="prefix" class="el-input__icon el-icon-search"></i>
-        </el-input>
-         <el-button type="primary" @click="handBrand">添加产品</el-button>
-          </span>
+         <el-button type="primary" @click="handBrand">添加品牌</el-button>
+      </span>
     </div>
-    <addBrand ref="addBrand" title="添加品牌"></addBrand>
-
   </div>
 </template>
 
 <script>
-  import addBrand from "../../components/business/addBrand";
-
   export default {
     created() {
     },
     mounted() {
     },
-    components: {addBrand},
+    components: {},
     data() {
       return {
         value:''
@@ -52,7 +40,7 @@
     },
     methods: {
       handBrand() {
-        this.$refs.addBrand.outerVisible = true
+        this.$emit("addbrand")
       },
     }
   }
@@ -60,12 +48,12 @@
 <style lang="scss" scoped>
   .saga-toolbar-box {
     position: absolute;
-    top: 0;
+    top: 48px;
     left: 0;
     width: 100%;
     height: 70px;
     background: #fff;
-    z-index: 11;
+    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
 
     .saga-toolbar-main {
       width: 1200px;

+ 102 - 5
src/components/brand/sagaBrand.vue

@@ -2,7 +2,7 @@
  * @Author: zhangyu
  * @Date: 2020-05-08 16:06:03
  * @Info: 
- * @LastEditTime: 2020-05-11 17:37:25
+ * @LastEditTime: 2020-05-12 19:31:47
  -->
 <template>
   <div class="saga-brand-box" ref="brandBox">
@@ -15,8 +15,15 @@
           <el-dropdown-item v-for="(val, key) in sortMap" :key="key" :command="key">{{val}}</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
+      <el-input
+        placeholder="请输入品牌关键字(Enter检索)"
+        style="float: right;width: 240px;"
+        @keyup.enter.native="ChangeKeyWord(keyWord)"
+        v-model="keyWord">
+        <i slot="prefix" class="el-input__icon el-icon-search" style="cursor:pointer;" @click="ChangeKeyWord(keyWord)"></i>
+      </el-input>
     </div>
-    <div v-for="(list, letter) in brandList" :key="letter" class="saga-brand-group">
+    <div v-for="(list, letter) in brandList" :key="letter" v-show="list.length" class="saga-brand-group">
       <h3 class="saga-brand-letter">{{letter}}</h3>
       <ul class="saga-brand-list">
         <li class="saga-brand-item" :class="{ 'brand-new': item.new, item1200: boxWidth == 1200, item980: boxWidth == 980}" v-for="item in list" :key="item.id" :title="item.zhName">
@@ -34,6 +41,18 @@
         </li>
       </ul>
     </div>
+    <ul class="saga-letter-ul" :style="`transform:translate(${boxWidth+4}px,0)`" @click.stop="handleClickLetter">
+      <li
+        v-for="(list, letter, index) in brandList" 
+        v-show="list.length"
+        :key="`nav-${letter}`"
+        :data-index="index"
+        class="saga-letter-li"
+        :class="{ 'active': index == stepActive}"
+        :title="letter">
+        {{letter}}
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -46,6 +65,8 @@ export default {
   },
   mounted() {
     this.boxWidth = this.$refs.brandBox.clientWidth
+    let listener = document.querySelector('.page-content-scroll')
+    listener.addEventListener('scroll', this.onScroll)
   },
   data() {
     return {
@@ -56,11 +77,64 @@ export default {
       sort: "中文排序",
       brandList: {},
       boxWidth: 0,
+      stepActive: 0, //锚点
+      keyWord: "", //检索关键字
     }
   },
   methods: {
-    handleCommand(command) {
+    handleCommand(command) {// 切换排序方式
       this.sort = this.sortMap[command]
+    },
+    ChangeKeyWord(keyWord) {// 品牌检索
+      debugger
+    },
+    handleClickLetter(e) {
+      let index = e.target.dataset.index
+      if (index) {
+        this.stepActive = index
+        let jump = document.querySelectorAll('.saga-brand-group'),
+          total = jump[index].offsetTop - 127,// 获取需要滚动的距离
+          listener = document.querySelector('.page-content-scroll'),
+          distance = listener.scrollTop,
+          step = total / 50;
+        if (total > distance) {
+          smoothDown()
+        } else {
+          let newTotal = distance - total + 100
+          step = newTotal / 50
+          smoothUp()
+        }
+
+        function smoothDown() {
+          if (distance < total) {
+            distance += step
+            listener.scrollTop = distance
+            setTimeout(smoothDown, 10)
+          } else {
+            listener.scrollTop = total
+          }
+        }
+
+        function smoothUp() {
+          if (distance > total) {
+            distance -= step
+            listener.scrollTop = distance
+            setTimeout(smoothUp, 10)
+          } else {
+            listener.scrollTop = total
+          }
+        }
+      }
+    },
+    onScroll() {
+      let scrolled = document.querySelector('.page-content-scroll').scrollTop
+      let jump = document.querySelectorAll('.saga-brand-group')
+      for (let i = 0; i < jump.length; i++) {
+        if ((jump[i].offsetTop - 127) >= scrolled) {
+          this.stepActive = i
+          break
+        }
+      }
     }
   }
 }
@@ -68,7 +142,7 @@ export default {
 <style lang="scss" scoped>
   .saga-brand-box {
     width: 100%;
-    margin-top: 90px;
+    height: 100%;
     padding: 16px;
     box-sizing: border-box;
     background: rgba(255,255,255,1);
@@ -146,8 +220,8 @@ export default {
           border:1px solid rgba(58,141,222,0.6);
         }
         .saga-brand-item:hover {
+          box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
           transform: translate(0,-5px);
-          box-shadow:0px 10px 20px -3px rgba(228,229,231,0.7);
         }
         .item1200 {
           width:224px;
@@ -163,6 +237,29 @@ export default {
         }
       }
     }
+    .saga-letter-ul {
+      position: fixed;
+      top: 196px;
+      .saga-letter-li {
+        width:20px;
+        height:20px;
+        margin-bottom: 2px;
+        text-align: center;
+        line-height: 20px;
+        font-size: 12px;
+        cursor: pointer;
+        color: #8D9399;
+        background: #EEEEEE;
+      }
+      .saga-letter-li.active {
+        color: #3A8DDE;
+        background: #D1E3F4;
+      }
+      .saga-letter-li:hover {
+        color: #3A8DDE;
+        background: #D1E3F4;
+      }
+    }
   }
   /deep/ .el-dropdown-link {
     cursor: pointer;

+ 6 - 10
src/components/product/productTool.vue

@@ -17,23 +17,18 @@
            >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
-              <el-button type="primary" @click="handBrand">添加产品</el-button>
+              <el-button type="primary" @click="handProduct">添加产品</el-button>
 
           </span>
     </div>
-
-
-    <addBrand ref="addBrand" title="添加品牌"></addBrand>
-
   </div>
 </template>
 
 <script>
   import selectTree from "../../components/public/selectTree";
-  import addBrand from "../../components/business/addBrand";
 
   export default {
-    components: {selectTree, addBrand},
+    components: {selectTree},
 
     created() {
     },
@@ -67,8 +62,8 @@
       }
     },
     methods: {
-      handBrand() {
-        this.$refs.addBrand.outerVisible = true
+      handProduct() {
+        //跳转添加产品的路由
       },
       // 取值
       getValue(value) {
@@ -92,11 +87,12 @@
 <style lang="scss" scoped>
   .saga-toolbar-box {
     position: absolute;
-    top: 0;
+    top: 48px;
     left: 0;
     width: 100%;
     height: 70px;
     background: #fff;
+    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
     z-index: 11;
 
     .saga-toolbar-main {

+ 9 - 5
src/components/product/sagaProduct.vue

@@ -52,15 +52,19 @@
       </div>
     </div>
     <div class="brand">
-
+      <saga-brand></saga-brand>
     </div>
   </div>
 </template>
 
 <script>
-  export default {
-    name: "productBrand"
-  }
+import sagaBrand from "@/components/brand/sagaBrand"
+export default {
+  name: "productBrand",
+  components: {
+    sagaBrand,
+  },
+}
 </script>
 
 <style scoped lang="less">
@@ -133,10 +137,10 @@
     }
 
     .brand {
+      width: 980px;
       margin-left: 20px;
       background: @bgc;
       flex-grow: 1;
-
     }
   }
 </style>

+ 2 - 1
src/data/brandList.js

@@ -2,7 +2,7 @@
  * @Author: zhangyu
  * @Date: 2020-05-09 16:02:06
  * @Info: 
- * @LastEditTime: 2020-05-11 17:37:08
+ * @LastEditTime: 2020-05-12 12:33:24
  */
 export default {
   A: [
@@ -378,4 +378,5 @@ export default {
       logoUrl: ""
     },
   ],
+  '#': []
 }

+ 13 - 11
src/framework/layout/Main.vue

@@ -7,14 +7,14 @@
         <router-view class='page-content'></router-view>
       </div>
       <!-- 其他路由页 -->
-      <el-scrollbar v-else style="height:calc(100% - 48px);margin-top: 48px;">
+      <div v-else class="page-content-scroll">
         <div class='page-content-wrapper'>
           <keep-alive>
             <router-view v-if='$route.meta.keepAlive' class='page-content'></router-view>
           </keep-alive>
           <router-view v-if='!$route.meta.keepAlive' class='page-content'></router-view>
         </div>
-      </el-scrollbar>
+      </div>
     </div>
   </div>
 </template>
@@ -82,16 +82,18 @@ export default {
       height: 100%;
       min-height: auto;
       box-sizing: border-box;
-      .page-content-wrapper {
-        width: 1200px;
-        padding: 0;
-        margin: 0 auto;
-        box-sizing: border-box;
-        height: 100%;
+      .page-content-scroll {
+        height: calc(100% - 48px);
+        margin-top: 48px;
+        overflow-y: auto;
+        .page-content-wrapper {
+          width: 1200px;
+          padding: 0;
+          margin: 0 auto;
+          box-sizing: border-box;
+          height: 100%;
+        }
       }
     }
   }
-  /deep/ .el-scrollbar__wrap {
-    overflow-x: hidden;
-  }
 </style>

+ 27 - 0
src/framework/style/reset.scss

@@ -62,4 +62,31 @@ q:before, q:after {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
+}
+
+/*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb{
+	height:50px;
+	outline-offset:-2px;
+	outline:2px solid #dddee0;
+	border: 2px solid #dddee0;
+	background-color: #dddee0;
+	border-radius: 4px;
+}
+
+/*---鼠标点击滚动条显示样式--*/
+::-webkit-scrollbar-thumb:hover{
+	height:50px;
+}
+
+
+/*---滚动条大小--*/
+::-webkit-scrollbar{
+	width:8px;
+	height:8px;
+}
+
+/*---滚动框背景样式--*/
+::-webkit-scrollbar-track-piece{
+	
 }

+ 14 - 5
src/views/brand/index.vue

@@ -2,23 +2,28 @@
  * @Author: zhangyu
  * @Date: 2020-05-08 15:55:30
  * @Info:
- * @LastEditTime: 2020-05-08 16:49:36
+ * @LastEditTime: 2020-05-12 19:27:07
  -->
 <template>
   <div>
-    <saga-toolbar></saga-toolbar>
-    <saga-brand></saga-brand>
+    <saga-toolbar @addbrand="handleAddBrand"></saga-toolbar>
+    <div style="margin-top: 90px;">
+      <saga-brand></saga-brand>
+    </div>
+    <addBrand ref="addBrand" title="添加品牌"></addBrand>
   </div>
 </template>
 
 <script>
 import sagaBrand from "@/components/brand/sagaBrand"
 import sagaToolbar from "@/components/brand/brandTool"
+import addBrand from "../../components/business/addBrand";
 export default {
   name: "brand",
   components: {
     sagaBrand,
-    sagaToolbar
+    sagaToolbar,
+    addBrand
   },
   created() {},
   mounted() {},
@@ -26,7 +31,11 @@ export default {
     return {
     }
   },
-  methods: {}
+  methods: {
+    handleAddBrand() {
+      this.$refs.addBrand.outerVisible = true
+    },
+  }
 }
 </script>
 <style lang="scss" scoped>