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

<template>
    <view class="cart-navbar">
        <simple-safe-view :safeStatus="safeArea">
            <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>
        </simple-safe-view>
        <!-- 弹出 优惠明细-->
        <tui-bottom-popup :zIndex="89" :maskZIndex="88" :show="popupShow">
            <template>
                <view class="popup-content">
                    <simple-safe-view :safeStatus="safeArea">
                        <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>
                    </simple-safe-view>
                </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>