ショッピングカートの計算を実現する js メソッド

ショッピングカートの計算を実現する js メソッド

この記事の例では、ショッピングカートの計算を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

各店舗には対応する商品オプションがあり、店舗別に選択、商品選択、店舗選択、商品数量の増減、削除が可能です。

コード:

<スクリプト>
エクスポートデフォルト{
    データ() {
        戻る {
            count:0, //全商品の数 shopCarList: [], //全商品 selectList:[] //選択した商品}
    },
    計算: {
        //選択した合計価格 selectPrice(){
            this.selectList.reduce((total,item,index)=>{ を返します。
                合計+item.quantity*(item.activityPrice || item.price) を返します。
            },0)
        },
        //選択の合計数 selectNum(){
            this.selectList.reduce((total,item,index)=>{ を返します。
                合計+アイテム.数量を返します。
            },0)
        },
        //すべて選択するかどうか isSelectetAll(){
            this.shopCarList.every(item=>{ を返します。
                item.shopSelect===true を返します
            })
        }
    },
    メソッド: {
        //インクリメント(itm){
            itm.quantity<itm.stock?itm.quantity++:'';
        },
        //減分 decrement(itm){
            itm.quantity>1?itm.quantity--:''
        },
        //すべて選択 allChooseHandle() をクリック{
            this.initSelectAll(!this.isSelectAll);
        },
        //商品の単一選択クリック productChooseHandle(itm,index){
            productFlag = !itm.productSelect; とします。
            これを$set(itm,'productSelect',productFlag);
 
            shopFlag = this.shopCarList[index].products.every(i=>{ とします。
                i.productSelect===true を返します。
            })
            this.$set(this.shopCarList[index],'shopSelect',shopFlag);
            選択されたものを取得します。
        },
        //ショップの単一選択クリック shopChooseHandle(item,index){
            Flag = !item.shopSelect; とします。
            this.$set(item,'shopSelect',フラグ);
            アイテム.製品.forEach((itm,idx)=>{
                this.$set(itm,'productSelect',フラグ);
            })
            選択されたものを取得します。
        },
        //選択された商品を取得する getSelected(){
            tempArr = [] とします。
            this.shopCarList.forEach((item,index)=>{
                アイテム.製品.forEach((itm,idx)=>{
                    if(itm.productSelect){
                        tempArr.push(itm);
                    }
                })
            })
            this.selectList = tempArr;
        },
        //すべて選択するかどうかの初期化 initSelectAll(Flag){
            this.shopCarList.forEach((item,index)=>{
                this.$set(item,'shopSelect',フラグ);
                アイテム.製品.forEach((itm,idx)=>{
                    this.$set(itm,'productSelect',フラグ);
                })
            })
            選択されたものを取得します。
        },
        //ショッピングカートリストを取得する getCarList(){
            これを返します。$api.personal.getCarList().then(res=>{
                結果==='000'の場合
                    //期限切れの商品の数 let expiredNum = 0;
                    res.data.expiredList.forEach(item=>{
                        アイテム.製品.forEach(itm=>{
                            期限切れ数 += 数量
                        })
                    })
                    // 有効な商品数量 this.count = res.data.count - expiredNum;
                    ショップカーリストを作成します。
                    Promise.resolve() を返す
                }
            })
        },
        //クリック削除 delCarList(itm,index,idx){
            this.$api.personal.delCarList( [itm.carId] ).then(res=>{
                結果==='000'の場合
                    this.count -= itm.quantity;
                    this.shopCarList[index].products.splice(idx,1);
                    if(this.shopCarList[index].products.length===0){
                        this.shopCarList.splice(インデックス、1);
                    }
                    選択されたものを取得します。
                }
            })
        },
    },
    作成された() {
        this.getCarList().then(()=>{
            これをinitSelectAll(true);
        });
    },
};
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSはショッピングカート内の商品の合計金額の計算を実現します

<<:  MySQL パスワードは正しいが、ローカルにログインできない -1045

>>:  アイデアを war パッケージにパッケージ化し、tomcat にデプロイしてアクセス パスの問題 (図とテキスト)

推薦する

CSSはマウスが画像に移動したときにマスク効果を実現します

1.マスクレイヤーのHTMLコードと画像をdivに配置する.img_div に入れました。 <...

Nginx でバージョン番号を隠したり偽造したりする方法

1. デフォルトでアクセスするには、curl コマンドを使用します。 # curl -I http:...

MySQL の完全バックアップとクイックリカバリ方法

過去 15 日間のデータをバックアップするシンプルな MySQL 完全バックアップ スクリプト。バッ...

リアルタイムコンピューティングフレームワークFlinkクラスタの構築と動作メカニズムについての簡単な説明

目次1. Flinkの概要1.1 基本的な紹介1.2 アプリケーションシナリオ2. 環境の展開2.1...

MySQLプリコンパイル機能の詳細な説明

この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...

ライフゲームの JavaScript 実装

目次コンセプト紹介論理的ルール完全なコード主な実装コンセプト紹介セルオートマトンとは、コンピュータの...

Vueライフサイクルの詳細な説明

目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...

jar パッケージを Docker コンテナに変換する方法

jar パッケージを Docker コンテナに変換する方法1.まずJavaイメージをダウンロードする...

WeChat アプレットのカスタム スクロール ビューのサンプル コード

ミニプログラムカスタムスクロールビュースクロールバーさっそくレンダリングを見てみましょうレンダリング...

JavaScript デザインパターン コマンドパターン

コマンド パターンは、JavaScript デザイン パターンにおける動作デザイン パターンです。定...

MySQL 8.0.16 圧縮版のダウンロードと Win10 システムへのインストール チュートリアル

公式サイトからダウンロード: https://www.mysql.com MySQLの公式サイトにア...

順序再構築に関する簡単な説明: MySQL シャーディング

目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...

MySQL に IP アドレスを効果的に保存する方法と、文字列 IP と数値を変換する方法の詳細な説明

High Performance MySQL バージョン 3 (セクション 4.1.7) を見ると、...

エレメントアバターアップロード練習

この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...