119 lines
2.5 KiB
Vue
119 lines
2.5 KiB
Vue
<template>
|
|
<view class='coupon-content' @click.stop='()=>{emits("confirm")}'>
|
|
<image v-if='item?.status==0' :src='assetsUrl("bg_coupon.png")' />
|
|
<image v-else-if='item?.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
|
|
<view class='left-content accent-text-color' :class='{"left-content-disabled": item?.status==1}'>
|
|
<text>{{ item?.reduce }}</text>
|
|
<text>满{{ item?.threshold }}元可用</text>
|
|
</view>
|
|
|
|
<view class='right-content accent-text-color' :class='{"right-content-disabled": item?.status==1}'>
|
|
<text>{{ item?.name }}</text>
|
|
<text>有效期至{{ dayjs(item?.startTime).format('YYYY-MM-DD') }}</text>
|
|
<image v-if='item?.status==0' class='checkbox'
|
|
:src='assetsUrl(item.checked?"ic_checkbox_active.png":"ic_checkbox_normal.png")'
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script lang='ts' setup>
|
|
import { PropType } from 'vue';
|
|
|
|
import { assetsUrl } from '@/utils/assets';
|
|
import { CouponBean } from '@/api/user/types';
|
|
import dayjs from 'dayjs';
|
|
|
|
defineProps({
|
|
item: Object as PropType<CouponBean>
|
|
});
|
|
|
|
const emits = defineEmits(['confirm']);
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.coupon-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 200rpx;
|
|
position: relative;
|
|
margin: 10rpx 0 10rpx 0;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
|
|
.left-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-left: 50rpx;
|
|
|
|
text:nth-of-type(1) {
|
|
font-size: 55rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
text:nth-of-type(1):after {
|
|
content: '元';
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
text:nth-of-type(2) {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.left-content-disabled {
|
|
@extend .left-content;
|
|
color: #C2C2C2;
|
|
}
|
|
|
|
.right-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
flex: 1;
|
|
justify-content: center;
|
|
margin-left: 60rpx;
|
|
|
|
text:nth-of-type(1) {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
text:nth-of-type(2) {
|
|
font-size: 26rpx;
|
|
margin-top: 20rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.checkbox {
|
|
display: flex;
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
right: 36rpx;
|
|
}
|
|
}
|
|
|
|
.right-content-disabled {
|
|
@extend .right-content;
|
|
color: #C2C2C2;
|
|
|
|
text:nth-of-type(2) {
|
|
color: #C2C2C2;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|