caimei-applets-store/components/views/cm-cart-navbar/cm-cart-navbar.vue

<template>
    <view class="cart-navbar">
        <view class="navbar">
            <view class="icon iconfont" :class="isCheckedAll ? 'icon-xuanze' : 'icon-weixuanze'" @click="$emit('all')">
                <text>全选</text>
            </view>
            <template v-if="isDeleted">
                <view class="control">
                    <tui-button
                        type="gray"
                        width="210rpx"
                        height="80rpx"
                        :size="30"
                        shape="circle"
                        @click="$emit('cancel')"
                    >
                        取消
                    </tui-button>
                    <tui-button
                        type="base"
                        width="210rpx"
                        height="80rpx"
                        :size="30"
                        shape="circle"
                        @click="$emit('remove')"
                    >
                        删除
                    </tui-button>
                </view>
            </template>

            <template v-else>
                <view class="center">
                    <view class="total">
                        <text>总价：</text> <text class="price">￥{{ data.finallyPrice | priceFormat }}</text>
                        <text class="delete" v-if="data.allPrice > data.finallyPrice"
                            >￥{{ data.allPrice | priceFormat }}</text
                        >
                    </view>
                    <view class="reduce" v-if="data.discountedPrice">
                        <text class="price" v-if="data.discountedPrice">
                            共减￥{{ data.discountedPrice | priceFormat }}
                        </text>
                        <text class="detail" @click="popupShow = true">优惠明细</text>
                        <tui-icon :name="popupShow ? 'arrowup' : 'arrowdown'" color="#fc32b4" size="30rpx"></tui-icon>
                    </view>
                </view>
                <tui-button
                    type="base"
                    width="210rpx"
                    height="80rpx"
                    :size="30"
                    shape="circle"
                    @click="$emit('submit')"
                >
                    去结算({{ data.count }})
                </tui-button>
            </template>
        </view>
        <cm-safe-area-bottom v-if="safeArea"></cm-safe-area-bottom>
        <!-- 弹出 优惠明细-->
        <tui-bottom-popup :zIndex="89" :maskZIndex="88" :show="popupShow">
            <template>
                <view class="popup-content">
                    <view class="icon-iconfontguanbi iconfont colse" @click="popupShow = false"></view>
                    <view class="title">优惠明细</view>
                    <view class="row">
                        <text>商品总额</text> <text>￥{{ data.allPrice | priceFormat }}</text>
                    </view>
                    <view class="row"> <text>促销满减</text> <text class="reduce">-￥0.00</text> </view>
                    <view class="row">
                        <text>优惠券</text> <text class="reduce">-￥{{ data.couponAmount | priceFormat }}</text>
                    </view>
                    <view class="row total-price">
                        <text>总计</text> <text>￥{{ data.finallyPrice | priceFormat }}</text>
                    </view>
                    <view class="tip">实际订单金额已结算页为准</view>
                    <cm-safe-area-bottom v-if="safeArea"></cm-safe-area-bottom>
                </view>
            </template>
        </tui-bottom-popup>
    </view>
</template>

<script>
export default {
    name: 'cm-cart-navbar',
    props: {
        safeArea: {
            type: Boolean,
            default: false
        },
        isDeleted: {
            type: Boolean,
            default: false
        },
        isCheckedAll: {
            type: Boolean,
            default: false
        },
        data: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            popupShow: false
        }
    },
    methods: {}
}
</script>

<style lang="scss" scoped>
.cart-navbar {
    @extend .fixed-bottom;
    z-index: 90;
    background: #fff;
    box-sizing: border-box;
    border-top: 1rpx solid #eee;

    .navbar {
        position: relative;
        height: 100rpx;
        @extend .cm-flex-between;
        padding: 0 24rpx;
        z-index: 90;
        background-color: #fff;
        
        &::after{
            content: "";
            display: block;
            width: 750rpx;
            height: 100rpx;
            position: absolute;
            bottom: -100rpx;
            left: 0;
            background-color: #fff;
        }
        
        .icon {
            margin-right: 6rpx;
            text {
                display: inline-block;
                font-size: 30rpx;
                margin-left: 4rpx;
                color: #333;
            }
        }

        .control {
            width: 444rpx;
            @extend .cm-flex-between;
        }

        .total,
        .reduce {
            .price {
                color: #f83c6c;
            }
            .detail {
                color: #f83c6c;
            }
        }

        .total {
            font-size: 26rpx;
            margin-bottom: 4rpx;
            .delete {
                font-size: 20rpx;
                color: #999999;
                text-decoration: line-through;
                font-weight: normal;
                margin-left: 10rpx;
            }
        }

        .reduce {
            font-size: 24rpx;
            .price {
                margin-right: 32rpx;
            }

            .detail {
            }
        }
    }
}

.popup-content {
    position: relative;
    padding: 24rpx;

    .colse {
        position: absolute;
        top: 24rpx;
        right: 24rpx;
        display: block;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        color: #999;
    }

    .title {
        text-align: center;
        font-size: 30rpx;
        margin-bottom: 30rpx;
    }

    .row {
        @extend .cm-flex-between;
        margin-top: 24rpx;
        font-size: 26rpx;
        .reduce {
            color: #f83c6c;
        }

        &.total-price {
            font-weight: bold;
        }
    }

    .tip {
        margin-top: 24rpx;
        margin-bottom: 30rpx;
        font-size: 24rpx;
        color: #999999;
    }
}
</style>