<!-- 优惠券卡片 -->
<template>
    <view class="jy-coupon-card bfff mtb20 br20">
        <view class="jy-coupon-card-top df jcsb aic">
            <!-- 左边 名称 有效期 -->
            <view class="jy-coupon-card-top-left">
                <view class="jy-coupon-card-top-left-name b">123</view>
                <view class="jy-coupon-card-top-left-time c999 f24">有效期至：2024.08.06 - 2024.08.06</view>
            </view>
            <!-- 右边 价格 使用类型-无门槛 -->
            <view class="jy-coupon-card-top-right">
                <view class="jy-coupon-card-top-right-price df">
                    <text class="f44 cFF9B27">￥</text>
                    <text class="f72 cFF9B27">10</text>
                </view>
                <view class="jy-coupon-card-top-right-type f28 cFF9B27">无门槛</view>
            </view>
        </view>
        <!--省略号分割线 -->
        <view class="dividing-line"></view>
        <!-- 底部 -->
        <view class="jy-coupon-card-bottom df jcsb aic p25">
            <!-- 左边描述 -->
            <view class="jy-coupon-card-bottom-left df jcsb aic" @click="couponDetail = !couponDetail">
                <view :class="!couponDetail && 'thd'">优惠卷介绍优惠卷介绍优惠卷介绍优惠卷...</view>
                <view class="jy-coupon-card-bottom-left-arrow" :style="couponDetail && cStyle"><uni-icons
                        type="down"></uni-icons></view>

            </view>
            <!-- 右边使用按钮 -->
            <view class="jy-coupon-card-bottom-right" @click="useCoupon(coupon)">去使用</view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    }
})
const couponDetail = ref(false)
const cStyle = {
    'transform': 'rotate(-180deg)'
}
</script>
<style scoped lang="scss">
.jy-coupon-card-top {
    padding: 24rpx;
}

// ...分割线
.dividing-line {
    border-bottom: 2rpx dashed #ccc;
    // margin: 20px 0;
}

.jy-coupon-card-bottom-left {
    width: 470rpx;
    height: 40rpx;
    transition: .8s;

    &-arrow {
        transition: .8s;
    }
}

.jy-coupon-card-bottom-right {
    padding: 8rpx 22rpx;
    background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
    border-radius: 10rpx;
    width: 100rpx;
    color: #fff;
}
</style>