|
@@ -2,14 +2,14 @@
|
|
|
* @Author: zhangyu
|
|
|
* @Date: 2020-05-08 16:06:03
|
|
|
* @Info:
|
|
|
- * @LastEditTime: 2020-05-12 19:31:47
|
|
|
+ * @LastEditTime: 2020-05-13 18:45:02
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="saga-brand-box" ref="brandBox">
|
|
|
<div class="saga-brand-header">
|
|
|
<el-dropdown @command="handleCommand" style="line-height: 40px;">
|
|
|
<span class="el-dropdown-link">
|
|
|
- {{sort}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ {{sortName}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</span>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item v-for="(val, key) in sortMap" :key="key" :command="key">{{val}}</el-dropdown-item>
|
|
@@ -26,19 +26,20 @@
|
|
|
<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,index) in list"
|
|
|
- :key="item.id"
|
|
|
- :title="item.BrandCname"
|
|
|
- @click="brandDetail(item)"
|
|
|
+ <li
|
|
|
+ class="saga-brand-item"
|
|
|
+ :class="{ 'brand-new': item.new, item1200: boxWidth == 1200, item980: boxWidth == 980}"
|
|
|
+ v-for="item in list"
|
|
|
+ :key="item.BrandID"
|
|
|
+ :title="item.BrandCname"
|
|
|
+ @click="handleClickBrand(item)"
|
|
|
>
|
|
|
<div class="saga-brand-name">
|
|
|
<p class="saga-brand-zhName">{{item.BrandCname}}</p>
|
|
|
- <p class="saga-brand-enName" :title="item.enName">{{item.BrandName}}</p>
|
|
|
+ <p class="saga-brand-enName" :title="item.BrandName">{{item.BrandName}}</p>
|
|
|
</div>
|
|
|
<div class="saga-brand-logo">
|
|
|
- <el-image style="width: 52px; height: 52px" :src="item.logoUrl" fit="fill">
|
|
|
+ <el-image style="width: 52px; height: 52px" :src="item.BrandLogo" fit="fill">
|
|
|
<div slot="error" class="image-slot">
|
|
|
<i class="el-icon-picture-outline"></i>
|
|
|
</div>
|
|
@@ -63,91 +64,113 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import brandList from "@/data/brandList"
|
|
|
-
|
|
|
- export default {
|
|
|
- components: {},
|
|
|
- created() {
|
|
|
- this.brandList = brandList
|
|
|
+import { brandQuery } from "@/api/brand"
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ created() {
|
|
|
+ // this.brandList = brandList
|
|
|
+ this.getBrandData({});
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.boxWidth = this.$refs.brandBox.clientWidth
|
|
|
+ let listener = document.querySelector('.page-content-scroll')
|
|
|
+ listener.addEventListener('scroll', this.onScroll)
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ pageType: {
|
|
|
+ type: String,
|
|
|
+ default: 'brand'
|
|
|
+ }, //页面类型(brand/product)
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sortMap: {
|
|
|
+ zh: "中文排序",
|
|
|
+ en: "英文排序",
|
|
|
+ },
|
|
|
+ sortName: "中文排序",
|
|
|
+ sort: "zh",
|
|
|
+ brandList: {},
|
|
|
+ boxWidth: 0,
|
|
|
+ stepActive: 0, //锚点
|
|
|
+ keyWord: "", //检索关键字
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCommand(command) { //切换排序方式
|
|
|
+ this.sortName = this.sortMap[command]
|
|
|
+ this.sort = command
|
|
|
+ this.getBrandData({Type: this.sort})
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.boxWidth = this.$refs.brandBox.clientWidth
|
|
|
- let listener = document.querySelector('.page-content-scroll')
|
|
|
- listener.addEventListener('scroll', this.onScroll)
|
|
|
+ ChangeKeyWord(keyWord) { //品牌检索
|
|
|
+ let params = {
|
|
|
+ Filters: `BrandCname contain '${keyWord}' || BrandName contain '${keyWord}'`,
|
|
|
+ Type: this.sort
|
|
|
+ }
|
|
|
+ this.getBrandData(params)
|
|
|
+ },
|
|
|
+ getBrandData(params) { //获取品牌接口
|
|
|
+ brandQuery(params, res => {
|
|
|
+ this.brandList = res.Content[0]
|
|
|
+ })
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- sortMap: {
|
|
|
- zh: "中文排序",
|
|
|
- en: "英文排序",
|
|
|
- },
|
|
|
- sort: "中文排序",
|
|
|
- brandList: {},
|
|
|
- boxWidth: 0,
|
|
|
- stepActive: 0, //锚点
|
|
|
- keyWord: "", //检索关键字
|
|
|
+ handleClickBrand(brand) { //点击品牌
|
|
|
+ if (this.pageType == 'brand') { //调用修改产品弹窗
|
|
|
+ this.$emit("updatebrand", brand)
|
|
|
+ } else {
|
|
|
+ console.log('跳转到产品页面')
|
|
|
+ this.$router.push({path: 'brand/brandDetail', query: {id: item.id, name: item.BrandCname, productId: '3'}})
|
|
|
}
|
|
|
},
|
|
|
- methods: {
|
|
|
- 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()
|
|
|
- }
|
|
|
+ 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 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
|
|
|
- }
|
|
|
+ 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
|
|
|
- }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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
|
|
|
}
|
|
|
- },
|
|
|
- brandDetail(item) {
|
|
|
- this.$router.push({path: 'brand/brandDetail', query: {id: item.id, name: item.BrandCname, productId: '3'}})
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|