caimei-applets-store/pages/views/goods/components/goods-navbar/goods-navbar.vue

<template>
    <view class="goods-navbar">
        <simple-safe-view>
            <view class="navbar">
                <view class="navbar-left">
                		  <view class="item" @click="$emit('leftClick', 0)">
                        <!-- 首页 -->
                        <view class="iconfont icon-fanhuishouye"></view>
                			     <view class="label">首页</view>
                    </view>
                    <button class="item contact" @click="$emit('leftClick', 1)" open-type="contact">
                        <!-- 客服 -->
                        <view class="iconfont icon-kefu"></view>
                 			    <view class="label">客服</view>
                    </button>
                    <view class="item cart" @click="$emit('leftClick', 2)">
                        <!-- 购物车 -->
                        <view class="iconfont icon-gouwuche"></view>
                        <view class="label">购物车</view>
                        <view class="badge" v-text="kindCount" v-if="kindCount > 0"></view>
                    </view>
                </view>
                <view class="navbar-right">
                    <view class="control" @click="$emit('rightClick', 0)"><slot name="left"></slot></view>
                    <view class="control" @click="$emit('rightClick', 1)"><slot name="right"></slot></view>
                </view>
            </view>
        </simple-safe-view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'goods-navbar',
    data() {
        return {}
    },
    computed: {
        ...mapGetters(['kindCount'])
    }
}
</script>

<style lang="scss" scoped>
.goods-navbar {
    @extend .fixed-bottom;
    background-color: #fff;
    border-top: 1rpx solid #efefef;

    .navbar {
        width: 100%;
        min-height: 100rpx;
        padding: 0 24rpx;
        box-sizing: border-box;
        @extend .cm-flex-between;

        .navbar-left {
            flex: 1;
            @extend .cm-flex-around;
            margin-right: 16rpx;
            .item {
                flex: 1;
                @extend .cm-flex-center;
                flex-direction: column;
                color: #333333;

                .iconfont {
                    font-size: 36rpx;
                }

                .label {
                    margin-top: 4rpx;
                    font-size: 22rpx;
                }

                &.contact {
                    margin: 0;
                    padding: 0;
                    line-height: inherit;
                    background: #fff;
                    &::after {
                        display: none;
                    }
                }

                &.cart {
                    position: relative;
                    .badge {
                        top: -8rpx;
                        right: 0;
                        position: absolute;
                        width: 36rpx;
                        height: 36rpx;
                        background-color: #ff457b;
                        border-radius: 18rpx;
                        @extend .cm-flex-center;
                        font-size: 22rpx;
                        color: #fff;
                    }
                }
            }
        }

        .navbar-right {
            width: 420rpx;
            @extend .cm-flex-between;

            .control {
                width: 210rpx;
                height: 84rpx;

                &:first-child {
                    @extend .cm-flex-center;
                    flex-direction: column;
                    border-radius: 40rpx 0 0 40rpx;
                    background-color: #ffeff4;
                }

                &:last-child {
                    @extend .cm-flex-center;
                    flex-direction: column;
                    border-radius: 0 40rpx 40rpx 0;
                    background: linear-gradient(92deg, #fc32b4 0%, #f83c6c 100%);
                }
            }
        }
    }
}
</style>