单选多选，全选去选 mpvue小程序

最新推荐文章于 2022-09-09 14:30:05 发布

张小萍Becky

最新推荐文章于 2022-09-09 14:30:05 发布

阅读量242

点赞数

本文链接：https://blog.csdn.net/weixin_43764828/article/details/109746230

版权

小程序专栏收录该内容

41 篇文章 2 订阅

订阅专栏

<template>
  <div style="background: #f2f2f2">
    <div  v-for="(item,i) in cardInfoList" :key="i">
      <div style=" padding:10px 20px;display: flex;flex-direction: row;margin-top: 10px;background: #fff;">
        <div style="margin-top: 10px">
          <van-checkbox icon-size="16px" shape="square" :value="item.isChecked" @change="handleChange(item,i)"></van-checkbox>
        </div>
        <div style=" ;margin-left: 10px;">
          <p>
            附件类型：{{item.transferGoodsType}}&nbsp;&nbsp; 调拨数量:{{item.transferQty}}
          </p>
          <p>
            源库位：{{item.sourceStockName}}&nbsp;&nbsp; 目的库位:{{item.destStockName}}
          </p>
          <p>
            附件名称：{{item.transferGoodsName}}
          </p>
        </div>
      </div>


    </div>
    <div class="card_bottom">
      <div>
        全选/去选<van-switch size="18px" v-model="checkedAll"  @change="handleCheckAll"/>
      </div>
      <div>
        <button class="btn" open-type="getUserInfo" @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: [],
      checkedAll: false,
      cardInfoList: [
       //测试数据
        // {
        //   id: 1,
        //   isChecked: false,
        //   type: 'SD卡',
        //   qty: '40',
        //   kuwei: 'NKU001',
        //   time: '2019-01-04 17:34'
        // },
        // {
        //   id: 2,
        //   type: 'SD卡',
        //   isChecked: false,
        //   qty: '50',
        //   kuwei: 'NKU002',
        //   time: '2019-06-08 17:34'
        // }
      ]
    }
  },

  components: {
  },
  onShow () {
    this.initData()
  },
  methods: {
    initData () {
      this.$http.get('/contractor/contractororder/receiveCard?transferContractorCode='+this.$store.state.user.user.contorCode).then(res => {
        if (res.data.data.length == 0) {
          Toast('当前没有可领取的sd卡信息，即将跳转到主页')
          setTimeout(function () {
            wx.redirectTo({
              url: '/pages/driver/tms/tmsCarrier/common/main'
            })
          }, 2000)
          return
        }
        var resultData = res.data.data
      //后台数据没有isChecked属性，自己拼上去
        for (let i = 0; i < resultData.length; i++) {
          resultData[i].isChecked = false
        }
        this.cardInfoList = resultData
      })
    },
    handleChange (e, k) {
      console.log(this.cardInfoList)
      this.cardInfoList[k].isChecked = !this.cardInfoList[k].isChecked
      let arr = []
      for (let i = 0; i < this.cardInfoList.length; i++) {
        if (this.cardInfoList[i].isChecked === true) {
          arr.push(this.cardInfoList[i])
          if (arr.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
        }
      } else {
        for (let i = 0; i < this.cardInfoList.length; i++) {
          this.cardInfoList[i].isChecked = false
        }
      }
    },
    handleComfirm () {
      console.log(this.cardInfoList)
    }
  },
  created () {
  }
}
</script>
<style lang="wxss">
  page{
    background-color: #f2f2f2;
    font-size: 28rpx;color: #444
  }
</style>
<style scoped>
  .btn{
    width: 250px;
    font-size: 30rpx;
    border: none;
    background: #3480e8;
    color: #fff;
   }
.card_bottom{
  display: flex;
  position: absolute;
  line-height: 40px;
  bottom: 0;
}
</style>