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

推薦する

SQL における参照整合性の詳細な説明 (1 対 1、1 対多、多対多)

1. 参照整合性参照整合性とは、主に外部キー制約を使用した複数のテーブル間の設計を指します。複数テ...

MySQLクエリツリー構造方式

目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...

Vue3 コンポジション API の紹介

目次概要例なぜそれが必要なのでしょうか?設定参照、反応的計算して見るライフサイクルVue3.0 は ...

MySQL 起動エラーを解決する: エラー 2003 (HY000): 'localhost' の MySQL サーバーに接続できません (10061)

このエラーは初心者によく発生します。この記事では主に、エラー 2003 (HY000): '...

vue data が関数である理由をご存知ですか?

公式サイトの説明: コンポーネントを定義する場合、コンポーネントは複数のインスタンスを作成するために...

Dockerを使用してSonarQubeをインストールする詳細なチュートリアル

目次1. イメージをプルする1.1 関連するイメージをプルして実行する1.1.1 関連する画像を取得...

TypeScript を使用して Vue3 で axios をカプセル化する詳細な例

この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...

Vueの子コンポーネントが親コンポーネントのメソッドを呼び出す場合の詳細な説明

1. 子コンポーネントのthis.$parent.eventを通じて親コンポーネントメソッドを直接呼...

Tomcatの動作原理を分析する

SpringBoot は巨大な Python のようで、ゆっくりと私たちの周りを巻きつき、麻痺させま...

MySQL Limitクエリのパフォーマンスを向上させる方法

MySQL データベース操作では、一部のクエリを実行するときにデータベース エンジンが完全なテーブル...

ウェブデザイン実践者必読のキャリアプラン

原文記事、転載の際は著者と出典を明記してください! Web デザインは間違いなくテクノロジーであり、...

WeChatアプレットはシンプルな計算機を実装する

参考までにWeChatアプレットで書かれた簡単な計算機です。具体的な内容は次のとおりです。 jisa...

MySQL の最適化: 高品質の SQL 文を書く方法

序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...

JQueryセレクターの詳細な説明

目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...

KVM 仮想マシンのオンライン ホット マイグレーションを実装する方法 (画像とテキスト)

1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...