搜索多选

<template>
  <div class="container">
    <div class="main">
      <div class="main_bar">
        <van-sidebar v-model="categoryIndex" class="sidebar" @change="onCategoryChange" >
          <van-sidebar-item v-for="item in categoryList" :key="item.id" :title="item.name" />
        </van-sidebar>
      </div>

      <div class="right-content">
        <div class="right-search">
          <van-search 
            show-action 
            v-model="searchValue" 
            @clear="onClear"
            placeholder="请输入搜索关键词">
            <template #action>
            <div @click="onClickButton">搜索</div>
          </template>
        </van-search>
        </div>
        <van-list
          v-model:loading="listLoading"
          v-model:error="listError"
          class="list-prodall"
          :finished="listFinished"
          :finished-text="listFinishedText"
          :immediate-check="false"
          @load="onPageLoad"
        >
          <van-checkbox-group ref="checkboxGroup" v-model="CheckedAllArr">
            <div v-for="(item,index) in listProduct" :key="index" class="list-col" >
              <div class="list-item" @click="toggle(index)" >
                <van-image
                  class="list-item-photo"
                  :src="item.imageUrl"
                  lazy-load
                  width="70px"
                  height="70px"
                  :alt="item.name"
                >
                  <template v-slot:error>加载失败</template>
                </van-image>
                <div class="list-item-info">
                  <div class="list-item-title"> {{ item.name }}</div>
                  <div class="list-item-netContent item-padding"> 净含量：{{ item.netContent }}{{ item.netContentUnit }}</div>
                  <div class="list-item-netContent" v-if="item.specification"> 规格：{{ item.specification }}</div>
                  <div class="list-item-check">
                    <van-checkbox 
                      :name="JSON.stringify(item)" 
                      icon-size="26px" 
                      :ref="el => checkboxRefs[index] = el"
                      @click.stop
                    >
                    </van-checkbox>
                  </div>
                </div>
              </div>
            </div>
          </van-checkbox-group>
          <template #finished>
            <span v-if="listProduct.length">{{ listFinishedText }}</span>
            <van-empty v-else :description="listEmptyText" />
          </template>
        </van-list>
      </div>
    </div>
    <!-- 底部导航栏 -->
    <van-submit-bar   button-text="保存" :loading="loadButton"  @submit="onSubmit" >
      <div class="count_all" >选择总计：{{CheckedAllArr.length}}</div>
    </van-submit-bar>
  </div>
</template>



<script  setup>
import { onMounted, ref, unref,nextTick,watch } from "vue";
import { useRouter } from "vue-router";
import { Toast,Lazyload  } from 'vant';
import { categoryAll,goodsAll,batchAdd } from "@/request/productApi.js";
onMounted(() => {
  getCategoryList();
});
const pageCurrent = ref(1);
const pageSize = ref(10);
const router = useRouter();
const listProduct = ref([]);
const listLoading = ref(false);
const listFinished = ref(false);
const listError = ref(false);
const listFinishedText = ref("没有更多数据了");
const listEmptyText = ref("暂无商品");
const searchValue = ref("")
const categoryIndex = ref(0);
const CheckedAllArr = ref([])
const categoryList = ref([]);
const loadButton = ref(false)

const checkboxRefs = ref([]);

watch(searchValue,(newValue,oldValue)=>{
    if(newValue==''){
      onClear()
    }
    
})

//开始
onMounted(() => {
    
});


function onClickButton(){
  listProduct.value=[]
  pageCurrent.value = 1;
  onPage()
}
 function onClear(){
  listProduct.value=[]
  searchValue.value ='';
  pageCurrent.value = 1;
  onPage()
 
}



function onCategoryChange() {

  pageCurrent.value = 1;
  searchValue.value = '';
  listProduct.value=[]
  listLoading.value =false;
  listFinished.value =false;
  onPage();
}

function getCategoryList() {
  categoryAll().then((res) => {
    categoryList.value = res.data
    onPage();
  })
  .catch((error) => {
    console.error(error);
  });
}

function onSubmit() {
  let newlist =[]
  CheckedAllArr.value.forEach((item,index) =>{
    newlist.push(JSON.parse(item))
     
  })

  loadButton.value=true;
  batchAdd(newlist).then((res) => {
  if(res){
    Toast.success('新增成功');
    router.back();
  }
    
  })
  .catch((error) => {
    
  })
  .finally((end) => {
    loadButton.value=false
  });
}

// function toggle(index){
//   checkboxRefs.value[index].toggle();
// }

const toggle = (index) => {
  console.log(checkboxRefs.value[index])
  console.log(checkboxRefs.value[index].toggle())
       checkboxRefs.value[index].toggle();
       console.log(CheckedAllArr.value)
  };

function onPage() {
  listLoading.value = true;
  const params = {
    categoryId: categoryList.value[categoryIndex.value].id,
    keyword:searchValue.value,
    pageSize:pageSize.value,
    pageNum: pageCurrent.value,
  };

  goodsAll(params).then((res) => {
    const records = res.data.list ? res.data.list: [];
    const total = res.data.total ? res.data.total: 0;
    listProduct.value = unref(pageCurrent) === 1 ? records : unref(listProduct).concat(records);
    listLoading.value = false;
    listFinished.value = listProduct.value.length >= total;   
  })
  .catch((error) => {
    listLoading.value = false;
    listError.value = true;
  });
}

function onPageLoad() {
  if (unref(listFinished)) {
    return;
  }
  pageCurrent.value += 1;
  setTimeout(function() {
    onPage();

  }, 1000);
 
}
</script>


<style>

  .van-submit-bar__bar{
    display: flex!important;
    justify-content: space-between!important;
  }
.list-item-photo img {
  display: block;
}
</style>

<style scoped>
.list-prodall{
  padding-top: 55px;
  padding-bottom: 40px;
}
.right-search{
  position: fixed;
  top: 0px;
  left: 98px;
  z-index: 999;
  width: calc(100% - 100px);;
  box-sizing: border-box;
  padding: 2px 6px;
  background: white;
}
  .count_all{
    font-size: 16px;
  }
  .list-item-title{
    color: #333333;
    font-size: 16px;
  }
  .list-item-netContent{
    color: #999999;
    font-size: 14px;
  }
  .item-padding{
    padding: 2px 0px;
  }
  .list-item-check{
    display: flex;
    justify-content: flex-end;
  }
.main_bar{
  height: 100vh;
}
.right-content{
  height: 100vh;
  background: #F0F2F5;
  position: relative;
}
.main {
  display: flex;
  background: white;
}

.sidebar {
  width: 100px;
  height: 100%;
  background-color: white;
}

.right-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.list {
  width: 100%;
}
.list-col {
  width: 100%;
  background: white;
}
.list-item {

  width: 100%;
  display: flex;
  margin-bottom: 4px;
  box-sizing: border-box;
  padding: 4px 2px;
  align-items: center;
}
.list-item-info{
  box-sizing: border-box;
  padding: 3px 6px;
  padding-left: 6px;
  flex: 1;
}
.buy-btn {
  height: 24px;
  padding: 0 8px;
  line-height: 24px;
}

.price {
  display: flex;
  align-items: center;
}
</style>