javascript - Ionic 2 电子商务动态计算金额

Question

我正在开发电子商务应用程序。

我需要动态计算金额。

这是我的 Html 代码。

我在数组中有 Cartproducts 值。并使用 *ngfor 显示产品列表。

<div class="cart" >

        <div>
            <ion-row class="product-in-cart" padding *ngFor="let p of Cartproducts;let i=index">
                <ion-col col-4 class="pic-blk">
                    <img class="pic-image" src="{{p.P_IMAGES[0].URL}}" alt="product2">

                    <ion-row>
                        <ion-col col-4 class="minus">
                            <button ion-button outline small><ion-icon name="remove" (click)="countOperator(-1,p,i)"></ion-icon></button>
                        </ion-col>

                        <ion-col col-4 class="label">
                            <ion-label text-center *ngIf="Pid != p.C_ID || count <= 1">1</ion-label>
                            <ion-label text-center *ngIf="Pid == p.C_ID && count > 1">{{count}}</ion-label>
                        </ion-col>

                         <ion-col col-4 class="plus">
                            <button ion-button outline small><ion-icon name="add" (click)="countOperator(1,p,i)"></ion-icon></button>
                        </ion-col>
                    </ion-row>  
                </ion-col>
                <ion-col col-8 class="pic-details">
                    <h1>{{p.P_TITLE}}</h1>
                    <p class="subtitle">Subtitle</p>
                    <p class="code">Code: 123</p>

                    <ion-row class="price-blk"> 
                        <ion-col width-50 class="product-per-price"><img src="./assets/images/rupee-black.svg" alt="Rupee" >{{p.PRICE_SALE}} <em>/ Unit</em></ion-col>

                        <ion-col width-50 text-right class="product-full-price" ><img src="./assets/images/rupee-black.svg" alt="Rupee" *ngIf="Price == i">{{count * p.PRICE_SALE}}</ion-col>
                    </ion-row>

                    <div class="cancel">
                        <button (click)="cancel(i)">Cancel X</button>
                    </div>
                </ion-col>  
            </ion-row>
        </div>

        <div padding class="apply-coupon-blk">  
            <p class="blk-text-title">Apply Coupon</p>

            <ion-row class="apply-coupon">
                <ion-col col-8>
                    <ion-input type="text" placeholder="Type coupon code"></ion-input>
                </ion-col>
                <ion-col col-4>
                    <button ion-button block class="apply-btn">Apply</button>
                </ion-col>
            </ion-row>
        </div>

        <div padding class="price-summary-blk">
            <p class="blk-text-title">Price Details</p>

            <ion-row>
                <ion-col>Sub Total</ion-col>
                <ion-col text-right><img src="./assets/images/rupee-black.svg" alt="Rupee">4000</ion-col>
            </ion-row>

            <ion-row>
                <ion-col>Estimated Tax(%)</ion-col>
                <ion-col text-right><img src="./assets/images/rupee-black.svg" alt="Rupee">200</ion-col>
            </ion-row>

            <ion-row padding-top class="total">
                <ion-col>Total</ion-col>
                <ion-col text-right><img src="./assets/images/rupee-black.svg" alt="Rupee">4200</ion-col>
            </ion-row>
        </div>
    </div>

这是我的模板。

如果我需要增加第一个产品(Martina)中的产品数量。

因此，我点击 + 图标并增加产品数量。我使用 {{count * p.PRICE_SALE}} 显示金额。但是金额将会更改产品。

我还需要计算SubTotal和Total

这是我的 countOperator 方法

countOperator(operator,s,i){

    if(this.count >= 1){
      this.show1=false;
      this.count += operator;
    }
    if(this.count < 1){
      this.show1=false;
      this.count = 1;
    }
  }

这是我的购物车产品数组

 [
  {
    "P_ID": 1,
    "C_ID": 1,
    "SKU": 0,
    "P_TITLE": "Martina",
    "P_TYPE": "simple",
    "P_DESCRIPTION": "Commodo adipisicing officia non excepteur officia nostrud. Eu voluptate amet elit nulla.",
    "P_STOCK": 100,
    "PRICE_REGULAR": 194,
    "PRICE_SALE": 161,
    "P_ATTR": [
      {}
    ],
    "P_IMAGES": [
      {
        "URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparkler.svg?alt=media&token=5fde41cc-2c6c-4dcc-9749-59dda751206b"
      },
      {
        "URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparkler.svg?alt=media&token=5fde41cc-2c6c-4dcc-9749-59dda751206b"
      }
    ],
    "P_STATUS": "Active",
    "id": "595f3e418c4d19b50ac21b84"
  },
  {
    "P_ID": 2,
    "C_ID": 1,
    "SKU": 1,
    "P_TITLE": "Kristen",
    "P_TYPE": "simple",
    "P_DESCRIPTION": "Laborum cupidatat dolor tempor cillum incididunt in veniam nisi dolore.",
    "P_STOCK": 100,
    "PRICE_REGULAR": 130,
    "PRICE_SALE": 174,
    "P_ATTR": [
      {}
    ],
    "P_IMAGES": [
      {
        "URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparklers-brothers-18-inch-large-gold-sparklers-pack-of-10-1_large.jpeg?alt=media&token=28b1be61-f346-4801-8300-9f0a86a5942f"
      },
      {
        "URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/sparklers-brothers-18-inch-large-gold-sparklers-pack-of-10-1_large.jpeg?alt=media&token=28b1be61-f346-4801-8300-9f0a86a5942f"
      }
    ],
    "P_STATUS": "Active",
    "id": "595f3e418c4d19b50ac21b85"
  },
  {
    "P_ID": 3,
    "C_ID": 1,
    "SKU": 2,
    "P_TITLE": "Jayne",
    "P_TYPE": "simple",
    "P_DESCRIPTION": "Anim ad et sunt aliquip proident fugiat deserunt.",
    "P_STOCK": 100,
    "PRICE_REGULAR": 215,
    "PRICE_SALE": 184,
    "P_ATTR": [
      {}
    ],
    "P_IMAGES": [
      {
        "URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/Sparklers2502502.jpg?alt=media&token=979a1c5f-4e5c-4dbf-8d8a-e2358b6e1001"
      },
      {
        "URL": "https://firebasestorage.googleapis.com/v0/b/test-46a7f.appspot.com/o/Sparklers2502502.jpg?alt=media&token=979a1c5f-4e5c-4dbf-8d8a-e2358b6e1001"
      }
    ],
    "P_STATUS": "Active",
    "id": "595f3e428c4d19b50ac21b86"
  }
]

我不知道。

请给我建议，

谢谢

Answer 1

您可以按照以下步骤来实现此目的:

• 在 Cartproducts 数组中添加计数属性。
• 更新您的产品中所选产品的计数属性countOperator() 函数。
• 将 {{count * p.PRICE_SALE}} 替换为 {{p.count * p.PRICE_SALE}}

希望这会有所帮助。