140 lines
2.6 KiB
Vue
140 lines
2.6 KiB
Vue
<!-- 优惠券图标 -->
|
|
<template>
|
|
<view class="container">
|
|
<view class="icon icon1" v-if="props.item.couponType == 1">
|
|
<view class="top">
|
|
<text class="i" >￥</text>
|
|
<text class="num" >{{ props.item.discountAmount }}</text>
|
|
</view>
|
|
<view class="intro">
|
|
<text class="t">满{{ props.item.fullAmount }}可用</text>
|
|
</view>
|
|
</view>
|
|
<view class="icon icon2" v-if="props.item.couponType == 2">
|
|
<view class="top">
|
|
<text class="i" >{{ props.item.discountNum }}件</text>
|
|
<text class="num" >商品兑换</text>
|
|
</view>
|
|
<view class="intro">
|
|
<text class="t">满{{ props.item.fullAmount }}可用</text>
|
|
</view>
|
|
</view>
|
|
<view class="icon icon3" v-if="props.item.couponType == 3">
|
|
<view class="top">
|
|
<text class="num" >{{ props.item.discountRate/10 }}折</text>
|
|
</view>
|
|
<view class="intro">
|
|
<text class="t">满{{ props.item.fullAmount }}可用</text>
|
|
</view>
|
|
</view>
|
|
<view class="icon icon2" v-if="props.item.couponType == 4">
|
|
<view class="top">
|
|
<text class="i" >第二件</text>
|
|
<text class="num" >半价券</text>
|
|
</view>
|
|
</view>
|
|
<view class="icon icon2" v-if="props.item.couponType == 6">
|
|
<view class="top">
|
|
<text class="i" >买一送</text>
|
|
<text class="num" >一券</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$color: #ff1c1c;
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
|
|
.icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&.icon1 {
|
|
.top {
|
|
.i {
|
|
color: $color;
|
|
font-size: 24upx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.num {
|
|
color: $color;
|
|
font-size: 72upx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.icon2 {
|
|
.top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.i {
|
|
color: $color;
|
|
font-size: 34upx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.num {
|
|
color: $color;
|
|
font-size: 34upx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.icon3 {
|
|
.top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.i {
|
|
color: $color;
|
|
font-size: 34upx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.num {
|
|
color: $color;
|
|
font-size: 52upx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.intro {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.t {
|
|
font-size: 22upx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |