caimei-applets-store/pages/views/order/components/order-submit/order-submit.vue

<template>
    <view class="order-submit">
        <view class="control">
            <view class="count">共{{ orderInfo.allCount }}件商品</view>
            <view class="price">
                <view class="total">
                    总计：
                    <text class="paymount">￥{{ orderInfo.payAllPrice | priceFormat }}</text>
                </view>
                <view class="reduce" v-if="orderInfo.discountedPrice">
                    共减：￥{{ orderInfo.discountedPrice | priceFormat }}
                </view>
            </view>
            <tui-button type="base" width="210rpx" height="80rpx" shape="circle" @click="$emit('submit')">
                提交订单
            </tui-button>
        </view>
        <cm-safe-area-bottom></cm-safe-area-bottom>
    </view>
</template>

<script>
export default {
    name: 'order-submit',
    props: {
        orderInfo: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {}
    }
}
</script>

<style lang="scss" scoped>
.order-submit {
    @extend .fixed-bottom;
    border-top: 1px solid #eee;
    background-color: #fff;

    .control {
        @extend .cm-flex-between;

        height: 100rpx;
        box-sizing: border-box;
        padding: 0 24rpx;

        .count {
            font-size: 28rpx;
        }

        .price {
            font-size: 26rpx;

            .paymount {
                color: #f83c6c;
            }
            .reduce {
                color: #f83c6c;
                font-size: 24rpx;
            }
        }
    }
}
</style>