caimei-applets-caimei/pages/user/order/components/cm-contract-temp.vue

<template name="cm-parameter">
    <view class="contract-template">
        <!-- 发票信息 -->
        <view class="contract-title">
            <view class="text">销售合同:</view>
            <view class="contract-checked" @click.stop="handleChecked">
                <view class="checkbox-text">
                    请先阅读
                    <text @click.stop="handleContract">
                     《销售合同》
                    </text>
                    后勾选同意
                </view>
                <view class="checkbox-box">
                    <button class="checkbox iconfont" hover-class="btn-hover"
                        :class="[ischecked ? 'icon-gouxuanl' : 'icon-weigouxuan']"></button>
                </view>
            </view>
        </view>
        
    </view>
</template>

<script>
    export default {
        name: 'cm-contract-temp',
        props: {
            invoiceData:{
                type:Object
            },
            goodsData: {
            	type: Array
            }
        },
        data() {
            return {
                isIphoneX: this.$store.state.isIphoneX,
                userId: 0,
                ischecked: false
            }
        },
        created() {

        },
        computed: {

        },
        methods: {
            // 跳转订单合同
            handleContract() {
                this.$api.navigateTo(`/pages/user/order/order-contract?type=1&goods=${JSON.stringify(this.goodsData)}`)
            },
            // 勾选销售合同
            handleChecked() {
                this.ischecked = !this.ischecked
                this.$emit('checkedContract', this.ischecked)
            },
        }
    }
</script>

<style lang="scss">
    .contract-template {
        width: 100%;
        height: auto;
        background: #ffffff;
        float: left;
        margin-top: 24rpx;

        .contract-title {
            width: 100%;
            padding: 0 0 0 24rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            
            .text {
                font-size: $font-size-28;
                color: $text-color;
                font-weight: bold;
                height: 88rpx;
                line-height: 88rpx;
            }

            .contract-checked {
                height: 88rpx;
                display: flex;
                justify-content: flex-end;
                box-sizing: border-box;
                padding: 0 10rpx;
                line-height: 88rpx;
            
                .checkbox-box {
                    display: flex;
                    width: 60rpx;
                    float: left;
                    height: 100%;
                    font-size: $font-size-28;
            
                    .checkbox {
                        width: 40rpx;
                        text-align: right;
                        box-sizing: border-box;
                        text-align: center;
                        text-decoration: none;
                        border-radius: 0;
                        -webkit-tap-highlight-color: transparent;
                        overflow: hidden;
                        color: $color-system;
                        line-height: 88rpx;
                    }
                }
            
                .checkbox-text {
                    font-size: $font-size-24;
                    color: #999999;
                    line-height: 88rpx;
                    text{
                        color: #1890f9;
                    }
                }
            }
        }

        
    }
</style>