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

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

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

        },
        computed: {

        },
        methods: {
            // 跳转订单合同
            handleContract() {
                this.$api.navigateTo('/pages/user/order/order-contract')
            },
            //勾选使用余额
            handleChecked() {
                this.ischecked = !this.ischecked
            },
        }
    }
</script>

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

        .contract-title {
            width: 702rpx;
            padding: 0 24rpx;
            height: 66rpx;
            line-height: 66rpx;
            position: relative;

            .text {
                font-size: $font-size-28;
                color: $text-color;
                font-weight: bold;
            }

            .contract-text {
                font-size: $font-size-24;
                color: #999999;
                line-height: 66rpx;
                display: inline-block;
                float: right;
                box-sizing: border-box;
                padding-right: 40rpx;
            }

            .iconfont {
                width: 50rpx;
                height: 66rpx;
                line-height: 66rpx;
                color: #999999;
                display: block;
                position: absolute;
                right: 0;
                top: 0;
            }
        }

        .contract-checked {
            width: 100%;
            height: 60rpx;
            display: flex;
            justify-content: flex-end;
            box-sizing: border-box;
            padding: 0 10rpx;

            .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;
                }
            }

            .checkbox-text {
                font-size: $font-size-24;
                color: #fea785;
            }
        }
    }
</style>