vue - 实现购物车分类商品的单选和多选

一时失言乱红尘 2021-08-26 19:28 539阅读 0赞

今天用了一下空闲时间来实现了购物车部分商品的单选和多选，下面来个案例供大家参考：

### 效果图：![在这里插入图片描述][2020030516472948.gif] ###

### 案例代码如下： ###

<template>
      <div class="text">
        <div class v-for="(item,index) in dataList" :key="index">
          <div class="yesterday">{
       {item.kinds}}</div>
          <div class="list_wrap" v-for="(item1,index) in item.list" :key="index">
            <div class="select_wrap" @click="selectItem(item1)">
              <img class="select" src="https://i.loli.net/2020/03/05/2ODunK73vlaHhIw.png" mode v-if="item1.checked" />
              <img class="select" src="https://i.loli.net/2020/03/05/zaBLDGlk2dCUwZQ.png" mode v-else />
            </div>
            <img class="btimg" :src="item1.img" mode />
            <div class="item_wrap">
              <div class="title">{
       {item1.title}}</div>
            </div>
          </div>
        </div>
        <div class="foot_wrap">
          <div class="select_wrap" @click="selectAll">
              <img class="select" src="https://i.loli.net/2020/03/05/2ODunK73vlaHhIw.png" mode v-if="isChecked" />
              <img class="select" src="https://i.loli.net/2020/03/05/zaBLDGlk2dCUwZQ.png" mode v-else />
            </div>
          <div class="allselect">全选</div>
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          dataList: [
            {
              kinds: "分类1",
              list: [
                {
                  img:
                    "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=97571592,2934218527&fm=11&gp=0.jpg",
                  title: "时间看似残忍，其实不然，只是美与真之间，总是留下真而已。",
                  checked: false
                },
                {
                  img:
                    "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1545504521,501407176&fm=11&gp=0.jpg",
                  title: "时间会见证和成全一切成长和改变。",
                  checked: false
                },
                {
                  img:
                    "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3394426466,628987709&fm=26&gp=0.jpg",
                  title:
                    "这一切还需要文字记录，让人心感受，所以文字乃我所喜爱之二。",
                  checked: false
                },
                {
                  img:
                    "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1092627708,517203178&fm=11&gp=0.jpg",
                  title: "少年听雨歌楼上，壮年听雨客舟中，暮年听雨僧庐下。",
                  checked: false
                }
              ]
            },
            {
              kinds: "分类2",
              list: [
                {
                  img:
                    "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3829540518,272129763&fm=11&gp=0.jpg",
                  title:
                    "公道世间唯白发，贵人头上不曾饶。少年易老学难成，一寸光阴不可轻。",
                  checked: false
                },
                {
                  img:
                    "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=186331454,2043130141&fm=26&gp=0.jpg",
                  title:
                    "愿每个人都能发现最美的文字表达最真实的自己，不负韶华，留下最美时光。最美的时光沉淀出最美的文字，在最美的文字中追忆最美的时光。",
                  checked: false
                },
                {
                  img:
                    "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=183246121,2109342373&fm=26&gp=0.jpg",
                  title:
                    "时间和文字在一个个老庭院里厮磨，这是文化存在的极温暖方式。千般荒凉，以此为梦；万里蹀躞，以此为归。",
                  checked: false
                }
              ]
            }
          ],
          isChecked:false, // 是否全选
          checkList:[],  // 选中的项
        };
      },
      methods: {
        // 单选
        selectItem(item) {
          // console.log('item====>',item);
          item.checked = !item.checked;
          this.getCheck();
          this.isChecked = this.isCheckedAll();
        },
    
        // 全选
        selectAll(){
          // console.log("全选。。。。");
          // 先判断是否有某一项没有被选中,有，则让每一项都变成选中，反之都变成不选中
          let isSelectAll = this.isCheckedAll();
          let lists = [...this.dataList];
          for (let i = 0; i < lists.length; i++) {
            const item = lists[i];
            for (let j = 0; j < item.list.length; j++) {
              const item1 = item.list[j];
              item1.checked = !isSelectAll;
              this.isChecked = !isSelectAll;
            }
          }
          this.dataList = [...lists];
          this.getCheck();
        },
    
        // 判断各个项是否都被选中了
        isCheckedAll(){
          // 假设全部已经被选中
          let isSelectAll = true;
          // 遍历数组，找出没有被选中的项，推翻假设
          let lists = [...this.dataList];
          for (let i = 0; i < lists.length; i++) {
            const item = lists[i];
            for (let j = 0; j < item.list.length; j++) {
              const item1 = item.list[j];
               if(!item1.checked){
                isSelectAll = false;
                // 结束循环
                return isSelectAll;
              }
            }
          }
          return isSelectAll;
        },
    
        // 拿到选中的项
        getCheck(){
          let newList = [...this.dataList];
          let checkList = [];
          newList.forEach((item,index)=>{
            item.list.forEach((item1,index1)=>{
              if(item1.checked){
                checkList.push(item1)
              }
            })
          })
          this.checkList = [...checkList];
    
          console.log("checkList===>选中的项",checkList);
        }
      }
    };
    </script>
    <style lang="less" scoped>
    .text {
      background-color: #fff;
      padding-bottom: 100px;
      .yesterday {
        text-align: left;
        height: 40px;
        line-height: 40px;
        background-color: #f7f5f6;
        font-size: 16px;
        color: #222222;
        padding-left: 15px;
      }
      
      .list_wrap {
        display: flex;
        margin: 15px;
        .select_wrap {
          height: 60px;
          line-height: 60px;
          margin-right: 10px;
          .select {
            width: 22px;
            height: 22px;
            margin-top: 35px;
          }
        }
        .btimg {
          width: 80px;
          height: 80px;
          margin-right: 5px;
        }
        .item_wrap {
          flex: 1;
          display: flex;
          align-items: center;
          .title {
            font-size: 16px;
            color: #222222;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-align: left;
          }
        }
      }
      .foot_wrap {
        display: flex;
        justify-content: start;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        font-size: 16px;
        background-color: #f7f5f6;
        padding-left: 15px;
        .select_wrap {
          margin-right: 10px;
          .select {
            width: 22px;
            height: 22px;
          }
        }
      }
    }
    </style>

[2020030516472948.gif]: /images/20210813/2243fda6fbc7443781bef2e98431bb08.png