code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-19 09:25:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 10:56:04 +08:00
commit ec3e958037
728 changed files with 132685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

708
buyer/src/components/nav/GoodsClassNav.vue Normal file
View File

@@ -0,0 +1,708 @@
<template>
<div class="item-class-show">
<div class="head-bar">
<!-- 有商品分类展示商品分类 -->
<template v-if="$route.query.categoryId">
<!-- 头部展示筛选信息 -->
<div @click="cateClick(tabBar,1)">{{ tabBar.name }}</div>
<Icon type="ios-arrow-forward" />
<div class="bar" v-if="tabBar.first">
{{ tabBar.first.name }} <Icon type="ios-arrow-down" />
<ul>
<li v-for="item in tabBar.children" :key="item.id" @click="cateClick(item,2)">
{{ item.name }}
</li>
</ul>
</div>
<Icon type="ios-arrow-forward" v-if="tabBar.first" />
<div class="bar" v-if="tabBar.second">
{{ tabBar.second.name }} <Icon type="ios-arrow-down" />
<ul>
<li v-for="item in tabBar.first.children" :key="item.id" @click="cateClick(item,3)">
{{ item.name }}
</li>
</ul>
</div>
<Icon type="ios-arrow-forward" v-if="tabBar.second" />
</template>
<!-- 无商品分类，展示搜索结果 -->
<template v-else>
<div style="font-size:14px">全部结果</div>
<Icon type="ios-arrow-forward" />
<div>{{params.keyword}}</div>
</template>
<!-- 所选分类 -->
<a
class="selected-item"
@click="cancelSelected(item, index)"
v-for="(item, index) in selectedItem"
:key="index"
:title="item.name"
>
<span>{{ item.type }}：</span><span>{{ item.name }}</span
><Icon type="md-close" />
</a>
</div>
<!-- 筛选主体 -->
<div class="content">
<!-- 品牌， 有图片，独立出来 -->
<div class="brand" v-show="tagsContent[0].show && tagsContent[0].values.length">
<div>
<strong>{{ tagsContent[0].key }}：</strong>
</div>
<div>
<ul :class="{ 'show-more': tagsContent[0].more }">
<li
@click="selectBrand(item.name, 0)"
:class="{ 'border-color': multSelected.includes(item) }"
v-for="(item, index) in tagsContent[0].values"
:key="index"
>
<img :src="item.url" alt="" /><span>{{ item.name }}</span>
<div
class="corner-icon"
v-show="multSelected.includes(item.name)"
>
<div></div>
<Icon type="md-checkmark" />
</div>
</li>
</ul>
<div class="btn" v-show="multiple !== 0">
<span @click="moreBrand(0)"
>{{ tagsContent[0].more ? "收起" : "更多"
}}<Icon
:type="tagsContent[0].more ? 'ios-arrow-up' : 'ios-arrow-down'"
/></span>
<span @click="multSelectBrand(0)"><Icon type="md-add" />多选</span>
</div>
<div class="multBtn" v-show="multiple === 0">
<Button
type="primary"
size="small"
:disabled="!multSelected.length"
@click="sure(0)"
>确定</Button
>
<Button size="small" @click="cancel">取消</Button>
</div>
</div>
</div>
<!-- 其他筛选项 -->
<template v-for="(tag, tagIndex) in tagsContent">
<div class="other" v-if="tag.show && tagIndex !== 0" :key="tagIndex">
<div>
<strong>{{ tag.key }}：</strong>
</div>
<div>
<ul
:class="{ 'show-more': tag.more }"
class="list"
v-show="multiple !== tagIndex"
>
<li
@click="selectBrand(item, tagIndex)"
class="item"
v-for="(item, index) in tag.values"
:key="index"
>
{{ item }}
</li>
</ul>
<CheckboxGroup
:class="{ 'show-more': tag.more }"
class="list"
v-model="multSelected"
v-show="multiple === tagIndex"
>
<Checkbox
class="item"
:label="item"
v-for="(item, index) in tag.values"
:key="index"
>{{ item }}</Checkbox
>
</CheckboxGroup>
<div class="btn" v-show="multiple !== tagIndex">
<span @click="moreBrand(tagIndex)" v-show="tag.values.length > 9"
>{{ tag.more ? "收起" : "更多"
}}<Icon :type="tag.more ? 'ios-arrow-up' : 'ios-arrow-down'"
/></span>
<span @click="multSelectBrand(tagIndex)"
><Icon type="md-add" />多选</span
>
</div>
<div class="multBtn" v-show="multiple === tagIndex">
<Button
type="primary"
size="small"
:disabled="!multSelected.length"
@click="sure(tagIndex)"
>确定</Button
>
<Button size="small" @click="cancel">取消</Button>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script>
import * as APIGoods from '@/api/goods';
export default {
name: 'GoodsClassNav',
data () {
return {
tabBar: { // 分类数据
name: '',
first: {},
second: {}
},
multiple: false, // 多选
tagsContent: [
// 标签
{
key: '品牌',
more: false,
show: true,
values: []
}
],
multSelected: [], // 多选分类
selectedItem: [], // 已选分类集合 顶部展示
brandIds: [], // 品牌id合集
params: {}, // 请求参数
cateList: [] // 全部商品分类
};
},
watch: {
selectedItem: {
// 监听已选条件，来调用列表接口
handler (val) {
let classification = [];
if (val.length) {
val.forEach((item) => {
if (item.type === '品牌') {
this.params.brandId = this.brandIds.join('@');
} else {
const nameArr = item.name.split('、');
nameArr.forEach((name) => {
classification.push(item.type + '_' + name);
});
}
});
this.params.prop = classification.join('@');
} else {
this.params.prop = ''
this.params.brandId = ''
}
this.getFilterList(this.params);
this.$emit('getParams', this.params);
},
deep: true
},
'$route': {
handler (val, oVal) {
if (this.$route.query.categoryId) {
let cateId = this.$route.query.categoryId.split(',')
Object.assign(this.params, this.$route.query)
this.params.categoryId = cateId[cateId.length - 1]
} else {
Object.assign(this.params, this.$route.query)
}
this.getFilterList(this.params)
this.getNav()
},
deep: true
}
},
methods: {
getNav () { // 获取商品分类，分类下展示
if (!this.$route.query.categoryId) return
this.cateList = JSON.parse(localStorage.getItem('category'))
const arr = this.$route.query.categoryId.split(',')
if (arr.length > 0) {
this.tabBar = this.cateList.filter(e => {
return e.id === arr[0]
})[0]
}
if (arr.length > 1) {
const first = this.tabBar.children.filter(e => {
return e.id === arr[1]
})[0]
this.$set(this.tabBar, 'first', first)
}
if (arr.length > 2) {
const second = this.tabBar.first.children.filter(e => {
return e.id === arr[2]
})[0]
this.$set(this.tabBar, 'second', second)
}
},
cateClick (item, index) {
switch (index) {
case 1:
this.$router.push({
path: '/goodsList',
query: {categoryId: item.id}
})
break;
case 2:
this.$router.push({
path: '/goodsList',
query: {categoryId: [item.parentId, item.id].toString()}
})
break;
case 3:
this.$router.push({
path: '/goodsList',
query: {categoryId: [this.tabBar.id, item.parentId, item.id].toString()}
})
break;
}
},
selectBrand (item, index) {
// 选择筛选项
if (this.multiple !== false) {
// 非多选直接在顶部栏展示，多选则添加选择状态
let key = this.multSelected.indexOf(item);
if (key > -1) {
this.multSelected.splice(key, 1);
} else {
this.multSelected.push(item);
}
} else {
this.selectedItem.push({
type: this.tagsContent[index].key,
name: item
});
this.tagsContent[index].show = false;
if (index === 0) {
// 如果是品牌，获取品牌id
let brands = this.tagsContent[0].values;
brands.forEach((val) => {
if (val.name === item) this.brandIds.push(val.value);
console.log(this.brandIds);
});
}
}
},
cancelSelected (item, index) {
// 顶部栏 取消已选中的项
this.selectedItem.splice(index, 1);
this.tagsContent.forEach((tag, index) => {
if (tag.key === item.type) {
tag.show = true;
tag.more = false;
}
});
if (item.type === '品牌') {
this.brandIds = [];
}
},
moreBrand (index) {
// 更多按钮
const flag = !this.tagsContent[index].more
this.$set(this.tagsContent[index], 'more', flag)
},
multSelectBrand (index) {
// 多选按钮
this.$set(this.tagsContent[index], 'more', true)
this.multiple = index;
},
sure (index) {
// 多选确认按钮
this.selectedItem.push({
type: this.tagsContent[index].key,
name: this.multSelected.join('、')
});
if (index === 0) {
// 如果是品牌，获取品牌id
let brands = this.tagsContent[0].values;
brands.forEach((val) => {
if (this.multSelected.includes(val.name)) this.brandIds.push(val.value);
});
}
this.tagsContent[index].show = false;
this.cancel();
},
cancel () {
// 多选取消按钮
this.multSelected = [];
this.tagsContent[0].more = false;
this.multiple = false;
},
getFilterList (params) {
// 筛选、分类 列表
APIGoods.filterList(params).then((res) => {
if (res.code === 200) {
const data = res.result;
this.tagsContent = [{
key: '品牌',
more: false,
show: true,
values: []
}]
this.tagsContent[0].values = data.brands;
this.tagsContent = this.tagsContent.concat(data.paramOptions);
this.tagsContent.forEach((item) => {
this.$set(item, 'show', true)
this.$set(item, 'more', false)
});
}
});
}
},
mounted () {
if (this.$route.query.categoryId) {
let cateId = this.$route.query.categoryId.split(',')
Object.assign(this.params, this.$route.query)
this.params.categoryId = cateId[cateId.length - 1]
} else {
Object.assign(this.params, this.$route.query)
}
this.getFilterList(this.params);
this.getNav();
}
}
</script>
<style scoped lang="scss">
/** 头部展示筛选项 */
.head-bar {
width: 100%;
background: #fff;
margin-top: -13px;
display: flex;
height: 40px;
align-items: center;
> div:first-child {
padding: 0 8px;
font-size: 18px;
font-weight: bold;
&:hover {
color: $theme_color;
cursor: pointer;
}
}
.bar {
font-size: 12px;
position: relative;
background: #fff;
border: 1px solid #999;
padding: 0 8px;
width: 85px;
text-align: center;
margin: 0 3px;
&:hover {
color: $theme_color;
border-color: $theme_color;
border-bottom-color: #fff;
cursor: pointer;
ul {
display: block;
}
.ivu-icon {
transform: rotate(180deg);
}
}
ul {
display: none;
position: absolute;
top: 18px;
left: -1px;
width: 300px;
padding: 5px 10px;
background: #fff;
border: 1px solid $theme_color;
z-index: 1;
&::before {
content: "";
position: absolute;
width: 83px;
left: 0;
top: -1px;
z-index: 2;
border-top: 1px solid #fff;
}
&:hover {
display: block;
}
clear: left;
li {
color: #999;
float: left;
width: 30%;
margin: 3px 0;
text-align: left;
&:hover {
color: $theme_color;
cursor: pointer;
}
}
}
}
//所选分类
.selected-item {
font-size: 12px;
color: #000;
padding: 2px 22px 2px 8px;
margin-right: 5px;
max-width: 250px;
height: 24px;
overflow: hidden;
position: relative;
background-color: #f3f3f3;
border: 1px solid #ddd;
&:hover {
border-color: $theme_color;
background-color: #fff;
.ivu-icon {
color: #fff;
background-color: $theme_color;
}
}
span:nth-child(2) {
color: $theme_color;
}
.ivu-icon {
position: absolute;
right: 0;
top: 0;
color: $theme_color;
line-height: 22px;
width: 21px;
height: 22px;
font-size: 14px;
}
}
}
/** 筛选主体 */
.content {
background: #fff;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
margin: 10px 0;
}
/** 品牌 start */
.brand {
border-bottom: 1px solid #ddd;
display: flex;
// min-height: 120px;
font-size: 12px;
> div:first-child {
width: 100px;
background: #eee;
padding: 10px 0 0 10px;
}
> div:last-child {
width: 1100px;
padding: 10px;
position: relative;
ul {
width: 900px;
max-height: 100px;
overflow: hidden;
padding-top: 1px;
clear: left;
li {
width: 100px;
height: 50px;
float: left;
line-height: 50px;
border: 1px solid #ddd;
margin: -1px -1px 0 0;
overflow: hidden;
position: relative;
padding: 2px;
img {
width: 100%;
height: 100%;
}
&:hover {
border-color: $theme_color;
top: 0;
left: 0;
position: relative;
z-index: 1;
img {
display: none;
}
}
span {
display: inline-block;
width: 100%;
height: 100%;
color: $theme_color;
text-align: center;
font-size: 12px;
cursor: pointer;
}
.corner-icon {
position: absolute;
right: -1px;
bottom: -1px;
div {
width: 0;
border-top: 20px solid transparent;
border-right: 20px solid $theme_color;
}
.ivu-icon {
font-size: 12px;
position: absolute;
bottom: 0;
right: 1px;
transform: rotate(-15deg);
color: #fff;
}
}
}
.border-color {
border-color: $theme_color;
z-index: 1;
}
}
.show-more {
height: auto;
max-height: 200px;
overflow: scroll;
}
.btn {
position: absolute;
right: 10px;
top: 10px;
span {
border: 1px solid #ddd;
margin-left: 10px;
color: #999;
display: inline-block;
padding: 1px 3px;
font-size: 12px;
&:hover {
cursor: pointer;
color: $theme_color;
border-color: $theme_color;
}
}
}
.multBtn {
text-align: center;
margin-top: 10px;
.ivu-btn {
font-size: 12px !important;
}
.ivu-btn:last-child {
margin-left: 10px;
}
}
}
}
/** 品牌 end */
/** 其他筛选项 start */
.other {
border-bottom: 1px solid #ddd;
display: flex;
min-height: 30px;
font-size: 12px;
&:last-child {
border: none;
}
> div:first-child {
width: 100px;
background: #eee;
padding: 10px 0 0 10px;
}
> div:last-child {
width: 1100px;
padding: 0 10px;
position: relative;
.list {
width: 900px;
height: 30px;
overflow: hidden;
clear: left;
.item {
width: 100px;
height: 30px;
float: left;
line-height: 30px;
color: $primary_color;
overflow: hidden;
position: relative;
font-size: 12px;
padding: 2px;
cursor: pointer;
&:hover {
color: $theme_color;
}
}
}
.show-more {
height: auto;
}
.btn {
position: absolute;
right: 10px;
top: 5px;
span {
border: 1px solid #ddd;
margin-left: 10px;
color: #999;
display: inline-block;
padding: 1px 3px;
font-size: 12px;
&:hover {
cursor: pointer;
color: $theme_color;
border-color: $theme_color;
}
}
}
.multBtn {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
.ivu-btn {
font-size: 12px !important;
}
.ivu-btn:last-child {
margin-left: 10px;
}
}
}
}
/** 其他筛选项 end */
</style>

285
buyer/src/components/nav/cateNav.vue Normal file
View File

@@ -0,0 +1,285 @@
<template>
<div class="cate-nav">
<div class="nav-con">
<div class="all-categories hover-pointer" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">全部商品分类</div>
<ul class="nav-item" v-if="showNavBar">
<li
class="hover-color"
v-for="(item, index) in navList.list"
:key="index"
@click="linkTo(item.url)"
>
{{ item.name }}
</li>
</ul>
</div>
<!-- 侧边导航 -->
<div class="cate-list" v-show="showAlways || showFirstList" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">
<div class="nav-side">
<ul>
<li v-for="(item, index) in cateList" :key="index" @mouseenter="showDetail(index)" @mouseleave="panel = false">
<span class="nav-side-item" @click="goGoodsList(item.id)">{{item.name}}</span>
<span v-for="(second, secIndex) in item.children" :key="secIndex">
<span v-if="secIndex < 2" > / </span>
<span @click="goGoodsList(second.id, second.parentId)" class="nav-side-item" v-if="secIndex < 2">{{second.name}}</span>
</span>
</li>
</ul>
</div>
<transition name="fade">
<div
class="detail-item-panel"
:duration="{ enter: 100, leave: 100 }"
v-show="panel"
@mouseenter="panel = true"
ref="itemPanel1"
@mouseleave="panel = false"
>
<div class="nav-detail-item">
<template v-for="(item, index) in panelData">
<span @click="goGoodsList(item.id, item.parentId)" v-if="index < 8" :key="index">{{ item.name }}<Icon type="ios-arrow-forward" /></span>
</template>
</div>
<ul>
<li
v-for="(items, index) in panelData"
:key="index"
class="detail-item-row"
>
<span class="detail-item-title" @click="goGoodsList(items.id,items.parentId)">
{{ items.name }} <Icon type="ios-arrow-forward" />
<span class="glyphicon glyphicon-menu-right"></span>
</span>
<div>
<span v-for="(item, subIndex) in items.children" @click="goGoodsList(item.id,items.id,items.parentId)"
:key="subIndex" class="detail-item">{{ item.name }}</span>
</div>
</li>
</ul>
</div>
</transition>
</div>
</div>
</template>
<script>
import { getCategory } from '@/api/goods';
import storage from '@/plugins/storage.js'
export default {
name: 'GoodsListNav',
props: {
showAlways: { // 总是显示下拉分类
default: false,
type: Boolean
},
showNavBar: { // 显示全部商品分类右侧导航条
default: true,
type: Boolean
}
},
data () {
return {
cateList: [], // 分类数据
panel: false, // 二级分类展示
panelData: [], // 二级分类数据
showFirstList: false // 始终展示一级列表
}
},
computed: {
navList () {
return JSON.parse(storage.getItem('navList')) || []
}
},
methods: {
getCate () {
getCategory(0).then(res => {
if (res.success) {
this.cateList = res.result;
localStorage.setItem('category', JSON.stringify(res.result))
}
});
},
showDetail (index) {
this.panel = true
this.panelData = this.cateList[index].children
},
goGoodsList (id, secondId, firstId) { // 分类共有三级，传全部分类过去
const arr = [firstId, secondId, id]
if (!arr[1]) {
arr.splice(0, 2)
}
if (!arr[0]) {
arr.shift()
}
let routerUrl = this.$router.resolve({
path: '/goodsList',
query: {categoryId: arr.toString()}
})
window.open(routerUrl.href, '_blank')
}
},
mounted () {
if (localStorage.getItem('category')) {
this.cateList = JSON.parse(localStorage.getItem('category'))
} else {
this.getCate()
}
}
};
</script>
<style scoped lang="scss">
.cate-nav{
width: 1200px;
position: relative;
margin: 0 auto;
}
/** 商品分类 */
.nav-con {
width: 1200px;
height: 40px;
// background: #eee;
margin: 0 auto;
display: flex;
.all-categories {
width: 200px;
line-height: 40px;
color: #fff;
background-color: $theme_color;
text-align: center;
font-size: 16px;
}
.nav-item {
width: 1000px;
height: 40px;
line-height: 40px;
overflow: hidden;
list-style: none;
background-color: #eee;
display: flex;
li {
font-size: 16px;
font-weight: bold;
margin-left: 20px;
color: rgb(89, 88, 88);
font-size: 15px;
&:hover {
color: $theme_color;
}
}
}
}
.cate-list{
margin: 0 auto;
position: absolute;
z-index: 1000;
}
.nav-item li {
float: left;
font-size: 16px;
font-weight: bold;
margin-left: 30px;
}
.nav-item a {
text-decoration: none;
color: #555555;
}
.nav-item a:hover {
color: $theme_color;
}
.nav-side {
width: 200px;
float: left;
padding: 0px;
color: #fff;
background-color: #6e6568;
height: 335px;
overflow: hidden;
}
.nav-side ul {
width: 100%;
padding: 0px;
padding-top: 5px;
list-style: none;
}
.nav-side li {
padding: 7.5px 0;
padding-left: 12px;
font-size: 13px;
line-height: 18px;
}
.nav-side li:hover {
background: #999395;
}
.nav-side-item:hover {
cursor: pointer;
color: $theme_color;
}
/*显示商品详细信息*/
.detail-item-panel {
width: 815px;
min-height: 340px;
background-color: #fff;
box-shadow: 0px 0px 15px #ccc;
position: absolute;
top: 0;
left: 200px;
z-index: 1000;
padding: 15px;
}
.nav-detail-item {
margin-top: 5px;
margin-bottom: 15px;
cursor: pointer;
color: #eee;
}
.nav-detail-item span {
padding: 6px;
padding-left: 12px;
margin-right: 15px;
font-size: 12px;
background-color: #6e6568;
}
.nav-detail-item span:hover {
background-color: $theme_color;
}
.detail-item-panel ul {
list-style: none;
}
.detail-item-panel li {
line-height: 30px;
// margin-left: 40px;
}
.detail-item-title {
font-weight: bold;
font-size: 12px;
cursor: pointer;
color: #555555;
padding-right: 10px;
width: 81px;
text-align: right;
}
.detail-item-title:hover {
color: $theme_color;
}
.detail-item-row {
display: flex;
>div{flex: 1;}
}
.detail-item {
font-size: 12px;
padding-left: 8px;
padding-right: 8px;
cursor: pointer;
border-left: 1px solid #ccc;
&:first-child{
border: none;
padding-left: 0;
}
}
.detail-item:hover {
color: $theme_color;
}
</style>