更新时间：2023-02-09 GMT+08:00
app-preview-card-vouchers组件
HTML
<div [style]="item.style" class="cardVouchers">
// innerHTML会把代码片段插入到当前节点中
<div class="title" [innerHTML]="item.content.divText.text1.textValue"></div>
<div class="content">
// ngFor为循环指令
<div class="content-item" *ngFor="let item1 of item.content.divItemList">
<div class="content-item-left">
<div class="content-item-left-tip">{{ item1.voucheType === 0 ? '满减卷' : '折扣卷' }}</div>
<div class="content-item-left-middle">
<span *ngIf="item1.voucheType === 0" class="symbol">¥</span>
<span class="money">{{
item1.voucheType === 0 ? item1.fullMinus.reduction : item1.discount.fracture + '折'
}}</span>
</div>
<div class="content-item-left-bottom">
满{{ item1.voucheType === 0 ? item1.fullMinus.money : item1.discount.money }}可用
</div>
</div>
<div class="content-item-right">
<div class="content-item-right-name" [innerHTML]="item1.divText.text5.textValue"></div>
<div class="content-item-right-date">
{{ transform(item1) }}
</div>
<div (click)="events(item1.divButton)" *ngIf="item.content.buttomType === 1" class="content-item-right-button">
{{ item1.divButton.textValue }}
</div>
</div>
</div>
</div>
<div (click)="events(item.content.divButton)" *ngIf="item.content.buttomType === 0" class="button">
{{ item.content.divButton.textValue }}
</div>
</div>
CSS
.cardVouchers {
height: 100%;
background-color: #f32c3d;
.title {
font-size: 20px;
color: #fff;
text-align: center;
line-height: 64px;
background-color: initial;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 12px;
box-sizing: border-box;
}
.button {
width: 290px;
height: 40px;
background-color: #ffbf00;
border-radius: 20px;
text-align: center;
color: #fff;
line-height: 40px;
font-size: 16px;
margin: 0 auto;
}
.content {
padding: 0 9px 8px;
box-sizing: border-box;
&-item {
height: 90px;
background-color: #fff5eb;
border-radius: 7px;
margin-bottom: 10px;
position: relative;
display: flex;
align-items: center;
&-left {
width: 104px;
height: 100%;
text-align: center;
padding-top: 20px;
box-sizing: border-box;
&-tip {
background-color: #feded6;
border-radius: 7px 0 7px 0;
padding: 3px 5px;
position: absolute;
left: 0;
top: 0;
color: #fa282b;
font-size: 12px;
}
&-middle {
color: #fa282b;
.symbol {
font-size: 14px;
margin-right: 2px;
}
.money {
font-size: 30px;
}
}
&-bottom {
font-size: 12px;
color: #a62929;
}
}
&-right {
border-left: 2px solid #febab4;
height: 72px;
flex: 1;
padding: 0 8px;
box-sizing: border-box;
&-name {
color: #a62929;
font-size: 13px;
font-weight: 700;
height: 40px;
line-height: 20px;
margin-bottom: 17px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: left;
}
&-date {
color: #a62929;
font-size: 12px;
text-align: left;
}
&-button {
width: 58px;
height: 26px;
border-radius: 27px;
background-color: #ffbf00;
color: #fff;
text-align: center;
line-height: 26px;
font-size: 12px;
position: absolute;
bottom: 4px;
right: 4px;
}
}
}
}
}
JavaScript
// 点击事件
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;
}
父主题： 子组件代码示例
