fanfan
9 months ago
parent
66ff4c6d5a
commit
0b776dd9ff
@ -0,0 +1,182 @@ |
||||
<template> |
||||
<view> |
||||
<u-popup v-model="afterSale" catchtouchmove='true' width="80%" border-radius="10" @close="onClose" |
||||
:closeable="true" mode="center"> |
||||
<view class="afterSales"> |
||||
<view class="filterTitle"> |
||||
请选择分类 |
||||
</view> |
||||
<view class="shopItem"> |
||||
<view class="shopText" :class="{'active':activeIndex.indexOf(item.category_id) > -1}" |
||||
@click="getShop(item,item.category_id)" v-for="(item, index) in tabList" :key="index"> |
||||
<text>{{ item.name }}</text> |
||||
<image v-if="activeIndex.indexOf(item.category_id) > -1" |
||||
:src="$picUrl + '/static/news1/selected.png'" mode="widthFix"> |
||||
</image> |
||||
</view> |
||||
</view> |
||||
<view class="btnGroup"> |
||||
<view class="reset" @click="reset"> |
||||
重置 |
||||
</view> |
||||
<view class="submit" @click="submit" style="margin-left:24upx;"> |
||||
确定 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</u-popup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
tabList: Array, //自定义属性的值：数据类型 |
||||
activeIndex: Array, |
||||
categoryId: String || Number |
||||
}, |
||||
data() { |
||||
return { |
||||
afterSale: false, |
||||
category_id: '', |
||||
category_name: '', |
||||
} |
||||
}, |
||||
methods: { |
||||
reset() { |
||||
this.activeIndex = [] |
||||
}, |
||||
getShop(item, category_id) { |
||||
let arrIndex = this.activeIndex.indexOf(category_id) |
||||
if (arrIndex > -1) { |
||||
this.activeIndex.splice(arrIndex, 1) |
||||
} else { |
||||
this.activeIndex.push(category_id) |
||||
} |
||||
console.log(this.activeIndex) |
||||
}, |
||||
submit() { |
||||
let idList = []; |
||||
let nameList = [] |
||||
this.tabList.forEach(item => { |
||||
if (this.activeIndex.indexOf(item.category_id) > -1) { |
||||
idList.push(item.category_id); |
||||
nameList.push(item.name) |
||||
} |
||||
}); |
||||
|
||||
this.$emit('getChoseCategory', { |
||||
category_id: idList.join(','), |
||||
category_name: nameList.length > 1 ? nameList.join(',') + '等' : nameList.join(',') |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.afterSales { |
||||
padding: 32upx; |
||||
|
||||
.btnGroup { |
||||
margin: 40upx 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.reset { |
||||
width: 216upx; |
||||
height: 70upx; |
||||
background: #E9E9E9; |
||||
border-radius: 22px 22px 22px 22px; |
||||
opacity: 1; |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #585858; |
||||
line-height: 70upx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.submit { |
||||
width: 216upx; |
||||
height: 70upx; |
||||
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%); |
||||
border-radius: 50px 50px 50px 50px; |
||||
opacity: 1; |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
line-height: 70upx; |
||||
text-align: center; |
||||
|
||||
} |
||||
} |
||||
|
||||
.filterTitle { |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #303030; |
||||
text-align: center; |
||||
padding-bottom: 30rpx; |
||||
border-bottom: 1px solid #EAEAEA; |
||||
} |
||||
|
||||
.shopItem { |
||||
margin-top: 40rpx; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
max-height: 750rpx; |
||||
overflow-y: auto; |
||||
|
||||
.shopText { |
||||
width: 150upx; |
||||
height: 72upx; |
||||
background: #FFFFFF; |
||||
border-radius: 3px 3px 3px 3px; |
||||
border: 1px solid #D6D6D6; |
||||
position: relative; |
||||
margin-bottom: 24upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
text { |
||||
font-size: 26upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #B6B6B6; |
||||
|
||||
} |
||||
|
||||
image { |
||||
position: absolute; |
||||
z-index: 9; |
||||
right: -8upx; |
||||
bottom: -8upx; |
||||
height: 0; |
||||
width: 50upx; |
||||
height: auto; |
||||
} |
||||
} |
||||
|
||||
.active { |
||||
text { |
||||
|
||||
color: #FF4F40; |
||||
|
||||
} |
||||
|
||||
border: 1px solid #FF4F40; |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue