daimp-front/sub-operation-service/src/views/ecommerce/index.vue

<template>
  <div>
    <common current-name="agricultural">
      <template #main>
        <!-- <banner :imglist="bannerList"></banner> -->
        <!-- 原来的顶部筛选组件，不好用 -->
        <!-- <filtertop :list="treeList" @select="selected" @search="search"></filtertop> -->

        <!-- 顶部筛选条件 -->
        <div class="filter-container">
          <div style="width: 40%; margin-left: 10px; margin-bottom: 10px">
            <div class="search-container">
              <div class="search-box">
                <input v-model="searchName" type="text" placeholder="请输入农资商品名称" class="search-input" />
                <button class="search-button" @click.stop="onQuery()">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <costomTabs :list="treeList" @change="changeTabs"></costomTabs>
        </div>

        <div class="goods-list-warp">
          <div class="goods-list">
            <template v-for="(n, index) in list" :key="n.id">
              <div class="goods-item">
                <goodsItem :data="n" :type="1"></goodsItem>
              </div>
            </template>
          </div>
          <el-pagination
            :current-page="pagination.current"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </template>
    </common>
  </div>
</template>
<script setup name="ecommerce">
import common from './components/common.vue';
import banner from './components/banner.vue';
import filtertop from './components/filtertop.vue';
import goodsItem from './components/goodsItem.vue';
import costomTabs from '@/components/costomTabs.vue';
import { ref, reactive, onMounted, onBeforeMount, onUnmounted, watch, computed } from 'vue';
import { transaction, agriculturalList } from '@/apis/agricultural';
let treeList = reactive([
  // {
  //   id: '01',
  //   name: '种子/种苗',
  //   children: [
  //     { parentId: '01', id: '0101', name: '小麦种子' },
  //     { parentId: '01', id: '0102', name: '水稻种子' },
  //     { parentId: '01', id: '0103', name: '玉米种子' },
  //     { parentId: '01', id: '0104', name: '番茄种子' },
  //     { parentId: '01', id: '0105', name: '白菜种子' },
  //   ],
  // },
  // {
  //   id: '02',
  //   name: '农药',
  //   children: [
  //     { parentId: '03', id: '0101', name: '杀虫剂' },
  //     { parentId: '03', id: '0102', name: '杀菌剂' },
  //     { parentId: '03', id: '0103', name: '除草剂' },
  //     { parentId: '03', id: '0104', name: '杀螨剂' },
  //   ],
  // },
  // {
  //   id: '03',
  //   name: '化肥',
  //   children: [
  //     { parentId: '02', id: '0101', name: '有机肥' },
  //     { parentId: '02', id: '0102', name: '水溶肥' },
  //     { parentId: '02', id: '0103', name: '天然肥料' },
  //   ],
  // },
]);
onBeforeMount(() => {
  // 在 DOM 挂载前调用
  getTree();
  getList();
});
const changeTabs = (paramsArr) => {
  console.log('tabs选项', paramsArr);
  let level1Id = 0;
  let level2Id = 0;
  let level3Id = 0;

  if (paramsArr.length >= 1) {
    level1Id = paramsArr[0]?.name == '全部' ? 0 : paramsArr[0]?.id || 0;
  }
  if (paramsArr.length >= 2) {
    level2Id = paramsArr[1]?.name == '全部' ? 0 : paramsArr[1]?.id || 0;
  }
  if (paramsArr.length >= 3) {
    level3Id = paramsArr[2]?.name == '全部' ? 0 : paramsArr[2]?.id || 0;
  }

  console.log('处理后的ID:', level1Id, level2Id, level3Id);
};
//获取农资商品分类
const getTree = () => {
  transaction().then((res) => {
    if (res.code === 200) {
      let a = res.data.sort((a, b) => Number(b.id) - Number(a.id));
      treeList.splice(0, treeList.length, ...a);
      // console.log('treeList', treeList);
    }
  });
};

//获取农资商品列表
let searchName = ref('');
let list = reactive([]);
let params = reactive({
  current: 1,
  size: 10,
  parentId: null,
  childrenId: null,
});
let pagination = reactive({
  current: 1,
  size: 20,
  total: 0,
});
const handleSizeChange = (val) => {
  pagination.size = val;
  getList();
};
const handleCurrentChange = (val) => {
  pagination.current = val;
  getList();
};
const getList = (data) => {
  if (data) {
    params.goodName = data.searchName;
  }
  params.current = pagination.current;
  params.size = pagination.size;
  agriculturalList(params).then((res) => {
    if (res.code === 200) {
      list.splice(0, list.length, ...res.data.records);
      pagination.total = res.data.total;
    }
  });
};

// let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner1.png']);
const onQuery = () => {
  getList({ searchName: searchName.value });
};
const search = (data) => {
  getList();
};

const selected = (data) => {
  // 获取所有值并转为数组
  // const val = Object.values(data);
  params.categoryId = data.id;
  // if (val.length === 1) {
  //   params.parentId = val[0].id;
  // } else {
  //   if (val[0].id === '') {
  //     params.childrenId = null;
  //     params.parentId = null;
  //   } else {
  //     params.childrenId = val[val.length - 1].id;
  //     params.parentId = val[val.length - 1].parentId;
  //   }
  // }
  getList();
};
</script>
<style lang="scss" scoped>
.goods-list-warp {
  margin-top: 16px;
  width: 100%;
  .goods-list {
    display: inline-flex;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    .goods-item {
      display: inline-block;
      overflow: hidden;
      margin-bottom: 16px;
      width: calc((100% - 50px) / 5);
      border-radius: 16px;
      background: $color-fff;
    }
  }
  /* 添加伪元素占位 */
  .goods-list::after {
    content: '';
    flex: auto;
  }
}

// 顶部筛选条件背景容器
.filter-container {
  padding: 16px 16px 6px 16px;
  width: 100%;
  border-radius: 16px;
  text-align: left;
  background: $color-fff;
  // 搜索框样式
  .search-container {
    display: flex;
    justify-content: center;
    padding: 0 16px 0 0;
    .search-box {
      position: relative;
      width: 100%;
      max-width: 600px;
    }
    .search-input {
      width: 100%;
      padding: 10px;
      border: 1px solid black;
      border-radius: 14px;
      font-size: 14px;
      color: #333;
      outline: none;
      transition: border-color 0.3s;
    }
    .search-input:focus {
      border-color: #409eff;
    }
    .search-input::placeholder {
      color: #999;
    }
    .search-button {
      position: absolute;
      right: -10px;
      top: 55%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 4px;
      color: #000;
    }
    .search-button:hover {
      color: #409eff;
    }
  }
}
</style>