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