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.
pifa/pages/news/goods/components/category.vue

208 lines
4.3 KiB

5 months ago
<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>
<scroll-view scroll-y="true" class="shopItem" >
<view class="" v-for="(item, index) in tabList" :key="index">
<view class="shopText Text" :class="{'active1':activeIndex.indexOf(item.category_id) > -1}"
@click="getShop(item,item.category_id)">
<text style="color: #333;font-weight: 700;">{{ item.name }}</text>
<image v-if="activeIndex.indexOf(item.category_id) > -1"
:src="$picUrl + '/static/news1/selected.png'" mode="widthFix">
</image>
</view>
<view class="shopItem2">
<view class="shopText" :class="{'active2':activeIndex.indexOf(item.category_id) > -1}"
@click="getShop(item,item.category_id)" v-for="(item, index) in item.children"
: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>
</scroll-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.splice(0)
},
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)
}
},
submit() {
this.$emit('getChoseCategory', {
category_id: this.activeIndex || [],
})
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .u-btn--primary {
background-color: #FF6257 !important;
border-color: #FF6257;
}
.afterSales {
padding: 32upx;
.btnGroup {
margin: 40rpx;
display: flex;
justify-content: space-between;
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: 700;
color: #303030;
text-align: center;
padding-bottom: 30rpx;
border-bottom: 1px solid #EAEAEA;
}
.shopItem2 {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: 40rpx;
}
.shopItem {
margin-top: 40rpx;
max-height: 750rpx;
.shopText {
margin-right: 12rpx;
width: 150upx;
height: 60upx;
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;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
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;
}
}
.active1 {
text {
font-weight: 700;
font-size: 28rpx;
color: #FF4F40;
}
border: 1px solid #FF4F40;
}
.active2 {
text {
font-weight: 500;
font-size: 26rpx;
}
border: 1px solid #FF4F40;
}
}
}
</style>