小程序多选去选

<template>

  <div style="background: #f2f2f2">

    <div v-for="(item, i) in cardInfoList" :key="i">

      <div class="wrap_box">

        <div class="head_title">

          <van-checkbox icon-size="16px" shape="square" v-model="item.isChecked"

            @change="handleChange(item, i)" ></van-checkbox>     

          <div style="margin-left: 10rpx;display:flex;"> 

            <div>订单号：1294839589439543 </div>

            <div>

              <span class="right_btn ">异常上报</span>

              <span  class="right_btn " >装车</span> 

            </div>   

          </div>  

        </div>

        <div class="content"> 

          <div style="display:flex;">

            <div><img class="content_img" src="/static/images/driver/receipt.png" /></div>

            <div style="margin-left: 20rpx;">收货地：{{item.receipt}}</div>

          </div>

          <div style="display:flex;">

            <div><img class="content_img" src="/static/images/driver/phone.png" /></div>

            <div style="margin-left: 20rpx;">收货地联系人：{{item.name}}/ {{item.phone}}</div>

          </div>

          <div style="display:flex;">

            <div><img class="content_img" src="/static/images/driver/car.png" /></div>

            <div style="margin-left: 20rpx;">配送方式：{{item.type}}</div>

          </div>

          <div style="display:flex;">

            <div><img class="content_img" src="/static/images/driver/goods.png" /></div>

            <div style="margin-left: 20rpx;">货品名称： {{item.goods}}</div>

          </div>

          <div style="display:flex;">

            <div><img class="content_img"  src="/static/images/driver/pack.png" /></div>

            <div style="margin-left: 20rpx;">包装方式：{{item.pack}}</div>

          </div>

          <div style="display:flex;">

            <div><img class="content_img"  src="/static/images/driver/remark.png" /></div>

            <div style="margin-left: 20rpx;">备注：{{item.remark}}</div>

          </div>

          <div style="margin-top: 20rpx;">

            <div style="font-size:12px;text-overflow:ellipsis;overflow:hidden;display:flex;justify-content: space-around;">

              <p>总计  数量(件)：{{item.qty}} 体积(m3): {{item.qty}} 重量(吨): {{item.weight}} </p>

              <p v-if="item.isFold" @click="handleFold(i,item.isFold)"><img class="content_img"  src="/static/images/driver/down.png" /> </p>

              <p v-else @click="handleFold(i,item.isFold)"><img class="content_img"  src="/static/images/driver/up.png" /> </p>

            </div>

          </div>

          <div style="margin-top: 20rpx;" v-if="item.isFold">

                {{item.children}}

              </div>

        </div>

      </div>

    </div>

    <div style="height:160rpx;width:100%;"></div>

    <p class="selected_list"><span>已选：{{totalQty}}票</span>  <span>数量(件)：{{totalPcs}}</span></p>

    <div class="card_bottom">

      <div>

        全选/去选

        <van-switch

          size="18px"

          v-model="checkedAll"

          @change="handleCheckAll"

        />

      </div>

      <div style="display:flex;margin-left:90rpx">

        <button class="btn"  @click="handelFee">

          上报杂费

        </button>

        <button class="btn"  @click="handleComfirm">

          装车完成

        </button>

      </div>

    </div>

    <van-toast id="van-toast" />

  </div>

</template>

 

<script>

import Toast from "@/../static/vant/toast/toast";

 

export default {

  data() {

    return {

      result: [],

      totalPcs:'0',

      totalQty:'0',

      checkList:[],

      checkedAll: false,

      cardInfoList: [

        //测试数据

        {

          id: 1,

          isChecked:false,

          isFold:false,

          receipt: "深圳市龙岗区",

          name:'章程',

          phone:'18599849993',

          qty: "10",

          vol:'34',

          weight:'500',

          type:'配送',

          goods:'自行车',

          pack:'托盘',

          remark: "第三方第三方的身份",

          children:'111111111111'

        },

        {

          id: 2,

          isChecked:false,

          isFold:false,

           receipt: "深圳市南山",

          name:'福地',

          phone:'18599849993',

          qty: "78",

          vol:'34',

          weight:'500',

          type:'配送',

          goods:'自行车',

          pack:'托盘',

          remark: "第三方第三方的身份",

          children:'22222222222222'

        },

         {

          id: 3,

          isChecked:false,

          isFold:false,

          receipt: "深圳市罗湖区",

          name:'李达',

          phone:'18599849993',

          qty: "32",

          vol:'34',

          weight:'500',

          type:'配送',

          goods:'自行车',

          pack:'托盘',

          remark: "第三方第三方的身份",

          children:'3333333333333'

        },

      ],

    };

  },

 

  components: {},

  onShow() {

    // this.initData()

  },

  methods: {

    handleFold(e,i){

      this.cardInfoList[e].isFold = !i

    },

    handleChange(e, k) {

      this.cardInfoList[k].isChecked = !this.cardInfoList[k].isChecked;

      if(e.isChecked == true){

        this.checkList.push(e)

      }else{

        for(let i = 0; i < this.checkList.length; i++){

          if(this.checkList[i].id == e.id){

          this.checkList.splice(i,1)

          }

        }

      }

      //总件数

      let sum = 0

      for(let key in this.checkList){

        console.log(key)

        let data = parseInt(this.checkList[key].qty)

        sum += data

      }

      this.totalPcs = sum

      //总票数

      this.totalQty = this.checkList.length

      if(this.checkList.length < 1){

        this.totalQty = '0'

      }else{

        this.totalQty = this.checkList.length

      }

      //全选、去选

      if(this.checkList.length == this.cardInfoList.length ){

        this.checkedAll = true;

      }else{

        this.checkedAll = false;

      }

    },

    handleCheckAll() {

      this.checkedAll = !this.checkedAll;

      if (this.checkedAll === true) {

        for (let i = 0; i < this.cardInfoList.length; i++) {

          this.cardInfoList[i].isChecked = true;

        }

        //总件数

      let sum = 0

      for(let key in this.cardInfoList){

        console.log(key)

        let data = parseInt(this.cardInfoList[key].qty)

        sum += data

      }

      this.totalPcs = sum

      this.totalQty = this.cardInfoList.length

      } else {

        for (let i = 0; i < this.cardInfoList.length; i++) {

          this.cardInfoList[i].isChecked = false;

        }

        this.totalPcs = 0

        this.totalQty = 0

      }

    },

    handleComfirm() {

      console.log(this.cardInfoList);

    },

  },

  created() {},

};

</script>

<style lang="wxss">

page {

  background-color: #f2f2f2;

  font-size: 28rpx;

  color: #444;

}

</style>

<style scoped>

.content{

  font-size: 13px;

  padding: 24rpx;

}

.content_img{

  width: 32rpx;

  height: 32rpx;

}

.wrap_box {

   width:94%;

   margin-left: 3%;

   background: white;

   margin-top: 20rpx;

   border-radius: 16rpx;

}

.head_title {

  display: flex;

  padding: 20rpx;

  border-bottom: 1rpx solid #ddd;

}

.btn {

  width: 178rpx;

  line-height: 35px;

  height: 70rpx;

  font-size: 30rpx;

  margin-left: 20rpx;

  border: none;

  color: #fff;

  background: #219746;

}

.selected_list{

  background:#f3f3f3;

    position: fixed;

    bottom: 100rpx;

    width: 100%;

    padding-left: 20rpx;

}

.card_bottom {

    display: flex;

    position: fixed;

    width: 100%;

    bottom: 0rpx;

    padding-left: 20rpx;

    height: 100rpx;

    background: #f3f3f3;

    line-height: 100rpx;

}

.right_btn{

  width: 100rpx;

  background: #219746;

  font-size: 14px;

  color: white;

  padding: 8rpx;

  border-radius: 6rpx;

  margin-left: 10rpx;

}

 

</style>