You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
417 lines
9.0 KiB
417 lines
9.0 KiB
4 months ago
|
<template>
|
||
|
|
<view :style="colorStyle">
|
||
|
|
<tui-drawer :mode="mode" :visible="visible" @close="closeDrawer">
|
||
|
|
<view class="acea-row row-column container">
|
||
|
|
<!-- #ifdef MP -->
|
||
|
|
<view :style="{height: getHeight.barTop+'px'}"></view>
|
||
|
|
<view :style="{height: getHeight.barHeight+'px'}" class="head-box acea-row row-center-wrapper">筛选</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<!-- #ifndef MP -->
|
||
|
|
<view class="head-box acea-row row-center-wrapper">筛选</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<scroll-view scroll-y="true" class="scroll-view">
|
||
|
|
<view class="d-container">
|
||
|
|
<!-- 品牌 -->
|
||
|
|
<view class="box brand-box">
|
||
|
|
<tui-collapse :index="brandIndex" :current="brandCurrent" @click="brandCollapse">
|
||
|
|
<template v-slot:title>
|
||
|
|
<tui-list-cell>品牌</tui-list-cell>
|
||
|
|
</template>
|
||
|
|
<template v-slot:content>
|
||
|
|
<view class="box-list acea-row">
|
||
|
|
<view class="box-list acea-row">
|
||
|
|
<view class="list acea-row row-center-wrapper line1" :class="{'bgcolor':spanIndex.indexOf(index)>-1}" v-for="(item,index) in list" :key="index"
|
||
|
|
@click="changeSpan(index,item)">
|
||
|
|
{{item.brand_name}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</tui-collapse>
|
||
|
|
</view>
|
||
|
|
<!-- 分类 -->
|
||
|
|
<view class="box">
|
||
|
|
<view class="font">分类</view>
|
||
|
|
<scroll-view scroll-x="true" class="scroll-x-view" v-if="level == 3">
|
||
|
|
<view class="item" :class="{ on: navOneActive == index }" v-for="(item,index) in categoryList" :key="item.id" @click="tapNavOne(item,index)">
|
||
|
|
<view class="img-box">
|
||
|
|
<image :src="item.pic" class="img"></image>
|
||
|
|
</view>
|
||
|
|
<view class="title">{{item.cate_name}}</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<template v-for="(item,index) in categoryErList">
|
||
|
|
<tui-collapse :key="item.id" :index="index" :current="item.current" :disabled="item.disabled" @click="change">
|
||
|
|
<template v-slot:title>
|
||
|
|
<tui-list-cell>{{item.cate_name}}</tui-list-cell>
|
||
|
|
</template>
|
||
|
|
<template v-slot:content>
|
||
|
|
<view class="box-list acea-row">
|
||
|
|
<view class="list acea-row row-center-wrapper" v-for="(data,indexn) in item.children" :key="indexn" @click="categoryFn(data,item)">
|
||
|
|
<view class="acea-row row-center-wrapper" :class="{bgcolor:sortIndex===data.id}">
|
||
|
|
{{data.cate_name}}
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</tui-collapse>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<!-- 底部按钮 -->
|
||
|
|
<view class="btn-box acea-row">
|
||
|
|
<view class="btn" @click="submit(2)">
|
||
|
|
重置
|
||
|
|
</view>
|
||
|
|
<view class="btn btnColor" @click="submit(1)">
|
||
|
|
确认
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="safe-area-inset-bottom"></view>
|
||
|
|
</view>
|
||
|
|
</tui-drawer>
|
||
|
|
<!-- 确认 -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import colors from "@/mixins/color";
|
||
|
|
import tuiDrawer from "@/components/thorui/tui-drawer"
|
||
|
|
import tuiCollapse from "@/components/thorui/tui-collapse"
|
||
|
|
import tuiListCell from "@/components/thorui/tui-list-cell"
|
||
|
|
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
tuiDrawer,
|
||
|
|
tuiCollapse,
|
||
|
|
tuiListCell
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
storeCategory: {
|
||
|
|
type: Array, // 分类数据
|
||
|
|
default: []
|
||
|
|
},
|
||
|
|
storeBrand: {
|
||
|
|
type: Array, //品牌数据
|
||
|
|
|
||
|
|
},
|
||
|
|
level: {
|
||
|
|
type: Number,
|
||
|
|
default: 2
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mixins: [colors],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
getHeight: this.$util.getWXStatusHeight(),
|
||
|
|
statusBarHeight: statusBarHeight,
|
||
|
|
visible: false,
|
||
|
|
mode: "right",
|
||
|
|
sortIndex: 0,
|
||
|
|
spanIndex: [],
|
||
|
|
newList: [],
|
||
|
|
open: 1,
|
||
|
|
forArr: [],
|
||
|
|
serchData: {
|
||
|
|
sort: '', //new 最新, sales价值
|
||
|
|
sort_type: '', // DESC 倒序 ASC 正序
|
||
|
|
send: '',
|
||
|
|
cate_id: [],
|
||
|
|
},
|
||
|
|
brandIndex: 0,
|
||
|
|
brandCurrent: 0,
|
||
|
|
navOneActive: 0,
|
||
|
|
categoryList: [],
|
||
|
|
categoryErList: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
storeArr() {
|
||
|
|
return this.storeCategory
|
||
|
|
},
|
||
|
|
list() {
|
||
|
|
if (this.open === 1) {
|
||
|
|
return this.storeBrand.slice(0, 10)
|
||
|
|
} else if (this.open === 2) {
|
||
|
|
return this.storeBrand
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
storeCategory(val) {
|
||
|
|
this.categoryList = val;
|
||
|
|
if (this.level == 2) {
|
||
|
|
this.categoryErList = this.categoryList;
|
||
|
|
} else {
|
||
|
|
this.categoryErList = this.categoryList[0].children;
|
||
|
|
}
|
||
|
|
this.sortIndex = this.categoryErList[0].children[0].id;
|
||
|
|
console.log(this.sortIndex)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
console.log(2, '父组件传过来的值')
|
||
|
|
// this.newListArr()
|
||
|
|
// this.openFn()
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
// newListArr() {
|
||
|
|
// // this.forArr = this.list
|
||
|
|
// if (this.open == 1) {
|
||
|
|
// console.log('进入')
|
||
|
|
// this.$set(this.forArr,this.forArr.length,...this.list.slice(0, 10))
|
||
|
|
// console.log(this.forArr)
|
||
|
|
|
||
|
|
// } else {
|
||
|
|
// console.log('全部')
|
||
|
|
// this.forArr = this.list
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
closeDrawer() {
|
||
|
|
this.visible = false
|
||
|
|
},
|
||
|
|
// 点击展开
|
||
|
|
openFn(num) {
|
||
|
|
switch (num) {
|
||
|
|
case 1:
|
||
|
|
this.open = 2
|
||
|
|
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
this.open = 1
|
||
|
|
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
// this.newListArr()
|
||
|
|
},
|
||
|
|
// 单选
|
||
|
|
categoryFn(row, item) {
|
||
|
|
console.log(row, item)
|
||
|
|
this.sortIndex = row.id
|
||
|
|
let cid = this.categoryList[this.navOneActive].id;
|
||
|
|
let sid = row.pid;
|
||
|
|
let tid = row.id;
|
||
|
|
if (this.level == 2) {
|
||
|
|
cid = row.pid;
|
||
|
|
sid = row.id;
|
||
|
|
tid = 0;
|
||
|
|
}
|
||
|
|
let data = {
|
||
|
|
cid: cid,
|
||
|
|
sid: sid,
|
||
|
|
tid: tid,
|
||
|
|
}
|
||
|
|
console.log(data)
|
||
|
|
this.$emit('categoryChange', data)
|
||
|
|
},
|
||
|
|
change(e) {
|
||
|
|
let index = e.index;
|
||
|
|
let item = this.categoryErList[index];
|
||
|
|
item.current = item.current == index ? -1 : index
|
||
|
|
|
||
|
|
},
|
||
|
|
// 多选
|
||
|
|
changeSpan(index, row) {
|
||
|
|
let arrIndex = this.spanIndex.indexOf(index);
|
||
|
|
if (arrIndex > -1) {
|
||
|
|
this.spanIndex.splice(arrIndex, 1);
|
||
|
|
this.newList.splice(arrIndex, 1);
|
||
|
|
} else {
|
||
|
|
this.spanIndex.push(index);
|
||
|
|
this.newList.push(row.id);
|
||
|
|
}
|
||
|
|
let result = this.newList.join(",")
|
||
|
|
this.$emit('brandChange', result)
|
||
|
|
},
|
||
|
|
// 确认提交
|
||
|
|
submit(val) {
|
||
|
|
if (val == 2) {
|
||
|
|
this.sortIndex = 0
|
||
|
|
this.spanIndex = []
|
||
|
|
}
|
||
|
|
this.$emit('submitFn', val)
|
||
|
|
},
|
||
|
|
brandCollapse(e) {
|
||
|
|
this.brandCurrent = this.brandCurrent == e.index ? -1 : e.index;
|
||
|
|
},
|
||
|
|
tapNavOne(item, index) {
|
||
|
|
this.navOneActive = index;
|
||
|
|
this.categoryErList = this.categoryList[this.navOneActive].children;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.safe-area-inset-bottom {
|
||
|
|
height: 0;
|
||
|
|
height: constant(safe-area-inset-bottom);
|
||
|
|
height: env(safe-area-inset-bottom);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.head-box {
|
||
|
|
height: 80rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 34rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-view {
|
||
|
|
flex: 1;
|
||
|
|
min-height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-box {
|
||
|
|
padding: 20rpx 32rpx;
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
flex: 1;
|
||
|
|
height: 72rpx;
|
||
|
|
border: 1rpx solid var(--view-theme);
|
||
|
|
border-radius: 36rpx;
|
||
|
|
margin-left: 14rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 26rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
color: var(--view-theme);
|
||
|
|
transform: rotateZ(360deg);
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btnColor {
|
||
|
|
background: var(--view-theme);
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bgcolor {
|
||
|
|
background: var(--view-minorColorT) !important;
|
||
|
|
border: 1px solid var(--view-theme);
|
||
|
|
border-radius: 34rpx;
|
||
|
|
color: var(--view-theme) !important;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font {
|
||
|
|
margin-top: 24rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-live {
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-right {
|
||
|
|
margin-top: 30rpx;
|
||
|
|
font-size: 20rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-xialazhankai {
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #666666;
|
||
|
|
margin-left: 6rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-xiangshang {
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #666666;
|
||
|
|
margin-left: 6rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.d-container {
|
||
|
|
padding: 0 32rpx;
|
||
|
|
|
||
|
|
.box {
|
||
|
|
.title {
|
||
|
|
/* #ifndef MP */
|
||
|
|
// margin-top: 30rpx;
|
||
|
|
/* #endif */
|
||
|
|
// display: flex;
|
||
|
|
// justify-content: space-between;
|
||
|
|
// padding: 24rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box-list {
|
||
|
|
margin: 0 -26rpx 0 0;
|
||
|
|
|
||
|
|
.list {
|
||
|
|
width: 184rpx;
|
||
|
|
height: 56rpx;
|
||
|
|
border-radius: 28rpx;
|
||
|
|
margin: 0 26rpx 24rpx 0;
|
||
|
|
background: #F5F5F5;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-x-view {
|
||
|
|
white-space: nowrap;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 24rpx 0;
|
||
|
|
margin-right: 8rpx;
|
||
|
|
vertical-align: middle;
|
||
|
|
|
||
|
|
&.on {
|
||
|
|
.img-box {
|
||
|
|
border-color: var(--view-theme);
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
background: linear-gradient(90deg, var(--view-gradient) 0%, var(--view-theme) 100%);
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.img-box {
|
||
|
|
width: 104rpx;
|
||
|
|
height: 104rpx;
|
||
|
|
padding: 6rpx;
|
||
|
|
border: 3rpx solid transparent;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img {
|
||
|
|
width: 92rpx;
|
||
|
|
height: 92rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
width: 120rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
margin-top: 8rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 24rpx;
|
||
|
|
line-height: 40rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|