book-hi/pages-mine/components/category-popup.vue

<template>
    <u-popup v-model="showPopup" mode="bottom" border-radius="20">
        <view class="category-popup">
            <view class="popup-header">
                <text>分类</text>
                <u-icon name="close" size="32" @click="close"></u-icon>
            </view>

            <view class="category-list">
                <view v-for="(item, index) in categories" :key="index" class="category-item"
                    :class="{ 'active': selectedCategories.includes(item.value), 'disabled': item.disabled }"
                    @click="toggleSelect(item)">
                    {{ item.label }}
                </view>
            </view>

            <view class="confirm-btn" @click="confirm">
                确定筛选
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    name: 'category-popup',
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showPopup: false,
            categories: [],
            selectedCategories: []
        }
    },
    watch: {
        show(newVal) {
            this.showPopup = newVal
            newVal && this.getDict()
        },
        showPopup(newVal) {
            if (!newVal) {
                this.$emit('update:show', false)
            }
        },

    },
    methods: {
        toggleSelect(item) {
            if (item.disabled) return

            const index = this.selectedCategories.indexOf(item.value)
            if (index > -1) {
                this.selectedCategories.splice(index, 1)
            } else {
                this.selectedCategories.push(item.value)
            }
        },
        confirm() {
            this.$emit('confirm', this.selectedCategories)
            this.close()
        },
        close() {
            this.showPopup = false
            this.$emit('update:show', false)
        },
        //根据code获取字典 user_account_change_type
        getDict(code = 'user_account_change_type') {
            uni.$u.http.get('/token/common/getDictOptions?type=' + code).then(res => {
                if (res.code === 200) {
                    this.categories = res.data.map(item => ({ label: item.dictLabel, value: item.dictValue }))
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.category-popup {
    padding: 30rpx;
    padding-bottom: env(safe-area-inset-bottom);

    .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 30rpx;
        font-size: 32rpx;
        color: #333;
    }

    .category-list {
        display: flex;
        flex-wrap: wrap;
        padding: 20rpx 0;
        gap: 20rpx;

        .category-item {
            padding: 0 42rpx;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            border-radius: 10rpx;
            font-size: 28rpx;
            color: #38C148;
            border: 1px solid #38C148;

            &.active {
                color: #ffffff;
                border: 1px solid #38C148;
                background-color: #38C148;
            }
        }
    }

    .confirm-btn {
        margin-top: 40rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        background: #38C148;
        border-radius: 45rpx;
        color: #FFFFFF;
        font-size: 32rpx;
    }
}
</style>