cls/ui/src/app/home/article-buy/article-buy.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="返回" defaultHref="/home"></ion-back-button>
    </ion-buttons>
    <ion-title>订购文章</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 文章信息 -->
  <div class="article-info">
    <div class="article-preview">
<!--      <img [src]="''" class="preview-img" alt="文章封面">-->
      <div class="preview-text">
        <p class="title">{{article!.title}}</p>
        <p class="desc">{{article!.brief}}</p>
      </div>
    </div>
  </div>

  <!-- 价格选项 -->
  <div class="price-section">
    <div class="price-row">
      <span class="permanent-tag">永久有效</span>
      <div class="content">
        <div class="left">
          <span class="type-text">单篇解锁</span>
          <span *ngIf="price.discount!=1" class="discount-tag">{{(price.discount || 0.3) * 10}}折</span>
        </div>
        <div class="right">
          <span class="original-price">¥{{price.amount/100 || 1888}}</span>
          <span class="current-price">¥{{getDiscountPrice(price.amount,price.discount)|| 566.4}}</span>
          <ion-icon name="checkmark-circle" class="select-icon"></ion-icon>
        </div>
      </div>
    </div>
  </div>

  <!-- 更多折扣 -->
  <div class="more-discount" (click)="showMoreDiscounts()">
    <span>更多折扣优惠 >></span>
  </div>

  <!-- 优惠券 -->
<!--  <div class="coupon-section">-->
<!--    <div class="section-title">优惠券</div>-->
<!--    <div class="coupon-info" (click)="showCoupons()">-->
<!--      <span class="no-coupon">无可用优惠券</span>-->
<!--      <ion-icon name="chevron-forward-outline"></ion-icon>-->
<!--    </div>-->
<!--  </div>-->
  <app-coupon-list [coupons]="coupons" [amount]="this.getDiscountPrice(this.price.amount,this.price.discount)" (couponSelected)="couponSelected($event)" ></app-coupon-list>
  <!-- 底部固定容器 -->
  <div class="bottom-fixed-wrapper">
    <!-- 提交按钮 -->
    <ion-button expand="block" class="submit-btn" [disabled]="getDiscountPriceAndCoupon(price.amount, price.discount) <= 0" (click)="submitOrder()">
      确认支付 ¥{{(getDiscountPriceAndCoupon(price.amount, price.discount) - this.couponAmount).toFixed(2)}}
    </ion-button>

    <app-lc-fixed-bar></app-lc-fixed-bar>
  </div>
</ion-content>