ショッピングカートの計算を実現する 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 にデプロイしてアクセス パスの問題 (図とテキスト)

推薦する

Linux (Ubuntu 18.04) に vim エディタをインストールする方法

デスクトップ システムをダウンロードするには、Ubuntu の公式 Web サイト (https:/...

Centos7でのパーティションのフォーマットとマウントの実装

Linux では、ハードディスクの追加やパーティションの再マウントといった状況に頻繁に遭遇します。こ...

美しいチェックボックススタイル(複数選択ボックス)はIE8/9/10、FFなどと完全に互換性があります。

恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...

MySQLクライアント認証後の接続失敗の問題に対する完璧なソリューション

MySQL 環境をローカル (192.168.1.152) にデプロイし、リモート クライアント 1...

CSS (カスケーディング スタイル シート) の一般的な用語の概要

CSS を使用する場合は、DOCTYPE (ドキュメント タイプ定義) を記述することを忘れないでく...

Linux ファイアウォール設定の詳細な手順 (yum ウェアハウス設定に基づく)

序文この実験では、デバッグ用に2つの仮想マシン(CentOs6とRed Hat 6)を準備します。 ...

Vue2.0は適応解像度を実装する

この記事では、適応解像度を実現するためのVue2.0の具体的なコードを参考までに紹介します。具体的な...

Vueはマーキースタイルのテキストの水平スクロールを実装します

この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...

MySQLクエリのパフォーマンスを分析する方法

目次スロークエリの基礎: データ取得の最適化データベースから不要なデータが要求されていないか確認する...

MySQLパーティションテーブルは月別に分類されています

目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...

この記事では、6つの負荷分散技術の実装方法をまとめます(要約)

ロード バランシングは、サーバー クラスタの展開でよく使用されるデバイスです。マシンのパフォーマンス...

MYSQL SERVER のログファイルを縮小する方法

トランザクション ログには、関連するデータベースに対する操作が記録され、データベースの回復に関連する...

HTML テーブルに複雑なテーブル ヘッダーを実装するためのサンプル コード

複雑な表を作成するには HTML を使用します。複雑なテーブルでは通常、td の rowspan 属...

CSSのマッチング問題を解決する

問題の説明ご存知のとおり、CSS を記述する場合、HTML のクラスの定義または ID の定義に従っ...

JavaScript PromiseとAsync/Awaitの詳細な説明

目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...