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

<template>
    <view class="order-submit">
        <simple-safe-view>
            <template v-if="showAgreement">
                <order-return-instructions
                    :content="agreementContent"
                    @change="handleAgreementChange"
                ></order-return-instructions>
            </template>
            <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="handleSubmit">
                    提交订单
                </tui-button>
            </view>
        </simple-safe-view>

        <!-- 订单提交拦截 -->
        <tui-modal
            :show="showModel"
            content="请先阅读《特殊商品退货须知》并勾选后再提交订单～"
            @click="showModel = false"
        ></tui-modal>
    </view>
</template>

<script>
export default {
    name: 'order-submit',
    props: {
        showAgreement: {
            type: Boolean,
            default: false
        },
        agreementContent: {
            type: String,
            default: ''
        },
        orderInfo: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            agreementActive: false,
            showModel: false
        }
    },
    methods: {
        handleAgreementChange(val) {
            this.agreementActive = val
        },
        handleSubmit() {
            if (this.showAgreement && !this.agreementActive) {
                this.showModel = true
                return
            }
            this.$emit('submit')
        }
    }
}
</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>