<template>
    <view class="content">
        <view class="use">可使用优惠券</view>
        <view class="u-m-b-32">
            <u-checkbox-group style="width: 100%;">
                <view class="use-block u-relative  u-p-24">
                    <view class="coupon u-absolute top-0 left-0">优券</view>
                    <view class="row-between">
                        <view class="u-m-t-22">
                            <view class="md bold">神优惠券</view>
                            <view class="sm u-m-t-8">有效期至2025.04.26</view>
                        </view>
                        <view class="row">
                            <view class="primary u-text-center">
                                <price-format :subscript-size="34" :first-size="60" :second-size="50" :price="3" :weight="500"></price-format>
                                <view>
                                    满20可用
                                </view>
                            </view>
                            <view class="u-m-l-32">
                                <u-checkbox v-model="checked" shape="circle" active-color="#FD414B"></u-checkbox>
                            </view>
                        </view>
                    </view>
                    <view class="dashed u-m-t-22 u-m-b-22"></view>
                    <view class="desc">
                        限商品现价+打包费-所有优惠金额满20元使用
                    </view>
                </view>
            </u-checkbox-group>
        </view>

        <view class="not-use u-m-t-32">不可使用优惠券</view>
        <view class="opacity5 u-m-b-32">
            <u-checkbox-group style="width: 100%;" :disabled="true">
                <view class="use-block u-relative  u-p-24">
                    <view class="coupon u-absolute top-0 left-0">优券</view>
                    <view class="row-between">
                        <view class="u-m-t-22">
                            <view class="md bold">神优惠券</view>
                            <view class="sm u-m-t-8">有效期至2025.04.26</view>
                        </view>
                        <view class="row">
                            <view class="primary u-text-center">
                                <price-format :subscript-size="34" :first-size="60" :second-size="50" :price="3" :weight="500"></price-format>
                                <view>
                                    满20可用
                                </view>
                            </view>
                            <view class="u-m-l-32">
                                <u-checkbox v-model="checked" shape="circle" active-color="#FD414B"></u-checkbox>
                            </view>
                        </view>
                    </view>
                    <view class="dashed u-m-t-22 u-m-b-22"></view>
                    <view class="desc">
                        限商品现价+打包费-所有优惠金额满20元使用
                    </view>
                </view>
            </u-checkbox-group>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                checked: false
            }
        }
    }
</script>

<style lang="scss" scoped>
.content {
    margin: 24rpx;
}
.use,
.not-use {
    font-weight: 500;
    font-size: 30rpx;
    color: #000000;
    line-height: 44rpx;
    text-align: left;
    margin-bottom: 14rpx;
}

.use-block {
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;

    .coupon {
        font-size: 24rpx;
        font-weight: 400;
        text-align: center;
        color: #fff;
        width: 73rpx;
        height: 37rpx;
        background: linear-gradient( 90deg, #FE7702 0%, #FF27B9 100%);
        border-radius: 20rpx 0rpx 20rpx 0rpx
    }

    .dashed {
        border: 2rpx dashed #D6D1D3;
    }

    .desc {
        color: #858687;
    }
}

.opacity5 {
    opacity: .5;
}
</style>