yihuo/components/vip-tabbar.vue

<template>
    <view class="flex-align-between scroll-x nowrap marginL50">
        <view
            v-for="item in data"
            :key="item.value"
            class="relative tab_item paddingX16"
            @click="click(item.value)"
        >
            <view
                class="font4 paddingY12 relative"
                :class="[activeTab == item.value ? 'active-text' : 'color-white opacity_6']"
            >
                {{ getStr(item) }}
                <view :class="activeTab == item.value ? 'line' : 'line-none'"></view>
            </view>
        </view>
        <view
            class="tab_select marginL10 marginR18"
            :class="[activeTab == 0 ? 'active-text' : 'color-white opacity6']"
        >
            <tab-select :activeTab="activeTab" @change="onChange()" />
        </view>
    </view>
</template>
<script>
import tabSelect from './select.vue'
export default {
    components: { tabSelect },
    props: {},
    data() {
        return {
            activeTab: 0,
            tab: null,
            data: [],
            sellType: ''
        }
    },
    mounted() {
        this.getCategorys()
    },
    methods: {
        async getCategorys() {
            const res = await this.$service.mall.categorys()
            if (res && res.length > 0) {
                let array = res.map((item) => ({
                    label: item.name,
                    value: item.id
                }))
                this.data = array
                this.tab = this.data[0]
            } else {
                this.data = []
                this.tab = null
            }
        },
        getStr(item) {
            return typeof item === 'string' ? item : item['label']
        },
        click(value) {
            this.activeTab = value
            this.$emit('change', value, this.sellType)
        },
        onChange(type) {
            this.sellType = type
            this.click(0)
        }
    }
}
</script>
<style lang="scss" scoped>
.tab_select {
    position: absolute;
    left: 0;
    z-index: 9;
}
.tab_item:nth-of-type(1) {
    padding-left: 0;
}
.active-text {
    text-shadow: 0px 0px 5px #a76ef4;
    color: #ffffff;
    font-weight: bold;
}
.line {
    width: 35rpx;
    height: 5rpx;
    margin: 5rpx auto 0;
    border-radius: 5rpx;
    // background: #a76ef4;
}
.line-none {
    width: 3rpx;
    height: 5rpx;
    margin: 5rpx auto 0;
    border-radius: 5rpx;
    background: #222335;
}
</style>