ショッピングカートの計算を実現する 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 Autofs 自動マウント サービスのインストールと展開のチュートリアル

目次1. autofs サービスの紹介2. Autofsのインストールと展開3. Autofs効果の...

Rabbitmq heartbea ハートビート検出メカニズムの原理の分析

序文RabbitMQ を使用する場合、一定期間クライアントと RabbitMQ サーバーの間でトラフ...

Ckeditor + Ckfinderを使用したJavaScriptファイルアップロードケースの詳細な説明

目次1. 準備2. 減圧3. 統合を開始する1. 準備Ckeditor_4.5.7_full + C...

EclipseでTomcatを作成する原理の詳細な説明

ローカルEclipse上にTomcatサーバーを作成する場合、 tomcaインストールディレクトリの...

Mysql 5.6ではユーザー名とパスワードを変更するメソッドが追加されました

まずMySQLにログインする シェル> mysql --user=root mysqlパスワー...

Vue で計算プロパティを使用する際の知識ポイントのまとめ

計算されたプロパティ場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなり...

Linux のタイムドログ削除を実装する簡単な方法

導入Linux は、ファイル、ログ、電子メール、バックアップなどを自動的に生成できるシステムです。ハ...

Docker で Confluence をデプロイする

1. 環境要件1. Docker 17以上がインストールされている2. コンテナ操作docker r...

CSS ラベルモード表示プロパティの詳細な説明

コードは次のようになります。 <!DOCTYPE html> <html> ...

Harborを使用してプライベートDockerリポジトリを構築する方法

目次1. オープンソースの倉庫管理ツール Harbor 2 インストール2.1 DockerとDoc...

MysqlチューニングExplainツールの詳細な説明と実践的な演習(推奨)

MySQL チューニング ツールの詳細な説明と実践的な演習の説明 ツールの紹介の説明 分析例の説明...

vue3でDOMをマウントするためのプラグインを書く際の問題について

vue2と比較して、vue3にはアプリの概念が追加され、vue3プロジェクトの作成も // メイン....

Mysql 複数データベースのバックアップ コード例

この記事は主にMysqlの複数データベースのバックアップのコード例を紹介します。この記事ではサンプル...

MySQL テーブルとデータベース シャーディングのアプリケーション シナリオと設計方法

多くの友人がフォーラムやメッセージエリアで、どのような状況で MySQL をシャーディングする必要が...

get メソッドによる HTML フォームの値転送の例

google.htmlインターフェースは図の通りですコードは図のとおりです: (比較的シンプルで、入...