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

<template>
    <view class="order-submit">
        <simple-safe-view>
            <order-return-instructions></order-return-instructions>
            <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>
        </simple-safe-view>
    </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>