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

推薦する

1時間で学ぶMySQLの基礎

目次MySQL を使い始めるMySQL 管理6. MySQL サーバーを起動および停止します。 7....

WeChat 8.0の爆発的な特殊効果を実現するために300行以上のCSSコードが必要

WeChat 8.0 アップデートの主な特徴は、アニメーション絵文字のサポートです。送信するメッセー...

MySQL共通インデックスとユニークインデックスの選択に関する詳細な分析

各人が固有の携帯電話番号で登録し、ビジネス コードによって重複する携帯電話番号が 2 つ書き込まれな...

CSS ボーダーは四隅の実装コードを追加します

1.html <div class="ログインボディ"> <...

MySQL デッドロック ルーチン: 一意のインデックスの下でのバッチ挿入順序の不一致

序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...

Vue を使用して 2 つのデータ セットの違いを比較する視覚化コンポーネントの詳細な説明

目次必要:要点:これまでの要点に従って、コンポーネントのプロパティを確立できます。コンポーネントの基...

Docker可視化ツールPortainerの導入と中国語翻訳

#docker 検索#docker プルポーター1. イメージを取得した後、中国語パッケージをダウン...

入力ボックスのオートコンプリート機能をオフにする

これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...

Centos 7.4 でリモート アクセス制御を実装する方法

1. SSHリモート管理SSH はセキュア チャネル プロトコルであり、主にリモート ログイン、リモ...

Vueプロジェクトでlessを使用するためのヒント

目次序文1. スタイルの浸透1. パターン浸透とは何ですか? 2. 使い方は? 2. ミキシング1....

MySQL でデータの重複挿入を回避する 4 つの方法

最も一般的な方法は、フィールドに主キーまたは一意のインデックスを設定することです。重複データを挿入す...

デザイン理論: コンテンツプレゼンテーションのための 10 のヒント

<br /> テキスト、記号、リンクの3つの側面に焦点を当て、主に中国語で、個人的な執筆...

Javascript Bootstrapのグリッドシステム、ナビゲーションバー、カルーセルの詳細な説明

目次ブートストラップと関連コンテンツの紹介グリッドシステムネストされた列列オフセット列の並べ替えナビ...

Docker CPU 制限の実装

1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...

MySQL での重複キー更新時の replace into と insert into の使用法と相違点の分析

この記事では、MySQL での重複キー更新時の replace into と insert into...