vue2全选反选

<template>
  <div id="jueseQiehuan">
    <b-header title="收货地址"></b-header>
    <scroll>
      <div class="title">
        <div>收货地址</div>
        <div class="title-edit" v-if="!isEdit" @click="editDelete">编辑</div>
        <div class="title-edit" v-else @click="editFinish" style="color: #797C80">完成</div>
      </div>
      <div class="container">
        <div class="cont" v-show="!isEdit" @click="editAddress">
          <div class="cont-left">
            <p class="cont-left-title"><span>王晓花</span>158****77991</p>
            <p class="cont-left-addr">四川省成都市吉泰五路88号香年广场T2楼46层4602号</p>
          </div>
          <div class="cont-right">
            <span class="edit"></span>
          </div>
        </div>
        <label style="display:block;" v-show="isEdit" v-for="(item, index) in list" :key="index" @click="checkAddress(item)">
          <div class="cont">
            <div class="cont-right">
              <span class="check" style="margin-right: .2rem;vertical-align: middle;">
                <i class="icon" :class="item.on ? 'icon-checked' : 'icon-check'"></i>
              </span>
            </div>
            <div class="cont-left" style="width: 90%;">
              <p class="cont-left-title"><span>{{item.name}}</span>{{item.tel}}</p>
              <p class="cont-left-addr">{{item.address}}</p>
            </div>
          </div>
        </label>
      </div>

      <div class="checkAll" v-show="isEdit">
        <div class="checkAll-left" @click="checkAll">
          <span class="check">
              <!-- <input type="radio" name="check" :id="'radio'+item.id" /> -->
              <i class="icon" :class="chosenAddressId ? 'icon-checked' : 'icon-check'"></i>
          </span>
          全选
        </div>
        <div class="checkAll-right" @click="deleteAddress">
          <span>删除</span>
        </div>
      </div>

      <!-- <div class="nodata">暂无数据</div> -->
      <div class="footer" v-show="!isEdit" @click="addAddress">新增收货地址</div>
    </scroll>
  </div>
</template>

<script>
import BHeader from 'components/base/header/header'
import Scroll from 'components/base/scroll/scroll'
export default {
  components: {
    BHeader,
    Scroll
  },
  data () {
    return {
      isEdit: false,
      chosenAddressId: false,
      list: [
        {
          id: '1',
          name: '张三',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          on: false
        },
        {
          id: '2',
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号',
          on: false
        }
      ],
      disabledList: [
        {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号',
          on: false
        }
      ]
    }
  },
  methods: {
    addAddress () {
      this.$router.push('/cloud/addAddress')
    },
    editAddress () {
      this.$router.push('/cloud/editAddress')
    },
    checkAddress (item) {
      var i = 0
      this.list.forEach(res => {
        if (item.id === res.id && item.on) {
          res.on = false
        } else if (item.id === res.id && !item.on) {
          res.on = true
        }
        if (res.on) i++
      })
      if (i === this.list.length) {
        this.chosenAddressId = true
      } else {
        this.chosenAddressId = false
      }
    },
    checkAll () {
      if (!this.chosenAddressId) {
        this.chosenAddressId = true
        this.list.forEach(res => {
          res.on = true
        })
      } else {
        this.chosenAddressId = false
        this.list.forEach(res => {
          res.on = false
        })
      }
    },
    editDelete () {
      this.isEdit = true
    },
    editFinish () {
      this.isEdit = false
    },
    deleteAddress () {
      alert('删除调用接口')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~assets/styles/mixin";
#jueseQiehuan {
  height: 100%;
  background-color: #fff;
  .title {
    border-bottom: 1px solid #F1F3F8;
    padding: 1.125rem .94rem;
    color:rgba(44,43,64,1);
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    .title-edit {
      height:1.31rem;
      font-size:0.94rem;
      font-family:PingFangSC-Medium;
      font-weight:500;
      color:rgba(76,136,255,1);
      line-height:1.31rem;
    }
  }
  .container {
    padding: 0 .94rem;
    margin-bottom: 4rem;
    .cont {
      display: flex;
      justify-content: space-between;
      padding: .94rem 0;
      border-bottom: 1px solid #F1F3F8;
      .cont-left {
        width: 80%;
        color: #17181A;
        .cont-left-title {
          font-size:0.75rem;
          font-family:PingFangSC-Medium;
          font-weight:500;
          margin-bottom: 0.25rem;
          font-weight: 600;
          line-height:1.25rem;
          height:1.25rem;
          span {
            font-size: .94rem;
            margin-right: .5rem;
          }
        }
        .cont-left-addr {
          font-size:0.94rem;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(121,124,128,1);
          line-height:1.25rem;
        }
      }
      .cont-right {
        position: relative;
        .edit {
          @include background-image('cloud/address_edit');
          display: block;
          height: 1.375rem;
          width: 1.375rem;
          position: absolute;
          top: 50%;
          right: 15px;
          font-size: 16px;
          transform: translate(0,-50%);
        }
        .check {
          top: 50%;
          left: 0;
          font-size: 16px;
          position: absolute;
          -webkit-transform: translate(0,-50%);
          transform: translate(0,-50%);
          height: 1.125rem;
          width: 1.125rem;
          input {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            margin: 0;
            width: 100%;
            height: 100%;
          }

        }
      }
    }
  }
  .icon {
    position: relative;
    display: inline-block;
    font: normal normal normal 14px/1 vant-icon;
  }
  .icon-checked {
    position: relative;
    display: inline-block;
    font: normal normal normal 14px/1 vant-icon;
    font-size: inherit;
    text-rendering: auto;
    color: #17181A;
  }
  .icon-check {
    color: #999;
    font: normal normal normal 14px/1 "vant-icon";
  }
  .icon-checked::before {
    content: "\F011";
  }
  .icon-check::before {
    content: "\F010";
  }
  .icon::before {
    display: inline-block;
  }
  .checkAll {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: center;
    color: #fff;
    font-size: .94rem;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #EEEEEE;
    .checkAll-left {
      font-size:0.81rem;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(44,43,64,1);
      width: 20%;
    }
    .checkAll-right {
      width: 30%;
      span{
        width: 100%;
        display: block;
        height: 3.125rem;
        line-height: 3.125rem;
        text-align: center;
        font-size:0.88rem;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        background-color: #F55858;
      }
    }
  }
  .nodata {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size:0.88rem;
    color:rgba(27,28,30,1);
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: center;
    color: #fff;
    font-size: .94rem;
    background-color: #4C88FF;
  }
}
</style>