77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
|
<!-- 优惠券卡片 -->
|
|||
|
|
<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>
|