|
@@ -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;
|