更新时间：2023-02-09 GMT+08:00
app-preview-card-voucher组件
HTML
<div class="card-voucher">
<div class="content">
<div class="content_top">
<div *ngIf="item.content.voucheType === 0" class="content_top_text1">￥</div>
<div class="content_top_text2">
{{headLeft}}
</div>
<div class="content_top_textBox">
<p class="content_top_text3">{{ headRightTop }}</p>
<p class="content_top_text4">
{{headRightBottom}}
</p>
</div>
</div>
<div class="content_middle" [innerHTML]="item.content.divText.text5.textValue"></div>
<div class="content_bottom">
{{ transform (item)}}
</div>
</div>
<img class="logo" (click)="events(item.content.divImage)" [src]="item.content.divImage.src" alt="" />
<div (click)="events(item.content.divButton)" class="button">{{ item.content.divButton.textValue }}</div>
</div>
CSS
.card-voucher {
position: relative;
height: 364px;
background-image: url(https://aim6.oss-cn-beijing.aliyuncs.com/editor_file/card-voucherBg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
.logo {
width: 70px;
height: 70px;
position: absolute;
left: 50%;
margin-left: -35px;
top: 180px;
bottom: 10px;
right: 20px;
border-radius: 70px;
}
.button {
width: 290px;
height: 40px;
background-color: #ffbf00;
border-radius: 20px;
text-align: center;
color: #fff;
line-height: 40px;
font-size: 16px;
position: absolute;
bottom: 35px;
left: 26px;
}
.content {
padding-top: 50px;
box-sizing: border-box;
&_top {
display: flex;
justify-content: center;
color: #fa282b;
height: 60px;
align-items: center;
&_text1 {
font-size: 20px;
margin-right: 0px;
padding-top: 20px;
box-sizing: border-box;
}
&_text2 {
font-size: 46px;
margin-right: 10px;
font-weight: bold;
}
&_textBox {
.content_top_text3 {
border: 1px solid #fa282b;
padding: 1px 3px;
border-radius: 4px;
box-sizing: border-box;
font-size: 12px;
margin-bottom: 2px;
display: inline-block;
}
.content_top_text4 {
font-size: 17px;
}
}
}
&_middle {
text-align: center;
color: #a62929;
font-size: 13px;
font-weight: 700;
height: 18px;
width: 280px;
margin: 0 auto 8px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
&_bottom {
text-align: center;
color: #a62929;
font-size: 12px;
}
}
}
JavaScript
import { PreviewService };
// 自定义的参数
headLeft;
headRightTop;
headRightBottom;
// 初始化函数
ngOnInit(){
this.inintData();
}
inintData() {
let type = this.item.content.voucheType;
if (type === 0) {
this.headLeft = this.item.content.fullMinus.reduction;
this.headRightTop = '满减券';
this.headRightBottom = `满${this.item.content.fullMinus.money}可用`;
} else if (type === 1) {
this.headLeft = this.item.content.discount.fracture + '折';
this.headRightTop = '折扣券';
this.headRightBottom = `满${this.item.content.discount.money}可用`;
} else if (type === 2) {
this.headLeft = this.item.content.custom.money;
this.headRightTop = this.item.content.custom.tagName;
this.headRightBottom = this.item.content.custom.threshold;
}
}
// 点击事件
events(val) {
this.PreviewService.emit(val.event);
}
// 对数据做判断处理
transform(item, ...args ){
if (item.dateType === 0) {
return item.fixedDate.join('~');
} else if (item.dateType === 1) {
return `领取后${item1.termValidity}天后有效`;
} else if (item.content?.voucheType === 2) {
return `${item.content.fixedDate[0]}~${item.content.fixedDate[1]}`;
}
return null;
}
父主题： 子组件代码示例
