vue购物车全选结算

待完成

    原始数据
    data(){
      return {
        cardList: [],
        multipleSelection: [],
        totalNum: 0,
        totalPrice: 0,
        mark: true
      }
    }
    // 加减
          handleChange(value, row, scopeIndex, index, childrenIndex, sizeType) {
            let singleOrderCount = 0
            this.cardList[scopeIndex].bodyInfo.size.forEach((item, index) => {
              item.bodyData.forEach((el, i) => {
                singleOrderCount += el.count
              })
            })
            // 数量改变时，总价改变
            this.cardList[scopeIndex].countPrice = singleOrderCount * this.cardList[scopeIndex].unitPrice;
            this.cardList[scopeIndex].countPrice2 = singleOrderCount * this.cardList[scopeIndex].unitPrice2;
            let _row = {...row};
            _row.bodyInfo = JSON.stringify(_row.bodyInfo);
            let setData = {
              id: _row.id,
              productId: _row.productId,
              bodyInfo: _row.bodyInfo
            }
            if (this.mark) {
              put(`/shoppingCart/putBody`, setData).then(res => {
                // console.log(res)
                this.cardList[scopeIndex].countPrice = res.countPrice;
                this.cardList[scopeIndex].countPrice2 = res.countPrice2;
                this.cardList[scopeIndex].unitPrice = res.unitPrice;
                this.cardList[scopeIndex].unitPrice2 = res.unitPrice2;
                this.mark = true;
              });
            }
            this.mark = false;
            this.getTotal();
          } 
      // 获取总数(总价钱和数量)
      getTotal () {
        if (this.multipleSelection && this.multipleSelection.length !== 0) {
          let a = 0;
          let b = 0;
          let c = 0
          this.multipleSelection.forEach(function (element, index) {
            a = 0
            element.bodyInfo.size.forEach(function (e, i) {
              e.bodyData.forEach((item, index) => {
                a += item.count;
                c += item.count;
              })
            })
            b += Number(element.unitPrice) * a;
          }, this);
          this.totalNum = c;
          this.totalPrice = b;
        } else {
          this.totalNum = 0;
          this.totalPrice = 0;
        }
      }



html

        <div v-if="cardList.length>0" :style="{'margin-bottom':cardList.length<=1?'200px':'0'}">
            <el-table :data="cardList" style="margin-top:40px;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column :render-header="renderTableHeader('BOKEKEY048')" :label="LANG('BOKEKEY048')" align="center">
                    <template slot-scope="scope">
                        <div>
                            <img :src="scope.row.productImg" height="150" width="auto" alt>
                            <p>{{scope.row.productName}}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :render-header="renderTableHeader('BOKEKEY042')" :label="LANG('BOKEKEY042')"  align="center">
                    <template slot-scope="scope">
                        <div v-for="(record,index) in scope.row.bodyInfo.size" :key="index">
                            <el-row v-for="(children,childrenIndex) in record.bodyData" :key="childrenIndex"
                                    style="line-height:22px;height:38px;">
                                <el-col :span="12">{{record.sizeType}}</el-col>
                                <el-col :span="12">{{children.codeNumber}}</el-col>
                            </el-row>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :render-header="renderTableHeader('BOKEKEY041')" :label="LANG('BOKEKEY041')" align="center" width="200">
                    <template slot-scope="scope">
                        <div v-for="(record,index) in scope.row.bodyInfo.size" style="margin-bottom:10px" :key="index">
                            <el-row v-for="(children,childrenIndex) in record.bodyData" :key="childrenIndex"
                                    style="height:38px;">
                                <el-col :span="24">
                                    <el-input-number v-model="children.count"
                                                     @change="(value) =>{handleChange(value,scope.row,scope.$index,index,childrenIndex,record.sizeType)}"
                                                     :min="1" size="mini"></el-input-number>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :render-header="renderTableHeader('BOKEKEY050')" :label="LANG('BOKEKEY050')" align="center">
                    <template slot-scope="scope">
                        <div>
                            <p v-if="scope.row.unitPrice !== scope.row.unitPrice2">${{scope.row.unitPrice / 100}}</p>
                            <p :style="pricestyle(scope.row.unitPrice,scope.row.unitPrice2)">
                                ${{scope.row.unitPrice2 / 100}}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :render-header="renderTableHeader('BOKEKEY268')" :label="LANG('BOKEKEY268')" align="center">
                    <template slot-scope="scope">
                        <div>
                            <!-- xiugai  -->
                            <p v-if="scope.row.countPrice !== scope.row.countPrice2"
                               style="font-size: 20px;font-weight: 700;color: #A2664F;">
                                ${{scope.row.countPrice / 100}}</p>
                            <p :style="pricestyle(scope.row.countPrice,scope.row.countPrice2,true)">
                                ${{scope.row.countPrice2 / 100}}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :render-header="renderTableHeader('BOKEKEY278')" :label="LANG('BOKEKEY278')" align="center">
                    <template slot-scope="scope">
                        <div>
                            <p>{{LANG('BOKEKEY269')}}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :render-header="renderTableHeader('BOKEKEY270')" :label="LANG('BOKEKEY270')" align="center">
                    <template slot-scope="scope">
                        <div>
                            <p><span style="cursor:pointer;color:red"
                                     @click="handleDelete(scope.$index, scope.row)">{{LANG('BOKEKEY212')}}</span></p>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="card_footer">
                <span class="cf_check">&nbsp;</span>
                <!-- <el-checkbox v-model="checked" class="cf_check"></el-checkbox> -->
                <div class="cf_right" style="float:right">
                    <span>{{LANG('BOKEKEY271')}}&nbsp;&nbsp;{{totalNum}}&nbsp;&nbsp;{{LANG('BOKEKEY116')}}</span>
                    {{LANG('BOKEKEY272')}}：
                    <span>${{totalPrice / 100}}</span>
                    <el-button type="primary" @click="handleToPay">{{LANG('BOKEKEY273')}}</el-button>
                </div>
            </div>
        </div>