この記事の例では、ショッピングカートの計算を実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL パスワードは正しいが、ローカルにログインできない -1045
>>: アイデアを war パッケージにパッケージ化し、tomcat にデプロイしてアクセス パスの問題 (図とテキスト)
1.マスクレイヤーのHTMLコードと画像をdivに配置する.img_div に入れました。 <...
1. デフォルトでアクセスするには、curl コマンドを使用します。 # curl -I http:...
過去 15 日間のデータをバックアップするシンプルな MySQL 完全バックアップ スクリプト。バッ...
目次1. Flinkの概要1.1 基本的な紹介1.2 アプリケーションシナリオ2. 環境の展開2.1...
この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...
目次コンセプト紹介論理的ルール完全なコード主な実装コンセプト紹介セルオートマトンとは、コンピュータの...
目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...
jar パッケージを Docker コンテナに変換する方法1.まずJavaイメージをダウンロードする...
ミニプログラムカスタムスクロールビュースクロールバーさっそくレンダリングを見てみましょうレンダリング...
コマンド パターンは、JavaScript デザイン パターンにおける動作デザイン パターンです。定...
公式サイトからダウンロード: https://www.mysql.com MySQLの公式サイトにア...
目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...
High Performance MySQL バージョン 3 (セクション 4.1.7) を見ると、...
著者 | 編集者 Awen | 制作 Tu Min | CSDN (ID: CSDNnews)不満を...
この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...