完全なショッピングカートを実装するためのミニプログラム

<view wx:if="{{hasList}}">
  <view class="order_list">
    <view class="order" wx:for="{{list}}" wx:key="{{index}}">
      <view class="xuanze" wx:if="{{item.selected}}" catchtap="selectList" data-index="{{index}}">
        <画像 src="/images/serch/xuanze.png" />
      </ビュー>
      <view class="xuanze" catchtap="selectList" data-index="{{index}}" wx:else>
        <画像 src="/images/serch/gouxuan.png" />
      </ビュー>
      <!--製品画像の一覧-->
      <view class="order_img">
        <画像 src="{{item.image}}" />
      </ビュー>
      <view class="order_text">
        <view class="text_top">
          <!--リストタイトル-->
          <view class="title">{{item.title}}</view>
          <view class="detel" catchtap="deletes" data-index="{{index}}">
            <画像 src="/images/serch/detel.png" />
          </ビュー>
        </ビュー>
        <!--仕様-->
        <view class="size">仕様: {{item.pro_name}}</view>
        <view class="text_bottom">
          <!--価格-->
          <view class="money">￥{{item.price}}</view>
          <!-- 商品の数量を追加または減らす -->
          <view class="number">
            <!--マイナスボタン-->
            <view class="reduce" catchtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">
              <!--ボタン画像-->
              <画像 src="/images/serch/jian-1.png" />
            </ビュー>
            <!--数量-->
            <view class="numb">{{item.num}}</view>
            <!--追加ボタン-->
            <view class="add" catchtap="btn_add" data-index="{{index}}">
              <!--ボタン画像-->
              <画像 src="/images/serch/add-1.png" />
            </ビュー>
          </ビュー>
        </ビュー>
      </ビュー>
    </ビュー>
  </ビュー>

  <!-- 下部を固定 -->
  <view class="buy">
    <view class="buy_top">
      <ビュークラス="top_left">
        <view class="left_img" catchtap="selectAll" wx:if="{{selectAllStatus}}">
          <画像 src="/images/serch/gouxuan.png" />
        </ビュー>
        <view class="left_img" catchtap="selectAll" wx:else>
          <画像 src="/images/serch/gouxuan.png" />
        </ビュー>
        <view class="left_name">すべて選択</view>
      </ビュー>
      <ビュークラス="top_left">
        <view class="left_img">
          <画像 src="/images/serch/fenxiang.png" />
        </ビュー>
        <view class="left_name">共有</view>
      </ビュー>
    </ビュー>
    <view class="buy_bottom">
      <view class="buy_left">
        <view class="heji">合計金額: ￥{{totalPrice}}</view>
      </ビュー>
      <view class="buy_right">
        <!--注文を送信-->
        <view class="liji " catchtap="btn_submit_order">今すぐ購入</view>
        <view class="liji two active">フィッティングの予約</view>
      </ビュー>
    </ビュー>
  </ビュー>
</ビュー>
<!--ショッピングカートに注文がありません-->
<wx:else を表示>
  <view class="list_none">ショッピングカートは空です～</view>
</ビュー>

ページ {
  背景色: rgba(238, 238, 238, 0.5);
}

。注文 {
  高さ: 238rpx;
  背景色: #fefeff;
  マージン: 27rpx;
  境界線の半径: 4rpx;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}

.玄澤{
  幅: 40rpx;
  高さ: 40rpx;
  /* 背景色: darkgoldenrod; */
  境界線の半径: 50%;
  マージン: 0 11rpx;
}

.画像を選択{
  幅: 100%;
  高さ: 100%;
  表示: ブロック;
  境界線の半径: 50%;
}

.order_img {
  幅: 180rpx;
  高さ: 180rpx;
}

.order_img 画像 {
  幅: 100%;
  高さ: 100%;
  表示: ブロック;
}

.order_text {
  左マージン: 20rpx;
  幅: 58%;
  高さ: 180rpx;
}

.text_top {
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースの間;
  アイテムの位置を中央揃えにします。
}

。タイトル {
  幅: 70%;
  フォントサイズ: 28rpx;
  色: #4b5248;
  ディスプレイ: -webkit-box;
  -webkit-box-orient: 垂直;
  -webkit-line-clamp: 1;
  オーバーフロー: 非表示;
}

.detel {
  幅: 30rpx;
  高さ: 30rpx;
}

.detel画像{
  幅: 100%;
  高さ: 100%;
  表示: ブロック;
}

。サイズ {
  フォントサイズ: 24rpx;
  色: #a8ada6;
}

.text_bottom {
  ディスプレイ: フレックス;
  上マージン: 50rpx;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
}

。お金 {
  フォントサイズ: 30rpx;
  色: #a5937f;
}

。番号 {
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースを空ける;
  アイテムの位置を中央揃えにします。
  幅: 170rpx;
}

。減らす {
  幅: 46rpx;
  高さ: 46rpx;
}

.reduce画像{
  幅: 100%;
  高さ: 100%;
  表示: ブロック;
}

。麻痺 {
  フォントサイズ: 30rpx;
  色: #a5937f;
}

。追加 {
  幅: 46rpx;
  高さ: 46rpx;
}

.画像を追加{
  幅: 100%;
  高さ: 100%;
  表示: ブロック;
}

/*購入ボタン*/

。買う {
  高さ: 180rpx;
  幅: 696rpx;
  位置: 固定;
  左: 27rpx;
  下部: 41rpx;
  背景色: #555555f3;
  境界線の半径: 4rpx;
}

.buy_top {
  下境界線: 1px 実線 rgb(98, 98, 99);
  高さ: 75rpx;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
}

.左上 {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}

.left_img {
  幅: 37rpx;
  高さ: 37rpx;
  マージン: 11rpx;
}

.left_img 画像 {
  幅: 100%;
  高さ: 100%;
  表示: ブロック;
}

.左の名前{
  フォントサイズ: 24rpx;
  色: #fefeff;
  右マージン: 29rpx;
}

.buy_bottom {
  ディスプレイ: フレックス;
  高さ: 104rpx;
  コンテンツの両端揃え: スペースの間;
  アイテムの位置を中央揃えにします。
  パディング: 0rpx 30rpx 0rpx 12rpx;
}

.buy_left {
  フォントサイズ: 26rpx;
  色: #fff;
}

.購入権{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}

.liji {
  幅: 180rpx;
  高さ: 70rpx;
  境界線: 2rpx実線rgba(248, 248, 248, 1);
  ボックスのサイズ: 境界線ボックス;
  境界線の半径: 4rpx;
  行の高さ: 70rpx;
  テキスト配置: 中央;
  フォントサイズ: 26rpx;
  色: #FEFEFF;
}
。二{
  左マージン: 12rpx;
}
。アクティブ{
  背景色: #A5937F;
  境界線: なし;
}

ページ（{

  /**
   * ページの初期データ */
  データ： {
    hasList: true, //デフォルトの表示リストデータ //製品リストデータ list: [{
        id: 1,
        タイトル: 「ガーデナーズ アンチリンクル エッセンス」
        画像: '/images/serch/2.png',
        pro_name: "30ml",
        番号: 1,
        価格: 180,
        選択: true
      },
      {
        id: 2,
        タイトル:「エブリンローズハンドクリーム」
        画像: '/images/serch/1.png',
        プロ名: "25g",
        番号: 1,
        価格: 62,
        選択: true
      },
      {
        id: 2,
        タイトル:「オートミール ヤギミルク スージング ハンドクリーム」
        画像: '/images/serch/2.png',
        pro_name: "75ml",
        番号: 1,
        価格: 175,
        選択: true
      }
    ]、
    //金額 totalPrice: 0, //合計価格、最初は0
    //すべてのステータスを選択 selectAllStatus: true, //すべてのステータスを選択、デフォルトですべて選択されています},

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数(オプション) {

  },

  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {
    wx.showToast({
      タイトル: 「読み込み中」
      アイコン: 「読み込み中」、
      期間: 1000
    })
    //価格メソッド this.count_price();

  },

  /** 現在の製品選択イベント*/
  選択リスト(e) {
    var that = this;
    //選択されたラジオ インデックスを取得します。var index = e.currentTarget.dataset.index;
    //製品リストデータを取得します。var list = that.data.list;
    // デフォルトですべて選択 that.data.selectAllStatus = true;
    //配列データをループし、選択/未選択を判断する[選択済み]
    リスト[インデックス].selected = !リスト[インデックス].selected;
    //配列データがすべて選択されている場合[true]、すべて選択する for (var i = list.length - 1; i >= 0; i--) {
      if (!list[i].selected) {
        that.data.selectAllStatus = false;
        壊す;
      }
    }
    // データを再レンダリングする that.setData({
      リスト: リスト、
      selectAllStatus: that.data.selectAllStatus
    })
    // 金額を計算するメソッドを呼び出します that.count_price();
  },

  // 削除 deletes(e) {
    var that = this;
    // インデックスを取得します。const index = e.currentTarget.dataset.index;
    // 製品リストデータを取得します。let list = this.data.list;
    wx.showModal({
      タイトル: 「ヒント」
      内容: 「本当に削除しますか?」
      成功: function(res) {
        （res.confirm）の場合{
          // インデックスを1から削除
          リスト.splice(インデックス、1);
          // ページレンダリングデータ that.setData({
            リスト: リスト
          });
          // データが空の場合 if (!list.length) {
            that.setData({
              リストがある: false
            });
          } それ以外 {
            // 金額レンダリングデータを呼び出します that.count_price();
          }
        } それ以外 {
          コンソールログ(res);
        }
      },
      失敗: 関数(res) {
        コンソールログ(res);
      }
    })
  },

  /** ショッピングカートの完全選択イベント*/
  すべて選択(e) {
    // デフォルトですべてのアイコンを選択します let selectAllStatus = this.data.selectAllStatus;
    // 真 ----- 偽
    すべてのステータスを選択します。
    // 製品データを取得します。let list = this.data.list;
    // リストをループして、データが選択されているかどうかを判断します for (let i = 0; i < list.length; i++) {
      リスト[i].selected = selectAllStatus;
    }
    // ページの再レンダリング this.setData({
      全てのステータスを選択: 全てのステータスを選択、
      リスト: リスト
    });
    // 金額を計算するメソッド this.count_price();
  },

  /** バインディングプラス数量イベント*/
  btn_add(e) {
    // クリックされたインデックスを取得します。const index = e.currentTarget.dataset.index;
    // 製品データを取得します。let list = this.data.list;
    // 製品の数を取得します。let num = list[index].num;
    // クリックして増加 num = num + 1;
    リスト[インデックス].num = num;
    // 再レンダリング --- 新しい数量を表示 this.setData({
      リスト: リスト
    });
    // 金額を計算するメソッド this.count_price();
  },

  /**
   * バインド数量削減イベント */
  btn_minus(e) {
    // // クリックされたインデックスを取得します。const index = e.currentTarget.dataset.index;
    // 定数 obj = e.currentTarget.dataset.obj;
    // コンソールログ(obj);
    // 製品データを取得します。let list = this.data.list;
    // 製品の数を取得します。let num = list[index].num;
    // num が 1 以下かどうかをチェックします return; 無効をクリックします if (num <= 1) {
      false を返します。
    }
    // それ以外の場合は、num が 1 より大きい場合は減算ボタンをクリックします。
    数値 = 数値 - 1;
    リスト[インデックス].num = num;
    // ページをレンダリングする this.setData({
      リスト: リスト
    });
    // 金額を計算するメソッドを呼び出します this.count_price();
  },

  // 注文を送信 btn_submit_order() {
    var that = this;
    console.log(that.data.totalPrice);

    // 支払いの呼び出し // wx.requestPayment(
    // {
    // 'タイムスタンプ': ''、
    // 'nonceStr': ''、
    // 'パッケージ'： ''、
    // 'signType': 'MD5',
    // 'paySign': ''、
    // '成功': function (res) { },
    // '失敗': 関数 (res) { },
    // '完了': 関数 (res) { }
    // })
    wx.showModal({
      タイトル: 「ヒント」
      内容: '合計金額 -' + that.data.totalPrice + "まだ開発されていません",
    })
  },

  /**
   * 合計金額を計算 */
  カウント価格() {
    // 製品リストデータを取得します。let list = this.data.list;
    //配列定価を受け取る変数を宣言する
    合計を 0 にします。
    // リストをループして各データを取得します for (let i = 0; i < list.length; i++) {
      // 選択して価格を計算するかどうかを決定します if (list[i].selected) {
        // すべての価格を合計する count_money
        合計 += リスト[i].num * リスト[i].price;
      }
    }
    //最後に値をデータに割り当ててページにレンダリングします this.setData({
      リスト: リスト、
      合計価格: total.toFixed(2)
    });
  },

})